@chassis-ui/react 0.2.0 → 0.4.0

package/dist/chunks/index-DPCwFiJL.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-D6FM7bYR.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-DPCwFiJL.d.ts.map

package/dist/chunks/{index-BTDgfLxK.d.ts → index-DQImhbhy.d.ts}

@@ -1,6 +1,7 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as LinkProps } from "./Link-B0Y1xgYi.js";
+import { n as LinkProps } from "./Link-CKymd2ru.js";
+import { t as NavVariant } from "./navVariant-CnD21GBS.js";
 import React, { ElementType, HTMLAttributes, ReactElement, Ref } from "react";
 //#region src/components/nav/Nav.d.ts
 interface NavItemDef {
@@ -39,9 +40,17 @@ type NavOwnProps<C extends ElementType> = {
    */
   layout?: 'fill' | 'justified';
   /**
-   * Set the nav variant to tabs or pills.
+   * Size the component sm or lg.
    */
-  variant?: 'tabs' | 'pills';
+  size?: 'sm' | 'lg';
+  /**
+   * Set the nav variant to tabs, to segments (a segmented control) or to underline, which
+   * underlines the active link. `'pills'` is the former name of `'segments'`: deprecated, it
+   * renders the same.
+   *
+   * @type { 'tabs' | 'segments' | 'underline' | 'pills' }
+   */
+  variant?: NavVariant;
 };
 type NavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavOwnProps<C>>;
 type NavComponent = (<C extends ElementType = 'ul'>(props: NavProps<C> & {
@@ -75,7 +84,13 @@ type NavLinkComponent = (<C extends ElementType = 'a'>(props: NavLinkProps<C> &
 declare const NavLink: NavLinkComponent;
 //#endregion
 //#region src/components/nav/NavItem.d.ts
-type NavItemComponent = (<C extends ElementType = 'a'>(props: NavLinkProps<C> & {
+type NavItemProps<C extends ElementType = 'a'> = NavLinkProps<C> & {
+  /**
+   * Keeps the item in the list inside a `NavOverflow`, whatever the width.
+   */
+  keepVisible?: boolean;
+};
+type NavItemComponent = (<C extends ElementType = 'a'>(props: NavItemProps<C> & {
   ref?: Ref<HTMLLIElement>;
 }) => ReactElement | null) & {
   displayName?: string;
@@ -91,4 +106,5 @@ interface NavTitleProps extends HTMLAttributes<HTMLLIElement> {
 }
 declare const NavTitle: React.ForwardRefExoticComponent<NavTitleProps & React.RefAttributes<HTMLLIElement>>;
 //#endregion
-export { NavLinkProps as a, NavProps as c, NavLink as i, NavTitleProps as n, Nav as o, NavItem as r, NavItemDef as s, NavTitle as t };
+export { NavLink as a, NavItemDef as c, NavItemProps as i, NavProps as l, NavTitleProps as n, NavLinkProps as o, NavItem as r, Nav as s, NavTitle as t };
+//# sourceMappingURL=index-DQImhbhy.d.ts.map

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

@@ -0,0 +1,182 @@
+import "./focus-ring-SR_LwaN7.js";
+import { i as IconValue } from "./iconConfig-C6gbYhsD.js";
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
+import { Key as Key$1, Selection } from "react-aria-components";
+//#region src/components/tree/Tree.d.ts
+interface TreeProps<T extends object> {
+  /**
+   * An accessible name for the tree, when no visible heading names it.
+   */
+  'aria-label'?: string;
+  /**
+   * The id of the visible heading that names the tree.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Focus the tree when it mounts: `true` or `'first'` focuses its first item, `'last'` its last.
+   */
+  autoFocus?: boolean | 'first' | 'last';
+  /**
+   * Draw a checkbox in every item, which selects the item. On by default with
+   * `selectionMode="multiple"` and the `'toggle'` selection behavior, off otherwise.
+   */
+  checkboxes?: boolean;
+  /**
+   * `TreeItem` elements, or a render function called once per entry of `items`, returning that
+   * entry's `TreeItem`.
+   */
+  children: ReactNode | ((item: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The keys of the items expanded at first (uncontrolled).
+   */
+  defaultExpandedKeys?: Iterable<Key$1>;
+  /**
+   * The keys of the items selected at first (uncontrolled): `'all'`, or an iterable of keys.
+   */
+  defaultSelectedKeys?: 'all' | Iterable<Key$1>;
+  /**
+   * Values that should rebuild the items when using the `items`/render-function form of
+   * `children` — e.g. a value from outside `items` that the render function reads. Without this,
+   * changing that value won't re-render the items, which are only rebuilt when `items` or
+   * `dependencies` change by reference.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+  /**
+   * Whether `disabledKeys` disables every interaction with an item, or only its selection.
+   *
+   * @default 'all'
+   */
+  disabledBehavior?: 'all' | 'selection';
+  /**
+   * The keys of the items that are disabled.
+   */
+  disabledKeys?: Iterable<Key$1>;
+  /**
+   * Keep at least one item selected: the last selected item can't be deselected.
+   */
+  disallowEmptySelection?: boolean;
+  /**
+   * The keys of the expanded items (controlled).
+   */
+  expandedKeys?: Iterable<Key$1>;
+  /**
+   * The chevron of an item with child items, in place of `IconProvider`'s `expand` icon: an icon
+   * name, or an element.
+   */
+  expandIcon?: IconValue;
+  /**
+   * The id of the tree element.
+   */
+  id?: string;
+  /**
+   * The data to render as items, through the function form of `children`.
+   */
+  items?: Iterable<T>;
+  /**
+   * Called with an item's key when the item is activated: with Enter, or with a click when the
+   * tree has no selection. An item's own `onAction` is called too.
+   */
+  onAction?: (key: Key$1) => void;
+  /**
+   * Called with the keys of the expanded items when an item expands or collapses.
+   */
+  onExpandedChange?: (keys: Set<Key$1>) => void;
+  /**
+   * Called with the keys of the selected items (`'all'`, or a `Set`) when the selection changes.
+   */
+  onSelectionChange?: (keys: Selection) => void;
+  /**
+   * What to render in place of the items when there are none.
+   */
+  renderEmptyState?: () => ReactNode;
+  /**
+   * The keys of the selected items (controlled): `'all'`, or an iterable of keys.
+   */
+  selectedKeys?: 'all' | Iterable<Key$1>;
+  /**
+   * How a click changes a multiple selection: `'toggle'` adds or removes the clicked item,
+   * `'replace'` selects it alone, with Ctrl, Cmd and Shift for more, as a file manager does.
+   *
+   * @default 'toggle'
+   */
+  selectionBehavior?: 'toggle' | 'replace';
+  /**
+   * Whether items can be selected, and how many at a time.
+   *
+   * @default 'none'
+   */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /**
+   * Inline styles for the tree element.
+   */
+  style?: CSSProperties;
+}
+declare const Tree$1: <T extends object>(props: TreeProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+//#endregion
+//#region src/components/tree/TreeItem.d.ts
+interface TreeItemProps<T extends object = object> {
+  /**
+   * The item's child items: `TreeItem` elements, or a render function called once per entry of
+   * `items`, returning that entry's `TreeItem`.
+   */
+  children?: ReactNode | ((item: T) => ReactElement);
+  /**
+   * A string of all className you want applied to the item.
+   */
+  className?: string;
+  /**
+   * Values that should rebuild the child items when using the `items`/render-function form of
+   * `children`, as `Tree`'s `dependencies`.
+   */
+  dependencies?: ReadonlyArray<unknown>;
+  /**
+   * Toggle the disabled state for the item, as a key in the tree's `disabledKeys` does.
+   */
+  disabled?: boolean;
+  /**
+   * An icon drawn before the label.
+   */
+  icon?: ReactNode;
+  /**
+   * The item's key, named by `expandedKeys`, `selectedKeys` and `disabledKeys`. Defaults to the
+   * key of the data entry the item renders, or to the item's position.
+   */
+  id?: Key$1;
+  /**
+   * The data to render as child items, through the function form of `children`.
+   */
+  items?: Iterable<T>;
+  /**
+   * The item's content.
+   */
+  label: ReactNode;
+  /**
+   * Called when the item is activated: with Enter, or with a click when the tree has no
+   * selection.
+   */
+  onAction?: () => void;
+  /**
+   * Inline styles for the item's row.
+   */
+  style?: CSSProperties;
+  /**
+   * The item's text, which typing a letter in the tree searches. Defaults to `label` when it is a
+   * string.
+   */
+  textValue?: string;
+}
+/**
+ * An item of a `Tree`: a row with a label, an optional icon, and child items among its children.
+ */
+declare const TreeItem$1: <T extends object = object>(props: TreeItemProps<T> & {
+  ref?: Ref<HTMLDivElement>;
+}) => ReactElement;
+//#endregion
+export { TreeProps as i, TreeItemProps as n, Tree$1 as r, TreeItem$1 as t };
+//# sourceMappingURL=index-DaHQdNul.d.ts.map

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

@@ -143,4 +143,5 @@ interface AccordionItemProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDetailsElement>>;
 //#endregion
-export { AccordionBody as a, AccordionItemDef as c, AccordionHeaderProps as i, AccordionProps as l, AccordionItemProps as n, AccordionBodyProps as o, AccordionHeader as r, Accordion as s, AccordionItem as t };
+export { AccordionBody as a, AccordionItemDef as c, AccordionHeaderProps as i, AccordionProps as l, AccordionItemProps as n, AccordionBodyProps as o, AccordionHeader as r, Accordion as s, AccordionItem as t };
+//# sourceMappingURL=index-Dcc_W6Kv.d.ts.map

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

@@ -0,0 +1,32 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { ElementType, ReactElement } from "react";
+//#region src/components/visually-hidden/VisuallyHidden.d.ts
+type VisuallyHiddenOwnProps<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 an HTML element or a component.
+   *
+   * @default 'span'
+   */
+  component?: C;
+  /**
+   * Shows the element while it, or an element inside it, has keyboard focus: a skip link, or a
+   * group of controls only keyboard users reach. Renders `.visually-hidden-focusable` instead of
+   * `.visually-hidden`.
+   */
+  focusable?: boolean;
+};
+type VisuallyHiddenProps<C extends ElementType = 'span'> = PolymorphicComponentProps<C, VisuallyHiddenOwnProps<C>>;
+type VisuallyHiddenComponent = (<C extends ElementType = 'span'>(props: VisuallyHiddenProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const VisuallyHidden: VisuallyHiddenComponent;
+//#endregion
+export { VisuallyHiddenProps as n, VisuallyHidden as t };
+//# sourceMappingURL=index-Ddd7iWfm.d.ts.map

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

@@ -65,4 +65,5 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
-export { TextareaProps as n, Textarea as t };
+export { TextareaProps as n, Textarea as t };
+//# sourceMappingURL=index-Dfg4Ftb8.d.ts.map

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

@@ -50,4 +50,5 @@ interface BreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
 }
 declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
 //#endregion
-export { BreadcrumbProps as a, BreadcrumbItemDef as i, BreadcrumbItemProps as n, Breadcrumb as r, BreadcrumbItem as t };
+export { BreadcrumbProps as a, BreadcrumbItemDef as i, BreadcrumbItemProps as n, Breadcrumb as r, BreadcrumbItem as t };
+//# sourceMappingURL=index-DtbUXxjz.d.ts.map

package/dist/chunks/{index-DPV62IdF.d.ts → index-DtvHH_Mb.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
-import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor, r as ContextStyle } from "./types-CS_40Txv.js";
+import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { i as ContextStyle, r as ContextColor } from "./types-D6FM7bYR.js";
 import React, { ElementType, ReactElement } from "react";
 //#region src/components/list/List.d.ts
 interface ListItemDef {
@@ -36,10 +36,10 @@ type ListOwnProps<C extends ElementType> = {
   className?: string;
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
-   * Defaults to `'ul'`, unless an item (a data-driven item with `href`, or a `<ListItem
-   * component="a">`/`<ListItem component="button">` child) is interactive — a bare `<a>`/
-   * `<button>` isn't a valid direct child of `<ul>`/`<ol>`, so the default switches to `'div'`
-   * instead. Pass `component` explicitly to opt out of this.
+   * Defaults to `'ul'`, unless an item (a data-driven item with `href`, or a `<ListItem>` child
+   * rendering an `<a>`/`<button>` through `component` or `asChild`) is interactive — a bare
+   * `<a>`/`<button>` isn't a valid direct child of `<ul>`/`<ol>`, so the default switches to
+   * `'div'` instead. Pass `component` explicitly to opt out of this.
    */
   component?: C;
   /**
@@ -102,17 +102,19 @@ type ListItemOwnProps<C extends ElementType> = {
    */
   component?: C;
   /**
-   * The href attribute specifies the URL of the page the link goes to. Only applicable when
-   * `component` is `"a"`.
+   * The href attribute specifies the URL of the page the link goes to. Renders an `<a>` in place
+   * of the `<li>`, unless `component` or `asChild` chose the element. Inside a `List`, the list
+   * renders a `<div>` around it in place of the `<ul>`.
    */
   href?: string;
 };
 type ListItemProps<C extends ElementType = 'li'> = PolymorphicComponentProps<C, ListItemOwnProps<C>>;
 type ListItemComponent = (<C extends ElementType = 'li'>(props: ListItemProps<C> & {
-  ref?: PolymorphicRef<C>;
+  ref?: PolymorphicRefWithFallback<C, HTMLLIElement | HTMLAnchorElement>;
 }) => ReactElement | null) & {
   displayName?: string;
 };
 declare const ListItem: ListItemComponent;
 //#endregion
-export { ListProps as a, ListItemDef as i, ListItemProps as n, List as r, ListItem as t };
+export { ListProps as a, ListItemDef as i, ListItemProps as n, List as r, ListItem as t };
+//# sourceMappingURL=index-DtvHH_Mb.d.ts.map

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

@@ -0,0 +1,56 @@
+import "./focus-ring-SR_LwaN7.js";
+import { t as Placement } from "./overlayPlacement-CIsLpycT.js";
+import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
+//#region src/components/popover/Popover.d.ts
+interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'content' | 'title'> {
+  /**
+   * The trigger: a single element, which opens the popover on click.
+   */
+  children: ReactElement;
+  /**
+   * Content node for your component.
+   */
+  content: ReactNode | string;
+  /**
+   * Whether the popover is open when it first renders. Use it instead of `visible` when nothing
+   * outside needs to control the popover.
+   */
+  defaultVisible?: boolean;
+  /**
+   * Offset of the popover relative to its target, as `[crossAxis, mainAxis]`.
+   */
+  offset?: [number, number];
+  /**
+   * Callback fired when the popover hides.
+   */
+  onHide?: () => void;
+  /**
+   * Callback fired when the popover shows.
+   */
+  onShow?: () => void;
+  /**
+   * Callback fired when the popover asks to show or hide: a click on the trigger, a click
+   * outside, the Escape key, or the closing of the dialog it is in. Receives the state it asks
+   * for. With `visible` set, the popover changes only when `visible` does.
+   */
+  onVisibleChange?: (visible: boolean) => void;
+  /**
+   * Title node for your component.
+   */
+  title?: ReactNode | string;
+  /**
+   * Describes the preferred placement of your component. Chassis will flip it to keep it in
+   * view.
+   */
+  placement?: Placement;
+  /**
+   * Whether the popover is open. Setting it makes the popover controlled: it shows and hides
+   * only when this changes, so pair it with `onVisibleChange`. Leave it unset, or use
+   * `defaultVisible`, for a popover that opens and closes itself.
+   */
+  visible?: boolean;
+}
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PopoverProps as n, Popover as t };
+//# sourceMappingURL=index-Du9fBqkT.d.ts.map

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

@@ -63,4 +63,5 @@ interface RangeInputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 declare const RangeInput: React.ForwardRefExoticComponent<RangeInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
-export { RangeInputProps as n, RangeInput as t };
+export { RangeInputProps as n, RangeInput as t };
+//# sourceMappingURL=index-HrKN6s8z.d.ts.map

package/dist/chunks/{index-ClT3E_hv.d.ts → index-NGgDkhyn.d.ts}

@@ -1,8 +1,8 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor, o as Sizing, r as ContextStyle, s as Spacing, t as Breakpoint } from "./types-CS_40Txv.js";
-import { t as FlexDirection } from "./breakpoints-SLMTNHF9.js";
-import { n as LinkProps } from "./Link-B0Y1xgYi.js";
+import { c as Sizing, i as ContextStyle, l as Spacing, o as Responsive, r as ContextColor } from "./types-D6FM7bYR.js";
+import { t as FlexDirection } from "./breakpoints-ECy4lKQT.js";
+import { n as LinkProps } from "./Link-CKymd2ru.js";
 import { ElementType, ReactElement, ReactNode } from "react";
 //#region src/components/card/Card.d.ts
 type CardOwnProps<C extends ElementType> = {
@@ -20,9 +20,11 @@ type CardOwnProps<C extends ElementType> = {
   color?: ContextColor;
   /**
    * Switches the card from its default stacked (column) layout to a side-by-side (row) layout.
-   * Wrap the image and body in `Col` to control each side's width.
+   * Give the image and the body a width utility (`w-4/12`, `w-8/12`) to control each side's
+   * width. An object sets the direction from a breakpoint up — e.g. `{ lg: 'row' }` to lay the
+   * card out horizontally from `lg` up while stacking below it.
    */
-  direction?: FlexDirection;
+  direction?: Responsive<FlexDirection>;
   /**
    * Shorthand for a `CardFooter`, rendered after the image/title/subtitle/text/`children` block.
    */
@@ -44,11 +46,6 @@ type CardOwnProps<C extends ElementType> = {
    * Orientates `image` to the top (default) or bottom of the card.
    */
   imageOrientation?: 'top' | 'bottom';
-  /**
-   * Overrides `direction` at one or more breakpoints — e.g. `{ lg: 'row' }` to lay the card
-   * out horizontally from `lg` up while stacking below it.
-   */
-  responsive?: Partial<Record<Breakpoint, FlexDirection>>;
   /**
    * Sets the size of the component to one of Chassis component sizes.
    */
@@ -96,20 +93,19 @@ type CardBodyOwnProps<C extends ElementType> = {
   component?: C;
   /**
    * Switches the body from its default stacked (column) layout to a side-by-side (row) layout —
-   * for placing an image beside text within a single padded region. Wrap the image and text in
-   * `Col` to control each side's width, and nest another `CardBody` (with `.p-0`) for the text
-   * side so it doesn't receive double padding.
+   * for placing an image beside text within a single padded region. Give the image and the text
+   * a width utility (`w-4/12`, `w-8/12`) to control each side's width, and nest another
+   * `CardBody` (with `.p-0`) for the text side so it doesn't receive double padding. An object
+   * sets the direction from a breakpoint up: `{ md: 'row' }`.
    */
-  direction?: FlexDirection;
+  direction?: Responsive<FlexDirection>;
   /**
    * Spacing between children, mapped to the `gap-*` utility classes. Overrides the card's default
    * gap between body children.
+   *
+   * @type { Spacing | 0 }
    */
   gap?: Spacing | 0;
-  /**
-   * Overrides `direction` at one or more breakpoints.
-   */
-  responsive?: Partial<Record<Breakpoint, FlexDirection>>;
 };
 type CardBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, CardBodyOwnProps<C>>;
 type CardBodyComponent = (<C extends ElementType = 'div'>(props: CardBodyProps<C> & {
@@ -191,14 +187,11 @@ type CardImageOwnProps<C extends ElementType> = {
   component?: C;
   /**
    * Orientates the image to the top or bottom of the card as an "image cap", or to the start/end
-   * for a horizontal layout. Omit to round all four corners for use inside `CardBody`.
-   */
-  orientation?: CardImageOrientation;
-  /**
-   * Overrides `orientation` at one or more breakpoints — e.g. `{ lg: 'start' }` to switch an
+   * for a horizontal layout. Omit to round all four corners for use inside `CardBody`. An object
+   * sets the orientation from a breakpoint up — e.g. `{ base: 'top', lg: 'start' }` to switch an
    * image cap from `top` to `start` once the card lays out horizontally.
    */
-  responsive?: Partial<Record<Breakpoint, CardImageOrientation>>;
+  orientation?: Responsive<CardImageOrientation>;
 };
 type CardImageProps<C extends ElementType = 'img'> = PolymorphicComponentProps<C, CardImageOwnProps<C>>;
 type CardImageComponent = (<C extends ElementType = 'img'>(props: CardImageProps<C> & {
@@ -299,4 +292,5 @@ type CardTitleComponent = (<C extends ElementType = 'h5'>(props: CardTitleProps<
 };
 declare const CardTitle: CardTitleComponent;
 //#endregion
-export { CardProps as S, CardFooter as _, CardSubtitle as a, CardBodyProps as b, CardLinkProps as c, CardImage as d, CardImageProps as f, CardGroupProps as g, CardGroup as h, CardTextProps as i, CardImageOverlay as l, CardHeaderProps as m, CardTitleProps as n, CardSubtitleProps as o, CardHeader as p, CardText as r, CardLink as s, CardTitle as t, CardImageOverlayProps as u, CardFooterProps as v, Card as x, CardBody as y };
+export { CardProps as S, CardFooter as _, CardSubtitle as a, CardBodyProps as b, CardLinkProps as c, CardImage as d, CardImageProps as f, CardGroupProps as g, CardGroup as h, CardTextProps as i, CardImageOverlay as l, CardHeaderProps as m, CardTitleProps as n, CardSubtitleProps as o, CardHeader as p, CardText as r, CardLink as s, CardTitle as t, CardImageOverlayProps as u, CardFooterProps as v, Card as x, CardBody as y };
+//# sourceMappingURL=index-NGgDkhyn.d.ts.map

package/dist/chunks/{index-Dfy1YW5j.d.ts → index-U27Ar174.d.ts}

@@ -1,4 +1,4 @@
-import { n as ContextColor, t as Breakpoint } from "./types-CS_40Txv.js";
+import { r as ContextColor, t as Breakpoint } from "./types-D6FM7bYR.js";
 import React, { ReactNode, TableHTMLAttributes } from "react";
 //#region src/utils/tableClassName.d.ts
 interface TableStyleProps {
@@ -70,4 +70,5 @@ interface StaticTableProps extends TableStyleProps, Omit<TableHTMLAttributes<HTM
 }
 declare const StaticTable: React.ForwardRefExoticComponent<StaticTableProps & React.RefAttributes<HTMLTableElement>>;
 //#endregion
-export { StaticTableProps as n, StaticTable as t };
+export { StaticTableProps as n, StaticTable as t };
+//# sourceMappingURL=index-U27Ar174.d.ts.map

package/dist/chunks/{index-CsMIgBsd.d.ts → index-YJ9QdBuq.d.ts}

@@ -1,6 +1,6 @@
 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 { l as Spacing, o as Responsive } from "./types-D6FM7bYR.js";
 import { ElementType, ReactElement } from "react";
 //#region src/components/stack/Stack.d.ts
 type StackOwnProps<C extends ElementType> = {
@@ -14,19 +14,18 @@ type StackOwnProps<C extends ElementType> = {
   component?: C;
   /**
    * Lays children out in a row (`horizontal`, the default, maps to `.hstack`) or a column
-   * (`vertical`, maps to `.vstack`).
+   * (`vertical`, maps to `.vstack`). An object switches the direction from a breakpoint up:
+   * `{ base: 'vertical', md: 'horizontal' }`. The breakpoints are container queries, so they
+   * require a `.contains-inline` ancestor (not applied by `Stack` itself — see the docs) to
+   * establish the container context they evaluate against.
    */
-  direction?: 'horizontal' | 'vertical';
+  direction?: Responsive<'horizontal' | 'vertical'>;
   /**
    * Spacing between children, mapped to the `gap-*` utility classes.
+   *
+   * @type { Spacing | 0 }
    */
   gap?: Spacing | 0;
-  /**
-   * Switches `direction` at one or more breakpoints via container queries. Requires a
-   * `.contains-inline` ancestor (not applied by `Stack` itself — see the docs) to establish the
-   * container context these queries evaluate against.
-   */
-  responsive?: Partial<Record<Breakpoint, 'horizontal' | 'vertical'>>;
 };
 type StackProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, StackOwnProps<C>>;
 type StackComponent = (<C extends ElementType = 'div'>(props: StackProps<C> & {
@@ -36,4 +35,5 @@ type StackComponent = (<C extends ElementType = 'div'>(props: StackProps<C> & {
 };
 declare const Stack: StackComponent;
 //#endregion
-export { StackProps as n, Stack as t };
+export { StackProps as n, Stack as t };
+//# sourceMappingURL=index-YJ9QdBuq.d.ts.map

package/dist/chunks/{index-Dh5CaHTP.d.ts → index-aRdgpeRb.d.ts}

@@ -1,6 +1,6 @@
 import "./focus-ring-SR_LwaN7.js";
 import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
-import { n as ContextColor, o as Sizing, r as ContextStyle } from "./types-CS_40Txv.js";
+import { c as Sizing, i as ContextStyle, r as ContextColor } from "./types-D6FM7bYR.js";
 import { ElementType, ReactElement } from "react";
 //#region src/components/badge/Badge.d.ts
 type BadgeOwnProps<C extends ElementType> = {
@@ -41,4 +41,5 @@ type BadgeComponent = (<C extends ElementType = 'span'>(props: BadgeProps<C> & {
 };
 declare const Badge: BadgeComponent;
 //#endregion
-export { BadgeProps as n, Badge as t };
+export { BadgeProps as n, Badge as t };
+//# sourceMappingURL=index-aRdgpeRb.d.ts.map