/**
 * @usevyre/react — Layout primitives (Stack, Grid, GridItem, Box)
 *
 * AI CONTEXT:
 * ┌──────────────────────────────────────────────────────────────────┐
 * │ Components: Stack, Grid, GridItem, Box                             │
 * │ Import: import { Stack, Grid, GridItem, Box } from "@usevyre/react"│
 * │                                                                   │
 * │ USE THESE INSTEAD OF <div style={{ display: "flex" }}>.           │
 * │ Every spacing value is a design token — never a raw px/rem number.│
 * │                                                                   │
 * │ Stack/Grid/Box share width/height (avoids inline width style):    │
 * │   width|height = "auto"|"full"|"fit"|"screen"                     │
 * │                  | xs|sm|md|lg|xl|2xl  (fixed rem sizes)          │
 * │                                                                   │
 * │ <Stack>  full one-dimensional flex layout                         │
 * │   direction   = "row"(default)|"column"|"row-reverse"             │
 * │                 |"column-reverse"                                  │
 * │   inline      = boolean (display:inline-flex)                      │
 * │   gap         = token; rowGap / columnGap = token (per-axis)      │
 * │   align       = items: start|center|end|stretch|baseline          │
 * │   justify     = content: start|center|end|between|around|evenly   │
 * │   alignContent= multi-line: start|center|end|stretch|between      │
 * │                 |around|evenly                                     │
 * │   alignSelf   = auto|start|center|end|stretch|baseline            │
 * │   wrap        = "nowrap"(default)|"wrap"|"wrap-reverse"            │
 * │   grow shrink = number    basis = token|"auto"|"content"|"0"      │
 * │   as          = any HTML tag (default: "div")                      │
 * │                                                                   │
 * │ <Grid>  two-dimensional CSS grid                                  │
 * │   columns = number (1-12) | "auto-fit" (default: 1)               │
 * │   rows    = number | "auto"                                        │
 * │   flow    = "row"|"column"|"dense"|"row-dense"|"column-dense"      │
 * │   gap / rowGap / columnGap = token                                 │
 * │   align   = align-items     justify = justify-items               │
 * │   as      = any HTML tag (default: "div")                          │
 * │ <GridItem>  child placement                                       │
 * │   colSpan rowSpan colStart rowStart = number                      │
 * │                                                                   │
 * │ <Box>  spacing-only container + controlled escape hatch           │
 * │   padding  paddingX paddingY                                       │
 * │   paddingTop paddingRight paddingBottom paddingLeft = token       │
 * │   margin   marginX  marginY                                        │
 * │   marginTop marginRight marginBottom marginLeft = token           │
 * │   (per-side overrides the X/Y/shorthand it belongs to)            │
 * │   as = any HTML tag (default: "div")                               │
 * │   style = ANTI-PATTERN escape hatch — prefer tokens.              │
 * │                                                                   │
 * │ All render a plain <div> (or `as`) in the browser.                │
 * └──────────────────────────────────────────────────────────────────┘
 *
 * @example
 * <Stack direction="column" gap="md" align="center">
 *   <Avatar src={user.avatar} />
 *   <Text>{user.name}</Text>
 * </Stack>
 *
 * @example
 * <Grid columns={3} gap="lg">
 *   <GridItem colSpan={2}><Card>Wide</Card></GridItem>
 *   <Card>…</Card>
 * </Grid>
 */
import React from "react";
/** Semantic spacing scale — maps to --vyre-spacing-* tokens. */
export type SpaceToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type StackDirection = "row" | "column" | "row-reverse" | "column-reverse";
export type StackWrap = "nowrap" | "wrap" | "wrap-reverse";
export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
export type StackAlignContent = "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly";
export type StackAlignSelf = "auto" | "start" | "center" | "end" | "stretch" | "baseline";
export type StackBasis = SpaceToken | "auto" | "content" | "0";
export type GridAlign = "start" | "center" | "end" | "stretch";
export type GridFlow = "row" | "column" | "dense" | "row-dense" | "column-dense";
export type GridColumns = number | "auto-fit";
/**
 * Sizing scale for width / height.
 * - Keywords: "auto" | "full" (100%) | "fit" (fit-content) | "screen"
 *   (100vw for width, 100vh for height)
 * - Token sizes (fixed rem): xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42
 */
export type SizeToken = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
interface SizingProps {
    /** Width — keyword or token size. Avoids an inline width style. */
    width?: SizeToken;
    /** Height — keyword or token size. Avoids an inline height style. */
    height?: SizeToken;
}
type PolymorphicProps<P> = P & {
    /** HTML element to render. Always a real DOM element in the browser. */
    as?: keyof JSX.IntrinsicElements;
    className?: string;
    /**
     * Inline styles. Prefer the token props above; use this only for values
     * the design system genuinely cannot express. Flagged as an anti-pattern
     * by @usevyre/eslint-plugin (no-inline-layout-styles).
     */
    style?: React.CSSProperties;
    children?: React.ReactNode;
};
export interface StackProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>>, SizingProps {
    /** Main axis direction (flex-direction) */
    direction?: StackDirection;
    /** Render as inline-flex instead of flex */
    inline?: boolean;
    /** Space between children — design token */
    gap?: SpaceToken;
    /** Row gap override — design token */
    rowGap?: SpaceToken;
    /** Column gap override — design token */
    columnGap?: SpaceToken;
    /** Cross-axis alignment of items (align-items) */
    align?: StackAlign;
    /** Main-axis distribution (justify-content) */
    justify?: StackJustify;
    /** Multi-line cross-axis distribution (align-content) */
    alignContent?: StackAlignContent;
    /** This element's own cross-axis alignment (align-self) */
    alignSelf?: StackAlignSelf;
    /** Wrapping behaviour (flex-wrap). `true` is treated as "wrap". */
    wrap?: StackWrap | boolean;
    /** flex-grow */
    grow?: number;
    /** flex-shrink */
    shrink?: number;
    /** flex-basis — token, "auto", "content", or "0" */
    basis?: StackBasis;
}
export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
export interface GridProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>>, SizingProps {
    /** Number of equal columns (1–12) or responsive "auto-fit" */
    columns?: GridColumns;
    /** Explicit row count, or "auto" */
    rows?: number | "auto";
    /** Auto-placement flow (grid-auto-flow) */
    flow?: GridFlow;
    /** Space between cells — design token */
    gap?: SpaceToken;
    /** Row gap override — design token */
    rowGap?: SpaceToken;
    /** Column gap override — design token */
    columnGap?: SpaceToken;
    /** Cross-axis alignment of cells (align-items) */
    align?: GridAlign;
    /** Inline-axis alignment of cells (justify-items) */
    justify?: GridAlign;
}
export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
export interface GridItemProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
    /** Number of columns this item spans */
    colSpan?: number;
    /** Number of rows this item spans */
    rowSpan?: number;
    /** 1-based column line this item starts at */
    colStart?: number;
    /** 1-based row line this item starts at */
    rowStart?: number;
}
export declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLElement>>;
export interface BoxProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>>, SizingProps {
    /** Inner spacing (all sides) — design token */
    padding?: SpaceToken;
    /** Inner spacing left+right — design token */
    paddingX?: SpaceToken;
    /** Inner spacing top+bottom — design token */
    paddingY?: SpaceToken;
    paddingTop?: SpaceToken;
    paddingRight?: SpaceToken;
    paddingBottom?: SpaceToken;
    paddingLeft?: SpaceToken;
    /** Outer spacing (all sides) — design token */
    margin?: SpaceToken;
    /** Outer spacing left+right — design token */
    marginX?: SpaceToken;
    /** Outer spacing top+bottom — design token */
    marginY?: SpaceToken;
    marginTop?: SpaceToken;
    marginRight?: SpaceToken;
    marginBottom?: SpaceToken;
    marginLeft?: SpaceToken;
}
export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
export {};