/**
 * @file container.stylex.ts
 * @input Uses @stylexjs/stylex, spacing from theme
 * @output StyleX utility for layout container styling
 * @position Layout utility; used by Card, Section components
 *
 * ## Public API for themes
 *
 * Themes set `padding` on container component overrides. The theme build
 * pipeline expands this to component-scoped CSS custom properties, emitting
 * the `--astryx-*` tokens that the component reads:
 *
 *   --astryx-card-padding            (shorthand — all sides; emitted)
 *   --astryx-card-padding-inline     (horizontal)
 *   --astryx-card-padding-block-start
 *   --astryx-card-padding-block-end
 *
 * Read order per level: `var(--astryx-…, <next level>)`, terminating at
 * `--spacing-4`. Same pattern for section and dialog.
 *
 * ```ts
 * components: {
 *   card: { base: { padding: '20px' } },          // → --astryx-card-padding: 20px
 *   section: { base: { padding: '12px 20px' } },  // → directional tokens
 *   dialog: { base: { padding: '16px' } },
 * }
 * ```
 *
 * Internal variables (`--layout-padding-inner-x`, `--container-padding-*`)
 * are implementation details and must not be referenced by themes.
 *
 * SYNC: When modified, update /packages/core/src/Layout/Layout.doc.mjs
 */
import * as stylex from '@stylexjs/stylex';
/**
 * Spacing token keys for padding props.
 */
export type SpacingToken = 'spacing0' | 'spacing0_5' | 'spacing1' | 'spacing1_5' | 'spacing2' | 'spacing3' | 'spacing4' | 'spacing5' | 'spacing6' | 'spacing7' | 'spacing8' | 'spacing9' | 'spacing10' | 'spacing11' | 'spacing12';
/**
 * Map from component name to its theme default padding styles.
 * Each component reads from its own public CSS custom property.
 */
declare const themeDefaultStyles: {
    card: Readonly<{
        readonly containerPaddingInlineStart: Readonly<{
            readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
        }>;
        readonly containerPaddingInlineEnd: Readonly<{
            readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
        }>;
        readonly containerPaddingBlockStart: Readonly<{
            readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
        }>;
        readonly containerPaddingBlockEnd: Readonly<{
            readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
        }>;
        readonly layoutPaddingOuterX: Readonly<{
            readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
        }>;
        readonly layoutPaddingOuterY: Readonly<{
            readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
        }>;
        readonly layoutPaddingInnerX: Readonly<{
            readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
        }>;
        readonly layoutPaddingInnerY: Readonly<{
            readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
        }>;
    }>;
    section: Readonly<{
        readonly containerPaddingInlineStart: Readonly<{
            readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
        }>;
        readonly containerPaddingInlineEnd: Readonly<{
            readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
        }>;
        readonly containerPaddingBlockStart: Readonly<{
            readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
        }>;
        readonly containerPaddingBlockEnd: Readonly<{
            readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
        }>;
        readonly layoutPaddingOuterX: Readonly<{
            readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
        }>;
        readonly layoutPaddingOuterY: Readonly<{
            readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
        }>;
        readonly layoutPaddingInnerX: Readonly<{
            readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
        }>;
        readonly layoutPaddingInnerY: Readonly<{
            readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
        }>;
    }>;
    dialog: Readonly<{
        readonly containerPaddingInlineStart: Readonly<{
            readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
        }>;
        readonly containerPaddingInlineEnd: Readonly<{
            readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
        }>;
        readonly containerPaddingBlockStart: Readonly<{
            readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
        }>;
        readonly containerPaddingBlockEnd: Readonly<{
            readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
        }>;
        readonly layoutPaddingOuterX: Readonly<{
            readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
        }>;
        readonly layoutPaddingOuterY: Readonly<{
            readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
        }>;
        readonly layoutPaddingInnerX: Readonly<{
            readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
        }>;
        readonly layoutPaddingInnerY: Readonly<{
            readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
        }>;
    }>;
};
export type ContainerComponent = keyof typeof themeDefaultStyles;
export interface ContainerOptions {
    /**
     * Shortcut to set all padding values at once.
     * Sets paddingOuterX, paddingOuterY, paddingInnerX, and paddingInnerY
     * to the same value. Individual properties override this when set.
     * @default 'spacing4'
     */
    padding?: SpacingToken;
    /**
     * Outer horizontal padding (left/right).
     * Sets --container-padding-inline-start/end and --layout-padding-outer-x CSS variables.
     * Overrides `padding` for the horizontal outer axis.
     */
    paddingOuterX?: SpacingToken;
    /**
     * Outer vertical padding (top/bottom).
     * Sets --container-padding-block-start, --container-padding-block-end, and --layout-padding-outer-y CSS variables.
     * Overrides `padding` for the vertical outer axis.
     */
    paddingOuterY?: SpacingToken;
    /**
     * Inner horizontal padding for content areas.
     * Sets --layout-padding-inner-x CSS variable.
     * Overrides `padding` for the horizontal inner axis.
     */
    paddingInnerX?: SpacingToken;
    /**
     * Inner vertical padding for content areas.
     * Sets --layout-padding-inner-y CSS variable.
     * Overrides `padding` for the vertical inner axis.
     */
    paddingInnerY?: SpacingToken;
    /**
     * When set to a component name ('card' | 'section'), internal layout
     * padding variables cascade from the component-specific public CSS
     * container tokens (set by theme pipeline from `padding` shorthand)
     * instead of being set to explicit spacing token values.
     *
     * This allows themes to override container padding via component-specific
     * public CSS custom properties without touching internal vars.
     *
     * Used by Card and Section when no explicit padding prop is provided.
     * @default undefined (uses explicit spacing token values)
     */
    useThemeDefault?: ContainerComponent;
    /**
     * Maximum height constraint for the container.
     * Sets --container-max-height CSS variable that Layout reads
     * to enable scroll containment in fill mode.
     * Accepts CSS length values (e.g., '75vh', '500px').
     */
    maxHeight?: string;
}
/**
 * StyleX utility to add layout container styles to any element.
 *
 * Sets CSS variables for padding that child layout components read:
 * - `--container-padding-inline-start` / `--container-padding-inline-end` — Inline padding for edge compensation and bleed
 * - `--container-padding-block-start` / `--container-padding-block-end` — Block padding for vertical bleed
 * - `--layout-padding-outer-x`, `--layout-padding-outer-y` (internal)
 * - `--layout-padding-inner-x`, `--layout-padding-inner-y` (internal)
 *
 * Themes should use `padding` (or `paddingBlock`/`paddingInline`) in
 * component overrides to adjust padding. Do not reference
 * `--layout-padding-*` variables directly.
 *
 * @example
 * ```
 * import { container } from '@astryxdesign/core/Layout';
 * import * as stylex from '@stylexjs/stylex';
 *
 * // Card container with default padding (theme-overridable via padding shorthand)
 * <div {...stylex.props(...container({ useThemeDefault: 'card' }))}>
 *   <Layout ... />
 * </div>
 *
 * // Uniform padding
 * <div {...stylex.props(...container({ padding: 'spacing3' }))}>
 *   <Layout ... />
 * </div>
 *
 * // Asymmetric — padding as base, paddingOuterY overrides vertical
 * <div {...stylex.props(
 *   ...container({ padding: 'spacing3', paddingOuterY: 'spacing2' }),
 *   customStyles.card
 * )}>
 *   <Layout ... />
 * </div>
 * ```
 */
export declare function container({ padding, paddingOuterX, paddingOuterY, paddingInnerX, paddingInnerY, useThemeDefault, maxHeight, }: ContainerOptions): readonly [Readonly<{
    readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
    readonly paddingInlineStart: stylex.StyleXClassNameFor<"paddingInlineStart", "var(--container-padding-inline-start)">;
    readonly paddingInlineEnd: stylex.StyleXClassNameFor<"paddingInlineEnd", "var(--container-padding-inline-end)">;
    readonly paddingBlockStart: stylex.StyleXClassNameFor<"paddingBlockStart", "var(--container-padding-block-start)">;
    readonly paddingBlockEnd: stylex.StyleXClassNameFor<"paddingBlockEnd", "var(--container-padding-block-end)">;
}>, Readonly<{
    readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
}> | Readonly<{
    readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
}> | Readonly<{
    readonly '--container-padding-inline-start': stylex.StyleXClassNameFor<"--container-padding-inline-start", string>;
}>, Readonly<{
    readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
}> | Readonly<{
    readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
}> | Readonly<{
    readonly '--container-padding-inline-end': stylex.StyleXClassNameFor<"--container-padding-inline-end", string>;
}>, Readonly<{
    readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
}> | Readonly<{
    readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
}> | Readonly<{
    readonly '--container-padding-block-start': stylex.StyleXClassNameFor<"--container-padding-block-start", string>;
}>, Readonly<{
    readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
}> | Readonly<{
    readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
}> | Readonly<{
    readonly '--container-padding-block-end': stylex.StyleXClassNameFor<"--container-padding-block-end", string>;
}>, Readonly<{
    readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
}> | Readonly<{
    readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
}> | Readonly<{
    readonly '--layout-padding-outer-x': stylex.StyleXClassNameFor<"--layout-padding-outer-x", string>;
}>, Readonly<{
    readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
}> | Readonly<{
    readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
}> | Readonly<{
    readonly '--layout-padding-outer-y': stylex.StyleXClassNameFor<"--layout-padding-outer-y", string>;
}>, Readonly<{
    readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
}> | Readonly<{
    readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
}> | Readonly<{
    readonly '--layout-padding-inner-x': stylex.StyleXClassNameFor<"--layout-padding-inner-x", string>;
}>, Readonly<{
    readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
}> | Readonly<{
    readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
}> | Readonly<{
    readonly '--layout-padding-inner-y': stylex.StyleXClassNameFor<"--layout-padding-inner-y", string>;
}>, readonly [Readonly<{
    '--container-max-height': stylex.StyleXClassNameFor<"--container-max-height", string>;
}>, stylex.InlineStyles] | null];
export {};
//# sourceMappingURL=container.stylex.d.ts.map