@chassis-ui/react 0.1.2 → 0.2.0

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

@@ -0,0 +1,40 @@
+import "./focus-ring-SR_LwaN7.js";
+import { t as Placement } from "./overlayPlacement-B7843a-Q.js";
+import { FC, ReactElement, ReactNode } from "react";
+//#region src/components/tooltip/Tooltip.d.ts
+interface TooltipProps {
+  children: ReactElement;
+  /**
+   * Content node for your component.
+   */
+  content: ReactNode | string;
+  /**
+   * Offset of the tooltip relative to its target, as `[crossAxis, mainAxis]`.
+   */
+  offset?: [number, number];
+  /**
+   * Callback fired when the component requests to be hidden.
+   */
+  onHide?: () => void;
+  /**
+   * Callback fired when the component requests to be shown.
+   */
+  onShow?: () => void;
+  /**
+   * Describes the preferred placement of your component. Chassis will flip it to keep it in
+   * view.
+   */
+  placement?: Placement;
+  /**
+   * Tooltips always show on focus, since keyboard/screen-reader users need them too. Set to
+   * `'focus'` to disable the hover trigger and show on focus only.
+   */
+  trigger?: 'hover' | 'focus';
+  /**
+   * Toggle the visibility of the tooltip component.
+   */
+  visible?: boolean;
+}
+declare const Tooltip: FC<TooltipProps>;
+//#endregion
+export { TooltipProps as n, Tooltip as t };

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

@@ -0,0 +1,135 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { i as ExtendedSizing, n as ContextColor } from "./types-CS_40Txv.js";
+import React, { ElementType, ImgHTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/avatar/Avatar.d.ts
+type AvatarOwnProps<C extends ElementType> = {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Toggle the disabled state for the component. Only applies when `component` is `a` or `button`.
+   */
+  disabled?: boolean;
+  /**
+   * Renders the smooth (tinted background) context variant instead of the solid default.
+   */
+  smooth?: boolean;
+  /**
+   * Sets the size of the component to one of Chassis component sizes.
+   */
+  size?: ExtendedSizing;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Defaults to `span`, or `a` when `href` is set. Set explicitly to `button` (or another
+   * interactive element/component) to make a non-link avatar focusable and clickable.
+   */
+  component?: C;
+  /**
+   * Image source. When set, renders an `AvatarImage` in place of `children`.
+   */
+  src?: string;
+  /**
+   * Alt text for the image rendered when `src` is set.
+   */
+  alt?: string;
+  /**
+   * Renders the avatar as a link to this URL. Defaults `component` to `a`. Passed through to a
+   * custom `component` too, regardless of whether it resolves to a native `a`/`button`.
+   */
+  href?: string;
+  /**
+   * Renders a status badge in the bottom-end corner, in one of the Chassis themed colors.
+   */
+  status?: ContextColor;
+  /**
+   * Accessible label for the status badge, exposed to assistive tech as visually hidden text.
+   * Falls back to the `status` value itself.
+   */
+  statusLabel?: string;
+};
+type AvatarProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, AvatarOwnProps<C>>;
+type AvatarComponent = (<C extends ElementType = 'span'>(props: AvatarProps<C> & {
+  ref?: PolymorphicRefWithFallback<C, HTMLSpanElement | HTMLAnchorElement>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Avatar: AvatarComponent;
+//#endregion
+//#region src/components/avatar/AvatarImage.d.ts
+interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+}
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+//#endregion
+//#region src/components/avatar/AvatarStack.d.ts
+interface AvatarStackItemDef {
+  /**
+   * React key for the rendered `Avatar`. Falls back to the item's index in `data`.
+   */
+  key?: string | number;
+  /**
+   * Image source, rendered via `AvatarImage`.
+   */
+  src?: string;
+  /**
+   * Alt text for the image rendered when `src` is set.
+   */
+  alt?: string;
+  /**
+   * Renders the avatar as a link to this URL.
+   */
+  href?: string;
+  /**
+   * Renders a status badge in one of the Chassis themed colors.
+   */
+  status?: ContextColor;
+  /**
+   * Accessible label for the status badge.
+   */
+  statusLabel?: string;
+  /**
+   * Content to render when `src` isn't set, e.g. initials or a "+5" overflow count.
+   */
+  content?: ReactNode;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: ElementType;
+}
+type AvatarStackOwnProps<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;
+  /**
+   * Sets the size of every `Avatar` in the stack to one of Chassis component sizes.
+   */
+  size?: ExtendedSizing;
+  /**
+   * Renders a `Avatar` for each item, ahead of any JSX `children` (handy for a trailing "+N"
+   * overflow avatar).
+   */
+  items?: AvatarStackItemDef[];
+};
+type AvatarStackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, AvatarStackOwnProps<C>>;
+type AvatarStackComponent = (<C extends ElementType = 'div'>(props: AvatarStackProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const AvatarStack: AvatarStackComponent;
+//#endregion
+export { AvatarImageProps as a, AvatarImage as i, AvatarStackItemDef as n, Avatar as o, AvatarStackProps as r, AvatarProps as s, AvatarStack as t };

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

@@ -0,0 +1,80 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import React, { ElementType, FormHTMLAttributes, LabelHTMLAttributes, ReactElement } from "react";
+//#region src/components/form/Form.d.ts
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
+   */
+  validated?: boolean;
+}
+declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+//#endregion
+//#region src/components/form/FormLabel.d.ts
+interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * A string of all className you want to be applied to the component, and override standard className value.
+   */
+  customClassName?: string;
+}
+declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+//#endregion
+//#region src/components/form/FormHelp.d.ts
+type FormHelpOwnProps<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 FormHelpProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FormHelpOwnProps<C>>;
+type FormHelpComponent = (<C extends ElementType = 'div'>(props: FormHelpProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const FormHelp: FormHelpComponent;
+//#endregion
+//#region src/components/form/FormFeedback.d.ts
+type FormFeedbackOwnProps<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;
+  /**
+   * Set component validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * If your form layout allows it, you can display validation feedback in a styled tooltip.
+   */
+  tooltip?: boolean;
+  /**
+   * Set component validation state to valid.
+   */
+  valid?: boolean;
+};
+type FormFeedbackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, FormFeedbackOwnProps<C>>;
+type FormFeedbackComponent = (<C extends ElementType = 'div'>(props: FormFeedbackProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+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 };

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

@@ -0,0 +1,202 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as CalendarLabels, t as DateRangePreset } from "./dateRangePresets-R1FtA1zp.js";
+import React, { HTMLAttributes } from "react";
+import { RangeValue } from "react-aria";
+import { DateValue as DateValue$1 } from "react-stately";
+//#region src/components/calendar/Calendar.d.ts
+interface CalendarBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /**
+   * An accessible label for the calendar, used when there's no visible label. Required for
+   * standalone use — a calendar grid has no other accessible name of its own.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible label element for the calendar.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Whether to automatically focus the calendar when it mounts.
+   */
+  autoFocus?: boolean;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * Prevents the calendar from being focused or interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * The day that starts the week, overriding the default set by the active locale.
+   *
+   * @default 'mon'
+   */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+  /**
+   * Callback that is called for each date in the calendar. If it returns `true`, that date is
+   * shown but cannot be selected.
+   */
+  isDateUnavailable?: (date: DateValue$1) => boolean;
+  /**
+   * Overrides for the handful of strings this component renders itself rather than getting from
+   * the active locale (the year view's paging arrows, its live-region announcements, and the
+   * month/year header buttons). Everything else — month and weekday names, the calendar system —
+   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English
+   * defaults, so passing one key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>;
+  /**
+   * The maximum allowed date that a user may select.
+   */
+  maxValue?: DateValue$1 | null;
+  /**
+   * The minimum allowed date that a user may select.
+   */
+  minValue?: DateValue$1 | null;
+  /**
+   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
+   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
+   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.
+   */
+  unavailableDates?: string[];
+  /**
+   * Number of months to display side by side, sharing one selection. Wraps to multiple rows in
+   * a narrow container (e.g. a popover on a sm screen) rather than overflowing — the wrap is
+   * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of
+   * where the calendar is embedded.
+   *
+   * @default 1
+   */
+  visibleMonths?: number;
+}
+interface CalendarSingleProps extends CalendarBaseProps {
+  /**
+   * The initial selected date (uncontrolled).
+   */
+  defaultValue?: DateValue$1 | null;
+  /**
+   * Callback fired when the selected date changes. Unlike `DatePicker`'s `onChange` (whose
+   * segmented field can be cleared to `null`), a calendar selection is always a concrete date.
+   */
+  onChange?: (value: DateValue$1) => void;
+  /**
+   * Whether a single date or multiple, independently toggled dates can be selected.
+   *
+   * @default 'single'
+   */
+  selectionMode?: 'single';
+  /**
+   * The selected date (controlled).
+   */
+  value?: DateValue$1 | null;
+}
+interface CalendarMultipleProps extends CalendarBaseProps {
+  /**
+   * The initial selected dates (uncontrolled).
+   */
+  defaultValue?: DateValue$1[] | null;
+  /**
+   * Callback fired when the set of selected dates changes.
+   */
+  onChange?: (value: DateValue$1[]) => void;
+  /**
+   * Whether a single date or multiple, independently toggled dates can be selected.
+   *
+   * @default 'single'
+   */
+  selectionMode: 'multiple';
+  /**
+   * The selected dates (controlled).
+   */
+  value?: DateValue$1[] | null;
+}
+type CalendarProps = CalendarSingleProps | CalendarMultipleProps;
+declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/calendar/RangeCalendar.d.ts
+interface RangeCalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  /**
+   * An accessible label for the calendar, used when there's no visible label. Required for
+   * standalone use — a calendar grid has no other accessible name of its own.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies a visible label element for the calendar.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Whether to automatically focus the calendar when it mounts.
+   */
+  autoFocus?: boolean;
+  /**
+   * A string of all className you want applied to the base component.
+   */
+  className?: string;
+  /**
+   * The initial selected date range (uncontrolled).
+   */
+  defaultValue?: RangeValue<DateValue$1> | null;
+  /**
+   * Prevents the calendar from being focused or interacted with.
+   */
+  disabled?: boolean;
+  /**
+   * The day that starts the week, overriding the default set by the active locale.
+   *
+   * @default 'mon'
+   */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+  /**
+   * Callback that is called for each date in the calendar. If it returns `true`, that date is
+   * shown but cannot be selected.
+   */
+  isDateUnavailable?: (date: DateValue$1) => boolean;
+  /**
+   * Overrides for the handful of strings this component renders itself rather than getting from
+   * the active locale (the year view's paging arrows, its live-region announcements, and the
+   * month/year header buttons). Everything else — month and weekday names, the calendar system —
+   * follows `I18nProvider`'s locale via react-aria and needs no override. Merged over the English
+   * defaults, so passing one key leaves the rest alone.
+   */
+  labels?: Partial<CalendarLabels>;
+  /**
+   * The maximum allowed date that a user may select.
+   */
+  maxValue?: DateValue$1 | null;
+  /**
+   * The minimum allowed date that a user may select.
+   */
+  minValue?: DateValue$1 | null;
+  /**
+   * Callback fired when a complete range is selected (both a start and end date).
+   */
+  onChange?: (value: RangeValue<DateValue$1>) => void;
+  /**
+   * A list of quick-select range presets shown beside the calendar. Selecting a preset commits
+   * its range immediately, the same as picking a start and end date from the grid. The preset
+   * matching the current selection (if any) is marked selected. Omit to not show a preset list.
+   */
+  presets?: DateRangePreset[];
+  /**
+   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to
+   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed
+   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.
+   */
+  unavailableDates?: string[];
+  /**
+   * The selected date range (controlled).
+   */
+  value?: RangeValue<DateValue$1> | null;
+  /**
+   * Number of months to display side by side, sharing one selection. Wraps to multiple rows in
+   * a narrow container (e.g. a popover on a sm screen) rather than overflowing — the wrap is
+   * driven by the calendar's own width, not the viewport, so it adapts correctly regardless of
+   * where the calendar is embedded.
+   *
+   * @default 1
+   */
+  visibleMonths?: number;
+}
+declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CalendarProps as a, CalendarMultipleProps as i, RangeCalendarProps as n, CalendarSingleProps as o, Calendar as r, RangeCalendar as t };

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

@@ -0,0 +1,210 @@
+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-SLMTNHF9.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;
+}
+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>>;
+}
+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
+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, set via the `--cx-grid-columns` custom property
+   * (defaults to `12` in CSS when omitted). 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, set via the `--cx-grid-gap` custom property (or `--cx-gap` when
+   * `fill` is set). Accepts a `Spacing` token (mapped to the matching `--cx-space-*` custom
+   * property) or any raw CSS `gap` value, including a `"{row} {column}"` pair.
+   *
+   * @type { Spacing | string }
+   */
+  gap?: Spacing | (string & {});
+  /**
+   * 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;
+};
+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 `g-col-{n}` class.
+   */
+  span?: number;
+  /**
+   * Grid column line to start this item at, mapped to the `g-start-{n}` class.
+   */
+  start?: number;
+}
+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` at a breakpoint and up.
+   *
+   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: number, start?: number }>> }
+   */
+  responsive?: Partial<Record<Breakpoint, GridItemLayout>>;
+  /**
+   * Turns this item into a nested subgrid: adds `.grid`/`.grid-cols-subgrid` alongside its
+   * `g-col-{n}`/`g-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, set via the `--cx-grid-gap` custom property. Only
+   * relevant when `subgrid` is set — a subgrid doesn't inherit its parent's gap.
+   *
+   * @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;
+}
+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>>;
+}
+declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { GridItemProps as a, Container as c, ColProps as d, GridItemLayout as i, ContainerProps as l, RowProps as n, Grid as o, GridItem as r, GridProps as s, Row as t, Col as u };