@chassis-ui/react 0.1.3 → 0.3.0

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

@@ -0,0 +1,95 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { t as Breakpoint } from "./types-CS_40Txv.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
+import { t as Placement } from "./overlayPlacement-CIsLpycT.js";
+import { ElementType, ReactElement, ReactNode } from "react";
+//#region src/components/nav-overflow/NavOverflow.d.ts
+interface NavOverflowDetail {
+  /**
+   * How many items are in the menu.
+   */
+  overflowCount: number;
+  /**
+   * How many items are left in the list.
+   */
+  visibleCount: number;
+}
+type NavOverflowOwnProps<C extends ElementType> = {
+  /**
+   * The list to collapse: a `Nav`, a `NavbarNav` or a `TabList`.
+   */
+  children?: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Moves every item into the menu while the component is narrower than this: a width in pixels,
+   * or the name of a breakpoint, read from `--cx-breakpoint-{name}`.
+   */
+  collapseBelow?: number | Breakpoint;
+  /**
+   * Component used for the root node. Either a string to use an HTML element or a component.
+   *
+   * @default 'div'
+   */
+  component?: C;
+  /**
+   * Which side of the toggle's text its icon is on.
+   *
+   * @default 'start'
+   */
+  iconPlacement?: 'start' | 'end';
+  /**
+   * Renders the menu in a container element instead of inside the toggle's item, where an
+   * ancestor with `overflow` set would clip it: an element, or `true` for `document.body`. The
+   * menu of a `TabList` is always rendered outside it.
+   */
+  menuContainer?: boolean | Element;
+  /**
+   * Where the menu opens, relative to the toggle. It flips to stay in view.
+   *
+   * @default 'bottom-end'
+   * @type 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+   */
+  menuPlacement?: Placement;
+  /**
+   * The toggle's icon: an icon name, or an element of your own icon set. Defaults to
+   * `IconProvider`'s `more` icon.
+   */
+  moreIcon?: IconValue;
+  /**
+   * The accessible name of a toggle without text (`moreText={false}`).
+   *
+   * @default 'More'
+   */
+  moreLabel?: string;
+  /**
+   * The toggle's text. `false` leaves the icon alone, named by `moreLabel`.
+   *
+   * @default 'More'
+   */
+  moreText?: ReactNode | false;
+  /**
+   * Callback fired when items move into the menu or back out of it, with the number of items in
+   * the menu and in the list.
+   */
+  onOverflow?: (detail: NavOverflowDetail) => void;
+  /**
+   * The fewest items to leave in the list. They stay even when they don't fit.
+   *
+   * @default 0
+   */
+  threshold?: number;
+};
+type NavOverflowProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, NavOverflowOwnProps<C>>;
+type NavOverflowComponent = (<C extends ElementType = 'div'>(props: NavOverflowProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const NavOverflow: NavOverflowComponent;
+//#endregion
+export { NavOverflowDetail as n, NavOverflowProps as r, NavOverflow as t };
+//# sourceMappingURL=index-FKh7iFQE.d.ts.map

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

@@ -0,0 +1,67 @@
+import "./focus-ring-SR_LwaN7.js";
+import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+//#region src/components/range-input/RangeInput.d.ts
+interface RangeInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * A description for the field, rendered below the range input.
+   */
+  help?: ReactNode;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * An error message for the field, rendered below the range input when `invalid` is set.
+   */
+  invalidFeedback?: ReactNode;
+  /**
+   * The field's caption, rendered as a `FormLabel` associated with this range input.
+   */
+  label?: ReactNode;
+  /**
+   * Specifies the maximum value for the component.
+   */
+  max?: number;
+  /**
+   * Specifies the minimum value for the component.
+   */
+  min?: number;
+  /**
+   * Method called immediately after the `value` prop changes.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /**
+   * Toggle the readonly state for the component.
+   */
+  readOnly?: boolean;
+  /**
+   * Specifies the interval between legal numbers in the component.
+   */
+  step?: number;
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * A success message for the field, rendered below the range input when `valid` is set.
+   */
+  validFeedback?: ReactNode;
+  /**
+   * The `value` attribute of component.
+   *
+   * @controllable onChange
+   * */
+  value?: string | number;
+}
+declare const RangeInput: React.ForwardRefExoticComponent<RangeInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RangeInputProps as n, RangeInput as t };
+//# sourceMappingURL=index-HrKN6s8z.d.ts.map

package/dist/chunks/index-I-H3VJ-L.d.ts

@@ -0,0 +1,229 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { a as Shapes, n as ContextColor } from "./types-CS_40Txv.js";
+import { n as ButtonProps, t as Button } from "./Button-Cptd4Yk7.js";
+import { i as MenuItemsDef } from "./MenuItemDef-D0VDtYIQ.js";
+import { n as LinkProps } from "./Link-nrd0JWlO.js";
+import { t as Placement } from "./overlayPlacement-CIsLpycT.js";
+import "./Menu-QeYOzrUL.js";
+import React, { ButtonHTMLAttributes, ElementType, HTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/menu/MenuDivider.d.ts
+interface MenuDividerProps extends HTMLAttributes<HTMLHRElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+}
+declare const MenuDivider: React.ForwardRefExoticComponent<MenuDividerProps & React.RefAttributes<HTMLHRElement>>;
+//#endregion
+//#region src/components/menu/MenuHeader.d.ts
+type MenuHeaderOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * ARIA role applied to the root node. Defaults to `'presentation'` — see the render function
+   * for why.
+   */
+  role?: React.AriaRole;
+};
+type MenuHeaderProps<C extends ElementType = 'h4'> = PolymorphicComponentProps<C, MenuHeaderOwnProps<C>>;
+type MenuHeaderComponent = (<C extends ElementType = 'h4'>(props: MenuHeaderProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const MenuHeader: MenuHeaderComponent;
+//#endregion
+//#region src/components/menu/MenuItem.d.ts
+type MenuItemOwnProps = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Secondary line of text rendered below `children` (`.menu-item-description`).
+   */
+  description?: ReactNode;
+  /**
+   * Icon rendered at the item's leading edge (`.menu-item-icon`).
+   */
+  icon?: ReactNode;
+  /**
+   * Marks the item as the current selection in a choice list. Renders in a heavier font weight.
+   * Combine with a manually-composed `.menu-item-check` icon (in `children`, or via `icon` on a
+   * plain, non-selection item) to also show a checkmark — this prop alone doesn't add one, so
+   * existing font-weight-only usage keeps rendering unchanged.
+   */
+  selected?: boolean;
+};
+type MenuItemProps<C extends ElementType = 'a'> = LinkProps<C> & MenuItemOwnProps;
+type MenuItemComponent = (<C extends ElementType = 'a'>(props: MenuItemProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLAnchorElement | HTMLButtonElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const MenuItem: MenuItemComponent;
+//#endregion
+//#region src/components/menu/MenuList.d.ts
+type MenuListOwnProps<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;
+  /**
+   * Array of item/header/divider definitions for data-driven rendering. When provided, children
+   * are ignored. Covers flat items, headers, and dividers only — for nested submenus, compose
+   * with `children` and `MenuSubmenu` instead.
+   */
+  items?: MenuItemsDef;
+};
+type MenuListProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, MenuListOwnProps<C>>;
+type MenuListComponent = (<C extends ElementType = 'div'>(props: MenuListProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const MenuList: MenuListComponent;
+//#endregion
+//#region src/components/menu/MenuText.d.ts
+type MenuTextOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+};
+type MenuTextProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, MenuTextOwnProps<C>>;
+type MenuTextComponent = (<C extends ElementType = 'span'>(props: MenuTextProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const MenuText: MenuTextComponent;
+//#endregion
+//#region src/components/menu/MenuToggle.d.ts
+type MenuToggleOwnProps<C extends ElementType> = {
+  /**
+   * Toggle the active state for the component.
+   */
+  active?: boolean;
+  /**
+   * Draws the caret after the toggle's content. Set it to `false` for a toggle that shows what it
+   * is another way, such as an icon-only "more" button.
+   *
+   * @default true
+   */
+  caret?: boolean;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors. Only applies to the
+   * default `Button` root.
+   */
+  color?: ContextColor;
+  /**
+   * Component used for the root node — the trigger element the menu opens from. Defaults to
+   * `Button`; swap for e.g. `NavLink` to render a nav-item-style trigger (`.nav-link.caret`)
+   * instead of a `.button.caret`. Its own props are type-checked at the call site once passed
+   * here.
+   */
+  component?: C;
+  /**
+   * Toggle the disabled state for the component.
+   */
+  disabled?: boolean;
+  /**
+   * The href attribute specifies the URL of the page the link goes to.
+   */
+  href?: string;
+  /**
+   * Select the shape of the component. Only applies to the default `Button` root.
+   */
+  shape?: Shapes;
+  /**
+   * Size the component sm or lg. Only applies to the default `Button` root.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * Sets the style variant of the component, as `Button`'s own `variant` does. Only applies to
+   * the default `Button` root.
+   */
+  variant?: ButtonProps['variant'];
+};
+type MenuToggleProps<C extends ElementType = typeof Button> = PolymorphicComponentProps<C, MenuToggleOwnProps<C>>;
+type MenuToggleComponent = (<C extends ElementType = typeof Button>(props: MenuToggleProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const MenuToggle: MenuToggleComponent;
+//#endregion
+//#region src/components/menu/MenuSubmenu.d.ts
+interface MenuSubmenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /**
+   * MenuSubmenu activation mode on hover-capable devices. `'click'` activates on click only.
+   * `'hover'` activates on hover only. `'both'` (the default) activates on both. Touch
+   * devices always use tap regardless of this setting.
+   */
+  activation?: 'click' | 'hover' | 'both';
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Prevents the submenu from opening.
+   */
+  disabled?: boolean;
+  /**
+   * Distance between the nested menu and the trigger, as `[skidding, distance]` in pixels.
+   */
+  offset?: [number, number];
+  /**
+   * Placement of the nested menu relative to the trigger. Defaults to cascading in the reading
+   * direction — `'right-start'` under LTR locales, `'left-start'` under RTL ones (see
+   * `useLocale`) — matching native OS/browser submenu behavior. An explicit value always wins
+   * over that locale-based default.
+   */
+  placement?: Placement;
+  /**
+   * Switches to a view-replacement pattern below the `sm` breakpoint. Pair with a
+   * `MenuSubmenuBack` as the first item of the nested menu.
+   */
+  stacked?: boolean;
+  /**
+   * Milliseconds before closing the submenu when the pointer leaves it.
+   */
+  submenuDelay?: number;
+  /**
+   * Content of the `.menu-item` trigger that opens the submenu.
+   */
+  trigger: ReactNode;
+}
+declare const MenuSubmenu: React.ForwardRefExoticComponent<MenuSubmenuProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/menu/MenuSubmenuBack.d.ts
+interface MenuSubmenuBackProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+}
+declare const MenuSubmenuBack: React.ForwardRefExoticComponent<MenuSubmenuBackProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { MenuToggle as a, MenuTextProps as c, MenuItem as d, MenuItemProps as f, MenuDividerProps as g, MenuDivider as h, MenuSubmenuProps as i, MenuList as l, MenuHeaderProps as m, MenuSubmenuBackProps as n, MenuToggleProps as o, MenuHeader as p, MenuSubmenu as r, MenuText as s, MenuSubmenuBack as t, MenuListProps as u };
+//# sourceMappingURL=index-I-H3VJ-L.d.ts.map

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

@@ -0,0 +1,273 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { s as Spacing, t as Breakpoint } from "./types-CS_40Txv.js";
+import { n as Span } from "./breakpoints-CJ-498B7.js";
+import React, { ElementType, HTMLAttributes, ReactElement } from "react";
+//#region src/components/grid/Col.d.ts
+interface ColLayout {
+  /**
+   * Columns (of 12) this Col spans, or `'auto'`/`true` for a natural-width column.
+   *
+   * @type { 'auto' | number | string | boolean }
+   */
+  span?: Span;
+  /**
+   * Columns to offset the start of this Col by.
+   */
+  offset?: number | string;
+  /**
+   * Visual order relative to sibling columns.
+   *
+   * @type { 'first' | 'last' | number | string }
+   */
+  order?: 'first' | 'last' | number | string;
+}
+/**
+ * @deprecated Use `GridItemProps`: `Col` is deprecated with the flexbox grid of `@chassis-ui/css`.
+ */
+interface ColProps extends HTMLAttributes<HTMLDivElement>, ColLayout {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Overrides `span`/`offset`/`order` at a breakpoint and up.
+   *
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: 'auto' | number | string | boolean, offset?: number | string, order?: 'first' | 'last' | number | string }>> }
+   */
+  responsive?: Partial<Record<Breakpoint, ColLayout>>;
+}
+/**
+ * @deprecated Use `GridItem` in a `Grid`, with `start` for `offset`. A column as wide as its
+ * content (`span="auto"`) has no grid equivalent: use `Flex`. `@chassis-ui/css` deprecates its
+ * flexbox grid (`.row`, `.col-*`) in 0.6 and removes it in 0.7, and `Col` goes with it.
+ */
+declare const Col: React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#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
+interface GridLayout {
+  /**
+   * Number of columns in the grid template from this breakpoint up, mapped to the
+   * `grid-cols-{n}` class (1 to 12). Has no effect when `fill` is set.
+   */
+  columns?: number;
+  /**
+   * Gap between grid items from this breakpoint up, mapped to the `gap-{token}` class.
+   */
+  gap?: Spacing;
+}
+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.
+   */
+  columns?: number;
+  /**
+   * Number of rows in the grid template, set via the `--cx-grid-rows` custom property (defaults
+   * to `1` in CSS when omitted). Has no effect when `fill` is set.
+   */
+  rows?: number;
+  /**
+   * 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.
+   *
+   * @type { Spacing | string }
+   */
+  gap?: Spacing | (string & {});
+  /**
+   * Overrides `columns`/`gap` at a breakpoint and up, with the `grid-cols-{n}` and `gap-{token}`
+   * classes.
+   *
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { columns?: number, gap?: Spacing }>> }
+   */
+  responsive?: Partial<Record<Breakpoint, GridLayout>>;
+  /**
+   * 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. `"12rem"`. Children wrap to a new row when they would get narrower. 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
+interface GridItemLayout {
+  /**
+   * 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.
+   *
+   * @type { number | 'full' }
+   */
+  span?: number | 'full';
+  /**
+   * Grid column line to start this item at, mapped to the `col-start-{n}` class. `'auto'`
+   * (`col-start-auto`) returns the item to the flow, to undo a start line at a wider breakpoint.
+   *
+   * @type { number | 'auto' }
+   */
+  start?: number | 'auto';
+  /**
+   * Number of grid row tracks this item spans, mapped to the `row-span-{n}` class.
+   */
+  rowSpan?: number;
+  /**
+   * Grid row line to start this item at, mapped to the `row-start-{n}` class, or `'auto'`
+   * (`row-start-auto`) to return it to the flow.
+   *
+   * @type { number | 'auto' }
+   */
+  rowStart?: number | 'auto';
+}
+type GridItemOwnProps<C extends ElementType> = GridItemLayout & {
+  /**
+   * 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;
+  /**
+   * Overrides `span`/`start`/`rowSpan`/`rowStart` at a breakpoint and up.
+   *
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: number | 'full', start?: number | 'auto', rowSpan?: number, rowStart?: number | 'auto' }>> }
+   */
+  responsive?: Partial<Record<Breakpoint, GridItemLayout>>;
+  /**
+   * 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 rows in the subgrid's own row template, set via the `--cx-grid-rows` custom
+   * property (defaults to `1` in CSS when omitted). 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
+//#region src/components/grid/Row.d.ts
+interface RowLayout {
+  /**
+   * Equal-width columns per row, or `'auto'` for content-sized columns.
+   *
+   * @type { 'auto' | number | string }
+   */
+  cols?: 'auto' | number | string;
+  /**
+   * Gutter width on both axes.
+   *
+   * @type { Spacing | 0 }
+   */
+  gutter?: Spacing | 0;
+  /**
+   * Horizontal gutter width.
+   *
+   * @type { Spacing | 0 }
+   */
+  gutterX?: Spacing | 0;
+  /**
+   * Vertical gutter width.
+   *
+   * @type { Spacing | 0 }
+   */
+  gutterY?: Spacing | 0;
+}
+/**
+ * @deprecated Use `GridProps`: `Row` is deprecated with the flexbox grid of `@chassis-ui/css`.
+ */
+interface RowProps extends HTMLAttributes<HTMLDivElement>, RowLayout {
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Overrides `cols`/`gutter`/`gutterX`/`gutterY` at a breakpoint and up.
+   *
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { cols?: 'auto' | number | string, gutter?: Spacing | 0, gutterX?: Spacing | 0, gutterY?: Spacing | 0 }>> }
+   */
+  responsive?: Partial<Record<Breakpoint, RowLayout>>;
+}
+/**
+ * @deprecated Use `Grid`, with `columns` for `cols` and `gap` for `gutter`. `@chassis-ui/css`
+ * deprecates its flexbox grid (`.row`, `.col-*`) in 0.6 and removes it in 0.7, and `Row` goes
+ * with it.
+ */
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { GridItemProps as a, GridProps as c, Col as d, ColProps as f, GridItemLayout as i, Container as l, RowProps as n, Grid as o, GridItem as r, GridLayout as s, Row as t, ContainerProps as u };
+//# sourceMappingURL=index-RHJhkSY-.d.ts.map