@chassis-ui/react 0.5.0 → 0.6.0

package/dist/chunks/{polymorphic-CZIFszAy.js.map → polymorphic-mAKwlLiW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"polymorphic-CZIFszAy.js","names":["devWarning","isSlot","withSlottedElement","getSlot","getSlotChild","useSlotElement","SlotProvider","createPolymorphicComponent","Component","forwardRef","props","inherited","child","asChild","displayName","createElement","render","ref"],"sources":["../../src/utils/polymorphic.ts"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  createElement,\n  ElementType,\n  ForwardRefRenderFunction,\n  forwardRef,\n  Ref\n} from 'react'\n\nimport { devWarning } from './devWarning'\nimport { withSlottedElement } from './elementKind'\nimport { getSlot, getSlotChild, isSlot, SlotProvider, useSlotElement } from './slot'\n\n// Ref type inferred from a polymorphic component's currently-selected `component` element type.\nexport type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref']\n\n/**\n * Ref type for a polymorphic component that can also pick its element from a prop *other* than\n * `component` — `Button`, `Chip`, `Avatar`, `NavbarBrand` and `PaginationItem` all render an\n * `<a>` when given `href`, and `PaginationItem` a `<span>` when `active`, none of which moves `C`\n * off its default. A plain `PolymorphicRef<C>` describes only the `component` branch, so a caller\n * holding a ref for the element that actually gets rendered (`<Button href=\"/x\" ref={anchorRef}>`)\n * got a spurious type error while the runtime happily populated it.\n *\n * `Ref` over the *union* rather than a union of `Ref`s is what makes a\n * `createRef<HTMLButtonElement | HTMLAnchorElement>()` assignable here: `RefObject` is invariant\n * in its type argument, so `RefObject<A | B>` satisfies `Ref<A | B>` but neither `Ref<A>` nor\n * `Ref<B>` on its own.\n */\nexport type PolymorphicRefWithFallback<C extends ElementType, Fallback extends HTMLElement> =\n  PolymorphicRef<C> | Ref<Fallback>\n\n/**\n * The `asChild` prop every polymorphic component accepts alongside `component` — see\n * `createPolymorphicComponent` below for how it's implemented once for all of them.\n */\nexport interface AsChildProps {\n  /**\n   * Render the single child element in place of this component's own element, with this\n   * component's classes, props and ref merged onto it: `<Button asChild><Link href=\"/login\">Log\n   * in</Link></Button>`. The alternative to `component` for React Server Components — an element\n   * can be passed from the server to this package's client components, a component reference\n   * (`component={Link}`) can't.\n   */\n  asChild?: boolean\n}\n\n/**\n * Props for a polymorphic component: `OwnProps` (which must declare `component?: C`) plus\n * whatever props `C` itself accepts, minus any name already claimed by `OwnProps` so the two\n * don't conflict. Lets consumers swap `component` for e.g. a framework's `Image` and get full\n * type-checking/autocomplete for that component's own props at the call site.\n */\nexport type PolymorphicComponentProps<C extends ElementType, OwnProps extends object> = OwnProps &\n  AsChildProps &\n  Omit<ComponentPropsWithoutRef<C>, keyof OwnProps | keyof AsChildProps>\n\n/**\n * Wraps a polymorphic component's render function in `forwardRef` and stamps `displayName` — the\n * two-step wiring every polymorphic component in this library repeats identically. `T` is the\n * fully generic component type (e.g. `ButtonComponent`) that `forwardRef`'s own return type can't\n * express, since `forwardRef` only accepts a non-generic render function — the caller still casts\n * the render function to a concrete `Element`-typed instance before passing it in here.\n *\n * Also implements `asChild` for every polymorphic component at once (#23): the render function\n * gets a `Slot` as its `component` and the child element's own children, so it computes its\n * classes, props and ref as it would for `component` — the `Slot` then clones the caller's child\n * element with all of that merged on (see `./slot`). No render function needs to know `asChild`\n * exists. One that treats elements differently (`disabled` on a `<button>` versus an `<a>`) asks\n * `resolveElementKind(Component)`, which answers for a tag and for a `Slot` alike. It has to ask\n * while it renders: the kind of a component element is read from the element then, not kept on\n * its `Slot`.\n */\nexport function createPolymorphicComponent<T>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  render: ForwardRefRenderFunction<Element, any>,\n  displayName: string\n): T {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const Component = forwardRef<Element, any>(({ asChild, ...props }, ref) => {\n    // The `asChild` element of a component above, for when that component hands its `Slot` on as\n    // this one's `component` (`ListItem` and `NavLink` render a `Link` that way).\n    const inherited = useSlotElement()\n    const child = asChild ? getSlotChild(props.children, displayName) : null\n    if (!child) {\n      return isSlot(props.component)\n        ? withSlottedElement(inherited, () => render(props, ref))\n        : render(props, ref)\n    }\n\n    devWarning(\n      props.component !== undefined,\n      `${displayName}: both \\`asChild\\` and \\`component\\` were passed; \\`asChild\\` wins and ` +\n        `\\`component\\` is ignored.`\n    )\n\n    // The render function reads the child's kind off the `Slot` while it runs (see\n    // `withSlottedElement`).\n    return createElement(\n      SlotProvider,\n      { value: child },\n      withSlottedElement(child, () =>\n        render(\n          {\n            ...props,\n            component: getSlot(child),\n            children: (child.props as PropsWithChildren).children\n          },\n          ref\n        )\n      )\n    )\n  }) as unknown as T & { displayName?: string }\n  Component.displayName = displayName\n  return Component\n}\n\ntype PropsWithChildren = { children?: unknown }\n"],"mappings":"A,uIA0EA,SAAgBO,EAEd,EACA,EACG,CAEH,IAAMC,EAAYC,GAA0B,CAAE,UAAS,GAAGC,GAAS,IAAQ,CAGzE,IAAMC,EAAYN,EAAe,EAC3BO,EAAQC,EAAUT,EAAaM,EAAM,SAAUI,CAAW,EAAI,KAepE,OAdKF,GAMLZ,EACEU,EAAM,YAAc,IAAA,GACpB,GAAGI,EAAY,iGAEjB,EAIOC,EACLT,EACA,CAAE,MAAOM,CAAM,EACfV,EAAmBU,MACjBI,EACE,CACE,GAAGN,EACH,UAAWP,EAAQS,CAAK,EACxB,SAAWA,EAAM,MAA4B,QAC/C,EACAK,CACF,CACF,CACF,GA1BShB,EAAOS,EAAM,SAAS,EACzBR,EAAmBS,MAAiBK,EAAON,EAAOO,CAAG,CAAC,EACtDD,EAAON,EAAOO,CAAG,CAyBzB,CAAC,EAED,MADA,GAAU,YAAcH,EACjBN,CACT,C"}
+{"version":3,"file":"polymorphic-mAKwlLiW.js","names":["devWarning","isSlot","useSlotElement","SlotProvider","withSlottedElement","createPolymorphicComponent","Component","forwardRef","props","inherited","child","asChild","getSlotChild","displayName","createElement","render","getSlot","ref"],"sources":["../../src/utils/polymorphic.ts"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  createElement,\n  ElementType,\n  ForwardRefRenderFunction,\n  forwardRef,\n  Ref\n} from 'react'\n\nimport { devWarning } from './devWarning'\nimport { withSlottedElement } from './elementKind'\nimport { getSlot, getSlotChild, isSlot, SlotProvider, useSlotElement } from './slot'\n\n// Ref type inferred from a polymorphic component's currently-selected `component` element type.\nexport type PolymorphicRef<C extends ElementType> = ComponentPropsWithRef<C>['ref']\n\n/**\n * Ref type for a polymorphic component that can also pick its element from a prop *other* than\n * `component` — `Button`, `Chip`, `Avatar`, `NavbarBrand` and `PaginationItem` all render an\n * `<a>` when given `href`, and `PaginationItem` a `<span>` when `active`, none of which moves `C`\n * off its default. A plain `PolymorphicRef<C>` describes only the `component` branch, so a caller\n * holding a ref for the element that actually gets rendered (`<Button href=\"/x\" ref={anchorRef}>`)\n * got a spurious type error while the runtime happily populated it.\n *\n * `Ref` over the *union* rather than a union of `Ref`s is what makes a\n * `createRef<HTMLButtonElement | HTMLAnchorElement>()` assignable here: `RefObject` is invariant\n * in its type argument, so `RefObject<A | B>` satisfies `Ref<A | B>` but neither `Ref<A>` nor\n * `Ref<B>` on its own.\n */\nexport type PolymorphicRefWithFallback<C extends ElementType, Fallback extends HTMLElement> =\n  PolymorphicRef<C> | Ref<Fallback>\n\n/**\n * The `asChild` prop every polymorphic component accepts alongside `component` — see\n * `createPolymorphicComponent` below for how it's implemented once for all of them.\n */\nexport interface AsChildProps {\n  /**\n   * Render the single child element in place of this component's own element, with this\n   * component's classes, props and ref merged onto it: `<Button asChild><Link href=\"/login\">Log\n   * in</Link></Button>`. The alternative to `component` for React Server Components — an element\n   * can be passed from the server to this package's client components, a component reference\n   * (`component={Link}`) can't.\n   */\n  asChild?: boolean\n}\n\n/**\n * Props for a polymorphic component: `OwnProps` (which must declare `component?: C`) plus\n * whatever props `C` itself accepts, minus any name already claimed by `OwnProps` so the two\n * don't conflict. Lets consumers swap `component` for e.g. a framework's `Image` and get full\n * type-checking/autocomplete for that component's own props at the call site.\n */\nexport type PolymorphicComponentProps<C extends ElementType, OwnProps extends object> = OwnProps &\n  AsChildProps &\n  Omit<ComponentPropsWithoutRef<C>, keyof OwnProps | keyof AsChildProps>\n\n/**\n * Wraps a polymorphic component's render function in `forwardRef` and stamps `displayName` — the\n * two-step wiring every polymorphic component in this library repeats identically. `T` is the\n * fully generic component type (e.g. `ButtonComponent`) that `forwardRef`'s own return type can't\n * express, since `forwardRef` only accepts a non-generic render function — the caller still casts\n * the render function to a concrete `Element`-typed instance before passing it in here.\n *\n * Also implements `asChild` for every polymorphic component at once (#23): the render function\n * gets a `Slot` as its `component` and the child element's own children, so it computes its\n * classes, props and ref as it would for `component` — the `Slot` then clones the caller's child\n * element with all of that merged on (see `./slot`). No render function needs to know `asChild`\n * exists. One that treats elements differently (`disabled` on a `<button>` versus an `<a>`) asks\n * `resolveElementKind(Component)`, which answers for a tag and for a `Slot` alike. It has to ask\n * while it renders: the kind of a component element is read from the element then, not kept on\n * its `Slot`.\n */\nexport function createPolymorphicComponent<T>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  render: ForwardRefRenderFunction<Element, any>,\n  displayName: string\n): T {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const Component = forwardRef<Element, any>(({ asChild, ...props }, ref) => {\n    // The `asChild` element of a component above, for when that component hands its `Slot` on as\n    // this one's `component` (`ListItem` and `NavLink` render a `Link` that way).\n    const inherited = useSlotElement()\n    const child = asChild ? getSlotChild(props.children, displayName) : null\n    if (!child) {\n      return isSlot(props.component)\n        ? withSlottedElement(inherited, () => render(props, ref))\n        : render(props, ref)\n    }\n\n    devWarning(\n      props.component !== undefined,\n      `${displayName}: both \\`asChild\\` and \\`component\\` were passed; \\`asChild\\` wins and ` +\n        `\\`component\\` is ignored.`\n    )\n\n    // The render function reads the child's kind off the `Slot` while it runs (see\n    // `withSlottedElement`).\n    return createElement(\n      SlotProvider,\n      { value: child },\n      withSlottedElement(child, () =>\n        render(\n          {\n            ...props,\n            component: getSlot(child),\n            children: (child.props as PropsWithChildren).children\n          },\n          ref\n        )\n      )\n    )\n  }) as unknown as T & { displayName?: string }\n  Component.displayName = displayName\n  return Component\n}\n\ntype PropsWithChildren = { children?: unknown }\n"],"mappings":"A,6HA0EA,SAAgBK,EAEd,EACA,EACG,CAEH,IAAMC,EAAYC,GAA0B,CAAE,UAAS,GAAGC,GAAS,IAAQ,CAGzE,IAAMC,EAAYP,EAAe,EAC3BQ,EAAQC,EAAUC,EAAaJ,EAAM,SAAUK,CAAW,EAAI,KAepE,OAdKH,GAMLV,EACEQ,EAAM,YAAc,IAAA,GACpB,GAAGK,EAAY,iGAEjB,EAIOC,EACLX,EACA,CAAE,MAAOO,CAAM,EACfN,EAAmBM,MACjBK,EACE,CACE,GAAGP,EACH,UAAWQ,EAAQN,CAAK,EACxB,SAAWA,EAAM,MAA4B,QAC/C,EACAO,CACF,CACF,CACF,GA1BShB,EAAOO,EAAM,SAAS,EACzBJ,EAAmBK,MAAiBM,EAAOP,EAAOS,CAAG,CAAC,EACtDF,EAAOP,EAAOS,CAAG,CAyBzB,CAAC,EAED,MADA,GAAU,YAAcJ,EACjBP,CACT,C"}

package/dist/chunks/popover-CrAJTevL.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{i as e,o as t}from"./slot-DagH0Gxq.js";import{t as n}from"./useForkedRef-WoqMqsWE.js";import{n as r}from"./overlayStack-BXtTGCRm.js";import{t as i}from"./useHydrated-Dud4JEwp.js";import{t as a}from"./useTransitionState-WEw9C0yn.js";import{a as o,i as s,n as c,o as l,s as u}from"./overlayPlacement-D2vfhhg3.js";import{t as d}from"./useOpenStateProps-CdSO1nmI.js";import{t as f}from"./useOverlayMaxHeight-5UnurH0W.js";import{t as p}from"./Portal-BTDylxAi.js";import{n as m,t as h}from"./insideEvents-CWcNrMu7.js";import g,{forwardRef as _,useEffect as v,useId as y,useRef as b}from"react";import x from"classnames";import{mergeProps as S,useDialog as C,useOverlayPosition as w,useOverlayTrigger as T}from"react-aria";import{useOverlayTriggerState as E}from"react-stately";const D=({arrowProps:e,content:t,overlayRef:r,overlayTriggerProps:i,title:a,...s})=>{let c=b(null),l=n(r,c),{dialogProps:u,titleProps:d}=C({"aria-label":s[`aria-label`],"aria-labelledby":s[`aria-labelledby`]},c);return/* @__PURE__ */ g.createElement(`div`,{...S(i,u,s),ref:l},/* @__PURE__ */ g.createElement(`div`,{className:`popover-arrow`,...e,style:o(e)}),a&&/* @__PURE__ */ g.createElement(`div`,{className:`popover-header`,...d},a),/* @__PURE__ */ g.createElement(`div`,{className:`popover-body`},t))},O=_(function({"aria-labelledby":o,children:_,className:C,content:O,defaultVisible:k,placement:A=`right`,offset:j=[0,8],onHide:M,onShow:N,onVisibleChange:P,style:F,title:I,visible:L,...R},z){let B=b(null),V=b(null),H=b(null),U=n(z,H),W=e(_,`Popover`),G=y(),K=W&&!I&&R[`aria-label`]==null&&o==null?W.props.id??`${G}-trigger`:void 0,q=E(d({defaultVisible:k,onVisibleChange:P,visible:L},`Popover`)),{triggerProps:{onPress:ee,...J},overlayProps:Y}=T({type:`dialog`},q,V),X=u({close:q.close,isOpen:q.isOpen,onHide:M,onShow:N,triggerRef:V}),Z=L!==void 0&&!P;v(()=>{if(q.isOpen&&!Z)return r({nodes:()=>[H.current,V.current],onEscape:()=>q.close()})},[q.isOpen,q.close,Z]),v(()=>{if(!q.isOpen)return;let e=(e,t)=>!!t&&e.includes(t),t=t=>{let n=t.composedPath();e(n,V.current)||e(n,H.current)||m(t,H)||q.close()},n=window.setTimeout(()=>{window.addEventListener(`pointerdown`,t)});return()=>{window.clearTimeout(n),window.removeEventListener(`pointerdown`,t)}},[q.isOpen,q.close]);let{overlayProps:Q,arrowProps:$,placement:te}=w({targetRef:V,overlayRef:H,placement:s(A),offset:j[1],crossOffset:j[0],arrowSize:8,arrowRef:B,isOpen:q.isOpen,onClose:null});f(H,q.isOpen,`release`);let ne={...F,position:Q.style?.position,top:Q.style?.top,left:Q.style?.left},re=c(A,te),{isMounted:ie,phase:ae}=a({in:q.isOpen&&X!==null,mountOnEnter:!0,nodeRef:H,onExited:()=>{let e=V.current;if(!e||!document.contains(e))return;let t=document.activeElement,n=!t||t===document.body,r=!!t&&!!H.current?.contains(t);(n||r)&&e.focus()},unmountOnExit:!0}),oe=i();return/* @__PURE__ */ g.createElement(g.Fragment,null,W?t(W,{...K&&{id:K},onClick:()=>q.toggle()},V,oe?J:{...J,"aria-controls":void 0}):_,/* @__PURE__ */ g.createElement(p,{container:X},ie&&/* @__PURE__ */ g.createElement(D,{className:x(`popover cx-popover-auto`,l(ae),C),"data-cx-placement":re,style:ne,overlayTriggerProps:Y,overlayRef:U,arrowProps:$,title:I,content:O,"aria-labelledby":o??K,...S(R,h(H))})))});O.displayName=`Popover`;export{O as t};
+//# sourceMappingURL=popover-CrAJTevL.js.map

package/dist/chunks/popover-CrAJTevL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-CrAJTevL.js","names":["getTriggerChild","renderSlotted","useForkedRef","pushOverlay","useHydrated","useTransitionState","getOverlayArrowStyle","toAriaPlacement","resolveDataPlacement","getOverlayTransitionClass","useFloatingOverlay","useOpenStateProps","useOverlayMaxHeight","Portal","isEventInside","insideEventProps","React","classNames","PopoverPanel","rest","panelRef","useRef","forkedRef","overlayRef","useDialog","mergeProps","overlayTriggerProps","dialogProps","arrowProps","title","titleProps","content","Popover","forwardRef","ariaLabelledBy","offsetProp","arrowRef","triggerRef","floatingRef","forkedFloatingRef","ref","triggerElement","children","generatedId","useId","triggerId","state","useOverlayTriggerState","_onPress","triggerProps","useOverlayTrigger","portalContainer","isHeld","visible","onVisibleChange","useEffect","isInside","node","path","handleDismiss","event","id","resolvedPlacement","useOverlayPosition","placement","floatingStyle","style","overlayProps","placementAttr","trigger","active","focusIsLoose","focusIsInPanel","hydrated","isMounted","phase","className"],"sources":["../../src/components/popover/Popover.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useEffect,\n  useId,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps, useDialog, useOverlayPosition, useOverlayTrigger } from 'react-aria'\nimport { useOverlayTriggerState } from 'react-stately'\n\nimport {\n  getOverlayArrowStyle,\n  getOverlayTransitionClass,\n  useFloatingOverlay,\n  useForkedRef,\n  useOpenStateProps,\n  useOverlayMaxHeight,\n  useTransitionState\n} from '../../hooks'\nimport { insideEventProps, isEventInside } from '../../utils/insideEvents'\nimport { Placement, resolveDataPlacement, toAriaPlacement } from '../../utils/overlayPlacement'\nimport { pushOverlay } from '../../utils/overlayStack'\nimport { useHydrated } from '../../hooks/useHydrated'\nimport { Portal } from '../portal/Portal'\nimport { getTriggerChild, renderSlotted } from '../../utils/slot'\n\ninterface PopoverPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {\n  arrowProps: HTMLAttributes<HTMLDivElement>\n  content: ReactNode | string\n  overlayRef: Ref<HTMLDivElement>\n  overlayTriggerProps: HTMLAttributes<HTMLDivElement>\n  title?: ReactNode | string\n}\n\n// A distinct component (rather than inline JSX in `Popover`) so `useDialog`'s own mount-focus\n// effect — which only fires on this component's mount, not on `overlayRef.current` merely\n// becoming non-null — actually runs each time the popover opens. `Popover` unmounts this once\n// it has exited and mounts it again on every open, giving `useDialog` a fresh mount each time.\nconst PopoverPanel = ({\n  arrowProps,\n  content,\n  overlayRef,\n  overlayTriggerProps,\n  title,\n  ...rest\n}: PopoverPanelProps) => {\n  // `useDialog` focuses the panel through a ref object; the caller's ref is forked onto the same\n  // node.\n  const panelRef = useRef<HTMLDivElement>(null)\n  const forkedRef = useForkedRef(overlayRef, panelRef)\n  // The caller's name goes to `useDialog`, which then labels the panel by its title only when the\n  // caller gave none: left in `rest`, an `aria-label` sat beside the title's `aria-labelledby`,\n  // which outranks it.\n  const { dialogProps, titleProps } = useDialog(\n    { 'aria-label': rest['aria-label'], 'aria-labelledby': rest['aria-labelledby'] },\n    panelRef\n  )\n\n  return (\n    <div {...mergeProps(overlayTriggerProps, dialogProps, rest)} ref={forkedRef}>\n      <div className=\"popover-arrow\" {...arrowProps} style={getOverlayArrowStyle(arrowProps)}></div>\n      {title && (\n        <div className=\"popover-header\" {...titleProps}>\n          {title}\n        </div>\n      )}\n      <div className=\"popover-body\">{content}</div>\n    </div>\n  )\n}\n\n// Every attribute besides the component's own props goes to the panel, the `.popover` element:\n// `className`, `style`, `id`, `data-*`, ARIA attributes and event handlers. So does the ref.\nexport interface PopoverProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children' | 'content' | 'title'\n> {\n  /**\n   * The trigger: a single element, which opens the popover on click.\n   */\n  children: ReactElement\n  /**\n   * Content node for your component.\n   */\n  content: ReactNode | string\n  /**\n   * Whether the popover is open when it first renders. Use it instead of `visible` when nothing\n   * outside needs to control the popover.\n   */\n  defaultVisible?: boolean\n  /**\n   * Offset of the popover relative to its target, as `[crossAxis, mainAxis]`.\n   */\n  offset?: [number, number]\n  /**\n   * Callback fired when the popover hides.\n   */\n  onHide?: () => void\n  /**\n   * Callback fired when the popover shows.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired when the popover asks to show or hide: a click on the trigger, a click\n   * outside, the Escape key, or the closing of the dialog it is in. Receives the state it asks\n   * for. With `visible` set, the popover changes only when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Title node for your component.\n   */\n  title?: ReactNode | string\n  /**\n   * Describes the preferred placement of your component. Chassis will flip it to keep it in\n   * view.\n   */\n  placement?: Placement\n  /**\n   * Whether the popover is open. Setting it makes the popover controlled: it shows and hides\n   * only when this changes, so pair it with `onVisibleChange`. Leave it unset, or use\n   * `defaultVisible`, for a popover that opens and closes itself.\n   */\n  visible?: boolean\n}\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover(\n  {\n    'aria-labelledby': ariaLabelledBy,\n    children,\n    className,\n    content,\n    defaultVisible,\n    placement = 'right',\n    offset: offsetProp = [0, 8],\n    onHide,\n    onShow,\n    onVisibleChange,\n    style,\n    title,\n    visible,\n    ...rest\n  },\n  ref\n) {\n  const arrowRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLElement | null>(null)\n  const floatingRef = useRef<HTMLDivElement>(null)\n  const forkedFloatingRef = useForkedRef(ref, floatingRef)\n\n  // The trigger is rendered as `asChild` renders a child (`renderSlotted`): the child's own\n  // `onClick` chains after this one, and `triggerRef` is forked with the ref the caller put on\n  // the child. `triggerProps` state the popover's condition (`aria-expanded`, `aria-controls`),\n  // so they win over the child's own.\n  const triggerElement = getTriggerChild(children, 'Popover')\n\n  // A popover is a dialog, which needs a name. With no `title` to label it and none given, it is\n  // named by its trigger, under the trigger's own id when it has one. `aria-labelledby` is kept\n  // out of `rest`: spread after this, a caller's `aria-labelledby={undefined}` wrote over it.\n  const generatedId = useId()\n  const triggerId =\n    triggerElement && !title && rest['aria-label'] == null && ariaLabelledBy == null\n      ? ((triggerElement.props.id as string | undefined) ?? `${generatedId}-trigger`)\n      : undefined\n\n  const state = useOverlayTriggerState(\n    useOpenStateProps({ defaultVisible, onVisibleChange, visible }, 'Popover')\n  )\n  const {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    triggerProps: { onPress: _onPress, ...triggerProps },\n    overlayProps: overlayTriggerProps\n  } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef)\n\n  const portalContainer = useFloatingOverlay({\n    close: state.close,\n    isOpen: state.isOpen,\n    onHide,\n    onShow,\n    triggerRef\n  })\n\n  // A popover held open by `visible` with no `onVisibleChange` can't close on the key, and takes no\n  // place in the stack: on top of it, it prevented every Escape, so a dialog under it couldn't\n  // close either. `Tooltip` keeps such a tooltip out of react-aria's Escape handling the same way.\n  const isHeld = visible !== undefined && !onVisibleChange\n\n  // Escape should always close the popover, regardless of where focus currently is — a\n  // mouse-opened popover leaves focus on the trigger, not inside the panel. Through the stack of\n  // open overlays, so the key closes this popover only while nothing opened since is still open\n  // (a menu or another popover in its content), and never the dialog around it with it.\n  // `onExited` below already returns focus to the trigger once the exit transition finishes, so\n  // this doesn't need to do that itself.\n  useEffect(() => {\n    if (!state.isOpen || isHeld) return undefined\n    return pushOverlay({\n      nodes: () => [floatingRef.current, triggerRef.current],\n      onEscape: () => state.close()\n    })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen, state.close, isHeld])\n\n  // A press outside closes the popover. A press rather than a click, as `ContextMenu` reads it:\n  // an element its own click handler takes out of the document (a chip's remove button) is no\n  // longer inside anything by the time a click listener here would ask. Inside is the trigger,\n  // and anything React renders under the panel, wherever it is portaled (`insideEvents`): a\n  // popover or a menu opened from the content, a date picker's calendar.\n  // Deferred so a press whose own handler opens the popover doesn't close it again on its way\n  // up to `window`.\n  useEffect(() => {\n    if (!state.isOpen) return undefined\n\n    // By the event's path rather than its target: a trigger inside a shadow root is seen from\n    // `window` as the shadow host, which the trigger doesn't contain, so pressing the trigger\n    // closed the popover and its click opened it again.\n    const isInside = (path: EventTarget[], node: Element | null) => !!node && path.includes(node)\n\n    const handleDismiss = (event: PointerEvent) => {\n      const path = event.composedPath()\n      if (isInside(path, triggerRef.current)) return\n      if (isInside(path, floatingRef.current) || isEventInside(event, floatingRef)) return\n      state.close()\n    }\n\n    const id = window.setTimeout(() => {\n      window.addEventListener('pointerdown', handleDismiss)\n    })\n\n    return () => {\n      window.clearTimeout(id)\n      window.removeEventListener('pointerdown', handleDismiss)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen, state.close])\n\n  const {\n    overlayProps,\n    arrowProps,\n    placement: resolvedPlacement\n  } = useOverlayPosition({\n    targetRef: triggerRef,\n    overlayRef: floatingRef,\n    placement: toAriaPlacement(placement),\n    offset: offsetProp[1],\n    crossOffset: offsetProp[0],\n    arrowSize: 8,\n    arrowRef,\n    isOpen: state.isOpen,\n    // `useOverlayPosition` closes on any window scroll via a backward-compat `WeakMap` that\n    // `useOverlayTrigger` populates for `triggerRef.current` above. Passing `null` opts out so\n    // the popover repositions with its trigger instead of vanishing — matching\n    // `Autocomplete`/`Combobox`, neither of which is wired into that map.\n    onClose: null\n  })\n\n  // The hook writes the room it finds as an inline `max-height` on the panel itself; the panel is\n  // as tall as its content (`useOverlayMaxHeight`).\n  useOverlayMaxHeight(floatingRef, state.isOpen, 'release')\n\n  // The caller's `style` first: the position is the component's to set.\n  const floatingStyle: React.CSSProperties = {\n    ...style,\n    position: overlayProps.style?.position as React.CSSProperties['position'],\n    top: overlayProps.style?.top,\n    left: overlayProps.style?.left\n  }\n  const placementAttr = resolveDataPlacement(placement, resolvedPlacement)\n\n  // The panel mounts once its container is known (`useFloatingOverlay`), and only there.\n  const { isMounted, phase } = useTransitionState({\n    in: state.isOpen && portalContainer !== null,\n    mountOnEnter: true,\n    nodeRef: floatingRef,\n    onExited: () => {\n      const trigger = triggerRef.current\n      if (!trigger || !document.contains(trigger)) return\n      // Only reclaim focus when the popover still owns it, or when nothing does.\n      // `useDialog` moves focus into the panel on open, so the panel still holds it here\n      // for an Escape/inside close (`onExited` runs before the panel is taken out of the DOM,\n      // so this reads the pre-removal state); an outside click on plain page\n      // content instead leaves focus loose on `<body>`. Both are worth restoring. Any\n      // other active element means the user deliberately put focus there — dismissing by\n      // clicking another control, or the app closing the popover via `visible` while\n      // they were typing somewhere else — and this used to steal it straight back off\n      // them. Mirrors react-aria's own `shouldRestoreFocus` condition.\n      const active = document.activeElement\n      const focusIsLoose = !active || active === document.body\n      const focusIsInPanel = !!active && !!floatingRef.current?.contains(active)\n      if (!focusIsLoose && !focusIsInPanel) return\n      trigger.focus()\n    },\n    unmountOnExit: true\n  })\n\n  // The panel is portaled, so it exists only once hydration has finished: until then the trigger\n  // doesn't point `aria-controls` at it, or its HTML would refer to an id no element has.\n  const hydrated = useHydrated()\n\n  return (\n    <>\n      {triggerElement\n        ? renderSlotted(\n            triggerElement,\n            { ...(triggerId && { id: triggerId }), onClick: () => state.toggle() },\n            triggerRef,\n            hydrated ? triggerProps : { ...triggerProps, 'aria-controls': undefined }\n          )\n        : children}\n      <Portal container={portalContainer}>\n        {isMounted && (\n          <PopoverPanel\n            className={classNames(\n              'popover cx-popover-auto',\n              getOverlayTransitionClass(phase),\n              className\n            )}\n            data-cx-placement={placementAttr}\n            style={floatingStyle}\n            overlayTriggerProps={overlayTriggerProps}\n            overlayRef={forkedFloatingRef}\n            arrowProps={arrowProps}\n            title={title}\n            content={content}\n            aria-labelledby={ariaLabelledBy ?? triggerId}\n            {...mergeProps(rest, insideEventProps(floatingRef))}\n          />\n        )}\n      </Portal>\n    </>\n  )\n})\n\nPopover.displayName = 'Popover'\n"],"mappings":"A,2yBA0CA,MAAMkB,GAAgB,CACpB,aACA,UACA,aACA,sBACA,QACA,GAAGC,KACoB,CAGvB,IAAMC,EAAWC,EAAuB,IAAI,EACtCC,EAAYpB,EAAaqB,EAAYH,CAAQ,EAI7C,CAAE,cAAa,cAAeI,EAClC,CAAE,aAAcL,EAAK,cAAe,kBAAmBA,EAAK,kBAAmB,EAC/EC,CACF,EAEA,MACE,kBAAA,cAAC,MAAD,CAAK,GAAIK,EAAWC,EAAqBC,EAAaR,CAAI,EAAG,IAAKG,CAQ7D,EAPH,kBAAA,cAAC,MAAD,CAAK,UAAU,gBAAgB,GAAIM,EAAY,MAAOtB,EAAqBsB,CAAU,CAAQ,CAAA,EAC5FC,GACC,kBAAA,cAAC,MAAD,CAAK,UAAU,iBAAiB,GAAIC,CAE/B,EADFD,CACE,EAEP,kBAAA,cAAC,MAAD,CAAK,UAAU,cAA6B,EAAbE,CAAa,CACzC,CAET,EAwDaC,EAAUC,EAAyC,SAC9D,CACE,kBAAmBC,EACnB,WACA,YACA,UACA,iBACA,YAAY,QACZ,OAAQC,EAAa,CAAC,EAAG,CAAC,EAC1B,SACA,SACA,kBACA,QACA,QACA,UACA,GAAGhB,GAEL,EACA,CACA,IAAMiB,EAAWf,EAAuB,IAAI,EACtCgB,EAAahB,EAA2B,IAAI,EAC5CiB,EAAcjB,EAAuB,IAAI,EACzCkB,EAAoBrC,EAAasC,EAAKF,CAAW,EAMjDG,EAAiBzC,EAAgB0C,EAAU,SAAS,EAKpDC,EAAcC,EAAM,EACpBC,EACJJ,GAAkB,CAACZ,GAASV,EAAK,eAAiB,MAAQe,GAAkB,KACtEO,EAAe,MAAM,IAA6B,GAAGE,EAAY,UACnE,IAAA,GAEAG,EAAQC,EACZpC,EAAkB,CAAE,iBAAgB,kBAAiB,SAAQ,EAAG,SAAS,CAC3E,EACM,CAEJ,aAAc,CAAE,QAASqC,GAAU,GAAGC,GACtC,aAAcvB,GACZwB,EAAkB,CAAE,KAAM,QAAS,EAAGJ,EAAOT,CAAU,EAErDc,EAAkBzC,EAAmB,CACzC,MAAOoC,EAAM,MACb,OAAQA,EAAM,OACd,SACA,SACA,YACF,CAAC,EAKKM,EAASC,IAAY,IAAA,IAAa,CAACC,EAQzCC,MAAgB,CACd,GAAKT,EAAM,QAAU,GACrB,OAAO3C,EAAY,CACjB,UAAa,CAACmC,EAAY,QAASD,EAAW,OAAO,EACrD,aAAgBS,EAAM,MAAM,CAC9B,CAAC,CAEH,EAAG,CAACA,EAAM,OAAQA,EAAM,MAAOM,CAAM,CAAC,EAStCG,MAAgB,CACd,GAAI,CAACT,EAAM,OAAQ,OAKnB,IAAMU,GAAY,EAAqB,IAAyB,CAAC,CAACC,GAAQC,EAAK,SAASD,CAAI,EAEtFE,EAAiB,GAAwB,CAC7C,IAAMD,EAAOE,EAAM,aAAa,EAC5BJ,EAASE,EAAMrB,EAAW,OAAO,GACjCmB,EAASE,EAAMpB,EAAY,OAAO,GAAKxB,EAAc8C,EAAOtB,CAAW,GAC3EQ,EAAM,MAAM,CACd,EAEMe,EAAK,OAAO,eAAiB,CACjC,OAAO,iBAAiB,cAAeF,CAAa,CACtD,CAAC,EAED,UAAa,CACX,OAAO,aAAaE,CAAE,EACtB,OAAO,oBAAoB,cAAeF,CAAa,CACzD,CAEF,EAAG,CAACb,EAAM,OAAQA,EAAM,KAAK,CAAC,EAE9B,GAAM,CACJ,eACA,aACA,UAAWgB,IACTC,EAAmB,CACrB,UAAW1B,EACX,WAAYC,EACZ,UAAW/B,EAAgByD,CAAS,EACpC,OAAQ7B,EAAW,GACnB,YAAaA,EAAW,GACxB,UAAW,EACX,WACA,OAAQW,EAAM,OAKd,QAAS,IACX,CAAC,EAIDlC,EAAoB0B,EAAaQ,EAAM,OAAQ,SAAS,EAGxD,IAAMmB,GAAqC,CACzC,GAAGC,EACH,SAAUC,EAAa,OAAO,SAC9B,IAAKA,EAAa,OAAO,IACzB,KAAMA,EAAa,OAAO,IAC5B,EACMC,GAAgB5D,EAAqBwD,EAAWF,EAAiB,EAGjE,CAAE,aAAW,UAAUzD,EAAmB,CAC9C,GAAIyC,EAAM,QAAUK,IAAoB,KACxC,aAAc,GACd,QAASb,EACT,aAAgB,CACd,IAAM+B,EAAUhC,EAAW,QAC3B,GAAI,CAACgC,GAAW,CAAC,SAAS,SAASA,CAAO,EAAG,OAU7C,IAAMC,EAAS,SAAS,cAClBC,EAAe,CAACD,GAAUA,IAAW,SAAS,KAC9CE,EAAiB,CAAC,CAACF,GAAU,CAAC,CAAChC,EAAY,SAAS,SAASgC,CAAM,GACpEC,GAAiBC,IACtBH,EAAQ,MAAM,CAChB,EACA,cAAe,EACjB,CAAC,EAIKI,GAAWrE,EAAY,EAE7B,MACE,kBAAA,cAAAY,EAAA,SAAA,KACGyB,EACGxC,EACEwC,EACA,CAAE,GAAII,GAAa,CAAE,GAAIA,CAAU,EAAI,YAAeC,EAAM,OAAO,CAAE,EACrET,EACAoC,GAAWxB,EAAe,CAAE,GAAGA,EAAc,gBAAiB,IAAA,EAAU,CAC1E,EACAP,EACJ,kBAAA,cAAC7B,EAAD,CAAQ,UAAWsC,CAmBX,EAlBLuB,IACC,kBAAA,cAACxD,EAAD,CACE,UAAWD,EACT,0BACAR,EAA0BkE,EAAK,EAC/BC,CACF,EACA,oBAAmBR,GACnB,MAAOH,GACc,sBACrB,WAAY1B,EACA,aACL,QACE,UACT,kBAAiBL,GAAkBW,EACnC,GAAIpB,EAAWN,EAAMJ,EAAiBuB,CAAW,CAAC,CACnD,CAAA,CAEG,CACR,CAEN,CAAC,EAED,EAAQ,YAAc,U"}

package/dist/chunks/{progress-CiSJDNwx.js → progress-CAqSu3jc.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{t as e}from"./polymorphic-CZIFszAy.js";import{t}from"./colorClassNames-YzGWu6qm.js";import n,{useId as r}from"react";import i from"classnames";function a({children:e,animated:r,className:a,color:o,component:s,indeterminate:c,striped:l,style:u,value:d=0,...f},p){let m=s??`div`,h=Math.min(100,Math.max(0,d)),g=i(`progress-bar`,o&&[t[o],`fg-contrast`],{striped:l,animated:r,indeterminate:c},a);return/* @__PURE__ */ n.createElement(m,{...f,className:g,style:c?u:{width:`${h}%`,...u},ref:p},/* @__PURE__ */ n.createElement(`span`,{className:`mx-2xs`},e))}const o=e(a,`ProgressBar`);function s({"aria-label":e,"aria-labelledby":t,animated:a,children:s,className:c,color:l,component:u,height:d,indeterminate:f,inlineValue:p,label:m,showValue:h,striped:g,style:_,value:v=0,...y},b){let x=u??`div`,S=i(`progress`,c),C=Math.min(100,Math.max(0,v)),w=s===void 0?p&&!f?`${C}%`:void 0:s,T=!!(m||h),E=r(),D=m!=null&&typeof m!=`string`,O={..._};d!==void 0&&(O[`--cx-height`]=`${d}px`);let k=/* @__PURE__ */ n.createElement(x,{...y,className:S,role:`progressbar`,"aria-valuenow":f?void 0:C,"aria-valuemin":f?void 0:0,"aria-valuemax":f?void 0:100,"aria-label":e??(typeof m==`string`?m:void 0),"aria-labelledby":t??(!e&&D?E:void 0),style:O,ref:b},/* @__PURE__ */ n.createElement(o,{animated:a,color:l,indeterminate:f,striped:g,value:C},w));return T?/* @__PURE__ */ n.createElement(`div`,{className:`d-flex flex-column gap-xs`},/* @__PURE__ */ n.createElement(`div`,{className:i(`d-flex`,m?`justify-content-between`:`justify-content-end`)},m?/* @__PURE__ */ n.createElement(`span`,{className:`font-strong`,id:D?E:void 0},m):null,h?/* @__PURE__ */ n.createElement(`span`,{className:`font-strong`},f?`\xA0`:`${C}%`):null),k):k}const c=e(s,`Progress`);export{o as n,c as t};
-//# sourceMappingURL=progress-CiSJDNwx.js.map
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./polymorphic-mAKwlLiW.js";import{t}from"./colorClassNames-YzGWu6qm.js";import n,{useId as r}from"react";import i from"classnames";function a({children:e,animated:r,className:a,color:o,component:s,indeterminate:c,striped:l,style:u,value:d=0,...f},p){let m=s??`div`,h=Math.min(100,Math.max(0,d)),g=i(`progress-bar`,o&&[t[o],`fg-contrast`],{striped:l,animated:r,indeterminate:c},a);return/* @__PURE__ */ n.createElement(m,{...f,className:g,style:c?u:{width:`${h}%`,...u},ref:p},/* @__PURE__ */ n.createElement(`span`,{className:`mx-2xs`},e))}const o=e(a,`ProgressBar`);function s({"aria-label":e,"aria-labelledby":t,animated:a,children:s,className:c,color:l,component:u,height:d,indeterminate:f,inlineValue:p,label:m,showValue:h,striped:g,style:_,value:v=0,...y},b){let x=u??`div`,S=i(`progress`,c),C=Math.min(100,Math.max(0,v)),w=s===void 0?p&&!f?`${C}%`:void 0:s,T=!!(m||h),E=r(),D=m!=null&&typeof m!=`string`,O={..._};d!==void 0&&(O[`--cx-height`]=`${d}px`);let k=/* @__PURE__ */ n.createElement(x,{...y,className:S,role:`progressbar`,"aria-valuenow":f?void 0:C,"aria-valuemin":f?void 0:0,"aria-valuemax":f?void 0:100,"aria-label":e??(typeof m==`string`?m:void 0),"aria-labelledby":t??(!e&&D?E:void 0),style:O,ref:b},/* @__PURE__ */ n.createElement(o,{animated:a,color:l,indeterminate:f,striped:g,value:C},w));return T?/* @__PURE__ */ n.createElement(`div`,{className:`d-flex flex-column gap-xs`},/* @__PURE__ */ n.createElement(`div`,{className:i(`d-flex`,m?`justify-content-between`:`justify-content-end`)},m?/* @__PURE__ */ n.createElement(`span`,{className:`font-strong`,id:D?E:void 0},m):null,h?/* @__PURE__ */ n.createElement(`span`,{className:`font-strong`},f?`\xA0`:`${C}%`):null),k):k}const c=e(s,`Progress`);export{o as n,c as t};
+//# sourceMappingURL=progress-CAqSu3jc.js.map

package/dist/chunks/{progress-CiSJDNwx.js.map → progress-CAqSu3jc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-CiSJDNwx.js","names":["createPolymorphicComponent","React","classNames","ProgressBarRender","rest","Component","component","clampedValue","value","_className","color","BG_COLOR_CLASS_NAMES","className","indeterminate","style","children","ProgressBar","ProgressRender","ariaLabel","ariaLabelledBy","barChildren","inlineValue","hasCaption","label","showValue","labelId","useId","isNodeLabel","_style","height","progressElement","Progress"],"sources":["../../src/components/progress/ProgressBar.tsx","../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport { BG_COLOR_CLASS_NAMES } from '../../utils/colorClassNames'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\nimport './Progress.scss'\n\ntype ProgressBarOwnProps<C extends ElementType> = {\n  /**\n   * Use to animate the stripes right to left via CSS3 animations.\n   */\n  animated?: 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   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Shows that work is under way without saying how much: the bar fills the track and sweeps\n   * across it, or shows its stripes when `striped` is set. `value` is ignored.\n   */\n  indeterminate?: boolean\n  /**\n   * Adds a diagonal stripe pattern over the bar's background.\n   */\n  striped?: boolean\n  /**\n   * The percent to progress the ProgressBar.\n   */\n  value?: number\n}\n\nexport type ProgressBarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ProgressBarOwnProps<C>\n>\n\ntype ProgressBarComponent = (<C extends ElementType = 'div'>(\n  props: ProgressBarProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressBarRender<C extends ElementType = 'div'>(\n  {\n    children,\n    animated,\n    className,\n    color,\n    component,\n    indeterminate,\n    striped,\n    style,\n    value = 0,\n    ...rest\n  }: ProgressBarProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const clampedValue = Math.min(100, Math.max(0, value))\n  const _className = classNames(\n    'progress-bar',\n    color && [BG_COLOR_CLASS_NAMES[color], 'fg-contrast'],\n    {\n      striped,\n      animated,\n      indeterminate\n    },\n    className\n  )\n\n  return (\n    <Component\n      {...rest}\n      className={_className}\n      // An indeterminate bar takes its width from `Progress.scss`.\n      style={indeterminate ? style : { width: `${clampedValue}%`, ...style }}\n      ref={ref}\n    >\n      <span className=\"mx-2xs\">{children}</span>\n    </Component>\n  )\n}\n\nexport const ProgressBar = createPolymorphicComponent<ProgressBarComponent>(\n  ProgressBarRender as ForwardRefRenderFunction<Element, ProgressBarProps<ElementType>>,\n  'ProgressBar'\n)\n","import React, {\n  CSSProperties,\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  useId\n} from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ProgressBar } from './ProgressBar'\n\ntype ProgressStyle = CSSProperties & {\n  '--cx-height'?: string\n}\n\ntype ProgressOwnProps<C extends ElementType> = {\n  /**\n   * Use to animate the stripes right to left via CSS3 animations.\n   */\n  animated?: 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   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Sets the height of the component, via the `--cx-height` custom property. If you set that\n   * value the inner bar (and the striped pattern's tile size) automatically resizes accordingly.\n   */\n  height?: number\n  /**\n   * Shows that work is under way without saying how much, for a request with no progress events.\n   * The bar sweeps across the track, or fills it with stripes when `striped` is set, and the\n   * `aria-valuenow`, `aria-valuemin` and `aria-valuemax` attributes are left out. `value` and\n   * `inlineValue` are ignored, and `showValue` keeps its place in the caption row empty.\n   */\n  indeterminate?: boolean\n  /**\n   * Shows the current value as text inside the bar, independently of `showValue` — combine both\n   * to get a `label` + `showValue` caption above the bar alongside an `inlineValue` reading\n   * inside it.\n   */\n  inlineValue?: boolean\n  /**\n   * A text label describing the progress. Rendered in a caption row above the bar. Also used as\n   * the default accessible name when no `aria-label`/`aria-labelledby` is supplied.\n   */\n  label?: ReactNode\n  /**\n   * Shows the current value as text in the caption row above the bar, alongside `label` when\n   * both are set, or alone otherwise. Use `inlineValue` to show it inside the bar instead.\n   */\n  showValue?: boolean\n  /**\n   * Adds a diagonal stripe pattern over the bar's background.\n   */\n  striped?: boolean\n  /**\n   * The percent to progress the ProgressBar (out of 100).\n   */\n  value?: number\n}\n\nexport type ProgressProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ProgressOwnProps<C>\n>\n\ntype ProgressComponent = (<C extends ElementType = 'div'>(\n  props: ProgressProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressRender<C extends ElementType = 'div'>(\n  {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    animated,\n    children,\n    className,\n    color,\n    component,\n    height,\n    indeterminate,\n    inlineValue,\n    label,\n    showValue,\n    striped,\n    style,\n    value = 0,\n    ...rest\n  }: ProgressProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('progress', className)\n  const clampedValue = Math.min(100, Math.max(0, value))\n\n  const barChildren =\n    children !== undefined\n      ? children\n      : inlineValue && !indeterminate\n        ? `${clampedValue}%`\n        : undefined\n  const hasCaption = Boolean(label || showValue)\n\n  const labelId = useId()\n  const isNodeLabel = label != null && typeof label !== 'string'\n\n  const _style: ProgressStyle = { ...style }\n  if (height !== undefined) _style['--cx-height'] = `${height}px`\n\n  const progressElement = (\n    <Component\n      {...rest}\n      className={_className}\n      role=\"progressbar\"\n      aria-valuenow={indeterminate ? undefined : clampedValue}\n      aria-valuemin={indeterminate ? undefined : 0}\n      aria-valuemax={indeterminate ? undefined : 100}\n      aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}\n      // The caller's own wins: written after the spread, the label's id replaced it, and with no\n      // node label it was `undefined` that did.\n      aria-labelledby={ariaLabelledBy ?? (!ariaLabel && isNodeLabel ? labelId : undefined)}\n      style={_style}\n      ref={ref}\n    >\n      <ProgressBar\n        animated={animated}\n        color={color}\n        indeterminate={indeterminate}\n        striped={striped}\n        value={clampedValue}\n      >\n        {barChildren}\n      </ProgressBar>\n    </Component>\n  )\n\n  if (!hasCaption) return progressElement\n\n  return (\n    <div className=\"d-flex flex-column gap-xs\">\n      <div\n        className={classNames('d-flex', label ? 'justify-content-between' : 'justify-content-end')}\n      >\n        {label ? (\n          <span className=\"font-strong\" id={isNodeLabel ? labelId : undefined}>\n            {label}\n          </span>\n        ) : null}\n        {/* An indeterminate bar has no value to show. The row keeps its height, so nothing moves\n            when the value arrives. */}\n        {showValue ? (\n          <span className=\"font-strong\">{indeterminate ? '\\u00A0' : `${clampedValue}%`}</span>\n        ) : null}\n      </div>\n      {progressElement}\n    </div>\n  )\n}\n\nexport const Progress = createPolymorphicComponent<ProgressComponent>(\n  ProgressRender as ForwardRefRenderFunction<Element, ProgressProps<ElementType>>,\n  'Progress'\n)\n"],"mappings":"A,uLAsDA,SAASG,EACP,CACE,WACA,WACA,YACA,QACA,YACA,gBACA,UACA,QACA,QAAQ,EACR,GAAGC,GAEL,EACA,CACA,IAAMC,EAAYC,GAAa,MACzBC,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGC,CAAK,CAAC,EAC/CC,EAAaP,EACjB,eACAQ,GAAS,CAACC,EAAqBD,GAAQ,aAAa,EACpD,CACE,UACA,WACA,eACF,EACAE,CACF,EAEA,MACE,kBAAA,cAACP,EAAD,CACE,GAAID,EACJ,UAAWK,EAEX,MAAOI,EAAgBC,EAAQ,CAAE,MAAO,GAAGP,EAAa,GAAI,GAAGO,CAAM,EAChE,KAGI,EADT,kBAAA,cAAC,OAAD,CAAM,UAAU,QAAyB,EAAfC,CAAe,CAChC,CAEf,CAEA,MAAaC,EAAchB,EACzBG,EACA,aACF,ECZA,SAASc,EACP,CACE,aAAcC,EACd,kBAAmBC,EACnB,WACA,WACA,YACA,QACA,YACA,SACA,gBACA,cACA,QACA,YACA,UACA,QACA,QAAQ,EACR,GAAGf,GAEL,EACA,CACA,IAAMC,EAAYC,GAAa,MACzBG,EAAaP,EAAW,WAAYU,CAAS,EAC7CL,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGC,CAAK,CAAC,EAE/CY,EACJL,IAAa,IAAA,GAETM,GAAe,CAACR,EACd,GAAGN,EAAa,GAChB,IAAA,GAHFQ,EAIAO,EAAa,GAAQC,GAASC,GAE9BC,EAAUC,EAAM,EAChBC,EAAcJ,GAAS,MAAQ,OAAOA,GAAU,SAEhDK,EAAwB,CAAE,GAAGd,CAAM,EACrCe,IAAW,IAAA,KAAW,EAAO,eAAiB,GAAGA,EAAO,KAE5D,IAAMC,EACJ,kBAAA,cAACzB,EAAD,CACE,GAAID,EACJ,UAAWK,EACX,KAAK,cACL,gBAAeI,EAAgB,IAAA,GAAYN,EAC3C,gBAAeM,EAAgB,IAAA,GAAY,EAC3C,gBAAeA,EAAgB,IAAA,GAAY,IAC3C,aAAYK,IAAc,OAAOK,GAAU,SAAWA,EAAQ,IAAA,IAG9D,kBAAiBJ,IAAmB,CAACD,GAAaS,EAAcF,EAAU,IAAA,IAC1E,MAAOG,EACF,KAWI,EATT,kBAAA,cAACZ,EAAD,CACY,WACH,QACQ,gBACN,UACT,MAAOT,CAGI,EADVa,CACU,CACJ,EAKb,OAFKE,EAGH,kBAAA,cAAC,MAAD,CAAK,UAAU,2BAgBV,EAfH,kBAAA,cAAC,MAAD,CACE,UAAWpB,EAAW,SAAUqB,EAAQ,0BAA4B,qBAAqB,CAYtF,EAVFA,EACC,kBAAA,cAAC,OAAD,CAAM,UAAU,cAAc,GAAII,EAAcF,EAAU,IAAA,EAEpD,EADHF,CACG,EACJ,KAGHC,EACC,kBAAA,cAAC,OAAD,CAAM,UAAU,aAAmE,EAApDX,EAAgB,OAAW,GAAGN,EAAa,EAAS,EACjF,IACD,EACJuB,CACE,EAnBiBA,CAqB1B,CAEA,MAAaC,EAAW/B,EACtBiB,EACA,UACF,E"}
+{"version":3,"file":"progress-CAqSu3jc.js","names":["createPolymorphicComponent","React","classNames","ProgressBarRender","rest","Component","component","clampedValue","value","_className","color","BG_COLOR_CLASS_NAMES","className","indeterminate","style","children","ProgressBar","ProgressRender","ariaLabel","ariaLabelledBy","barChildren","inlineValue","hasCaption","label","showValue","labelId","useId","isNodeLabel","_style","height","progressElement","Progress"],"sources":["../../src/components/progress/ProgressBar.tsx","../../src/components/progress/Progress.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport { BG_COLOR_CLASS_NAMES } from '../../utils/colorClassNames'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\nimport './Progress.scss'\n\ntype ProgressBarOwnProps<C extends ElementType> = {\n  /**\n   * Use to animate the stripes right to left via CSS3 animations.\n   */\n  animated?: 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   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Shows that work is under way without saying how much: the bar fills the track and sweeps\n   * across it, or shows its stripes when `striped` is set. `value` is ignored.\n   */\n  indeterminate?: boolean\n  /**\n   * Adds a diagonal stripe pattern over the bar's background.\n   */\n  striped?: boolean\n  /**\n   * The percent to progress the ProgressBar.\n   */\n  value?: number\n}\n\nexport type ProgressBarProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ProgressBarOwnProps<C>\n>\n\ntype ProgressBarComponent = (<C extends ElementType = 'div'>(\n  props: ProgressBarProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressBarRender<C extends ElementType = 'div'>(\n  {\n    children,\n    animated,\n    className,\n    color,\n    component,\n    indeterminate,\n    striped,\n    style,\n    value = 0,\n    ...rest\n  }: ProgressBarProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const clampedValue = Math.min(100, Math.max(0, value))\n  const _className = classNames(\n    'progress-bar',\n    color && [BG_COLOR_CLASS_NAMES[color], 'fg-contrast'],\n    {\n      striped,\n      animated,\n      indeterminate\n    },\n    className\n  )\n\n  return (\n    <Component\n      {...rest}\n      className={_className}\n      // An indeterminate bar takes its width from `Progress.scss`.\n      style={indeterminate ? style : { width: `${clampedValue}%`, ...style }}\n      ref={ref}\n    >\n      <span className=\"mx-2xs\">{children}</span>\n    </Component>\n  )\n}\n\nexport const ProgressBar = createPolymorphicComponent<ProgressBarComponent>(\n  ProgressBarRender as ForwardRefRenderFunction<Element, ProgressBarProps<ElementType>>,\n  'ProgressBar'\n)\n","import React, {\n  CSSProperties,\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  useId\n} from 'react'\nimport classNames from 'classnames'\n\nimport { ContextColor } from '../../types'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ProgressBar } from './ProgressBar'\n\ntype ProgressStyle = CSSProperties & {\n  '--cx-height'?: string\n}\n\ntype ProgressOwnProps<C extends ElementType> = {\n  /**\n   * Use to animate the stripes right to left via CSS3 animations.\n   */\n  animated?: 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   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Sets the height of the component, via the `--cx-height` custom property. If you set that\n   * value the inner bar (and the striped pattern's tile size) automatically resizes accordingly.\n   */\n  height?: number\n  /**\n   * Shows that work is under way without saying how much, for a request with no progress events.\n   * The bar sweeps across the track, or fills it with stripes when `striped` is set, and the\n   * `aria-valuenow`, `aria-valuemin` and `aria-valuemax` attributes are left out. `value` and\n   * `inlineValue` are ignored, and `showValue` keeps its place in the caption row empty.\n   */\n  indeterminate?: boolean\n  /**\n   * Shows the current value as text inside the bar, independently of `showValue` — combine both\n   * to get a `label` + `showValue` caption above the bar alongside an `inlineValue` reading\n   * inside it.\n   */\n  inlineValue?: boolean\n  /**\n   * A text label describing the progress. Rendered in a caption row above the bar. Also used as\n   * the default accessible name when no `aria-label`/`aria-labelledby` is supplied.\n   */\n  label?: ReactNode\n  /**\n   * Shows the current value as text in the caption row above the bar, alongside `label` when\n   * both are set, or alone otherwise. Use `inlineValue` to show it inside the bar instead.\n   */\n  showValue?: boolean\n  /**\n   * Adds a diagonal stripe pattern over the bar's background.\n   */\n  striped?: boolean\n  /**\n   * The percent to progress the ProgressBar (out of 100).\n   */\n  value?: number\n}\n\nexport type ProgressProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ProgressOwnProps<C>\n>\n\ntype ProgressComponent = (<C extends ElementType = 'div'>(\n  props: ProgressProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction ProgressRender<C extends ElementType = 'div'>(\n  {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    animated,\n    children,\n    className,\n    color,\n    component,\n    height,\n    indeterminate,\n    inlineValue,\n    label,\n    showValue,\n    striped,\n    style,\n    value = 0,\n    ...rest\n  }: ProgressProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('progress', className)\n  const clampedValue = Math.min(100, Math.max(0, value))\n\n  const barChildren =\n    children !== undefined\n      ? children\n      : inlineValue && !indeterminate\n        ? `${clampedValue}%`\n        : undefined\n  const hasCaption = Boolean(label || showValue)\n\n  const labelId = useId()\n  const isNodeLabel = label != null && typeof label !== 'string'\n\n  const _style: ProgressStyle = { ...style }\n  if (height !== undefined) _style['--cx-height'] = `${height}px`\n\n  const progressElement = (\n    <Component\n      {...rest}\n      className={_className}\n      role=\"progressbar\"\n      aria-valuenow={indeterminate ? undefined : clampedValue}\n      aria-valuemin={indeterminate ? undefined : 0}\n      aria-valuemax={indeterminate ? undefined : 100}\n      aria-label={ariaLabel ?? (typeof label === 'string' ? label : undefined)}\n      // The caller's own wins: written after the spread, the label's id replaced it, and with no\n      // node label it was `undefined` that did.\n      aria-labelledby={ariaLabelledBy ?? (!ariaLabel && isNodeLabel ? labelId : undefined)}\n      style={_style}\n      ref={ref}\n    >\n      <ProgressBar\n        animated={animated}\n        color={color}\n        indeterminate={indeterminate}\n        striped={striped}\n        value={clampedValue}\n      >\n        {barChildren}\n      </ProgressBar>\n    </Component>\n  )\n\n  if (!hasCaption) return progressElement\n\n  return (\n    <div className=\"d-flex flex-column gap-xs\">\n      <div\n        className={classNames('d-flex', label ? 'justify-content-between' : 'justify-content-end')}\n      >\n        {label ? (\n          <span className=\"font-strong\" id={isNodeLabel ? labelId : undefined}>\n            {label}\n          </span>\n        ) : null}\n        {/* An indeterminate bar has no value to show. The row keeps its height, so nothing moves\n            when the value arrives. */}\n        {showValue ? (\n          <span className=\"font-strong\">{indeterminate ? '\\u00A0' : `${clampedValue}%`}</span>\n        ) : null}\n      </div>\n      {progressElement}\n    </div>\n  )\n}\n\nexport const Progress = createPolymorphicComponent<ProgressComponent>(\n  ProgressRender as ForwardRefRenderFunction<Element, ProgressProps<ElementType>>,\n  'Progress'\n)\n"],"mappings":"A,uLAsDA,SAASG,EACP,CACE,WACA,WACA,YACA,QACA,YACA,gBACA,UACA,QACA,QAAQ,EACR,GAAGC,GAEL,EACA,CACA,IAAMC,EAAYC,GAAa,MACzBC,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGC,CAAK,CAAC,EAC/CC,EAAaP,EACjB,eACAQ,GAAS,CAACC,EAAqBD,GAAQ,aAAa,EACpD,CACE,UACA,WACA,eACF,EACAE,CACF,EAEA,MACE,kBAAA,cAACP,EAAD,CACE,GAAID,EACJ,UAAWK,EAEX,MAAOI,EAAgBC,EAAQ,CAAE,MAAO,GAAGP,EAAa,GAAI,GAAGO,CAAM,EAChE,KAGI,EADT,kBAAA,cAAC,OAAD,CAAM,UAAU,QAAyB,EAAfC,CAAe,CAChC,CAEf,CAEA,MAAaC,EAAchB,EACzBG,EACA,aACF,ECZA,SAASc,EACP,CACE,aAAcC,EACd,kBAAmBC,EACnB,WACA,WACA,YACA,QACA,YACA,SACA,gBACA,cACA,QACA,YACA,UACA,QACA,QAAQ,EACR,GAAGf,GAEL,EACA,CACA,IAAMC,EAAYC,GAAa,MACzBG,EAAaP,EAAW,WAAYU,CAAS,EAC7CL,EAAe,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGC,CAAK,CAAC,EAE/CY,EACJL,IAAa,IAAA,GAETM,GAAe,CAACR,EACd,GAAGN,EAAa,GAChB,IAAA,GAHFQ,EAIAO,EAAa,GAAQC,GAASC,GAE9BC,EAAUC,EAAM,EAChBC,EAAcJ,GAAS,MAAQ,OAAOA,GAAU,SAEhDK,EAAwB,CAAE,GAAGd,CAAM,EACrCe,IAAW,IAAA,KAAW,EAAO,eAAiB,GAAGA,EAAO,KAE5D,IAAMC,EACJ,kBAAA,cAACzB,EAAD,CACE,GAAID,EACJ,UAAWK,EACX,KAAK,cACL,gBAAeI,EAAgB,IAAA,GAAYN,EAC3C,gBAAeM,EAAgB,IAAA,GAAY,EAC3C,gBAAeA,EAAgB,IAAA,GAAY,IAC3C,aAAYK,IAAc,OAAOK,GAAU,SAAWA,EAAQ,IAAA,IAG9D,kBAAiBJ,IAAmB,CAACD,GAAaS,EAAcF,EAAU,IAAA,IAC1E,MAAOG,EACF,KAWI,EATT,kBAAA,cAACZ,EAAD,CACY,WACH,QACQ,gBACN,UACT,MAAOT,CAGI,EADVa,CACU,CACJ,EAKb,OAFKE,EAGH,kBAAA,cAAC,MAAD,CAAK,UAAU,2BAgBV,EAfH,kBAAA,cAAC,MAAD,CACE,UAAWpB,EAAW,SAAUqB,EAAQ,0BAA4B,qBAAqB,CAYtF,EAVFA,EACC,kBAAA,cAAC,OAAD,CAAM,UAAU,cAAc,GAAII,EAAcF,EAAU,IAAA,EAEpD,EADHF,CACG,EACJ,KAGHC,EACC,kBAAA,cAAC,OAAD,CAAM,UAAU,aAAmE,EAApDX,EAAgB,OAAW,GAAGN,EAAa,EAAS,EACjF,IACD,EACJuB,CACE,EAnBiBA,CAqB1B,CAEA,MAAaC,EAAW/B,EACtBiB,EACA,UACF,E"}

package/dist/chunks/{radio-C42F_5OD.js → radio-XlINMnQm.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{c as e}from"./slot-BQVx1Eew.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{t as n}from"./useHeldBack-eeTfpa_t.js";import{n as r,t as i}from"./FormHelp-B1eSoack.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import{t as o}from"./renderFormCheck-DvpfK_I4.js";import{n as s,r as c}from"./unhandledProps-9Kdj7WVf.js";import{t as l}from"./flex-C2jV5LyV.js";import u,{createContext as d,forwardRef as f,useContext as p,useRef as m}from"react";import h from"classnames";import{useRadio as g,useRadioGroup as _}from"react-aria";import{useRadioGroupState as v}from"react-stately";const y=d(null),b=[...s,`name`,`required`,`tabIndex`],x=f(({button:n,children:r,className:i,color:s,disabled:l,id:d,label:f,size:_,style:v,...x},S)=>{let C=p(y);if(!C)throw Error(`Radio must be rendered inside a RadioGroup.`);let{describedBy:w,state:T,valid:E}=C,D=T.isInvalid,O=m(null),k=t(S,O),A=f??r,{inputProps:j}=g({...x,children:A,isDisabled:l},T,O),M=h(a(D,E));return o({button:n,className:i,color:s,input:/* @__PURE__ */ u.createElement(`input`,{...c(j,x,b),"aria-describedby":e(x[`aria-describedby`],w),className:M,id:d,ref:k,required:T.isRequired||void 0}),invalid:D,label:A,size:_,style:v,valid:E})});x.displayName=`Radio`;const S=f(({children:o,className:s,defaultValue:d,description:f,disabled:p,errorMessage:g,form:b,invalid:x,label:S,name:C,onChange:w,orientation:T,required:E,valid:D,value:O,...k},A)=>{let j=m(null),M=t(A,j),{invalid:N,valid:P}=n(j,{invalid:x,valid:D}),F={...k,defaultValue:d,description:f,errorMessage:g,form:b,isDisabled:p,isInvalid:N,isRequired:E,label:S,name:C,onChange:w,orientation:T,value:O},I=v(F),{radioGroupProps:L,labelProps:R,descriptionProps:z,errorMessageProps:B}=_(F,I),V=h(`form-field`,a(N,P),s),H=e(!!f&&z.id,!!(N&&g)&&B.id),U=/* @__PURE__ */ u.createElement(y.Provider,{value:{describedBy:H,state:I,valid:P}},o);return/* @__PURE__ */ u.createElement(`fieldset`,{...c(L,k,[`onBlur`,`onFocus`]),"aria-describedby":e(H,k[`aria-describedby`]),className:V,form:b,ref:M},S&&/* @__PURE__ */ u.createElement(`legend`,{className:`form-label`,...R},S),T===`horizontal`?/* @__PURE__ */ u.createElement(l,{wrap:`wrap`,gap:`md`},U):U,f&&/* @__PURE__ */ u.createElement(i,z,f),N&&g&&/* @__PURE__ */ u.createElement(r,{invalid:!0,...B},g))});S.displayName=`RadioGroup`;export{x as n,S as t};
-//# sourceMappingURL=radio-C42F_5OD.js.map
+import"./focus-ring-Bs80iIBN.js";import{c as e}from"./slot-DagH0Gxq.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{t as n}from"./useHeldBack-o-CsPcSe.js";import{n as r,t as i}from"./FormHelp-2U3P8C6b.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import{t as o}from"./renderFormCheck-DvpfK_I4.js";import{n as s,r as c}from"./unhandledProps-9Kdj7WVf.js";import{t as l}from"./flex-C6CbAkVJ.js";import u,{createContext as d,forwardRef as f,useContext as p,useRef as m}from"react";import h from"classnames";import{useRadio as g,useRadioGroup as _}from"react-aria";import{useRadioGroupState as v}from"react-stately";const y=d(null),b=[...s,`name`,`required`,`tabIndex`],x=f(({button:n,children:r,className:i,color:s,disabled:l,id:d,label:f,size:_,style:v,...x},S)=>{let C=p(y);if(!C)throw Error(`Radio must be rendered inside a RadioGroup.`);let{describedBy:w,state:T,valid:E}=C,D=T.isInvalid,O=m(null),k=t(S,O),A=f??r,{inputProps:j}=g({...x,children:A,isDisabled:l},T,O),M=h(a(D,E));return o({button:n,className:i,color:s,input:/* @__PURE__ */ u.createElement(`input`,{...c(j,x,b),"aria-describedby":e(x[`aria-describedby`],w),className:M,id:d,ref:k,required:T.isRequired||void 0}),invalid:D,label:A,size:_,style:v,valid:E})});x.displayName=`Radio`;const S=f(({children:o,className:s,defaultValue:d,description:f,disabled:p,errorMessage:g,form:b,invalid:x,label:S,name:C,onChange:w,orientation:T,required:E,valid:D,value:O,...k},A)=>{let j=m(null),M=t(A,j),{invalid:N,valid:P}=n(j,{invalid:x,valid:D}),F={...k,defaultValue:d,description:f,errorMessage:g,form:b,isDisabled:p,isInvalid:N,isRequired:E,label:S,name:C,onChange:w,orientation:T,value:O},I=v(F),{radioGroupProps:L,labelProps:R,descriptionProps:z,errorMessageProps:B}=_(F,I),V=h(`form-field`,a(N,P),s),H=e(!!f&&z.id,!!(N&&g)&&B.id),U=/* @__PURE__ */ u.createElement(y.Provider,{value:{describedBy:H,state:I,valid:P}},o);return/* @__PURE__ */ u.createElement(`fieldset`,{...c(L,k,[`onBlur`,`onFocus`]),"aria-describedby":e(H,k[`aria-describedby`]),className:V,form:b,ref:M},S&&/* @__PURE__ */ u.createElement(`legend`,{className:`form-label`,...R},S),T===`horizontal`?/* @__PURE__ */ u.createElement(l,{wrap:`wrap`,gap:`md`},U):U,f&&/* @__PURE__ */ u.createElement(i,z,f),N&&g&&/* @__PURE__ */ u.createElement(r,{invalid:!0,...B},g))});S.displayName=`RadioGroup`;export{x as n,S as t};
+//# sourceMappingURL=radio-XlINMnQm.js.map

package/dist/chunks/{radio-C42F_5OD.js.map → radio-XlINMnQm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-C42F_5OD.js","names":["joinIds","useHeldBack","FormFeedback","FormHelp","validationClassName","renderFormCheck","TOGGLE_PROPS","mergeUnhandledProps","Flex","React","classNames","RadioGroupContext","createContext","RADIO_PROPS","Radio","forwardRef","rest","group","useContext","groupDescribedBy","groupState","invalid","inputRef","useRef","forkedRef","useForkedRef","ref","resolvedLabel","label","children","useRadio","disabled","inputClassName","valid","inputProps","RadioGroup","invalidProp","validProp","fieldsetRef","groupProps","required","state","useRadioGroupState","useRadioGroup","_className","className","describedBy","description","descriptionProps","errorMessage","errorMessageProps","items","radioGroupProps","labelProps","orientation"],"sources":["../../src/components/radio/context.ts","../../src/components/radio/Radio.tsx","../../src/components/radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react'\nimport { RadioGroupState } from 'react-stately'\n\nexport interface RadioGroupContextValue {\n  state: RadioGroupState\n  /**\n   * `RadioGroup`'s own `valid` prop, mirrored here since it has no react-stately equivalent to\n   * read off `state` the way `isInvalid` does — each `Radio` needs it to apply its own\n   * `is-valid` class.\n   */\n  valid?: boolean\n  /**\n   * The ids of the group's description and error message, when they are rendered. Each item is\n   * described by them too.\n   */\n  describedBy?: string\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n","import React, { forwardRef, InputHTMLAttributes, ReactNode, useContext, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaRadioProps, useRadio } from 'react-aria'\n\nimport { useForkedRef } from '../../hooks'\nimport { ContextColor } from '../../types'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { joinIds } from '../../utils/idRefs'\nimport { mergeUnhandledProps, TOGGLE_PROPS } from '../../utils/unhandledProps'\n\nimport { RadioGroupContext } from './context'\nimport { ButtonObject, renderFormCheck } from '../form/renderFormCheck'\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> {\n  /**\n   * Create button-like radios. Combine with `<RadioGroup>` to build radio toggle-button groups.\n   */\n  button?: ButtonObject\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the radio indicator to one of Chassis context colors. Ignored when `button` is set.\n   */\n  color?: ContextColor\n  /**\n   * The id global attribute defines an identifier (ID) that must be unique in the whole document.\n   */\n  id?: string\n  /**\n   * The element represents a caption for a component.\n   *\n   * Children are accepted as an alias for this prop — `label` wins when both are given.\n   * react-aria, which backs this component, calls the same thing `children`; this package renames\n   * it to `label`, and honouring both means the shape React developers reach for first still\n   * names the control instead of silently producing an unlabelled one.\n   */\n  label?: ReactNode\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * The value of the radio button, used to identify it within its `<RadioGroup>`.\n   */\n  value: string\n}\n\n// The group owns its radios' `name` and required state, and which one is the tab stop. `form`\n// is the radio's own, as a `Checkbox` in a `CheckboxGroup` keeps its own.\nconst RADIO_PROPS = [...TOGGLE_PROPS, 'name', 'required', 'tabIndex']\n\n// `<Radio>` must be rendered inside a `<RadioGroup>` — react-aria has no standalone\n// radio hook, only useRadio(props, RadioGroupState, ref), because a lone radio with no group is\n// not a meaningful accessible control (see https://chassis-ui.com/css/docs/forms/checkbox-radio).\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  ({ button, children, className, color, disabled, id, label, size, style, ...rest }, ref) => {\n    const group = useContext(RadioGroupContext)\n\n    if (!group) {\n      throw new Error('Radio must be rendered inside a RadioGroup.')\n    }\n\n    const { describedBy: groupDescribedBy, state: groupState, valid } = group\n    const invalid = groupState.isInvalid\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n\n    // `label` is this package's name for what react-aria calls `children`. Accept either, so the\n    // shape React developers reach for first (`<Radio>Label</Radio>`) names the control instead of\n    // being silently dropped — see the note on `label` in `RadioProps`.\n    const resolvedLabel = label ?? children\n\n    const { inputProps } = useRadio(\n      {\n        ...rest,\n        children: resolvedLabel,\n        isDisabled: disabled\n      } as AriaRadioProps,\n      groupState,\n      inputRef\n    )\n\n    const inputClassName = classNames(validationClassName(invalid, valid))\n\n    return renderFormCheck({\n      button,\n      className,\n      color,\n      // Described by the group's description and error message, as react-aria intends, but only\n      // by those the group renders (FORMS.md, gotcha 6).\n      input: (\n        <input\n          {...mergeUnhandledProps(inputProps, rest, RADIO_PROPS)}\n          aria-describedby={joinIds(rest['aria-describedby'], groupDescribedBy)}\n          className={inputClassName}\n          id={id}\n          ref={forkedRef}\n          // A required group is the native `required` on its radios, which share a `name`: a\n          // form then asks for one of them. react-aria writes `aria-required` on the group alone.\n          required={groupState.isRequired || undefined}\n        />\n      ),\n      invalid,\n      label: resolvedLabel,\n      size,\n      style,\n      valid\n    })\n  }\n)\n\nRadio.displayName = 'Radio'\n","import React, { forwardRef, HTMLAttributes, ReactNode, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaRadioGroupProps, useRadioGroup } from 'react-aria'\nimport { RadioGroupProps as StatelyRadioGroupProps, useRadioGroupState } from 'react-stately'\n\nimport { useForkedRef, useHeldBack } from '../../hooks'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { joinIds } from '../../utils/idRefs'\nimport { mergeUnhandledProps } from '../../utils/unhandledProps'\n\nimport { RadioGroupContext } from './context'\nimport { FormFeedback } from '../form/FormFeedback'\nimport { FormHelp } from '../form/FormHelp'\nimport { Flex } from '../flex'\n\nexport interface RadioGroupProps extends Omit<\n  HTMLAttributes<HTMLFieldSetElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * One or more `<Radio>` elements.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The selected value, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * A description for the group, rendered below the options.\n   */\n  description?: ReactNode\n  /**\n   * Disables every radio in the group.\n   */\n  disabled?: boolean\n  /**\n   * An error message for the group, rendered below the options when `invalid` is set, and after\n   * a submit the group held back, until it no longer would.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The id of the `<form>` the group belongs to, for a group rendered outside it. Reaches every\n   * radio; a `Radio` with its own `form` keeps it.\n   */\n  form?: string\n  /**\n   * Set group validation state to invalid. Left unset, the group shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * The group's caption, rendered as a `<legend>`.\n   */\n  label?: ReactNode\n  /**\n   * The name for the group, used for native form submission.\n   */\n  name?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Lay the group's radios out on the same horizontal row instead of stacking them.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * Marks the group as required: `aria-required` on the group and the native `required` on its\n   * radios, so a form isn't submitted until one of them is selected.\n   */\n  required?: boolean\n  /**\n   * Set group validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * The selected value, controlled.\n   */\n  value?: string\n}\n\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n  (\n    {\n      children,\n      className,\n      defaultValue,\n      description,\n      disabled,\n      errorMessage,\n      form,\n      invalid: invalidProp,\n      label,\n      name,\n      onChange,\n      orientation,\n      required,\n      valid: validProp,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const fieldsetRef = useRef<HTMLFieldSetElement>(null)\n    const forkedRef = useForkedRef(ref, fieldsetRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    // The fieldset hears every radio, and the group shows it for them all, with `errorMessage`.\n    const { invalid, valid } = useHeldBack(fieldsetRef, { invalid: invalidProp, valid: validProp })\n\n    const groupProps = {\n      ...rest,\n      defaultValue,\n      description,\n      errorMessage,\n      form,\n      isDisabled: disabled,\n      isInvalid: invalid,\n      isRequired: required,\n      label,\n      name,\n      onChange,\n      orientation,\n      value\n    }\n\n    const state = useRadioGroupState(groupProps as StatelyRadioGroupProps)\n    const { radioGroupProps, labelProps, descriptionProps, errorMessageProps } = useRadioGroup(\n      groupProps as AriaRadioGroupProps,\n      state\n    )\n\n    const _className = classNames('form-field', validationClassName(invalid, valid), className)\n\n    // Only the ids this group renders. react-aria's own describe the group and every item by a\n    // description and an error message whether or not they exist (FORMS.md, gotcha 6).\n    const describedBy = joinIds(\n      Boolean(description) && descriptionProps.id,\n      Boolean(invalid && errorMessage) && errorMessageProps.id\n    )\n\n    const items = (\n      <RadioGroupContext.Provider value={{ describedBy, state, valid }}>\n        {children}\n      </RadioGroupContext.Provider>\n    )\n\n    return (\n      <fieldset\n        {...mergeUnhandledProps(radioGroupProps, rest, ['onBlur', 'onFocus'])}\n        aria-describedby={joinIds(describedBy, rest['aria-describedby'])}\n        className={_className}\n        // The fieldset's own form owner. react-aria hands the group's `form` to each of its\n        // radios, under one that has its own.\n        form={form}\n        ref={forkedRef}\n      >\n        {label && (\n          <legend className=\"form-label\" {...labelProps}>\n            {label}\n          </legend>\n        )}\n        {orientation === 'horizontal' ? (\n          <Flex wrap=\"wrap\" gap=\"md\">\n            {items}\n          </Flex>\n        ) : (\n          items\n        )}\n        {description && <FormHelp {...descriptionProps}>{description}</FormHelp>}\n        {invalid && errorMessage && (\n          <FormFeedback invalid {...errorMessageProps}>\n            {errorMessage}\n          </FormFeedback>\n        )}\n      </fieldset>\n    )\n  }\n)\n\nRadioGroup.displayName = 'RadioGroup'\n"],"mappings":"A,onBAkBA,MAAaW,EAAoBC,EAA6C,IAAI,ECoC5EC,EAAc,CAAC,GAAGP,EAAc,OAAQ,WAAY,UAAU,EAKvDQ,EAAQC,GAClB,CAAE,SAAQ,WAAU,YAAW,QAAO,WAAU,KAAI,QAAO,OAAM,QAAO,GAAGC,GAAQ,IAAQ,CAC1F,IAAMC,EAAQC,EAAWP,CAAiB,EAE1C,GAAI,CAACM,EACH,MAAU,MAAM,6CAA6C,EAG/D,GAAM,CAAE,YAAaE,EAAkB,MAAOC,EAAY,SAAUH,EAC9DI,EAAUD,EAAW,UAErBE,EAAWC,EAAyB,IAAI,EACxCC,EAAYC,EAAaC,EAAKJ,CAAQ,EAKtCK,EAAgBC,GAASC,EAEzB,CAAE,cAAeC,EACrB,CACE,GAAGd,EACH,SAAUW,EACV,WAAYI,CACd,EACAX,EACAE,CACF,EAEMU,EAAiBtB,EAAWN,EAAoBiB,EAASY,CAAK,CAAC,EAErE,OAAO5B,EAAgB,CACrB,SACA,YACA,QAGA,MACE,kBAAA,cAAC,QAAD,CACE,GAAIE,EAAoB2B,EAAYlB,EAAMH,CAAW,EACrD,mBAAkBb,EAAQgB,EAAK,oBAAqBG,CAAgB,EACpE,UAAWa,EACP,KACJ,IAAKR,EAGL,SAAUJ,EAAW,YAAc,IAAA,EACpC,CAAA,EAEH,UACA,MAAOO,EACP,OACA,QACA,OACF,CAAC,CACH,CACF,EAEA,EAAM,YAAc,QC/BpB,MAAaQ,EAAapB,GAEtB,CACE,WACA,YACA,eACA,cACA,WACA,eACA,OACA,QAASqB,EACT,QACA,OACA,WACA,cACA,WACA,MAAOC,EACP,QACA,GAAGrB,GAEL,IACG,CACH,IAAMsB,EAAcf,EAA4B,IAAI,EAC9CC,EAAYC,EAAaC,EAAKY,CAAW,EAIzC,CAAE,UAAS,SAAUrC,EAAYqC,EAAa,CAAE,QAASF,EAAa,MAAOC,CAAU,CAAC,EAExFE,EAAa,CACjB,GAAGvB,EACH,eACA,cACA,eACA,OACA,WAAYe,EACZ,UAAWV,EACX,WAAYmB,EACZ,QACA,OACA,WACA,cACA,OACF,EAEMC,EAAQC,EAAmBH,CAAoC,EAC/D,CAAE,kBAAiB,aAAY,mBAAkB,qBAAsBI,EAC3EJ,EACAE,CACF,EAEMG,EAAalC,EAAW,aAAcN,EAAoBiB,EAASY,CAAK,EAAGY,CAAS,EAIpFC,EAAc9C,EAClB,EAAQ+C,GAAgBC,EAAiB,GACzC,GAAQ3B,GAAW4B,IAAiBC,EAAkB,EACxD,EAEMC,EACJ,kBAAA,cAACxC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,cAAa,QAAO,OAAM,CAEnC,EADzBkB,CACyB,EAG9B,MACE,kBAAA,cAAC,WAAD,CACE,GAAItB,EAAoB6C,EAAiBpC,EAAM,CAAC,SAAU,SAAS,CAAC,EACpE,mBAAkBhB,EAAQ8C,EAAa9B,EAAK,mBAAmB,EAC/D,UAAW4B,EAGL,OACN,IAAKpB,CAoBG,EAlBPI,GACC,kBAAA,cAAC,SAAD,CAAQ,UAAU,aAAa,GAAIyB,CAE3B,EADLzB,CACK,EAET0B,IAAgB,aACf,kBAAA,cAAC9C,EAAD,CAAM,KAAK,OAAO,IAAI,IAEhB,EADH2C,CACG,EAENA,EAEDJ,GAAe,kBAAA,cAAC5C,EAAa6C,EAAmBD,CAAsB,EACtE1B,GAAW4B,GACV,kBAAA,cAAC/C,EAAD,CAAc,QAAA,GAAQ,GAAIgD,CAEZ,EADXD,CACW,CAER,CAEd,CACF,EAEA,EAAW,YAAc,a"}
+{"version":3,"file":"radio-XlINMnQm.js","names":["joinIds","useHeldBack","FormFeedback","FormHelp","validationClassName","renderFormCheck","TOGGLE_PROPS","mergeUnhandledProps","Flex","React","classNames","RadioGroupContext","createContext","RADIO_PROPS","Radio","forwardRef","rest","group","useContext","groupDescribedBy","groupState","invalid","inputRef","useRef","forkedRef","useForkedRef","ref","resolvedLabel","label","children","useRadio","disabled","inputClassName","valid","inputProps","RadioGroup","invalidProp","validProp","fieldsetRef","groupProps","required","state","useRadioGroupState","useRadioGroup","_className","className","describedBy","description","descriptionProps","errorMessage","errorMessageProps","items","radioGroupProps","labelProps","orientation"],"sources":["../../src/components/radio/context.ts","../../src/components/radio/Radio.tsx","../../src/components/radio/RadioGroup.tsx"],"sourcesContent":["import { createContext } from 'react'\nimport { RadioGroupState } from 'react-stately'\n\nexport interface RadioGroupContextValue {\n  state: RadioGroupState\n  /**\n   * `RadioGroup`'s own `valid` prop, mirrored here since it has no react-stately equivalent to\n   * read off `state` the way `isInvalid` does — each `Radio` needs it to apply its own\n   * `is-valid` class.\n   */\n  valid?: boolean\n  /**\n   * The ids of the group's description and error message, when they are rendered. Each item is\n   * described by them too.\n   */\n  describedBy?: string\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n","import React, { forwardRef, InputHTMLAttributes, ReactNode, useContext, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaRadioProps, useRadio } from 'react-aria'\n\nimport { useForkedRef } from '../../hooks'\nimport { ContextColor } from '../../types'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { joinIds } from '../../utils/idRefs'\nimport { mergeUnhandledProps, TOGGLE_PROPS } from '../../utils/unhandledProps'\n\nimport { RadioGroupContext } from './context'\nimport { ButtonObject, renderFormCheck } from '../form/renderFormCheck'\n\nexport interface RadioProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'checked' | 'defaultChecked' | 'onChange' | 'size'\n> {\n  /**\n   * Create button-like radios. Combine with `<RadioGroup>` to build radio toggle-button groups.\n   */\n  button?: ButtonObject\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the radio indicator to one of Chassis context colors. Ignored when `button` is set.\n   */\n  color?: ContextColor\n  /**\n   * The id global attribute defines an identifier (ID) that must be unique in the whole document.\n   */\n  id?: string\n  /**\n   * The element represents a caption for a component.\n   *\n   * Children are accepted as an alias for this prop — `label` wins when both are given.\n   * react-aria, which backs this component, calls the same thing `children`; this package renames\n   * it to `label`, and honouring both means the shape React developers reach for first still\n   * names the control instead of silently producing an unlabelled one.\n   */\n  label?: ReactNode\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * The value of the radio button, used to identify it within its `<RadioGroup>`.\n   */\n  value: string\n}\n\n// The group owns its radios' `name` and required state, and which one is the tab stop. `form`\n// is the radio's own, as a `Checkbox` in a `CheckboxGroup` keeps its own.\nconst RADIO_PROPS = [...TOGGLE_PROPS, 'name', 'required', 'tabIndex']\n\n// `<Radio>` must be rendered inside a `<RadioGroup>` — react-aria has no standalone\n// radio hook, only useRadio(props, RadioGroupState, ref), because a lone radio with no group is\n// not a meaningful accessible control (see https://chassis-ui.com/css/docs/forms/checkbox-radio).\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  ({ button, children, className, color, disabled, id, label, size, style, ...rest }, ref) => {\n    const group = useContext(RadioGroupContext)\n\n    if (!group) {\n      throw new Error('Radio must be rendered inside a RadioGroup.')\n    }\n\n    const { describedBy: groupDescribedBy, state: groupState, valid } = group\n    const invalid = groupState.isInvalid\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n\n    // `label` is this package's name for what react-aria calls `children`. Accept either, so the\n    // shape React developers reach for first (`<Radio>Label</Radio>`) names the control instead of\n    // being silently dropped — see the note on `label` in `RadioProps`.\n    const resolvedLabel = label ?? children\n\n    const { inputProps } = useRadio(\n      {\n        ...rest,\n        children: resolvedLabel,\n        isDisabled: disabled\n      } as AriaRadioProps,\n      groupState,\n      inputRef\n    )\n\n    const inputClassName = classNames(validationClassName(invalid, valid))\n\n    return renderFormCheck({\n      button,\n      className,\n      color,\n      // Described by the group's description and error message, as react-aria intends, but only\n      // by those the group renders (FORMS.md, gotcha 6).\n      input: (\n        <input\n          {...mergeUnhandledProps(inputProps, rest, RADIO_PROPS)}\n          aria-describedby={joinIds(rest['aria-describedby'], groupDescribedBy)}\n          className={inputClassName}\n          id={id}\n          ref={forkedRef}\n          // A required group is the native `required` on its radios, which share a `name`: a\n          // form then asks for one of them. react-aria writes `aria-required` on the group alone.\n          required={groupState.isRequired || undefined}\n        />\n      ),\n      invalid,\n      label: resolvedLabel,\n      size,\n      style,\n      valid\n    })\n  }\n)\n\nRadio.displayName = 'Radio'\n","import React, { forwardRef, HTMLAttributes, ReactNode, useRef } from 'react'\nimport classNames from 'classnames'\nimport { AriaRadioGroupProps, useRadioGroup } from 'react-aria'\nimport { RadioGroupProps as StatelyRadioGroupProps, useRadioGroupState } from 'react-stately'\n\nimport { useForkedRef, useHeldBack } from '../../hooks'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { joinIds } from '../../utils/idRefs'\nimport { mergeUnhandledProps } from '../../utils/unhandledProps'\n\nimport { RadioGroupContext } from './context'\nimport { FormFeedback } from '../form/FormFeedback'\nimport { FormHelp } from '../form/FormHelp'\nimport { Flex } from '../flex'\n\nexport interface RadioGroupProps extends Omit<\n  HTMLAttributes<HTMLFieldSetElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * One or more `<Radio>` elements.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The selected value, uncontrolled. `null` for none.\n   */\n  defaultValue?: string | null\n  /**\n   * A description for the group, rendered below the options.\n   */\n  description?: ReactNode\n  /**\n   * Disables every radio in the group.\n   */\n  disabled?: boolean\n  /**\n   * An error message for the group, rendered below the options when `invalid` is set, and after\n   * a submit the group held back, until it no longer would.\n   */\n  errorMessage?: ReactNode\n  /**\n   * The id of the `<form>` the group belongs to, for a group rendered outside it. Reaches every\n   * radio; a `Radio` with its own `form` keeps it.\n   */\n  form?: string\n  /**\n   * Set group validation state to invalid. Left unset, the group shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * The group's caption, rendered as a `<legend>`.\n   */\n  label?: ReactNode\n  /**\n   * The name for the group, used for native form submission.\n   */\n  name?: string\n  /**\n   * Callback fired when the selected value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Lay the group's radios out on the same horizontal row instead of stacking them.\n   */\n  orientation?: 'horizontal' | 'vertical'\n  /**\n   * Marks the group as required: `aria-required` on the group and the native `required` on its\n   * radios, so a form isn't submitted until one of them is selected.\n   */\n  required?: boolean\n  /**\n   * Set group validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * The selected value, controlled. `null` clears the selection; `undefined` would make the group\n   * uncontrolled instead.\n   */\n  value?: string | null\n}\n\nexport const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(\n  (\n    {\n      children,\n      className,\n      defaultValue,\n      description,\n      disabled,\n      errorMessage,\n      form,\n      invalid: invalidProp,\n      label,\n      name,\n      onChange,\n      orientation,\n      required,\n      valid: validProp,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const fieldsetRef = useRef<HTMLFieldSetElement>(null)\n    const forkedRef = useForkedRef(ref, fieldsetRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    // The fieldset hears every radio, and the group shows it for them all, with `errorMessage`.\n    const { invalid, valid } = useHeldBack(fieldsetRef, { invalid: invalidProp, valid: validProp })\n\n    const groupProps = {\n      ...rest,\n      defaultValue,\n      description,\n      errorMessage,\n      form,\n      isDisabled: disabled,\n      isInvalid: invalid,\n      isRequired: required,\n      label,\n      name,\n      onChange,\n      orientation,\n      value\n    }\n\n    const state = useRadioGroupState(groupProps as StatelyRadioGroupProps)\n    const { radioGroupProps, labelProps, descriptionProps, errorMessageProps } = useRadioGroup(\n      groupProps as AriaRadioGroupProps,\n      state\n    )\n\n    const _className = classNames('form-field', validationClassName(invalid, valid), className)\n\n    // Only the ids this group renders. react-aria's own describe the group and every item by a\n    // description and an error message whether or not they exist (FORMS.md, gotcha 6).\n    const describedBy = joinIds(\n      Boolean(description) && descriptionProps.id,\n      Boolean(invalid && errorMessage) && errorMessageProps.id\n    )\n\n    const items = (\n      <RadioGroupContext.Provider value={{ describedBy, state, valid }}>\n        {children}\n      </RadioGroupContext.Provider>\n    )\n\n    return (\n      <fieldset\n        {...mergeUnhandledProps(radioGroupProps, rest, ['onBlur', 'onFocus'])}\n        aria-describedby={joinIds(describedBy, rest['aria-describedby'])}\n        className={_className}\n        // The fieldset's own form owner. react-aria hands the group's `form` to each of its\n        // radios, under one that has its own.\n        form={form}\n        ref={forkedRef}\n      >\n        {label && (\n          <legend className=\"form-label\" {...labelProps}>\n            {label}\n          </legend>\n        )}\n        {orientation === 'horizontal' ? (\n          <Flex wrap=\"wrap\" gap=\"md\">\n            {items}\n          </Flex>\n        ) : (\n          items\n        )}\n        {description && <FormHelp {...descriptionProps}>{description}</FormHelp>}\n        {invalid && errorMessage && (\n          <FormFeedback invalid {...errorMessageProps}>\n            {errorMessage}\n          </FormFeedback>\n        )}\n      </fieldset>\n    )\n  }\n)\n\nRadioGroup.displayName = 'RadioGroup'\n"],"mappings":"A,onBAkBA,MAAaW,EAAoBC,EAA6C,IAAI,ECoC5EC,EAAc,CAAC,GAAGP,EAAc,OAAQ,WAAY,UAAU,EAKvDQ,EAAQC,GAClB,CAAE,SAAQ,WAAU,YAAW,QAAO,WAAU,KAAI,QAAO,OAAM,QAAO,GAAGC,GAAQ,IAAQ,CAC1F,IAAMC,EAAQC,EAAWP,CAAiB,EAE1C,GAAI,CAACM,EACH,MAAU,MAAM,6CAA6C,EAG/D,GAAM,CAAE,YAAaE,EAAkB,MAAOC,EAAY,SAAUH,EAC9DI,EAAUD,EAAW,UAErBE,EAAWC,EAAyB,IAAI,EACxCC,EAAYC,EAAaC,EAAKJ,CAAQ,EAKtCK,EAAgBC,GAASC,EAEzB,CAAE,cAAeC,EACrB,CACE,GAAGd,EACH,SAAUW,EACV,WAAYI,CACd,EACAX,EACAE,CACF,EAEMU,EAAiBtB,EAAWN,EAAoBiB,EAASY,CAAK,CAAC,EAErE,OAAO5B,EAAgB,CACrB,SACA,YACA,QAGA,MACE,kBAAA,cAAC,QAAD,CACE,GAAIE,EAAoB2B,EAAYlB,EAAMH,CAAW,EACrD,mBAAkBb,EAAQgB,EAAK,oBAAqBG,CAAgB,EACpE,UAAWa,EACP,KACJ,IAAKR,EAGL,SAAUJ,EAAW,YAAc,IAAA,EACpC,CAAA,EAEH,UACA,MAAOO,EACP,OACA,QACA,OACF,CAAC,CACH,CACF,EAEA,EAAM,YAAc,QC9BpB,MAAaQ,EAAapB,GAEtB,CACE,WACA,YACA,eACA,cACA,WACA,eACA,OACA,QAASqB,EACT,QACA,OACA,WACA,cACA,WACA,MAAOC,EACP,QACA,GAAGrB,GAEL,IACG,CACH,IAAMsB,EAAcf,EAA4B,IAAI,EAC9CC,EAAYC,EAAaC,EAAKY,CAAW,EAIzC,CAAE,UAAS,SAAUrC,EAAYqC,EAAa,CAAE,QAASF,EAAa,MAAOC,CAAU,CAAC,EAExFE,EAAa,CACjB,GAAGvB,EACH,eACA,cACA,eACA,OACA,WAAYe,EACZ,UAAWV,EACX,WAAYmB,EACZ,QACA,OACA,WACA,cACA,OACF,EAEMC,EAAQC,EAAmBH,CAAoC,EAC/D,CAAE,kBAAiB,aAAY,mBAAkB,qBAAsBI,EAC3EJ,EACAE,CACF,EAEMG,EAAalC,EAAW,aAAcN,EAAoBiB,EAASY,CAAK,EAAGY,CAAS,EAIpFC,EAAc9C,EAClB,EAAQ+C,GAAgBC,EAAiB,GACzC,GAAQ3B,GAAW4B,IAAiBC,EAAkB,EACxD,EAEMC,EACJ,kBAAA,cAACxC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,cAAa,QAAO,OAAM,CAEnC,EADzBkB,CACyB,EAG9B,MACE,kBAAA,cAAC,WAAD,CACE,GAAItB,EAAoB6C,EAAiBpC,EAAM,CAAC,SAAU,SAAS,CAAC,EACpE,mBAAkBhB,EAAQ8C,EAAa9B,EAAK,mBAAmB,EAC/D,UAAW4B,EAGL,OACN,IAAKpB,CAoBG,EAlBPI,GACC,kBAAA,cAAC,SAAD,CAAQ,UAAU,aAAa,GAAIyB,CAE3B,EADLzB,CACK,EAET0B,IAAgB,aACf,kBAAA,cAAC9C,EAAD,CAAM,KAAK,OAAO,IAAI,IAEhB,EADH2C,CACG,EAENA,EAEDJ,GAAe,kBAAA,cAAC5C,EAAa6C,EAAmBD,CAAsB,EACtE1B,GAAW4B,GACV,kBAAA,cAAC/C,EAAD,CAAc,QAAA,GAAQ,GAAIgD,CAEZ,EADXD,CACW,CAER,CAEd,CACF,EAEA,EAAW,YAAc,a"}

package/dist/chunks/range-input-tyImJHKI.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useFormField-q21MOgh8.js";import{t as n}from"./useFormReset-BK5Yb24_.js";import{t as r}from"./useHeldBack-o-CsPcSe.js";import{t as i}from"./renderFormField-CaZ8-xrn.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import{t as o}from"./nativeFormReset-DgsRU9SA.js";import s,{forwardRef as c,useRef as l}from"react";import u from"classnames";const d=c(({className:c,help:d,id:f,invalid:p,invalidFeedback:m,label:h,valid:g,validFeedback:_,...v},y)=>{let b=l(null),x=e(y,b),{invalid:S,valid:C}=r(b,{invalid:p,valid:g});n(b,v.value??v.defaultValue,e=>{e!==void 0&&b.current&&o(b.current,e)},v.form);let{describedBy:w,feedbackId:T,helpId:E,inputId:D,labelId:O,labelledBy:k}=t({ariaDescribedBy:v[`aria-describedby`],ariaLabelledBy:v[`aria-labelledby`],help:d,id:f,invalid:S,invalidFeedback:m,label:h,valid:C,validFeedback:_}),A=u(`form-range`,a(S,C),c);return i({children:/* @__PURE__ */ s.createElement(`input`,{...v,"aria-describedby":w,"aria-labelledby":v[`aria-labelledby`]&&k,"aria-invalid":S||void 0,className:A,id:D,ref:x,type:`range`}),help:d,ids:{feedback:T,help:E,input:D,label:O},invalid:S,invalidFeedback:m,label:h,valid:C,validFeedback:_})});d.displayName=`RangeInput`;export{d as t};
+//# sourceMappingURL=range-input-tyImJHKI.js.map

package/dist/chunks/range-input-tyImJHKI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-input-tyImJHKI.js","names":["useForkedRef","useFormReset","useHeldBack","renderFormField","validationClassName","resetNativeControl","React","classNames","RangeInput","forwardRef","invalidProp","validProp","rest","inputRef","useRef","forkedRef","ref","initial","useFormField","_className","invalid","valid","className","describedBy","labelledBy","inputId","feedbackId","helpId","labelId"],"sources":["../../src/components/range-input/RangeInput.tsx"],"sourcesContent":["import React, {\n  ChangeEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef, useFormField, useFormReset, useHeldBack } from '../../hooks'\nimport { resetNativeControl } from '../../utils/nativeFormReset'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\n// No `placeholder` or `readOnly`: neither applies to `type=\"range\"`.\nexport interface RangeInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'placeholder' | 'readOnly'\n> {\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   * A description for the field, rendered below the range input.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the range input when `invalid` is set.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this range input.\n   */\n  label?: ReactNode\n  /**\n   * Specifies the maximum value for the component.\n   */\n  max?: number\n  /**\n   * Specifies the minimum value for the component.\n   */\n  min?: number\n  /**\n   * Method called immediately after the `value` prop changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  /**\n   * Specifies the interval between legal numbers in the component.\n   */\n  step?: number\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the range input when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The `value` attribute of component.\n   *\n   * @controllable onChange\n   * */\n  value?: string | number\n}\n\nexport const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>(\n  (\n    {\n      className,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    // A range input always has a value and holds no form back, but a `validated` form shows it\n    // as valid (`useHeldBack`).\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    // A reset of the form puts the input back to its first value, controlled or not, and reports\n    // it (`resetNativeControl`). With no value known, the browser's own reset stands.\n    useFormReset(\n      inputRef,\n      rest.value ?? rest.defaultValue,\n      (initial) => {\n        if (initial !== undefined && inputRef.current) resetNativeControl(inputRef.current, initial)\n      },\n      rest.form\n    )\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const _className = classNames('form-range', validationClassName(invalid, valid), className)\n\n    return renderFormField({\n      children: (\n        <input\n          {...rest}\n          aria-describedby={describedBy}\n          // A caller's `aria-labelledby` adds to the visible label, as in `TextInput`, rather than\n          // taking its place: it outranks the `<label for>`.\n          aria-labelledby={rest['aria-labelledby'] && labelledBy}\n          aria-invalid={invalid || undefined}\n          className={_className}\n          id={inputId}\n          ref={forkedRef}\n          type=\"range\"\n        />\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nRangeInput.displayName = 'RangeInput'\n"],"mappings":"A,6bA2EA,MAAaQ,EAAaC,GAEtB,CACE,YACA,OACA,KACA,QAASC,EACT,kBACA,QACA,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAyB,IAAI,EACxCC,EAAYf,EAAagB,EAAKH,CAAQ,EAGtC,CAAE,UAAS,SAAUX,EAAYW,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAI3FV,EACEY,EACAD,EAAK,OAASA,EAAK,aAClB,GAAY,CACPK,IAAY,IAAA,IAAaJ,EAAS,SAASR,EAAmBQ,EAAS,QAASI,CAAO,CAC7F,EACAL,EAAK,IACP,EAEA,GAAM,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeM,EAAa,CACrF,gBAAiBN,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEKO,EAAaZ,EAAW,aAAcH,EAAoBgB,EAASC,CAAK,EAAGC,CAAS,EAE1F,OAAOnB,EAAgB,CACrB,SACE,kBAAA,cAAC,QAAD,CACE,GAAIS,EACJ,mBAAkBW,EAGlB,kBAAiBX,EAAK,oBAAsBY,EAC5C,eAAcJ,GAAW,IAAA,GACzB,UAAWD,EACX,GAAIM,EACJ,IAAKV,EACL,KAAK,OACN,CAAA,EAEH,OACA,IAAK,CAAE,SAAUW,EAAY,KAAMC,EAAQ,MAAOF,EAAS,MAAOG,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAW,YAAc,a"}

package/dist/chunks/{renderFormField-_6WswnEX.js → renderFormField-CaZ8-xrn.js}

@@ -1,2 +1,2 @@
-import{n as e,t}from"./FormHelp-B1eSoack.js";import{t as n}from"./FormLabel-CpzWYh6U.js";import r from"react";import i from"classnames";const a=({children:a,className:o,help:s,ids:c={},invalid:l,invalidFeedback:u,label:d,ref:f,valid:p,validFeedback:m})=>{let h=!!(l&&u),g=!!(p&&m)&&!h;return!d&&!s&&!u&&!m&&!o?a:/* @__PURE__ */ r.createElement(`div`,{className:i(`form-field`,o),ref:f},d&&/* @__PURE__ */ r.createElement(n,{htmlFor:c.input,id:c.label},d),a,s&&/* @__PURE__ */ r.createElement(t,{id:c.help},s),h&&/* @__PURE__ */ r.createElement(e,{id:c.feedback,invalid:!0},u),g&&/* @__PURE__ */ r.createElement(e,{id:c.feedback,valid:!0},m))};export{a as t};
-//# sourceMappingURL=renderFormField-_6WswnEX.js.map
+import{n as e,t}from"./FormHelp-2U3P8C6b.js";import{t as n}from"./FormLabel-CpzWYh6U.js";import r from"react";import i from"classnames";const a=({children:a,className:o,help:s,ids:c={},invalid:l,invalidFeedback:u,label:d,ref:f,valid:p,validFeedback:m})=>{let h=!!(l&&u),g=!!(p&&m)&&!h;return!d&&!s&&!u&&!m&&!o?a:/* @__PURE__ */ r.createElement(`div`,{className:i(`form-field`,o),ref:f},d&&/* @__PURE__ */ r.createElement(n,{htmlFor:c.input,id:c.label},d),a,s&&/* @__PURE__ */ r.createElement(t,{id:c.help},s),h&&/* @__PURE__ */ r.createElement(e,{id:c.feedback,invalid:!0},u),g&&/* @__PURE__ */ r.createElement(e,{id:c.feedback,valid:!0},m))};export{a as t};
+//# sourceMappingURL=renderFormField-CaZ8-xrn.js.map

package/dist/chunks/{renderFormField-_6WswnEX.js.map → renderFormField-CaZ8-xrn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"renderFormField-_6WswnEX.js","names":["FormFeedback","FormLabel","React","classNames","renderFormField","showInvalidFeedback","invalid","invalidFeedback","showValidFeedback","valid","validFeedback","label","help","className","children","ids","FormHelp"],"sources":["../../src/components/form-field/renderFormField.tsx"],"sourcesContent":["import React, { ReactNode, Ref } from 'react'\nimport classNames from 'classnames'\n\nimport { FormFeedback } from '../form/FormFeedback'\nimport { FormHelp } from '../form/FormHelp'\nimport { FormLabel } from '../form/FormLabel'\n\nexport interface FormFieldIds {\n  feedback?: string\n  help?: string\n  input?: string\n  /**\n   * The label's own id, for controls with no single input to associate via `htmlFor` (e.g. a\n   * multi-input group) — reference it from the control's own `aria-labelledby` instead.\n   */\n  label?: string\n}\n\nexport interface RenderFormFieldOptions {\n  children: ReactNode\n  className?: string\n  help?: ReactNode\n  ids?: FormFieldIds\n  invalid?: boolean\n  invalidFeedback?: ReactNode\n  label?: ReactNode\n  ref?: Ref<HTMLDivElement>\n  valid?: boolean\n  validFeedback?: ReactNode\n}\n\n// Shared `.form-field` grid wrapper for label/control/help/feedback — see\n// https://chassis-ui.com/css/docs/forms/form-field. Renders `children` bare when none of\n// label/help/validFeedback/invalidFeedback are set, so field-capable leaves stay drop-in\n// compatible until a consumer opts into the wrapping.\nexport const renderFormField = ({\n  children,\n  className,\n  help,\n  ids = {},\n  invalid,\n  invalidFeedback,\n  label,\n  ref,\n  valid,\n  validFeedback\n}: RenderFormFieldOptions): ReactNode => {\n  // At most one feedback node renders, and `invalid` wins: both carry the same `ids.feedback`,\n  // so rendering the pair (which `invalid` + `valid` set together used to do) put a duplicate id\n  // in the DOM and left every control's `aria-describedby` pointing at an ambiguous target —\n  // axe's `duplicate-id-aria`. `useFormField` only ever budgets one feedback id for the same\n  // reason. Contradictory state, but nothing in the types rules it out and ten components route\n  // through here.\n  const showInvalidFeedback = Boolean(invalid && invalidFeedback)\n  const showValidFeedback = Boolean(valid && validFeedback) && !showInvalidFeedback\n\n  // `className` alone is enough to warrant the wrapper: it has nowhere else to land, and\n  // returning `children` bare (the drop-in-compatibility path every field-capable leaf relies on\n  // until a consumer opts into wrapping) silently dropped it. Only `FormField` — the standalone\n  // \"wrap this yourself\" component — passes one, so this is exactly the case where the caller\n  // asked for a `.form-field` element by hand.\n  // Feedback that is given wraps the control whether or not it shows: a control whose validity\n  // changes while it has focus (a `TimeField` typed out of its range) was otherwise moved into\n  // the new wrapper, which remounts it, and focus fell to the page.\n  if (!label && !help && !invalidFeedback && !validFeedback && !className) {\n    return children\n  }\n\n  return (\n    <div className={classNames('form-field', className)} ref={ref}>\n      {label && (\n        <FormLabel htmlFor={ids.input} id={ids.label}>\n          {label}\n        </FormLabel>\n      )}\n      {children}\n      {help && <FormHelp id={ids.help}>{help}</FormHelp>}\n      {showInvalidFeedback && (\n        <FormFeedback id={ids.feedback} invalid>\n          {invalidFeedback}\n        </FormFeedback>\n      )}\n      {showValidFeedback && (\n        <FormFeedback id={ids.feedback} valid>\n          {validFeedback}\n        </FormFeedback>\n      )}\n    </div>\n  )\n}\n"],"mappings":"A,wIAmCA,MAAaI,GAAmB,CAC9B,WACA,YACA,OACA,MAAM,CAAC,EACP,UACA,kBACA,QACA,MACA,QACA,mBACuC,CAOvC,IAAMC,EAAsB,GAAQC,GAAWC,GACzCC,EAAoB,GAAQC,GAASC,IAAkB,CAACL,EAc9D,MAJI,CAACM,GAAS,CAACC,GAAQ,CAACL,GAAmB,CAACG,GAAiB,CAACG,EACrDC,EAIP,kBAAA,cAAC,MAAD,CAAK,UAAWX,EAAW,aAAcU,CAAS,EAAQ,KAkBrD,EAjBFF,GACC,kBAAA,cAACV,EAAD,CAAW,QAASc,EAAI,MAAO,GAAIA,EAAI,KAE5B,EADRJ,CACQ,EAEZG,EACAF,GAAQ,kBAAA,cAACI,EAAD,CAAU,GAAID,EAAI,IAAsB,EAAfH,CAAe,EAChDP,GACC,kBAAA,cAACL,EAAD,CAAc,GAAIe,EAAI,SAAU,QAAA,EAElB,EADXR,CACW,EAEfC,GACC,kBAAA,cAACR,EAAD,CAAc,GAAIe,EAAI,SAAU,MAAA,EAElB,EADXL,CACW,CAEb,CAET,E"}
+{"version":3,"file":"renderFormField-CaZ8-xrn.js","names":["FormFeedback","FormLabel","React","classNames","renderFormField","showInvalidFeedback","invalid","invalidFeedback","showValidFeedback","valid","validFeedback","label","help","className","children","ids","FormHelp"],"sources":["../../src/components/form-field/renderFormField.tsx"],"sourcesContent":["import React, { ReactNode, Ref } from 'react'\nimport classNames from 'classnames'\n\nimport { FormFeedback } from '../form/FormFeedback'\nimport { FormHelp } from '../form/FormHelp'\nimport { FormLabel } from '../form/FormLabel'\n\nexport interface FormFieldIds {\n  feedback?: string\n  help?: string\n  input?: string\n  /**\n   * The label's own id, for controls with no single input to associate via `htmlFor` (e.g. a\n   * multi-input group) — reference it from the control's own `aria-labelledby` instead.\n   */\n  label?: string\n}\n\nexport interface RenderFormFieldOptions {\n  children: ReactNode\n  className?: string\n  help?: ReactNode\n  ids?: FormFieldIds\n  invalid?: boolean\n  invalidFeedback?: ReactNode\n  label?: ReactNode\n  ref?: Ref<HTMLDivElement>\n  valid?: boolean\n  validFeedback?: ReactNode\n}\n\n// Shared `.form-field` grid wrapper for label/control/help/feedback — see\n// https://chassis-ui.com/css/docs/forms/form-field. Renders `children` bare when none of\n// label/help/validFeedback/invalidFeedback are set, so field-capable leaves stay drop-in\n// compatible until a consumer opts into the wrapping.\nexport const renderFormField = ({\n  children,\n  className,\n  help,\n  ids = {},\n  invalid,\n  invalidFeedback,\n  label,\n  ref,\n  valid,\n  validFeedback\n}: RenderFormFieldOptions): ReactNode => {\n  // At most one feedback node renders, and `invalid` wins: both carry the same `ids.feedback`,\n  // so rendering the pair (which `invalid` + `valid` set together used to do) put a duplicate id\n  // in the DOM and left every control's `aria-describedby` pointing at an ambiguous target —\n  // axe's `duplicate-id-aria`. `useFormField` only ever budgets one feedback id for the same\n  // reason. Contradictory state, but nothing in the types rules it out and ten components route\n  // through here.\n  const showInvalidFeedback = Boolean(invalid && invalidFeedback)\n  const showValidFeedback = Boolean(valid && validFeedback) && !showInvalidFeedback\n\n  // `className` alone is enough to warrant the wrapper: it has nowhere else to land, and\n  // returning `children` bare (the drop-in-compatibility path every field-capable leaf relies on\n  // until a consumer opts into wrapping) silently dropped it. Only `FormField` — the standalone\n  // \"wrap this yourself\" component — passes one, so this is exactly the case where the caller\n  // asked for a `.form-field` element by hand.\n  // Feedback that is given wraps the control whether or not it shows: a control whose validity\n  // changes while it has focus (a `TimeField` typed out of its range) was otherwise moved into\n  // the new wrapper, which remounts it, and focus fell to the page.\n  if (!label && !help && !invalidFeedback && !validFeedback && !className) {\n    return children\n  }\n\n  return (\n    <div className={classNames('form-field', className)} ref={ref}>\n      {label && (\n        <FormLabel htmlFor={ids.input} id={ids.label}>\n          {label}\n        </FormLabel>\n      )}\n      {children}\n      {help && <FormHelp id={ids.help}>{help}</FormHelp>}\n      {showInvalidFeedback && (\n        <FormFeedback id={ids.feedback} invalid>\n          {invalidFeedback}\n        </FormFeedback>\n      )}\n      {showValidFeedback && (\n        <FormFeedback id={ids.feedback} valid>\n          {validFeedback}\n        </FormFeedback>\n      )}\n    </div>\n  )\n}\n"],"mappings":"A,wIAmCA,MAAaI,GAAmB,CAC9B,WACA,YACA,OACA,MAAM,CAAC,EACP,UACA,kBACA,QACA,MACA,QACA,mBACuC,CAOvC,IAAMC,EAAsB,GAAQC,GAAWC,GACzCC,EAAoB,GAAQC,GAASC,IAAkB,CAACL,EAc9D,MAJI,CAACM,GAAS,CAACC,GAAQ,CAACL,GAAmB,CAACG,GAAiB,CAACG,EACrDC,EAIP,kBAAA,cAAC,MAAD,CAAK,UAAWX,EAAW,aAAcU,CAAS,EAAQ,KAkBrD,EAjBFF,GACC,kBAAA,cAACV,EAAD,CAAW,QAASc,EAAI,MAAO,GAAIA,EAAI,KAE5B,EADRJ,CACQ,EAEZG,EACAF,GAAQ,kBAAA,cAACI,EAAD,CAAU,GAAID,EAAI,IAAsB,EAAfH,CAAe,EAChDP,GACC,kBAAA,cAACL,EAAD,CAAc,GAAIe,EAAI,SAAU,QAAA,EAElB,EADXR,CACW,EAEfC,GACC,kBAAA,cAACR,EAAD,CAAc,GAAIe,EAAI,SAAU,MAAA,EAElB,EADXL,CACW,CAEb,CAET,E"}

package/dist/chunks/{search-field-OFsb3t4L.js → search-field-CIYtMraB.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useFormField-DH2tlc3e.js";import{t as n}from"./useHeldBack-eeTfpa_t.js";import{t as r}from"./iconSlot-DU_WcSL_.js";import{t as i}from"./renderFormField-_6WswnEX.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import{r as o,t as s}from"./unhandledProps-9Kdj7WVf.js";import c,{forwardRef as l,useRef as u}from"react";import d from"classnames";import{mergeProps as f,useButton as p,useSearchField as m}from"react-aria";import{useSearchFieldState as h}from"react-stately";function g({ariaLabel:e,buttonProps:t,icon:n}){let i=u(null),{buttonProps:a}=p({...t,"aria-label":e??t[`aria-label`]},i);return/* @__PURE__ */ c.createElement(`button`,{...a,className:`button icon-only input-adorn search-field-clear`,ref:i},/* @__PURE__ */ c.createElement(r,{icon:`clear`,override:n}))}const _=l(({className:l,clearAriaLabel:p,clearIcon:_,defaultValue:v,disabled:y,help:b,id:x,invalid:S,invalidFeedback:C,label:w,onChange:T,onClear:E,onSubmit:D,readOnly:O,searchIcon:k,size:A,style:j,valid:M,validFeedback:N,value:P,...F},I)=>{let L=u(null),R=e(I,L),{invalid:z,valid:B}=n(L,{invalid:S,valid:M}),{describedBy:V,feedbackId:H,helpId:U,inputId:W,labelId:G,labelledBy:K}=t({ariaDescribedBy:F[`aria-describedby`],ariaLabelledBy:F[`aria-labelledby`],help:b,id:x,invalid:z,invalidFeedback:C,label:w,valid:B,validFeedback:N}),q={...F,"aria-describedby":V,"aria-labelledby":K,defaultValue:v,id:W,isDisabled:y,isInvalid:z,isReadOnly:O,onChange:T,onClear:E,onSubmit:D,value:P},J=h(q),{clearButtonProps:Y,inputProps:X}=m(q,J,L);return i({children:/* @__PURE__ */ c.createElement(`div`,{className:d(`form-input`,`search-field`,A,l),style:j},k!==!1&&/* @__PURE__ */ c.createElement(`span`,{className:`input-adorn search-field-icon`},/* @__PURE__ */ c.createElement(r,{icon:`search`,override:k})),/* @__PURE__ */ c.createElement(`input`,{...o(f(X,{onKeyDown:e=>{let t=e.shiftKey||e.altKey||e.ctrlKey||e.metaKey;D&&e.key===`Enter`&&!e.nativeEvent.isComposing&&(t||O)&&(e.preventDefault(),D(J.value))}}),F,s),"aria-describedby":V,className:d(`ghost-input`,a(z,B)),ref:R}),J.value!==``&&!y&&!O&&/* @__PURE__ */ c.createElement(g,{ariaLabel:p,buttonProps:Y,icon:_})),help:b,ids:{feedback:H,help:U,input:W,label:G},invalid:z,invalidFeedback:C,label:w,valid:B,validFeedback:N})});_.displayName=`SearchField`;export{_ as t};
-//# sourceMappingURL=search-field-OFsb3t4L.js.map
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./useFormField-q21MOgh8.js";import{t as n}from"./useHeldBack-o-CsPcSe.js";import{t as r}from"./iconSlot-DU_WcSL_.js";import{t as i}from"./renderFormField-CaZ8-xrn.js";import{t as a}from"./validationClassName-gRGs4KBm.js";import{r as o,t as s}from"./unhandledProps-9Kdj7WVf.js";import c,{forwardRef as l,useRef as u}from"react";import d from"classnames";import{mergeProps as f,useButton as p,useSearchField as m}from"react-aria";import{useSearchFieldState as h}from"react-stately";function g({ariaLabel:e,buttonProps:t,icon:n}){let i=u(null),{buttonProps:a}=p({...t,"aria-label":e??t[`aria-label`]},i);return/* @__PURE__ */ c.createElement(`button`,{...a,className:`button icon-only input-adorn search-field-clear`,ref:i},/* @__PURE__ */ c.createElement(r,{icon:`clear`,override:n}))}const _=l(({className:l,clearAriaLabel:p,clearIcon:_,defaultValue:v,disabled:y,help:b,id:x,invalid:S,invalidFeedback:C,label:w,onChange:T,onClear:E,onSubmit:D,readOnly:O,searchIcon:k,size:A,style:j,valid:M,validFeedback:N,value:P,...F},I)=>{let L=u(null),R=e(I,L),{invalid:z,valid:B}=n(L,{invalid:S,valid:M}),{describedBy:V,feedbackId:H,helpId:U,inputId:W,labelId:G,labelledBy:K}=t({ariaDescribedBy:F[`aria-describedby`],ariaLabelledBy:F[`aria-labelledby`],help:b,id:x,invalid:z,invalidFeedback:C,label:w,valid:B,validFeedback:N}),q={...F,"aria-describedby":V,"aria-labelledby":K,defaultValue:v,id:W,isDisabled:y,isInvalid:z,isReadOnly:O,onChange:T,onClear:E,onSubmit:D,value:P},J=h(q),{clearButtonProps:Y,inputProps:X}=m(q,J,L);return i({children:/* @__PURE__ */ c.createElement(`div`,{className:d(`form-input`,`search-field`,A,l),style:j},k!==!1&&/* @__PURE__ */ c.createElement(`span`,{className:`input-adorn search-field-icon`},/* @__PURE__ */ c.createElement(r,{icon:`search`,override:k})),/* @__PURE__ */ c.createElement(`input`,{...o(f(X,{onKeyDown:e=>{let t=e.shiftKey||e.altKey||e.ctrlKey||e.metaKey;D&&e.key===`Enter`&&!e.nativeEvent.isComposing&&(t||O)&&(e.preventDefault(),D(J.value))}}),F,s),"aria-describedby":V,className:d(`ghost-input`,a(z,B)),ref:R}),J.value!==``&&!y&&!O&&/* @__PURE__ */ c.createElement(g,{ariaLabel:p,buttonProps:Y,icon:_})),help:b,ids:{feedback:H,help:U,input:W,label:G},invalid:z,invalidFeedback:C,label:w,valid:B,validFeedback:N})});_.displayName=`SearchField`;export{_ as t};
+//# sourceMappingURL=search-field-CIYtMraB.js.map

package/dist/chunks/{search-field-OFsb3t4L.js.map → search-field-CIYtMraB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-field-OFsb3t4L.js","names":["useForkedRef","useHeldBack","IconSlot","renderFormField","validationClassName","mergeUnhandledProps","TEXT_FIELD_PROPS","React","classNames","ClearButton","ref","useRef","props","useButton","buttonProps","ariaLabel","icon","SearchField","forwardRef","invalidProp","validProp","rest","inputRef","forkedRef","useFormField","fieldProps","describedBy","labelledBy","inputId","disabled","invalid","readOnly","state","useSearchFieldState","useSearchField","size","className","searchIcon","mergeProps","inputProps","modified","event","onSubmit","valid","clearAriaLabel","clearButtonProps","clearIcon","feedbackId","helpId","labelId"],"sources":["../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  RefObject,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { AriaSearchFieldProps, mergeProps, useButton, useSearchField } from 'react-aria'\nimport { useSearchFieldState } from 'react-stately'\n\nimport './SearchField.scss'\nimport { useForkedRef, useFormField, useHeldBack } from '../../hooks'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../icon/iconSlot'\nimport { mergeUnhandledProps, TEXT_FIELD_PROPS } from '../../utils/unhandledProps'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface SearchFieldProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'onChange' | 'onSubmit' | 'size' | 'type' | 'value'\n> {\n  /**\n   * The accessible name of the clear button. Defaults to react-aria's, in the locale's language\n   * (\"Clear search\").\n   */\n  clearAriaLabel?: string\n  /**\n   * The icon of the clear button, in place of `IconProvider`'s `clear` icon.\n   */\n  clearIcon?: IconValue\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the field, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below it.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below it when `invalid` is set, and after a submit\n   * the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the input.\n   */\n  label?: ReactNode\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Handler that is called when the field is cleared, by the clear button or the Escape key.\n   */\n  onClear?: () => void\n  /**\n   * Handler that is called when the Enter key is pressed, with the value. When set, Enter, with\n   * or without a modifier key, no longer submits the input's form.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * The icon at the field's start, in place of `IconProvider`'s `search` icon. `false` leaves it\n   * out.\n   */\n  searchIcon?: IconValue | false\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below it when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the field, controlled.\n   */\n  value?: string\n}\n\n// The clear button. A `<button>` react-aria keeps out of the tab order, since Escape does the\n// same; a press leaves focus on the input.\nfunction ClearButton({\n  ariaLabel,\n  buttonProps,\n  icon\n}: {\n  ariaLabel?: string\n  buttonProps: ReturnType<typeof useSearchField>['clearButtonProps']\n  icon?: IconValue\n}) {\n  const ref = useRef<HTMLButtonElement>(null)\n  const { buttonProps: props } = useButton(\n    { ...buttonProps, 'aria-label': ariaLabel ?? buttonProps['aria-label'] },\n    ref as RefObject<HTMLButtonElement | null>\n  )\n  return (\n    <button {...props} className=\"button icon-only input-adorn search-field-clear\" ref={ref}>\n      <IconSlot icon=\"clear\" override={icon} />\n    </button>\n  )\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      className,\n      clearAriaLabel,\n      clearIcon,\n      defaultValue,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      onChange,\n      onClear,\n      onSubmit,\n      readOnly,\n      searchIcon,\n      size,\n      style,\n      valid: validProp,\n      validFeedback,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const fieldProps = {\n      ...rest,\n      'aria-describedby': describedBy,\n      'aria-labelledby': labelledBy,\n      defaultValue,\n      id: inputId,\n      isDisabled: disabled,\n      isInvalid: invalid,\n      isReadOnly: readOnly,\n      onChange,\n      onClear,\n      onSubmit,\n      value\n    } as AriaSearchFieldProps\n    const state = useSearchFieldState(fieldProps)\n    const { clearButtonProps, inputProps } = useSearchField(fieldProps, state, inputRef)\n\n    // react-aria's Enter shortcut matches Enter alone, and a read-only field has none, so with\n    // `onSubmit` Shift+Enter, or Enter in a read-only field, would still submit the form.\n    const submitProps = {\n      onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n        const modified = event.shiftKey || event.altKey || event.ctrlKey || event.metaKey\n        if (!onSubmit || event.key !== 'Enter' || event.nativeEvent.isComposing) return\n        if (!modified && !readOnly) return\n        event.preventDefault()\n        onSubmit(state.value)\n      }\n    }\n\n    return renderFormField({\n      // The input adorn shape of chassis-css: a `.form-input` around a `.ghost-input`, which takes\n      // the validation classes, with the icon and the clear button as `.input-adorn`s. `style`\n      // goes on the wrapper, with `className`. `aria-describedby` after the spread: react-aria's\n      // own adds ids it never renders (FORMS.md, gotcha 6).\n      children: (\n        <div className={classNames('form-input', 'search-field', size, className)} style={style}>\n          {searchIcon !== false && (\n            <span className=\"input-adorn search-field-icon\">\n              <IconSlot icon=\"search\" override={searchIcon} />\n            </span>\n          )}\n          <input\n            {...mergeUnhandledProps(mergeProps(inputProps, submitProps), rest, TEXT_FIELD_PROPS)}\n            aria-describedby={describedBy}\n            className={classNames('ghost-input', validationClassName(invalid, valid))}\n            ref={forkedRef}\n          />\n          {state.value !== '' && !disabled && !readOnly && (\n            <ClearButton\n              ariaLabel={clearAriaLabel}\n              buttonProps={clearButtonProps}\n              icon={clearIcon}\n            />\n          )}\n        </div>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nSearchField.displayName = 'SearchField'\n"],"mappings":"A,8jBA0GA,SAASS,EAAY,CACnB,YACA,cACA,QAKC,CACD,IAAMC,EAAMC,EAA0B,IAAI,EACpC,CAAE,YAAaC,GAAUC,EAC7B,CAAE,GAAGC,EAAa,aAAcC,GAAaD,EAAY,aAAc,EACvEJ,CACF,EACA,MACE,kBAAA,cAAC,SAAD,CAAQ,GAAIE,EAAO,UAAU,kDAAuD,KAE5E,EADN,kBAAA,cAACV,EAAD,CAAU,KAAK,QAAQ,SAAUc,CAAO,CAAA,CAClC,CAEZ,CAEA,MAAaC,EAAcC,GAEvB,CACE,YACA,iBACA,YACA,eACA,WACA,OACA,KACA,QAASC,EACT,kBACA,QACA,WACA,UACA,WACA,WACA,aACA,OACA,QACA,MAAOC,EACP,gBACA,QACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWX,EAAyB,IAAI,EACxCY,EAAYvB,EAAaU,EAAKY,CAAQ,EAGtC,CAAE,UAAS,SAAUrB,EAAYqB,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAErF,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeI,EAAa,CACrF,gBAAiBH,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEKI,EAAa,CACjB,GAAGJ,EACH,mBAAoBK,EACpB,kBAAmBC,EACnB,eACA,GAAIC,EACJ,WAAYC,EACZ,UAAWC,EACX,WAAYC,EACZ,WACA,UACA,WACA,OACF,EACMC,EAAQC,EAAoBR,CAAU,EACtC,CAAE,mBAAkB,cAAeS,EAAeT,EAAYO,EAAOV,CAAQ,EAcnF,OAAOnB,EAAgB,CAKrB,SACE,kBAAA,cAAC,MAAD,CAAK,UAAWK,EAAW,aAAc,eAAgB2B,EAAMC,CAAS,EAAU,OAmB7E,EAlBFC,IAAe,IACd,kBAAA,cAAC,OAAD,CAAM,UAAU,+BAEV,EADJ,kBAAA,cAACnC,EAAD,CAAU,KAAK,SAAS,SAAUmC,CAAa,CAAA,CAC3C,EAER,kBAAA,cAAC,QAAD,CACE,GAAIhC,EAAoBiC,EAAWC,EAAY,CAtBrD,UAAY,GAA2C,CACrD,IAAMC,EAAWC,EAAM,UAAYA,EAAM,QAAUA,EAAM,SAAWA,EAAM,QACrEC,GAAYD,EAAM,MAAQ,SAAW,GAAM,YAAY,cACvDD,GAAaT,KAClBU,EAAM,eAAe,EACrBC,EAASV,EAAM,KAAK,EACtB,CAgB+D,CAAC,EAAGX,EAAMf,CAAgB,EACnF,mBAAkBoB,EAClB,UAAWlB,EAAW,cAAeJ,EAAoB0B,EAASa,CAAK,CAAC,EACxE,IAAKpB,CACN,CAAA,EACAS,EAAM,QAAU,IAAM,CAACH,GAAY,CAACE,GACnC,kBAAA,cAACtB,EAAD,CACE,UAAWmC,EACX,YAAaC,EACb,KAAMC,CACP,CAAA,CAEA,EAEP,OACA,IAAK,CAAE,SAAUC,EAAY,KAAMC,EAAQ,MAAOpB,EAAS,MAAOqB,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAY,YAAc,c"}
+{"version":3,"file":"search-field-CIYtMraB.js","names":["useForkedRef","useHeldBack","IconSlot","renderFormField","validationClassName","mergeUnhandledProps","TEXT_FIELD_PROPS","React","classNames","ClearButton","ref","useRef","props","useButton","buttonProps","ariaLabel","icon","SearchField","forwardRef","invalidProp","validProp","rest","inputRef","forkedRef","useFormField","fieldProps","describedBy","labelledBy","inputId","disabled","invalid","readOnly","state","useSearchFieldState","useSearchField","size","className","searchIcon","mergeProps","inputProps","modified","event","onSubmit","valid","clearAriaLabel","clearButtonProps","clearIcon","feedbackId","helpId","labelId"],"sources":["../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactNode,\n  RefObject,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\nimport { AriaSearchFieldProps, mergeProps, useButton, useSearchField } from 'react-aria'\nimport { useSearchFieldState } from 'react-stately'\n\nimport './SearchField.scss'\nimport { useForkedRef, useFormField, useHeldBack } from '../../hooks'\nimport { IconValue } from '../../utils/iconConfig'\nimport { IconSlot } from '../icon/iconSlot'\nimport { mergeUnhandledProps, TEXT_FIELD_PROPS } from '../../utils/unhandledProps'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface SearchFieldProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'defaultValue' | 'onChange' | 'onSubmit' | 'size' | 'type' | 'value'\n> {\n  /**\n   * The accessible name of the clear button. Defaults to react-aria's, in the locale's language\n   * (\"Clear search\").\n   */\n  clearAriaLabel?: string\n  /**\n   * The icon of the clear button, in place of `IconProvider`'s `clear` icon.\n   */\n  clearIcon?: IconValue\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * The value of the field, uncontrolled.\n   */\n  defaultValue?: string\n  /**\n   * Toggle the disabled state for the component.\n   */\n  disabled?: boolean\n  /**\n   * A description for the field, rendered below it.\n   */\n  help?: ReactNode\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below it when `invalid` is set, and after a submit\n   * the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the input.\n   */\n  label?: ReactNode\n  /**\n   * Handler that is called when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Handler that is called when the field is cleared, by the clear button or the Escape key.\n   */\n  onClear?: () => void\n  /**\n   * Handler that is called when the Enter key is pressed, with the value. When set, Enter, with\n   * or without a modifier key, no longer submits the input's form.\n   */\n  onSubmit?: (value: string) => void\n  /**\n   * Toggle the readonly state for the component.\n   */\n  readOnly?: boolean\n  /**\n   * The icon at the field's start, in place of `IconProvider`'s `search` icon. `false` leaves it\n   * out.\n   */\n  searchIcon?: IconValue | false\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below it when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The value of the field, controlled.\n   */\n  value?: string\n}\n\n// The clear button. A `<button>` react-aria keeps out of the tab order, since Escape does the\n// same; a press leaves focus on the input.\nfunction ClearButton({\n  ariaLabel,\n  buttonProps,\n  icon\n}: {\n  ariaLabel?: string\n  buttonProps: ReturnType<typeof useSearchField>['clearButtonProps']\n  icon?: IconValue\n}) {\n  const ref = useRef<HTMLButtonElement>(null)\n  const { buttonProps: props } = useButton(\n    { ...buttonProps, 'aria-label': ariaLabel ?? buttonProps['aria-label'] },\n    ref as RefObject<HTMLButtonElement | null>\n  )\n  return (\n    <button {...props} className=\"button icon-only input-adorn search-field-clear\" ref={ref}>\n      <IconSlot icon=\"clear\" override={icon} />\n    </button>\n  )\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      className,\n      clearAriaLabel,\n      clearIcon,\n      defaultValue,\n      disabled,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      onChange,\n      onClear,\n      onSubmit,\n      readOnly,\n      searchIcon,\n      size,\n      style,\n      valid: validProp,\n      validFeedback,\n      value,\n      ...rest\n    },\n    ref\n  ) => {\n    const inputRef = useRef<HTMLInputElement>(null)\n    const forkedRef = useForkedRef(ref, inputRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`):\n    // react-aria cancels the browser's own message, and the form stayed with nothing to say why.\n    const { invalid, valid } = useHeldBack(inputRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const fieldProps = {\n      ...rest,\n      'aria-describedby': describedBy,\n      'aria-labelledby': labelledBy,\n      defaultValue,\n      id: inputId,\n      isDisabled: disabled,\n      isInvalid: invalid,\n      isReadOnly: readOnly,\n      onChange,\n      onClear,\n      onSubmit,\n      value\n    } as AriaSearchFieldProps\n    const state = useSearchFieldState(fieldProps)\n    const { clearButtonProps, inputProps } = useSearchField(fieldProps, state, inputRef)\n\n    // react-aria's Enter shortcut matches Enter alone, and a read-only field has none, so with\n    // `onSubmit` Shift+Enter, or Enter in a read-only field, would still submit the form.\n    const submitProps = {\n      onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => {\n        const modified = event.shiftKey || event.altKey || event.ctrlKey || event.metaKey\n        if (!onSubmit || event.key !== 'Enter' || event.nativeEvent.isComposing) return\n        if (!modified && !readOnly) return\n        event.preventDefault()\n        onSubmit(state.value)\n      }\n    }\n\n    return renderFormField({\n      // The input adorn shape of chassis-css: a `.form-input` around a `.ghost-input`, which takes\n      // the validation classes, with the icon and the clear button as `.input-adorn`s. `style`\n      // goes on the wrapper, with `className`. `aria-describedby` after the spread: react-aria's\n      // own adds ids it never renders (FORMS.md, gotcha 6).\n      children: (\n        <div className={classNames('form-input', 'search-field', size, className)} style={style}>\n          {searchIcon !== false && (\n            <span className=\"input-adorn search-field-icon\">\n              <IconSlot icon=\"search\" override={searchIcon} />\n            </span>\n          )}\n          <input\n            {...mergeUnhandledProps(mergeProps(inputProps, submitProps), rest, TEXT_FIELD_PROPS)}\n            aria-describedby={describedBy}\n            className={classNames('ghost-input', validationClassName(invalid, valid))}\n            ref={forkedRef}\n          />\n          {state.value !== '' && !disabled && !readOnly && (\n            <ClearButton\n              ariaLabel={clearAriaLabel}\n              buttonProps={clearButtonProps}\n              icon={clearIcon}\n            />\n          )}\n        </div>\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nSearchField.displayName = 'SearchField'\n"],"mappings":"A,8jBA0GA,SAASS,EAAY,CACnB,YACA,cACA,QAKC,CACD,IAAMC,EAAMC,EAA0B,IAAI,EACpC,CAAE,YAAaC,GAAUC,EAC7B,CAAE,GAAGC,EAAa,aAAcC,GAAaD,EAAY,aAAc,EACvEJ,CACF,EACA,MACE,kBAAA,cAAC,SAAD,CAAQ,GAAIE,EAAO,UAAU,kDAAuD,KAE5E,EADN,kBAAA,cAACV,EAAD,CAAU,KAAK,QAAQ,SAAUc,CAAO,CAAA,CAClC,CAEZ,CAEA,MAAaC,EAAcC,GAEvB,CACE,YACA,iBACA,YACA,eACA,WACA,OACA,KACA,QAASC,EACT,kBACA,QACA,WACA,UACA,WACA,WACA,aACA,OACA,QACA,MAAOC,EACP,gBACA,QACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWX,EAAyB,IAAI,EACxCY,EAAYvB,EAAaU,EAAKY,CAAQ,EAGtC,CAAE,UAAS,SAAUrB,EAAYqB,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAErF,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeI,EAAa,CACrF,gBAAiBH,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEKI,EAAa,CACjB,GAAGJ,EACH,mBAAoBK,EACpB,kBAAmBC,EACnB,eACA,GAAIC,EACJ,WAAYC,EACZ,UAAWC,EACX,WAAYC,EACZ,WACA,UACA,WACA,OACF,EACMC,EAAQC,EAAoBR,CAAU,EACtC,CAAE,mBAAkB,cAAeS,EAAeT,EAAYO,EAAOV,CAAQ,EAcnF,OAAOnB,EAAgB,CAKrB,SACE,kBAAA,cAAC,MAAD,CAAK,UAAWK,EAAW,aAAc,eAAgB2B,EAAMC,CAAS,EAAU,OAmB7E,EAlBFC,IAAe,IACd,kBAAA,cAAC,OAAD,CAAM,UAAU,+BAEV,EADJ,kBAAA,cAACnC,EAAD,CAAU,KAAK,SAAS,SAAUmC,CAAa,CAAA,CAC3C,EAER,kBAAA,cAAC,QAAD,CACE,GAAIhC,EAAoBiC,EAAWC,EAAY,CAtBrD,UAAY,GAA2C,CACrD,IAAMC,EAAWC,EAAM,UAAYA,EAAM,QAAUA,EAAM,SAAWA,EAAM,QACrEC,GAAYD,EAAM,MAAQ,SAAW,GAAM,YAAY,cACvDD,GAAaT,KAClBU,EAAM,eAAe,EACrBC,EAASV,EAAM,KAAK,EACtB,CAgB+D,CAAC,EAAGX,EAAMf,CAAgB,EACnF,mBAAkBoB,EAClB,UAAWlB,EAAW,cAAeJ,EAAoB0B,EAASa,CAAK,CAAC,EACxE,IAAKpB,CACN,CAAA,EACAS,EAAM,QAAU,IAAM,CAACH,GAAY,CAACE,GACnC,kBAAA,cAACtB,EAAD,CACE,UAAWmC,EACX,YAAaC,EACb,KAAMC,CACP,CAAA,CAEA,EAEP,OACA,IAAK,CAAE,SAAUC,EAAY,KAAMC,EAAQ,MAAOpB,EAAS,MAAOqB,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAY,YAAc,c"}

package/dist/chunks/select-CkucgA6H.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{C as e}from"./slot-DagH0Gxq.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{t as n}from"./useFormField-q21MOgh8.js";import{t as r}from"./useFormReset-BK5Yb24_.js";import{t as i}from"./useHeldBack-o-CsPcSe.js";import{t as a}from"./renderFormField-CaZ8-xrn.js";import{t as o}from"./validationClassName-gRGs4KBm.js";import{t as s}from"./nativeFormReset-DgsRU9SA.js";import c,{forwardRef as l,useRef as u}from"react";import d from"classnames";const f=l(({adornEnd:l,adornStart:f,children:p,className:m,help:h,htmlSize:g,id:_,invalid:v,invalidFeedback:y,label:b,multiple:x,options:S,placeholder:C,size:w,valid:T,validFeedback:E,...D},O)=>{let k=u(null),A=t(O,k),{invalid:j,valid:M}=i(k,{invalid:v,valid:T}),N=Array.isArray(S)?S.filter(e=>typeof e==`object`&&!!e.selected).map(e=>e.value==null?e.label??``:String(e.value)):[];e(!x&&N.length>1,"Select: more than one option has `selected: true` but `multiple` is not set — only the last one will be selected, matching native <select> behavior.");let P=D.value!==void 0||D.defaultValue!==void 0?void 0:N.length?x?N:N[N.length-1]:C&&!x?``:void 0;r(k,D.value??D.defaultValue??P,e=>{e!==void 0&&k.current&&s(k.current,e)},D.form);let{describedBy:F,feedbackId:I,helpId:L,inputId:R,labelId:z,labelledBy:B}=n({ariaDescribedBy:D[`aria-describedby`],ariaLabelledBy:D[`aria-labelledby`],help:h,id:_,invalid:j,invalidFeedback:y,label:b,valid:M,validFeedback:E}),V=f!=null||l!=null,H=!x&&(!g||g<=1),U=d(V?`ghost-input`:`form-input`,!V&&w,o(j,M),!V&&m),W=e=>{let t=k.current,n=e.target;if(t&&!t.disabled&&H&&n!==t&&!n.closest(`button, a`)){t.focus();try{t.showPicker?.()}catch{}}},G=/* @__PURE__ */ c.createElement(`select`,{...D,"aria-describedby":F,"aria-labelledby":D[`aria-labelledby`]&&B,"aria-invalid":j||void 0,className:U,id:R,multiple:x,ref:A,size:g,...P!==void 0&&{defaultValue:P}},C&&/* @__PURE__ */ c.createElement(`option`,{value:``,disabled:!0},C),S?S.map((e,t)=>/* @__PURE__ */ c.createElement(`option`,{...typeof e==`object`&&e.disabled&&{disabled:e.disabled},...typeof e==`object`&&e.value!=null&&{value:e.value},key:t},typeof e==`string`?e:e.label??String(e.value??``))):p),K=V?/* @__PURE__ */ c.createElement(`div`,{className:d(`form-input`,H&&`form-caret`,w,m),onClick:W},f,G,l):G;return a({children:K,help:h,ids:{feedback:I,help:L,input:R,label:z},invalid:j,invalidFeedback:y,label:b,valid:M,validFeedback:E})});f.displayName=`Select`;export{f as t};
+//# sourceMappingURL=select-CkucgA6H.js.map

package/dist/chunks/select-CkucgA6H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-CkucgA6H.js","names":["devWarning","useFormField","useFormReset","useHeldBack","renderFormField","validationClassName","resetNativeControl","React","classNames","Select","forwardRef","invalidProp","validProp","rest","selectRef","useRef","forkedRef","useForkedRef","ref","selectedValues","options","option","multiple","inferredDefaultValue","placeholder","initial","hasAdorn","adornStart","adornEnd","isDropdown","htmlSize","selectClassName","size","invalid","valid","className","handleWrapperClick","node","target","event","select","describedBy","labelledBy","inputId","index","children","rendered","feedbackId","helpId","labelId"],"sources":["../../src/components/select/Select.tsx"],"sourcesContent":["import React, {\n  ChangeEventHandler,\n  forwardRef,\n  SelectHTMLAttributes,\n  MouseEventHandler,\n  ReactNode,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useForkedRef, useFormField, useFormReset, useHeldBack } from '../../hooks'\nimport { resetNativeControl } from '../../utils/nativeFormReset'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { devWarning } from '../../utils/devWarning'\n\nexport interface SelectOptionDef {\n  /**\n   * Marks the option as disabled — it can't be clicked or reached via the keyboard.\n   */\n  disabled?: boolean\n  /**\n   * Label text rendered inside the option. Falls back to the browser's default (the `value`,\n   * stringified) when omitted.\n   */\n  label?: string\n  /**\n   * Marks the option as selected by default (uncontrolled) — resolved into the select's own\n   * `defaultValue`, and ignored when the select's `value`/`defaultValue` is set directly. Set on\n   * more than one option only when `multiple` is also set on `Select` — otherwise, matching\n   * native `<select>` behavior, only the last option with `selected` set wins.\n   */\n  selected?: boolean\n  /**\n   * The option's value attribute.\n   */\n  value?: string | number\n}\n// The attributes of a `<select>`: typed as an input's, it took `readOnly`, `pattern`, `min` and\n// the like, which a select ignores.\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {\n  /**\n   * Content rendered at the select's trailing edge, e.g. a `InputAdorn` icon, text, or button.\n   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a\n   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.\n   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the\n   * native element itself no longer fills the wrapper's full width.\n   */\n  adornEnd?: ReactNode\n  /**\n   * Content rendered at the select's leading edge, e.g. a `InputAdorn` icon, text, or button.\n   * Setting either `adornStart` or `adornEnd` renders a `.form-input` wrapper around a\n   * `.ghost-input`, matching chassis-css's [input help](https://chassis-ui.com/css/docs/forms/input-adorn) pattern.\n   * Clicking anywhere in the wrapper (other than an actionable adorn) opens the select, since the\n   * native element itself no longer fills the wrapper's full width.\n   */\n  adornStart?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * A description for the field, rendered below the select.\n   */\n  help?: ReactNode\n  /**\n   * Specifies the number of visible options in a drop-down list.\n   */\n  htmlSize?: number\n  /**\n   * Set component validation state to invalid. Left unset, the component shows as invalid by itself\n   * from a submit it held back (an empty `required` one, say) until it no longer would, or its\n   * form is reset. Set it, to `false` too, and it alone decides.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the select when `invalid` is set, and after a\n   * submit the field held back, until it no longer would.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with this select.\n   */\n  label?: ReactNode\n  /**\n   * Allows more than one option to be selected at once. Pass `value` as a string array (or set\n   * `selected` on more than one `options` entry) to control the selection.\n   */\n  multiple?: boolean\n  /**\n   * Method called immediately after the `value` prop changes.\n   */\n  onChange?: ChangeEventHandler<HTMLSelectElement>\n  /**\n   * Options list of the select component. Available keys: `label`, `value`, `disabled`,\n   * `selected`.\n   * Examples:\n   * - `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`\n   * - `options={['js', 'html']}`\n   */\n  options?: SelectOptionDef[] | string[]\n  /**\n   * Renders a disabled placeholder option as the first item (e.g. `\"Select a country…\"`).\n   * The option has an empty value so it is not selectable once another option is chosen. A\n   * single select with no `value`, `defaultValue` or `selected` option starts on it, so its value\n   * is `''` and a `required` one holds its form back until an option is chosen.\n   */\n  placeholder?: string\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the select when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The `value` attribute of component.\n   *\n   * @controllable onChange\n   * */\n  value?: string | string[] | number\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      adornEnd,\n      adornStart,\n      children,\n      className,\n      help,\n      htmlSize,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      multiple,\n      options,\n      placeholder,\n      size,\n      valid: validProp,\n      validFeedback,\n      ...rest\n    },\n    ref\n  ) => {\n    const selectRef = useRef<HTMLSelectElement>(null)\n    const forkedRef = useForkedRef(ref, selectRef)\n    // Shown as invalid from a submit it held back until it no longer would (`useHeldBack`). The\n    // browser's own message stays: no react-aria hook is given this control to cancel it. It is\n    // on the first invalid control of the form alone, and gone at the next click.\n    const { invalid, valid } = useHeldBack(selectRef, { invalid: invalidProp, valid: validProp })\n\n    const selectedValues = Array.isArray(options)\n      ? options\n          .filter(\n            (option): option is SelectOptionDef => typeof option === 'object' && !!option.selected\n          )\n          // The value the option renders with: its `value`, else its text, as for a native\n          // `<option>` with no `value` attribute.\n          .map((option) => (option.value != null ? String(option.value) : (option.label ?? '')))\n      : []\n\n    devWarning(\n      !multiple && selectedValues.length > 1,\n      'Select: more than one option has `selected: true` but `multiple` is not set — only ' +\n        'the last one will be selected, matching native <select> behavior.'\n    )\n\n    // React warns against setting `selected` directly on <option>, recommending `defaultValue`/\n    // `value` on <select> instead — so `options[].selected` is resolved into a `defaultValue`\n    // here rather than rendered as an attribute. Left alone when the caller already controls\n    // `value`/`defaultValue` themselves. A single select with a `placeholder` and nothing chosen\n    // starts on the placeholder: a browser selects the first option that isn't disabled instead,\n    // which made that option the value and let a `required` select submit with nothing chosen.\n    const isUnset = rest.value === undefined && rest.defaultValue === undefined\n    const inferredDefaultValue = !isUnset\n      ? undefined\n      : selectedValues.length\n        ? multiple\n          ? selectedValues\n          : selectedValues[selectedValues.length - 1]\n        : placeholder && !multiple\n          ? ''\n          : undefined\n\n    // A reset of the form puts the select back to its first value, controlled or not, and\n    // reports it (`resetNativeControl`). With no value known, the browser's own reset stands.\n    useFormReset(\n      selectRef,\n      rest.value ?? rest.defaultValue ?? inferredDefaultValue,\n      (initial) => {\n        if (initial !== undefined && selectRef.current)\n          resetNativeControl(selectRef.current, initial)\n      },\n      rest.form\n    )\n\n    const { describedBy, feedbackId, helpId, inputId, labelId, labelledBy } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const hasAdorn = adornStart != null || adornEnd != null\n    // A caret can only pop the dropdown open when the select actually renders as one - an inline\n    // listbox (`multiple`, or a `size` greater than 1) has no picker to show.\n    const isDropdown = !multiple && (!htmlSize || htmlSize <= 1)\n\n    // chassis-css's `.form-input:has(.ghost-input.is-valid)` selector reads validation state off\n    // the inner select, not the wrapper, once adorns turn `.form-input` into a flex container -\n    // see https://chassis-ui.com/css/docs/forms/input-adorn.\n    const selectClassName = classNames(\n      hasAdorn ? 'ghost-input' : 'form-input',\n      !hasAdorn && size,\n      validationClassName(invalid, valid),\n      !hasAdorn && className\n    )\n\n    const handleWrapperClick: MouseEventHandler<HTMLDivElement> = (event) => {\n      const node = selectRef.current\n      const target = event.target as HTMLElement\n      if (!node || node.disabled || !isDropdown || target === node || target.closest('button, a'))\n        return\n      node.focus()\n      try {\n        // showPicker() opens the native dropdown from a proxy click; unsupported browsers fall\n        // back to the focus() above, same as tabbing to a bare select and pressing Space/Down.\n        node.showPicker?.()\n      } catch {\n        // Can throw without a user activation or under a policy-restricted embed - focus() still\n        // leaves the select reachable via the keyboard.\n      }\n    }\n\n    const select = (\n      <select\n        {...rest}\n        aria-describedby={describedBy}\n        // A caller's `aria-labelledby` adds to the visible label, as in `TextInput`, rather than\n        // taking its place: it outranks the `<label for>`.\n        aria-labelledby={rest['aria-labelledby'] && labelledBy}\n        aria-invalid={invalid || undefined}\n        className={selectClassName}\n        id={inputId}\n        multiple={multiple}\n        ref={forkedRef}\n        size={htmlSize}\n        {...(inferredDefaultValue !== undefined && { defaultValue: inferredDefaultValue })}\n      >\n        {placeholder && (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        )}\n        {options\n          ? options.map((option, index) => {\n              return (\n                <option\n                  {...(typeof option === 'object' &&\n                    option.disabled && { disabled: option.disabled })}\n                  {...(typeof option === 'object' &&\n                    option.value != null && { value: option.value })}\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                >\n                  {typeof option === 'string'\n                    ? option\n                    : (option.label ?? String(option.value ?? ''))}\n                </option>\n              )\n            })\n          : children}\n      </select>\n    )\n\n    const rendered = hasAdorn ? (\n      <div\n        className={classNames('form-input', isDropdown && 'form-caret', size, className)}\n        onClick={handleWrapperClick}\n      >\n        {adornStart}\n        {select}\n        {adornEnd}\n      </div>\n    ) : (\n      select\n    )\n\n    return renderFormField({\n      children: rendered,\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId, label: labelId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":"A,oeAgIA,MAAaS,EAASC,GAElB,CACE,WACA,aACA,WACA,YACA,OACA,WACA,KACA,QAASC,EACT,kBACA,QACA,WACA,UACA,cACA,OACA,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAYC,EAA0B,IAAI,EAC1CC,EAAYC,EAAaC,EAAKJ,CAAS,EAIvC,CAAE,UAAS,SAAUX,EAAYW,EAAW,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAEtFO,EAAiB,MAAM,QAAQC,CAAO,EACxCA,EACG,OACE,GAAsC,OAAOC,GAAW,UAAY,CAAC,CAACA,EAAO,QAChF,CAAC,CAGA,IAAK,GAAYA,EAAO,OAAS,KAA+BA,EAAO,OAAS,GAAxC,OAAOA,EAAO,KAAK,CAAyB,EACvF,CAAC,EAELrB,EACE,CAACsB,GAAYH,EAAe,OAAS,EACrC,sJAEF,EASA,IAAMI,EADUV,EAAK,QAAU,IAAA,IAAaA,EAAK,eAAiB,IAAA,GAE9D,IAAA,GACAM,EAAe,OACbG,EACEH,EACAA,EAAeA,EAAe,OAAS,GACzCK,GAAe,CAACF,EACd,GACA,IAAA,GAIRpB,EACEY,EACAD,EAAK,OAASA,EAAK,cAAgBU,EAClC,GAAY,CACPE,IAAY,IAAA,IAAaX,EAAU,SACrCR,EAAmBQ,EAAU,QAASW,CAAO,CACjD,EACAZ,EAAK,IACP,EAEA,GAAM,CAAE,cAAa,aAAY,SAAQ,UAAS,UAAS,cAAeZ,EAAa,CACrF,gBAAiBY,EAAK,oBACtB,eAAgBA,EAAK,mBACrB,OACA,KACA,UACA,kBACA,QACA,QACA,eACF,CAAC,EAEKa,EAAWC,GAAc,MAAQC,GAAY,KAG7CC,EAAa,CAACP,IAAa,CAACQ,GAAYA,GAAY,GAKpDC,EAAkBvB,EACtBkB,EAAW,cAAgB,aAC3B,CAACA,GAAYM,EACb3B,EAAoB4B,EAASC,CAAK,EAClC,CAACR,GAAYS,CACf,EAEMC,EAAyD,GAAU,CACvE,IAAMC,EAAOvB,EAAU,QACjBwB,EAASC,EAAM,OACrB,GAAKF,GAAQ,GAAK,UAAaR,GAAcS,IAAWD,GAAQ,GAAO,QAAQ,WAAW,EAE1F,GAAK,MAAM,EACX,GAAI,CAGFA,EAAK,aAAa,CACpB,MAAQ,CAGR,CARW,CASb,EAEMG,EACJ,kBAAA,cAAC,SAAD,CACE,GAAI3B,EACJ,mBAAkB4B,EAGlB,kBAAiB5B,EAAK,oBAAsB6B,EAC5C,eAAcT,GAAW,IAAA,GACzB,UAAWF,EACX,GAAIY,EACM,WACV,IAAK3B,EACL,KAAMc,EACN,GAAKP,IAAyB,IAAA,IAAa,CAAE,aAAcA,CAAqB,CAyB1E,EAvBLC,GACC,kBAAA,cAAC,SAAD,CAAQ,MAAM,GAAG,SAAA,EAET,EADLA,CACK,EAETJ,EACGA,EAAQ,KAAK,EAAQ,IAEjB,kBAAA,cAAC,SAAD,CACE,GAAK,OAAOC,GAAW,UACrBA,EAAO,UAAY,CAAE,SAAUA,EAAO,QAAS,EACjD,GAAK,OAAOA,GAAW,UACrBA,EAAO,OAAS,MAAQ,CAAE,MAAOA,EAAO,KAAM,EAEhD,IAAKuB,CAKC,EAHL,OAAOvB,GAAW,SACfA,EACCA,EAAO,OAAS,OAAOA,EAAO,OAAS,EAAE,CACxC,CAEX,EACDwB,CACE,EAGJC,EAAWpB,EACf,kBAAA,cAAC,MAAD,CACE,UAAWlB,EAAW,aAAcqB,GAAc,aAAcG,EAAMG,CAAS,EAC/E,QAASC,CAKN,EAHFT,EACAa,EACAZ,CACE,EAELY,EAGF,OAAOpC,EAAgB,CACrB,SAAU0C,EACV,OACA,IAAK,CAAE,SAAUC,EAAY,KAAMC,EAAQ,MAAOL,EAAS,MAAOM,CAAQ,EAC1E,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAO,YAAc,S"}

package/dist/chunks/{skeleton-B2blJGWj.js → skeleton-CXFwCjB9.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-Bs80iIBN.js";import{S as e}from"./slot-BQVx1Eew.js";import{t}from"./polymorphic-CZIFszAy.js";import{t as n}from"./colorClassNames-YzGWu6qm.js";import{a as r,i}from"./breakpoints-CGk8szzR.js";import a,{Fragment as o,forwardRef as s}from"react";import c from"classnames";const l=(t,n)=>{if(t===!0)return`${n}flex-fill`;if(t===`auto`)return`${n}w-auto`;if(typeof t==`number`||typeof t==`string`){let r=Number(t),i=Number.isInteger(r)&&r>=1&&r<=12&&String(r)===String(t);return e(!i,`Skeleton: \`span\` takes a whole number of twelfths from 1 to 12, \`'auto'\` or \`true\`. @chassis-ui/css has no width class for ${JSON.stringify(t)}, so it sets none.`),i?Number(t)===12?`${n}w-100`:`${n}w-${t}/12`:null}return null};function u({children:e,animation:t,className:o,color:s,component:u,span:d,...f},p){let m=u??`span`,h=c(`skeleton`,t&&`skeleton-${t}`,s&&n[s],i([r(d,l)]),o);return/* @__PURE__ */ a.createElement(m,{className:h,...f,ref:p},e)}const d=t(u,`Skeleton`);function f({children:e,color:t,component:n,loading:r,spans:i,...s},c){if(!r)return/* @__PURE__ */ a.createElement(a.Fragment,null,e);let l=i===void 0?[void 0]:Array.isArray(i)?i:[i];return/* @__PURE__ */ a.createElement(a.Fragment,null,l.map((e,r)=>/* @__PURE__ */ a.createElement(o,{key:r},r>0&&` `,/* @__PURE__ */ a.createElement(d,{component:n,span:e,color:t,...s,ref:r===0?c:void 0}))))}const p=s(f);p.displayName=`SkeletonLoader`;export{d as n,p as t};
-//# sourceMappingURL=skeleton-B2blJGWj.js.map
+import"./focus-ring-Bs80iIBN.js";import{C as e}from"./slot-DagH0Gxq.js";import{t}from"./polymorphic-mAKwlLiW.js";import{t as n}from"./colorClassNames-YzGWu6qm.js";import{a as r,i}from"./breakpoints-CGk8szzR.js";import a,{Fragment as o,forwardRef as s}from"react";import c from"classnames";const l=(t,n)=>{if(t===!0)return`${n}flex-fill`;if(t===`auto`)return`${n}w-auto`;if(typeof t==`number`||typeof t==`string`){let r=Number(t),i=Number.isInteger(r)&&r>=1&&r<=12&&String(r)===String(t);return e(!i,`Skeleton: \`span\` takes a whole number of twelfths from 1 to 12, \`'auto'\` or \`true\`. @chassis-ui/css has no width class for ${JSON.stringify(t)}, so it sets none.`),i?Number(t)===12?`${n}w-100`:`${n}w-${t}/12`:null}return null};function u({children:e,animation:t,className:o,color:s,component:u,span:d,...f},p){let m=u??`span`,h=c(`skeleton`,t&&`skeleton-${t}`,s&&n[s],i([r(d,l)]),o);return/* @__PURE__ */ a.createElement(m,{className:h,...f,ref:p},e)}const d=t(u,`Skeleton`);function f({children:e,color:t,component:n,loading:r,spans:i,...s},c){if(!r)return/* @__PURE__ */ a.createElement(a.Fragment,null,e);let l=i===void 0?[void 0]:Array.isArray(i)?i:[i];return/* @__PURE__ */ a.createElement(a.Fragment,null,l.map((e,r)=>/* @__PURE__ */ a.createElement(o,{key:r},r>0&&` `,/* @__PURE__ */ a.createElement(d,{component:n,span:e,color:t,...s,ref:r===0?c:void 0}))))}const p=s(f);p.displayName=`SkeletonLoader`;export{d as n,p as t};
+//# sourceMappingURL=skeleton-CXFwCjB9.js.map

package/dist/chunks/{skeleton-B2blJGWj.js.map → skeleton-CXFwCjB9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"skeleton-B2blJGWj.js","names":["devWarning","BG_COLOR_CLASS_NAMES","responsiveProp","React","classNames","spanClassName","span","prefix","twelfths","hasRule","SkeletonRender","rest","Component","component","_className","animation","color","responsiveClassNames","className","children","Skeleton","createPolymorphicComponent","SkeletonLoaderRender","loading","spanList","spans","Fragment","index","ref","SkeletonLoader","forwardRef"],"sources":["../../src/components/skeleton/Skeleton.tsx","../../src/components/skeleton/SkeletonLoader.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { WidthSpan, responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { ContextColor, Responsive } from '../../types'\nimport { BG_COLOR_CLASS_NAMES } from '../../utils/colorClassNames'\nimport { devWarning } from '../../utils/devWarning'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype SkeletonOwnProps<C extends ElementType> = {\n  /**\n   * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates\n   * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside\n   * it for the glow pulse to reach them too, or apply `wave` to a container of one or more\n   * `<Skeleton>` children for a directional sweep across the whole group.\n   */\n  animation?: 'glow' | 'wave'\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   * Component used for the root node. Either a string to use an HTML element or a component —\n   * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Width of the skeleton in twelfths of its parent (`span={6}` is half, mapped to the\n   * `w-{n}/12` class; `span={12}` is `w-100`), `'auto'` for its natural width (`w-auto`), or\n   * `true` to fill the rest of a flex row (`flex-fill`). Unset by default, so the rendered\n   * element's own intrinsic width applies — set it explicitly (e.g. `span={12}`) for a\n   * full-width text line; leave it unset when `component` is something that sizes itself, like\n   * `Avatar` or `Button`. An object sets the width from a breakpoint up: `{ base: 12, md: 6 }`.\n   * Any other number or string (`0`, `13`, `'50%'`) has no width class: it sets no width, and\n   * warns in development.\n   *\n   * @type { Responsive<'auto' | number | string | boolean> }\n   */\n  span?: Responsive<WidthSpan>\n}\n\nexport type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  SkeletonOwnProps<C>\n>\n\ntype SkeletonComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// chassis-css has the fractions `w-1/12` to `w-11/12`; twelve twelfths is `w-100`. `span` takes\n// any number or string, and one that isn't a whole number from 1 to 12 (0, 13, `'50%'`) was\n// written into the class below all the same, which then had no rule: it renders no class now,\n// and says so in development. The template stays as it is:\n// `test/utils/tailwindClassNames.spec.tsx` lists it by its text (RD20).\nconst spanClassName = (span: WidthSpan, prefix: string) => {\n  if (span === true) return `${prefix}flex-fill`\n  if (span === 'auto') return `${prefix}w-auto`\n  if (typeof span === 'number' || typeof span === 'string') {\n    const twelfths = Number(span)\n    const hasRule =\n      Number.isInteger(twelfths) &&\n      twelfths >= 1 &&\n      twelfths <= 12 &&\n      String(twelfths) === String(span)\n    devWarning(\n      !hasRule,\n      `Skeleton: \\`span\\` takes a whole number of twelfths from 1 to 12, \\`'auto'\\` or ` +\n        `\\`true\\`. @chassis-ui/css has no width class for ${JSON.stringify(span)}, so it sets none.`\n    )\n    if (!hasRule) return null\n    return Number(span) === 12 ? `${prefix}w-100` : `${prefix}w-${span}/12`\n  }\n  return null\n}\n\nfunction SkeletonRender<C extends ElementType = 'span'>(\n  { children, animation, className, color, component, span, ...rest }: SkeletonProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames(\n    'skeleton',\n    animation && `skeleton-${animation}`,\n    color && BG_COLOR_CLASS_NAMES[color],\n    responsiveClassNames([responsiveProp(span, spanClassName)]),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Skeleton = createPolymorphicComponent<SkeletonComponent>(\n  SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,\n  'Skeleton'\n)\n","import React, {\n  ComponentPropsWithoutRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  ReactNode\n} from 'react'\n\nimport { WidthSpan } from '../../utils/breakpoints'\nimport { PolymorphicRef } from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { Skeleton, SkeletonProps } from './Skeleton'\n\ntype SkeletonLoaderOwnProps<C extends ElementType> = {\n  /**\n   * The real content, rendered unchanged (no wrapping element) once `loading` is `false`.\n   */\n  children: ReactNode\n  /**\n   * Sets the color of the generated skeleton lines to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the generated skeleton(s) — e.g. `Avatar` or `Button` — for swapping\n   * non-text content, not just text runs. Its own props are type-checked at the call site once\n   * passed here, same as `Skeleton`'s own `component` prop.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Swaps `children` for one `<Skeleton>` per entry in `spans` while `true`.\n   */\n  loading: boolean\n  /**\n   * One skeleton line per entry, using the same values as `Skeleton`'s `span` prop — e.g.\n   * `[12, 6]` for a full-width line followed by a half-width one. A single value (e.g. `6`) is\n   * shorthand for a single line, equivalent to `[6]`. Leave unset for a single skeleton sized by\n   * `component`'s own intrinsic width instead — e.g. an `Avatar`'s `size` prop. Rendered instead\n   * of `children` while `loading` is `true`; ignored once `loading` is `false`.\n   *\n   * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }\n   */\n  spans?: WidthSpan | WidthSpan[]\n}\n\n// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`\n// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so\n// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead\n// breaks `C`'s inference from `component`.)\nexport type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &\n  Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>\n\ntype SkeletonLoaderComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonLoaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n/**\n * A pure content swap: no wrapping element of its own, so `.skeleton-glow`/`.skeleton-wave`\n * won't reach the lines it generates unless applied to a container already in the tree — see\n * `Skeleton`'s own docs for why the animation classes need a `.skeleton` descendant to animate.\n *\n * The ref goes to the first generated skeleton while `loading`, and is `null` once the real\n * content shows: that content is the caller's, with refs of its own.\n */\nfunction SkeletonLoaderRender<C extends ElementType = 'span'>(\n  { children, color, component, loading, spans, ...rest }: SkeletonLoaderProps<C>,\n  ref: ForwardedRef<Element>\n) {\n  if (!loading) return <>{children}</>\n\n  const spanList = spans === undefined ? [undefined] : Array.isArray(spans) ? spans : [spans]\n\n  return (\n    <>\n      {spanList.map((span, index) => (\n        // eslint-disable-next-line react/no-array-index-key -- `spans` is a static prop array\n        <Fragment key={index}>\n          {index > 0 && ' '}\n          {/* `rest` is `C`'s own props minus `SkeletonLoaderOwnProps`'s keys, which structurally\n              satisfies what `Skeleton<C>` wants (`C`'s own props minus its own, different, key\n              set) — TS can't verify that across two independently-generic components, hence the\n              cast. */}\n          <Skeleton\n            component={component}\n            span={span}\n            color={color}\n            {...(rest as unknown as SkeletonProps<C>)}\n            ref={index === 0 ? ref : undefined}\n          />\n        </Fragment>\n      ))}\n    </>\n  )\n}\n\n// `forwardRef` takes a render function that isn't generic, so the generic type is cast back on,\n// as `createPolymorphicComponent` does.\nexport const SkeletonLoader = forwardRef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  SkeletonLoaderRender as ForwardRefRenderFunction<Element, any>\n) as unknown as SkeletonLoaderComponent\n\nSkeletonLoader.displayName = 'SkeletonLoader'\n"],"mappings":"A,iSAiEA,MAAMK,GAAiB,EAAiB,IAAmB,CACzD,GAAIC,IAAS,GAAM,MAAO,GAAGC,EAAO,WACpC,GAAID,IAAS,OAAQ,MAAO,GAAGC,EAAO,QACtC,GAAI,OAAOD,GAAS,UAAY,OAAOA,GAAS,SAAU,CACxD,IAAME,EAAW,OAAOF,CAAI,EACtBG,EACJ,OAAO,UAAUD,CAAQ,GACzBA,GAAY,GACZA,GAAY,IACZ,OAAOA,CAAQ,IAAM,OAAOF,CAAI,EAOlC,OANAN,EACE,CAACS,EACD,oIACsD,KAAK,UAAUH,CAAI,EAAE,mBAC7E,EACKG,EACE,OAAOH,CAAI,IAAM,GAAK,GAAGC,EAAO,OAAS,GAAGA,EAAO,IAAID,EAAK,KAD9C,IAEvB,CACA,OAAO,IACT,EAEA,SAASI,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,YAAW,OAAM,GAAGC,GAC7D,EACA,CACA,IAAMC,EAAYC,GAAa,OACzBC,EAAaV,EACjB,WACAW,GAAa,YAAYA,IACzBC,GAASf,EAAqBe,GAC9BC,EAAqB,CAACf,EAAeI,EAAMD,CAAa,CAAC,CAAC,EAC1Da,CACF,EAEA,MACE,kBAAA,cAACN,EAAD,CAAW,UAAWE,EAAY,GAAIH,EAAW,KAEtC,EADRQ,CACQ,CAEf,CAEA,MAAaC,EAAWC,EACtBX,EACA,UACF,ECzCA,SAASY,EACP,CAAE,WAAU,QAAO,YAAW,UAAS,QAAO,GAAGX,GACjD,EACA,CACA,GAAI,CAACY,EAAS,MAAO,kBAAA,cAAApB,EAAA,SAAA,KAAGgB,CAAW,EAEnC,IAAMK,EAAWC,IAAU,IAAA,GAAY,CAAC,IAAA,EAAS,EAAI,MAAM,QAAQA,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAE1F,MACE,kBAAA,cAAAtB,EAAA,SAAA,KACGqB,EAAS,KAAK,EAAM,IAEnB,kBAAA,cAACE,EAAD,CAAU,IAAKC,CAaL,EAZPA,EAAQ,GAAK,IAKd,kBAAA,cAACP,EAAD,CACa,YACL,OACC,QACP,GAAKT,EACL,IAAKgB,IAAU,EAAIC,EAAM,IAAA,EAC1B,CAAA,CACO,CACX,CACD,CAEN,CAIA,MAAaC,EAAiBC,EAE5BR,CACF,EAEA,EAAe,YAAc,iB"}
+{"version":3,"file":"skeleton-CXFwCjB9.js","names":["devWarning","BG_COLOR_CLASS_NAMES","responsiveProp","React","classNames","spanClassName","span","prefix","twelfths","hasRule","SkeletonRender","rest","Component","component","_className","animation","color","responsiveClassNames","className","children","Skeleton","createPolymorphicComponent","SkeletonLoaderRender","loading","spanList","spans","Fragment","index","ref","SkeletonLoader","forwardRef"],"sources":["../../src/components/skeleton/Skeleton.tsx","../../src/components/skeleton/SkeletonLoader.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { WidthSpan, responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { ContextColor, Responsive } from '../../types'\nimport { BG_COLOR_CLASS_NAMES } from '../../utils/colorClassNames'\nimport { devWarning } from '../../utils/devWarning'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype SkeletonOwnProps<C extends ElementType> = {\n  /**\n   * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates\n   * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside\n   * it for the glow pulse to reach them too, or apply `wave` to a container of one or more\n   * `<Skeleton>` children for a directional sweep across the whole group.\n   */\n  animation?: 'glow' | 'wave'\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   * Component used for the root node. Either a string to use an HTML element or a component —\n   * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Width of the skeleton in twelfths of its parent (`span={6}` is half, mapped to the\n   * `w-{n}/12` class; `span={12}` is `w-100`), `'auto'` for its natural width (`w-auto`), or\n   * `true` to fill the rest of a flex row (`flex-fill`). Unset by default, so the rendered\n   * element's own intrinsic width applies — set it explicitly (e.g. `span={12}`) for a\n   * full-width text line; leave it unset when `component` is something that sizes itself, like\n   * `Avatar` or `Button`. An object sets the width from a breakpoint up: `{ base: 12, md: 6 }`.\n   * Any other number or string (`0`, `13`, `'50%'`) has no width class: it sets no width, and\n   * warns in development.\n   *\n   * @type { Responsive<'auto' | number | string | boolean> }\n   */\n  span?: Responsive<WidthSpan>\n}\n\nexport type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  SkeletonOwnProps<C>\n>\n\ntype SkeletonComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// chassis-css has the fractions `w-1/12` to `w-11/12`; twelve twelfths is `w-100`. `span` takes\n// any number or string, and one that isn't a whole number from 1 to 12 (0, 13, `'50%'`) was\n// written into the class below all the same, which then had no rule: it renders no class now,\n// and says so in development. The template stays as it is:\n// `test/utils/tailwindClassNames.spec.tsx` lists it by its text (RD20).\nconst spanClassName = (span: WidthSpan, prefix: string) => {\n  if (span === true) return `${prefix}flex-fill`\n  if (span === 'auto') return `${prefix}w-auto`\n  if (typeof span === 'number' || typeof span === 'string') {\n    const twelfths = Number(span)\n    const hasRule =\n      Number.isInteger(twelfths) &&\n      twelfths >= 1 &&\n      twelfths <= 12 &&\n      String(twelfths) === String(span)\n    devWarning(\n      !hasRule,\n      `Skeleton: \\`span\\` takes a whole number of twelfths from 1 to 12, \\`'auto'\\` or ` +\n        `\\`true\\`. @chassis-ui/css has no width class for ${JSON.stringify(span)}, so it sets none.`\n    )\n    if (!hasRule) return null\n    return Number(span) === 12 ? `${prefix}w-100` : `${prefix}w-${span}/12`\n  }\n  return null\n}\n\nfunction SkeletonRender<C extends ElementType = 'span'>(\n  { children, animation, className, color, component, span, ...rest }: SkeletonProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames(\n    'skeleton',\n    animation && `skeleton-${animation}`,\n    color && BG_COLOR_CLASS_NAMES[color],\n    responsiveClassNames([responsiveProp(span, spanClassName)]),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Skeleton = createPolymorphicComponent<SkeletonComponent>(\n  SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,\n  'Skeleton'\n)\n","import React, {\n  ComponentPropsWithoutRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  ReactNode\n} from 'react'\n\nimport { WidthSpan } from '../../utils/breakpoints'\nimport { PolymorphicRef } from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { Skeleton, SkeletonProps } from './Skeleton'\n\ntype SkeletonLoaderOwnProps<C extends ElementType> = {\n  /**\n   * The real content, rendered unchanged (no wrapping element) once `loading` is `false`.\n   */\n  children: ReactNode\n  /**\n   * Sets the color of the generated skeleton lines to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the generated skeleton(s) — e.g. `Avatar` or `Button` — for swapping\n   * non-text content, not just text runs. Its own props are type-checked at the call site once\n   * passed here, same as `Skeleton`'s own `component` prop.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Swaps `children` for one `<Skeleton>` per entry in `spans` while `true`.\n   */\n  loading: boolean\n  /**\n   * One skeleton line per entry, using the same values as `Skeleton`'s `span` prop — e.g.\n   * `[12, 6]` for a full-width line followed by a half-width one. A single value (e.g. `6`) is\n   * shorthand for a single line, equivalent to `[6]`. Leave unset for a single skeleton sized by\n   * `component`'s own intrinsic width instead — e.g. an `Avatar`'s `size` prop. Rendered instead\n   * of `children` while `loading` is `true`; ignored once `loading` is `false`.\n   *\n   * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }\n   */\n  spans?: WidthSpan | WidthSpan[]\n}\n\n// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`\n// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so\n// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead\n// breaks `C`'s inference from `component`.)\nexport type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &\n  Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>\n\ntype SkeletonLoaderComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonLoaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n/**\n * A pure content swap: no wrapping element of its own, so `.skeleton-glow`/`.skeleton-wave`\n * won't reach the lines it generates unless applied to a container already in the tree — see\n * `Skeleton`'s own docs for why the animation classes need a `.skeleton` descendant to animate.\n *\n * The ref goes to the first generated skeleton while `loading`, and is `null` once the real\n * content shows: that content is the caller's, with refs of its own.\n */\nfunction SkeletonLoaderRender<C extends ElementType = 'span'>(\n  { children, color, component, loading, spans, ...rest }: SkeletonLoaderProps<C>,\n  ref: ForwardedRef<Element>\n) {\n  if (!loading) return <>{children}</>\n\n  const spanList = spans === undefined ? [undefined] : Array.isArray(spans) ? spans : [spans]\n\n  return (\n    <>\n      {spanList.map((span, index) => (\n        // eslint-disable-next-line react/no-array-index-key -- `spans` is a static prop array\n        <Fragment key={index}>\n          {index > 0 && ' '}\n          {/* `rest` is `C`'s own props minus `SkeletonLoaderOwnProps`'s keys, which structurally\n              satisfies what `Skeleton<C>` wants (`C`'s own props minus its own, different, key\n              set) — TS can't verify that across two independently-generic components, hence the\n              cast. */}\n          <Skeleton\n            component={component}\n            span={span}\n            color={color}\n            {...(rest as unknown as SkeletonProps<C>)}\n            ref={index === 0 ? ref : undefined}\n          />\n        </Fragment>\n      ))}\n    </>\n  )\n}\n\n// `forwardRef` takes a render function that isn't generic, so the generic type is cast back on,\n// as `createPolymorphicComponent` does.\nexport const SkeletonLoader = forwardRef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  SkeletonLoaderRender as ForwardRefRenderFunction<Element, any>\n) as unknown as SkeletonLoaderComponent\n\nSkeletonLoader.displayName = 'SkeletonLoader'\n"],"mappings":"A,iSAiEA,MAAMK,GAAiB,EAAiB,IAAmB,CACzD,GAAIC,IAAS,GAAM,MAAO,GAAGC,EAAO,WACpC,GAAID,IAAS,OAAQ,MAAO,GAAGC,EAAO,QACtC,GAAI,OAAOD,GAAS,UAAY,OAAOA,GAAS,SAAU,CACxD,IAAME,EAAW,OAAOF,CAAI,EACtBG,EACJ,OAAO,UAAUD,CAAQ,GACzBA,GAAY,GACZA,GAAY,IACZ,OAAOA,CAAQ,IAAM,OAAOF,CAAI,EAOlC,OANAN,EACE,CAACS,EACD,oIACsD,KAAK,UAAUH,CAAI,EAAE,mBAC7E,EACKG,EACE,OAAOH,CAAI,IAAM,GAAK,GAAGC,EAAO,OAAS,GAAGA,EAAO,IAAID,EAAK,KAD9C,IAEvB,CACA,OAAO,IACT,EAEA,SAASI,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,YAAW,OAAM,GAAGC,GAC7D,EACA,CACA,IAAMC,EAAYC,GAAa,OACzBC,EAAaV,EACjB,WACAW,GAAa,YAAYA,IACzBC,GAASf,EAAqBe,GAC9BC,EAAqB,CAACf,EAAeI,EAAMD,CAAa,CAAC,CAAC,EAC1Da,CACF,EAEA,MACE,kBAAA,cAACN,EAAD,CAAW,UAAWE,EAAY,GAAIH,EAAW,KAEtC,EADRQ,CACQ,CAEf,CAEA,MAAaC,EAAWC,EACtBX,EACA,UACF,ECzCA,SAASY,EACP,CAAE,WAAU,QAAO,YAAW,UAAS,QAAO,GAAGX,GACjD,EACA,CACA,GAAI,CAACY,EAAS,MAAO,kBAAA,cAAApB,EAAA,SAAA,KAAGgB,CAAW,EAEnC,IAAMK,EAAWC,IAAU,IAAA,GAAY,CAAC,IAAA,EAAS,EAAI,MAAM,QAAQA,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAE1F,MACE,kBAAA,cAAAtB,EAAA,SAAA,KACGqB,EAAS,KAAK,EAAM,IAEnB,kBAAA,cAACE,EAAD,CAAU,IAAKC,CAaL,EAZPA,EAAQ,GAAK,IAKd,kBAAA,cAACP,EAAD,CACa,YACL,OACC,QACP,GAAKT,EACL,IAAKgB,IAAU,EAAIC,EAAM,IAAA,EAC1B,CAAA,CACO,CACX,CACD,CAEN,CAIA,MAAaC,EAAiBC,EAE5BR,CACF,EAEA,EAAe,YAAc,iB"}

package/dist/chunks/slot-DagH0Gxq.js

@@ -0,0 +1,2 @@
+import{n as e}from"./lazyElement-tfMG21pZ.js";import{t}from"./useForkedRef-WoqMqsWE.js";import n,{Fragment as r,cloneElement as i,createContext as a,forwardRef as o,isValidElement as s,useContext as c}from"react";import{mergeProps as l}from"react-aria";const u=process.env.NODE_ENV!==`production`,d=/* @__PURE__ */ new Set;function f(e,t){u&&e&&!d.has(t)&&(d.add(t),console.warn(t))}function p(e,t){u&&e&&!d.has(t)&&(d.add(t),console.error(t))}function m(e){switch(e){case`a`:return`anchor`;case`button`:return`button`;case`input`:return`input`;default:return`host`}}let h=null;function g(e,t){let n=h;h=e;try{return t()}finally{h=n}}function _(e){if(typeof e==`string`)return m(e);let t=e.slotKind;return t===`component`&&h?S(h):t??`component`}function v(e){if(typeof e.slotKind!=`string`||!h)return;let t=h.props.id;return typeof t==`string`&&t!==``?t:void 0}function y(e){if(typeof e.slotKind!=`string`||!h)return;let t=h.props.role;return typeof t==`string`&&t!==``?t:void 0}function b(e){return typeof e==`string`?e:e.slotTag}function x(e,t,n){let r=_(e);if(r!==`component`)return r;let i=n?.to;return t!=null||i!=null?`anchor`:r}function S(e){return x(e.type,e.props.href,e.props)}function C(t){let n=t.asChild?e(t.children):void 0;return s(n)?S(n):t.component===void 0?w(t.href)?`anchor`:void 0:x(t.component,t.href,t)}const w=e=>e!=null;function T(e,t,n){return e??(w(t)?`a`:n)}function E(e,t,n){return w(t)?e===`anchor`||e===`component`?{href:t}:(f(!0,`${n}: \`href\` was ignored, because the element it renders isn't a link. Leave out \`component\` to render an <a>, or pass a link as \`component\` or as the \`asChild\` element.`),{}):{}}const D=e=>e===`anchor`||e===`button`,O=(...e)=>e.filter(Boolean).join(` `)||void 0,k=(...e)=>O(...new Set(e.flatMap(e=>e?e.split(` `):[]))),A=(e,...t)=>O(...(e?.split(` `)??[]).filter(e=>!t.includes(e))),j=(e,...t)=>({...e,"aria-describedby":A(e[`aria-describedby`],...t.map(e=>e.id))}),M=a(null),N=M.Provider,P=()=>c(M);function F(e){return e.props.ref}function I(e,r){let a=o(function({children:e,...r},a){let o=c(M),s=t(a,o?F(o):void 0);if(!o)return null;let u={...l(r,o.props)},d=r.style,f=o.props.style;d&&f&&(u.style={...d,...f});let p=O(r[`aria-describedby`],o.props[`aria-describedby`]);return p?u[`aria-describedby`]=p:delete u[`aria-describedby`],o.props[`aria-label`]!=null&&o.props[`aria-labelledby`]==null&&delete u[`aria-labelledby`],r[`aria-disabled`]===!0&&(u.onClick=r.onClick),/* @__PURE__ */ n.createElement(M.Provider,{value:null},i(o,{...u,ref:s},e))});return Object.assign(a,{slotKind:e,slotTag:r})}const L=I(`component`,void 0),R=/* @__PURE__ */ new Map;function z(e){let t=e.type;if(typeof t!=`string`)return L;let n=R.get(t);return n||(n=I(S(e),t),R.set(t,n)),n}function B(e,t,r,a={}){let o=Object.entries(a).filter(([,e])=>e!==void 0),s=o.length?i(e,Object.fromEntries(o)):e;return/* @__PURE__ */ n.createElement(N,{value:s},/* @__PURE__ */ n.createElement(L,{...t,ref:r},e.props.children))}const V=e=>typeof e?.slotKind==`string`;function H(t){let n=e(t);return s(n)&&n.type!==r?n:null}function U(e,t){let n=H(e);return f(!n,`${t}: \`asChild\` expects exactly one React element as its child (not text, a fragment, or several elements); rendering the default element instead.`),n}function W(e,t){let n=H(e);return f(!n,`${t}: expects exactly one React element as its trigger (not text, a fragment, or several elements); rendering the children with nothing to open it.`),n}export{f as C,p as S,C as _,V as a,y as b,O as c,w as d,E as f,b as g,_ as h,W as i,k as l,T as m,z as n,B as o,D as p,U as r,P as s,N as t,j as u,x as v,g as x,v as y};
+//# sourceMappingURL=slot-DagH0Gxq.js.map