@chassis-ui/react 0.1.3 → 0.3.0

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

@@ -0,0 +1,102 @@
+import "./focus-ring-SR_LwaN7.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
+interface StepperItemDef {
+  /**
+   * Step label content.
+   */
+  label: React.ReactNode;
+  /**
+   * Marks the item as the current step.
+   */
+  active?: boolean;
+  /**
+   * Sets the color of the item.
+   */
+  color?: ContextColor;
+  /**
+   * Renders the item as a link to the given URL.
+   */
+  href?: string;
+}
+type StepperOwnProps<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.
+   * 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.
+   */
+  component?: C;
+  /**
+   * Sets the color of the component to one of Chassis context colors.
+   */
+  color?: ContextColor;
+  /**
+   * Replaces the step counters with icons, driven by the `--status-icon` custom property.
+   */
+  icon?: boolean;
+  /**
+   * Array of step definitions for data-driven rendering. When provided, children are ignored.
+   */
+  items?: StepperItemDef[];
+  /**
+   * Lays out steps side-by-side instead of stacking them vertically, either unconditionally or
+   * from a given breakpoint up.
+   */
+  layout?: 'horizontal' | 'sm:horizontal' | 'md:horizontal' | 'lg:horizontal' | 'xl:horizontal' | '2xl:horizontal';
+  /**
+   * Wraps the stepper in a horizontally scrollable container so steps keep their natural width
+   * instead of shrinking to fit.
+   */
+  overflow?: boolean;
+};
+type StepperProps<C extends ElementType = 'ol'> = PolymorphicComponentProps<C, StepperOwnProps<C>>;
+type StepperComponent = (<C extends ElementType = 'ol'>(props: StepperProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Stepper: StepperComponent;
+//#endregion
+//#region src/components/stepper/StepperItem.d.ts
+type StepperItemOwnProps<C extends ElementType> = {
+  /**
+   * Marks the item as the current step.
+   */
+  active?: boolean;
+  /**
+   * 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;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * 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?: 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 };
+//# 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-qMq_-GY2.d.ts

@@ -0,0 +1,105 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as ContextColor } from "./types-CS_40Txv.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'> {
+  /**
+   * Create button-like radios. Combine with `<RadioGroup>` to build radio toggle-button groups.
+   */
+  button?: ButtonObject;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * Sets the color of the radio indicator to one of Chassis context colors. Ignored when `button` is set.
+   */
+  color?: ContextColor;
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   */
+  id?: string;
+  /**
+   * The element represents a caption for a component.
+   *
+   * Children are accepted as an alias for this prop — `label` wins when both are given.
+   * react-aria, which backs this component, calls the same thing `children`; this package renames
+   * it to `label`, and honouring both means the shape React developers reach for first still
+   * names the control instead of silently producing an unlabelled one.
+   */
+  label?: ReactNode;
+  /**
+   * Size the component sm or lg.
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * The value of the radio button, used to identify it within its `<RadioGroup>`.
+   */
+  value: string;
+}
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/radio/RadioGroup.d.ts
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange'> {
+  /**
+   * One or more `<Radio>` elements.
+   */
+  children: ReactNode;
+  /**
+   * A string of all className you want applied to the component.
+   */
+  className?: string;
+  /**
+   * The selected value, uncontrolled.
+   */
+  defaultValue?: string;
+  /**
+   * A description for the group, rendered below the options.
+   */
+  description?: ReactNode;
+  /**
+   * Disables every radio in the group.
+   */
+  disabled?: boolean;
+  /**
+   * An error message for the group, rendered below the options when `invalid` is set.
+   */
+  errorMessage?: ReactNode;
+  /**
+   * Set group validation state to invalid.
+   */
+  invalid?: boolean;
+  /**
+   * The group's caption, rendered as a `<legend>`.
+   */
+  label?: ReactNode;
+  /**
+   * The name for the group, used for native form submission.
+   */
+  name?: string;
+  /**
+   * Callback fired when the selected value changes.
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Lay the group's radios out on the same horizontal row instead of stacking them.
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Marks the group as required.
+   */
+  required?: boolean;
+  /**
+   * Set group validation state to valid.
+   */
+  valid?: boolean;
+  /**
+   * The selected value, controlled.
+   */
+  value?: string;
+}
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+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

@@ -0,0 +1,97 @@
+import "./focus-ring-SR_LwaN7.js";
+import { n as PolymorphicRef, t as PolymorphicComponentProps } from "./polymorphic-CVHbTHSN.js";
+import { n as ContextColor } from "./types-CS_40Txv.js";
+import { ElementType, ReactElement, ReactNode } from "react";
+//#region src/components/progress/Progress.d.ts
+type ProgressOwnProps<C extends ElementType> = {
+  /**
+   * Use to animate the stripes right to left via CSS3 animations.
+   */
+  animated?: boolean;
+  /**
+   * 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;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Sets the height of the component, via the `--cx-height` custom property. If you set that
+   * value the inner bar (and the striped pattern's tile size) automatically resizes accordingly.
+   */
+  height?: number;
+  /**
+   * Shows the current value as text inside the bar, independently of `showValue` — combine both
+   * to get a `label` + `showValue` caption above the bar alongside an `inlineValue` reading
+   * inside it.
+   */
+  inlineValue?: boolean;
+  /**
+   * A text label describing the progress. Rendered in a caption row above the bar. Also used as
+   * the default accessible name when no `aria-label`/`aria-labelledby` is supplied.
+   */
+  label?: ReactNode;
+  /**
+   * Shows the current value as text in the caption row above the bar, alongside `label` when
+   * both are set, or alone otherwise. Use `inlineValue` to show it inside the bar instead.
+   */
+  showValue?: boolean;
+  /**
+   * Adds a diagonal stripe pattern over the bar's background.
+   */
+  striped?: boolean;
+  /**
+   * The percent to progress the ProgressBar (out of 100).
+   */
+  value?: number;
+};
+type ProgressProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ProgressOwnProps<C>>;
+type ProgressComponent = (<C extends ElementType = 'div'>(props: ProgressProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const Progress: ProgressComponent;
+//#endregion
+//#region src/components/progress/ProgressBar.d.ts
+type ProgressBarOwnProps<C extends ElementType> = {
+  /**
+   * Use to animate the stripes right to left via CSS3 animations.
+   */
+  animated?: boolean;
+  /**
+   * 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;
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+  /**
+   * Adds a diagonal stripe pattern over the bar's background.
+   */
+  striped?: boolean;
+  /**
+   * The percent to progress the ProgressBar.
+   */
+  value?: number;
+};
+type ProgressBarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<C, ProgressBarOwnProps<C>>;
+type ProgressBarComponent = (<C extends ElementType = 'div'>(props: ProgressBarProps<C> & {
+  ref?: PolymorphicRef<C>;
+}) => ReactElement | null) & {
+  displayName?: string;
+};
+declare const ProgressBar: ProgressBarComponent;
+//#endregion
+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-DwdX-jxA.js

@@ -0,0 +1,2 @@
+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-Cuiuf4Dl.js

@@ -0,0 +1,2 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-98EAD9nj.js","names":[],"sources":["../../src/components/menu/MenuText.tsx","../../src/components/menu/MenuSubmenu.tsx","../../src/components/menu/MenuSubmenuBack.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 MenuTextOwnProps<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\nexport type MenuTextProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  MenuTextOwnProps<C>\n>\n\ntype MenuTextComponent = (<C extends ElementType = 'span'>(\n  props: MenuTextProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction MenuTextRender<C extends ElementType = 'span'>(\n  { children, className, component, ...rest }: MenuTextProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames('menu-text', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const MenuText = createPolymorphicComponent<MenuTextComponent>(\n  MenuTextRender as ForwardRefRenderFunction<Element, MenuTextProps<ElementType>>,\n  'MenuText'\n)\n","import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState\n} from 'react'\nimport classNames from 'classnames'\nimport { useLocale, useOverlayPosition } from 'react-aria'\n\nimport { MenuContext } from './Menu'\nimport {\n  Placement,\n  resolveMenuOverlayPositioning,\n  toAriaPlacement\n} from '../../utils/overlayPlacement'\nimport { Portal } from '../portal/Portal'\nimport { focusMenuItem, getMenuItems, handleMenuKeyDown } from './menuNavigation'\nimport { SubmenuActionsContext, SubmenuGroupContext, useSubmenuGroupProvider } from './submenuGroup'\n\nexport interface MenuSubmenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /**\n   * MenuSubmenu activation mode on hover-capable devices. `'click'` activates on click only.\n   * `'hover'` activates on hover only. `'both'` (the default) activates on both. Touch\n   * devices always use tap regardless of this setting.\n   */\n  activation?: 'click' | 'hover' | 'both'\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Prevents the submenu from opening.\n   */\n  disabled?: boolean\n  /**\n   * Distance between the nested menu and the trigger, as `[skidding, distance]` in pixels.\n   */\n  offset?: [number, number]\n  /**\n   * Placement of the nested menu relative to the trigger. Defaults to cascading in the reading\n   * direction — `'right-start'` under LTR locales, `'left-start'` under RTL ones (see\n   * `useLocale`) — matching native OS/browser submenu behavior. An explicit value always wins\n   * over that locale-based default.\n   */\n  placement?: Placement\n  /**\n   * Switches to a view-replacement pattern below the `sm` breakpoint. Pair with a\n   * `MenuSubmenuBack` as the first item of the nested menu.\n   */\n  stacked?: boolean\n  /**\n   * Milliseconds before closing the submenu when the pointer leaves it.\n   */\n  submenuDelay?: number\n  /**\n   * Content of the `.menu-item` trigger that opens the submenu.\n   */\n  trigger: ReactNode\n}\n\nexport const MenuSubmenu = forwardRef<HTMLDivElement, MenuSubmenuProps>(\n  (\n    {\n      children,\n      activation = 'both',\n      className,\n      disabled,\n      offset: offsetProp = [-4, 0],\n      placement,\n      stacked,\n      submenuDelay = 100,\n      trigger,\n      ...rest\n    },\n    ref\n  ) => {\n    const id = useId()\n    const triggerId = `${id}-trigger`\n    const menuId = `${id}-menu`\n    const [visible, setVisible] = useState(false)\n    const closeTimeoutRef = useRef<number | undefined>(undefined)\n    const focusFirstRafRef = useRef<number | undefined>(undefined)\n    const triggerRef = useRef<HTMLButtonElement | null>(null)\n    const overlayRef = useRef<HTMLElement | null>(null)\n    const parentGroup = useContext(SubmenuGroupContext)\n    const ownGroup = useSubmenuGroupProvider()\n    const { registerOverlay, visible: parentMenuVisible } = useContext(MenuContext)\n    const { direction } = useLocale()\n    const isRtl = direction === 'rtl'\n    const effectivePlacement = placement ?? (isRtl ? 'left-start' : 'right-start')\n\n    const { overlayProps, placement: resolvedPlacement } = useOverlayPosition({\n      targetRef: triggerRef,\n      overlayRef,\n      // Viewport-relative (matching the portal below): the trigger lives inside the parent\n      // menu's own floated panel, and `useOverlayPosition` measures against the overlay's real\n      // containing block — since the panel portals straight to `document.body`, that resolves\n      // the same way a `fixed`-strategy engine would.\n      placement: toAriaPlacement(effectivePlacement),\n      offset: offsetProp[1],\n      crossOffset: offsetProp[0],\n      containerPadding: 8,\n      isOpen: visible,\n      // See `useOverlayPlacement`'s comment for why this needs to be explicit `null`, not left\n      // unset — matches the same fix already applied to `Autocomplete`/`Combobox`/`Menu`/`Popover`.\n      onClose: null\n    })\n\n    const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(\n      overlayProps.style,\n      effectivePlacement,\n      resolvedPlacement\n    )\n\n    const clearCloseTimeout = useCallback(() => {\n      if (closeTimeoutRef.current !== undefined) {\n        window.clearTimeout(closeTimeoutRef.current)\n        closeTimeoutRef.current = undefined\n      }\n    }, [])\n\n    const cancelFocusFirstRaf = useCallback(() => {\n      if (focusFirstRafRef.current !== undefined) {\n        cancelAnimationFrame(focusFirstRafRef.current)\n        focusFirstRafRef.current = undefined\n      }\n    }, [])\n\n    const close = useCallback(() => {\n      clearCloseTimeout()\n      cancelFocusFirstRaf()\n      setVisible(false)\n    }, [clearCloseTimeout, cancelFocusFirstRaf])\n\n    const open = () => {\n      if (disabled || visible) return\n      clearCloseTimeout()\n      parentGroup?.notifyOpen(id)\n      setVisible(true)\n    }\n\n    const scheduleClose = () => {\n      clearCloseTimeout()\n      closeTimeoutRef.current = window.setTimeout(close, submenuDelay)\n    }\n\n    useEffect(() => parentGroup?.register(id, close), [parentGroup, id, close])\n    useEffect(() => clearCloseTimeout, [clearCloseTimeout])\n    useEffect(() => cancelFocusFirstRaf, [cancelFocusFirstRaf])\n\n    // The submenu's own open state is local and doesn't otherwise hear about its ancestor\n    // `Menu` closing (via Escape, outside click, etc.) — without this it's left open and\n    // fully visible (it's portaled to `document.body`, so nothing hides it for free) even\n    // after the menu it belongs to has disappeared.\n    useEffect(() => {\n      if (!parentMenuVisible) close()\n    }, [parentMenuVisible, close])\n\n    const supportsHover =\n      typeof window !== 'undefined' &&\n      !!window.matchMedia &&\n      window.matchMedia('(hover: hover)').matches\n    const hoverEnabled = supportsHover && (activation === 'hover' || activation === 'both')\n    const clickEnabled = activation === 'click' || activation === 'both'\n\n    const openAndFocusFirst = () => {\n      open()\n      cancelFocusFirstRaf()\n      focusFirstRafRef.current = requestAnimationFrame(() => {\n        focusFirstRafRef.current = undefined\n        focusMenuItem(getMenuItems(overlayRef.current), 'first')\n      })\n    }\n\n    const closeAndRefocusTrigger = () => {\n      close()\n      triggerRef.current?.focus()\n    }\n\n    const handleTriggerClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (!clickEnabled || disabled) return\n      event.preventDefault()\n      event.stopPropagation()\n      visible ? close() : openAndFocusFirst()\n    }\n\n    // A submenu cascades toward the reading direction, so the arrow key that opens it (and the\n    // one its own item list closes on, below) mirror too: ArrowRight/ArrowLeft under LTR,\n    // ArrowLeft/ArrowRight under RTL.\n    const openKey = isRtl ? 'ArrowLeft' : 'ArrowRight'\n\n    const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (disabled) return\n      if (event.key === 'Enter' || event.key === ' ' || event.key === openKey) {\n        event.preventDefault()\n        event.stopPropagation()\n        openAndFocusFirst()\n      }\n    }\n\n    const actionsValue = { close: closeAndRefocusTrigger }\n\n    return (\n      <div className={classNames('submenu', { show: visible }, className)} {...rest} ref={ref}>\n        <button\n          type=\"button\"\n          id={triggerId}\n          role=\"menuitem\"\n          className=\"menu-item\"\n          aria-expanded={visible}\n          aria-haspopup=\"true\"\n          aria-controls={visible ? menuId : undefined}\n          disabled={disabled}\n          onClick={handleTriggerClick}\n          onKeyDown={handleTriggerKeyDown}\n          onMouseEnter={hoverEnabled ? open : undefined}\n          onMouseLeave={hoverEnabled ? scheduleClose : undefined}\n          ref={(node) => {\n            triggerRef.current = node\n          }}\n        >\n          {trigger}\n        </button>\n        {(() => {\n          const panel = (\n            <div\n              role=\"menu\"\n              id={menuId}\n              aria-labelledby={triggerId}\n              className={classNames('menu', { show: visible, 'submenu-stacked': stacked })}\n              style={menuStyle}\n              data-cx-placement={placementAttr}\n              onKeyDown={(event) =>\n                handleMenuKeyDown(event, {\n                  onEscape: closeAndRefocusTrigger,\n                  ...(isRtl\n                    ? { onArrowRight: closeAndRefocusTrigger }\n                    : { onArrowLeft: closeAndRefocusTrigger })\n                })\n              }\n              onMouseEnter={hoverEnabled ? clearCloseTimeout : undefined}\n              onMouseLeave={hoverEnabled ? scheduleClose : undefined}\n              // Registers this panel with the ancestor `Menu` (see `MenuContext.registerOverlay`)\n              // so its own click-dismiss logic recognizes clicks here as \"inside\" the menu — the\n              // panel portals straight to `document.body` when not `stacked`, so plain DOM\n              // containment against the top-level menu's own element wouldn't otherwise see it.\n              ref={(node) => {\n                overlayRef.current = node\n                registerOverlay(menuId, node)\n              }}\n            >\n              <SubmenuActionsContext.Provider value={actionsValue}>\n                <SubmenuGroupContext.Provider value={ownGroup}>\n                  {children}\n                </SubmenuGroupContext.Provider>\n              </SubmenuActionsContext.Provider>\n            </div>\n          )\n\n          // `stacked`'s sm-breakpoint CSS (`.menu:has(.submenu-stacked.show) ...`) needs the\n          // panel to be a real DOM descendant of `.menu`/`.submenu` to match — portaling would\n          // break that ancestor relationship, so it renders inline instead. Trade-off: above the\n          // `sm` breakpoint a `stacked` submenu no longer escapes ancestor overflow/stacking-\n          // context clipping the way a portaled one does; accepted since `stacked` targets mobile\n          // nav/drawer usage, not floating dropdowns.\n          // On the server and during hydration the panel renders inline next to its trigger, which\n          // is what the server's HTML holds; `Portal` moves it to `document.body` afterwards.\n          return stacked ? panel : <Portal fallback={panel}>{panel}</Portal>\n        })()}\n      </div>\n    )\n  }\n)\n\nMenuSubmenu.displayName = 'MenuSubmenu'\n","import React, { ButtonHTMLAttributes, forwardRef, useContext } from 'react'\nimport classNames from 'classnames'\n\nimport { SubmenuActionsContext } from './submenuGroup'\n\nexport interface MenuSubmenuBackProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n}\n\n// First item of a stacked submenu's nested menu (see `MenuSubmenu`'s `stacked` prop). Closes\n// the submenu and returns focus to its trigger — visible only below the `sm` breakpoint.\nexport const MenuSubmenuBack = forwardRef<HTMLButtonElement, MenuSubmenuBackProps>(\n  ({ children, className, onClick, type = 'button', ...rest }, ref) => {\n    const actions = useContext(SubmenuActionsContext)\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event)\n      actions?.close()\n    }\n\n    return (\n      <button\n        type={type}\n        role=\"menuitem\"\n        className={classNames('submenu-back', 'menu-item', className)}\n        {...rest}\n        onClick={handleClick}\n        ref={ref}\n      >\n        {children}\n      </button>\n    )\n  }\n)\n\nMenuSubmenuBack.displayName = 'MenuSubmenuBack'\n"],"mappings":"ifA6BA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,GAAG,GACrC,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EAAW,YAAa,CAAS,EAEpD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAW,EACtB,EACA,UACF,ECmBa,EAAc,GAEvB,CACE,WACA,aAAa,OACb,YACA,WACA,OAAQ,EAAa,CAAC,GAAI,CAAC,EAC3B,YACA,UACA,eAAe,IACf,UACA,GAAG,GAEL,IACG,CACH,IAAM,EAAK,GAAM,EACX,EAAY,GAAG,EAAG,UAClB,EAAS,GAAG,EAAG,OACf,CAAC,EAAS,GAAc,GAAS,EAAK,EACtC,EAAkB,EAA2B,IAAA,EAAS,EACtD,EAAmB,EAA2B,IAAA,EAAS,EACvD,EAAa,EAAiC,IAAI,EAClD,EAAa,EAA2B,IAAI,EAC5C,EAAc,EAAW,CAAmB,EAC5C,EAAW,EAAwB,EACnC,CAAE,kBAAiB,QAAS,GAAsB,EAAW,CAAW,EACxE,CAAE,aAAc,EAAU,EAC1B,EAAQ,IAAc,MACtB,EAAqB,IAAc,EAAQ,aAAe,eAE1D,CAAE,eAAc,UAAW,GAAsB,EAAmB,CACxE,UAAW,EACX,aAKA,UAAW,EAAgB,CAAkB,EAC7C,OAAQ,EAAW,GACnB,YAAa,EAAW,GACxB,iBAAkB,EAClB,OAAQ,EAGR,QAAS,IACX,CAAC,EAEK,CAAE,aAAW,kBAAkB,EACnC,EAAa,MACb,EACA,CACF,EAEM,EAAoB,MAAkB,CACtC,EAAgB,UAAY,IAAA,KAC9B,OAAO,aAAa,EAAgB,OAAO,EAC3C,EAAgB,QAAU,IAAA,GAE9B,EAAG,CAAC,CAAC,EAEC,EAAsB,MAAkB,CACxC,EAAiB,UAAY,IAAA,KAC/B,qBAAqB,EAAiB,OAAO,EAC7C,EAAiB,QAAU,IAAA,GAE/B,EAAG,CAAC,CAAC,EAEC,EAAQ,MAAkB,CAC9B,EAAkB,EAClB,EAAoB,EACpB,EAAW,EAAK,CAClB,EAAG,CAAC,EAAmB,CAAmB,CAAC,EAErC,MAAa,CACb,GAAY,IAChB,EAAkB,EAClB,GAAa,WAAW,CAAE,EAC1B,EAAW,EAAI,EACjB,EAEM,MAAsB,CAC1B,EAAkB,EAClB,EAAgB,QAAU,OAAO,WAAW,EAAO,CAAY,CACjE,EAEA,MAAgB,GAAa,SAAS,EAAI,CAAK,EAAG,CAAC,EAAa,EAAI,CAAK,CAAC,EAC1E,MAAgB,EAAmB,CAAC,CAAiB,CAAC,EACtD,MAAgB,EAAqB,CAAC,CAAmB,CAAC,EAM1D,MAAgB,CACT,GAAmB,EAAM,CAChC,EAAG,CAAC,EAAmB,CAAK,CAAC,EAM7B,IAAM,EAHJ,OAAO,OAAW,KAClB,CAAC,CAAC,OAAO,YACT,OAAO,WAAW,gBAAgB,CAAC,CAAC,UACC,IAAe,SAAW,IAAe,QAC1E,GAAe,IAAe,SAAW,IAAe,OAExD,MAA0B,CAC9B,EAAK,EACL,EAAoB,EACpB,EAAiB,QAAU,0BAA4B,CACrD,EAAiB,QAAU,IAAA,GAC3B,GAAc,EAAa,EAAW,OAAO,EAAG,OAAO,CACzD,CAAC,CACH,EAEM,MAA+B,CACnC,EAAM,EACN,EAAW,SAAS,MAAM,CAC5B,EAEM,GAAsB,GAA+C,CACpE,IAAgB,KACrB,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAU,EAAM,EAAI,EAAkB,EACxC,EAKM,GAAU,EAAQ,YAAc,aAEhC,GAAwB,GAAkD,CAC1E,IACA,EAAM,MAAQ,SAAW,EAAM,MAAQ,KAAO,EAAM,MAAQ,MAC9D,EAAM,eAAe,EACrB,EAAM,gBAAgB,EACtB,EAAkB,EAEtB,EAEM,GAAe,CAAE,MAAO,CAAuB,EAErD,OACE,EAAA,cAAC,MAAD,CAAK,UAAW,EAAW,UAAW,CAAE,KAAM,CAAQ,EAAG,CAAS,EAAG,GAAI,EAAW,KAkE/E,EAjEH,EAAA,cAAC,SAAD,CACE,KAAK,SACL,GAAI,EACJ,KAAK,WACL,UAAU,YACV,gBAAe,EACf,gBAAc,OACd,gBAAe,EAAU,EAAS,IAAA,GACxB,WACV,QAAS,GACT,UAAW,GACX,aAAc,EAAe,EAAO,IAAA,GACpC,aAAc,EAAe,EAAgB,IAAA,GAC7C,IAAM,GAAS,CACb,EAAW,QAAU,CACvB,CAGM,EADL,CACK,OACA,CACN,IAAM,EACJ,EAAA,cAAC,MAAD,CACE,KAAK,OACL,GAAI,EACJ,kBAAiB,EACjB,UAAW,EAAW,OAAQ,CAAE,KAAM,EAAS,kBAAmB,CAAQ,CAAC,EAC3E,MAAO,GACP,oBAAmB,GACnB,UAAY,GACV,EAAkB,EAAO,CACvB,SAAU,EACV,GAAI,EACA,CAAE,aAAc,CAAuB,EACvC,CAAE,YAAa,CAAuB,CAC5C,CAAC,EAEH,aAAc,EAAe,EAAoB,IAAA,GACjD,aAAc,EAAe,EAAgB,IAAA,GAK7C,IAAM,GAAS,CACb,EAAW,QAAU,EACrB,EAAgB,EAAQ,CAAI,CAC9B,CAOG,EALH,EAAA,cAAC,EAAsB,SAAvB,CAAgC,MAAO,EAIP,EAH9B,EAAA,cAAC,EAAoB,SAArB,CAA8B,MAAO,CAEP,EAD3B,CAC2B,CACA,CAC7B,EAWP,OAAO,EAAU,EAAQ,EAAA,cAAC,EAAD,CAAQ,SAAU,CAAsB,EAAd,CAAc,CACnE,EAAA,CAAG,CACA,CAET,CACF,EAEA,EAAY,YAAc,cCzQ1B,MAAa,EAAkB,GAC5B,CAAE,WAAU,YAAW,UAAS,OAAO,SAAU,GAAG,GAAQ,IAAQ,CACnE,IAAM,EAAU,EAAW,CAAqB,EAE1C,EAAe,GAA+C,CAClE,IAAU,CAAK,EACf,GAAS,MAAM,CACjB,EAEA,OACE,EAAA,cAAC,SAAD,CACQ,OACN,KAAK,WACL,UAAW,EAAW,eAAgB,YAAa,CAAS,EAC5D,GAAI,EACJ,QAAS,EACJ,KAGC,EADL,CACK,CAEZ,CACF,EAEA,EAAgB,YAAc"}

package/dist/chunks/modal-bgDR29Jh.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./useDialogElement-CgOnJAzu.js";import{t as n}from"./CloseButton-DPgQztE0.js";import r,{createContext as i,forwardRef as a,useContext as o,useId as s}from"react";import c from"classnames";const l=i({close:()=>{}}),u=a(({children:e,backdrop:n=!0,className:i,defaultVisible:a,fullscreen:o,instant:u,keyboard:d=!0,modal:f=!0,onClick:p,onClose:m,onClosePrevented:h,onHidden:g,onShow:_,onShown:v,onVisibleChange:y,scrollable:b,size:x,open:S,visible:C,...w},T)=>{let{close:E,forkedRef:D,handleBackdropClick:O,handleCancel:k,hiding:A,staticBounce:j}=t({backdrop:n,defaultVisible:a,instant:u,isModal:f,keyboard:d,onClick:p,onClose:m,onClosePrevented:h,onHidden:g,onShow:_,onShown:v,onVisibleChange:y,open:S,ref:T,visible:C}),M=s(),N=c(`modal`,`dialog`,{[typeof o==`boolean`?`fullscreen`:`max-${o}:fullscreen`]:o,[`${x}`]:x,instant:u,nonmodal:!f,scrollable:b,hiding:A,"dialog-static":j},i);return r.createElement(l.Provider,{value:{close:E,titleId:M}},r.createElement(`dialog`,{"aria-labelledby":M,...w,open:S,className:N,onCancel:k,onClick:O,ref:D},e))});u.displayName=`Modal`;const d=()=>o(l);function f({children:e,className:t,component:n,...i},a){let o=n??`div`,s=c(`modal-body`,t);return r.createElement(o,{className:s,...i,ref:a},e)}const p=e(f,`ModalBody`);function m({children:e,className:t,component:n,stacked:i,...a},o){let s=n??`div`,l=c(`modal-footer`,{stacked:i},t);return r.createElement(s,{className:l,...a,ref:o},e)}const h=e(m,`ModalFooter`);function g({children:e,className:t,closeButton:i=!0,closeLabel:a,component:o,...s},l){let u=o??`div`,{close:f}=d(),p=c(`modal-header`,t);return r.createElement(u,{className:p,...s,ref:l},e,i&&r.createElement(n,{label:a,onClick:f}))}const _=e(g,`ModalHeader`);function v({children:e,component:t,className:n,id:i,...a},o){let{titleId:s}=d(),l=t??`h2`,u=c(`modal-title`,n);return r.createElement(l,{className:u,id:i??s,...a,ref:o},e)}const y=e(v,`ModalTitle`);export{d as a,p as i,_ as n,u as o,h as r,y as t};
+//# sourceMappingURL=modal-bgDR29Jh.js.map

package/dist/chunks/modal-bgDR29Jh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-bgDR29Jh.js","names":[],"sources":["../../src/components/modal/Modal.tsx","../../src/hooks/useModal.ts","../../src/components/modal/ModalBody.tsx","../../src/components/modal/ModalFooter.tsx","../../src/components/modal/ModalHeader.tsx","../../src/components/modal/ModalTitle.tsx"],"sourcesContent":["import React, { createContext, DialogHTMLAttributes, forwardRef, useId } from 'react'\nimport classNames from 'classnames'\n\nimport { useDialogElement } from '../../hooks'\n\nexport interface ModalProps extends Omit<\n  DialogHTMLAttributes<HTMLDialogElement>,\n  'onCancel' | 'onClose'\n> {\n  /**\n   * Show a backdrop while the modal is open. `'static'` blocks closing on backdrop click\n   * (the modal bounces instead). `false` is intentionally not equivalent to `modal={false}` —\n   * unlike `Drawer`, whose vanilla chassis-css counterpart derives modality from `backdrop`,\n   * chassis-css's vanilla `Dialog` only ever reads `backdrop` to distinguish `'static'` from\n   * everything else; `modal` alone decides `showModal()`/`show()`. This mirrors that faithfully\n   * rather than reintroducing an inconsistency with the vendored behavior.\n   */\n  backdrop?: boolean | 'static'\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Whether the modal is open when it first renders. Such a modal is uncontrolled: it closes\n   * itself on a close request. Use `visible` to open and close it from outside.\n   */\n  defaultVisible?: boolean\n  /**\n   * Set modal to cover the entire user viewport. A breakpoint value goes fullscreen only\n   * below that breakpoint.\n   */\n  fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  /**\n   * Disable the open/close transition entirely.\n   */\n  instant?: boolean\n  /**\n   * Closes the modal when the escape key is pressed.\n   */\n  keyboard?: boolean\n  /**\n   * Open with `showModal()` (top-layer, native backdrop). Set `false` to open with `show()`\n   * instead — no backdrop, and the page behind the modal stays interactive.\n   */\n  modal?: boolean\n  /**\n   * Renders the modal open from its first paint, server HTML included, as a non-modal dialog: a\n   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to\n   * open it as a modal dialog.\n   */\n  open?: boolean\n  /**\n   * Callback fired when the modal requests to be closed (escape, backdrop click, or close button).\n   */\n  onClose?: () => void\n  /**\n   * Callback fired when a close attempt is blocked (static backdrop click, or escape with `keyboard=false`).\n   */\n  onClosePrevented?: () => void\n  /**\n   * Callback fired after the exit transition completes and the modal is fully hidden.\n   */\n  onHidden?: () => void\n  /**\n   * Callback fired when the modal starts to open.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired after the entry transition completes and the modal is fully visible.\n   */\n  onShown?: () => void\n  /**\n   * Callback fired with `false` when the modal requests to be closed, at the same moments as\n   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Create a scrollable modal — the header and footer stay fixed while the body scrolls.\n   */\n  scrollable?: boolean\n  /**\n   * Size the component sm, lg, or extra lg.\n   */\n  size?: 'sm' | 'lg' | 'xl'\n  /**\n   * Whether the modal is open. The modal is then controlled: a close request only fires\n   * `onClose` and `onVisibleChange`, and the modal closes when this becomes `false`.\n   */\n  visible?: boolean\n}\n\nexport interface ModalContextProps {\n  /**\n   * Requests the modal be closed — fires `onClose`. Wire this to any element's `onClick`; see\n   * `useModal`.\n   */\n  close: () => void\n  /**\n   * Id generated by `Modal` and applied automatically by `ModalTitle` to itself, so the\n   * dialog's `aria-labelledby` resolves to it without any manual wiring.\n   */\n  titleId?: string\n}\n\nexport const ModalContext = createContext<ModalContextProps>({ close: () => {} })\n\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  (\n    {\n      children,\n      backdrop = true,\n      className,\n      defaultVisible,\n      fullscreen,\n      instant,\n      keyboard = true,\n      modal = true,\n      onClick,\n      onClose,\n      onClosePrevented,\n      onHidden,\n      onShow,\n      onShown,\n      onVisibleChange,\n      scrollable,\n      size,\n      open,\n      visible,\n      ...rest\n    },\n    ref\n  ) => {\n    const { close, forkedRef, handleBackdropClick, handleCancel, hiding, staticBounce } =\n      useDialogElement({\n        backdrop,\n        defaultVisible,\n        instant,\n        isModal: modal,\n        keyboard,\n        onClick,\n        onClose,\n        onClosePrevented,\n        onHidden,\n        onShow,\n        onShown,\n        onVisibleChange,\n        open,\n        ref,\n        visible\n      })\n\n    const titleId = useId()\n\n    const _className = classNames(\n      'modal',\n      'dialog',\n      {\n        [typeof fullscreen === 'boolean' ? 'fullscreen' : `max-${fullscreen}:fullscreen`]:\n          fullscreen,\n        [`${size}`]: size,\n        instant,\n        nonmodal: !modal,\n        scrollable,\n        hiding,\n        'dialog-static': staticBounce\n      },\n      className\n    )\n\n    return (\n      <ModalContext.Provider value={{ close, titleId }}>\n        <dialog\n          aria-labelledby={titleId}\n          {...rest}\n          open={open}\n          className={_className}\n          onCancel={handleCancel}\n          onClick={handleBackdropClick}\n          ref={forkedRef}\n        >\n          {children}\n        </dialog>\n      </ModalContext.Provider>\n    )\n  }\n)\n\nModal.displayName = 'Modal'\n","import { useContext } from 'react'\nimport { ModalContext, ModalContextProps } from '../components/modal/Modal'\n\nexport type UseModalResult = ModalContextProps\n\n// Reach the enclosing `Modal`'s close handler from anywhere in its composed markup — e.g. to\n// close it from a plain `Button` placed in a `ModalFooter`. Only meaningful inside a `Modal`;\n// outside one it returns a no-op `close`.\nexport const useModal = (): UseModalResult => useContext(ModalContext)\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 ModalBodyOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base 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\nexport type ModalBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ModalBodyOwnProps<C>\n>\n\ntype ModalBodyComponent = (<C extends ElementType = 'div'>(\n  props: ModalBodyProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ModalBodyRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: ModalBodyProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('modal-body', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const ModalBody = createPolymorphicComponent<ModalBodyComponent>(\n  ModalBodyRender as ForwardRefRenderFunction<Element, ModalBodyProps<ElementType>>,\n  'ModalBody'\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 ModalFooterOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base 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   * Stack the footer actions as full-width columns instead of a right-aligned row.\n   */\n  stacked?: boolean\n}\n\nexport type ModalFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ModalFooterOwnProps<C>\n>\n\ntype ModalFooterComponent = (<C extends ElementType = 'div'>(\n  props: ModalFooterProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ModalFooterRender<C extends ElementType = 'div'>(\n  { children, className, component, stacked, ...rest }: ModalFooterProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('modal-footer', { stacked }, className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const ModalFooter = createPolymorphicComponent<ModalFooterComponent>(\n  ModalFooterRender as ForwardRefRenderFunction<Element, ModalFooterProps<ElementType>>,\n  'ModalFooter'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { useModal } from '../../hooks'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { CloseButton } from '../close-button/CloseButton'\n\ntype ModalHeaderOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Add a close button component to the header.\n   */\n  closeButton?: boolean\n  /**\n   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for\n   * non-English UIs.\n   */\n  closeLabel?: 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\nexport type ModalHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ModalHeaderOwnProps<C>\n>\n\ntype ModalHeaderComponent = (<C extends ElementType = 'div'>(\n  props: ModalHeaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ModalHeaderRender<C extends ElementType = 'div'>(\n  { children, className, closeButton = true, closeLabel, component, ...rest }: ModalHeaderProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const { close } = useModal()\n  const _className = classNames('modal-header', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n      {closeButton && <CloseButton label={closeLabel} onClick={close} />}\n    </Component>\n  )\n}\n\nexport const ModalHeader = createPolymorphicComponent<ModalHeaderComponent>(\n  ModalHeaderRender as ForwardRefRenderFunction<Element, ModalHeaderProps<ElementType>>,\n  'ModalHeader'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { useModal } from '../../hooks'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype ModalTitleOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base 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\nexport type ModalTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<\n  C,\n  ModalTitleOwnProps<C>\n>\n\ntype ModalTitleComponent = (<C extends ElementType = 'h2'>(\n  props: ModalTitleProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ModalTitleRender<C extends ElementType = 'h2'>(\n  { children, component, className, id, ...rest }: ModalTitleProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const { titleId } = useModal()\n  const Component = component ?? 'h2'\n  const _className = classNames('modal-title', className)\n\n  return (\n    <Component className={_className} id={id ?? titleId} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const ModalTitle = createPolymorphicComponent<ModalTitleComponent>(\n  ModalTitleRender as ForwardRefRenderFunction<Element, ModalTitleProps<ElementType>>,\n  'ModalTitle'\n)\n"],"mappings":"yRAwGA,MAAa,EAAe,EAAiC,CAAE,UAAa,CAAC,CAAE,CAAC,EAEnE,EAAQ,GAEjB,CACE,WACA,WAAW,GACX,YACA,iBACA,aACA,UACA,WAAW,GACX,QAAQ,GACR,UACA,UACA,mBACA,WACA,SACA,UACA,kBACA,aACA,OACA,OACA,UACA,GAAG,GAEL,IACG,CACH,GAAM,CAAE,QAAO,YAAW,sBAAqB,eAAc,SAAQ,gBACnE,EAAiB,CACf,WACA,iBACA,UACA,QAAS,EACT,WACA,UACA,UACA,mBACA,WACA,SACA,UACA,kBACA,OACA,MACA,SACF,CAAC,EAEG,EAAU,EAAM,EAEhB,EAAa,EACjB,QACA,SACA,EACG,OAAO,GAAe,UAAY,aAAe,OAAO,EAAW,cAClE,GACD,GAAG,KAAS,EACb,UACA,SAAU,CAAC,EACX,aACA,SACA,gBAAiB,CACnB,EACA,CACF,EAEA,OACE,EAAA,cAAC,EAAa,SAAd,CAAuB,MAAO,CAAE,QAAO,SAAQ,CAYxB,EAXrB,EAAA,cAAC,SAAD,CACE,kBAAiB,EACjB,GAAI,EACE,OACN,UAAW,EACX,SAAU,EACV,QAAS,EACT,IAAK,CAGC,EADL,CACK,CACa,CAE3B,CACF,EAEA,EAAM,YAAc,QCnLpB,MAAa,MAAiC,EAAW,CAAY,ECqBrE,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,GAAG,GACrC,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EAAW,aAAc,CAAS,EAErD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAY,EACvB,EACA,WACF,ECbA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,UAAS,GAAG,GAC9C,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EAAW,eAAgB,CAAE,SAAQ,EAAG,CAAS,EAEpE,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAc,EACzB,EACA,aACF,ECVA,SAAS,EACP,CAAE,WAAU,YAAW,cAAc,GAAM,aAAY,YAAW,GAAG,GACrE,EACA,CACA,IAAM,EAAY,GAAa,MACzB,CAAE,SAAU,EAAS,EACrB,EAAa,EAAW,eAAgB,CAAS,EAEvD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAGtC,EAFR,EACA,GAAe,EAAA,cAAC,EAAD,CAAa,MAAO,EAAY,QAAS,CAAQ,CAAA,CACxD,CAEf,CAEA,MAAa,EAAc,EACzB,EACA,aACF,EC7BA,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,KAAI,GAAG,GACzC,EACA,CACA,GAAM,CAAE,WAAY,EAAS,EACvB,EAAY,GAAa,KACzB,EAAa,EAAW,cAAe,CAAS,EAEtD,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,GAAM,EAAS,GAAI,EAAW,KAEzD,EADR,CACQ,CAEf,CAEA,MAAa,EAAa,EACxB,EACA,YACF"}

package/dist/chunks/nav-TiZuTHC6.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{m as e,u as t,v as n}from"./slot-CNhFZdHF.js";import{t as r}from"./useForkedRef-DVEfT-KI.js";import{t as i}from"./polymorphic-BhGNZQja.js";import{t as a}from"./Link-CZsWCnQb.js";import{a as o,i as s,o as c,r as l,s as u}from"./navOverflow-B5krZe6D.js";import{t as d}from"./navVariant-DeGTk9B7.js";import f,{forwardRef as p}from"react";import m from"classnames";function h({children:e,className:t,...n},r){let i=m(`nav-link`,t),s=c();return f.createElement(f.Fragment,null,f.createElement(a,{className:i,...n,ref:r},e),s&&f.createElement(o,{props:{...n,children:e}}))}const g=i(h,`NavLink`),_=new Set([`active`,`color`,`disabled`,`iconLink`,`reset`,`stretched`,`type`]);function v({children:e,className:i,keepVisible:a,...o},s){let c=m(`nav-item`,{"nav-overflow-keep":a},i),{asChild:d,component:p,href:h}=o,v=u(),y=r(s,v.ref),b=v.hidden?{"data-cx-nav-overflow":`true`}:void 0;if(t(h)||p!==void 0||d)return f.createElement(`li`,{className:c,...b,ref:y},f.createElement(l,{value:v.scope},f.createElement(g,o,e)));let{active:x,disabled:S}=o,C=Object.fromEntries(Object.entries(o).filter(([e])=>!_.has(e)));return n(!!x||!!S,"NavItem: `active` and `disabled` style its link, and without `href`, `component` or `asChild` it renders none. Put them on the link inside it."),f.createElement(`li`,{className:c,...C,...b,ref:y},f.createElement(l,{value:v.scope},e))}const y=p(v);y.displayName=`NavItem`;function b({children:t,className:n,component:r,items:i,layout:a,size:o,variant:c,...l},u){let p=r??`ul`,h=m(`nav`,o,{[`nav-${a}`]:a},d(c,`Nav`),n),g=i?i.map((e,t)=>f.createElement(y,{key:t,active:e.active,disabled:e.disabled,href:e.href},e.label)):null;return f.createElement(p,{className:h,...l,ref:u},f.createElement(s,{tag:e(p)},g??t))}const x=i(b,`Nav`),S=p(({children:e,className:t,...n},r)=>{let i=m(`nav-title`,t);return f.createElement(`li`,{className:i,...n,ref:r},e)});S.displayName=`NavTitle`;export{g as i,x as n,y as r,S as t};
+//# sourceMappingURL=nav-TiZuTHC6.js.map

package/dist/chunks/nav-TiZuTHC6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-TiZuTHC6.js","names":[],"sources":["../../src/components/nav/NavLink.tsx","../../src/components/nav/NavItem.tsx","../../src/components/nav/Nav.tsx","../../src/components/nav/NavTitle.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { NavOverflowLink, useIsNavOverflowLink } from '../../utils/navOverflow'\nimport { createPolymorphicComponent, PolymorphicRef } from '../../utils/polymorphic'\nimport { LinkProps, Link } from '../link/Link'\n\ntype NavLinkOwnProps = {\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   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n}\n\nexport type NavLinkProps<C extends ElementType = 'a'> = LinkProps<C> & NavLinkOwnProps\n\ntype NavLinkComponent = (<C extends ElementType = 'a'>(\n  props: NavLinkProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavLinkRender<C extends ElementType = 'a'>(\n  { children, className, ...rest }: NavLinkProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const _className = classNames('nav-link', className)\n  // Inside a `NavOverflow`, the link of an item that doesn't fit is shown in the menu instead, as\n  // a `MenuItem` with these props.\n  const isOverflowLink = useIsNavOverflowLink()\n\n  return (\n    <>\n      <Link\n        className={_className}\n        {...(rest as Record<string, unknown>)}\n        ref={ref as PolymorphicRef<ElementType>}\n      >\n        {children}\n      </Link>\n      {isOverflowLink && <NavOverflowLink props={{ ...rest, children }} />}\n    </>\n  )\n}\n\nexport const NavLink = createPolymorphicComponent<NavLinkComponent>(\n  NavLinkRender as ForwardRefRenderFunction<Element, NavLinkProps<ElementType>>,\n  'NavLink'\n)\n","import React, {\n  ElementType,\n  ForwardRefRenderFunction,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../hooks'\nimport { devWarning } from '../../utils/devWarning'\nimport { hasHref } from '../../utils/elementKind'\nimport { NavOverflowItemScope, useNavOverflowItem } from '../../utils/navOverflow'\nimport { NavLink, NavLinkProps } from './NavLink'\n\nexport type NavItemProps<C extends ElementType = 'a'> = NavLinkProps<C> & {\n  /**\n   * Keeps the item in the list inside a `NavOverflow`, whatever the width.\n   */\n  keepVisible?: boolean\n}\n\ntype NavItemComponent = (<C extends ElementType = 'a'>(\n  props: NavItemProps<C> & { ref?: Ref<HTMLLIElement> }\n) => ReactElement | null) & { displayName?: string }\n\nconst LINK_ONLY_PROPS = new Set([\n  'active',\n  'color',\n  'disabled',\n  'iconLink',\n  'reset',\n  'stretched',\n  'type'\n])\n\n// A `.nav-item` wrapping a `.nav-link` when there is a link to render: an `href`, or a `component`\n// or `asChild` element, which `NavLink` renders. Otherwise a bare `<li>` around `children`, such as\n// a `MenuToggle`. Only the `<li>` takes the caller's own attributes then: `active`, `disabled` and\n// the other `NavLink` props style a link, and on the `<li>` they were written out as invalid\n// attributes (`disabled=\"\"`, `component=\"button\"`).\nfunction NavItemRender<C extends ElementType = 'a'>(\n  { children, className, keepVisible, ...rest }: NavItemProps<C>,\n  ref: Ref<HTMLLIElement>\n) {\n  const _className = classNames('nav-item', { 'nav-overflow-keep': keepVisible }, className)\n  const { asChild, component, href } = rest as {\n    asChild?: boolean\n    component?: ElementType\n    href?: string\n  }\n  // Inside a `NavOverflow`: the `<li>` is what it measures, and hides when the item is in the\n  // menu. chassis-css hides it by this attribute.\n  const overflow = useNavOverflowItem()\n  const forkedRef = useForkedRef(ref, overflow.ref)\n  const overflowProps = overflow.hidden ? { 'data-cx-nav-overflow': 'true' } : undefined\n\n  if (hasHref(href) || component !== undefined || asChild) {\n    return (\n      <li className={_className} {...overflowProps} ref={forkedRef}>\n        <NavOverflowItemScope value={overflow.scope}>\n          <NavLink {...(rest as Record<string, unknown>)}>{children as ReactNode}</NavLink>\n        </NavOverflowItemScope>\n      </li>\n    )\n  }\n\n  const { active, disabled } = rest as NavLinkProps<'a'>\n  const itemProps = Object.fromEntries(\n    Object.entries(rest).filter(([key]) => !LINK_ONLY_PROPS.has(key))\n  )\n  devWarning(\n    !!active || !!disabled,\n    'NavItem: `active` and `disabled` style its link, and without `href`, `component` or ' +\n      '`asChild` it renders none. Put them on the link inside it.'\n  )\n  return (\n    <li className={_className} {...itemProps} {...overflowProps} ref={forkedRef}>\n      <NavOverflowItemScope value={overflow.scope}>{children}</NavOverflowItemScope>\n    </li>\n  )\n}\n\nexport const NavItem = forwardRef(\n  NavItemRender as ForwardRefRenderFunction<HTMLLIElement, NavItemProps<ElementType>>\n) as NavItemComponent\n\nNavItem.displayName = 'NavItem'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { resolveElementTag } from '../../utils/elementKind'\nimport { NavOverflowItems } from '../../utils/navOverflow'\nimport { NavVariant, navVariantClassName } from '../../utils/navVariant'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { NavItem } from './NavItem'\n\nexport interface NavItemDef {\n  /**\n   * Label content for the nav item.\n   */\n  label: React.ReactNode\n  /**\n   * URL for the nav link.\n   */\n  href?: string\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 NavOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base 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   * Array of nav item definitions for data-driven rendering. When provided, children are ignored.\n   */\n  items?: NavItemDef[]\n  /**\n   * Specify a layout type for component.\n   */\n  layout?: 'fill' | 'justified'\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set the nav variant to tabs, to segments (a segmented control) or to underline, which\n   * underlines the active link. `'pills'` is the former name of `'segments'`: deprecated, it\n   * renders the same.\n   *\n   * @type { 'tabs' | 'segments' | 'underline' | 'pills' }\n   */\n  variant?: NavVariant\n}\n\nexport type NavProps<C extends ElementType = 'ul'> = PolymorphicComponentProps<C, NavOwnProps<C>>\n\ntype NavComponent = (<C extends ElementType = 'ul'>(\n  props: NavProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction NavRender<C extends ElementType = 'ul'>(\n  { children, className, component, items, layout, size, variant, ...rest }: NavProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'ul'\n  const _className = classNames(\n    'nav',\n    size,\n    { [`nav-${layout}`]: layout },\n    navVariantClassName(variant, 'Nav'),\n    className\n  )\n\n  const autoContent = items\n    ? items.map((item, idx) => (\n        <NavItem\n          // eslint-disable-next-line react/no-array-index-key\n          key={idx}\n          active={item.active}\n          disabled={item.disabled}\n          href={item.href}\n        >\n          {item.label}\n        </NavItem>\n      ))\n    : null\n\n  // No `role`: `navigation` on the `<ul>` took away its list semantics, and `ul` doesn't allow\n  // that role. A landmark is the caller's `<nav>` around it, or `component=\"nav\"` holding\n  // `NavLink`s without items.\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {/* Inside a `NavOverflow`, the items it collapses and its toggle item. */}\n      <NavOverflowItems tag={resolveElementTag(Component)}>\n        {autoContent ?? children}\n      </NavOverflowItems>\n    </Component>\n  )\n}\n\nexport const Nav = createPolymorphicComponent<NavComponent>(\n  NavRender as ForwardRefRenderFunction<Element, NavProps<ElementType>>,\n  'Nav'\n)\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nexport interface NavTitleProps extends HTMLAttributes<HTMLLIElement> {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n}\n\nexport const NavTitle = forwardRef<HTMLLIElement, NavTitleProps>(\n  ({ children, className, ...rest }, ref) => {\n    const _className = classNames('nav-title', className)\n    return (\n      <li className={_className} {...rest} ref={ref}>\n        {children}\n      </li>\n    )\n  }\n)\n\nNavTitle.displayName = 'NavTitle'\n"],"mappings":"iZA4BA,SAAS,EACP,CAAE,WAAU,YAAW,GAAG,GAC1B,EACA,CACA,IAAM,EAAa,EAAW,WAAY,CAAS,EAG7C,EAAiB,EAAqB,EAE5C,OACE,EAAA,cAAA,EAAA,SAAA,KACE,EAAA,cAAC,EAAD,CACE,UAAW,EACX,GAAK,EACA,KAGD,EADH,CACG,EACL,GAAkB,EAAA,cAAC,EAAD,CAAiB,MAAO,CAAE,GAAG,EAAM,UAAS,CAAI,CAAA,CACnE,CAEN,CAEA,MAAa,EAAU,EACrB,EACA,SACF,EC3BM,EAAkB,IAAI,IAAI,CAC9B,SACA,QACA,WACA,WACA,QACA,YACA,MACF,CAAC,EAOD,SAAS,EACP,CAAE,WAAU,YAAW,cAAa,GAAG,GACvC,EACA,CACA,IAAM,EAAa,EAAW,WAAY,CAAE,oBAAqB,CAAY,EAAG,CAAS,EACnF,CAAE,UAAS,YAAW,QAAS,EAO/B,EAAW,EAAmB,EAC9B,EAAY,EAAa,EAAK,EAAS,GAAG,EAC1C,EAAgB,EAAS,OAAS,CAAE,uBAAwB,MAAO,EAAI,IAAA,GAE7E,GAAI,EAAQ,CAAI,GAAK,IAAc,IAAA,IAAa,EAC9C,OACE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAe,IAAK,CAI/C,EAHF,EAAA,cAAC,EAAD,CAAsB,MAAO,EAAS,KAEhB,EADpB,EAAA,cAAC,EAAa,EAAmC,CAA+B,CAC5D,CACpB,EAIR,GAAM,CAAE,SAAQ,YAAa,EACvB,EAAY,OAAO,YACvB,OAAO,QAAQ,CAAI,CAAC,CAAC,QAAQ,CAAC,KAAS,CAAC,EAAgB,IAAI,CAAG,CAAC,CAClE,EAMA,OALA,EACE,CAAC,CAAC,GAAU,CAAC,CAAC,EACd,gJAEF,EAEE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAW,GAAI,EAAe,IAAK,CAE9D,EADF,EAAA,cAAC,EAAD,CAAsB,MAAO,EAAS,KAAuC,EAA/B,CAA+B,CAC3E,CAER,CAEA,MAAa,EAAU,EACrB,CACF,EAEA,EAAQ,YAAc,UCnBtB,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,SAAQ,OAAM,UAAS,GAAG,GACnE,EACA,CACA,IAAM,EAAY,GAAa,KACzB,EAAa,EACjB,MACA,EACA,EAAG,OAAO,KAAW,CAAO,EAC5B,EAAoB,EAAS,KAAK,EAClC,CACF,EAEM,EAAc,EAChB,EAAM,KAAK,EAAM,IACf,EAAA,cAAC,EAAD,CAEE,IAAK,EACL,OAAQ,EAAK,OACb,SAAU,EAAK,SACf,KAAM,EAAK,IAGJ,EADN,EAAK,KACC,CACV,EACD,KAKJ,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAKtC,EAHT,EAAA,cAAC,EAAD,CAAkB,IAAK,EAAkB,CAAS,CAEhC,EADf,GAAe,CACA,CACT,CAEf,CAEA,MAAa,EAAM,EACjB,EACA,KACF,ECtGa,EAAW,GACrB,CAAE,WAAU,YAAW,GAAG,GAAQ,IAAQ,CACzC,IAAM,EAAa,EAAW,YAAa,CAAS,EACpD,OACE,EAAA,cAAC,KAAD,CAAI,UAAW,EAAY,GAAI,EAAW,KAEtC,EADD,CACC,CAER,CACF,EAEA,EAAS,YAAc"}

package/dist/chunks/nav-overflow-Ay5mM5Gc.js

@@ -0,0 +1,2 @@
+import"./focus-ring-SR_LwaN7.js";import{v as e}from"./slot-CNhFZdHF.js";import{t}from"./useForkedRef-DVEfT-KI.js";import{t as n}from"./polymorphic-BhGNZQja.js";import{t as r}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{n as i}from"./Portal-CgeR1WXV.js";import{t as a}from"./iconSlot-BNu2MrFI.js";import{n as o}from"./navOverflow-B5krZe6D.js";import{t as s}from"./Menu-CSBg2Zmc.js";import{l as c,n as l,t as u}from"./MenuToggle-BdQtF7FV.js";import d,{createContext as f,useCallback as p,useContext as m,useEffect as h,useMemo as g,useRef as _,useState as v,useSyncExternalStore as y}from"react";import b from"classnames";import{flushSync as x}from"react-dom";const S=f(null);function C(e){for(let t=e.previousElementSibling;t;t=t.previousElementSibling){if(t.hasAttribute(`data-cx-nav-overflow`))continue;let e=t.querySelector(`a[href], button:not(:disabled), [tabindex]`);if(e)return e}return null}function w({tabs:e}){let t=m(S),[n,i]=v(!1),o=_(null),f=_(!1),p=t?.hidden,h=!p?.length;r(()=>{let e=o.current;if(!e||!f.current)return;let t=e.ownerDocument.activeElement;(!t||t===e.ownerDocument.body||h&&e.contains(t))&&(f.current=!h,(h?C(e):e.querySelector(`.nav-overflow-toggle`))?.focus())},[p,h]);let g=t=>{f.current=!0,e&&t.stopPropagation()},x=()=>{f.current=!1};if(y(t?.subscribe??D,t?.getVersion??O,t?.getVersion??O),!t||!p)return null;let{getLink:w,iconPlacement:k,menuContainer:A,menuPlacement:j,moreIcon:M,moreLabel:N,moreText:P}=t;h&&n&&i(!1);let F=d.createElement(`span`,{key:`icon`,className:`nav-overflow-icon`,style:E},d.createElement(a,{icon:`more`,override:M})),I=P===!1?null:d.createElement(`span`,{key:`text`,className:`nav-overflow-text`},P);return d.createElement(s,{component:`li`,className:b(`nav-item nav-overflow-item`,{[T]:h}),container:e&&typeof A!=`object`||A,onBlur:x,onFocus:g,onVisibleChange:i,placement:j,visible:n&&!h,...e&&{role:`presentation`},ref:o},d.createElement(u,{"aria-label":P===!1?N:void 0,caret:!1,className:`nav-link nav-overflow-toggle`,component:`button`,...e&&{"aria-selected":!1,role:`tab`,tabIndex:-1}},k===`end`?[I,F]:[F,I]),d.createElement(l,{className:`nav-overflow-menu`},p.map(e=>{let t=w(e);return t&&d.createElement(c,{key:e,...t})})))}const T=`d-none`,E={"--cx-icon-color":`currentcolor`,"--cx-icon-size":`1rem`},D=()=>()=>{},O=()=>0;function k({available:e,collapseAll:t,gap:n,items:r,more:i,threshold:a}){let o=r.filter(e=>!e.keep),s=e=>e.map(e=>e.id);if(t)return s(o);if(r.reduce((e,t)=>e+t.width,0)+n*(r.length-1)<=e+1)return[];let c=i+r.reduce((e,t)=>t.keep?e+t.width+n:e,0),l=o.filter(t=>(c+=t.width+n,c>e+1));return r.length-l.length<a&&r.length>a&&(l=r.slice(a).filter(e=>!e.keep)),s(l)}function A(){let e=new Map,t=new Set,n=0,r=t=>{let n=e.get(t);return n||(n={element:null,link:null},e.set(t,n)),n};return{entries:e,getVersion:()=>n,notify:()=>{n+=1,t.forEach(e=>e())},set:(t,n)=>{let i=Object.assign(r(t),n);!i.element&&!i.link&&e.delete(t)},subscribe:e=>(t.add(e),()=>{t.delete(e)})}}const j=`data-cx-nav-overflow`,M=`d-none`,N=[],P=e=>Number.parseFloat(e)||0,F=e=>`offsetWidth`in e,I=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]);function ee(e,t){if(typeof e==`number`)return e;if(!e)return 0;let n=getComputedStyle(t.ownerDocument.documentElement),r=n.getPropertyValue(`--cx-breakpoint-${e}`).trim();return/r?em$/.test(r)?P(r)*(P(n.fontSize)||16):P(r)}const te={overflowX:`auto`,scrollbarWidth:`none`};function L({children:n,className:a,collapseBelow:s,component:c,iconPlacement:l=`start`,menuContainer:u,menuPlacement:f=`bottom-end`,moreIcon:m,moreLabel:y=`More`,moreText:C=`More`,onOverflow:T,style:E,threshold:D=0,...O},L){let R=c??`div`,z=_(null),ne=p(e=>{e&&(z.current=e)},[]),re=t(L,ne),ie=i(),[B]=v(A),[V,H]=v(N),U=_(V),W=_(0),G=_({collapseBelow:s,threshold:D});G.current={collapseBelow:s,threshold:D};let K=_(null),q=p(()=>{let t=z.current?.isConnected?z.current:null,n=t&&Array.from(t.children).find(e=>e.matches(`.nav`));if(e(!!t&&!n,"NavOverflow: expects a `Nav`, a `NavbarNav` or a `TabList` as its child; found no `.nav` to collapse."),!t||!n)return null;let r=Array.from(n.children).filter(F),i=r.find(e=>e.classList.contains(`nav-overflow-item`)),a=r.filter(e=>e!==i);if(Y(t,n,r),W.current=a.length,!i)return[];let o=new Map;B.entries.forEach((e,t)=>{e.element&&o.set(e.element,t)});let s=a.filter(e=>e.hasAttribute(j)),c=i.classList.contains(M);s.forEach(e=>e.removeAttribute(j)),i.classList.remove(M);try{let e=getComputedStyle(t),r=getComputedStyle(n),s=t.clientWidth-P(e.paddingInlineStart)-P(e.paddingInlineEnd),c=t.ownerDocument.activeElement,l=a.map(e=>{let t=o.get(e);return{id:t,keep:!t||!B.entries.get(t)?.link||e.classList.contains(`nav-overflow-keep`)||e.querySelector(`.nav-link.active, .nav-link[aria-current]:not([aria-current="false"]), [role="tab"][tabindex="0"]`)!==null||e.contains(c),width:e.offsetWidth}}),{collapseBelow:u,threshold:d}=G.current;return k({available:s-P(r.paddingInlineStart)-P(r.paddingInlineEnd)-P(r.borderInlineStartWidth)-P(r.borderInlineEndWidth),collapseAll:s<ee(u,t),gap:P(r.columnGap),items:l,more:i.offsetWidth,threshold:d})}finally{s.forEach(e=>e.setAttribute(j,`true`)),c&&i.classList.add(M),t.offsetWidth,K.current?.mutation?.takeRecords()}},[B]),J=p(()=>{let e=q();e&&!I(e,U.current)&&(U.current=e,H(e))},[q]);function Y(e,t,n){let r=K.current;if(r&&r.wrapper!==e&&(X(),r=null),!r){let t=()=>x(J),n={frame:0,mutation:typeof MutationObserver>`u`?null:new MutationObserver(t),nav:null,observed:new Set,resize:typeof ResizeObserver>`u`?null:new ResizeObserver(r=>{if(!r.some(t=>t.target===e)){cancelAnimationFrame(n.frame),n.frame=requestAnimationFrame(t);return}let i=U.current;t(),U.current!==i&&K.current===n&&(n.resize?.unobserve(e),cancelAnimationFrame(n.wrapperFrame),n.wrapperFrame=requestAnimationFrame(()=>n.resize?.observe(e)))}),wrapperFrame:0,wrapper:e};r=K.current=n,r.resize?.observe(e)}let{mutation:i,observed:a,resize:o}=r;r.nav!==t&&(r.nav=t,i?.disconnect(),i?.observe(t,{attributeFilter:[`class`,`aria-current`],attributes:!0,childList:!0,subtree:!0}));let s=new Set(n);a.forEach(e=>{s.has(e)||(o?.unobserve(e),a.delete(e))}),s.forEach(e=>{a.has(e)||(o?.observe(e),a.add(e))})}function X(){let e=K.current;e&&(cancelAnimationFrame(e.frame),cancelAnimationFrame(e.wrapperFrame),e.mutation?.disconnect(),e.resize?.disconnect(),K.current=null)}h(()=>X,[]),r(J,[J,R,s,D]);let Z=_(V);h(()=>{Z.current!==V&&(Z.current=V,T?.({overflowCount:V.length,visibleCount:W.current-V.length}))},[V]);let Q=p((e,t)=>B.set(e,{element:t}),[B]),$=p((e,t)=>{B.set(e,{link:t}),U.current.includes(e)&&B.notify()},[B]),ae=g(()=>({hidden:V,More:w,registerItem:Q,registerLink:$,update:J}),[V,Q,$,J]),oe=g(()=>({getLink:e=>B.entries.get(e)?.link??null,getVersion:B.getVersion,hidden:V,iconPlacement:l,menuContainer:u,menuPlacement:f,moreIcon:m,moreLabel:y,moreText:C,subscribe:B.subscribe}),[V,l,u,f,m,y,C,B]);return d.createElement(o.Provider,{value:ae},d.createElement(S.Provider,{value:oe},d.createElement(R,{className:b(`nav-overflow`,a),style:ie?E:{...te,...E},...O,ref:re},n)))}const R=n(L,`NavOverflow`);export{R as t};
+//# sourceMappingURL=nav-overflow-Ay5mM5Gc.js.map