@chassis-ui/react 0.2.0 → 0.4.0

package/dist/chunks/{index-Dum6Y9XR.d.ts → index-Cc4SSslb.d.ts}

@@ -12,6 +12,11 @@ interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onC
    * A string of all className you want applied to the base component.
    */
   className?: string;
+  /**
+   * Whether the drawer is open when it first renders. Such a drawer is uncontrolled: it closes
+   * itself on a close request. Use `visible` to open and close it from outside.
+   */
+  defaultVisible?: boolean;
   /**
    * Size the height to the drawer's content instead of `--drawer-height`. Meaningful for
    * `placement="bottom"`.
@@ -29,6 +34,12 @@ interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onC
    * Closes the drawer when the escape key is pressed.
    */
   keyboard?: boolean;
+  /**
+   * Renders the drawer open from its first paint, server HTML included, as a non-modal dialog: a
+   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to
+   * open it as a modal dialog.
+   */
+  open?: boolean;
   /**
    * Callback fired when the drawer requests to be closed (escape, backdrop click, close button,
    * or another drawer opening).
@@ -50,6 +61,11 @@ interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onC
    * Callback fired after the entry transition completes and the drawer is fully visible.
    */
   onShown?: () => void;
+  /**
+   * Callback fired with `false` when the drawer requests to be closed, at the same moments as
+   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.
+   */
+  onVisibleChange?: (visible: boolean) => void;
   /**
    * Which viewport edge the panel slides in from. Always required — there is no default
    * off-screen transform without one.
@@ -73,7 +89,8 @@ interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onC
    */
   translucent?: boolean;
   /**
-   * Toggle the visibility of the drawer component.
+   * Whether the drawer is open. The drawer is then controlled: a close request only fires
+   * `onClose` and `onVisibleChange`, and the drawer closes when this becomes `false`.
    */
   visible?: boolean;
 }
@@ -184,4 +201,5 @@ declare const DrawerTitle: DrawerTitleComponent;
 type UseDrawerResult = DrawerContextProps;
 declare const useDrawer: () => UseDrawerResult;
 //#endregion
-export { DrawerHeader as a, DrawerFooterProps as c, Drawer as d, DrawerProps as f, DrawerTitleProps as i, DrawerBody as l, useDrawer as n, DrawerHeaderProps as o, DrawerTitle as r, DrawerFooter as s, UseDrawerResult as t, DrawerBodyProps as u };
+export { DrawerHeader as a, DrawerFooterProps as c, Drawer as d, DrawerProps as f, DrawerTitleProps as i, DrawerBody as l, useDrawer as n, DrawerHeaderProps as o, DrawerTitle as r, DrawerFooter as s, UseDrawerResult as t, DrawerBodyProps as u };
+//# sourceMappingURL=index-Cc4SSslb.d.ts.map

package/dist/chunks/index-CftERHnE.d.ts

@@ -21,4 +21,5 @@ type InputAdornComponent = (<C extends ElementType = 'span'>(props: InputAdornPr
 };
 declare const InputAdorn: InputAdornComponent;
 //#endregion
-export { InputAdornProps as n, InputAdorn as t };
+export { InputAdornProps as n, InputAdorn as t };
+//# sourceMappingURL=index-CftERHnE.d.ts.map

package/dist/chunks/{index-CaQ1JY5D.d.ts → index-Ci7AEgEc.d.ts}

@@ -1,5 +1,5 @@
 import "./focus-ring-SR_LwaN7.js";
-import { t as FormFieldIds } from "./renderFormField-fBEny6JV.js";
+import { t as FormFieldIds } from "./renderFormField-ChNagAFN.js";
 import { ReactNode } from "react";
 //#region src/components/form-field/FormField.d.ts
 interface FormFieldProps {
@@ -41,9 +41,7 @@ interface FormFieldProps {
    */
   validFeedback?: ReactNode;
 }
-declare const FormField: {
-  ({ children, className, help, ids, invalid, invalidFeedback, label, valid, validFeedback }: FormFieldProps): ReactNode;
-  displayName: string;
-};
+declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
-export { FormFieldProps as n, FormField as t };
+export { FormFieldProps as n, FormField as t };
+//# sourceMappingURL=index-Ci7AEgEc.d.ts.map

package/dist/chunks/{index-DKma0jQw.d.ts → index-CjT_4IZx.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
-import { n as ContextColor } from "./types-CS_40Txv.js";
-import { t as ButtonObject } from "./renderFormCheck-CYWG-Rbt.js";
+import { r as ContextColor } from "./types-D6FM7bYR.js";
+import { t as ButtonObject } from "./renderFormCheck-nKgpa_a3.js";
 import React, { HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
 //#region src/components/radio/Radio.d.ts
 interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'defaultChecked' | 'onChange' | 'size'> {
@@ -101,4 +101,5 @@ interface RadioGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'def
 }
 declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
 //#endregion
-export { RadioProps as i, RadioGroupProps as n, Radio as r, RadioGroup as t };
+export { RadioProps as i, RadioGroupProps as n, Radio as r, RadioGroup as t };
+//# sourceMappingURL=index-CjT_4IZx.d.ts.map

package/dist/chunks/{index-BxTlIaZu.d.ts → index-CqZ68Z8R.d.ts}

@@ -20,9 +20,16 @@ interface DatePickerBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
   /**
    * Whether the calendar popover is open by default (uncontrolled).
    *
-   * @default false
+   * @deprecated Use `defaultVisible`.
    */
   defaultOpen?: boolean;
+  /**
+   * Whether the calendar popover is open when the date picker first renders. Use it instead of
+   * `visible` when nothing outside needs to control the popover.
+   *
+   * @default false
+   */
+  defaultVisible?: boolean;
   /**
    * Prevents the date picker from being focused or interacted with.
    */
@@ -65,6 +72,8 @@ interface DatePickerBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
   labels?: Partial<CalendarLabels>;
   /**
    * Whether the calendar popover is open (controlled).
+   *
+   * @deprecated Use `visible`.
    */
   isOpen?: boolean;
   /**
@@ -83,13 +92,23 @@ interface DatePickerBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
    * `name` of an auto-created hidden input, kept in sync with the selection, for native form
    * submission — one input when `selectionMode` is `'single'`, one per selected date when it's
    * `'multiple'` (same `name` on each, which browsers serialize as multiple form values). Omit to
-   * skip creating any.
+   * skip creating any. The value is the date's `toString()`: `2026-03-15`, with a time
+   * `2026-03-15T09:30:00`, and with a time zone `2026-03-15T09:30:00+09:00[Asia/Tokyo]`, which
+   * `parseZonedDateTime` reads back.
    */
   name?: string;
   /**
    * Callback fired when the calendar popover's open state changes.
+   *
+   * @deprecated Use `onVisibleChange`.
    */
   onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Callback fired when the calendar popover asks to open or close: the calendar button, a
+   * completed selection, the Escape key or a click outside. Receives the state it asks for.
+   * With `visible` set, the popover changes only when `visible` does.
+   */
+  onVisibleChange?: (visible: boolean) => void;
   /**
    * Size the component sm or lg.
    */
@@ -109,6 +128,11 @@ interface DatePickerBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
    * A success message for the field, rendered below the date picker when `valid` is set.
    */
   validFeedback?: ReactNode;
+  /**
+   * Whether the calendar popover is open. Setting it makes the popover controlled: it opens and
+   * closes only when this changes, so pair it with `onVisibleChange`.
+   */
+  visible?: boolean;
   /**
    * Number of months to display side by side in the calendar overlay.
    *
@@ -122,7 +146,40 @@ interface DatePickerSingleProps extends DatePickerBaseProps {
    */
   defaultValue?: DateValue$1 | null;
   /**
-   * Callback fired when the selected date changes.
+   * The smallest unit the field shows and edits. `'hour'`, `'minute'` and `'second'` add a time
+   * to the date: the value is then a `CalendarDateTime`, or a `ZonedDateTime` when `value`,
+   * `defaultValue` or `placeholderValue` is one, and a value or placeholder given must carry a
+   * time. Picking a day in the calendar keeps the time. A day picked in an empty field takes the
+   * time, and zone, of `defaultValue`, else `placeholderValue`, else midnight with no zone: a
+   * controlled zoned `value`, once cleared, needs a zoned `placeholderValue` to stay zoned.
+   *
+   * @default 'day', or 'minute' for a value with a time
+   */
+  granularity?: 'day' | 'hour' | 'minute' | 'second';
+  /**
+   * Hide the time zone of a `ZonedDateTime` value.
+   */
+  hideTimeZone?: boolean;
+  /**
+   * Show 12 or 24 hours. Defaults to the locale's.
+   */
+  hourCycle?: 12 | 24;
+  /**
+   * The date the segments start from while the field is empty, such as
+   * `new CalendarDateTime(2026, 1, 1, 9)`, and the month the calendar opens on. With no
+   * `defaultValue`, its time is the one a day picked in the calendar gets, and its type the type
+   * of value `onChange` receives: a `ZonedDateTime` gives zoned values. With a time
+   * `granularity` it must carry a time.
+   */
+  placeholderValue?: DateValue$1;
+  /**
+   * Show a leading zero on the day, month and hour, as `03/05` rather than `3/5`, whatever the
+   * locale does.
+   */
+  shouldForceLeadingZeros?: boolean;
+  /**
+   * Callback fired when the selected date changes. With a time (`granularity`), it receives a
+   * `CalendarDateTime` or `ZonedDateTime`.
    */
   onChange?: (value: DateValue$1 | null) => void;
   /**
@@ -182,13 +239,20 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
   /**
    * Whether the calendar popover is open by default (uncontrolled).
    *
-   * @default false
+   * @deprecated Use `defaultVisible`.
    */
   defaultOpen?: boolean;
   /**
    * The initial selected date range (uncontrolled).
    */
   defaultValue?: RangeValue<DateValue$1> | null;
+  /**
+   * Whether the calendar popover is open when the date range picker first renders. Use it
+   * instead of `visible` when nothing outside needs to control the popover.
+   *
+   * @default false
+   */
+  defaultVisible?: boolean;
   /**
    * Prevents the date range picker from being focused or interacted with.
    */
@@ -200,10 +264,29 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
    * @default 'mon'
    */
   firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+  /**
+   * The smallest unit the fields show and edit. `'hour'`, `'minute'` and `'second'` add a time
+   * to both dates: the range's dates are then `CalendarDateTime`s, or `ZonedDateTime`s when
+   * `value`, `defaultValue` or `placeholderValue` holds them, and a range or placeholder given
+   * must carry times. Picking a range in the calendar keeps the times. A range picked in an
+   * empty field takes the time, and zone, of `placeholderValue`, else midnight with no zone: a
+   * zoned range, once cleared, needs a zoned `placeholderValue` to stay zoned.
+   *
+   * @default 'day', or 'minute' for a range with times
+   */
+  granularity?: 'day' | 'hour' | 'minute' | 'second';
   /**
    * A description for the field, rendered below the date range picker.
    */
   help?: ReactNode;
+  /**
+   * Hide the time zone of `ZonedDateTime` dates.
+   */
+  hideTimeZone?: boolean;
+  /**
+   * Show 12 or 24 hours. Defaults to the locale's.
+   */
+  hourCycle?: 12 | 24;
   /**
    * `id` forwarded to the field's grouping element — useful for pairing with a `<label for>`.
    */
@@ -223,14 +306,16 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
   isDateUnavailable?: (date: DateValue$1) => boolean;
   /**
    * Overrides for the strings this component and its calendar render themselves rather than
-   * getting from the active locale — the clear adornment and the calendar's own year-view
-   * arrows/announcements. Date segment order, month and weekday names all follow `I18nProvider`'s
-   * locale via react-aria and need no override. Merged over the English defaults, so passing one
-   * key leaves the rest alone.
+   * getting from the active locale — the calendar trigger, the clear adornment and the calendar's
+   * own year-view arrows/announcements. Date segment order, month and weekday names all follow
+   * `I18nProvider`'s locale via react-aria and need no override. Merged over the English defaults,
+   * so passing one key leaves the rest alone.
    */
   labels?: Partial<CalendarLabels>;
   /**
    * Whether the calendar popover is open (controlled).
+   *
+   * @deprecated Use `visible`.
    */
   isOpen?: boolean;
   /**
@@ -248,17 +333,35 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
   /**
    * Base `name` for a pair of auto-created hidden inputs, kept in sync with the selection, for
    * native form submission — rendered as `${name}Start` and `${name}End`. Omit to skip creating
-   * them.
+   * them. Each value is the date's `toString()`: `2026-03-15`, with a time `2026-03-15T09:30:00`,
+   * and with a time zone `2026-03-15T09:30:00+09:00[Asia/Tokyo]`, which `parseZonedDateTime`
+   * reads back.
    */
   name?: string;
   /**
-   * Callback fired when the selected date range changes.
+   * Callback fired when the selected date range changes. With a time (`granularity`), its dates
+   * are `CalendarDateTime`s or `ZonedDateTime`s.
    */
   onChange?: (value: RangeValue<DateValue$1> | null) => void;
   /**
    * Callback fired when the calendar popover's open state changes.
+   *
+   * @deprecated Use `onVisibleChange`.
    */
   onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Callback fired when the calendar popover asks to open or close: the calendar button, a
+   * completed selection, the Escape key or a click outside. Receives the state it asks for.
+   * With `visible` set, the popover changes only when `visible` does.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * The date both fields start from while empty, such as `new CalendarDateTime(2026, 1, 1, 9)`,
+   * and the month the calendar opens on. Its time is the one a range picked in the calendar gets,
+   * and its type the type of the dates `onChange` receives: a `ZonedDateTime` gives zoned dates.
+   * With a time `granularity` it must carry a time.
+   */
+  placeholderValue?: DateValue$1;
   /**
    * A list of quick-select range presets shown in the overlay next to the calendar. Selecting a
    * preset commits its range immediately, the same as picking a start and end date from the
@@ -266,6 +369,11 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
    * show a preset list.
    */
   presets?: DateRangePreset[];
+  /**
+   * Show a leading zero on the day, month and hour, as `03/05` rather than `3/5`, whatever the
+   * locale does.
+   */
+  shouldForceLeadingZeros?: boolean;
   /**
    * Size the component sm or lg.
    */
@@ -289,6 +397,11 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
    * The selected date range (controlled).
    */
   value?: RangeValue<DateValue$1> | null;
+  /**
+   * Whether the calendar popover is open. Setting it makes the popover controlled: it opens and
+   * closes only when this changes, so pair it with `onVisibleChange`.
+   */
+  visible?: boolean;
   /**
    * Number of months to display side by side in the calendar overlay.
    *
@@ -298,4 +411,5 @@ interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onC
 }
 declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { DatePickerProps as a, DatePickerMultipleProps as i, DateRangePickerProps as n, DatePickerSingleProps as o, DatePicker as r, DateRangePicker as t };
+export { DatePickerProps as a, DatePickerMultipleProps as i, DateRangePickerProps as n, DatePickerSingleProps as o, DatePicker as r, DateRangePicker as t };
+//# sourceMappingURL=index-CqZ68Z8R.d.ts.map

package/dist/chunks/{index-D2VVO8rx.d.ts → index-CsARGAzD.d.ts}

@@ -1,5 +1,5 @@
 import "./focus-ring-SR_LwaN7.js";
-import { t as FormFieldIds } from "./renderFormField-fBEny6JV.js";
+import { t as FormFieldIds } from "./renderFormField-ChNagAFN.js";
 import React, { HTMLAttributes, ReactNode } from "react";
 //#region src/components/floating-input/FloatingInput.d.ts
 interface FloatingInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
@@ -46,4 +46,5 @@ interface FloatingInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
 }
 declare const FloatingInput: React.ForwardRefExoticComponent<FloatingInputProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
-export { FloatingInputProps as n, FloatingInput as t };
+export { FloatingInputProps as n, FloatingInput as t };
+//# sourceMappingURL=index-CsARGAzD.d.ts.map

package/dist/chunks/index-CxjNw4ss.d.ts

@@ -0,0 +1,216 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { l as Spacing, n as ContainerBreakpoint, o as Responsive, t as Breakpoint } from "./types-D6FM7bYR.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/grid/Container.d.ts
+type ContainerOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Set container 100% wide until the given breakpoint, after which it scales up with `max-width`
+   * at every larger breakpoint.
+   *
+   * @type Breakpoint
+   */
+  fluidUntil?: Breakpoint;
+  /**
+   * Set container 100% wide, spanning the entire width of the viewport.
+   */
+  fluid?: boolean;
+};
+type ContainerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ContainerOwnProps<C>>;
+type ContainerComponent = (<C extends ElementType = 'div'>(props: ContainerProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Container: ContainerComponent;
+//#endregion
+//#region src/components/grid/Grid.d.ts
+/**
+ * The direction a grid places its items in, and whether it fills earlier gaps (`dense`): the
+ * values of CSS `grid-auto-flow`.
+ */
+type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
+type GridGap = Spacing | (string & {});
+type GridOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Number of columns in the grid template (the column count of `@chassis-ui/css` when omitted,
+   * `12` by default). A count from 1 to 12 is mapped to the `grid-cols-{n}` class, which applies
+   * to this grid alone. Any other count has no class and is set via the `--cx-grid-columns`
+   * custom property, which a grid nested in this one inherits: give that grid `columns` of its
+   * own. Has no effect when `fill` is set.
+   *
+   * An object sets the count from a width up, as in `{ base: 1, md: 3 }`, here and on `rows`,
+   * `gap` and `flow`. A breakpoint key (`md`) is a width of the viewport. A container key
+   * (`'@md'`) is the same width of the nearest query container (an ancestor with the
+   * `contains-inline` class), and wins over a breakpoint key where both apply. Without a query
+   * container above the grid, a container key never applies. The count of a key is a class, so
+   * a count from 1 to 12.
+   */
+  columns?: Responsive<number, Breakpoint | ContainerBreakpoint>;
+  /**
+   * Number of equal rows in the grid template. A grid has none when omitted: its rows are as
+   * tall as their content. A count from 1 to 6 is mapped to the `grid-rows-{n}` class; any other
+   * count has no class and is set inline, as the `grid-template-rows` the class declares. Has no
+   * effect when `fill` is set. An object sets the count from a width up, where it is a class, so
+   * a count from 1 to 6.
+   */
+  rows?: Responsive<number, Breakpoint | ContainerBreakpoint>;
+  /**
+   * Gap between grid items: a `Spacing` token (mapped to the `gap-{token}` class) or any raw CSS
+   * `gap` value, including a `"{row} {column}"` pair (set via the `--cx-grid-gap` custom
+   * property). The gutter of the current breakpoint when omitted, or of the query container when
+   * `contained` is set. An object sets the gap from a width up: only a token fits a key other
+   * than `base`, since a raw value has no class.
+   *
+   * @type { Spacing | string | { base?: Spacing | string } & Partial<Record<Breakpoint | ContainerBreakpoint, Spacing>> }
+   */
+  gap?: GridGap | ({
+    base?: GridGap;
+  } & Partial<Record<Breakpoint | ContainerBreakpoint, Spacing>>);
+  /**
+   * The direction items are placed in, mapped to the `grid-flow-*` classes: by `'row'` (the CSS
+   * default) or by `'column'`, which fills the `rows` of one column before it starts the next.
+   * `'dense'`, `'row-dense'` and `'column-dense'` also move later items into gaps that earlier,
+   * wider ones left. An object sets the flow from a width up.
+   */
+  flow?: Responsive<GridFlow, Breakpoint | ContainerBreakpoint>;
+  /**
+   * Adds the `contained` class: the default gutter and column count follow the width of the
+   * nearest query container instead of the viewport, so a grid in a narrow column of a wide page
+   * has the gutter of a narrow page. Without a query container above it the grid keeps the
+   * values of the viewport. `columns` and `gap` still override them.
+   */
+  contained?: boolean;
+  /**
+   * Renders `.grid-fill` instead of `.grid` — columns expand equally to fill the available
+   * width, with the column count determined by the number of children rather than `columns`.
+   */
+  fill?: boolean;
+  /**
+   * Minimum column width of a `fill` grid, set via the `--cx-grid-min` custom property: any CSS
+   * length, e.g. `"16rem"`. Children wrap to a new row when they would get narrower. `12rem` in
+   * `@chassis-ui/css` when omitted. Only relevant when `fill` is set.
+   */
+  min?: string;
+};
+type GridProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridOwnProps<C>>;
+type GridComponent = (<C extends ElementType = 'div'>(props: GridProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Grid: GridComponent;
+//#endregion
+//#region src/components/grid/GridItem.d.ts
+type GridItemOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Number of grid column tracks (of the parent `<Grid>`'s `columns`) this item spans, mapped to
+   * the `col-span-{n}` class, or `'full'` for every track of the row (`col-span-full`). An item
+   * with no `span` is one track wide.
+   *
+   * An object sets the span from a width up, as in `{ base: 'full', md: 6 }`, here and on
+   * `start`, `end`, `rowSpan`, `rowStart` and `rowEnd`. A breakpoint key (`md`) is a width of
+   * the viewport. A container key (`'@md'`) is the same width of the nearest query container
+   * (an ancestor with the `contains-inline` class), and wins over a breakpoint key where both
+   * apply. Without a query container above the grid, a container key never applies.
+   *
+   * @type { Responsive<number | 'full', Breakpoint | ContainerBreakpoint> }
+   */
+  span?: Responsive<number | 'full', Breakpoint | ContainerBreakpoint>;
+  /**
+   * Grid column line to start this item at, mapped to the `col-start-{n}` class (1 to 12).
+   * `'auto'` (`col-start-auto`) returns the item to the flow, to undo a start line at a wider
+   * breakpoint: `{ base: 4, md: 'auto' }`.
+   *
+   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }
+   */
+  start?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>;
+  /**
+   * Grid column line to end this item at, mapped to the `col-end-{n}` class (1 to 13, the line
+   * after the last of 12 columns). With `span`, it places the item against the end edge of the
+   * grid: `span={3} end={13}`. `'auto'` (`col-end-auto`) undoes an end line at a wider
+   * breakpoint: `{ base: 13, md: 'auto' }`.
+   *
+   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }
+   */
+  end?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>;
+  /**
+   * Number of grid row tracks this item spans, mapped to the `row-span-{n}` class. Takes an
+   * object per width, as `span` does.
+   */
+  rowSpan?: Responsive<number, Breakpoint | ContainerBreakpoint>;
+  /**
+   * Grid row line to start this item at, mapped to the `row-start-{n}` class (1 to 6), or
+   * `'auto'` (`row-start-auto`) to return it to the flow. Takes an object per width, as `span`
+   * does.
+   *
+   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }
+   */
+  rowStart?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>;
+  /**
+   * Grid row line to end this item at, mapped to the `row-end-{n}` class (1 to 7, the line after
+   * the last of 6 rows), or `'auto'` (`row-end-auto`) to undo an end line at a wider breakpoint.
+   * Takes an object per width, as `span` does.
+   *
+   * @type { Responsive<number | 'auto', Breakpoint | ContainerBreakpoint> }
+   */
+  rowEnd?: Responsive<number | 'auto', Breakpoint | ContainerBreakpoint>;
+  /**
+   * Turns this item into a nested subgrid: adds `.grid`/`.grid-cols-subgrid` alongside its
+   * `col-span-{n}`/`col-start-{n}` placement classes, so its own children inherit the parent
+   * `<Grid>`'s column tracks instead of defining new ones. Combine with `span` — a subgrid
+   * item must itself be a grid item of the parent for `grid-template-columns: subgrid` to take
+   * effect, which is why `subgrid` lives on `<GridItem>` (the element actually placed as a grid
+   * item) rather than on a `<Grid>` nested inside it.
+   */
+  subgrid?: boolean;
+  /**
+   * Number of equal rows in the subgrid's own row template: the `grid-rows-{n}` class for a
+   * count from 1 to 6, the same `grid-template-rows` set inline for any other. Only relevant
+   * when `subgrid` is set — subgrid only inherits the parent's column tracks, not its rows.
+   */
+  rows?: number;
+  /**
+   * Gap between the subgrid's children: a `Spacing` token (mapped to the `gap-{token}` class) or
+   * any raw CSS `gap` value (set via the `--cx-grid-gap` custom property). Only relevant when
+   * `subgrid` is set. A subgrid has the gap of its own: when the parent `<Grid>` takes a `gap`
+   * token, give the subgrid the same one, or its children are narrower than the parent's tracks.
+   *
+   * @type { Spacing | string }
+   */
+  gap?: Spacing | (string & {});
+};
+type GridItemProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, GridItemOwnProps<C>>;
+type GridItemComponent = (<C extends ElementType = 'div'>(props: GridItemProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const GridItem: GridItemComponent;
+//#endregion
+export { GridProps as a, GridFlow as i, GridItemProps as n, Container as o, Grid as r, ContainerProps as s, GridItem as t };
+//# sourceMappingURL=index-CxjNw4ss.d.ts.map

package/dist/chunks/index-DAoPg59I.d.ts

@@ -77,4 +77,5 @@ type FormFeedbackComponent = (<C extends ElementType = 'div'>(props: FormFeedbac
 };
 declare const FormFeedback: FormFeedbackComponent;
 //#endregion
-export { FormLabel as a, FormProps as c, FormHelpProps as i, FormFeedbackProps as n, FormLabelProps as o, FormHelp as r, Form as s, FormFeedback as t };
+export { FormLabel as a, FormProps as c, FormHelpProps as i, FormFeedbackProps as n, FormLabelProps as o, FormHelp as r, Form as s, FormFeedback as t };
+//# sourceMappingURL=index-DAoPg59I.d.ts.map

package/dist/chunks/index-DHGgezXU.d.ts

@@ -55,4 +55,5 @@ interface ColorInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 's
 }
 declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
-export { ColorInputProps as n, ColorInput as t };
+export { ColorInputProps as n, ColorInput as t };
+//# sourceMappingURL=index-DHGgezXU.d.ts.map