@chassis-ui/react 0.4.1 → 0.5.0

package/dist/chunks/context-menu-8KIuH4cJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-8KIuH4cJ.js","names":["resolveSlottedId","createPolymorphicComponent","useIsomorphicLayoutEffect","pushOverlay","useFloatingOverlay","useOpenStateProps","useOverlayMaxHeight","toAriaPlacement","resolveMenuOverlayPositioning","isEventInside","MenuContext","menuToggleClicks","React","classNames","pointRect","y","x","ContextMenuRender","rest","Component","component","generatedId","useId","triggerId","id","menuId","regionRef","useRef","forkedRef","useForkedRef","ref","overlayRef","toggleNodeRef","targetRef","submenuOverlaysRef","registerOverlay","node","overlayId","state","useMenuTriggerState","anchorRef","anchorVersion","setAnchorVersion","useState","restoreFocusRef","openAt","disabled","anchor","version","hide","close","useEffect","element","active","focusIsLoose","focusIsInMenu","portalContainer","useLocale","placement","direction","resolvedPlacement","useOverlayPosition","updatePosition","overlayProps","autoClose","isInMenu","target","isInOverlayOfMenu","event","handlePointerDown","handleClick","handleKeyUp","wasDisabledRef","isInRegion","handleContextMenu","isContextMenuKey","handleKeyDown","longPressRef","userSelectRef","restoreUserSelect","region","cancelLongPress","endPress","clickSwallowRef","stopSwallowingClicks","swallowNextClick","swallow","timer","handlePointerMove","press","contextValue","useMemo","focusStrategy","menuStyle","placementAttr","className","mergeProps","children","ContextMenu"],"sources":["../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import React, {\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport classNames from 'classnames'\nimport { mergeProps, useLocale, useOverlayPosition } from 'react-aria'\nimport { useMenuTriggerState } from 'react-stately'\n\nimport {\n  useFloatingOverlay,\n  useForkedRef,\n  useIsomorphicLayoutEffect,\n  useOpenStateProps,\n  useOverlayMaxHeight\n} from '../../hooks'\nimport { resolveSlottedId } from '../../utils/elementKind'\nimport { isEventInside } from '../../utils/insideEvents'\nimport { resolveMenuOverlayPositioning, toAriaPlacement } from '../../utils/overlayPlacement'\nimport { pushOverlay } from '../../utils/overlayStack'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport {\n  MenuAutoClose,\n  MenuContext,\n  MenuContextProps,\n  MenuFocusStrategy,\n  menuToggleClicks\n} from '../menu/Menu'\n\n// How long a touch or pen has to stay down, and how far it may travel meanwhile, for a long\n// press. react-aria's `useLongPress` uses the same threshold; it isn't used here because its\n// `usePress` prevents the default of key and pointer events on the element it is given, which\n// would break the buttons and links inside a region.\nconst LONG_PRESS_MS = 500\nconst LONG_PRESS_TOLERANCE_PX = 10\n// iOS emits a click when the finger that long-pressed lifts, on whatever is under it by then: the\n// first item of the menu that has just opened at the finger. A click this soon after a long press\n// is that release, not a choice.\nconst LONG_PRESS_CLICK_WINDOW_MS = 1000\n\n// Where the menu opens: at a point (the pointer, or a finger's long press), or at an element (the\n// one focused when the keyboard asked for it). Read from a ref inside `getTargetRect`, since\n// `useOverlayPosition` captures that function once.\ntype Anchor = { kind: 'point'; x: number; y: number } | { kind: 'element'; element: Element }\n\nconst pointRect = (x: number, y: number): DOMRect =>\n  ({\n    x,\n    y,\n    top: y,\n    left: x,\n    right: x,\n    bottom: y,\n    width: 0,\n    height: 0,\n    toJSON: () => ({ x, y, width: 0, height: 0 })\n  }) as DOMRect\n\ntype ContextMenuOwnProps<C extends ElementType> = {\n  /**\n   * Controls which presses close the menu. `true` closes on a click on an item and on a press\n   * outside the menu. `false` leaves closing to the Escape key and `visible`. `'inside'` closes\n   * only on a click on an item. `'outside'` closes only on a press outside the menu.\n   */\n  autoClose?: MenuAutoClose\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node, the region the menu opens from. Either a string to use an\n   * HTML element or a component.\n   *\n   * @default 'div'\n   */\n  component?: C\n  /**\n   * Whether the menu is open when it first renders. Use it instead of `visible` when nothing\n   * outside needs to control the menu. Opened this way, the menu sits under the region's start\n   * edge, since no pointer has asked for it anywhere.\n   */\n  defaultVisible?: boolean\n  /**\n   * Leaves the region to the browser: a right-click shows the browser's own menu, a long press\n   * and the keys do nothing.\n   */\n  disabled?: boolean\n  /**\n   * Callback fired when the menu hides.\n   */\n  onHide?: () => void\n  /**\n   * Callback fired when the menu shows.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired when the menu asks to show or hide: a right-click, a long press or Shift+F10\n   * in the region, a click on an item, a press outside, the Escape key, or the closing of the\n   * dialog it is in. Receives the state it asks for. With `visible` set, the menu changes only\n   * when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Whether the menu is open. Setting it makes the menu controlled: it shows and hides only when\n   * this changes, so pair it with `onVisibleChange`. Leave it unset, or use `defaultVisible`, for\n   * a menu that opens and closes itself.\n   */\n  visible?: boolean\n}\n\nexport type ContextMenuProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  ContextMenuOwnProps<C>\n>\n\ntype ContextMenuComponent = (<C extends ElementType = 'div'>(\n  props: ContextMenuProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// The region a context menu belongs to. The region is the component's own element: `className`,\n// `style`, the rest of the props and the ref go to it. The menu is a `MenuList` among its\n// children, with `Menu`'s own items, headers, dividers and submenus: this component provides\n// `Menu`'s context, so `MenuList` renders, positions, portals and navigates the list as it does\n// under a `Menu`. What differs is the trigger, the whole region rather than a button, and the\n// position, the pointer rather than that button.\nfunction ContextMenuRender<C extends ElementType = 'div'>(\n  {\n    children,\n    autoClose = true,\n    className,\n    component,\n    defaultVisible,\n    disabled = false,\n    id,\n    onHide,\n    onShow,\n    onVisibleChange,\n    visible,\n    ...rest\n  }: ContextMenuProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const generatedId = useId()\n  // The list is labelled by the region, the way `Menu`'s is labelled by its toggle. A caller\n  // that names the list itself (`aria-label` on the `MenuList`) drops that link. Read in each\n  // render, so a changed `id` reaches the region and the label. Under `asChild` the child's own\n  // `id` wins the merge (`Slot`), so the label follows the element that renders.\n  const triggerId =\n    resolveSlottedId(Component) ?? (id as string | undefined) ?? `${generatedId}-trigger`\n  const menuId = `${generatedId}-menu`\n  const regionRef = useRef<HTMLElement | null>(null)\n  const forkedRef = useForkedRef(ref, regionRef)\n\n  // iOS shows its own callout for a long press on a link or an image; the region's menu takes\n  // its place. Set on the element rather than through `style`, which a slotted child's own\n  // `style` would replace. The property is inherited, so the region's children lose it too.\n  useIsomorphicLayoutEffect(() => {\n    regionRef.current?.style.setProperty('-webkit-touch-callout', 'none')\n  }, [])\n  const overlayRef = useRef<HTMLElement | null>(null)\n  // `MenuToggle` writes into these two: a `MenuToggle` inside a region belongs to no `Menu`, so\n  // it gets refs of its own to write to rather than the region's.\n  const toggleNodeRef = useRef<HTMLElement | null>(null)\n  const targetRef = useRef<HTMLElement | null>(null)\n  // Portaled `MenuSubmenu` panels register themselves here, so a press inside one counts as inside\n  // the menu (see `MenuContext.registerOverlay`).\n  const submenuOverlaysRef = useRef<Map<string, HTMLElement>>(new Map())\n  const registerOverlay = (overlayId: string, node: HTMLElement | null) => {\n    if (node) submenuOverlaysRef.current.set(overlayId, node)\n    else submenuOverlaysRef.current.delete(overlayId)\n  }\n\n  const state = useMenuTriggerState(\n    useOpenStateProps({ defaultVisible, onVisibleChange, visible }, 'ContextMenu')\n  )\n\n  const anchorRef = useRef<Anchor | null>(null)\n  // Bumped with each request to open, so the menu is placed again when a second right-click\n  // moves an open menu: `useOverlayPosition` positions on its own only when the open state\n  // changes.\n  const [anchorVersion, setAnchorVersion] = useState(0)\n  // The element focused when the menu opened, focused again when the menu closes from the\n  // keyboard or an item. Cleared by a press outside, which puts focus somewhere else itself.\n  const restoreFocusRef = useRef<HTMLElement | null>(null)\n\n  const openAt = (anchor: Anchor) => {\n    if (disabled) return\n    anchorRef.current = anchor\n    if (!state.isOpen) restoreFocusRef.current = document.activeElement as HTMLElement | null\n    setAnchorVersion((version) => version + 1)\n    state.open('first')\n  }\n\n  const hide = () => {\n    restoreFocusRef.current = null\n    state.close()\n  }\n  const close = () => state.close()\n\n  useEffect(() => {\n    if (state.isOpen) return\n    const element = restoreFocusRef.current\n    restoreFocusRef.current = null\n    if (!element || !document.contains(element)) return\n    // Only when the menu still holds focus, or nothing does: focus the user has put on another\n    // control since, or an app closing the menu through `visible` while they type elsewhere,\n    // stays there (`Popover` does the same).\n    const active = document.activeElement\n    const focusIsLoose = !active || active === document.body\n    const focusIsInMenu = !!active && !!overlayRef.current?.contains(active)\n    if (focusIsLoose || focusIsInMenu) element.focus()\n  }, [state.isOpen])\n\n  // Resolves the `<dialog>` the region is in, if any, so the list portals into its top layer and\n  // closes with it, and fires `onShow`/`onHide`.\n  const portalContainer = useFloatingOverlay({\n    close: state.close,\n    isOpen: state.isOpen,\n    onHide,\n    onShow,\n    triggerRef: regionRef\n  })\n\n  // A context menu opens toward the reading direction: its start edge at the pointer, and flipped\n  // above the pointer when there is no room below (`useOverlayPosition`'s own flip).\n  const { direction } = useLocale()\n  const placement = direction === 'rtl' ? 'bottom-end' : 'bottom-start'\n\n  const {\n    overlayProps,\n    placement: resolvedPlacement,\n    updatePosition\n  } = useOverlayPosition({\n    // The region is the target `useOverlayPosition` measures; `getTargetRect` replaces its\n    // rectangle with the anchor's. A menu opened by `defaultVisible` or `visible` alone, with no\n    // anchor yet, sits under the region's start edge.\n    targetRef: regionRef,\n    overlayRef,\n    placement: toAriaPlacement(placement),\n    containerPadding: 8,\n    isOpen: state.isOpen,\n    // See `Menu`: `null` opts out of closing on any window scroll, so the menu scrolls with the\n    // page instead of vanishing.\n    onClose: null,\n    getTargetRect: () => {\n      const anchor = anchorRef.current\n      if (!anchor) return undefined\n      return anchor.kind === 'point'\n        ? pointRect(anchor.x, anchor.y)\n        : anchor.element.getBoundingClientRect()\n    }\n  })\n  useOverlayMaxHeight(overlayRef, state.isOpen)\n\n  useIsomorphicLayoutEffect(() => {\n    if (state.isOpen) updatePosition()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen, anchorVersion])\n\n  const { menuStyle, placementAttr } = resolveMenuOverlayPositioning(\n    overlayProps.style,\n    placement,\n    resolvedPlacement\n  )\n\n  // Presses outside the menu, and clicks on its items. A press rather than a click outside, as\n  // a native menu closes: the click that follows a long press's release then finds no open menu\n  // to close, and a right-click elsewhere closes this menu before it opens another.\n  useEffect(() => {\n    if (!state.isOpen || autoClose === false) return undefined\n\n    const isInMenu = (target: Node) =>\n      !!overlayRef.current?.contains(target) ||\n      Array.from(submenuOverlaysRef.current.values()).some((node) => node.contains(target))\n\n    // An overlay opened from the menu (a popover on an item) is portaled out of the list, and\n    // React still renders it under it (`insideEvents`): a press there isn't one outside.\n    const isInOverlayOfMenu = (event: Event) => isEventInside(event, overlayRef)\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Node\n      if (isInMenu(target) || isInOverlayOfMenu(event) || autoClose === 'inside') return\n      // A right-click inside the region asks for the menu at a new place: the `contextmenu`\n      // event that follows moves it.\n      if (event.button === 2 && regionRef.current?.contains(target)) return\n      hide()\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      const target = event.target as HTMLElement\n      if (!isInMenu(target) || autoClose === 'outside' || menuToggleClicks.has(event)) return\n      // A form control inside the menu is used in place, as in `Menu`.\n      if (/input|select|option|textarea|form/i.test(target.tagName ?? '')) return\n      close()\n    }\n\n    // Tab has moved focus out of the menu by the time the key comes up.\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab' || isInMenu(event.target as Node) || isInOverlayOfMenu(event)) return\n      hide()\n    }\n\n    window.addEventListener('pointerdown', handlePointerDown)\n    window.addEventListener('click', handleClick)\n    window.addEventListener('keyup', handleKeyUp)\n\n    return () => {\n      window.removeEventListener('pointerdown', handlePointerDown)\n      window.removeEventListener('click', handleClick)\n      window.removeEventListener('keyup', handleKeyUp)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen, autoClose])\n\n  // Escape closes the menu wherever focus is, independent of `autoClose`, as in `Menu`: through\n  // the stack of open overlays, so the key closes the innermost one only.\n  useEffect(() => {\n    if (!state.isOpen) return undefined\n\n    return pushOverlay({\n      nodes: () => [overlayRef.current, regionRef.current],\n      onEscape: close\n    })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [state.isOpen])\n\n  // Becoming `disabled` closes an open menu. Not on mount: `disabled` with `visible` is the\n  // caller's to hold.\n  const wasDisabledRef = useRef(disabled)\n  useEffect(() => {\n    if (disabled && !wasDisabledRef.current) hide()\n    wasDisabledRef.current = disabled\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [disabled])\n\n  // The list is a React child of the region, so its events reach these handlers through the\n  // portal: a right-click on an item, or Shift+F10 with an item focused, is not a request to open\n  // the menu somewhere else. Only what happens in the region's own element counts.\n  const isInRegion = (event: React.SyntheticEvent<HTMLElement>) =>\n    event.currentTarget.contains(event.target as Node)\n\n  // The browser's own menu is replaced. When `disabled`, the event isn't handled at all, so the\n  // browser's menu shows.\n  // One handled already, by a region nested in this one, isn't this region's: both opened.\n  const handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {\n    if (disabled || event.defaultPrevented) return\n    // Prevented for the list too: a browser that fires `contextmenu` for the context menu key on\n    // key up (Chromium) fires it at the item the key down has just focused.\n    event.preventDefault()\n    if (!isInRegion(event)) return\n    openAt({ kind: 'point', x: event.clientX, y: event.clientY })\n  }\n\n  const isContextMenuKey = (event: React.KeyboardEvent<HTMLElement>) =>\n    event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)\n\n  // Shift+F10 and the context menu key, on any element in the region: the menu opens under that\n  // element. Preventing the default keeps the browser from firing its own `contextmenu` event\n  // for the key, which would move the menu to where the browser reports the key. Firefox fires\n  // it from the key down, Chromium from the key up, so both are prevented.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (disabled || event.defaultPrevented || !isContextMenuKey(event)) return\n    event.preventDefault()\n    if (!isInRegion(event)) return\n    openAt({ kind: 'element', element: event.target as Element })\n  }\n\n  const handleKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (!disabled && isContextMenuKey(event)) event.preventDefault()\n  }\n\n  // A long press by a finger or a pen. A browser that fires `contextmenu` for it as well (Android)\n  // opens the menu through `handleContextMenu` at the same point.\n  const longPressRef = useRef<{ timer: number; x: number; y: number } | null>(null)\n  // While a finger is down, the region selects no text: iOS starts selecting at about the same\n  // time the press becomes long. Restored when the finger lifts.\n  const userSelectRef = useRef<string | null>(null)\n  const restoreUserSelect = () => {\n    const region = regionRef.current\n    if (!region || userSelectRef.current === null) return\n    region.style.setProperty('-webkit-user-select', userSelectRef.current)\n    region.style.setProperty('user-select', userSelectRef.current)\n    userSelectRef.current = null\n  }\n  const cancelLongPress = () => {\n    if (!longPressRef.current) return\n    window.clearTimeout(longPressRef.current.timer)\n    longPressRef.current = null\n  }\n  const endPress = () => {\n    cancelLongPress()\n    restoreUserSelect()\n  }\n  // The click the release of a long press emits (iOS) lands on the item that has just opened\n  // under the finger: swallowed before it reaches the item or the click-inside dismissal.\n  const clickSwallowRef = useRef<(() => void) | null>(null)\n  const stopSwallowingClicks = () => {\n    clickSwallowRef.current?.()\n    clickSwallowRef.current = null\n  }\n  const swallowNextClick = () => {\n    stopSwallowingClicks()\n    const swallow = (event: MouseEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n      stopSwallowingClicks()\n    }\n    window.addEventListener('click', swallow, { capture: true })\n    const timer = window.setTimeout(stopSwallowingClicks, LONG_PRESS_CLICK_WINDOW_MS)\n    clickSwallowRef.current = () => {\n      window.removeEventListener('click', swallow, { capture: true })\n      window.clearTimeout(timer)\n    }\n  }\n\n  useEffect(\n    () => () => {\n      endPress()\n      stopSwallowingClicks()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  )\n\n  const handlePointerDown = (event: React.PointerEvent<HTMLElement>) => {\n    if (disabled || event.pointerType === 'mouse' || !isInRegion(event)) return\n    endPress()\n    const region = event.currentTarget\n    userSelectRef.current = region.style.getPropertyValue('user-select')\n    region.style.setProperty('-webkit-user-select', 'none')\n    region.style.setProperty('user-select', 'none')\n    const { clientX: x, clientY: y } = event\n    longPressRef.current = {\n      x,\n      y,\n      timer: window.setTimeout(() => {\n        longPressRef.current = null\n        swallowNextClick()\n        openAt({ kind: 'point', x, y })\n      }, LONG_PRESS_MS)\n    }\n  }\n\n  const handlePointerMove = (event: React.PointerEvent<HTMLElement>) => {\n    const press = longPressRef.current\n    if (!press) return\n    if (Math.hypot(event.clientX - press.x, event.clientY - press.y) > LONG_PRESS_TOLERANCE_PX) {\n      cancelLongPress()\n    }\n  }\n\n  const contextValue: MenuContextProps = useMemo(\n    () => ({\n      autoClose,\n      close,\n      container: portalContainer ?? true,\n      focusStrategy: state.focusStrategy as MenuFocusStrategy | null,\n      hide,\n      menuId,\n      menuStyle,\n      menuTriggerProps: {},\n      overlayRef,\n      placementAttr,\n      portalContainer,\n      reference: 'toggle',\n      registerOverlay,\n      show: (focusStrategy) => state.open(focusStrategy ?? 'first'),\n      targetRef,\n      toggle: (focusStrategy) => state.toggle(focusStrategy ?? 'first'),\n      toggleNodeRef,\n      triggerId,\n      visible: state.isOpen\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      autoClose,\n      menuId,\n      menuStyle,\n      placementAttr,\n      portalContainer,\n      state.focusStrategy,\n      state.isOpen,\n      triggerId\n    ]\n  )\n\n  return (\n    <MenuContext.Provider value={contextValue}>\n      <Component\n        id={triggerId}\n        className={classNames('context-menu', className)}\n        {...(mergeProps(\n          {\n            onContextMenu: handleContextMenu,\n            onKeyDown: handleKeyDown,\n            onKeyUp: handleKeyUp,\n            onPointerDown: handlePointerDown,\n            onPointerMove: handlePointerMove,\n            onPointerUp: endPress,\n            onPointerCancel: endPress,\n            onPointerLeave: endPress\n          },\n          rest\n        ) as Record<string, unknown>)}\n        ref={forkedRef}\n      >\n        {children}\n      </Component>\n    </MenuContext.Provider>\n  )\n}\n\nexport const ContextMenu = createPolymorphicComponent<ContextMenuComponent>(\n  ContextMenuRender as ForwardRefRenderFunction<Element, ContextMenuProps<ElementType>>,\n  'ContextMenu'\n)\n"],"mappings":"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"}

package/dist/chunks/datagrid-n9vFeXN1.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./useForkedRef-WoqMqsWE.js";import{t}from"./tableClassName-jRfRDXA3.js";import n,{forwardRef as r,useContext as i,useEffect as a,useMemo as o,useRef as s,useState as c}from"react";import l from"classnames";import{useCheckbox as u}from"react-aria";import{useToggleState as d}from"react-stately";import{Cell as f,CheckboxContext as p,Column as m,Rect as h,Row as g,Table as _,TableBody as v,TableHeader as y,TableLayout as b,TableLoadMoreItem as x,TableStateContext as S,Virtualizer as C,useSlottedContext as w}from"react-aria-components";const T=e=>{let t=e?.props?.pin;return t===`start`||t===`end`?t:void 0},E=e=>{let t=i(S)?.collection.columns;if(e==null||!t)return``;let n=null,r=null;return t.forEach((e,t)=>{let i=T(e);i===`start`?n=t:i===`end`&&r==null&&(r=t)}),e===n?`datagrid-pin-cue-start`:e===r?`datagrid-pin-cue-end`:``},D=({columnIndex:e,...t})=>{let r=E(e);return/* @__PURE__ */ n.createElement(`div`,{...t,className:l(t.className,r)||void 0})};var O=class extends b{constructor(...e){super(...e),this.positioned=/* @__PURE__ */ new WeakMap}pinOf(e){let t=e.type===`column`?e.index:e.colIndex??e.index;return T(this.collection.columns[t])}get hasEndPinnedColumn(){return this.collection.columns.some(e=>T(e)===`end`)}isStickyColumn(e){return this.pinOf(e)!=null}buildColumn(e,t,n){return this.unstickEndPinned(e,super.buildColumn(e,t,n))}buildCell(e,t,n){return this.unstickEndPinned(e,super.buildCell(e,t,n))}unstickEndPinned(e,t){return this.pinOf(e)===`end`&&(t.layoutInfo.isSticky=!1),t}buildHeaderRow(...e){let t=super.buildHeaderRow(...e),n=t.children??[];for(let e of n)e.node&&this.pinOf(e.node)===`end`&&(e.layoutInfo.zIndex=n.length+2);return t}buildRow(e,t,n){if(!this.hasEndPinnedColumn)return super.buildRow(e,t,n);let r=this.requestedRect;this.requestedRect=new h(r.x,r.y,1/0,r.height);try{return super.buildRow(e,t,n)}finally{this.requestedRect=r}}getVisibleLayoutInfos(e){let t=super.getVisibleLayoutInfos(e),{columns:n}=this.collection,r=this.virtualizer?.visibleRect;if(!r||!Number.isFinite(r.maxX)||!this.hasEndPinnedColumn)return t;let i=/* @__PURE__ */ new Map,a=0;for(let e=n.length-1;e>=0;e--){let t=n[e];t&&T(t)===`end`&&(i.set(e,a),a+=this.getLayoutInfo(t.key)?.rect.width??0)}let o=r.maxX-this.padding;return t.map(e=>{if(e.type!==`column`&&e.type!==`cell`)return e;let t=this.collection.getItem(e.key);if(!t)return e;let n=t.type===`column`?t.index:t.colIndex??t.index,r=i.get(n);if(r==null)return e;let a=Math.min(e.rect.x,o-r-e.rect.width);if(a===e.rect.x)return e;let s=this.positioned.get(e);if(s?.rect.x===a)return s;let c=e.copy();return c.rect.x=a,this.positioned.set(e,c),c})}buildRowGroup(...e){let t=super.buildRowGroup(...e);return t.layoutInfo.rect.height=Math.max(0,t.layoutInfo.rect.height),t}};const k=r(({align:r,bordered:i,borderless:u,children:d,className:f,color:p,disabledKeys:m,estimatedRowHeight:h,footer:g,hover:v,onSelectionChange:y,onSortChange:b,rowHeight:x,selectedKeys:S,selectionMode:w=`none`,sm:T,sortDescriptor:E,...D},k)=>{let A=x===`auto`,j=o(()=>new O(A?{estimatedRowHeight:h,headingHeight:h}:{rowHeight:x}),[A,x,h]),M=s(null),N=e(k,M),[P,F]=c(!1),[I,L]=c(!1);a(()=>{let e=M.current;if(!e)return;let t=()=>{let t=Math.abs(e.scrollLeft);F(t>0),L(Math.ceil(t+e.clientWidth)<e.scrollWidth)};t(),e.addEventListener(`scroll`,t,{passive:!0});let n=typeof ResizeObserver>`u`?null:new ResizeObserver(t);return n?.observe(e),()=>{e.removeEventListener(`scroll`,t),n?.disconnect()}},[]);let R=l(`datagrid`,p,r&&t[r],{bordered:i,borderless:u,context:!!p,hoverable:v,sm:T,"datagrid-scrolled-start":P,"datagrid-scrolled-end":I},f);return/* @__PURE__ */ n.createElement(C,{layout:j,shouldObserveItemSize:A},/* @__PURE__ */ n.createElement(_,{"aria-label":D[`aria-label`],"aria-labelledby":D[`aria-labelledby`],className:R||void 0,disabledKeys:m,onSelectionChange:y,onSortChange:b,ref:N,selectedKeys:S,selectionMode:w,sortDescriptor:E,render:e=>/* @__PURE__ */ n.createElement(`div`,{...e,"aria-describedby":e[`aria-describedby`]||void 0})},d),g&&/* @__PURE__ */ n.createElement(`div`,{className:l(`datagrid-footer`,p,{borderless:u,context:!!p})},g))});k.displayName=`DataGrid`;const A={id:`__datagrid-body-loader__`},j=({children:e,className:t,dependencies:r,isLoading:i,items:a,loadingContent:s,onLoadMore:c,renderEmptyState:u})=>{let d=c!=null&&a!=null,f=o(()=>d?[...a,A]:a,[d,a]),p=o(()=>d?[...r??[],i,c,s]:r,[r,d,i,c,s]),m=d?t=>t===A?/* @__PURE__ */ n.createElement(x,{className:`datagrid-loader`,isLoading:i,onLoadMore:i?void 0:c},s):e(t):e;return/* @__PURE__ */ n.createElement(v,{className:l(`datagrid-body`,t),dependencies:p,items:f,renderEmptyState:u},m)},M=({children:e,className:t,colSpan:r,id:i,textValue:a})=>/* @__PURE__ */ n.createElement(f,{className:l(`datagrid-cell`,t),colSpan:r,id:i,render:(e,{columnIndex:t})=>/* @__PURE__ */ n.createElement(D,{...e,columnIndex:t}),textValue:a},e),N=({allowsSorting:e,children:t,className:r,defaultWidth:i,id:a,isRowHeader:o,maxWidth:s,minWidth:c,pin:u,textValue:d})=>/* @__PURE__ */ n.createElement(m,{allowsSorting:e,className:l(`datagrid-col`,u&&`datagrid-col-pinned-${u}`,r),defaultWidth:i,id:a,isRowHeader:o,maxWidth:s,minWidth:c,textValue:d,render:e=>{let t=Number(e[`aria-colindex`]);return/* @__PURE__ */ n.createElement(D,{...e,columnIndex:Number.isNaN(t)?null:t-1})},pin:u},e?({sortDirection:e})=>/* @__PURE__ */ n.createElement(n.Fragment,null,t,/* @__PURE__ */ n.createElement(`span`,{"aria-hidden":`true`,className:`datagrid-sort-icon`},e===`ascending`?`▲`:e===`descending`?`▼`:`⇅`)):t),P=({children:e,className:t,columns:r,dependencies:i})=>/* @__PURE__ */ n.createElement(y,{className:l(`datagrid-header`,t),columns:r,dependencies:i},e),F=({children:e,className:t,columns:r,id:i,textValue:a})=>/* @__PURE__ */ n.createElement(g,{className:l(`datagrid-row`,t),columns:r,id:i,textValue:a},e),I=e=>{let t=w(p,`selection`);if(!t)throw Error(`${e} must be rendered inside a DataGrid with selection enabled.`);return t},L=({className:e})=>{let t=I(`DataGridSelectionCell`);return/* @__PURE__ */ n.createElement(z,{checkboxProps:t,className:e})},R=({className:e})=>{let t=I(`DataGridSelectAllCell`);return/* @__PURE__ */ n.createElement(z,{checkboxProps:t,className:e})},z=({checkboxProps:e,className:t})=>{let r=d(e),i=s(null),{inputProps:a}=u(e,r,i);return/* @__PURE__ */ n.createElement(`input`,{...a,"aria-describedby":void 0,className:t??`check-input`,ref:i})};export{N as a,k as c,P as i,L as n,M as o,F as r,j as s,R as t};
+//# sourceMappingURL=datagrid-n9vFeXN1.js.map

package/dist/chunks/datagrid-n9vFeXN1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datagrid-n9vFeXN1.js","names":["AriaTable","AriaTableBody","AriaCell","AriaColumn","AriaTableHeader","AriaRow","useForkedRef","React","classNames","Cell$1","Column$1","Row$1","TableBody$1","TableHeader$1","getColumnPin","pin","column","usePinCueClassName","columns","useContext","TableStateContext","columnIndex","start","end","index","PinCueElement","props","pinCueClassName","DataGridTableLayout","TableLayout","_args","colIndex","node","x","y","layoutNode","args","row","requested","Rect","infos","rect","visible","trailing","width","edge","info","offset","last","copy","group","DataGrid","forwardRef","rest","isVariableRowHeight","rowHeight","layout","useMemo","estimatedRowHeight","gridRef","useRef","ref","forwardedRef","scrolledStart","setScrolledStart","useState","scrolledEnd","setScrolledEnd","useEffect","grid","updateScrollState","scrolled","observer","_className","color","align","TABLE_ALIGN_CLASS_NAMES","hover","className","Virtualizer","Table","children","footer","LOADER_ITEM","DataGridBody","hasLoader","onLoadMore","items","itemsWithLoader","dependenciesWithLoader","dependencies","isLoading","loadingContent","bodyChildren","item","TableLoadMoreItem","DataGridCell","DataGridColumn","allowsSorting","sortDirection","DataGridHeader","DataGridRow","useSelectionCheckboxProps","useSlottedContext","CheckboxContext","component","DataGridSelectionCell","checkboxProps","DataGridCheckboxInput","DataGridSelectAllCell","toggleState","useToggleState","useCheckbox","inputProps"],"sources":["../../src/components/datagrid/pinnedColumns.tsx","../../src/components/datagrid/DataGridTableLayout.ts","../../src/components/datagrid/DataGrid.tsx","../../src/components/datagrid/DataGridBody.tsx","../../src/components/datagrid/DataGridCell.tsx","../../src/components/datagrid/DataGridColumn.tsx","../../src/components/datagrid/DataGridHeader.tsx","../../src/components/datagrid/DataGridRow.tsx","../../src/components/datagrid/DataGridSelectionCell.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classNames from 'classnames'\nimport { TableStateContext } from 'react-aria-components'\n\nexport type ColumnPin = 'start' | 'end'\n\n/**\n * A column's `pin`, read off the resolved collection. `DataGridColumn` passes `pin` through to\n * react-aria-components' `Column`, whose collection builder keeps the props it is given, so it\n * reaches `column.props.pin` however the header was written: static children, fragments, a\n * wrapper component or the `columns` render function.\n */\nexport const getColumnPin = (\n  column: { props?: unknown } | null | undefined\n): ColumnPin | undefined => {\n  const pin = (column?.props as { pin?: unknown } | undefined)?.pin\n  return pin === 'start' || pin === 'end' ? pin : undefined\n}\n\n/**\n * The scroll-cue class of a column: `datagrid-pin-cue-start` on the last `pin=\"start\"` column,\n * `datagrid-pin-cue-end` on the first `pin=\"end\"` one, the boundary of each pinned group.\n * `DataGrid.scss` gives it the shadow while the grid carries `datagrid-scrolled-start`/\n * `datagrid-scrolled-end`. A class on the cell and a rule in the stylesheet, not a `<style>`\n * element written per grid: the HTML standard allows a `<style>` in `<body>` only with its rules\n * in `@scope`, which the browsers this package supports don't all have.\n */\nconst usePinCueClassName = (columnIndex: number | null | undefined): string => {\n  const columns = useContext(TableStateContext)?.collection.columns\n  if (columnIndex == null || !columns) return ''\n  let start: number | null = null\n  let end: number | null = null\n  columns.forEach((column, index) => {\n    const pin = getColumnPin(column)\n    if (pin === 'start') start = index\n    else if (pin === 'end' && end == null) end = index\n  })\n  if (columnIndex === start) return 'datagrid-pin-cue-start'\n  if (columnIndex === end) return 'datagrid-pin-cue-end'\n  return ''\n}\n\n/**\n * The element react-aria-components renders for a column header's or a cell's `render`, with the\n * scroll-cue class of its column added. A component, so the table state is read where the element\n * really renders: `DataGridColumn` and `DataGridCell` themselves also run in the pass that builds\n * the collection, which has no table state yet, and their render props are kept from that pass.\n */\nexport const PinCueElement = ({\n  columnIndex,\n  ...props\n}: React.ComponentProps<'div'> & { columnIndex: number | null | undefined }) => {\n  const pinCueClassName = usePinCueClassName(columnIndex)\n  return <div {...props} className={classNames(props.className, pinCueClassName) || undefined} />\n}\n","import { LayoutInfo, Rect, TableLayout } from 'react-aria-components'\n\nimport { getColumnPin } from './pinnedColumns'\n\ntype LayoutNode = ReturnType<TableLayout<unknown>['buildCell']>\ntype GridNode<T> = Parameters<TableLayout<T>['buildCell']>[0]\n\n/**\n * `DataGrid`'s own subclass of react-aria-components' `TableLayout`. It pins columns inside the\n * layout engine, from the rects the engine computes, so a pinned column is sized, stacked and\n * mounted by the same code that lays out every other cell.\n *\n * `pin=\"start\"` reuses the engine's sticky positioning (`isStickyColumn`, hardcoded to `false`\n * upstream): the same mechanism that keeps the header row at the top, `position: sticky` at the\n * column's own offset from the leading edge, mirrored for RTL by the engine itself.\n *\n * `pin=\"end\"` has no such mechanism. The engine's sticky cells are `inline-block`s in the row's\n * flow, so their in-flow position is the leading edge, and `position: sticky` toward the trailing\n * edge never moves them. So an end-pinned cell keeps its absolute position, and\n * `getVisibleLayoutInfos` moves it to `min(its own x, the visible rect's trailing edge minus the\n * end-pinned columns after it)`. The virtualizer renders again on every scroll (react-aria's\n * scroll view commits the new visible rect with `flushSync`), so the cell moves in the same\n * commit as the rows do. Every coordinate is logical: the engine writes `right` instead of `left`\n * under RTL, and its visible rect's `x` is the distance scrolled from the leading edge.\n *\n * Both sides are persisted: `isStickyColumn` returns `true` for them, which is what puts a\n * column's index in the list of cells the engine always renders. The end-pinned ones then have\n * `isSticky` taken back off in `buildColumn`/`buildCell`.\n */\nexport class DataGridTableLayout<T> extends TableLayout<T> {\n  // The positioned copy last returned for each end-pinned layout info, reused while its `x` holds\n  // so a vertical scroll doesn't re-render every pinned cell.\n  private positioned = new WeakMap<LayoutInfo, LayoutInfo>()\n\n  private pinOf(node: { type: string; index: number; colIndex?: number | null }) {\n    const colIndex = node.type === 'column' ? node.index : (node.colIndex ?? node.index)\n    return getColumnPin(this.collection.columns[colIndex])\n  }\n\n  private get hasEndPinnedColumn() {\n    return this.collection.columns.some((column) => getColumnPin(column) === 'end')\n  }\n\n  protected isStickyColumn(node: GridNode<T>): boolean {\n    return this.pinOf(node) != null\n  }\n\n  protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode {\n    return this.unstickEndPinned(node, super.buildColumn(node, x, y))\n  }\n\n  protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode {\n    return this.unstickEndPinned(node, super.buildCell(node, x, y))\n  }\n\n  private unstickEndPinned(node: GridNode<T>, layoutNode: LayoutNode): LayoutNode {\n    if (this.pinOf(node) === 'end') layoutNode.layoutInfo.isSticky = false\n    return layoutNode\n  }\n\n  // The engine stacks header cells from the leading edge down (`columns.length - i + 1`), so a\n  // header to the right of another is below it. An end-pinned header covers the ones scrolling\n  // under it, so it goes above all of them; body cells already take the sticky cells' 2.\n  protected buildHeaderRow(...args: Parameters<TableLayout<T>['buildHeaderRow']>): LayoutNode {\n    const row = super.buildHeaderRow(...args)\n    const columns = row.children ?? []\n    for (const column of columns) {\n      if (column.node && this.pinOf(column.node as GridNode<T>) === 'end') {\n        column.layoutInfo.zIndex = columns.length + 2\n      }\n    }\n    return row\n  }\n\n  // A row stops building cells past the requested rect's trailing edge, so an end-pinned cell\n  // further right than the overscan had no layout to render. With an end-pinned column every row\n  // is built across its whole width: layout objects only, the DOM is still windowed.\n  protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode {\n    if (!this.hasEndPinnedColumn) return super.buildRow(node, x, y)\n    const requested = this.requestedRect\n    this.requestedRect = new Rect(requested.x, requested.y, Infinity, requested.height)\n    try {\n      return super.buildRow(node, x, y)\n    } finally {\n      this.requestedRect = requested\n    }\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    const infos = super.getVisibleLayoutInfos(rect)\n    const { columns } = this.collection\n    const visible = this.virtualizer?.visibleRect\n    if (!visible || !Number.isFinite(visible.maxX) || !this.hasEndPinnedColumn) return infos\n\n    // Each end-pinned column's distance from the trailing edge: the widths of the end-pinned\n    // columns after it.\n    const trailing = new Map<number, number>()\n    let width = 0\n    for (let index = columns.length - 1; index >= 0; index--) {\n      const column = columns[index]\n      if (!column || getColumnPin(column) !== 'end') continue\n      trailing.set(index, width)\n      width += this.getLayoutInfo(column.key)?.rect.width ?? 0\n    }\n\n    const edge = visible.maxX - this.padding\n    return infos.map((info) => {\n      if (info.type !== 'column' && info.type !== 'cell') return info\n      const node = this.collection.getItem(info.key) as GridNode<T> | null\n      if (!node) return info\n      const colIndex = node.type === 'column' ? node.index : (node.colIndex ?? node.index)\n      const offset = trailing.get(colIndex)\n      if (offset == null) return info\n      const x = Math.min(info.rect.x, edge - offset - info.rect.width)\n      if (x === info.rect.x) return info\n      const last = this.positioned.get(info)\n      if (last?.rect.x === x) return last\n      const copy = info.copy()\n      copy.rect.x = x\n      this.positioned.set(info, copy)\n      return copy\n    })\n  }\n\n  // An empty body fills the viewport below the header. On the server the viewport has no size,\n  // so the body came out as tall as minus the header (`height: -40px`), which CSS doesn't allow.\n  protected buildRowGroup(...args: Parameters<TableLayout<T>['buildRowGroup']>) {\n    const group = super.buildRowGroup(...args)\n    group.layoutInfo.rect.height = Math.max(0, group.layoutInfo.rect.height)\n    return group\n  }\n}\n","import React, {\n  ReactElement,\n  ReactNode,\n  Ref,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react'\nimport classNames from 'classnames'\nimport {\n  Key,\n  Selection,\n  SortDescriptor,\n  Table as AriaTable,\n  Virtualizer\n} from 'react-aria-components'\n\nimport { useForkedRef } from '../../hooks/useForkedRef'\nimport { ContextColor } from '../../types'\nimport { TABLE_ALIGN_CLASS_NAMES } from '../../utils/tableClassName'\nimport { DataGridBodyProps } from './DataGridBody'\nimport { DataGridHeaderProps } from './DataGridHeader'\nimport { DataGridTableLayout } from './DataGridTableLayout'\nimport './DataGrid.scss'\n\n// No `striped`/`stacked` props: zebra-striping via CSS `:nth-of-type` (Table's approach) isn't\n// virtualization-safe — a windowed row's DOM siblings are only the currently-mounted rows, not\n// every logical row, so the stripe parity would flip as the mounted window's starting index\n// changes during scroll. A correct implementation needs the row's real index at render time, not\n// a pure-CSS trick; deferred rather than shipped broken.\ninterface DataGridOwnProps<T extends object> {\n  /**\n   * An accessible label for the grid, used when there's no visible heading.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible heading element for the grid.\n   */\n  'aria-labelledby'?: string\n  /**\n   * Set the vertical alignment of cell content. Mirrors `Table`'s prop of the same name for API\n   * parity — same as `Table`, this awaits chassis-css adding the matching `.align-*` styles.\n   */\n  align?: 'bottom' | 'middle' | 'top'\n  /**\n   * Add borders on all sides of the grid and cells.\n   */\n  bordered?: boolean\n  /**\n   * Remove borders on all sides of the grid and cells.\n   */\n  borderless?: boolean\n  /**\n   * A `DataGridHeader` and a `DataGridBody`, each built from `DataGridColumn`/`DataGridRow`/\n   * `DataGridCell`.\n   */\n  children: [ReactElement<DataGridHeaderProps<T>>, ReactElement<DataGridBodyProps<T>>]\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.\n   */\n  color?: ContextColor\n  /**\n   * A list of row keys to disable. Disabled rows cannot be selected, focused, or interacted with.\n   */\n  disabledKeys?: Iterable<Key>\n  /**\n   * Content shown below the grid, e.g. a totals row or a \"load more\" control. Rendered as plain\n   * markup outside the grid's own scrollable/virtualized region — not part of the\n   * keyboard-navigable grid, and never scrolls out of view along with the body rows. Mirrors\n   * `Table`'s `footer` prop for API parity.\n   */\n  footer?: ReactNode\n  /**\n   * Enable a hover state on grid rows.\n   */\n  hover?: boolean\n  /**\n   * Handler that is called when the selection changes.\n   */\n  onSelectionChange?: (keys: Selection) => void\n  /**\n   * Handler that is called when a column is sorted.\n   */\n  onSortChange?: (descriptor: SortDescriptor) => void\n  /**\n   * The currently selected row keys (controlled).\n   */\n  selectedKeys?: Selection\n  /**\n   * The type of selection that is allowed.\n   */\n  selectionMode?: 'none' | 'single' | 'multiple'\n  /**\n   * Make the grid more compact by cutting all cell padding.\n   */\n  sm?: boolean\n  /**\n   * The current sort column and direction.\n   */\n  sortDescriptor?: SortDescriptor\n}\n\ntype DataGridRowHeightProps =\n  | {\n      /**\n       * Row height in pixels, or `\"auto\"` to measure each row from its own rendered content\n       * instead of a single fixed height shared by every row (pair it with a required\n       * `estimatedRowHeight`, and see the docs site's \"Variable row height\" section for the\n       * tradeoffs). A fixed number renders every row, including the header, at that exact\n       * height; content taller than it visually overflows rather than growing the row.\n       */\n      rowHeight: number\n      estimatedRowHeight?: never\n    }\n  | {\n      rowHeight: 'auto'\n      /**\n       * Seeds the virtualizer's scroll-position math for rows that haven't been measured yet.\n       * Required when `rowHeight=\"auto\"` — pick a value close to the typical row's real height\n       * to minimize scroll-jump on first measurement. A row's real height can still turn out far\n       * from this estimate once it renders, which can cause a visible scroll-jump for rows the\n       * viewport hasn't reached yet.\n       */\n      estimatedRowHeight: number\n    }\n\nexport type DataGridProps<T extends object> = DataGridOwnProps<T> & DataGridRowHeightProps\n\nconst DataGridInner = <T extends object>(\n  {\n    align,\n    bordered,\n    borderless,\n    children,\n    className,\n    color,\n    disabledKeys,\n    estimatedRowHeight,\n    footer,\n    hover,\n    onSelectionChange,\n    onSortChange,\n    rowHeight,\n    selectedKeys,\n    selectionMode = 'none',\n    sm,\n    sortDescriptor,\n    ...rest\n  }: DataGridProps<T>,\n  forwardedRef: Ref<HTMLDivElement>\n) => {\n  const isVariableRowHeight = rowHeight === 'auto'\n  const layout = useMemo(\n    () =>\n      new DataGridTableLayout<T>(\n        // `headingHeight` is pinned to `estimatedRowHeight` (fixed, not itself an estimate) in\n        // variable-height mode — leaving it unset falls back to `estimatedRowHeight` as an\n        // *estimate* for the header too, which sounds harmless but isn't: the header's own\n        // sticky-positioned outer wrapper (built once in `buildTableHeader`, see\n        // `DataGridTableLayout`'s doc comment for why the header is sticky at all) is never\n        // recomputed when a column-header cell's later real measurement corrects its height, so\n        // the outer wrapper's stale height desyncs from the cell's real one, spilling header\n        // content into the body's first row instead of the header growing to fit it. Fixing the\n        // header's height sidesteps that gap instead of shipping it.\n        isVariableRowHeight\n          ? { estimatedRowHeight, headingHeight: estimatedRowHeight }\n          : { rowHeight }\n      ),\n    [isVariableRowHeight, rowHeight, estimatedRowHeight]\n  )\n  const gridRef = useRef<HTMLDivElement>(null)\n  const ref = useForkedRef(forwardedRef, gridRef)\n\n  // Drives the pin=start/pin=end scroll-cue box-shadow — see `PinCueElement` — which should\n  // only appear once there's actually hidden content under the pinned column to cue.\n  const [scrolledStart, setScrolledStart] = useState(false)\n  const [scrolledEnd, setScrolledEnd] = useState(false)\n\n  useEffect(() => {\n    const grid = gridRef.current\n    if (!grid) return\n\n    const updateScrollState = () => {\n      // Under RTL, browsers count `scrollLeft` from 0 at the start down to minus the overflow, so\n      // the distance scrolled from the start is its absolute value in either direction.\n      const scrolled = Math.abs(grid.scrollLeft)\n      setScrolledStart(scrolled > 0)\n      setScrolledEnd(Math.ceil(scrolled + grid.clientWidth) < grid.scrollWidth)\n    }\n\n    updateScrollState()\n    grid.addEventListener('scroll', updateScrollState, { passive: true })\n    const observer =\n      typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(updateScrollState)\n    observer?.observe(grid)\n    return () => {\n      grid.removeEventListener('scroll', updateScrollState)\n      observer?.disconnect()\n    }\n  }, [])\n\n  const _className = classNames(\n    'datagrid',\n    color,\n    align && TABLE_ALIGN_CLASS_NAMES[align],\n    {\n      bordered,\n      borderless,\n      // The color class names the color; `.datagrid.context` (DataGrid.scss) paints with it, as\n      // `.table.context` does for `Table`.\n      context: !!color,\n      hoverable: hover,\n      sm,\n      'datagrid-scrolled-start': scrolledStart,\n      'datagrid-scrolled-end': scrolledEnd\n    },\n    className\n  )\n\n  return (\n    <Virtualizer layout={layout} shouldObserveItemSize={isVariableRowHeight}>\n      <AriaTable\n        aria-label={rest['aria-label']}\n        aria-labelledby={rest['aria-labelledby']}\n        className={_className || undefined}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        onSortChange={onSortChange}\n        ref={ref}\n        selectedKeys={selectedKeys}\n        selectionMode={selectionMode}\n        sortDescriptor={sortDescriptor}\n        // react-aria joins the grid's descriptions without dropping an empty result, so a grid\n        // with none had `aria-describedby=\"\"`.\n        render={(props) => (\n          <div\n            {...(props as React.ComponentProps<'div'>)}\n            aria-describedby={props['aria-describedby'] || undefined}\n          />\n        )}\n      >\n        {children}\n      </AriaTable>\n      {footer && (\n        // A sibling of the grid, so it takes the color itself: nothing reaches it by inheritance.\n        <div className={classNames('datagrid-footer', color, { borderless, context: !!color })}>\n          {footer}\n        </div>\n      )}\n    </Virtualizer>\n  )\n}\n\n// `forwardRef` erases type parameters, so the generic component is cast back to a generic\n// signature for callers — same pattern `Table` uses.\nexport const DataGrid = forwardRef(DataGridInner) as <T extends object>(\n  props: DataGridProps<T> & { ref?: Ref<HTMLDivElement> }\n) => ReactElement\n\n;(DataGrid as { displayName?: string }).displayName = 'DataGrid'\n","import React, { ReactElement, ReactNode, useMemo } from 'react'\nimport classNames from 'classnames'\nimport {\n  TableBody as AriaTableBody,\n  TableBodyRenderProps,\n  TableLoadMoreItem\n} from 'react-aria-components'\n\n// A unique value appended to `items` internally to represent the trailing \"load more\" row in\n// react-aria-components' collection. `TableLoadMoreItem` has to be returned from the per-item\n// render function like any other row — react-aria-components' `useCachedChildren` only supports\n// EITHER `items` + a render function OR static `children`, never a mix of both in the same\n// `children` prop, so a `<TableLoadMoreItem>` placed as a plain JSX sibling inside `<TableBody>`\n// is silently dropped (or crashes, if `children` becomes an array mixing the render function in).\n// Checked by reference (`item === LOADER_ITEM`), so it can never collide with a real `T` the way a\n// `{ __loader: true }` marker object might if compared structurally. Its `id` matters too, not\n// just its identity: react-aria-components derives each rendered item's React key from\n// `rendered.props.id ?? item?.key ?? item?.id ?? <positional index>` (`useCachedChildren`) —\n// `TableLoadMoreItem` doesn't accept an `id` prop itself, so without this object's own `id` the\n// loader's key falls back to its position in the array, which collides with a real row whenever a\n// row's own `id` happens to equal that count (e.g. a 2-item list with a row literally id `\"2\"`).\nconst LOADER_ITEM = { id: '__datagrid-body-loader__' }\n\ninterface DataGridBodyOwnProps {\n  /**\n   * A string of all className you want applied to the body row group.\n   */\n  className?: string\n  /**\n   * Values that should invalidate the row cache when using the `items`/render-function form of\n   * `children` — e.g. a value from outside `items` that the render function reads. Without this,\n   * changing that outside value won't re-render already-cached rows, since dynamic rows are only\n   * rebuilt when `items` or `dependencies` change by reference, not on every parent re-render.\n   */\n  dependencies?: ReadonlyArray<unknown>\n  /**\n   * Content shown in place of rows when `items` is empty.\n   */\n  renderEmptyState?: (props: TableBodyRenderProps) => React.ReactNode\n}\n\n/**\n * The `items` + render-function form. `isLoading`/`loadingContent`/`onLoadMore` live here rather\n * than alongside the static form because the loader row is generated by appending to `items` and\n * rendering through that same function — there's no growing dataset to load more of, and nothing\n * to render the loader with, in a hand-written list of `DataGridRow` elements.\n */\ninterface DataGridBodyDynamicProps<T> {\n  /**\n   * A render function called once per item in `items`, returning that row's `DataGridRow`.\n   */\n  children: (item: T) => ReactElement\n  /**\n   * Whether more items are currently being fetched. Shows `loadingContent` in the loader row while\n   * true, and — until this goes back to `false` — suppresses further `onLoadMore` calls, so one\n   * scroll-into-view doesn't fire the callback again before the in-flight fetch resolves.\n   */\n  isLoading?: boolean\n  /**\n   * A list of row data objects, rendered via the function form of `children`.\n   */\n  items: Iterable<T>\n  /**\n   * Content rendered inside the loader row while `isLoading` is true, e.g. a spinner. Only takes\n   * effect alongside `onLoadMore`.\n   */\n  loadingContent?: ReactNode\n  /**\n   * Called when the grid scrolls near its last row, so more data can be fetched and appended to\n   * `items`. Pair with `isLoading` so a fetch already in flight isn't triggered again before it\n   * resolves.\n   */\n  onLoadMore?: () => void\n}\n\n/** The static form: `DataGridRow` elements written out directly. */\ninterface DataGridBodyStaticProps {\n  /**\n   * `DataGridRow` elements.\n   */\n  children: ReactElement | ReactElement[]\n  isLoading?: never\n  items?: never\n  loadingContent?: never\n  onLoadMore?: never\n}\n\n/**\n * Split into a static and a dynamic form so the two can't be mixed: the loader row is appended to\n * `items` and rendered through `children`, so `onLoadMore` alongside a static list of elements used\n * to type-check and then throw at render (\"children is not a function\") the moment the loader row\n * came up.\n */\nexport type DataGridBodyProps<T> = DataGridBodyOwnProps &\n  (DataGridBodyDynamicProps<T> | DataGridBodyStaticProps)\n\n/**\n * Body row group for `DataGrid`, containing `DataGridRow`s. Unlike `Table`'s sub-parts, this\n * renders directly — it's a thin wrapper over react-aria-components' own `TableBody`.\n *\n * Always carries the `datagrid-body` class — see `DataGridHeader`'s equivalent note.\n */\nexport const DataGridBody = <T extends object>({\n  children,\n  className,\n  dependencies,\n  isLoading,\n  items,\n  loadingContent,\n  onLoadMore,\n  renderEmptyState\n}: DataGridBodyProps<T>) => {\n  const hasLoader = onLoadMore != null && items != null\n\n  const itemsWithLoader = useMemo(() => {\n    if (!hasLoader) return items\n    return [...(items as Iterable<T>), LOADER_ITEM] as Iterable<T>\n  }, [hasLoader, items])\n\n  // react-aria-components caches each rendered row by item identity (see `dependencies`'s own doc\n  // comment above) — the loader branch below reads `isLoading`/`onLoadMore`/`loadingContent`, none\n  // of which are part of `items`, so without surfacing them here the cached loader row would keep\n  // whatever `isLoading` value (and stale `onLoadMore` closure) was in scope the first time it\n  // rendered, never picking up a later change.\n  const dependenciesWithLoader = useMemo(\n    () =>\n      hasLoader ? [...(dependencies ?? []), isLoading, onLoadMore, loadingContent] : dependencies,\n    [dependencies, hasLoader, isLoading, onLoadMore, loadingContent]\n  )\n\n  const bodyChildren = hasLoader\n    ? (item: T) =>\n        (item as unknown) === LOADER_ITEM ? (\n          <TableLoadMoreItem\n            className=\"datagrid-loader\"\n            isLoading={isLoading}\n            // Suppresses re-triggering onLoadMore while a fetch is already in flight — the\n            // underlying sentinel has no built-in debounce of its own and calls onLoadMore again\n            // whenever it (re-)observes the sentinel still intersecting, e.g. after the collection\n            // changes but the loader row hasn't yet scrolled out of view.\n            onLoadMore={isLoading ? undefined : onLoadMore}\n          >\n            {loadingContent}\n          </TableLoadMoreItem>\n        ) : (\n          // `hasLoader` implies the dynamic form of the props union, whose `children` is the\n          // render function — `onLoadMore` isn't assignable alongside static children.\n          (children as (item: T) => ReactElement)(item)\n        )\n    : children\n\n  return (\n    <AriaTableBody\n      className={classNames('datagrid-body', className)}\n      dependencies={dependenciesWithLoader}\n      items={itemsWithLoader}\n      renderEmptyState={renderEmptyState}\n    >\n      {bodyChildren}\n    </AriaTableBody>\n  )\n}\n","import React, { ReactNode } from 'react'\nimport { Key, Cell as AriaCell } from 'react-aria-components'\nimport classNames from 'classnames'\n\nimport { PinCueElement } from './pinnedColumns'\n\nexport interface DataGridCellProps {\n  /**\n   * The contents of the cell.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the cell.\n   */\n  className?: string\n  /**\n   * Indicates how many columns the cell spans.\n   */\n  colSpan?: number\n  /**\n   * The unique id of the cell.\n   */\n  id?: Key\n  /**\n   * A string representation of the cell's contents, used for typeahead.\n   */\n  textValue?: string\n}\n\n/**\n * A cell within a `DataGrid` row. Unlike `Table`'s sub-parts, this renders directly — it's a\n * thin wrapper over react-aria-components' own `Cell`.\n */\nexport const DataGridCell = ({\n  children,\n  className,\n  colSpan,\n  id,\n  textValue\n}: DataGridCellProps) => (\n  <AriaCell\n    className={classNames('datagrid-cell', className)}\n    colSpan={colSpan}\n    id={id}\n    render={(props, { columnIndex }) => (\n      <PinCueElement {...(props as React.ComponentProps<'div'>)} columnIndex={columnIndex} />\n    )}\n    textValue={textValue}\n  >\n    {children}\n  </AriaCell>\n)\n","import React, { ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Key, Column as AriaColumn } from 'react-aria-components'\nimport { ColumnSize, ColumnStaticSize } from 'react-stately'\n\nimport { PinCueElement } from './pinnedColumns'\n\nexport interface DataGridColumnProps {\n  /**\n   * Whether the column allows sorting. Adds a sort indicator and makes the header\n   * clickable/keyboard-activatable.\n   */\n  allowsSorting?: boolean\n  /**\n   * Rendered contents of the column header.\n   */\n  children: ReactNode\n  /**\n   * A string of all className you want applied to the column header.\n   */\n  className?: string\n  /**\n   * The initial width of the column, e.g. for a narrow selection/icon column — a plain number or\n   * `'<n>%'` for a fixed size, or `'<n>fr'` to share remaining space with other fractional\n   * columns in proportion (columns default to `'1fr'`, so they split space evenly unless given\n   * one of these). Unlike `Table`, which sizes a narrow column via `width: 1%` relying on native\n   * `<table>` auto-layout, `DataGrid`'s virtualized layout computes every column's width itself —\n   * a CSS `width` rule on the cell has no effect, so this prop is the only way to size a column.\n   */\n  defaultWidth?: ColumnSize | null\n  /**\n   * The unique id of the column, referenced by `sortDescriptor.column`.\n   */\n  id?: Key\n  /**\n   * Whether this column is a row header, announced by assistive technology during row\n   * navigation.\n   */\n  isRowHeader?: boolean\n  /**\n   * The maximum width of the column, as a fixed pixel number or `'<n>%'`.\n   */\n  maxWidth?: ColumnStaticSize | null\n  /**\n   * The minimum width of the column, as a fixed pixel number or `'<n>%'`.\n   */\n  minWidth?: ColumnStaticSize | null\n  /**\n   * Pin the column so it stays visible while the grid scrolls horizontally: `'start'` pins it to\n   * the leading edge, `'end'` to the trailing edge. Stacks correctly with other pinned columns on\n   * the same side, in declaration order.\n   */\n  pin?: 'start' | 'end'\n  /**\n   * A string representation of the column header, used for accessibility announcements. Defaults\n   * to `children` when it's a plain string — set this explicitly when the header contains\n   * anything else (an icon, a `Tooltip`, etc.).\n   */\n  textValue?: string\n}\n\n/**\n * A column within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin\n * wrapper over react-aria-components' own `Column`.\n *\n * When `allowsSorting` is set, renders a sort indicator after `children` — mirrors `Table`'s own\n * `TableColumnHeader`, but reads the active direction from react-aria-components' own\n * `ColumnRenderProps` (via the `children` render-prop form) instead of reaching into table state\n * directly, since this wrapper has no state of its own to read.\n */\nexport const DataGridColumn = ({\n  allowsSorting,\n  children,\n  className,\n  defaultWidth,\n  id,\n  isRowHeader,\n  maxWidth,\n  minWidth,\n  pin,\n  textValue\n}: DataGridColumnProps) => (\n  <AriaColumn\n    allowsSorting={allowsSorting}\n    className={classNames('datagrid-col', pin && `datagrid-col-pinned-${pin}`, className)}\n    defaultWidth={defaultWidth}\n    id={id}\n    isRowHeader={isRowHeader}\n    maxWidth={maxWidth}\n    minWidth={minWidth}\n    textValue={textValue}\n    // A column header's render props don't say which column it is, unlike a cell's\n    // `columnIndex`; its `aria-colindex` (1-based) does.\n    render={(props) => {\n      const colIndex = Number(props['aria-colindex'])\n      return (\n        <PinCueElement\n          {...(props as React.ComponentProps<'div'>)}\n          columnIndex={Number.isNaN(colIndex) ? null : colIndex - 1}\n        />\n      )\n    }}\n    // `pin` isn't a react-aria-components `Column` prop, but its collection builder preserves\n    // the full props object it's given verbatim (see react-stately's `Column.getCollectionNode`)\n    // — passing it through here is what makes it reach `column.props.pin`, which\n    // `DataGridTableLayout` positions both sides from and `PinCueElement` reads.\n    {...({ pin } as Record<string, unknown>)}\n  >\n    {allowsSorting\n      ? ({ sortDirection }) => (\n          <>\n            {children}\n            <span aria-hidden=\"true\" className=\"datagrid-sort-icon\">\n              {sortDirection === 'ascending' ? '▲' : sortDirection === 'descending' ? '▼' : '⇅'}\n            </span>\n          </>\n        )\n      : children}\n  </AriaColumn>\n)\n","import React, { ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { TableHeader as AriaTableHeader } from 'react-aria-components'\n\nexport interface DataGridHeaderProps<T> {\n  /**\n   * `DataGridColumn` elements, or a render function paired with `columns` for dynamic column\n   * generation.\n   */\n  children: ReactNode | ((column: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the header row group.\n   */\n  className?: string\n  /**\n   * A list of column data objects, rendered via the function form of `children`.\n   */\n  columns?: Iterable<T>\n  /**\n   * Values that should invalidate the column cache when using the `columns`/render-function form\n   * of `children` — see `DataGridBody`'s `dependencies` for why this matters.\n   */\n  dependencies?: ReadonlyArray<unknown>\n}\n\n/**\n * Header row group for `DataGrid`, containing `DataGridColumn`s. Unlike `Table`'s sub-parts,\n * this renders directly — it's a thin wrapper over react-aria-components' own `TableHeader`.\n *\n * Always carries the `datagrid-header` class (not just the caller's `className`) — `DataGrid.scss`\n * uses it to tell header cells from body cells, since react-aria-components renders both as plain\n * `[role=\"rowgroup\"]` divs with no structural difference to select on otherwise.\n */\nexport const DataGridHeader = <T extends object>({\n  children,\n  className,\n  columns,\n  dependencies\n}: DataGridHeaderProps<T>) => (\n  <AriaTableHeader\n    className={classNames('datagrid-header', className)}\n    columns={columns}\n    dependencies={dependencies}\n  >\n    {children}\n  </AriaTableHeader>\n)\n","import React, { ReactElement, ReactNode } from 'react'\nimport classNames from 'classnames'\nimport { Key, Row as AriaRow } from 'react-aria-components'\n\nexport interface DataGridRowProps<T> {\n  /**\n   * `DataGridCell` elements, or a render function called once per column with that column's\n   * data — required when the row's parent `DataGridBody` uses the `items`/render-function form.\n   */\n  children: ReactNode | ((column: T) => ReactElement)\n  /**\n   * A string of all className you want applied to the row.\n   */\n  className?: string\n  /**\n   * A list of column data objects, rendered via the function form of `children`.\n   */\n  columns?: Iterable<T>\n  /**\n   * The unique id of the row, referenced by `selectedKeys`/`disabledKeys`.\n   */\n  id?: Key\n  /**\n   * A string representation of the row's contents, used for typeahead.\n   */\n  textValue?: string\n}\n\n/**\n * A row within `DataGrid`. Unlike `Table`'s sub-parts, this renders directly — it's a thin\n * wrapper over react-aria-components' own `Row`.\n */\nexport const DataGridRow = <T extends object>({\n  children,\n  className,\n  columns,\n  id,\n  textValue\n}: DataGridRowProps<T>) => (\n  <AriaRow\n    className={classNames('datagrid-row', className)}\n    columns={columns}\n    id={id}\n    textValue={textValue}\n  >\n    {children}\n  </AriaRow>\n)\n","import React, { useRef } from 'react'\nimport { AriaCheckboxProps, useCheckbox } from 'react-aria'\nimport { useToggleState } from 'react-stately'\nimport { CheckboxContext, CheckboxProps, useSlottedContext } from 'react-aria-components'\n\nexport interface DataGridSelectionCellProps {\n  /**\n   * A string of all className you want applied to the checkbox, replacing the default\n   * `check-input`.\n   */\n  className?: string\n}\n\n/**\n * Reads the selection checkbox props react-aria-components' own `Row`/`TableHeader` publish on\n * `CheckboxContext`'s `selection` slot — the same ones its `<Checkbox slot=\"selection\">` would\n * consume, already carrying the localized label, the row-header `aria-labelledby`, and the\n * selected/disabled/indeterminate state.\n *\n * Reading them off that context (rather than calling react-aria's `useTableSelectionCheckbox`/\n * `useTableSelectAllCheckbox` against `TableStateContext` ourselves, as this file used to) is what\n * keeps this working when more than one copy of `react-aria` is installed. Those hooks resolve the\n * grid's id through a module-scoped `WeakMap` that only `useTable` populates, in whichever copy\n * ran it — always the copy bundled inside `react-aria-components` here, since its `Table` is what\n * calls `useTable`. `react-aria-components` pins `react-aria` to an exact version, so a consumer\n * whose own `react-aria` resolves anywhere else in our `^` range gets a second copy and the lookup\n * throws `Error: Unknown grid` on every selection cell. Letting react-aria-components compute the\n * props in its own copy sidesteps that entirely, and drops the duplicated `rowKey` this component\n * used to need — the context is already scoped to the row it's rendered in, so a `rowKey` that\n * disagreed with the surrounding `DataGridRow` can no longer silently toggle a different row.\n */\nconst useSelectionCheckboxProps = (component: string): AriaCheckboxProps => {\n  const props = useSlottedContext(CheckboxContext, 'selection') as CheckboxProps | null | undefined\n  if (!props) {\n    throw new Error(`${component} must be rendered inside a DataGrid with selection enabled.`)\n  }\n  return props as AriaCheckboxProps\n}\n\n/**\n * Selection checkbox for one `DataGrid` row — place inside a `DataGridCell`.\n *\n * react-aria-components' own `Checkbox` always visually hides its native `<input>` behind a custom\n * indicator the caller must supply. This renders a plain native `<input className=\"check-input\">`\n * instead, wired to the same state, so it picks up chassis-css's existing checkbox styling for\n * free with no new CSS of its own.\n */\nexport const DataGridSelectionCell = ({ className }: DataGridSelectionCellProps) => {\n  const checkboxProps = useSelectionCheckboxProps('DataGridSelectionCell')\n  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />\n}\n\n/**\n * \"Select all\" checkbox for `DataGrid`'s header row — place inside a `DataGridColumn`. See\n * `DataGridSelectionCell` for why this bypasses react-aria-components' own `Checkbox`.\n */\nexport const DataGridSelectAllCell = ({ className }: DataGridSelectionCellProps) => {\n  const checkboxProps = useSelectionCheckboxProps('DataGridSelectAllCell')\n  return <DataGridCheckboxInput checkboxProps={checkboxProps} className={className} />\n}\n\nconst DataGridCheckboxInput = ({\n  checkboxProps,\n  className\n}: {\n  checkboxProps: AriaCheckboxProps\n  className?: string\n}) => {\n  const toggleState = useToggleState(checkboxProps)\n  const ref = useRef<HTMLInputElement>(null)\n  const { inputProps } = useCheckbox(checkboxProps, toggleState, ref)\n\n  // `aria-describedby` after the spread: react-aria's own adds ids it never renders (FORMS.md,\n  // gotcha 6).\n  return (\n    <input\n      {...inputProps}\n      aria-describedby={undefined}\n      className={className ?? 'check-input'}\n      ref={ref}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/chunks/datepicker-DqztYJD6.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{u as e}from"./slot-BQVx1Eew.js";import{t}from"./useForkedRef-WoqMqsWE.js";import{t as n}from"./useFormField-DH2tlc3e.js";import{t as r}from"./useOpenStateProps-BhjSQ3f6.js";import{i,n as a}from"./overlayPlacement-Q6bcbXA5.js";import{t as o}from"./useRequiredValueInput-gYN8I-LY.js";import{t as s}from"./renderFormField-_6WswnEX.js";import{a as c,i as l,n as ee,o as u,r as te,t as d}from"./RangeCalendar-mM3OeTlU.js";import{t as ne}from"./validationClassName-gRGs4KBm.js";import{n as f,t as p}from"./DateField-4cdcwt0v.js";import m,{forwardRef as h,useMemo as re,useRef as g,useState as _}from"react";import v from"classnames";import{FocusScope as y,mergeProps as ie,useButton as b,useDateFormatter as x,useDatePicker as S,useDateRangePicker as ae,useDialog as oe,useOverlay as C,useOverlayPosition as w}from"react-aria";import{useDatePickerState as se,useDateRangePickerState as ce,useOverlayTriggerState as T}from"react-stately";import{toCalendarDate as E}from"@internationalized/date";const le=({overlayRef:e,state:t,triggerRef:n})=>{let{overlayProps:r}=C({isDismissable:!0,isOpen:t.isOpen,onClose:t.close,shouldCloseOnBlur:!0,shouldCloseOnInteractOutside:e=>!n.current?.contains(e)},e),{overlayProps:o,placement:s}=w({isOpen:t.isOpen,offset:2,onClose:null,overlayRef:e,placement:i(`bottom-start`),targetRef:n}),{style:c,...l}=ie(r,o);return{overlayStyle:{position:c?.position,top:c?.top,left:c?.left},placementAttr:a(`bottom-start`,s),overlayDismissProps:l}},ue=h(({buttonProps:e,state:n},r)=>{let i=g(null),a=t(i,r),{buttonProps:o}=b({...e,onPress:()=>n.toggle()},i);return/* @__PURE__ */ m.createElement(`button`,{...o,className:`input-adorn`,ref:a,type:`button`},/* @__PURE__ */ m.createElement(`svg`,{fill:`none`,height:`16`,viewBox:`0 0 16 16`,width:`16`,xmlns:`http://www.w3.org/2000/svg`},/* @__PURE__ */ m.createElement(`rect`,{height:`12`,rx:`1.5`,stroke:`currentColor`,strokeWidth:`1.25`,width:`13`,x:`1.5`,y:`3`}),/* @__PURE__ */ m.createElement(`path`,{d:`M1.5 6.5h13`,stroke:`currentColor`,strokeWidth:`1.25`}),/* @__PURE__ */ m.createElement(`path`,{d:`M4.5 1.5v3M11.5 1.5v3`,stroke:`currentColor`,strokeLinecap:`round`,strokeWidth:`1.25`})))});ue.displayName=`CalendarToggleButton`;const de=({isDisabled:e,onPress:t})=>{let n=g(null),r=u(),{buttonProps:i}=b({"aria-label":r.clear,isDisabled:e,onPress:t},n);return/* @__PURE__ */ m.createElement(`button`,{...i,className:`input-adorn`,ref:n,type:`button`},/* @__PURE__ */ m.createElement(`svg`,{fill:`none`,height:`16`,viewBox:`0 0 16 16`,width:`16`,xmlns:`http://www.w3.org/2000/svg`},/* @__PURE__ */ m.createElement(`path`,{d:`M4 4l8 8M12 4l-8 8`,stroke:`currentColor`,strokeLinecap:`round`,strokeWidth:`1.25`})))},fe=({calendar:e,className:t,clearButton:n,disabled:r,field:i,fieldClassName:a,groupProps:o,groupRef:s,invalid:c,isOpen:l,overlayDismissProps:ee,overlayRef:u,overlayStyle:te,placementAttr:d,size:f,toggleButton:p,valid:h})=>/* @__PURE__ */ m.createElement(m.Fragment,null,/* @__PURE__ */ m.createElement(`div`,{...o,className:v(`form-input`,f,{disabled:r},ne(c,h),t),ref:s},/* @__PURE__ */ m.createElement(`div`,{className:a},i),n,p),/* @__PURE__ */ m.createElement(`div`,{className:`datepicker`,"data-cx-placement":d,hidden:!l,ref:u,...ee,style:te},l&&/* @__PURE__ */ m.createElement(y,{contain:!0,restoreFocus:!0},e))),D=h((e,t)=>e.selectionMode===`multiple`?/* @__PURE__ */ m.createElement(pe,{...e,ref:t}):/* @__PURE__ */ m.createElement(O,{...e,ref:t}));D.displayName=`DatePicker`;const O=h(({className:i,defaultOpen:a,defaultValue:c,defaultVisible:u,disabled:d,firstDayOfWeek:ne,granularity:h,help:_,hideTimeZone:v,hourCycle:y,id:b,invalid:x,invalidFeedback:ae,isDateUnavailable:C,isOpen:w,label:ce,labels:T,maxValue:E,minValue:D,name:O,onChange:pe,onOpenChange:me,onVisibleChange:k,placeholderValue:he,required:A,selectionMode:j,shouldForceLeadingZeros:ge,size:_e,unavailableDates:M,valid:ve,validFeedback:N,value:ye,visible:be,visibleMonths:xe,...P},Se)=>{let F=re(()=>te(M,C),[M,C]),I=g(null),Ce=t(Se,I),L=g(null),R=g(null),z=g(null),B=g(null),{inputProps:V,missing:we,valid:H}=o(R,{focus:()=>f(I.current),invalid:x,required:A,valid:ve}),U={defaultValue:c,granularity:h,hideTimeZone:v,hourCycle:y,isDateUnavailable:F,isDisabled:d,isInvalid:x||we||void 0,isRequired:A,maxValue:E,minValue:D,onChange:pe,placeholderValue:he,shouldForceLeadingZeros:ge,value:ye},W=se({...r({defaultOpen:a,defaultVisible:u,isOpen:w,onOpenChange:me,onVisibleChange:k,visible:be},`DatePicker`),...U}),G=x||W.displayValidation.isInvalid,K=H&&!G,{describedBy:Te,feedbackId:q,helpId:J,inputId:Y,labelId:Ee,labelledBy:De}=n({ariaDescribedBy:P[`aria-describedby`],ariaLabelledBy:P[`aria-labelledby`],help:_,id:b,invalid:G,invalidFeedback:ae,label:ce,valid:K,validFeedback:N}),{buttonProps:Oe,calendarProps:X,descriptionProps:Z,dialogProps:ke,errorMessageProps:Q,fieldProps:Ae,groupProps:$}=S({...U,"aria-describedby":Te,"aria-label":P[`aria-label`],"aria-labelledby":De,id:Y},W,I),je=e($,Z,Q),{overlayStyle:Me,placementAttr:Ne,overlayDismissProps:Pe}=le({overlayRef:z,state:W,triggerRef:I}),{dialogProps:Fe}=oe(ke,L),Ie=T?.calendar?{...Oe,"aria-label":T.calendar}:Oe;return/* @__PURE__ */ m.createElement(l,{labels:T},s({children:/* @__PURE__ */ m.createElement(m.Fragment,null,fe({calendar:/* @__PURE__ */ m.createElement(ee,{...Fe,autoFocus:!0,defaultFocusedValue:X.defaultFocusedValue,disabled:d,firstDayOfWeek:ne,isDateUnavailable:F,maxValue:E,minValue:D,onChange:X.onChange,ref:L,value:X.value,visibleMonths:xe}),className:i,clearButton:W.value&&!d&&/* @__PURE__ */ m.createElement(de,{onPress:()=>{W.setValue(null),B.current?.focus()}}),disabled:d,field:/* @__PURE__ */ m.createElement(p,{fieldProps:e(Ae,Z,Q)}),fieldClassName:`w-100 overflow-x-scroll`,groupProps:{...ie(je,P),"aria-describedby":je[`aria-describedby`],"aria-labelledby":De},groupRef:Ce,invalid:G,isOpen:W.isOpen,overlayDismissProps:Pe,overlayRef:z,overlayStyle:Me,placementAttr:Ne,size:_e,toggleButton:/* @__PURE__ */ m.createElement(ue,{buttonProps:e(Ie,Z,Q),ref:B,state:W}),valid:K}),(O||A)&&/* @__PURE__ */ m.createElement(`input`,{disabled:d,name:O,type:`hidden`,value:W.value?W.value.toString():``,...V,ref:R})),help:_,ids:{feedback:q,help:J,label:Ee},invalid:G,invalidFeedback:ae,label:ce,valid:K,validFeedback:N}))});O.displayName=`DatePickerSingle`;const pe=h(({className:e,defaultOpen:i,defaultValue:a,defaultVisible:u,disabled:d,firstDayOfWeek:ne,help:f,id:p,invalid:h,invalidFeedback:v,isDateUnavailable:y,isOpen:b,label:x,labels:S,maxValue:ae,minValue:C,name:w,onChange:se,onOpenChange:ce,onVisibleChange:E,required:D,selectionMode:O,size:pe,unavailableDates:k,valid:he,validFeedback:A,value:j,visible:ge,visibleMonths:_e,...M},ve)=>{let N=re(()=>te(k,y),[k,y]),ye=j!==void 0,[be,xe]=_(a??[]),P=ye?j??[]:be,Se=e=>{ye||xe(e),se?.(e)},F=T(r({defaultOpen:i,defaultVisible:u,isOpen:b,onOpenChange:ce,onVisibleChange:E,visible:ge},`DatePicker`)),I=g(null),Ce=t(ve,I),L=g(null),R=g(null),z=g(null),B=g(null),{inputProps:V,missing:we,valid:H}=o(R,{focus:()=>B.current?.focus(),invalid:h,required:D&&P.length===0,valid:he}),U=h||we,{describedBy:W,feedbackId:G,helpId:K,inputId:Te,labelId:q,labelledBy:J}=n({ariaDescribedBy:M[`aria-describedby`],ariaLabelledBy:M[`aria-labelledby`],help:f,id:p,invalid:U,invalidFeedback:v,label:x,valid:H,validFeedback:A}),{overlayStyle:Y,placementAttr:Ee,overlayDismissProps:De}=le({overlayRef:z,state:F,triggerRef:I}),{dialogProps:Oe}=oe({"aria-label":M[`aria-label`],"aria-labelledby":J},L),X={...c,...S},Z={"aria-describedby":W,"aria-expanded":F.isOpen,"aria-haspopup":`dialog`,"aria-label":X.calendar,isDisabled:d};return/* @__PURE__ */ m.createElement(l,{labels:S},s({children:/* @__PURE__ */ m.createElement(m.Fragment,null,fe({calendar:/* @__PURE__ */ m.createElement(ee,{...Oe,autoFocus:!0,disabled:d,firstDayOfWeek:ne,isDateUnavailable:N,maxValue:ae,minValue:C,onChange:Se,ref:L,selectionMode:`multiple`,value:P,visibleMonths:_e}),className:e,clearButton:P.length>0&&!d&&/* @__PURE__ */ m.createElement(de,{onPress:()=>{Se([]),B.current?.focus()}}),disabled:d,field:/* @__PURE__ */ m.createElement(me,{values:P}),fieldClassName:`w-100 overflow-x-scroll`,groupProps:{...ie(M),"aria-describedby":W,"aria-disabled":d||void 0,"aria-labelledby":J,id:Te,role:`group`},groupRef:Ce,invalid:U,isOpen:F.isOpen,overlayDismissProps:De,overlayRef:z,overlayStyle:Y,placementAttr:Ee,size:pe,toggleButton:/* @__PURE__ */ m.createElement(ue,{buttonProps:Z,ref:B,state:F}),valid:H}),w&&P.map(e=>/* @__PURE__ */ m.createElement(`input`,{disabled:d,key:e.toString(),name:w,type:`hidden`,value:e.toString()})),V&&/* @__PURE__ */ m.createElement(`input`,{disabled:d,value:``,...V,ref:R})),help:f,ids:{feedback:G,help:K,label:q},invalid:U,invalidFeedback:v,label:x,valid:H,validFeedback:A}))});pe.displayName=`DatePickerMultiple`;const me=({values:e})=>{let t=x({dateStyle:`medium`,timeZone:`UTC`});return/* @__PURE__ */ m.createElement(`div`,{className:`datepicker-field`},e.length>0&&/* @__PURE__ */ m.createElement(m.Fragment,null,e.slice().sort((e,t)=>e.compare(t)).map(e=>t.format(E(e).toDate(`UTC`))).join(`, `)))},k=h(({className:i,defaultOpen:a,defaultValue:c,defaultVisible:ee,disabled:u,firstDayOfWeek:ne,granularity:h,help:_,hideTimeZone:v,hourCycle:y,id:b,invalid:x,invalidFeedback:S,isDateUnavailable:C,isOpen:w,label:se,labels:T,maxValue:E,minValue:D,name:O,onChange:pe,onOpenChange:me,onVisibleChange:k,placeholderValue:he,presets:A,required:j,shouldForceLeadingZeros:ge,size:_e,unavailableDates:M,valid:ve,validFeedback:N,value:ye,visible:be,visibleMonths:xe,...P},Se)=>{let F=re(()=>te(M,C),[M,C]),I=g(null),Ce=t(Se,I),L=g(null),R=g(null),z=g(null),B=g(null),V=g(null),we=g(null),H={invalid:x,required:j,valid:ve},U=o(V,{...H,focus:()=>f(I.current)}),W=o(z,{...H,focus:()=>f(R.current)}),G=U.missing||W.missing,K=U.valid&&W.valid,Te={defaultValue:c,granularity:h,hideTimeZone:v,hourCycle:y,isDateUnavailable:F,isDisabled:u,isInvalid:x||G||void 0,isRequired:j,maxValue:E,minValue:D,onChange:pe,placeholderValue:he,shouldForceLeadingZeros:ge,value:ye},q=ce({...r({defaultOpen:a,defaultVisible:ee,isOpen:w,onOpenChange:me,onVisibleChange:k,visible:be},`DateRangePicker`),...Te}),J=x||q.displayValidation.isInvalid,Y=K&&!J,{describedBy:Ee,feedbackId:De,helpId:Oe,inputId:X,labelId:Z,labelledBy:ke}=n({ariaDescribedBy:P[`aria-describedby`],ariaLabelledBy:P[`aria-labelledby`],help:_,id:b,invalid:J,invalidFeedback:S,label:se,valid:Y,validFeedback:N}),{buttonProps:Q,calendarProps:Ae,descriptionProps:$,dialogProps:je,endFieldProps:Me,errorMessageProps:Ne,groupProps:Pe,startFieldProps:Fe}=ae({...Te,"aria-describedby":Ee,"aria-label":P[`aria-label`],"aria-labelledby":ke,id:X},q,I),Ie=e(Pe,$,Ne),{overlayStyle:Le,placementAttr:Re,overlayDismissProps:ze}=le({overlayRef:B,state:q,triggerRef:I}),{dialogProps:Be}=oe(je,L),Ve=T?.calendar?{...Q,"aria-label":T.calendar}:Q;return/* @__PURE__ */ m.createElement(l,{labels:T},s({children:/* @__PURE__ */ m.createElement(m.Fragment,null,fe({calendar:/* @__PURE__ */ m.createElement(d,{...Be,autoFocus:!0,defaultFocusedValue:Ae.defaultFocusedValue,disabled:u,firstDayOfWeek:ne,isDateUnavailable:F,maxValue:E,minValue:D,onChange:Ae.onChange,presets:A,ref:L,value:Ae.value,visibleMonths:xe}),className:i,clearButton:(q.value?.start||q.value?.end)&&!u&&/* @__PURE__ */ m.createElement(de,{onPress:()=>{q.setValue(null),we.current?.focus()}}),disabled:u,field:/* @__PURE__ */ m.createElement(m.Fragment,null,/* @__PURE__ */ m.createElement(p,{fieldProps:e(Fe,$,Ne)}),/* @__PURE__ */ m.createElement(`span`,{"aria-hidden":`true`,className:`daterangepicker-separator`},`–`),/* @__PURE__ */ m.createElement(p,{fieldProps:e(Me,$,Ne),fieldRef:R})),fieldClassName:`d-flex w-100`,groupProps:{...ie(Ie,P),"aria-describedby":Ie[`aria-describedby`],"aria-labelledby":ke},groupRef:Ce,invalid:J,isOpen:q.isOpen,overlayDismissProps:ze,overlayRef:B,overlayStyle:Le,placementAttr:Re,size:_e,toggleButton:/* @__PURE__ */ m.createElement(ue,{buttonProps:e(Ve,$,Ne),ref:we,state:q}),valid:Y}),(O||j)&&/* @__PURE__ */ m.createElement(m.Fragment,null,/* @__PURE__ */ m.createElement(`input`,{disabled:u,name:O&&`${O}Start`,type:`hidden`,value:q.value?.start?q.value.start.toString():``,...U.inputProps,ref:V}),/* @__PURE__ */ m.createElement(`input`,{disabled:u,name:O&&`${O}End`,type:`hidden`,value:q.value?.end?q.value.end.toString():``,...W.inputProps,ref:z}))),help:_,ids:{feedback:De,help:Oe,label:Z},invalid:J,invalidFeedback:S,label:se,valid:Y,validFeedback:N}))});k.displayName=`DateRangePicker`;export{D as n,k as t};
+//# sourceMappingURL=datepicker-DqztYJD6.js.map

package/dist/chunks/datepicker-DqztYJD6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-DqztYJD6.js","names":["withoutSlotIds","useFormField","useOpenStateProps","resolveDataPlacement","useRequiredValueInput","renderFormField","DEFAULT_CALENDAR_LABELS","CalendarLabelsProvider","Calendar","useCalendarLabels","mergeIsDateUnavailable","RangeCalendar","validationClassName","focusFirstSegment","DateField","React","classNames","useOverlayPlacement","useOverlay","state","triggerRef","element","overlayRef","positionProps","resolvedPlacement","useOverlayPosition","toAriaPlacement","overlayPositionStyle","overlayDismissProps","mergeProps","overlayProps","CalendarToggleButton","forwardRef","internalRef","useRef","ref","useForkedRef","forwardedRef","toggleProps","useButton","buttonProps","ClearButton","labels","renderDatePickerShell","groupProps","size","invalid","valid","className","groupRef","fieldClassName","field","clearButton","toggleButton","placementAttr","isOpen","overlayStyle","FocusScope","calendar","DatePicker","props","DatePickerMultiple","DatePickerSingle","_selectionMode","validProp","rest","combinedIsDateUnavailable","useMemo","unavailableDates","isDateUnavailable","forkedGroupRef","calendarRef","inputRef","toggleButtonRef","requiredInputProps","pickerProps","disabled","missing","required","useDatePickerState","showInvalid","showValid","groupId","useDatePicker","describedBy","labelledBy","group","descriptionProps","errorMessageProps","domDialogProps","useDialog","dialogProps","triggerProps","calendarProps","fieldProps","name","feedbackId","helpId","labelId","isControlled","value","uncontrolledValues","setUncontrolledValues","useState","defaultValue","values","setValues","next","onChange","useOverlayTriggerState","mergedLabels","MultiDateField","date","formatter","useDateFormatter","a","b","toCalendarDate","DateRangePicker","endFieldRef","endInputRef","startInputRef","requiredOptions","start","end","useDateRangePickerState","useDateRangePicker","startFieldProps","endFieldProps"],"sources":["../../src/hooks/useOverlayPlacement.ts","../../src/components/datepicker/CalendarToggleButton.tsx","../../src/components/datepicker/ClearButton.tsx","../../src/components/datepicker/renderDatePickerShell.tsx","../../src/components/datepicker/DatePicker.tsx","../../src/components/datepicker/DateRangePicker.tsx"],"sourcesContent":["import { CSSProperties, HTMLAttributes, RefObject } from 'react'\nimport { mergeProps, useOverlay, useOverlayPosition } from 'react-aria'\nimport { OverlayTriggerState } from 'react-stately'\n\nimport { resolveDataPlacement, toAriaPlacement } from '../utils/overlayPlacement'\n\ninterface UseOverlayPlacementProps {\n  overlayRef: RefObject<HTMLElement | null>\n  state: OverlayTriggerState\n  triggerRef: RefObject<HTMLElement | null>\n}\n\ninterface UseOverlayPlacementResult {\n  overlayStyle: CSSProperties\n  placementAttr: string\n  // Re-typed as plain HTML attributes for the same `rollup-plugin-dts` portability reason as\n  // before (see git history) — react-aria's own return type pulls in a `FocusableElement`\n  // reference the bundled `.d.ts` can't always resolve a portable name for.\n  overlayDismissProps: HTMLAttributes<HTMLElement>\n}\n\n// Shared by `DatePicker` and `DateRangePicker` — both position their calendar overlay the same\n// way (`bottom-start`, 2px offset, closing on Escape, on any click outside it, or when focus leaves\n// the trigger group). Lives in `hooks/` rather than `components/datepicker/` like every other hook\n// in this library, regardless of how many components use it — see `useFormField` for the same\n// treatment despite having many more callers.\n//\n// Built directly on `useOverlay` + `useOverlayPosition` rather than the higher-level `usePopover`\n// combo hook. `usePopover` computes its own internal `onClose` for `useOverlayPosition` from\n// `isNonModal` (`isNonModal && !isSubmenu ? state.close : null`, neither overridable by a caller),\n// and `isNonModal: true` — needed so the calendar doesn't lock page scroll or aria-hide the rest of\n// the page, since it was never meant to be modal — unconditionally arms `useOverlayPosition`'s\n// close-on-any-window-scroll listener (`useCloseOnScroll`, keyed off `onClose !== null`) as a side\n// effect. That's wrong here: the calendar should reposition with its trigger when the page scrolls,\n// not disappear. Calling the two lower-level hooks directly, with `onClose: null` passed to\n// `useOverlayPosition` alone, gets the positioning and Escape/blur dismissal this calendar needs\n// without arming that listener — the same fix already applied to `Autocomplete`/`Combobox`/\n// `Menu`/`MenuSubmenu`/`Popover`, none of which use `usePopover` either, all for this same reason.\nexport const useOverlayPlacement = ({\n  overlayRef,\n  state,\n  triggerRef\n}: UseOverlayPlacementProps): UseOverlayPlacementResult => {\n  // The trigger's own toggle button lives inside `triggerRef`, not `overlayRef` — without this,\n  // focus moving there when the button is pressed would count as an \"outside\" interaction and\n  // close the overlay, which the button's own `onPress` then immediately reopens on click.\n  const shouldCloseOnInteractOutside = (element: Element) => !triggerRef.current?.contains(element)\n\n  // Escape key + outside-interaction dismissal — the two pieces of `usePopover`'s bundled behavior\n  // this calendar still needs. `isDismissable: true` — *not* `usePopover`'s own default of `false`\n  // whenever `isNonModal` is true — is required to actually get outside-*click* dismissal:\n  // `useOverlay`'s `shouldCloseOnBlur` only closes on a focus-based blur, and explicitly bails when\n  // the click target isn't focusable (`relatedTarget` is `null`, i.e. focus lands on `document.body`,\n  // as it does for an ordinary click on plain page content) — its own source comments that this case\n  // is intentionally left to the separate pointerdown-outside listener `useOverlay` only wires up\n  // when `isDismissable` is true. Leaving it at the `usePopover`-matching default therefore silently\n  // drops the single most common way users try to dismiss a popover.\n  const { overlayProps } = useOverlay(\n    {\n      isDismissable: true,\n      isOpen: state.isOpen,\n      onClose: state.close,\n      shouldCloseOnBlur: true,\n      shouldCloseOnInteractOutside\n    },\n    overlayRef\n  )\n\n  const { overlayProps: positionProps, placement: resolvedPlacement } = useOverlayPosition({\n    isOpen: state.isOpen,\n    offset: 2,\n    // Opts out of `useOverlayPosition`'s own close-on-any-window-scroll listener — see this hook's\n    // own comment above. Leaving this `undefined` would NOT disable it: `useCloseOnScroll` only\n    // early-returns on `onClose === null`, not merely falsy.\n    onClose: null,\n    overlayRef,\n    placement: toAriaPlacement('bottom-start'),\n    targetRef: triggerRef\n  })\n\n  const { style: overlayPositionStyle, ...overlayDismissProps } = mergeProps(\n    overlayProps,\n    positionProps\n  )\n  const overlayStyle: CSSProperties = {\n    position: overlayPositionStyle?.position as CSSProperties['position'],\n    top: overlayPositionStyle?.top,\n    left: overlayPositionStyle?.left\n  }\n  const placementAttr = resolveDataPlacement('bottom-start', resolvedPlacement)\n\n  return { overlayStyle, placementAttr, overlayDismissProps }\n}\n","import React, { forwardRef, useRef } from 'react'\nimport { AriaButtonProps, useButton } from 'react-aria'\nimport { OverlayTriggerState } from 'react-stately'\n\nimport { useForkedRef } from '../../hooks'\n\ninterface CalendarToggleButtonProps {\n  buttonProps: AriaButtonProps\n  state: OverlayTriggerState\n}\n\n// Shared by `DatePicker` and `DateRangePicker` — both trigger their calendar overlay with an\n// identical calendar-icon button. `buttonProps.onPress` (from that caller's own `useDatePicker`/\n// `useDateRangePicker`) only ever opens the overlay (matches upstream react-aria), so re-clicking\n// the button while it's already open would otherwise do nothing — overridden here to actually\n// toggle. Forwards its ref so callers can move focus onto it explicitly — e.g. `ClearButton` sits\n// immediately before it and unmounts itself on press, so focus needs somewhere to land.\nexport const CalendarToggleButton = forwardRef<HTMLButtonElement, CalendarToggleButtonProps>(\n  ({ buttonProps, state }, forwardedRef) => {\n    const internalRef = useRef<HTMLButtonElement>(null)\n    const ref = useForkedRef(internalRef, forwardedRef)\n    const { buttonProps: toggleProps } = useButton(\n      { ...buttonProps, onPress: () => state.toggle() },\n      internalRef\n    )\n\n    return (\n      <button {...toggleProps} className=\"input-adorn\" ref={ref} type=\"button\">\n        <svg\n          fill=\"none\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          width=\"16\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect\n            height=\"12\"\n            rx=\"1.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.25\"\n            width=\"13\"\n            x=\"1.5\"\n            y=\"3\"\n          />\n          <path d=\"M1.5 6.5h13\" stroke=\"currentColor\" strokeWidth=\"1.25\" />\n          <path\n            d=\"M4.5 1.5v3M11.5 1.5v3\"\n            stroke=\"currentColor\"\n            strokeLinecap=\"round\"\n            strokeWidth=\"1.25\"\n          />\n        </svg>\n      </button>\n    )\n  }\n)\n\nCalendarToggleButton.displayName = 'CalendarToggleButton'\n","import React, { useRef } from 'react'\nimport { useButton } from 'react-aria'\n\nimport { useCalendarLabels } from '../calendar/labels'\n\ninterface ClearButtonProps {\n  isDisabled?: boolean\n  onPress: () => void\n}\n\n// Shared by `DatePicker` and `DateRangePicker` — a trailing \"×\" adornment that resets the\n// current selection to empty. Rendered only while there's something to clear (see each caller's\n// own conditional). `useButton` for the same reason `CalendarToggleButton` uses it: proper\n// press/keyboard semantics consistent with the rest of this library, rather than a raw `onClick`.\nexport const ClearButton = ({ isDisabled, onPress }: ClearButtonProps) => {\n  const ref = useRef<HTMLButtonElement>(null)\n  const labels = useCalendarLabels()\n  const { buttonProps } = useButton({ 'aria-label': labels.clear, isDisabled, onPress }, ref)\n\n  return (\n    <button {...buttonProps} className=\"input-adorn\" ref={ref} type=\"button\">\n      <svg\n        fill=\"none\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        width=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M4 4l8 8M12 4l-8 8\"\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeWidth=\"1.25\"\n        />\n      </svg>\n    </button>\n  )\n}\n","import React, { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react'\nimport classNames from 'classnames'\nimport { FocusScope } from 'react-aria'\n\nimport { validationClassName } from '../../utils/validationClassName'\n\nexport interface RenderDatePickerShellOptions {\n  /**\n   * The fully-built calendar element (`Calendar`/`RangeCalendar`, with its own dialog role/ref\n   * already applied) — only ever mounted while `isOpen`, inside a `FocusScope`.\n   */\n  calendar: ReactNode\n  className?: string\n  /**\n   * The `ClearButton` element, or `null`/`undefined` when there's nothing to clear.\n   */\n  clearButton?: ReactNode\n  disabled?: boolean\n  /**\n   * The field itself — a single segmented `DateField`, a read-only `MultiDateField`, or a pair\n   * of `DateField`s either side of a separator.\n   */\n  field: ReactNode\n  /**\n   * className for the wrapper directly around `field` — differs slightly by variant\n   * (`DateRangePicker`'s two side-by-side fields need `d-flex`, the single-field variants don't).\n   */\n  fieldClassName: string\n  /**\n   * Already-merged props (react-aria's `groupProps`/`mergeProps(rest)`, plus\n   * `aria-describedby`/`aria-labelledby` and any variant-specific ARIA attributes) for the\n   * `.form-input` wrapper — assembling this is the caller's job since react-aria only returns a\n   * `groupProps` shape for the single-select hooks, not the manually-assembled multi-select case.\n   */\n  groupProps: HTMLAttributes<HTMLDivElement>\n  groupRef: Ref<HTMLDivElement>\n  invalid?: boolean\n  isOpen: boolean\n  overlayDismissProps: HTMLAttributes<HTMLElement>\n  overlayRef: Ref<HTMLDivElement>\n  overlayStyle?: CSSProperties\n  placementAttr?: string\n  size?: 'sm' | 'lg'\n  toggleButton: ReactNode\n  valid?: boolean\n}\n\n// Shared `.form-input` adorn-wrapper + popover-overlay shell for `DatePicker`'s two internal\n// variants (single/multiple selection) and `DateRangePicker` — otherwise duplicated near-verbatim\n// three times. What's left in each caller is only the genuinely variant-specific pieces: which\n// field(s) render inside the wrapper, which calendar (`Calendar`/`RangeCalendar`, single- vs.\n// range-typed props) renders inside the overlay, and how each variant's own `groupProps`/hidden\n// inputs get built.\nexport const renderDatePickerShell = ({\n  calendar,\n  className,\n  clearButton,\n  disabled,\n  field,\n  fieldClassName,\n  groupProps,\n  groupRef,\n  invalid,\n  isOpen,\n  overlayDismissProps,\n  overlayRef,\n  overlayStyle,\n  placementAttr,\n  size,\n  toggleButton,\n  valid\n}: RenderDatePickerShellOptions): ReactNode => (\n  <>\n    <div\n      {...groupProps}\n      className={classNames(\n        'form-input',\n        size,\n        { disabled },\n        validationClassName(invalid, valid),\n        className\n      )}\n      ref={groupRef}\n    >\n      <div className={fieldClassName}>{field}</div>\n      {clearButton}\n      {toggleButton}\n    </div>\n    <div\n      className=\"datepicker\"\n      data-cx-placement={placementAttr}\n      hidden={!isOpen}\n      ref={overlayRef}\n      {...overlayDismissProps}\n      style={overlayStyle}\n    >\n      {isOpen && (\n        <FocusScope contain restoreFocus>\n          {calendar}\n        </FocusScope>\n      )}\n    </div>\n  </>\n)\n","import React, { forwardRef, HTMLAttributes, ReactNode, useMemo, useRef, useState } from 'react'\nimport { AriaButtonProps, mergeProps, useDateFormatter, useDatePicker, useDialog } from 'react-aria'\nimport {\n  DateValue,\n  OverlayTriggerState,\n  useDatePickerState,\n  useOverlayTriggerState\n} from 'react-stately'\nimport { toCalendarDate } from '@internationalized/date'\n\nimport {\n  useForkedRef,\n  useFormField,\n  useOpenStateProps,\n  useOverlayPlacement,\n  useRequiredValueInput\n} from '../../hooks'\nimport { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'\nimport { withoutSlotIds } from '../../utils/idRefs'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { Calendar } from '../calendar/Calendar'\nimport { CalendarToggleButton } from './CalendarToggleButton'\nimport { ClearButton } from './ClearButton'\nimport { DateField, focusFirstSegment } from './DateField'\nimport { renderDatePickerShell } from './renderDatePickerShell'\nimport './DatePicker.scss'\nimport { CalendarLabels, CalendarLabelsProvider, DEFAULT_CALENDAR_LABELS } from '../calendar/labels'\n\ninterface DatePickerBaseProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the date picker, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the date picker.\n   */\n  'aria-labelledby'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Whether the calendar popover is open by default (uncontrolled).\n   *\n   * @deprecated Use `defaultVisible`.\n   */\n  defaultOpen?: boolean\n  /**\n   * Whether the calendar popover is open when the date picker first renders. Use it instead of\n   * `visible` when nothing outside needs to control the popover.\n   *\n   * @default false\n   */\n  defaultVisible?: boolean\n  /**\n   * Prevents the date picker from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * The day that starts the week in the calendar overlay, overriding the default set by the\n   * active locale.\n   *\n   * @default 'mon'\n   */\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  /**\n   * A description for the field, rendered below the date picker.\n   */\n  help?: ReactNode\n  /**\n   * `id` forwarded to the field's grouping element — useful for pairing with a `<label for>`.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the date picker when `invalid` is set, and\n   * after a submit that an empty `required` date picker held back.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * Callback that is called for each date in the calendar. If it returns `true`, that date is\n   * shown but cannot be selected.\n   */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /**\n   * Overrides for the strings this component and its calendar render themselves rather than\n   * getting from the active locale — the calendar trigger, the clear adornment, and the calendar's\n   * own year-view arrows/announcements. Date segment order, month and weekday names all follow\n   * `I18nProvider`'s locale via react-aria and need no override. Merged over the English defaults,\n   * so passing one key leaves the rest alone.\n   */\n  labels?: Partial<CalendarLabels>\n  /**\n   * Whether the calendar popover is open (controlled).\n   *\n   * @deprecated Use `visible`.\n   */\n  isOpen?: boolean\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the field group.\n   */\n  label?: ReactNode\n  /**\n   * The maximum allowed date that a user may select.\n   */\n  maxValue?: DateValue | null\n  /**\n   * The minimum allowed date that a user may select.\n   */\n  minValue?: DateValue | null\n  /**\n   * `name` of an auto-created hidden input, kept in sync with the selection, for native form\n   * submission — one input when `selectionMode` is `'single'`, one per selected date when it's\n   * `'multiple'` (same `name` on each, which browsers serialize as multiple form values). Omit to\n   * skip creating any. The value is the date's `toString()`: `2026-03-15`, with a time\n   * `2026-03-15T09:30:00`, and with a time zone `2026-03-15T09:30:00+09:00[Asia/Tokyo]`, which\n   * `parseZonedDateTime` reads back.\n   */\n  name?: string\n  /**\n   * Callback fired when the calendar popover's open state changes.\n   *\n   * @deprecated Use `onVisibleChange`.\n   */\n  onOpenChange?: (isOpen: boolean) => void\n  /**\n   * Callback fired when the calendar popover asks to open or close: the calendar button, a\n   * completed selection, the Escape key or a click outside. Receives the state it asks for.\n   * With `visible` set, the popover changes only when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Toggle the required state for the component. An empty required date picker holds its form\n   * back from submitting, takes focus and shows as invalid, with `invalidFeedback`, until it has\n   * a value or the form is reset. `invalid`, once set, and `valid` decide how it looks instead.\n   * With `selectionMode=\"multiple\"` it asks for one date at least, and the calendar button takes\n   * the focus.\n   */\n  required?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to\n   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed\n   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.\n   * Applies to both the calendar overlay and typing a date directly into the field.\n   */\n  unavailableDates?: string[]\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the date picker when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * Whether the calendar popover is open. Setting it makes the popover controlled: it opens and\n   * closes only when this changes, so pair it with `onVisibleChange`.\n   */\n  visible?: boolean\n  /**\n   * Number of months to display side by side in the calendar overlay.\n   *\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\nexport interface DatePickerSingleProps extends DatePickerBaseProps {\n  /**\n   * The initial selected date (uncontrolled).\n   */\n  defaultValue?: DateValue | null\n  /**\n   * The smallest unit the field shows and edits. `'hour'`, `'minute'` and `'second'` add a time\n   * to the date: the value is then a `CalendarDateTime`, or a `ZonedDateTime` when `value`,\n   * `defaultValue` or `placeholderValue` is one, and a value or placeholder given must carry a\n   * time. Picking a day in the calendar keeps the time. A day picked in an empty field takes the\n   * time, and zone, of `defaultValue`, else `placeholderValue`, else midnight with no zone: a\n   * controlled zoned `value`, once cleared, needs a zoned `placeholderValue` to stay zoned.\n   *\n   * @default 'day', or 'minute' for a value with a time\n   */\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  /**\n   * Hide the time zone of a `ZonedDateTime` value.\n   */\n  hideTimeZone?: boolean\n  /**\n   * Show 12 or 24 hours. Defaults to the locale's.\n   */\n  hourCycle?: 12 | 24\n  /**\n   * The date the segments start from while the field is empty, such as\n   * `new CalendarDateTime(2026, 1, 1, 9)`, and the month the calendar opens on. With no\n   * `defaultValue`, its time is the one a day picked in the calendar gets, and its type the type\n   * of value `onChange` receives: a `ZonedDateTime` gives zoned values. With a time\n   * `granularity` it must carry a time.\n   */\n  placeholderValue?: DateValue\n  /**\n   * Show a leading zero on the day, month and hour, as `03/05` rather than `3/5`, whatever the\n   * locale does.\n   */\n  shouldForceLeadingZeros?: boolean\n  /**\n   * Callback fired when the selected date changes. With a time (`granularity`), it receives a\n   * `CalendarDateTime` or `ZonedDateTime`.\n   */\n  onChange?: (value: DateValue | null) => void\n  /**\n   * Whether a single date or multiple, independently toggled dates can be selected. Multiple\n   * selection replaces the editable segmented field with a read-only, comma-separated list of\n   * the selected dates — a segmented day/month/year field has no way to represent more than one\n   * date.\n   *\n   * @default 'single'\n   */\n  selectionMode?: 'single'\n  /**\n   * The selected date (controlled).\n   */\n  value?: DateValue | null\n}\n\nexport interface DatePickerMultipleProps extends DatePickerBaseProps {\n  /**\n   * The initial selected dates (uncontrolled).\n   */\n  defaultValue?: DateValue[] | null\n  /**\n   * Callback fired when the set of selected dates changes.\n   */\n  onChange?: (value: DateValue[]) => void\n  /**\n   * Whether a single date or multiple, independently toggled dates can be selected. Multiple\n   * selection replaces the editable segmented field with a read-only, comma-separated list of\n   * the selected dates — a segmented day/month/year field has no way to represent more than one\n   * date.\n   *\n   * @default 'single'\n   */\n  selectionMode: 'multiple'\n  /**\n   * The selected dates (controlled).\n   */\n  value?: DateValue[] | null\n}\n\nexport type DatePickerProps = DatePickerSingleProps | DatePickerMultipleProps\n\n// Dispatches on `selectionMode` between two internal implementations that share little beyond\n// the field/overlay shell and `useFormField` — `selectionMode: 'multiple'` has no\n// `useDatePickerState`/`useDatePicker` equivalent to build on (see `DatePickerMultiple`'s own\n// comment), so bolting an array value onto the single-value hook pair isn't an option.\nexport const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((props, ref) => {\n  if (props.selectionMode === 'multiple') return <DatePickerMultiple {...props} ref={ref} />\n  return <DatePickerSingle {...props} ref={ref} />\n})\n\nDatePicker.displayName = 'DatePicker'\n\nconst DatePickerSingle = forwardRef<HTMLDivElement, DatePickerSingleProps>(\n  (\n    {\n      className,\n      defaultOpen,\n      defaultValue,\n      defaultVisible,\n      disabled,\n      firstDayOfWeek,\n      granularity,\n      help,\n      hideTimeZone,\n      hourCycle,\n      id,\n      invalid,\n      invalidFeedback,\n      isDateUnavailable,\n      isOpen,\n      label,\n      labels,\n      maxValue,\n      minValue,\n      name,\n      onChange,\n      onOpenChange,\n      onVisibleChange,\n      placeholderValue,\n      required,\n      selectionMode: _selectionMode,\n      shouldForceLeadingZeros,\n      size,\n      unavailableDates,\n      valid: validProp,\n      validFeedback,\n      value,\n      visible,\n      visibleMonths,\n      ...rest\n    }: DatePickerSingleProps,\n    ref\n  ) => {\n    const combinedIsDateUnavailable = useMemo(\n      () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n      [unavailableDates, isDateUnavailable]\n    )\n\n    const groupRef = useRef<HTMLDivElement>(null)\n    const forkedGroupRef = useForkedRef(ref, groupRef)\n    const calendarRef = useRef<HTMLDivElement>(null)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const overlayRef = useRef<HTMLDivElement>(null)\n    const toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n    // `required` has to reach an input a form validates (FORMS.md, gotcha 9). react-aria writes\n    // `aria-required` on the segments, which aren't form controls, and the input that carries the\n    // value is `type=\"hidden\"`, which a form doesn't validate. As in `TimeField`, a required\n    // picker's input is a text input that isn't displayed, and `missing` shows the picker as\n    // invalid from a submit that input held back until it has a value. The first segment takes\n    // the focus a browser would give an input it displays. A disabled input isn't validated; the\n    // picker has no read-only state to leave out.\n    const {\n      inputProps: requiredInputProps,\n      missing,\n      valid\n    } = useRequiredValueInput(inputRef, {\n      focus: () => focusFirstSegment(groupRef.current),\n      invalid,\n      required,\n      valid: validProp\n    })\n\n    // What both react-stately's state and react-aria's hook read: the hook hands the time props\n    // on to the field's segments.\n    const pickerProps = {\n      defaultValue,\n      granularity,\n      hideTimeZone,\n      hourCycle,\n      isDateUnavailable: combinedIsDateUnavailable,\n      isDisabled: disabled,\n      // `false` would override the state's own check of the range and unavailable dates:\n      // react-stately takes a defined `isInvalid` as the whole validation state.\n      isInvalid: invalid || missing || undefined,\n      isRequired: required,\n      maxValue,\n      minValue,\n      onChange,\n      placeholderValue,\n      shouldForceLeadingZeros,\n      value\n    }\n\n    const state = useDatePickerState({\n      ...useOpenStateProps(\n        { defaultOpen, defaultVisible, isOpen, onOpenChange, onVisibleChange, visible },\n        'DatePicker'\n      ),\n      ...pickerProps\n    })\n    // A value outside `minValue`/`maxValue`, or on an unavailable date, is invalid too, shown as\n    // `invalid` is, as `TimeField` shows it. So is a `missing` one, which the state was given.\n    const showInvalid = invalid || state.displayValidation.isInvalid\n    const showValid = valid && !showInvalid\n\n    const {\n      describedBy,\n      feedbackId,\n      helpId,\n      inputId: groupId,\n      labelId,\n      labelledBy\n    } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n\n    const {\n      buttonProps,\n      calendarProps,\n      descriptionProps,\n      dialogProps,\n      errorMessageProps,\n      fieldProps,\n      groupProps\n    } = useDatePicker(\n      {\n        ...pickerProps,\n        // Given to the hook, so the help and feedback describe the segments, which take focus,\n        // and the calendar button, not only the group around them.\n        'aria-describedby': describedBy,\n        'aria-label': rest['aria-label'],\n        'aria-labelledby': labelledBy,\n        id: groupId\n      },\n      state,\n      groupRef\n    )\n    // react-aria's `aria-describedby` holds its description of the selected date, added once\n    // mounted, and the help and feedback given to it; the slot ids come out (FORMS.md, gotcha 6).\n    // It's set again after the spread, where the caller's own value would replace it (gotcha 4).\n    const group = withoutSlotIds(groupProps, descriptionProps, errorMessageProps)\n\n    const { overlayStyle, placementAttr, overlayDismissProps } = useOverlayPlacement({\n      overlayRef,\n      state,\n      triggerRef: groupRef\n    })\n\n    // `Calendar` is dialog-agnostic by design (see its own comment) — applying `role=\"dialog\"`\n    // etc. is this component's concern, layered on via the generic HTML-attribute passthrough\n    // `Calendar` merges onto its root.\n    const { dialogProps: domDialogProps } = useDialog(dialogProps, calendarRef)\n\n    // react-aria names the trigger in the active locale; `labels.calendar` replaces that name.\n    const triggerProps = labels?.calendar\n      ? { ...buttonProps, 'aria-label': labels.calendar }\n      : buttonProps\n\n    return (\n      <CalendarLabelsProvider labels={labels}>\n        {renderFormField({\n          children: (\n            <>\n              {renderDatePickerShell({\n                calendar: (\n                  <Calendar\n                    {...domDialogProps}\n                    autoFocus\n                    defaultFocusedValue={calendarProps.defaultFocusedValue}\n                    disabled={disabled}\n                    firstDayOfWeek={firstDayOfWeek}\n                    isDateUnavailable={combinedIsDateUnavailable}\n                    maxValue={maxValue}\n                    minValue={minValue}\n                    onChange={calendarProps.onChange}\n                    ref={calendarRef}\n                    value={calendarProps.value}\n                    visibleMonths={visibleMonths}\n                  />\n                ),\n                className,\n                clearButton: state.value && !disabled && (\n                  <ClearButton\n                    onPress={() => {\n                      state.setValue(null)\n                      // `ClearButton` unmounts itself once `state.value` clears — without this, focus\n                      // would otherwise drop to `document.body` (same failure mode fixed for the\n                      // calendar's own month/year view switch — see `CalendarMonthYearPicker`'s comment).\n                      toggleButtonRef.current?.focus()\n                    }}\n                  />\n                ),\n                disabled,\n                field: (\n                  <DateField\n                    fieldProps={withoutSlotIds(fieldProps, descriptionProps, errorMessageProps)}\n                  />\n                ),\n                fieldClassName: 'w-100 overflow-x-scroll',\n                groupProps: {\n                  ...mergeProps(group, rest),\n                  'aria-describedby': group['aria-describedby'],\n                  'aria-labelledby': labelledBy\n                },\n                groupRef: forkedGroupRef,\n                invalid: showInvalid,\n                isOpen: state.isOpen,\n                overlayDismissProps,\n                overlayRef,\n                overlayStyle,\n                placementAttr,\n                size,\n                toggleButton: (\n                  <CalendarToggleButton\n                    buttonProps={withoutSlotIds(triggerProps, descriptionProps, errorMessageProps)}\n                    ref={toggleButtonRef}\n                    state={state}\n                  />\n                ),\n                valid: showValid\n              })}\n              {(name || required) && (\n                <input\n                  disabled={disabled}\n                  name={name}\n                  type=\"hidden\"\n                  value={state.value ? state.value.toString() : ''}\n                  {...requiredInputProps}\n                  ref={inputRef}\n                />\n              )}\n            </>\n          ),\n          help,\n          ids: { feedback: feedbackId, help: helpId, label: labelId },\n          invalid: showInvalid,\n          invalidFeedback,\n          label,\n          valid: showValid,\n          validFeedback\n        })}\n      </CalendarLabelsProvider>\n    )\n  }\n)\n\nDatePickerSingle.displayName = 'DatePickerSingle'\n\n// `selectionMode: 'multiple'` counterpart to `DatePickerSingle` — deliberately not built on\n// `useDatePickerState`/`useDatePicker`, since neither has any multi-value concept (a single\n// `DateValue`, edited through one segmented day/month/year field that has no way to represent\n// more than one date — see react-stately's own `useDatePickerState` types). Instead this is\n// assembled from the same lower-level pieces already used elsewhere in this codebase:\n// `useOverlayTriggerState` for open/close (the same `OverlayTriggerState` shape\n// `useOverlayPlacement`/`CalendarToggleButton` already expect, so both are reused unchanged), the\n// manual controlled/uncontrolled pattern `ChipInput` already uses for its own array value, and\n// a read-only comma-separated field in place of `DateField`'s editable segments.\nconst DatePickerMultiple = forwardRef<HTMLDivElement, DatePickerMultipleProps>(\n  (\n    {\n      className,\n      defaultOpen,\n      defaultValue,\n      defaultVisible,\n      disabled,\n      firstDayOfWeek,\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      isDateUnavailable,\n      isOpen,\n      label,\n      labels,\n      maxValue,\n      minValue,\n      name,\n      onChange,\n      onOpenChange,\n      onVisibleChange,\n      required,\n      selectionMode: _selectionMode,\n      size,\n      unavailableDates,\n      valid: validProp,\n      validFeedback,\n      value,\n      visible,\n      visibleMonths,\n      ...rest\n    }: DatePickerMultipleProps,\n    ref\n  ) => {\n    const combinedIsDateUnavailable = useMemo(\n      () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n      [unavailableDates, isDateUnavailable]\n    )\n\n    const isControlled = value !== undefined\n    const [uncontrolledValues, setUncontrolledValues] = useState<DateValue[]>(defaultValue ?? [])\n    const values = isControlled ? (value ?? []) : uncontrolledValues\n\n    const setValues = (next: DateValue[]) => {\n      if (!isControlled) setUncontrolledValues(next)\n      onChange?.(next)\n    }\n\n    const state: OverlayTriggerState = useOverlayTriggerState(\n      useOpenStateProps(\n        { defaultOpen, defaultVisible, isOpen, onOpenChange, onVisibleChange, visible },\n        'DatePicker'\n      )\n    )\n\n    const groupRef = useRef<HTMLDivElement>(null)\n    const forkedGroupRef = useForkedRef(ref, groupRef)\n    const calendarRef = useRef<HTMLDivElement>(null)\n    const inputRef = useRef<HTMLInputElement>(null)\n    const overlayRef = useRef<HTMLDivElement>(null)\n    const toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n    // Required asks for one date at least. Each date has a hidden input of its own, so there is\n    // none while the picker is empty: it then renders the text input that isn't displayed, with\n    // no `name`, as nothing is submitted for an empty picker. See `DatePickerSingle`. The calendar\n    // button takes the focus, this variant's one element that can. Nothing here says \"required\"\n    // to a screen reader: ARIA allows `aria-required` on neither a button nor a group, so a\n    // caller's label or help has to.\n    const {\n      inputProps: requiredInputProps,\n      missing,\n      valid\n    } = useRequiredValueInput(inputRef, {\n      focus: () => toggleButtonRef.current?.focus(),\n      invalid,\n      required: required && values.length === 0,\n      valid: validProp\n    })\n    const showInvalid = invalid || missing\n\n    const {\n      describedBy,\n      feedbackId,\n      helpId,\n      inputId: groupId,\n      labelId,\n      labelledBy\n    } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n\n    const { overlayStyle, placementAttr, overlayDismissProps } = useOverlayPlacement({\n      overlayRef,\n      state,\n      triggerRef: groupRef\n    })\n\n    const { dialogProps: domDialogProps } = useDialog(\n      { 'aria-label': rest['aria-label'], 'aria-labelledby': labelledBy },\n      calendarRef\n    )\n\n    // This variant builds its own trigger button props rather than getting them from\n    // `useDatePicker` (see the component comment), so it has to resolve the label itself — it's\n    // the provider here, so it can't read the context it's about to publish.\n    const mergedLabels = { ...DEFAULT_CALENDAR_LABELS, ...labels }\n\n    // Described by the help and feedback as the group is: the button is this variant's one\n    // element that takes focus.\n    const buttonProps: AriaButtonProps = {\n      'aria-describedby': describedBy,\n      'aria-expanded': state.isOpen,\n      'aria-haspopup': 'dialog',\n      'aria-label': mergedLabels.calendar,\n      isDisabled: disabled\n    }\n\n    return (\n      <CalendarLabelsProvider labels={labels}>\n        {renderFormField({\n          children: (\n            <>\n              {renderDatePickerShell({\n                calendar: (\n                  <Calendar\n                    {...domDialogProps}\n                    autoFocus\n                    disabled={disabled}\n                    firstDayOfWeek={firstDayOfWeek}\n                    isDateUnavailable={combinedIsDateUnavailable}\n                    maxValue={maxValue}\n                    minValue={minValue}\n                    onChange={setValues}\n                    ref={calendarRef}\n                    selectionMode=\"multiple\"\n                    value={values}\n                    visibleMonths={visibleMonths}\n                  />\n                ),\n                className,\n                clearButton: values.length > 0 && !disabled && (\n                  <ClearButton\n                    onPress={() => {\n                      setValues([])\n                      // See the single-selection `ClearButton` usage above for why this is needed.\n                      toggleButtonRef.current?.focus()\n                    }}\n                  />\n                ),\n                disabled,\n                field: <MultiDateField values={values} />,\n                fieldClassName: 'w-100 overflow-x-scroll',\n                groupProps: {\n                  ...mergeProps(rest),\n                  'aria-describedby': describedBy,\n                  'aria-disabled': disabled || undefined,\n                  'aria-labelledby': labelledBy,\n                  id: groupId,\n                  role: 'group'\n                },\n                groupRef: forkedGroupRef,\n                invalid: showInvalid,\n                isOpen: state.isOpen,\n                overlayDismissProps,\n                overlayRef,\n                overlayStyle,\n                placementAttr,\n                size,\n                toggleButton: (\n                  <CalendarToggleButton\n                    buttonProps={buttonProps}\n                    ref={toggleButtonRef}\n                    state={state}\n                  />\n                ),\n                valid\n              })}\n              {name &&\n                values.map((date) => (\n                  <input\n                    disabled={disabled}\n                    key={date.toString()}\n                    name={name}\n                    type=\"hidden\"\n                    value={date.toString()}\n                  />\n                ))}\n              {requiredInputProps && (\n                <input disabled={disabled} value=\"\" {...requiredInputProps} ref={inputRef} />\n              )}\n            </>\n          ),\n          help,\n          ids: { feedback: feedbackId, help: helpId, label: labelId },\n          invalid: showInvalid,\n          invalidFeedback,\n          label,\n          valid,\n          validFeedback\n        })}\n      </CalendarLabelsProvider>\n    )\n  }\n)\n\nDatePickerMultiple.displayName = 'DatePickerMultiple'\n\ninterface MultiDateFieldProps {\n  values: DateValue[]\n}\n\n// Read-only stand-in for `DateField`'s editable segments — a segmented day/month/year field can\n// only ever represent one date, so multiple selection instead shows every selected date, formatted\n// per the active locale and joined with commas. Each is formatted as its own calendar day, in UTC\n// on both sides: a `ZonedDateTime`'s instant, formatted in the viewer's time zone, is another day\n// for a viewer far enough from the value's zone.\nconst MultiDateField = ({ values }: MultiDateFieldProps) => {\n  const formatter = useDateFormatter({ dateStyle: 'medium', timeZone: 'UTC' })\n\n  return (\n    <div className=\"datepicker-field\">\n      {values.length > 0 && (\n        <>\n          {values\n            .slice()\n            .sort((a, b) => a.compare(b))\n            .map((date) => formatter.format(toCalendarDate(date).toDate('UTC')))\n            .join(', ')}\n        </>\n      )}\n    </div>\n  )\n}\n","import React, { forwardRef, HTMLAttributes, ReactNode, useMemo, useRef } from 'react'\nimport { mergeProps, RangeValue, useDateRangePicker, useDialog } from 'react-aria'\nimport { DateValue, useDateRangePickerState } from 'react-stately'\n\nimport {\n  useForkedRef,\n  useFormField,\n  useOpenStateProps,\n  useOverlayPlacement,\n  useRequiredValueInput\n} from '../../hooks'\nimport { DateRangePreset } from '../../utils/dateRangePresets'\nimport { mergeIsDateUnavailable } from '../../utils/mergeIsDateUnavailable'\nimport { withoutSlotIds } from '../../utils/idRefs'\nimport { renderFormField } from '../form-field/renderFormField'\nimport { RangeCalendar } from '../calendar/RangeCalendar'\nimport { CalendarToggleButton } from './CalendarToggleButton'\nimport { ClearButton } from './ClearButton'\nimport { DateField, focusFirstSegment } from './DateField'\nimport { renderDatePickerShell } from './renderDatePickerShell'\nimport './DatePicker.scss'\nimport './DateRangePicker.scss'\nimport { CalendarLabels, CalendarLabelsProvider } from '../calendar/labels'\n\nexport interface DateRangePickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * An accessible label for the date range picker, used when there's no visible `<label>`.\n   */\n  'aria-label'?: string\n  /**\n   * Identifies a visible `<label>` element for the date range picker.\n   */\n  'aria-labelledby'?: string\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Whether the calendar popover is open by default (uncontrolled).\n   *\n   * @deprecated Use `defaultVisible`.\n   */\n  defaultOpen?: boolean\n  /**\n   * The initial selected date range (uncontrolled).\n   */\n  defaultValue?: RangeValue<DateValue> | null\n  /**\n   * Whether the calendar popover is open when the date range picker first renders. Use it\n   * instead of `visible` when nothing outside needs to control the popover.\n   *\n   * @default false\n   */\n  defaultVisible?: boolean\n  /**\n   * Prevents the date range picker from being focused or interacted with.\n   */\n  disabled?: boolean\n  /**\n   * The day that starts the week in the calendar overlay, overriding the default set by the\n   * active locale.\n   *\n   * @default 'mon'\n   */\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n  /**\n   * The smallest unit the fields show and edit. `'hour'`, `'minute'` and `'second'` add a time\n   * to both dates: the range's dates are then `CalendarDateTime`s, or `ZonedDateTime`s when\n   * `value`, `defaultValue` or `placeholderValue` holds them, and a range or placeholder given\n   * must carry times. Picking a range in the calendar keeps the times. A range picked in an\n   * empty field takes the time, and zone, of `placeholderValue`, else midnight with no zone: a\n   * zoned range, once cleared, needs a zoned `placeholderValue` to stay zoned.\n   *\n   * @default 'day', or 'minute' for a range with times\n   */\n  granularity?: 'day' | 'hour' | 'minute' | 'second'\n  /**\n   * A description for the field, rendered below the date range picker.\n   */\n  help?: ReactNode\n  /**\n   * Hide the time zone of `ZonedDateTime` dates.\n   */\n  hideTimeZone?: boolean\n  /**\n   * Show 12 or 24 hours. Defaults to the locale's.\n   */\n  hourCycle?: 12 | 24\n  /**\n   * `id` forwarded to the field's grouping element — useful for pairing with a `<label for>`.\n   */\n  id?: string\n  /**\n   * Set component validation state to invalid.\n   */\n  invalid?: boolean\n  /**\n   * An error message for the field, rendered below the date range picker when `invalid` is set,\n   * and after a submit that a `required` date range picker with a date missing held back.\n   */\n  invalidFeedback?: ReactNode\n  /**\n   * Callback that is called for each date in the calendar. If it returns `true`, that date is\n   * shown but cannot be selected.\n   */\n  isDateUnavailable?: (date: DateValue) => boolean\n  /**\n   * Overrides for the strings this component and its calendar render themselves rather than\n   * getting from the active locale — the calendar trigger, the clear adornment and the calendar's\n   * own year-view arrows/announcements. Date segment order, month and weekday names all follow\n   * `I18nProvider`'s locale via react-aria and need no override. Merged over the English defaults,\n   * so passing one key leaves the rest alone.\n   */\n  labels?: Partial<CalendarLabels>\n  /**\n   * Whether the calendar popover is open (controlled).\n   *\n   * @deprecated Use `visible`.\n   */\n  isOpen?: boolean\n  /**\n   * The field's caption, rendered as a `FormLabel` associated with the field group.\n   */\n  label?: ReactNode\n  /**\n   * The maximum allowed date that a user may select.\n   */\n  maxValue?: DateValue | null\n  /**\n   * The minimum allowed date that a user may select.\n   */\n  minValue?: DateValue | null\n  /**\n   * Base `name` for a pair of auto-created hidden inputs, kept in sync with the selection, for\n   * native form submission — rendered as `${name}Start` and `${name}End`. Omit to skip creating\n   * them. Each value is the date's `toString()`: `2026-03-15`, with a time `2026-03-15T09:30:00`,\n   * and with a time zone `2026-03-15T09:30:00+09:00[Asia/Tokyo]`, which `parseZonedDateTime`\n   * reads back.\n   */\n  name?: string\n  /**\n   * Callback fired when the selected date range changes. With a time (`granularity`), its dates\n   * are `CalendarDateTime`s or `ZonedDateTime`s.\n   */\n  onChange?: (value: RangeValue<DateValue> | null) => void\n  /**\n   * Callback fired when the calendar popover's open state changes.\n   *\n   * @deprecated Use `onVisibleChange`.\n   */\n  onOpenChange?: (isOpen: boolean) => void\n  /**\n   * Callback fired when the calendar popover asks to open or close: the calendar button, a\n   * completed selection, the Escape key or a click outside. Receives the state it asks for.\n   * With `visible` set, the popover changes only when `visible` does.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * The date both fields start from while empty, such as `new CalendarDateTime(2026, 1, 1, 9)`,\n   * and the month the calendar opens on. Its time is the one a range picked in the calendar gets,\n   * and its type the type of the dates `onChange` receives: a `ZonedDateTime` gives zoned dates.\n   * With a time `granularity` it must carry a time.\n   */\n  placeholderValue?: DateValue\n  /**\n   * A list of quick-select range presets shown in the overlay next to the calendar. Selecting a\n   * preset commits its range immediately, the same as picking a start and end date from the\n   * calendar: in order, kept inside `minValue`/`maxValue`, and with the times of the current\n   * range. A preset the calendar couldn't select is disabled: one with no day inside those\n   * limits, and one with an unavailable day in its range. The preset matching the current\n   * selection (if any) is marked selected. Omit to not show a preset list.\n   */\n  presets?: DateRangePreset[]\n  /**\n   * Toggle the required state for the component. A required date range picker with its start or\n   * its end missing holds its form back from submitting, takes focus in the field that is empty\n   * and shows as invalid, with `invalidFeedback`, until it has both dates or the form is reset.\n   * `invalid`, once set, and `valid` decide how it looks instead.\n   */\n  required?: boolean\n  /**\n   * Show a leading zero on the day, month and hour, as `03/05` rather than `3/5`, whatever the\n   * locale does.\n   */\n  shouldForceLeadingZeros?: boolean\n  /**\n   * Size the component sm or lg.\n   */\n  size?: 'sm' | 'lg'\n  /**\n   * ISO 8601 dates (`YYYY-MM-DD`) to mark unselectable, as a convenience alternative to\n   * `isDateUnavailable` for data-driven cases (e.g. booked dates fetched from an API). Composed\n   * with `isDateUnavailable` when both are given — a date unavailable by either is unavailable.\n   * Applies to both the calendar overlay and typing a date directly into either field.\n   */\n  unavailableDates?: string[]\n  /**\n   * Set component validation state to valid.\n   */\n  valid?: boolean\n  /**\n   * A success message for the field, rendered below the date range picker when `valid` is set.\n   */\n  validFeedback?: ReactNode\n  /**\n   * The selected date range (controlled).\n   */\n  value?: RangeValue<DateValue> | null\n  /**\n   * Whether the calendar popover is open. Setting it makes the popover controlled: it opens and\n   * closes only when this changes, so pair it with `onVisibleChange`.\n   */\n  visible?: boolean\n  /**\n   * Number of months to display side by side in the calendar overlay.\n   *\n   * @default 1\n   */\n  visibleMonths?: number\n}\n\n// Mirrors `DatePicker` closely — same field/overlay/dialog composition, just with two\n// segmented fields (`startFieldProps`/`endFieldProps` in place of a single `fieldProps`) and\n// `RangeCalendar` in place of `Calendar` in the overlay, dialog role/ref landing directly on\n// it exactly as `Calendar` does for `DatePicker`. `presets` is passed straight through —\n// `RangeCalendar` owns rendering and selecting them (it's also usable standalone), so completing\n// one goes through the same `state.setValue`/`onChange` path a two-click grid selection does,\n// which is what closes this overlay automatically.\nexport const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(\n  (\n    {\n      className,\n      defaultOpen,\n      defaultValue,\n      defaultVisible,\n      disabled,\n      firstDayOfWeek,\n      granularity,\n      help,\n      hideTimeZone,\n      hourCycle,\n      id,\n      invalid,\n      invalidFeedback,\n      isDateUnavailable,\n      isOpen,\n      label,\n      labels,\n      maxValue,\n      minValue,\n      name,\n      onChange,\n      onOpenChange,\n      onVisibleChange,\n      placeholderValue,\n      presets,\n      required,\n      shouldForceLeadingZeros,\n      size,\n      unavailableDates,\n      valid: validProp,\n      validFeedback,\n      value,\n      visible,\n      visibleMonths,\n      ...rest\n    }: DateRangePickerProps,\n    ref\n  ): ReactNode => {\n    const combinedIsDateUnavailable = useMemo(\n      () => mergeIsDateUnavailable(unavailableDates, isDateUnavailable),\n      [unavailableDates, isDateUnavailable]\n    )\n\n    const groupRef = useRef<HTMLDivElement>(null)\n    const forkedGroupRef = useForkedRef(ref, groupRef)\n    const calendarRef = useRef<HTMLDivElement>(null)\n    const endFieldRef = useRef<HTMLDivElement>(null)\n    const endInputRef = useRef<HTMLInputElement>(null)\n    const overlayRef = useRef<HTMLDivElement>(null)\n    const startInputRef = useRef<HTMLInputElement>(null)\n    const toggleButtonRef = useRef<HTMLButtonElement>(null)\n\n    // As in `DatePicker`: a required picker's two inputs are text inputs that aren't displayed,\n    // which a form validates where it doesn't a `type=\"hidden\"` one (FORMS.md, gotcha 9), so it\n    // is held back until both dates are in. Each input reports the submit it held back, and puts\n    // the focus in its own field: the start's first segment is the group's first.\n    const requiredOptions = { invalid, required, valid: validProp }\n    const start = useRequiredValueInput(startInputRef, {\n      ...requiredOptions,\n      focus: () => focusFirstSegment(groupRef.current)\n    })\n    const end = useRequiredValueInput(endInputRef, {\n      ...requiredOptions,\n      focus: () => focusFirstSegment(endFieldRef.current)\n    })\n    const missing = start.missing || end.missing\n    const valid = start.valid && end.valid\n\n    // What both react-stately's state and react-aria's hook read: the hook hands the time props\n    // on to the fields' segments.\n    const pickerProps = {\n      defaultValue,\n      granularity,\n      hideTimeZone,\n      hourCycle,\n      isDateUnavailable: combinedIsDateUnavailable,\n      isDisabled: disabled,\n      // `false` would override the state's own check of the range, unavailable dates and an end\n      // before the start: react-stately takes a defined `isInvalid` as the whole validation state.\n      isInvalid: invalid || missing || undefined,\n      isRequired: required,\n      maxValue,\n      minValue,\n      onChange,\n      placeholderValue,\n      shouldForceLeadingZeros,\n      value\n    }\n\n    const state = useDateRangePickerState({\n      ...useOpenStateProps(\n        { defaultOpen, defaultVisible, isOpen, onOpenChange, onVisibleChange, visible },\n        'DateRangePicker'\n      ),\n      ...pickerProps\n    })\n    // A range outside `minValue`/`maxValue`, over an unavailable date or ending before it starts\n    // is invalid too, shown as `invalid` is, as `TimeField` shows a time out of range. So is a\n    // range with a date `missing`, which the state was given.\n    const showInvalid = invalid || state.displayValidation.isInvalid\n    const showValid = valid && !showInvalid\n\n    const {\n      describedBy,\n      feedbackId,\n      helpId,\n      inputId: groupId,\n      labelId,\n      labelledBy\n    } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      ariaLabelledBy: rest['aria-labelledby'],\n      help,\n      id,\n      invalid: showInvalid,\n      invalidFeedback,\n      label,\n      valid: showValid,\n      validFeedback\n    })\n\n    const {\n      buttonProps,\n      calendarProps,\n      descriptionProps,\n      dialogProps,\n      endFieldProps,\n      errorMessageProps,\n      groupProps,\n      startFieldProps\n    } = useDateRangePicker(\n      {\n        ...pickerProps,\n        // Given to the hook, so the help and feedback describe the segments of both fields, which\n        // take focus, and the calendar button, not only the group around them.\n        'aria-describedby': describedBy,\n        'aria-label': rest['aria-label'],\n        'aria-labelledby': labelledBy,\n        id: groupId\n      },\n      state,\n      groupRef\n    )\n    // As in `DatePicker`: react-aria's value keeps its description of the selected range, without\n    // the slot ids (FORMS.md, gotcha 6), and is set again after the spread (gotcha 4).\n    const group = withoutSlotIds(groupProps, descriptionProps, errorMessageProps)\n\n    const { overlayStyle, placementAttr, overlayDismissProps } = useOverlayPlacement({\n      overlayRef,\n      state,\n      triggerRef: groupRef\n    })\n\n    const { dialogProps: domDialogProps } = useDialog(dialogProps, calendarRef)\n\n    // react-aria names the trigger in the active locale; `labels.calendar` replaces that name.\n    const triggerProps = labels?.calendar\n      ? { ...buttonProps, 'aria-label': labels.calendar }\n      : buttonProps\n\n    return (\n      <CalendarLabelsProvider labels={labels}>\n        {renderFormField({\n          children: (\n            <>\n              {renderDatePickerShell({\n                calendar: (\n                  <RangeCalendar\n                    {...domDialogProps}\n                    autoFocus\n                    defaultFocusedValue={calendarProps.defaultFocusedValue}\n                    disabled={disabled}\n                    firstDayOfWeek={firstDayOfWeek}\n                    isDateUnavailable={combinedIsDateUnavailable}\n                    maxValue={maxValue}\n                    minValue={minValue}\n                    onChange={calendarProps.onChange}\n                    presets={presets}\n                    ref={calendarRef}\n                    value={calendarProps.value}\n                    visibleMonths={visibleMonths}\n                  />\n                ),\n                className,\n                // `state.value` is always a `{ start, end }` object, never `null` itself — even with\n                // nothing picked yet — so the endpoints are what actually indicate a selection to\n                // clear (matching the hidden-input `value`s below, which check the same way).\n                clearButton: (state.value?.start || state.value?.end) && !disabled && (\n                  <ClearButton\n                    onPress={() => {\n                      state.setValue(null)\n                      // See `DatePicker`'s identical `ClearButton` usage for why this is needed —\n                      // this button unmounts itself once cleared, so focus needs somewhere to land.\n                      toggleButtonRef.current?.focus()\n                    }}\n                  />\n                ),\n                disabled,\n                field: (\n                  <>\n                    <DateField\n                      fieldProps={withoutSlotIds(\n                        startFieldProps,\n                        descriptionProps,\n                        errorMessageProps\n                      )}\n                    />\n                    <span aria-hidden=\"true\" className=\"daterangepicker-separator\">\n                      –\n                    </span>\n                    <DateField\n                      fieldProps={withoutSlotIds(\n                        endFieldProps,\n                        descriptionProps,\n                        errorMessageProps\n                      )}\n                      fieldRef={endFieldRef}\n                    />\n                  </>\n                ),\n                fieldClassName: 'd-flex w-100',\n                groupProps: {\n                  ...mergeProps(group, rest),\n                  'aria-describedby': group['aria-describedby'],\n                  'aria-labelledby': labelledBy\n                },\n                groupRef: forkedGroupRef,\n                invalid: showInvalid,\n                isOpen: state.isOpen,\n                overlayDismissProps,\n                overlayRef,\n                overlayStyle,\n                placementAttr,\n                size,\n                toggleButton: (\n                  <CalendarToggleButton\n                    buttonProps={withoutSlotIds(triggerProps, descriptionProps, errorMessageProps)}\n                    ref={toggleButtonRef}\n                    state={state}\n                  />\n                ),\n                valid: showValid\n              })}\n              {(name || required) && (\n                <>\n                  <input\n                    disabled={disabled}\n                    name={name && `${name}Start`}\n                    type=\"hidden\"\n                    value={state.value?.start ? state.value.start.toString() : ''}\n                    {...start.inputProps}\n                    ref={startInputRef}\n                  />\n                  <input\n                    disabled={disabled}\n                    name={name && `${name}End`}\n                    type=\"hidden\"\n                    value={state.value?.end ? state.value.end.toString() : ''}\n                    {...end.inputProps}\n                    ref={endInputRef}\n                  />\n                </>\n              )}\n            </>\n          ),\n          help,\n          ids: { feedback: feedbackId, help: helpId, label: labelId },\n          invalid: showInvalid,\n          invalidFeedback,\n          label,\n          valid: showValid,\n          validFeedback\n        })}\n      </CalendarLabelsProvider>\n    )\n  }\n)\n\nDateRangePicker.displayName = 'DateRangePicker'\n"],"mappings":"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"}

package/dist/chunks/{dialogTransition-i9vw0i2Z.js → dialogTransition-C8fYTsSa.js}

@@ -1,2 +1,2 @@
-const e=e=>{let{transitionDuration:t,transitionDelay:n}=window.getComputedStyle(e),r=Number.parseFloat(t)||0,i=Number.parseFloat(n)||0;return!r&&!i?0:(r+i)*1e3},t=(t,n,r)=>{if(!r)return n(),()=>void 0;let i=!1,a=()=>{i||(i=!0,t.removeEventListener(`transitionend`,o),clearTimeout(s),n())},o=e=>{e.target===t&&a()};t.addEventListener(`transitionend`,o);let s=setTimeout(a,e(t)+50);return()=>{t.removeEventListener(`transitionend`,o),clearTimeout(s)}};export{t};
-//# sourceMappingURL=dialogTransition-i9vw0i2Z.js.map
+const e=e=>{let{transitionDuration:t,transitionDelay:n}=window.getComputedStyle(e),r=Number.parseFloat(t)||0,i=Number.parseFloat(n)||0;return!r&&!i?0:(r+i)*1e3},t=(t,n,r)=>{if(!r)return n(),()=>void 0;let i=!1,a=()=>{i||(i=!0,t.removeEventListener(`transitionend`,o),clearTimeout(s),n())},o=e=>{e.target===t&&a()};t.addEventListener(`transitionend`,o);let s=setTimeout(a,e(t)+50);return()=>{t.removeEventListener(`transitionend`,o),clearTimeout(s)}};export{e as n,t};
+//# sourceMappingURL=dialogTransition-C8fYTsSa.js.map

package/dist/chunks/dialogTransition-C8fYTsSa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTransition-C8fYTsSa.js","names":["getTransitionDuration","element","duration","transitionDuration","delay","transitionDelay","executeAfterTransition","animated","callback","called","done","handleEnd","timer","event"],"sources":["../../src/utils/dialogTransition.ts"],"sourcesContent":["// Shared transition timing for native <dialog>-based components (Modal, Drawer). Body-scroll\n// locking is handled by react-aria's usePreventScroll directly in each component.\n\nexport const getTransitionDuration = (element: HTMLElement) => {\n  const { transitionDuration, transitionDelay } = window.getComputedStyle(element)\n  const duration = Number.parseFloat(transitionDuration) || 0\n  const delay = Number.parseFloat(transitionDelay) || 0\n  if (!duration && !delay) return 0\n  return (duration + delay) * 1000\n}\n\nexport const executeAfterTransition = (\n  element: HTMLElement,\n  callback: () => void,\n  animated: boolean\n) => {\n  if (!animated) {\n    callback()\n    return () => undefined\n  }\n\n  let called = false\n  const done = () => {\n    if (called) return\n    called = true\n    element.removeEventListener('transitionend', handleEnd)\n    clearTimeout(timer)\n    callback()\n  }\n  const handleEnd = (event: Event) => {\n    if (event.target === element) done()\n  }\n  element.addEventListener('transitionend', handleEnd)\n  const timer = setTimeout(done, getTransitionDuration(element) + 50)\n  return () => {\n    element.removeEventListener('transitionend', handleEnd)\n    clearTimeout(timer)\n  }\n}\n"],"mappings":"AAGA,MAAaA,EAAyB,GAAyB,CAC7D,GAAM,CAAE,qBAAoB,mBAAoB,OAAO,iBAAiBC,CAAO,EACzEC,EAAW,OAAO,WAAWC,CAAkB,GAAK,EACpDC,EAAQ,OAAO,WAAWC,CAAe,GAAK,EAEpD,MADI,CAACH,GAAY,CAACE,EAAc,GACxBF,EAAWE,GAAS,GAC9B,EAEaE,GACX,EACA,EACA,IACG,CACH,GAAI,CAACC,EAEH,OADAC,EAAS,MACI,IAAA,GAGf,IAAIC,EAAS,GACPC,MAAa,CACbD,IACJ,EAAS,GACTR,EAAQ,oBAAoB,gBAAiBU,CAAS,EACtD,aAAaC,CAAK,EAClBJ,EAAS,EACX,EACMG,EAAa,GAAiB,CAC9BE,EAAM,SAAWZ,GAASS,EAAK,CACrC,EACAT,EAAQ,iBAAiB,gBAAiBU,CAAS,EACnD,IAAMC,EAAQ,WAAWF,EAAMV,EAAsBC,CAAO,EAAI,EAAE,EAClE,UAAa,CACXA,EAAQ,oBAAoB,gBAAiBU,CAAS,EACtD,aAAaC,CAAK,CACpB,CACF,E"}

package/dist/chunks/direction-LN6uwsK5.js.map

@@ -1 +1 @@
-{"version":3,"file":"direction-LN6uwsK5.js","names":[],"sources":["../../src/utils/direction.ts"],"sourcesContent":["/**\n * Whether `element` renders right-to-left.\n *\n * Reads the *computed* direction rather than react-aria's `useLocale()`. The two are deliberately\n * separate signals in this library (see the Internationalization docs page): `useLocale()` follows\n * `I18nProvider`, and drives locale-dependent behavior like which calendar system to use;\n * everything about visual layout — including which physical arrow key moves \"forward\" through a\n * horizontally-laid-out control — follows the `dir` attribute, which is what `getComputedStyle`\n * resolves here. A page can set one without the other, and for arrow-key navigation it's the\n * rendered order the user sees that has to match.\n */\nexport function isRTL(element: Element): boolean {\n  return getComputedStyle(element).direction === 'rtl'\n}\n"],"mappings":"AAWA,SAAgB,EAAM,EAA2B,CAC/C,OAAO,iBAAiB,CAAO,CAAC,CAAC,YAAc,KACjD"}
+{"version":3,"file":"direction-LN6uwsK5.js","names":["isRTL","element"],"sources":["../../src/utils/direction.ts"],"sourcesContent":["/**\n * Whether `element` renders right-to-left.\n *\n * Reads the *computed* direction rather than react-aria's `useLocale()`. The two are deliberately\n * separate signals in this library (see the Internationalization docs page): `useLocale()` follows\n * `I18nProvider`, and drives locale-dependent behavior like which calendar system to use;\n * everything about visual layout — including which physical arrow key moves \"forward\" through a\n * horizontally-laid-out control — follows the `dir` attribute, which is what `getComputedStyle`\n * resolves here. A page can set one without the other, and for arrow-key navigation it's the\n * rendered order the user sees that has to match.\n */\nexport function isRTL(element: Element): boolean {\n  return getComputedStyle(element).direction === 'rtl'\n}\n"],"mappings":"AAWA,SAAgBA,EAAM,EAA2B,CAC/C,OAAO,iBAAiBC,CAAO,CAAC,CAAC,YAAc,KACjD,C"}

package/dist/chunks/divider-C1-NoKMV.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{S as e,g as t}from"./slot-BQVx1Eew.js";import{t as n}from"./polymorphic-CZIFszAy.js";import r,{Children as i,useId as a}from"react";import o from"classnames";import{useSeparator as s}from"react-aria";function c({children:n,className:c,component:l,labelPlacement:u=`center`,orientation:d=`horizontal`,...f},p){let m=i.toArray(n).some(e=>e!==``),h=l??(d===`vertical`||m?`div`:`hr`),g=t(h),_=a();e(g===`hr`&&m,"Divider: an `<hr>` cannot hold a label, so the label is not rendered. Leave `component` unset, or render another element.");let v=m&&g!==`hr`,y=f,b=y[`aria-label`]!=null||y[`aria-labelledby`]!=null,{separatorProps:x}=s({elementType:g,orientation:d});return g===`hr`&&d===`vertical`&&(x[`aria-orientation`]=`vertical`),/* @__PURE__ */ r.createElement(h,{className:o(`divider`,d===`vertical`&&`divider-vertical`,v&&`divider-labelled`,v&&u!==`center`&&`divider-${u}`,c),...x,"aria-labelledby":v&&!b?_:void 0,...f,ref:p},v?/* @__PURE__ */ r.createElement(`span`,{className:`divider-label`,id:_},n):void 0)}const l=n(c,`Divider`);export{l as t};
+//# sourceMappingURL=divider-C1-NoKMV.js.map

package/dist/chunks/divider-C1-NoKMV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-C1-NoKMV.js","names":["devWarning","resolveElementTag","createPolymorphicComponent","React","classNames","DividerRender","rest","hasLabel","Children","children","child","Component","component","orientation","rootTag","labelId","useId","label","labelling","named","useSeparator","labelPlacement","className","separatorProps","Divider"],"sources":["../../src/components/divider/Divider.tsx"],"sourcesContent":["import React, {\n  Children,\n  ElementType,\n  ForwardRefRenderFunction,\n  ReactElement,\n  ReactNode,\n  useId\n} from 'react'\nimport classNames from 'classnames'\nimport { useSeparator } from 'react-aria'\n\nimport './Divider.scss'\nimport { devWarning } from '../../utils/devWarning'\nimport { resolveElementTag } from '../../utils/elementKind'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef,\n  PolymorphicRefWithFallback\n} from '../../utils/polymorphic'\n\ntype DividerOwnProps<C extends ElementType> = {\n  /**\n   * A label shown in the line, such as \"or\" between two ways to sign in. It names the separator\n   * for screen readers. Not possible on an `<hr>`, which can't hold content.\n   */\n  children?: ReactNode\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component.\n   * Defaults to `hr`, or `div` for a vertical divider or one with a label.\n   */\n  component?: C\n  /**\n   * Where the label sits along the line. `start` and `end` draw the line on one side only.\n   *\n   * @default 'center'\n   */\n  labelPlacement?: 'start' | 'center' | 'end'\n  /**\n   * The direction of the line. A vertical divider stretches to the height of its flex row.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical'\n}\n\nexport type DividerProps<C extends ElementType = 'hr'> = PolymorphicComponentProps<\n  C,\n  DividerOwnProps<C>\n>\n\ntype DividerComponent = (<C extends ElementType = 'hr'>(\n  // A vertical or labelled divider renders a `<div>` while `C` stays `'hr'`.\n  props: DividerProps<C> & { ref?: PolymorphicRefWithFallback<C, HTMLDivElement> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DividerRender<C extends ElementType = 'hr'>(\n  {\n    children,\n    className,\n    component,\n    labelPlacement = 'center',\n    orientation = 'horizontal',\n    ...rest\n  }: DividerProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  // What renders nothing (`null`, a boolean, `''`, an empty array) is no label.\n  const hasLabel = Children.toArray(children).some((child) => child !== '')\n  const Component = component ?? (orientation === 'vertical' || hasLabel ? 'div' : 'hr')\n  const rootTag = resolveElementTag(Component)\n  const labelId = useId()\n\n  // An `<hr>` is a void element: React throws on its children.\n  devWarning(\n    rootTag === 'hr' && hasLabel,\n    'Divider: an `<hr>` cannot hold a label, so the label is not rendered. Leave `component` ' +\n      'unset, or render another element.'\n  )\n  const label = hasLabel && rootTag !== 'hr'\n  const labelling = rest as { 'aria-label'?: string; 'aria-labelledby'?: string }\n  const named = labelling['aria-label'] != null || labelling['aria-labelledby'] != null\n\n  const { separatorProps } = useSeparator({ elementType: rootTag, orientation })\n  // react-aria leaves an `<hr>`'s orientation to its implicit role, which is horizontal.\n  if (rootTag === 'hr' && orientation === 'vertical')\n    separatorProps['aria-orientation'] = 'vertical'\n\n  return (\n    <Component\n      className={classNames(\n        'divider',\n        orientation === 'vertical' && 'divider-vertical',\n        label && 'divider-labelled',\n        label && labelPlacement !== 'center' && `divider-${labelPlacement}`,\n        className\n      )}\n      {...separatorProps}\n      aria-labelledby={label && !named ? labelId : undefined}\n      {...rest}\n      ref={ref}\n    >\n      {label ? (\n        <span className=\"divider-label\" id={labelId}>\n          {children}\n        </span>\n      ) : undefined}\n    </Component>\n  )\n}\n\nexport const Divider = createPolymorphicComponent<DividerComponent>(\n  DividerRender as ForwardRefRenderFunction<Element, DividerProps<ElementType>>,\n  'Divider'\n)\n"],"mappings":"A,gPA4DA,SAASK,EACP,CACE,WACA,YACA,YACA,iBAAiB,SACjB,cAAc,aACd,GAAGC,GAEL,EACA,CAEA,IAAMC,EAAWC,EAAS,QAAQC,CAAQ,CAAC,CAAC,KAAM,GAAUC,IAAU,EAAE,EAClEC,EAAYC,IAAcC,IAAgB,YAAcN,EAAW,MAAQ,MAC3EO,EAAUb,EAAkBU,CAAS,EACrCI,EAAUC,EAAM,EAGtBhB,EACEc,IAAY,MAAQP,EACpB,2HAEF,EACA,IAAMU,EAAQV,GAAYO,IAAY,KAChCI,EAAYZ,EACZa,EAAQD,EAAU,eAAiB,MAAQA,EAAU,oBAAsB,KAE3E,CAAE,kBAAmBE,EAAa,CAAE,YAAaN,EAAS,aAAY,CAAC,EAK7E,OAHIA,IAAY,MAAQD,IAAgB,aACtC,EAAe,oBAAsB,YAGrC,kBAAA,cAACF,EAAD,CACE,UAAWP,EACT,UACAS,IAAgB,YAAc,mBAC9BI,GAAS,mBACTA,GAASI,IAAmB,UAAY,WAAWA,IACnDC,CACF,EACA,GAAIC,EACJ,kBAAiBN,GAAS,CAACE,EAAQJ,EAAU,IAAA,GAC7C,GAAIT,EACC,KAOI,EALRW,EACC,kBAAA,cAAC,OAAD,CAAM,UAAU,gBAAgB,GAAIF,CAE9B,EADHN,CACG,EACJ,IAAA,EACK,CAEf,CAEA,MAAae,EAAUtB,EACrBG,EACA,SACF,E"}

package/dist/chunks/drawer-CRv9jmbp.js

@@ -0,0 +1,2 @@
+import"./focus-ring-Bs80iIBN.js";import{y as e}from"./slot-BQVx1Eew.js";import{t}from"./polymorphic-CZIFszAy.js";import{t as n}from"./useIsomorphicLayoutEffect-BbqRwuqn.js";import{t as r}from"./useDialogElement-BfygWBPZ.js";import{t as i}from"./CloseButton-BPUI5iGX.js";import{t as a}from"./useDialogTitle-DiB4YDGI.js";import o,{createContext as s,forwardRef as c,useContext as l,useEffect as u,useId as d,useRef as f}from"react";import p from"classnames";const m=s({close:()=>{}}),h=s(()=>()=>{}),g=/* @__PURE__ */ new Set,_=c(({children:e,backdrop:t=!0,className:n,defaultVisible:i,fitContent:s,fullscreen:c,instant:l,keyboard:_=!0,onClick:v,onClose:y,onClosePrevented:b,onHidden:x,onKeyDown:S,onShow:C,onShown:w,onVisibleChange:T,placement:E,responsive:D,scroll:O=!1,sheet:k,translucent:A,open:j,visible:M,...N},P)=>{let{close:F,dialogRef:I,forkedRef:L,handleBackdropClick:R,handleCancel:z,handleKeyDown:B,handleNativeClose:V,hiding:H,staticBounce:U}=r({backdrop:t,defaultVisible:i,instant:l,isModal:!!t||!O,keyboard:_,lockScroll:!O,onBeforeShow:e=>{for(let t of g)t.dialog!==e&&t.close()},onClick:v,onClose:y,onClosePrevented:b,onHidden:x,onKeyDown:S,onShow:C,onShown:w,onVisibleChange:T,open:j,ref:P,visible:M}),W=d(),[G,K]=a(W),q=f(F);q.current=F,u(()=>{let e=I.current;if(!e)return;let t={dialog:e,close:()=>q.current()};return g.add(t),()=>{g.delete(t)}},[I]),u(()=>{if(!D)return;let e=()=>{let e=I.current;e?.open&&getComputedStyle(e).position!==`fixed`&&q.current()};return window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[I,D]);let J=p(D?`max-${D}:drawer`:`drawer`,`drawer-${E}`,{fullscreen:c,sheet:k,translucent:A,instant:l,"drawer-fit-content":s,nonmodal:!(t||!O),static:U,hiding:H},n);return/* @__PURE__ */ o.createElement(m.Provider,{value:{close:F,titleId:W}},/* @__PURE__ */ o.createElement(h.Provider,{value:K},/* @__PURE__ */ o.createElement(`dialog`,{"aria-labelledby":N[`aria-label`]?void 0:G,...N,open:j,className:J,onCancel:z,onClick:R,onClose:V,onKeyDown:B,ref:L},e)))});_.displayName=`Drawer`;function v({children:e,className:t,component:n,...r},i){let a=n??`div`,s=p(`drawer-body`,t);return/* @__PURE__ */ o.createElement(a,{className:s,...r,ref:i},e)}const y=t(v,`DrawerBody`);function b({children:e,className:t,component:n,stacked:r,...i},a){let s=n??`div`,c=p(`drawer-footer`,{stacked:r},t);return/* @__PURE__ */ o.createElement(s,{className:c,...i,ref:a},e)}const x=t(b,`DrawerFooter`),S=()=>l(m);function C({children:e,className:t,closeButton:n=!0,closeLabel:r,component:a,...s},c){let l=a??`div`,{close:u}=S(),d=p(`drawer-header`,t);return/* @__PURE__ */ o.createElement(l,{className:d,...s,ref:c},e,n&&/* @__PURE__ */ o.createElement(i,{label:r,onClick:u}))}const w=t(C,`DrawerHeader`);function T({children:t,component:r,className:i,id:a,...s},c){let{titleId:u}=S(),d=l(h),f=r??`h2`,m=p(`drawer-title`,i),g=e(f)??a??u;return n(()=>g?d(g):void 0,[d,g]),/* @__PURE__ */ o.createElement(f,{className:m,id:g,...s,ref:c},t)}const E=t(T,`DrawerTitle`);export{y as a,x as i,w as n,_ as o,S as r,E as t};
+//# sourceMappingURL=drawer-CRv9jmbp.js.map

package/dist/chunks/drawer-CRv9jmbp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-CRv9jmbp.js","names":["resolveSlottedId","useIsomorphicLayoutEffect","useDialogElement","CloseButton","useDialogTitle","React","classNames","DrawerContext","createContext","DrawerTitleContext","openDrawers","Drawer","forwardRef","rest","backdrop","scroll","entry","dialog","titleId","useId","labelledBy","registerTitle","closeRef","useRef","close","useEffect","dialogRef","responsive","handleResize","_className","placement","fitContent","staticBounce","className","handleCancel","handleBackdropClick","handleNativeClose","handleKeyDown","forkedRef","children","DrawerBodyRender","Component","component","DrawerBody","createPolymorphicComponent","DrawerFooterRender","DrawerFooter","useDrawer","useContext","DrawerHeaderRender","closeButton","closeLabel","DrawerHeader","DrawerTitleRender","resolvedId","id","DrawerTitle"],"sources":["../../src/components/drawer/Drawer.tsx","../../src/components/drawer/DrawerBody.tsx","../../src/components/drawer/DrawerFooter.tsx","../../src/components/drawer/useDrawer.ts","../../src/components/drawer/DrawerHeader.tsx","../../src/components/drawer/DrawerTitle.tsx"],"sourcesContent":["import React, {\n  createContext,\n  DialogHTMLAttributes,\n  forwardRef,\n  useEffect,\n  useId,\n  useRef\n} from 'react'\nimport classNames from 'classnames'\n\nimport { useDialogElement } from '../../hooks'\nimport { RegisterDialogTitle, useDialogTitle } from '../../hooks/useDialogTitle'\n\nexport interface DrawerProps extends Omit<\n  DialogHTMLAttributes<HTMLDialogElement>,\n  'onCancel' | 'onClose'\n> {\n  /**\n   * Show a backdrop while the drawer is open. `'static'` blocks closing on backdrop click\n   * (the drawer nudges instead).\n   */\n  backdrop?: boolean | 'static'\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Whether the drawer is open when it first renders. Such a drawer is uncontrolled: it closes\n   * itself on a close request. Use `visible` to open and close it from outside.\n   */\n  defaultVisible?: boolean\n  /**\n   * Size the height to the drawer's content instead of `--drawer-height`. Meaningful for\n   * `placement=\"bottom\"`.\n   */\n  fitContent?: boolean\n  /**\n   * Expand the panel to fill the viewport, animating in from the direction of `placement`.\n   */\n  fullscreen?: boolean\n  /**\n   * Disable the open/close transition entirely.\n   */\n  instant?: boolean\n  /**\n   * Closes the drawer when the escape key is pressed.\n   */\n  keyboard?: boolean\n  /**\n   * Renders the drawer open from its first paint, server HTML included, as a non-modal dialog: a\n   * static preview. It stays open until a close request. Use `visible` or `defaultVisible` to\n   * open it as a modal dialog.\n   */\n  open?: boolean\n  /**\n   * Callback fired when the drawer requests to be closed (escape, backdrop click, close button,\n   * or another drawer opening).\n   */\n  onClose?: () => void\n  /**\n   * Callback fired when a close attempt is blocked (static backdrop click, or escape with `keyboard=false`).\n   */\n  onClosePrevented?: () => void\n  /**\n   * Callback fired after the exit transition completes and the drawer is fully hidden.\n   */\n  onHidden?: () => void\n  /**\n   * Callback fired when the drawer starts to open.\n   */\n  onShow?: () => void\n  /**\n   * Callback fired after the entry transition completes and the drawer is fully visible.\n   */\n  onShown?: () => void\n  /**\n   * Callback fired with `false` when the drawer requests to be closed, at the same moments as\n   * `onClose`. It makes `visible` and `onVisibleChange` a pair that takes a state setter.\n   */\n  onVisibleChange?: (visible: boolean) => void\n  /**\n   * Which viewport edge the panel slides in from. Always required — there is no default\n   * off-screen transform without one.\n   */\n  placement: 'start' | 'end' | 'top' | 'bottom'\n  /**\n   * Renders as a drawer only below this breakpoint — inline as a flex container above it.\n   */\n  responsive?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  /**\n   * Allow the page behind the drawer to scroll while it's open.\n   */\n  scroll?: boolean\n  /**\n   * Remove the inset gap, border radius, and border so the panel sits flush against the\n   * viewport edge.\n   */\n  sheet?: boolean\n  /**\n   * Apply a frosted-glass background to the panel.\n   */\n  translucent?: boolean\n  /**\n   * Whether the drawer is open. The drawer is then controlled: a close request only fires\n   * `onClose` and `onVisibleChange`, and the drawer closes when this becomes `false`.\n   */\n  visible?: boolean\n}\n\nexport interface DrawerContextProps {\n  /**\n   * Requests the drawer be closed — fires `onClose`. Wire this to any element's `onClick`; see\n   * `useDrawer`.\n   */\n  close: () => void\n  /**\n   * Id generated by `Drawer` and applied automatically by `DrawerTitle` to itself, so the\n   * dialog's `aria-labelledby` resolves to it without any manual wiring.\n   */\n  titleId?: string\n}\n\nexport const DrawerContext = createContext<DrawerContextProps>({ close: () => {} })\n\n// How a rendered `DrawerTitle` tells its `Drawer` the id it has (`useDialogTitle`). Apart from\n// `DrawerContext`, whose value `useDrawer` returns to callers.\nexport const DrawerTitleContext = createContext<RegisterDialogTitle>(() => () => {})\n\n// Currently-open drawers, so opening one can auto-close any other open drawer\n// (\"When a second drawer opens while one is already open, the first closes automatically\").\nconst openDrawers = new Set<{ dialog: HTMLDialogElement; close: () => void }>()\n\nexport const Drawer = forwardRef<HTMLDialogElement, DrawerProps>(\n  (\n    {\n      children,\n      backdrop = true,\n      className,\n      defaultVisible,\n      fitContent,\n      fullscreen,\n      instant,\n      keyboard = true,\n      onClick,\n      onClose,\n      onClosePrevented,\n      onHidden,\n      onKeyDown,\n      onShow,\n      onShown,\n      onVisibleChange,\n      placement,\n      responsive,\n      scroll = false,\n      sheet,\n      translucent,\n      open,\n      visible,\n      ...rest\n    },\n    ref\n  ) => {\n    const {\n      close,\n      dialogRef,\n      forkedRef,\n      handleBackdropClick,\n      handleCancel,\n      handleKeyDown,\n      handleNativeClose,\n      hiding,\n      staticBounce\n    } = useDialogElement({\n      backdrop,\n      defaultVisible,\n      instant,\n      isModal: Boolean(backdrop) || !scroll,\n      keyboard,\n      // Modal for its backdrop, the page still scrolls under a `scroll` drawer.\n      lockScroll: !scroll,\n      onBeforeShow: (dialog) => {\n        for (const entry of openDrawers) {\n          if (entry.dialog !== dialog) entry.close()\n        }\n      },\n      onClick,\n      onClose,\n      onClosePrevented,\n      onHidden,\n      onKeyDown,\n      onShow,\n      onShown,\n      onVisibleChange,\n      open,\n      ref,\n      visible\n    })\n\n    const titleId = useId()\n    // Labelled by the title that is rendered, under the id it has, unless the caller names the\n    // dialog itself: `aria-labelledby` would outrank that `aria-label`.\n    const [labelledBy, registerTitle] = useDialogTitle(titleId)\n\n    const closeRef = useRef(close)\n    closeRef.current = close\n\n    // Register in the cross-instance registry so other drawers can auto-close this one.\n    useEffect(() => {\n      const dialog = dialogRef.current\n      if (!dialog) return undefined\n      const entry = { dialog, close: () => closeRef.current() }\n      openDrawers.add(entry)\n      return () => {\n        openDrawers.delete(entry)\n      }\n    }, [dialogRef])\n\n    // A `responsive` drawer is one only below its breakpoint: above it chassis-css lays the\n    // element out in the page. One that is open when the viewport grows past the breakpoint\n    // would stay in the top layer, over an inert and scroll-locked page, so it asks to close, as\n    // chassis-css's own drawer does on `resize`. Read from the computed `position` like there,\n    // not from a width: the breakpoints are the theme's.\n    useEffect(() => {\n      if (!responsive) return undefined\n      const handleResize = () => {\n        const dialog = dialogRef.current\n        if (!dialog?.open || getComputedStyle(dialog).position === 'fixed') return\n        closeRef.current()\n      }\n      window.addEventListener('resize', handleResize)\n      return () => window.removeEventListener('resize', handleResize)\n    }, [dialogRef, responsive])\n\n    // `hiding` has to stay on the class list for the whole exit transition: the native `open`\n    // attribute — and with it, the `[class*=\"drawer\"]:not([open], .hiding)` escape hatch\n    // chassis-css's navbar styles use to suppress the drawer-flash transition when the navbar\n    // itself crosses its `expand` breakpoint — would otherwise get stripped the instant `open`\n    // is removed, which would also strip the *intentional* close transition this class exists\n    // to protect.\n    const _className = classNames(\n      responsive ? `max-${responsive}:drawer` : 'drawer',\n      `drawer-${placement}`,\n      {\n        fullscreen,\n        sheet,\n        translucent,\n        instant,\n        'drawer-fit-content': fitContent,\n        nonmodal: !(Boolean(backdrop) || !scroll),\n        static: staticBounce,\n        hiding\n      },\n      className\n    )\n\n    return (\n      <DrawerContext.Provider value={{ close, titleId }}>\n        <DrawerTitleContext.Provider value={registerTitle}>\n          <dialog\n            aria-labelledby={rest['aria-label'] ? undefined : labelledBy}\n            {...rest}\n            open={open}\n            className={_className}\n            onCancel={handleCancel}\n            onClick={handleBackdropClick}\n            onClose={handleNativeClose}\n            onKeyDown={handleKeyDown}\n            ref={forkedRef}\n          >\n            {children}\n          </dialog>\n        </DrawerTitleContext.Provider>\n      </DrawerContext.Provider>\n    )\n  }\n)\n\nDrawer.displayName = 'Drawer'\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype DrawerBodyOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type DrawerBodyProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  DrawerBodyOwnProps<C>\n>\n\ntype DrawerBodyComponent = (<C extends ElementType = 'div'>(\n  props: DrawerBodyProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerBodyRender<C extends ElementType = 'div'>(\n  { children, className, component, ...rest }: DrawerBodyProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('drawer-body', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const DrawerBody = createPolymorphicComponent<DrawerBodyComponent>(\n  DrawerBodyRender as ForwardRefRenderFunction<Element, DrawerBodyProps<ElementType>>,\n  'DrawerBody'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype DrawerFooterOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Stack the footer actions as full-width columns instead of a right-aligned row.\n   */\n  stacked?: boolean\n}\n\nexport type DrawerFooterProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  DrawerFooterOwnProps<C>\n>\n\ntype DrawerFooterComponent = (<C extends ElementType = 'div'>(\n  props: DrawerFooterProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerFooterRender<C extends ElementType = 'div'>(\n  { children, className, component, stacked, ...rest }: DrawerFooterProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames('drawer-footer', { stacked }, className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const DrawerFooter = createPolymorphicComponent<DrawerFooterComponent>(\n  DrawerFooterRender as ForwardRefRenderFunction<Element, DrawerFooterProps<ElementType>>,\n  'DrawerFooter'\n)\n","import { useContext } from 'react'\nimport { DrawerContext, DrawerContextProps } from './Drawer'\n\nexport type UseDrawerResult = DrawerContextProps\n\n// Reach the enclosing `Drawer`'s close handler from anywhere in its composed markup — e.g. to\n// close it from a plain `Button` placed in a `DrawerFooter`. Only meaningful inside a `Drawer`;\n// outside one it returns a no-op `close`.\nexport const useDrawer = (): UseDrawerResult => useContext(DrawerContext)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { useDrawer } from './useDrawer'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { CloseButton } from '../close-button/CloseButton'\n\ntype DrawerHeaderOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Add a close button component to the header.\n   */\n  closeButton?: boolean\n  /**\n   * Overrides the close button's accessible name (defaults to `'Close'`). Set this for\n   * non-English UIs.\n   */\n  closeLabel?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type DrawerHeaderProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  DrawerHeaderOwnProps<C>\n>\n\ntype DrawerHeaderComponent = (<C extends ElementType = 'div'>(\n  props: DrawerHeaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerHeaderRender<C extends ElementType = 'div'>(\n  { children, className, closeButton = true, closeLabel, component, ...rest }: DrawerHeaderProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const { close } = useDrawer()\n  const _className = classNames('drawer-header', className)\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n      {closeButton && <CloseButton label={closeLabel} onClick={close} />}\n    </Component>\n  )\n}\n\nexport const DrawerHeader = createPolymorphicComponent<DrawerHeaderComponent>(\n  DrawerHeaderRender as ForwardRefRenderFunction<Element, DrawerHeaderProps<ElementType>>,\n  'DrawerHeader'\n)\n","import React, { ElementType, ForwardRefRenderFunction, ReactElement, useContext } from 'react'\nimport classNames from 'classnames'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks'\nimport { DrawerTitleContext } from './Drawer'\nimport { useDrawer } from './useDrawer'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { resolveSlottedId } from '../../utils/elementKind'\n\ntype DrawerTitleOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the base component.\n   */\n  className?: string\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n}\n\nexport type DrawerTitleProps<C extends ElementType = 'h2'> = PolymorphicComponentProps<\n  C,\n  DrawerTitleOwnProps<C>\n>\n\ntype DrawerTitleComponent = (<C extends ElementType = 'h2'>(\n  props: DrawerTitleProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction DrawerTitleRender<C extends ElementType = 'h2'>(\n  { children, component, className, id, ...rest }: DrawerTitleProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const { titleId } = useDrawer()\n  const registerTitle = useContext(DrawerTitleContext)\n  const Component = component ?? 'h2'\n  const _className = classNames('drawer-title', className)\n  // Under `asChild` the child's own `id` is the one rendered (`Slot`), so it is the one registered.\n  const resolvedId = resolveSlottedId(Component) ?? id ?? titleId\n\n  // The drawer is labelled by this title, under the id it has here.\n  useIsomorphicLayoutEffect(\n    () => (resolvedId ? registerTitle(resolvedId) : undefined),\n    [registerTitle, resolvedId]\n  )\n\n  return (\n    <Component className={_className} id={resolvedId} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const DrawerTitle = createPolymorphicComponent<DrawerTitleComponent>(\n  DrawerTitleRender as ForwardRefRenderFunction<Element, DrawerTitleProps<ElementType>>,\n  'DrawerTitle'\n)\n"],"mappings":"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"}

package/dist/chunks/file-input-D_Gl1h-T.js

@@ -0,0 +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"./renderFormField-_6WswnEX.js";import{t as i}from"./validationClassName-gRGs4KBm.js";import a,{forwardRef as o,useRef as s}from"react";import c from"classnames";const l=o(({className:o,help:l,id:u,invalid:d,invalidFeedback:f,label:p,size:m,valid:h,validFeedback:g,..._},v)=>{let y=s(null),b=e(v,y),{invalid:x,valid:S}=n(y,{invalid:d,valid:h}),{describedBy:C,feedbackId:w,helpId:T,inputId:E}=t({ariaDescribedBy:_[`aria-describedby`],help:l,id:u,invalid:x,invalidFeedback:f,valid:S,validFeedback:g}),D=c(`form-input`,m,i(x,S),o);return r({children:/* @__PURE__ */ a.createElement(`input`,{..._,"aria-describedby":C,"aria-invalid":x||void 0,className:D,id:E,ref:b,type:`file`}),help:l,ids:{feedback:w,help:T,input:E},invalid:x,invalidFeedback:f,label:p,valid:S,validFeedback:g})});l.displayName=`FileInput`;export{l as t};
+//# sourceMappingURL=file-input-D_Gl1h-T.js.map

package/dist/chunks/file-input-D_Gl1h-T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input-D_Gl1h-T.js","names":["useForkedRef","useHeldBack","renderFormField","validationClassName","React","classNames","FileInput","forwardRef","invalidProp","validProp","rest","inputRef","useRef","forkedRef","ref","useFormField","_className","size","invalid","valid","className","describedBy","inputId","feedbackId","helpId"],"sources":["../../src/components/file-input/FileInput.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, useHeldBack } from '../../hooks'\nimport { validationClassName } from '../../utils/validationClassName'\nimport { renderFormField } from '../form-field/renderFormField'\n\nexport interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\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 input.\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 the input 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 input.\n   */\n  label?: ReactNode\n  /**\n   * Allows selecting more than one file.\n   */\n  multiple?: boolean\n  /**\n   * Method called when the selected file(s) change.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\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 input when `valid` is set.\n   */\n  validFeedback?: ReactNode\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n  (\n    {\n      className,\n      help,\n      id,\n      invalid: invalidProp,\n      invalidFeedback,\n      label,\n      size,\n      valid: validProp,\n      validFeedback,\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`). 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(inputRef, { invalid: invalidProp, valid: validProp })\n\n    const { describedBy, feedbackId, helpId, inputId } = useFormField({\n      ariaDescribedBy: rest['aria-describedby'],\n      help,\n      id,\n      invalid,\n      invalidFeedback,\n      valid,\n      validFeedback\n    })\n\n    const _className = classNames(\n      'form-input',\n      size,\n      validationClassName(invalid, valid),\n      className\n    )\n\n    return renderFormField({\n      children: (\n        <input\n          {...rest}\n          aria-describedby={describedBy}\n          aria-invalid={invalid || undefined}\n          className={_className}\n          id={inputId}\n          ref={forkedRef}\n          type=\"file\"\n        />\n      ),\n      help,\n      ids: { feedback: feedbackId, help: helpId, input: inputId },\n      invalid,\n      invalidFeedback,\n      label,\n      valid,\n      validFeedback\n    })\n  }\n)\n\nFileInput.displayName = 'FileInput'\n"],"mappings":"A,4VA+DA,MAAaM,EAAYC,GAErB,CACE,YACA,OACA,KACA,QAASC,EACT,kBACA,QACA,OACA,MAAOC,EACP,gBACA,GAAGC,GAEL,IACG,CACH,IAAMC,EAAWC,EAAyB,IAAI,EACxCC,EAAYb,EAAac,EAAKH,CAAQ,EAItC,CAAE,UAAS,SAAUV,EAAYU,EAAU,CAAE,QAASH,EAAa,MAAOC,CAAU,CAAC,EAErF,CAAE,cAAa,aAAY,SAAQ,WAAYM,EAAa,CAChE,gBAAiBL,EAAK,oBACtB,OACA,KACA,UACA,kBACA,QACA,eACF,CAAC,EAEKM,EAAaX,EACjB,aACAY,EACAd,EAAoBe,EAASC,CAAK,EAClCC,CACF,EAEA,OAAOlB,EAAgB,CACrB,SACE,kBAAA,cAAC,QAAD,CACE,GAAIQ,EACJ,mBAAkBW,EAClB,eAAcH,GAAW,IAAA,GACzB,UAAWF,EACX,GAAIM,EACJ,IAAKT,EACL,KAAK,MACN,CAAA,EAEH,OACA,IAAK,CAAE,SAAUU,EAAY,KAAMC,EAAQ,MAAOF,CAAQ,EAC1D,UACA,kBACA,QACA,QACA,eACF,CAAC,CACH,CACF,EAEA,EAAU,YAAc,Y"}

package/dist/chunks/{flex-B52oLCCC.js → flex-C2jV5LyV.js}

@@ -1,2 +1,2 @@
-import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{a as t,i as n}from"./breakpoints-CGk8szzR.js";import{t as r}from"./spacingClassName-DVhk8m3P.js";import i from"react";import a from"classnames";function o({children:e,className:o,component:s,inline:c,direction:l,wrap:u,justify:d,align:f,alignContent:p,gap:m,rowGap:h,columnGap:g,..._},v){let y=s??`div`,b=a(c?`d-inline-flex`:`d-flex`,n([t(l,(e,t)=>`${t}flex-${e}`),t(u,(e,t)=>`${t}flex-${e}`),t(d,(e,t)=>`${t}justify-content-${e}`),t(f,(e,t)=>`${t}align-items-${e}`),t(p,(e,t)=>`${t}align-content-${e}`),t(m,(e,t)=>r(`gap`,e,t)),t(h,(e,t)=>r(`row-gap`,e,t)),t(g,(e,t)=>r(`column-gap`,e,t))]),o);return i.createElement(y,{className:b,..._,ref:v},e)}const s=e(o,`Flex`);export{s as t};
-//# sourceMappingURL=flex-B52oLCCC.js.map
+import"./focus-ring-Bs80iIBN.js";import{t as e}from"./polymorphic-CZIFszAy.js";import{a as t,i as n}from"./breakpoints-CGk8szzR.js";import{t as r}from"./spacingClassName-DVhk8m3P.js";import i from"react";import a from"classnames";function o({children:e,className:o,component:s,inline:c,direction:l,wrap:u,justify:d,align:f,alignContent:p,gap:m,rowGap:h,columnGap:g,..._},v){let y=s??`div`,b=a(c?`d-inline-flex`:`d-flex`,n([t(l,(e,t)=>`${t}flex-${e}`),t(u,(e,t)=>`${t}flex-${e}`),t(d,(e,t)=>`${t}justify-content-${e}`),t(f,(e,t)=>`${t}align-items-${e}`),t(p,(e,t)=>`${t}align-content-${e}`),t(m,(e,t)=>r(`gap`,e,t)),t(h,(e,t)=>r(`row-gap`,e,t)),t(g,(e,t)=>r(`column-gap`,e,t))]),o);return/* @__PURE__ */ i.createElement(y,{className:b,..._,ref:v},e)}const s=e(o,`Flex`);export{s as t};
+//# sourceMappingURL=flex-C2jV5LyV.js.map