import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js'; import type { Space } from '../utils/resolveSpace.js'; export type { Space }; /** Props for the {@link Box} layout primitive root. */ export interface BoxProps extends PrimitivePropsWithRef<'div'> { /** * Element name to render, from the library's tag allowlist. * @default 'div' */ as?: PolymorphicTag | undefined; /** * CSS `display` value, emitted as an inline declaration. * @default undefined — no inline declaration. */ display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents' | 'none' | undefined; /** * Flex axis, emitted as the `flex-direction` declaration. * @default undefined — no inline declaration. */ direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined; /** * Cross-axis alignment, emitted as the `align-items` declaration. * @default undefined — no inline declaration. */ align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | undefined; /** * Main-axis alignment, emitted as the `justify-content` declaration. * @default undefined — no inline declaration. */ justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch' | undefined; /** * Flex wrapping, emitted as the `flex-wrap` declaration. * @default undefined — no inline declaration. */ wrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined; /** * Gap between flex or grid children, from the spacing scale. * @default undefined — no inline declaration. */ gap?: Space | undefined; /** * Inline size (`inline-size`), from the spacing scale — never physical `width`. * @default undefined — no inline declaration. */ width?: Space | undefined; /** * Minimum inline size (`min-inline-size`), from the spacing scale — never physical `min-width`. * @default undefined — no inline declaration. */ minWidth?: Space | undefined; /** * Maximum inline size (`max-inline-size`), from the spacing scale — never physical `max-width`. * @default undefined — no inline declaration. */ maxWidth?: Space | undefined; /** * Grid track list; a number becomes that many equal columns. * @default undefined — no inline declaration. */ columns?: number | string | undefined; /** * Gap between rows only, from the spacing scale. * @default undefined — no inline declaration. */ rowGap?: Space | undefined; /** * Gap between columns only, from the spacing scale. * @default undefined — no inline declaration. */ columnGap?: Space | undefined; /** * Number of grid columns this box spans. * @default undefined — no inline declaration. */ colSpan?: number | undefined; /** * Number of grid rows this box spans. * @default undefined — no inline declaration. */ rowSpan?: number | undefined; /** * Cross-axis alignment of this box within its parent. * @default undefined — no inline declaration. */ alignSelf?: 'start' | 'center' | 'end' | 'stretch' | 'baseline' | undefined; /** * Flex shorthand controlling how this box grows and shrinks. * @default undefined — no inline declaration. */ flex?: number | string | undefined; /** * Padding on all sides, from the spacing scale. * @default undefined — no inline declaration. */ p?: Space | undefined; /** * Inline padding (`padding-inline`), from the spacing scale. * @default undefined — no inline declaration. */ px?: Space | undefined; /** * Block padding (`padding-block`), from the spacing scale. * @default undefined — no inline declaration. */ py?: Space | undefined; /** * Top padding, from the spacing scale. * @default undefined — no inline declaration. */ pt?: Space | undefined; /** * Bottom padding, from the spacing scale. * @default undefined — no inline declaration. */ pb?: Space | undefined; /** * Inline-start padding (`padding-inline-start`), from the spacing scale. * @default undefined — no inline declaration. */ ps?: Space | undefined; /** * Inline-end padding (`padding-inline-end`), from the spacing scale. * @default undefined — no inline declaration. */ pe?: Space | undefined; /** * Margin on all sides, from the spacing scale. * @default undefined — no inline declaration. */ m?: Space | undefined; /** * Inline margin (`margin-inline`), from the spacing scale. * @default undefined — no inline declaration. */ mx?: Space | undefined; /** * Block margin (`margin-block`), from the spacing scale. * @default undefined — no inline declaration. */ my?: Space | undefined; /** * Top margin, from the spacing scale. * @default undefined — no inline declaration. */ mt?: Space | undefined; /** * Bottom margin, from the spacing scale. * @default undefined — no inline declaration. */ mb?: Space | undefined; /** * Inline-start margin (`margin-inline-start`), from the spacing scale. * @default undefined — no inline declaration. */ ms?: Space | undefined; /** * Inline-end margin (`margin-inline-end`), from the spacing scale. * @default undefined — no inline declaration. */ me?: Space | undefined; }