/**
 * @file Stack.tsx
 * @input Uses React, ElementType, stack utility
 * @output Exports Stack polymorphic component and StackProps
 * @position Layout/Stack component; uses stack.stylex.ts
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Stack/Stack.doc.mjs
 * - /apps/storybook/stories/Stack.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Stack/ (showcase blocks)
 */
import { type ElementType, type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import { type StackCrossAlignment, type StackDirection, type StackMainAlignment, type StackWrap, type SpacingStep } from './stack.stylex';
import type { SizeValue } from '../utils/types';
/**
 * Alignment values accepted by Stack.
 *
 * The full union of main-axis and cross-axis alignment values.
 * Which values are valid depends on direction and axis:
 * - Main axis (hAlign for horizontal, vAlign for vertical):
 *   `'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'`
 * - Cross axis (vAlign for horizontal, hAlign for vertical):
 *   `'start' | 'center' | 'end' | 'stretch'`
 */
export type StackAlignment = StackMainAlignment | StackCrossAlignment;
export interface StackProps extends BaseProps<HTMLElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLElement>;
    /**
     * Direction of the stack layout.
     * - `horizontal`: Items flow left-to-right (like HStack)
     * - `vertical`: Items flow top-to-bottom (like VStack)
     * @default 'vertical'
     */
    direction?: StackDirection;
    /**
     * Horizontal alignment of items.
     * - When `direction='horizontal'`: controls main-axis (justify-content).
     *   Accepts: `'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'`
     * - When `direction='vertical'`: controls cross-axis (align-items).
     *   Accepts: `'start' | 'center' | 'end' | 'stretch'`
     */
    hAlign?: StackAlignment;
    /**
     * Vertical alignment of items.
     * - When `direction='horizontal'`: controls cross-axis (align-items).
     *   Accepts: `'start' | 'center' | 'end' | 'stretch'`
     * - When `direction='vertical'`: controls main-axis (justify-content).
     *   Accepts: `'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'`
     */
    vAlign?: StackAlignment;
    /**
     * Main-axis alignment alias. Resolves based on `direction`:
     * - `horizontal` → `hAlign` (justify-content)
     * - `vertical` → `vAlign` (justify-content)
     *
     * Mirrors CSS `justify-content` / Tailwind `justify-*`.
     */
    justify?: StackMainAlignment;
    /**
     * Cross-axis alignment alias. Resolves based on `direction`:
     * - `horizontal` → `vAlign` (align-items)
     * - `vertical` → `hAlign` (align-items)
     *
     * Mirrors CSS `align-items` / Tailwind `items-*`.
     */
    align?: StackCrossAlignment;
    /**
     * Width of the stack container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    width?: SizeValue;
    /**
     * Height of the stack container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    height?: SizeValue;
    /**
     * Maximum width of the stack container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    maxWidth?: SizeValue;
    /**
     * Minimum height of the stack container.
     * Numbers are treated as pixels, strings are used as-is (e.g., '100%').
     */
    minHeight?: SizeValue;
    /**
     * Spacing between items.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     */
    gap?: SpacingStep;
    /**
     * Inner padding on all sides, using the spacing scale.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     *
     * Matches the `padding` prop on `Card`, `LayoutContent`, and `LayoutPanel`.
     */
    padding?: SpacingStep;
    /**
     * Inline (horizontal) padding, using the spacing scale.
     * Overrides `padding` on the inline axis when both are set.
     */
    paddingInline?: SpacingStep;
    /**
     * Block (vertical) padding, using the spacing scale.
     * Overrides `padding` on the block axis when both are set.
     */
    paddingBlock?: SpacingStep;
    /**
     * Enables scrollable overflow (`overflow: auto`) for the stack.
     *
     * Matches the `isScrollable` prop on `LayoutContent` and `LayoutPanel`.
     * When the stack is itself a flex child that should scroll, pair it with
     * a parent `StackItem size="fill" isScrollable` (StackItem applies the
     * `min-height: 0` reset that flex scroll regions require).
     * @default false
     */
    isScrollable?: boolean;
    /**
     * Whether items should wrap.
     * - `nowrap`: Items stay on one line (default)
     * - `wrap`: Items wrap to next line
     * - `wrap-reverse`: Items wrap to previous line
     * @default 'nowrap'
     */
    wrap?: StackWrap;
    /**
     * The element type to render.
     * @default 'div'
     */
    as?: ElementType;
    /**
     * Content to render inside the stack.
     */
    children?: ReactNode;
}
/**
 * Unified stack component for arranging items in a horizontal or vertical layout.
 *
 * Replaces `HStack` and `VStack` with a single component that accepts
 * a `direction` prop. Defaults to `'vertical'` since most layouts stack
 * top-to-bottom.
 *
 * The `hAlign` and `vAlign` props automatically map to the correct CSS axis
 * based on the direction:
 * - `direction='horizontal'`: hAlign → justify-content, vAlign → align-items
 * - `direction='vertical'`: hAlign → align-items, vAlign → justify-content
 *
 * @example
 * ```
 * <Stack gap={2}>
 *   <Item />
 *   <Item />
 * </Stack>
 * <Stack direction="horizontal" gap={4} vAlign="center">
 *   <Item />
 *   <Item />
 * </Stack>
 * ```
 */
export declare function Stack({ direction, hAlign, vAlign, justify, align, gap, padding, paddingInline, paddingBlock, isScrollable, width, height, maxWidth, minHeight, wrap, as: element, xstyle, className, style, children, ref, ...props }: StackProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
export declare namespace Stack {
    var displayName: string;
}
//# sourceMappingURL=Stack.d.ts.map