@chassis-ui/react 0.2.0 → 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

@@ -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-DR8sYtvd.d.ts → index-I-H3VJ-L.d.ts}

@@ -1,88 +1,12 @@
 import "./focus-ring-SR_LwaN7.js";
-import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.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 { a as Shapes, n as ContextColor, r as ContextStyle } from "./types-CS_40Txv.js";
-import { t as Button } from "./Button-Cptd4Yk7.js";
-import { n as LinkProps } from "./Link-B0Y1xgYi.js";
-import { t as Placement } from "./overlayPlacement-B7843a-Q.js";
-import React, { ButtonHTMLAttributes, ElementType, Fragment, HTMLAttributes, ReactElement, ReactNode } from "react";
-import "react-aria";
-//#region src/components/menu/Menu.d.ts
-type MenuFocusStrategy = 'first' | 'last';
-type MenuAutoClose = boolean | 'inside' | 'outside';
-type MenuOwnProps<C extends ElementType> = {
-  /**
-   * Controls which clicks close the menu. `true` closes on any click inside or outside.
-   * `false` requires a programmatic `visible` change. `'inside'` closes only on click inside
-   * the menu. `'outside'` closes only on click outside the menu.
-   */
-  autoClose?: MenuAutoClose;
-  /**
-   * 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.
-   * Defaults to `Fragment` — `MenuToggle`/`MenuList` render with no wrapping element, so
-   * they land as direct children of whatever contains the `Menu`. This matters inside
-   * `ButtonGroup`/`InputGroup`, whose CSS expects the toggle button and menu panel as direct
-   * children rather than nested inside an intermediate node.
-   *
-   * Pass an actual element (e.g. `"div"`, or `"li"` for a navbar item) to opt back into a
-   * wrapper — needed if you want to apply `className`/`style`/other rest props to a container
-   * around the whole menu, for semantic wrapping like a nav `<li>`, or for `reference="parent"`,
-   * which positions off this wrapper and has nothing to measure against without one.
-   */
-  component?: C;
-  /**
-   * Teleports the menu panel to a container element on open. Accepts an element reference, or
-   * `true` to append to `document.body`.
-   */
-  container?: boolean | Element;
-  /**
-   * Distance between the menu and its reference element, as `[skidding, distance]` in pixels.
-   */
-  offset?: [number, number];
-  /**
-   * Callback fired when the menu requests to be hidden.
-   */
-  onHide?: () => void;
-  /**
-   * Callback fired after the menu finishes hiding.
-   */
-  onHidden?: () => void;
-  /**
-   * Callback fired when the menu requests to be shown.
-   */
-  onShow?: () => void;
-  /**
-   * Callback fired after the menu finishes showing.
-   */
-  onShown?: () => void;
-  /**
-   * Initial placement. Chassis will flip it to keep the menu in view.
-   *
-   * @type 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
-   */
-  placement?: Placement;
-  /**
-   * Reference element used for positioning. `'toggle'` uses the trigger. `'parent'` uses this
-   * component's own rendered element, useful for split buttons and button groups.
-   */
-  reference?: 'toggle' | 'parent';
-  /**
-   * Toggle the visibility of the menu component.
-   */
-  visible?: boolean;
-};
-type MenuProps<C extends ElementType = typeof Fragment> = PolymorphicComponentProps<C, MenuOwnProps<C>>;
-type MenuComponent = (<C extends ElementType = typeof Fragment>(props: MenuProps<C> & {
-  ref?: PolymorphicRef<C>;
-}) => ReactElement | null) & {
-  displayName?: string;
-};
-declare const Menu: MenuComponent;
-//#endregion
+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> {
   /**
@@ -140,7 +64,7 @@ type MenuItemOwnProps = {
 };
 type MenuItemProps<C extends ElementType = 'a'> = LinkProps<C> & MenuItemOwnProps;
 type MenuItemComponent = (<C extends ElementType = 'a'>(props: MenuItemProps<C> & {
-  ref?: PolymorphicRef<C>;
+  ref?: PolymorphicRefWithFallback<C, HTMLAnchorElement | HTMLButtonElement>;
 }) => ReactElement | null) & {
   displayName?: string;
 };
@@ -196,6 +120,13 @@ 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.
    */
@@ -229,9 +160,10 @@ type MenuToggleOwnProps<C extends ElementType> = {
    */
   size?: 'sm' | 'lg';
   /**
-   * Sets the context style of the component. Only applies to the default `Button` root.
+   * Sets the style variant of the component, as `Button`'s own `variant` does. Only applies to
+   * the default `Button` root.
    */
-  variant?: ContextStyle;
+  variant?: ButtonProps['variant'];
 };
 type MenuToggleProps<C extends ElementType = typeof Button> = PolymorphicComponentProps<C, MenuToggleOwnProps<C>>;
 type MenuToggleComponent = (<C extends ElementType = typeof Button>(props: MenuToggleProps<C> & {
@@ -293,4 +225,5 @@ interface MenuSubmenuBackProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const MenuSubmenuBack: React.ForwardRefExoticComponent<MenuSubmenuBackProps & React.RefAttributes<HTMLButtonElement>>;
 //#endregion
-export { Menu as _, MenuToggle as a, MenuProps as b, 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, MenuAutoClose as v, MenuFocusStrategy as y };
+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-DEb9zXlC.d.ts → index-RHJhkSY-.d.ts}

@@ -1,7 +1,7 @@
 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 { n as Span } from "./breakpoints-CJ-498B7.js";
 import React, { ElementType, HTMLAttributes, ReactElement } from "react";
 //#region src/components/grid/Col.d.ts
 interface ColLayout {
@@ -22,6 +22,9 @@ interface ColLayout {
    */
   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.
@@ -34,6 +37,11 @@ interface ColProps extends HTMLAttributes<HTMLDivElement>, ColLayout {
    */
   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
@@ -67,6 +75,17 @@ type ContainerComponent = (<C extends ElementType = 'div'>(props: ContainerProps
 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.
@@ -77,8 +96,11 @@ type GridOwnProps<C extends ElementType> = {
    */
   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.
+   * 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;
   /**
@@ -87,18 +109,31 @@ type GridOwnProps<C extends ElementType> = {
    */
   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.
+   * 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> & {
@@ -112,13 +147,30 @@ declare const Grid: GridComponent;
 interface GridItemLayout {
   /**
    * Number of grid column tracks (of the parent `<Grid>`'s `columns`) this item spans, mapped to
-   * the `g-col-{n}` class.
+   * 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;
+  span?: number | 'full';
   /**
-   * Grid column line to start this item at, mapped to the `g-start-{n}` class.
+   * 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' }
    */
-  start?: number;
+  rowStart?: number | 'auto';
 }
 type GridItemOwnProps<C extends ElementType> = GridItemLayout & {
   /**
@@ -130,14 +182,14 @@ type GridItemOwnProps<C extends ElementType> = GridItemLayout & {
    */
   component?: C;
   /**
-   * Overrides `span`/`start` at a breakpoint and up.
+   * Overrides `span`/`start`/`rowSpan`/`rowStart` at a breakpoint and up.
    *
-   * @type { Partial<Record<'sm' | 'md' | 'lg' | 'xl' | '2xl', { span?: number, start?: number }>> }
+   * @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
-   * `g-col-{n}`/`g-start-{n}` placement classes, so its own children inherit the parent
+   * `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
@@ -151,8 +203,10 @@ type GridItemOwnProps<C extends ElementType> = GridItemLayout & {
    */
   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.
+   * 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 }
    */
@@ -193,6 +247,9 @@ interface RowLayout {
    */
   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.
@@ -205,6 +262,12 @@ interface RowProps extends HTMLAttributes<HTMLDivElement>, RowLayout {
    */
   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, 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 };
+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

package/dist/chunks/{index-Ctuk1xBU.d.ts → index-e7SJkI_m.d.ts}

@@ -1,5 +1,5 @@
 import "./focus-ring-SR_LwaN7.js";
-import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as PolymorphicRef, r as PolymorphicRefWithFallback, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
 import { n as ContextColor } from "./types-CS_40Txv.js";
 import React, { ElementType, ReactElement } from "react";
 //#region src/components/stepper/Stepper.d.ts
@@ -28,8 +28,8 @@ type StepperOwnProps<C extends ElementType> = {
   className?: string;
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
-   * Defaults to `'ol'`, unless a step (a data-driven item with `href`, or a `<StepperItem
-   * component="a">`/`<StepperItem component="button">` child) is interactive — a bare `<a>`/
+   * Defaults to `'ol'`, unless a step (a data-driven item with `href`, or a `<StepperItem>` child
+   * rendering an `<a>`/`<button>` through `component` or `asChild`) is interactive — a bare `<a>`/
    * `<button>` isn't a valid direct child of `<ol>`, so the default switches to `'div'` instead.
    * Pass `component` explicitly to opt out of this.
    */
@@ -84,16 +84,19 @@ type StepperItemOwnProps<C extends ElementType> = {
    */
   component?: C;
   /**
-   * The `href` attribute for an interactive step rendered as a link.
+   * The `href` attribute for an interactive step rendered as a link. Renders an `<a>` in place of
+   * the `<li>`, unless `component` or `asChild` chose the element. Inside a `Stepper`, the stepper
+   * renders a `<div>` around it in place of the `<ol>`.
    */
   href?: string;
 };
 type StepperItemProps<C extends ElementType = 'li'> = PolymorphicComponentProps<C, StepperItemOwnProps<C>>;
 type StepperItemComponent = (<C extends ElementType = 'li'>(props: StepperItemProps<C> & {
-  ref?: PolymorphicRef<C>;
+  ref?: PolymorphicRefWithFallback<C, HTMLLIElement | HTMLAnchorElement>;
 }) => ReactElement | null) & {
   displayName?: string;
 };
 declare const StepperItem: StepperItemComponent;
 //#endregion
-export { StepperProps as a, StepperItemDef as i, StepperItemProps as n, Stepper as r, StepperItem as t };
+export { StepperProps as a, StepperItemDef as i, StepperItemProps as n, Stepper as r, StepperItem as t };
+//# sourceMappingURL=index-e7SJkI_m.d.ts.map

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

@@ -0,0 +1,36 @@
+import "./focus-ring-SR_LwaN7.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/portal/Portal.d.ts
+/**
+ * `false` on the server and during hydration, `true` afterwards and in a client-only render. React
+ * hydrates against the server snapshot, then re-renders with the client one once hydration has
+ * finished, so a component can render something that only exists in the browser without
+ * mismatching the server's HTML.
+ */
+declare function useHydrated(): boolean;
+interface PortalProps {
+  /**
+   * The content to render in the portal.
+   */
+  children: ReactNode;
+  /**
+   * Where the children are portaled. Defaults to `document.body`.
+   */
+  container?: Element | DocumentFragment | null;
+  /**
+   * Rendered in place until the portal exists: on the server and during hydration. Nothing by
+   * default.
+   */
+  fallback?: ReactNode;
+}
+/**
+ * Renders its children into `container` (`document.body` by default), and renders `fallback` on the
+ * server and during hydration, so server-rendered pages hydrate without a mismatch.
+ */
+declare function Portal({ children, container, fallback }: PortalProps): ReactElement;
+declare namespace Portal {
+  var displayName: string;
+}
+//#endregion
+export { PortalProps as n, useHydrated as r, Portal as t };
+//# sourceMappingURL=index-g74gO0pc.d.ts.map

package/dist/chunks/{index-DKma0jQw.d.ts → index-qMq_-GY2.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 { t as ButtonObject } from "./renderFormCheck-DZh_5Df8.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-qMq_-GY2.d.ts.map

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

@@ -93,4 +93,5 @@ type ProgressBarComponent = (<C extends ElementType = 'div'>(props: ProgressBarP
 };
 declare const ProgressBar: ProgressBarComponent;
 //#endregion
-export { ProgressProps as i, ProgressBarProps as n, Progress as r, ProgressBar as t };
+export { ProgressProps as i, ProgressBarProps as n, Progress as r, ProgressBar as t };
+//# sourceMappingURL=index-t_x6jj7l.d.ts.map

package/dist/chunks/{input-adorn-C_EHML68.js → input-adorn-DwdX-jxA.js}

@@ -1 +1,2 @@
-import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-CACPOv1_.js";import t from"react";import n from"classnames";function r({children:e,className:r,component:i,onMouseDown:a,...o},s){let c=i??`span`,l=n(`input-adorn`,r);return t.createElement(c,{className:l,onMouseDown:e=>{a?.(e),e.defaultPrevented||e.preventDefault()},...o,ref:s},e)}const i=e(r,`InputAdorn`);export{i as t};
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import t from"react";import n from"classnames";function r({children:e,className:r,component:i,onMouseDown:a,...o},s){let c=i??`span`,l=n(`input-adorn`,r);return t.createElement(c,{className:l,onMouseDown:e=>{a?.(e),e.defaultPrevented||e.preventDefault()},...o,ref:s},e)}const i=e(r,`InputAdorn`);export{i as t};
+//# sourceMappingURL=input-adorn-DwdX-jxA.js.map

package/dist/chunks/input-adorn-DwdX-jxA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-adorn-DwdX-jxA.js","names":[],"sources":["../../src/components/input-adorn/InputAdorn.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype InputAdornOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component. Use\n   * `\"button\"` or `\"a\"` for an actionable adorn, e.g. a password reveal toggle or a clear button.\n   */\n  component?: C\n}\n\nexport type InputAdornProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  InputAdornOwnProps<C>\n>\n\ntype InputAdornComponent = (<C extends ElementType = 'span'>(\n  props: InputAdornProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction InputAdornRender<C extends ElementType = 'span'>(\n  { children, className, component, onMouseDown, ...rest }: InputAdornProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames('input-adorn', className)\n  const handleMouseDown: React.MouseEventHandler<Element> = (event) => {\n    onMouseDown?.(event)\n    // Keep focus on the associated input (e.g. a password toggle) instead of\n    // letting the browser shift it to this button/anchor on mousedown.\n    if (!event.defaultPrevented) {\n      event.preventDefault()\n    }\n  }\n  return (\n    <Component className={_className} onMouseDown={handleMouseDown} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const InputAdorn = createPolymorphicComponent<InputAdornComponent>(\n  InputAdornRender as ForwardRefRenderFunction<Element, InputAdornProps<ElementType>>,\n  'InputAdorn'\n)\n"],"mappings":"8HA8BA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,cAAa,GAAG,GAClD,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EAAW,cAAe,CAAS,EAStD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,YATuB,GAAU,CACnE,IAAc,CAAK,EAGd,EAAM,kBACT,EAAM,eAAe,CAEzB,EAEkE,GAAI,EAAW,KAEpE,EADR,CACQ,CAEf,CAEA,MAAa,EAAa,EACxB,EACA,YACF"}

package/dist/chunks/{input-group-iI7azfvE.js → input-group-Cuiuf4Dl.js}

@@ -1 +1,2 @@
-import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-CACPOv1_.js";import t from"react";import n from"classnames";function r({children:e,className:r,component:i,size:a,...o},s){let c=i??`div`,l=n(`input-group`,a,r);return t.createElement(c,{className:l,...o,ref:s},e)}const i=e(r,`InputGroup`);function a({children:e,className:r,component:i,...a},o){let s=i??`span`,c=n(`input-addon`,r);return t.createElement(s,{className:c,...a,ref:o},e)}const o=e(a,`InputGroupAddon`);export{i as n,o as t};
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import t from"react";import n from"classnames";function r({children:e,className:r,component:i,size:a,...o},s){let c=i??`div`,l=n(`input-group`,a,r);return t.createElement(c,{className:l,...o,ref:s},e)}const i=e(r,`InputGroup`);function a({children:e,className:r,component:i,...a},o){let s=i??`span`,c=n(`input-addon`,r);return t.createElement(s,{className:c,...a,ref:o},e)}const o=e(a,`InputGroupAddon`);export{i as n,o as t};
+//# sourceMappingURL=input-group-Cuiuf4Dl.js.map

package/dist/chunks/input-group-Cuiuf4Dl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-Cuiuf4Dl.js","names":[],"sources":["../../src/components/input-group/InputGroup.tsx","../../src/components/input-group/InputGroupAddon.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype InputGroupOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n}\n\nexport type InputGroupProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  InputGroupOwnProps<C>\n>\n\ntype InputGroupComponent = (<C extends ElementType = 'div'>(\n  props: InputGroupProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction InputGroupRender<C extends ElementType = 'div'>(\n  { children, className, component, size, ...rest }: InputGroupProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('input-group', size, className)\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const InputGroup = createPolymorphicComponent<InputGroupComponent>(\n  InputGroupRender as ForwardRefRenderFunction<Element, InputGroupProps<ElementType>>,\n  'InputGroup'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype InputGroupAddonOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * The id of the form control this addon labels, when rendered as `component=\"label\"`.\n   */\n  htmlFor?: string\n}\n\nexport type InputGroupAddonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  InputGroupAddonOwnProps<C>\n>\n\ntype InputGroupAddonComponent = (<C extends ElementType = 'span'>(\n  props: InputGroupAddonProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction InputGroupAddonRender<C extends ElementType = 'span'>(\n  { children, className, component, ...rest }: InputGroupAddonProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames('input-addon', className)\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const InputGroupAddon = createPolymorphicComponent<InputGroupAddonComponent>(\n  InputGroupAddonRender as ForwardRefRenderFunction<Element, InputGroupAddonProps<ElementType>>,\n  'InputGroupAddon'\n)\n"],"mappings":"8HAiCA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,OAAM,GAAG,GAC3C,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EAAW,cAAe,EAAM,CAAS,EAC5D,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAa,EACxB,EACA,YACF,EChBA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,GAAG,GACrC,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EAAW,cAAe,CAAS,EACtD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAkB,EAC7B,EACA,iBACF"}

package/dist/chunks/lazyElement-tfMG21pZ.js

@@ -0,0 +1,2 @@
+import{isValidElement as e}from"react";const t=Symbol.for(`react.lazy`),n=e=>typeof e==`object`&&!!e&&e.$$typeof===t&&typeof e._init==`function`;function r(e){let t=e;for(;n(t);)t=t._init(t._payload);return t}function i(t,n){return e(t)?t.type===n||r(t.type)===n:!1}export{r as n,i as t};
+//# sourceMappingURL=lazyElement-tfMG21pZ.js.map

package/dist/chunks/lazyElement-tfMG21pZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazyElement-tfMG21pZ.js","names":[],"sources":["../../src/utils/lazyElement.ts"],"sourcesContent":["import { isValidElement, ReactElement } from 'react'\n\n// What React Server Components hand a client component in place of a value that isn't ready, or\n// that they never resolve eagerly. Two cases reach this library, both from a Server Component\n// that composes its components directly:\n//\n// - An element's `type`, when it is a client component: always a lazy wrapper around the module,\n//   in a production build too. `child.type === ListItem` is therefore false for a `<ListItem>`\n//   written in a Server Component.\n// - A whole element, when something in its props is still loading (a client component passed by\n//   reference, a server function): a lazy node, which is not a valid element and has no `props`.\n//   See #37.\n//\n// React resolves both when it renders them. Code that reads a child before rendering it\n// (`isValidElement`, `child.type === X`, `child.props`) has to resolve them itself, the way\n// React's own `Children` helpers do: by calling the node's `_init` with its `_payload`. That\n// returns the value, or throws what React throws for a lazy component: a thenable while the value\n// is loading, which suspends the component until it is there, or the error it failed with.\nconst REACT_LAZY_TYPE = Symbol.for('react.lazy')\n\ninterface LazyNode {\n  $$typeof: symbol\n  _init: (payload: unknown) => unknown\n  _payload: unknown\n}\n\nconst isLazy = (value: unknown): value is LazyNode =>\n  typeof value === 'object' &&\n  value !== null &&\n  (value as LazyNode).$$typeof === REACT_LAZY_TYPE &&\n  typeof (value as LazyNode)._init === 'function'\n\n// The value a lazy node or lazy type stands for; anything else comes back as it is. A lazy value\n// can hold another, so this unwraps until it reaches one that isn't.\nexport function resolveLazy<T>(value: T): T {\n  let resolved: unknown = value\n  while (isLazy(resolved)) resolved = resolved._init(resolved._payload)\n  return resolved as T\n}\n\n// Whether `node` is an element of `Component`. Replaces `isValidElement(node) && node.type ===\n// Component`, which a Server Component's children fail.\nexport function isElementOfType<P>(\n  node: unknown,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  Component: (props: any) => unknown\n): node is ReactElement<P>\nexport function isElementOfType<P>(node: unknown, Component: object): node is ReactElement<P>\nexport function isElementOfType<P>(node: unknown, Component: unknown): node is ReactElement<P> {\n  if (!isValidElement(node)) return false\n  return node.type === Component || resolveLazy(node.type) === Component\n}\n"],"mappings":"uCAkBA,MAAM,EAAkB,OAAO,IAAI,YAAY,EAQzC,EAAU,GACd,OAAO,GAAU,YACjB,GACC,EAAmB,WAAa,GACjC,OAAQ,EAAmB,OAAU,WAIvC,SAAgB,EAAe,EAAa,CAC1C,IAAI,EAAoB,EACxB,KAAO,EAAO,CAAQ,GAAG,EAAW,EAAS,MAAM,EAAS,QAAQ,EACpE,OAAO,CACT,CAUA,SAAgB,EAAmB,EAAe,EAA6C,CAE7F,OADK,EAAe,CAAI,EACjB,EAAK,OAAS,GAAa,EAAY,EAAK,IAAI,IAAM,EAD3B,EAEpC"}

package/dist/chunks/list-BQCkwWjF.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{d as e,f as t,g as n,h as r,m as i,p as a,u as o}from"./slot-CNhFZdHF.js";import{t as s}from"./lazyElement-tfMG21pZ.js";import{t as c}from"./polymorphic-BhGNZQja.js";import{t as l}from"./Link-CZsWCnQb.js";import u,{Children as d}from"react";import f from"classnames";function p({children:r,active:i,className:o,disabled:s,color:c,component:d,href:p,...m},h){let g=a(d,p,`li`),_=n(g,p,m),v=t(_),y=e(_,p,`ListItem`),b=f(`list-item`,c&&`context`,c,{"list-action":v,active:i&&!v,disabled:s&&!v},o),x=v?l:g,S=v?{active:i,disabled:s,component:g,...y,...m}:{...i&&{"aria-current":`page`},...s&&{"aria-disabled":!0},...y,...m};return u.createElement(x,{className:b,...S,ref:h},r)}const m=c(p,`ListItem`);function h({children:e,className:n,component:c,color:l,variant:p,flush:h,items:g,layout:_,numbered:v,plain:y,...b},x){let S=g?g.some(e=>o(e.href)):d.toArray(e).some(e=>s(e,m)&&t(r(e.props))),C=c??(S?`div`:`ul`),w=i(C),T=w===`ul`||w===`ol`,E=f(`list`,l&&`context`,l,p,_,{flush:h,plain:y,numbered:v},n),D=(g?g.map((e,t)=>{let n=f(`list-item`,e.color&&`context`,e.color,{"list-action":o(e.href),active:e.active,disabled:e.disabled}),r=a(void 0,e.href,T?`li`:`div`);return u.createElement(r,{key:e.id??t,className:n,...o(e.href)&&{href:e.href},...e.active?{"aria-current":`page`}:{},...e.disabled?{"aria-disabled":!0}:{}},e.label)}):null)??(T?e:d.map(e,e=>s(e,m)&&r(e.props)===void 0?u.cloneElement(e,{component:`div`}):e));return u.createElement(C,{className:E,...b,ref:x},D)}const g=c(h,`List`);export{m as n,g as t};
+//# sourceMappingURL=list-BQCkwWjF.js.map

package/dist/chunks/list-BQCkwWjF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-BQCkwWjF.js","names":[],"sources":["../../src/components/list/ListItem.tsx","../../src/components/list/List.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport { hrefProps, isInteractiveKind, linkElement, resolveLinkKind } from '../../utils/elementKind'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\nimport { Link } from '../link/Link'\n\ntype ListItemOwnProps<C extends ElementType> = {\n  /**\n   * Toggle the active state for the component.\n   */\n  active?: boolean\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * The href attribute specifies the URL of the page the link goes to. Renders an `<a>` in place\n   * of the `<li>`, unless `component` or `asChild` chose the element. Inside a `List`, the list\n   * renders a `<div>` around it in place of the `<ul>`.\n   */\n  href?: string\n}\n\nexport type ListItemProps<C extends ElementType = 'li'> = PolymorphicComponentProps<\n  C,\n  ListItemOwnProps<C>\n>\n\ntype ListItemComponent = (<C extends ElementType = 'li'>(\n  props: ListItemProps<C> & {\n    ref?: PolymorphicRefWithFallback<C, HTMLLIElement | HTMLAnchorElement>\n  }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ListItemRender<C extends ElementType = 'li'>(\n  { children, active, className, disabled, color, component, href, ...rest }: ListItemProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  // `href` makes it an `<a>`, unless `component` or `asChild` chose the element (see\n  // `linkElement`). It used to stay an `<li>` and carry `href` as an attribute.\n  const tag = linkElement(component, href, 'li')\n  // The kind rather than the tag, counting a router link with `href` or `to` as an anchor: under `asChild`, `tag` is a `Slot` standing in for the caller's\n  // element, and a slotted `<a>` is as interactive as `component=\"a\"`.\n  const kind = resolveLinkKind(tag, href, rest)\n  const isInteractive = isInteractiveKind(kind)\n  const linkProps = hrefProps(kind, href, 'ListItem')\n\n  const _className = classNames(\n    'list-item',\n    color && 'context',\n    color,\n    {\n      'list-action': isInteractive,\n      // An interactive item renders through `Link`, which adds these classes and their ARIA\n      // attributes itself.\n      active: active && !isInteractive,\n      disabled: disabled && !isInteractive\n    },\n    className\n  )\n\n  const Component = (isInteractive ? Link : tag) as ElementType\n\n  const finalRest = isInteractive\n    ? { active, disabled, component: tag, ...linkProps, ...rest }\n    : {\n        ...(active && { 'aria-current': 'page' }),\n        ...(disabled && { 'aria-disabled': true }),\n        ...linkProps,\n        ...rest\n      }\n\n  return (\n    <Component className={_className} {...finalRest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const ListItem = createPolymorphicComponent<ListItemComponent>(\n  ListItemRender as ForwardRefRenderFunction<Element, ListItemProps<ElementType>>,\n  'ListItem'\n)\n","import React, {\n  Children,\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode\n} from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor, ContextStyle } from '../../types'\nimport {\n  hasHref,\n  isInteractiveKind,\n  linkElement,\n  resolveElementTag,\n  resolveKindFromProps\n} from '../../utils/elementKind'\nimport { isElementOfType } from '../../utils/lazyElement'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ListItem } from './ListItem'\n\nexport interface ListItemDef {\n  /**\n   * Stable key for the rendered item. Falls back to the item's index in `items`.\n   */\n  id?: number | string\n  /**\n   * Item label content.\n   */\n  label: React.ReactNode\n  /**\n   * Makes the item a link.\n   */\n  href?: string\n  /**\n   * Sets the color of the item.\n   */\n  color?: ContextColor\n  /**\n   * Marks the item as active.\n   */\n  active?: boolean\n  /**\n   * Marks the item as disabled.\n   */\n  disabled?: boolean\n}\n\ntype ListOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   * Defaults to `'ul'`, unless an item (a data-driven item with `href`, or a `<ListItem>` child\n   * rendering an `<a>`/`<button>` through `component` or `asChild`) is interactive — a bare\n   * `<a>`/`<button>` isn't a valid direct child of `<ul>`/`<ol>`, so the default switches to\n   * `'div'` instead. Pass `component` explicitly to opt out of this.\n   */\n  component?: C\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Remove outer borders and rounded corners to render list items edge-to-edge in a parent component (e.g., `<Card>`).\n   */\n  flush?: boolean\n  /**\n   * Array of item definitions for data-driven rendering. When provided, children are ignored.\n   */\n  items?: ListItemDef[]\n  /**\n   * Specify a layout type.\n   */\n  layout?:\n    | 'horizontal'\n    | 'sm:horizontal'\n    | 'md:horizontal'\n    | 'lg:horizontal'\n    | 'xl:horizontal'\n    | '2xl:horizontal'\n  /**\n   * Number list items sequentially using CSS counters. Pair with `component=\"ol\"` for semantic correctness.\n   */\n  numbered?: boolean\n  /**\n   * Remove outer borders, rounded corners, and horizontal padding for a minimal, edge-to-edge appearance.\n   */\n  plain?: boolean\n  /**\n   * Applies a `.solid`, `.outline`, or `.smooth` context style. Only meaningful together with `color`.\n   */\n  variant?: ContextStyle\n}\n\n// What `List` reads off a `<ListItem>` child to decide its own tag.\ntype ListItemChildProps = {\n  asChild?: boolean\n  children?: ReactNode\n  component?: ElementType\n  href?: string\n}\n\nexport type ListProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, ListOwnProps<C>>\n\ntype ListComponent = (<C extends ElementType = 'ul'>(\n  props: ListProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ListRender<C extends ElementType = 'ul'>(\n  {\n    children,\n    className,\n    component,\n    color,\n    variant,\n    flush,\n    items,\n    layout,\n    numbered,\n    plain,\n    ...rest\n  }: ListProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  // A linked item (data-driven `href`, or a `<ListItem>` child rendering an `<a>`/`<button>`,\n  // whether through `component` or as its `asChild` element) can't render as a bare\n  // `<a>`/`<button>` inside the default `<ul>`/`<ol>` root — only `<li>`/`script`/`template` are\n  // valid children there. Default to `<div>` instead when that's the case (unless the caller\n  // already chose their own `component`), matching the same `component=\"div\"` pattern already\n  // documented for `Stepper`'s composed interactive usage.\n  const hasInteractiveItem = items\n    ? items.some((item) => hasHref(item.href))\n    : Children.toArray(children).some(\n        (child) =>\n          isElementOfType<ListItemChildProps>(child, ListItem) &&\n          isInteractiveKind(resolveKindFromProps(child.props))\n      )\n  const Component = (component ?? (hasInteractiveItem ? 'div' : 'ul')) as ElementType\n  // The tag rather than `Component`, which under `asChild` is a `Slot` holding the caller's\n  // `<ul>`/`<ol>`.\n  const rootTag = resolveElementTag(Component)\n  const isListSemantic = rootTag === 'ul' || rootTag === 'ol'\n\n  const _className = classNames(\n    'list',\n    color && 'context',\n    color,\n    variant,\n    layout,\n    {\n      flush,\n      plain,\n      numbered\n    },\n    className\n  )\n\n  const autoContent = items\n    ? items.map((item, idx) => {\n        const itemClass = classNames('list-item', item.color && 'context', item.color, {\n          'list-action': hasHref(item.href),\n          active: item.active,\n          disabled: item.disabled\n        })\n        const Tag = linkElement(undefined, item.href, isListSemantic ? 'li' : 'div')\n        return (\n          <Tag\n            key={item.id ?? idx}\n            className={itemClass}\n            {...(hasHref(item.href) && { href: item.href })}\n            {...(item.active ? { 'aria-current': 'page' } : {})}\n            {...(item.disabled ? { 'aria-disabled': true } : {})}\n          >\n            {item.label}\n          </Tag>\n        )\n      })\n    : null\n\n  // When the root switched to `div` because of an interactive child, every plain `<ListItem>`\n  // sibling defaulting to `<li>` would be just as invalid (only valid inside `<ul>`/`<ol>`/\n  // `<menu>`) — so give each `ListItem` child the same `div` treatment the auto-generated items\n  // above already get, unless it chose its own element: `component`, `href` or its `asChild`\n  // element. Other child types are left untouched — this is only meaningful for `List`'s own list\n  // items.\n  const renderedChildren =\n    autoContent ??\n    (isListSemantic\n      ? children\n      : Children.map(children, (child) =>\n          isElementOfType<ListItemChildProps>(child, ListItem) &&\n          resolveKindFromProps(child.props) === undefined\n            ? React.cloneElement(child, { component: 'div' })\n            : child\n        ))\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {renderedChildren}\n    </Component>\n  )\n}\n\nexport const List = createPolymorphicComponent<ListComponent>(\n  ListRender as ForwardRefRenderFunction<Element, ListProps<ElementType>>,\n  'List'\n)\n"],"mappings":"mTAqDA,SAAS,EACP,CAAE,WAAU,SAAQ,YAAW,WAAU,QAAO,YAAW,OAAM,GAAG,GACpE,EACA,CAGA,IAAM,EAAM,EAAY,EAAW,EAAM,IAAI,EAGvC,EAAO,EAAgB,EAAK,EAAM,CAAI,EACtC,EAAgB,EAAkB,CAAI,EACtC,EAAY,EAAU,EAAM,EAAM,UAAU,EAE5C,EAAa,EACjB,YACA,GAAS,UACT,EACA,CACE,cAAe,EAGf,OAAQ,GAAU,CAAC,EACnB,SAAU,GAAY,CAAC,CACzB,EACA,CACF,EAEM,EAAa,EAAgB,EAAO,EAEpC,EAAY,EACd,CAAE,SAAQ,WAAU,UAAW,EAAK,GAAG,EAAW,GAAG,CAAK,EAC1D,CACE,GAAI,GAAU,CAAE,eAAgB,MAAO,EACvC,GAAI,GAAY,CAAE,gBAAiB,EAAK,EACxC,GAAG,EACH,GAAG,CACL,EAEJ,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAgB,KAE3C,EADR,CACQ,CAEf,CAEA,MAAa,EAAW,EACtB,EACA,UACF,ECcA,SAAS,EACP,CACE,WACA,YACA,YACA,QACA,UACA,QACA,QACA,SACA,WACA,QACA,GAAG,GAEL,EACA,CAOA,IAAM,EAAqB,EACvB,EAAM,KAAM,GAAS,EAAQ,EAAK,IAAI,CAAC,EACvC,EAAS,QAAQ,CAAQ,CAAC,CAAC,KACxB,GACC,EAAoC,EAAO,CAAQ,GACnD,EAAkB,EAAqB,EAAM,KAAK,CAAC,CACvD,EACE,EAAa,IAAc,EAAqB,MAAQ,MAGxD,EAAU,EAAkB,CAAS,EACrC,EAAiB,IAAY,MAAQ,IAAY,KAEjD,EAAa,EACjB,OACA,GAAS,UACT,EACA,EACA,EACA,CACE,QACA,QACA,UACF,EACA,CACF,EA8BM,GA5Bc,EAChB,EAAM,KAAK,EAAM,IAAQ,CACvB,IAAM,EAAY,EAAW,YAAa,EAAK,OAAS,UAAW,EAAK,MAAO,CAC7E,cAAe,EAAQ,EAAK,IAAI,EAChC,OAAQ,EAAK,OACb,SAAU,EAAK,QACjB,CAAC,EACK,EAAM,EAAY,IAAA,GAAW,EAAK,KAAM,EAAiB,KAAO,KAAK,EAC3E,OACE,EAAA,cAAC,EAAD,CACE,IAAK,EAAK,IAAM,EAChB,UAAW,EACX,GAAK,EAAQ,EAAK,IAAI,GAAK,CAAE,KAAM,EAAK,IAAK,EAC7C,GAAK,EAAK,OAAS,CAAE,eAAgB,MAAO,EAAI,CAAC,EACjD,GAAK,EAAK,SAAW,CAAE,gBAAiB,EAAK,EAAI,CAAC,CAG/C,EADF,EAAK,KACH,CAET,CAAC,EACD,QAUD,EACG,EACA,EAAS,IAAI,EAAW,GACtB,EAAoC,EAAO,CAAQ,GACnD,EAAqB,EAAM,KAAK,IAAM,IAAA,GAClC,EAAM,aAAa,EAAO,CAAE,UAAW,KAAM,CAAC,EAC9C,CACN,GAEN,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAO,EAClB,EACA,MACF"}

package/dist/chunks/menu-98EAD9nj.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./Portal-CgeR1WXV.js";import{i as n,r}from"./overlayPlacement-BtS90IVf.js";import{n as i}from"./Menu-CSBg2Zmc.js";import{a,c as o,i as s,o as ee,r as c,s as l}from"./MenuToggle-BdQtF7FV.js";import u,{forwardRef as d,useCallback as f,useContext as p,useEffect as m,useId as te,useRef as h,useState as ne}from"react";import g from"classnames";import{useLocale as _,useOverlayPosition as v}from"react-aria";function y({children:e,className:t,component:n,...r},i){let a=n??`span`,o=g(`menu-text`,t);return u.createElement(a,{className:o,...r,ref:i},e)}const b=e(y,`MenuText`),x=d(({children:e,activation:d=`both`,className:y,disabled:b,offset:x=[-4,0],placement:S,stacked:C,submenuDelay:w=100,trigger:T,...E},D)=>{let O=te(),k=`${O}-trigger`,A=`${O}-menu`,[j,M]=ne(!1),N=h(void 0),P=h(void 0),F=h(null),I=h(null),L=p(s),R=a(),{registerOverlay:z,visible:B}=p(i),{direction:V}=_(),H=V===`rtl`,U=S??(H?`left-start`:`right-start`),{overlayProps:W,placement:G}=v({targetRef:F,overlayRef:I,placement:n(U),offset:x[1],crossOffset:x[0],containerPadding:8,isOpen:j,onClose:null}),{menuStyle:re,placementAttr:ie}=r(W.style,U,G),K=f(()=>{N.current!==void 0&&(window.clearTimeout(N.current),N.current=void 0)},[]),q=f(()=>{P.current!==void 0&&(cancelAnimationFrame(P.current),P.current=void 0)},[]),J=f(()=>{K(),q(),M(!1)},[K,q]),Y=()=>{b||j||(K(),L?.notifyOpen(O),M(!0))},X=()=>{K(),N.current=window.setTimeout(J,w)};m(()=>L?.register(O,J),[L,O,J]),m(()=>K,[K]),m(()=>q,[q]),m(()=>{B||J()},[B,J]);let Z=typeof window<`u`&&!!window.matchMedia&&window.matchMedia(`(hover: hover)`).matches&&(d===`hover`||d===`both`),ae=d===`click`||d===`both`,Q=()=>{Y(),q(),P.current=requestAnimationFrame(()=>{P.current=void 0,ee(l(I.current),`first`)})},$=()=>{J(),F.current?.focus()},oe=e=>{ae&&!b&&(e.preventDefault(),e.stopPropagation(),j?J():Q())},se=H?`ArrowLeft`:`ArrowRight`,ce=e=>{b||(e.key===`Enter`||e.key===` `||e.key===se)&&(e.preventDefault(),e.stopPropagation(),Q())},le={close:$};return u.createElement(`div`,{className:g(`submenu`,{show:j},y),...E,ref:D},u.createElement(`button`,{type:`button`,id:k,role:`menuitem`,className:`menu-item`,"aria-expanded":j,"aria-haspopup":`true`,"aria-controls":j?A:void 0,disabled:b,onClick:oe,onKeyDown:ce,onMouseEnter:Z?Y:void 0,onMouseLeave:Z?X:void 0,ref:e=>{F.current=e}},T),(()=>{let n=u.createElement(`div`,{role:`menu`,id:A,"aria-labelledby":k,className:g(`menu`,{show:j,"submenu-stacked":C}),style:re,"data-cx-placement":ie,onKeyDown:e=>o(e,{onEscape:$,...H?{onArrowRight:$}:{onArrowLeft:$}}),onMouseEnter:Z?K:void 0,onMouseLeave:Z?X:void 0,ref:e=>{I.current=e,z(A,e)}},u.createElement(c.Provider,{value:le},u.createElement(s.Provider,{value:R},e)));return C?n:u.createElement(t,{fallback:n},n)})())});x.displayName=`MenuSubmenu`;const S=d(({children:e,className:t,onClick:n,type:r=`button`,...i},a)=>{let o=p(c),s=e=>{n?.(e),o?.close()};return u.createElement(`button`,{type:r,role:`menuitem`,className:g(`submenu-back`,`menu-item`,t),...i,onClick:s,ref:a},e)});S.displayName=`MenuSubmenuBack`;export{x as n,b as r,S as t};
+//# sourceMappingURL=menu-98EAD9nj.js.map