@techzyapp/ui-library 1.0.29 → 1.0.31

package/dist/{FloatingPanel-CeSOtE_D.js.map → FloatingPanel-C5c_eMQ0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel-CeSOtE_D.js","sources":["../src/hooks/useFloatingPanel.ts","../src/components/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'\nimport { useLockBodyScroll } from './useLockBodyScroll'\n\n/** Geometry computed for a floating panel anchored to a trigger. */\nexport interface FloatingPanelPosition {\n  top: number\n  left: number\n  width: number\n  side: 'top' | 'bottom'\n  maxHeight: number\n}\n\nconst VIEWPORT_PADDING = 8\nconst OFFSET = 6\n\nexport interface UseFloatingPanelOptions {\n  /** Whether the panel is open. */\n  open: boolean\n  /** Ref to the anchor/trigger element. */\n  triggerRef: RefObject<HTMLElement | null>\n  /**\n   * Horizontal alignment to the trigger: `start` (panel's left edge at the trigger's left — grows\n   * right, the default) or `end` (panel's right edge at the trigger's right — grows left).\n   */\n  align?: 'start' | 'end'\n  /**\n   * Dismiss request. Outside-pointerdown passes whether focus was parked inside the panel (so the\n   * consumer can restore focus to the trigger); Escape passes `true`.\n   */\n  onClose: (refocus: boolean) => void\n}\n\nexport interface UseFloatingPanelResult {\n  /** Attach to the portaled panel element. */\n  popoverRef: RefObject<HTMLDivElement | null>\n  /** Computed geometry (null until first measured). */\n  position: FloatingPanelPosition | null\n  /** Enter-animation flag (rAF-driven once open). */\n  visible: boolean\n  /** Force a re-measure (rarely needed — scroll/resize/ResizeObserver already drive it). */\n  reposition: () => void\n}\n\n/**\n * Shared floating-panel plumbing — a `<body>`-portaled panel that opens below its trigger (flips above\n * only when it would overflow), exposes the trigger width (for select-like matching), clamps to the\n * viewport, re-positions on scroll/resize (+ `ResizeObserver`), locks page scroll while open, and\n * dismisses on outside-pointerdown / `Escape`. The consumer owns the trigger ref, the `open` state, and\n * the `onClose` cleanup; this hook owns the panel ref, geometry, the enter-animation flag, and the\n * listeners. Wrapped by the internal `FloatingPanel` component, which every popover in the library\n * (`Select` / `MultiSelect`, the date/time pickers, `ColorPicker`) renders. Internal (not public).\n */\nexport function useFloatingPanel({\n  open,\n  triggerRef,\n  align = 'start',\n  onClose,\n}: UseFloatingPanelOptions): UseFloatingPanelResult {\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [position, setPosition] = useState<FloatingPanelPosition | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open)\n\n  const reposition = useCallback(() => {\n    const trigger = triggerRef.current\n    const panel = popoverRef.current\n    if (!trigger || !panel) return\n    const rect = trigger.getBoundingClientRect()\n    const panelH = panel.offsetHeight\n    const vh = window.innerHeight\n    const vw = window.innerWidth\n\n    const spaceBelow = vh - rect.bottom - OFFSET - VIEWPORT_PADDING\n    const spaceAbove = rect.top - OFFSET - VIEWPORT_PADDING\n    // prefer below; flip up only when below can't fit AND above has more room\n    let side: 'top' | 'bottom' = 'bottom'\n    if (panelH > spaceBelow && spaceAbove > spaceBelow) side = 'top'\n\n    const maxHeight = Math.max(0, side === 'bottom' ? spaceBelow : spaceAbove)\n    const usedH = Math.min(panelH, maxHeight)\n    let top = side === 'bottom' ? rect.bottom + OFFSET : rect.top - OFFSET - usedH\n    top = Math.min(\n      Math.max(top, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vh - VIEWPORT_PADDING - usedH),\n    )\n    // clamp using the panel's actual width (a panel can be wider than its trigger, e.g. a calendar);\n    // `width` returns the trigger width for consumers that match it (Select/MultiSelect).\n    const panelW = panel.offsetWidth\n    // `end` pins the panel's right edge to the trigger's right (grows left); `start` pins left (grows right)\n    const baseLeft = align === 'end' ? rect.right - panelW : rect.left\n    const left = Math.min(\n      Math.max(baseLeft, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vw - VIEWPORT_PADDING - panelW),\n    )\n    setPosition({ top, left, width: rect.width, side, maxHeight })\n  }, [triggerRef, align])\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    reposition()\n  }, [open, reposition])\n\n  useEffect(() => {\n    if (!open) return\n    const raf = requestAnimationFrame(() => setVisible(true))\n    const onReposition = () => reposition()\n    window.addEventListener('resize', onReposition)\n    window.addEventListener('scroll', onReposition, true)\n    let ro: ResizeObserver | undefined\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(onReposition)\n      if (popoverRef.current) ro.observe(popoverRef.current)\n      if (triggerRef.current) ro.observe(triggerRef.current)\n    }\n    return () => {\n      cancelAnimationFrame(raf)\n      window.removeEventListener('resize', onReposition)\n      window.removeEventListener('scroll', onReposition, true)\n      ro?.disconnect()\n    }\n  }, [open, reposition, triggerRef])\n\n  useEffect(() => {\n    if (!open) return\n    const onPointerDown = (e: PointerEvent) => {\n      const t = e.target as Node\n      if (triggerRef.current?.contains(t) || popoverRef.current?.contains(t)) return\n      // restore focus to the trigger only if it was parked inside the panel (e.g. a search box)\n      onClose(!!popoverRef.current?.contains(document.activeElement))\n    }\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose(true)\n    }\n    document.addEventListener('pointerdown', onPointerDown, true)\n    document.addEventListener('keydown', onKey)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown, true)\n      document.removeEventListener('keydown', onKey)\n    }\n  }, [open, onClose, triggerRef])\n\n  return { popoverRef, position, visible, reposition }\n}\n","import {\n  forwardRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useFloatingPanel } from '../../hooks/useFloatingPanel'\nimport styles from './FloatingPanel.module.css'\n\nexport interface FloatingPanelProps {\n  /** Whether the panel is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Ref to the anchor/trigger element the panel is positioned against. */\n  triggerRef: RefObject<HTMLElement | null>\n  /** Horizontal alignment to the trigger: `start` (default, grows right) or `end` (grows left). */\n  align?: 'start' | 'end'\n  /** Dismiss request: outside-pointerdown (arg = restore focus to the trigger?) or Escape (`true`). */\n  onClose: (refocus: boolean) => void\n  /** `id` for the panel element — pair with the trigger's `aria-controls`. */\n  id?: string\n  /** ARIA role for the panel element (e.g. `'dialog'`). Omit for a plain wrapper (e.g. around a listbox). */\n  role?: string\n  /** Accessible label, paired with `role`. */\n  ariaLabel?: string\n  /** `id` of the element that labels the panel (instead of `ariaLabel`). */\n  ariaLabelledBy?: string\n  /** `id` of the element that describes the panel. */\n  ariaDescribedBy?: string\n  /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */\n  trapFocus?: boolean\n  /** Constrain the panel to the trigger's width (select-like). */\n  matchTriggerWidth?: boolean\n  /** Fixed panel width (px number or any CSS width). Wins over `matchTriggerWidth`. */\n  width?: number | string\n  /** Class(es) for the panel element, merged after the shared chrome (layout overrides live here). */\n  className?: string\n  /** Inline style merged onto the panel (e.g. a custom CSS var). */\n  style?: CSSProperties\n  /** Panel content. */\n  children: ReactNode\n}\n\n/** Focusable descendants used by the optional focus trap. */\n// include inputs/selects/textareas/links — picker panels (DatePicker/ColorPicker/…) contain text\n// inputs, and a button-only selector let Shift+Tab escape the trap into the scroll-locked page\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not([tabindex=\"-1\"]):not(:disabled), input:not([tabindex=\"-1\"]):not(:disabled), select:not([tabindex=\"-1\"]):not(:disabled), textarea:not([tabindex=\"-1\"]):not(:disabled), [tabindex=\"0\"]'\n\n/**\n * The shared floating popover used across the library — `Select` / `MultiSelect`, the date/time\n * pickers, `ColorPicker`, and the public `Popover`. Wraps `useFloatingPanel` and renders a `<body>`-portaled, viewport-clamped\n * panel that opens below its trigger (flips above only when it would overflow), locks page scroll while\n * open, animates in (opacity + translate, keyed off `data-open`/`data-side`), and dismisses on\n * outside-pointerdown / `Escape`. Optionally **traps Tab focus** (`trapFocus`, for modal dialogs — also\n * sets `aria-modal`). The forwarded ref points at the panel element, so a consumer can still read it for\n * blur/focus bookkeeping. Internal (not part of the public component surface).\n */\nexport const FloatingPanel = forwardRef<HTMLDivElement, FloatingPanelProps>(function FloatingPanel(\n  {\n    open,\n    triggerRef,\n    align,\n    onClose,\n    id,\n    role,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    trapFocus = false,\n    matchTriggerWidth = false,\n    width,\n    className,\n    style,\n    children,\n  },\n  forwardedRef,\n) {\n  const {\n    popoverRef,\n    position: pos,\n    visible,\n  } = useFloatingPanel({\n    open,\n    triggerRef,\n    align,\n    onClose,\n  })\n\n  // attach the panel node to both the hook's ref (for positioning) and the forwarded ref (for the\n  // consumer's blur/focus bookkeeping)\n  const setRef = (node: HTMLDivElement | null) => {\n    popoverRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // trap Tab within the dialog so focus can't strand on the scroll-locked page behind it\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const panel = popoverRef.current\n    if (!panel) return\n    const focusables = panel.querySelectorAll<HTMLElement>(FOCUSABLE)\n    if (focusables.length === 0) return\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  const resolvedWidth = width ?? (matchTriggerWidth ? pos?.width : undefined)\n\n  return createPortal(\n    <div\n      ref={setRef}\n      id={id}\n      className={clsx(styles.panel, className)}\n      role={role}\n      aria-modal={(role === 'dialog' || role === 'alertdialog') && trapFocus ? true : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-open={visible ? 'true' : 'false'}\n      data-side={pos?.side ?? 'bottom'}\n      onKeyDown={trapFocus ? handleKeyDown : undefined}\n      style={{\n        position: 'fixed',\n        top: pos?.top ?? 0,\n        left: pos?.left ?? 0,\n        width: resolvedWidth,\n        maxHeight: pos?.maxHeight,\n        visibility: pos ? 'visible' : 'hidden',\n        ...style,\n      }}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n"],"names":["VIEWPORT_PADDING","OFFSET","useFloatingPanel","open","triggerRef","align","onClose","popoverRef","useRef","position","setPosition","useState","visible","setVisible","useLockBodyScroll","reposition","useCallback","trigger","panel","rect","panelH","vh","vw","spaceBelow","spaceAbove","side","maxHeight","usedH","top","panelW","baseLeft","left","useLayoutEffect","useEffect","raf","onReposition","ro","onPointerDown","t","_a","_b","_c","onKey","FOCUSABLE","FloatingPanel","forwardRef","id","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","trapFocus","matchTriggerWidth","width","className","style","children","forwardedRef","pos","setRef","node","handleKeyDown","event","focusables","first","last","resolvedWidth","createPortal","jsx","clsx","styles"],"mappings":";;;;;AAYA,MAAMA,IAAmB,GACnBC,IAAS;AAuCR,SAASC,EAAiB;AAAA,EAC/B,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,SAAAC;AACF,GAAoD;AAClD,QAAMC,IAAaC,EAA8B,IAAI,GAC/C,CAACC,GAAUC,CAAW,IAAIC,EAAuC,IAAI,GACrE,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK;AAE5C,EAAAG,EAAkBX,CAAI;AAEtB,QAAMY,IAAaC,EAAY,MAAM;AACnC,UAAMC,IAAUb,EAAW,SACrBc,IAAQX,EAAW;AACzB,QAAI,CAACU,KAAW,CAACC,EAAO;AACxB,UAAMC,IAAOF,EAAQ,sBAAA,GACfG,IAASF,EAAM,cACfG,IAAK,OAAO,aACZC,IAAK,OAAO,YAEZC,IAAaF,IAAKF,EAAK,SAASlB,IAASD,GACzCwB,IAAaL,EAAK,MAAMlB,IAASD;AAEvC,QAAIyB,IAAyB;AAC7B,IAAIL,IAASG,KAAcC,IAAaD,MAAYE,IAAO;AAE3D,UAAMC,IAAY,KAAK,IAAI,GAAGD,MAAS,WAAWF,IAAaC,CAAU,GACnEG,IAAQ,KAAK,IAAIP,GAAQM,CAAS;AACxC,QAAIE,IAAMH,MAAS,WAAWN,EAAK,SAASlB,IAASkB,EAAK,MAAMlB,IAAS0B;AACzE,IAAAC,IAAM,KAAK;AAAA,MACT,KAAK,IAAIA,GAAK5B,CAAgB;AAAA,MAC9B,KAAK,IAAIA,GAAkBqB,IAAKrB,IAAmB2B,CAAK;AAAA,IAAA;AAI1D,UAAME,IAASX,EAAM,aAEfY,IAAWzB,MAAU,QAAQc,EAAK,QAAQU,IAASV,EAAK,MACxDY,IAAO,KAAK;AAAA,MAChB,KAAK,IAAID,GAAU9B,CAAgB;AAAA,MACnC,KAAK,IAAIA,GAAkBsB,IAAKtB,IAAmB6B,CAAM;AAAA,IAAA;AAE3D,IAAAnB,EAAY,EAAE,KAAAkB,GAAK,MAAAG,GAAM,OAAOZ,EAAK,OAAO,MAAAM,GAAM,WAAAC,GAAW;AAAA,EAC/D,GAAG,CAACtB,GAAYC,CAAK,CAAC;AAEtB,SAAA2B,EAAgB,MAAM;AACpB,QAAI,CAAC7B,GAAM;AACT,MAAAU,EAAW,EAAK;AAChB;AAAA,IACF;AACA,IAAAE,EAAA;AAAA,EACF,GAAG,CAACZ,GAAMY,CAAU,CAAC,GAErBkB,EAAU,MAAM;AACd,QAAI,CAAC9B,EAAM;AACX,UAAM+B,IAAM,sBAAsB,MAAMrB,EAAW,EAAI,CAAC,GAClDsB,IAAe,MAAMpB,EAAA;AAC3B,WAAO,iBAAiB,UAAUoB,CAAY,GAC9C,OAAO,iBAAiB,UAAUA,GAAc,EAAI;AACpD,QAAIC;AACJ,WAAI,OAAO,iBAAmB,QAC5BA,IAAK,IAAI,eAAeD,CAAY,GAChC5B,EAAW,WAAS6B,EAAG,QAAQ7B,EAAW,OAAO,GACjDH,EAAW,WAASgC,EAAG,QAAQhC,EAAW,OAAO,IAEhD,MAAM;AACX,2BAAqB8B,CAAG,GACxB,OAAO,oBAAoB,UAAUC,CAAY,GACjD,OAAO,oBAAoB,UAAUA,GAAc,EAAI,GACvDC,KAAA,QAAAA,EAAI;AAAA,IACN;AAAA,EACF,GAAG,CAACjC,GAAMY,GAAYX,CAAU,CAAC,GAEjC6B,EAAU,MAAM;AACd,QAAI,CAAC9B,EAAM;AACX,UAAMkC,IAAgB,CAAC,MAAoB;;AACzC,YAAMC,IAAI,EAAE;AACZ,OAAIC,IAAAnC,EAAW,YAAX,QAAAmC,EAAoB,SAASD,OAAME,IAAAjC,EAAW,YAAX,QAAAiC,EAAoB,SAASF,MAEpEhC,EAAQ,CAAC,GAACmC,IAAAlC,EAAW,YAAX,QAAAkC,EAAoB,SAAS,SAAS,eAAc;AAAA,IAChE,GACMC,IAAQ,CAAC,MAAqB;AAClC,MAAI,EAAE,QAAQ,YAAUpC,EAAQ,EAAI;AAAA,IACtC;AACA,oBAAS,iBAAiB,eAAe+B,GAAe,EAAI,GAC5D,SAAS,iBAAiB,WAAWK,CAAK,GACnC,MAAM;AACX,eAAS,oBAAoB,eAAeL,GAAe,EAAI,GAC/D,SAAS,oBAAoB,WAAWK,CAAK;AAAA,IAC/C;AAAA,EACF,GAAG,CAACvC,GAAMG,GAASF,CAAU,CAAC,GAEvB,EAAE,YAAAG,GAAY,UAAAE,GAAU,SAAAG,GAAS,YAAAG,EAAA;AAC1C;;;GClGM4B,IACJ,iOAWWC,IAAgBC,EAA+C,SAC1E;AAAA,EACE,MAAA1C;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,IAAAwC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,mBAAAC,IAAoB;AAAA,EACpB,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,GACAC,GACA;AACA,QAAM;AAAA,IACJ,YAAAlD;AAAA,IACA,UAAUmD;AAAA,IACV,SAAA9C;AAAA,EAAA,IACEV,EAAiB;AAAA,IACnB,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,CACD,GAIKqD,IAAS,CAACC,MAAgC;AAC9C,IAAArD,EAAW,UAAUqD,GACjB,OAAOH,KAAiB,aAAYA,EAAaG,CAAI,IAChDH,QAA2B,UAAUG;AAAA,EAChD,GAGMC,IAAgB,CAACC,MAAyC;AAC9D,QAAIA,EAAM,QAAQ,MAAO;AACzB,UAAM5C,IAAQX,EAAW;AACzB,QAAI,CAACW,EAAO;AACZ,UAAM6C,IAAa7C,EAAM,iBAA8ByB,CAAS;AAChE,QAAIoB,EAAW,WAAW,EAAG;AAC7B,UAAMC,IAAQD,EAAW,CAAC,GACpBE,IAAOF,EAAWA,EAAW,SAAS,CAAC;AAC7C,IAAID,EAAM,YAAY,SAAS,kBAAkBE,KAC/CF,EAAM,eAAA,GACNG,EAAK,MAAA,KACI,CAACH,EAAM,YAAY,SAAS,kBAAkBG,MACvDH,EAAM,eAAA,GACNE,EAAM,MAAA;AAAA,EAEV;AAEA,MAAI,CAAC7D,EAAM,QAAO;AAElB,QAAM+D,IAAgBb,MAAUD,IAAoBM,KAAA,gBAAAA,EAAK,QAAQ;AAEjE,SAAOS;AAAA,IACL,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKT;AAAA,QACL,IAAAb;AAAA,QACA,WAAWuB,EAAKC,EAAO,OAAOhB,CAAS;AAAA,QACvC,MAAAP;AAAA,QACA,eAAaA,MAAS,YAAYA,MAAS,kBAAkBI,IAAY,KAAO;AAAA,QAChF,cAAYH;AAAA,QACZ,mBAAiBC;AAAA,QACjB,oBAAkBC;AAAA,QAClB,aAAWtC,IAAU,SAAS;AAAA,QAC9B,cAAW8C,KAAA,gBAAAA,EAAK,SAAQ;AAAA,QACxB,WAAWP,IAAYU,IAAgB;AAAA,QACvC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAKH,KAAA,gBAAAA,EAAK,QAAO;AAAA,UACjB,OAAMA,KAAA,gBAAAA,EAAK,SAAQ;AAAA,UACnB,OAAOQ;AAAA,UACP,WAAWR,KAAA,gBAAAA,EAAK;AAAA,UAChB,YAAYA,IAAM,YAAY;AAAA,UAC9B,GAAGH;AAAA,QAAA;AAAA,QAGJ,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,SAAS;AAAA,EAAA;AAEb,CAAC;"}
+{"version":3,"file":"FloatingPanel-C5c_eMQ0.js","sources":["../src/hooks/useFloatingPanel.ts","../src/components/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'\nimport { useLockBodyScroll } from './useLockBodyScroll'\n\n/** Geometry computed for a floating panel anchored to a trigger. */\nexport interface FloatingPanelPosition {\n  top: number\n  left: number\n  width: number\n  side: 'top' | 'bottom'\n  maxHeight: number\n}\n\nconst VIEWPORT_PADDING = 8\nconst OFFSET = 6\n\nexport interface UseFloatingPanelOptions {\n  /** Whether the panel is open. */\n  open: boolean\n  /** Ref to the anchor/trigger element. */\n  triggerRef: RefObject<HTMLElement | null>\n  /**\n   * Horizontal alignment to the trigger: `start` (panel's left edge at the trigger's left — grows\n   * right, the default) or `end` (panel's right edge at the trigger's right — grows left).\n   */\n  align?: 'start' | 'end'\n  /**\n   * Dismiss request. Outside-pointerdown passes whether focus was parked inside the panel (so the\n   * consumer can restore focus to the trigger); Escape passes `true`.\n   */\n  onClose: (refocus: boolean) => void\n}\n\nexport interface UseFloatingPanelResult {\n  /** Attach to the portaled panel element. */\n  popoverRef: RefObject<HTMLDivElement | null>\n  /** Computed geometry (null until first measured). */\n  position: FloatingPanelPosition | null\n  /** Enter-animation flag (rAF-driven once open). */\n  visible: boolean\n  /** Force a re-measure (rarely needed — scroll/resize/ResizeObserver already drive it). */\n  reposition: () => void\n}\n\n/**\n * Shared floating-panel plumbing — a `<body>`-portaled panel that opens below its trigger (flips above\n * only when it would overflow), exposes the trigger width (for select-like matching), clamps to the\n * viewport, re-positions on scroll/resize (+ `ResizeObserver`), locks page scroll while open, and\n * dismisses on outside-pointerdown / `Escape`. The consumer owns the trigger ref, the `open` state, and\n * the `onClose` cleanup; this hook owns the panel ref, geometry, the enter-animation flag, and the\n * listeners. Wrapped by the internal `FloatingPanel` component, which every popover in the library\n * (`Select` / `MultiSelect`, the date/time pickers, `ColorPicker`) renders. Internal (not public).\n */\nexport function useFloatingPanel({\n  open,\n  triggerRef,\n  align = 'start',\n  onClose,\n}: UseFloatingPanelOptions): UseFloatingPanelResult {\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [position, setPosition] = useState<FloatingPanelPosition | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open)\n\n  const reposition = useCallback(() => {\n    const trigger = triggerRef.current\n    const panel = popoverRef.current\n    if (!trigger || !panel) return\n    const rect = trigger.getBoundingClientRect()\n    const panelH = panel.offsetHeight\n    const vh = window.innerHeight\n    const vw = window.innerWidth\n\n    const spaceBelow = vh - rect.bottom - OFFSET - VIEWPORT_PADDING\n    const spaceAbove = rect.top - OFFSET - VIEWPORT_PADDING\n    // prefer below; flip up only when below can't fit AND above has more room\n    let side: 'top' | 'bottom' = 'bottom'\n    if (panelH > spaceBelow && spaceAbove > spaceBelow) side = 'top'\n\n    const maxHeight = Math.max(0, side === 'bottom' ? spaceBelow : spaceAbove)\n    const usedH = Math.min(panelH, maxHeight)\n    let top = side === 'bottom' ? rect.bottom + OFFSET : rect.top - OFFSET - usedH\n    top = Math.min(\n      Math.max(top, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vh - VIEWPORT_PADDING - usedH),\n    )\n    // clamp using the panel's actual width (a panel can be wider than its trigger, e.g. a calendar);\n    // `width` returns the trigger width for consumers that match it (Select/MultiSelect).\n    const panelW = panel.offsetWidth\n    // `end` pins the panel's right edge to the trigger's right (grows left); `start` pins left (grows right)\n    const baseLeft = align === 'end' ? rect.right - panelW : rect.left\n    const left = Math.min(\n      Math.max(baseLeft, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vw - VIEWPORT_PADDING - panelW),\n    )\n    setPosition({ top, left, width: rect.width, side, maxHeight })\n  }, [triggerRef, align])\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    reposition()\n  }, [open, reposition])\n\n  useEffect(() => {\n    if (!open) return\n    const raf = requestAnimationFrame(() => setVisible(true))\n    const onReposition = () => reposition()\n    window.addEventListener('resize', onReposition)\n    window.addEventListener('scroll', onReposition, true)\n    let ro: ResizeObserver | undefined\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(onReposition)\n      if (popoverRef.current) ro.observe(popoverRef.current)\n      if (triggerRef.current) ro.observe(triggerRef.current)\n    }\n    return () => {\n      cancelAnimationFrame(raf)\n      window.removeEventListener('resize', onReposition)\n      window.removeEventListener('scroll', onReposition, true)\n      ro?.disconnect()\n    }\n  }, [open, reposition, triggerRef])\n\n  useEffect(() => {\n    if (!open) return\n    const onPointerDown = (e: PointerEvent) => {\n      const t = e.target as Node\n      if (triggerRef.current?.contains(t) || popoverRef.current?.contains(t)) return\n      // restore focus to the trigger only if it was parked inside the panel (e.g. a search box)\n      onClose(!!popoverRef.current?.contains(document.activeElement))\n    }\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose(true)\n    }\n    document.addEventListener('pointerdown', onPointerDown, true)\n    document.addEventListener('keydown', onKey)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown, true)\n      document.removeEventListener('keydown', onKey)\n    }\n  }, [open, onClose, triggerRef])\n\n  return { popoverRef, position, visible, reposition }\n}\n","import {\n  forwardRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useFloatingPanel } from '../../hooks/useFloatingPanel'\nimport styles from './FloatingPanel.module.css'\n\nexport interface FloatingPanelProps {\n  /** Whether the panel is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Ref to the anchor/trigger element the panel is positioned against. */\n  triggerRef: RefObject<HTMLElement | null>\n  /** Horizontal alignment to the trigger: `start` (default, grows right) or `end` (grows left). */\n  align?: 'start' | 'end'\n  /** Dismiss request: outside-pointerdown (arg = restore focus to the trigger?) or Escape (`true`). */\n  onClose: (refocus: boolean) => void\n  /** `id` for the panel element — pair with the trigger's `aria-controls`. */\n  id?: string\n  /** ARIA role for the panel element (e.g. `'dialog'`). Omit for a plain wrapper (e.g. around a listbox). */\n  role?: string\n  /** Accessible label, paired with `role`. */\n  ariaLabel?: string\n  /** `id` of the element that labels the panel (instead of `ariaLabel`). */\n  ariaLabelledBy?: string\n  /** `id` of the element that describes the panel. */\n  ariaDescribedBy?: string\n  /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */\n  trapFocus?: boolean\n  /** Constrain the panel to the trigger's width (select-like). */\n  matchTriggerWidth?: boolean\n  /** Fixed panel width (px number or any CSS width). Wins over `matchTriggerWidth`. */\n  width?: number | string\n  /** Class(es) for the panel element, merged after the shared chrome (layout overrides live here). */\n  className?: string\n  /** Inline style merged onto the panel (e.g. a custom CSS var). */\n  style?: CSSProperties\n  /** Panel content. */\n  children: ReactNode\n}\n\n/** Focusable descendants used by the optional focus trap. */\n// include inputs/selects/textareas/links — picker panels (DatePicker/ColorPicker/…) contain text\n// inputs, and a button-only selector let Shift+Tab escape the trap into the scroll-locked page\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not([tabindex=\"-1\"]):not(:disabled), input:not([tabindex=\"-1\"]):not(:disabled), select:not([tabindex=\"-1\"]):not(:disabled), textarea:not([tabindex=\"-1\"]):not(:disabled), [tabindex=\"0\"]'\n\n/**\n * The shared floating popover used across the library — `Select` / `MultiSelect`, the date/time\n * pickers, `ColorPicker`, and the public `Popover`. Wraps `useFloatingPanel` and renders a `<body>`-portaled, viewport-clamped\n * panel that opens below its trigger (flips above only when it would overflow), locks page scroll while\n * open, animates in (opacity + translate, keyed off `data-open`/`data-side`), and dismisses on\n * outside-pointerdown / `Escape`. Optionally **traps Tab focus** (`trapFocus`, for modal dialogs — also\n * sets `aria-modal`). The forwarded ref points at the panel element, so a consumer can still read it for\n * blur/focus bookkeeping. Internal (not part of the public component surface).\n */\nexport const FloatingPanel = forwardRef<HTMLDivElement, FloatingPanelProps>(function FloatingPanel(\n  {\n    open,\n    triggerRef,\n    align,\n    onClose,\n    id,\n    role,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    trapFocus = false,\n    matchTriggerWidth = false,\n    width,\n    className,\n    style,\n    children,\n  },\n  forwardedRef,\n) {\n  const {\n    popoverRef,\n    position: pos,\n    visible,\n  } = useFloatingPanel({\n    open,\n    triggerRef,\n    align,\n    onClose,\n  })\n\n  // attach the panel node to both the hook's ref (for positioning) and the forwarded ref (for the\n  // consumer's blur/focus bookkeeping)\n  const setRef = (node: HTMLDivElement | null) => {\n    popoverRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // Escape inside the panel closes THIS panel only — stopped here so it can't bubble (through the React tree,\n  // the panel is portaled) to an enclosing Modal / drawer's Overlay and dismiss that too. Stopping it also\n  // keeps it from the document listener in `useFloatingPanel`, hence the explicit close.\n  const handleEscape = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Escape') return false\n    event.stopPropagation()\n    onClose(true)\n    return true\n  }\n\n  // trap Tab within the dialog so focus can't strand on the scroll-locked page behind it\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (handleEscape(event)) return\n    if (!trapFocus) return\n    if (event.key !== 'Tab') return\n    const panel = popoverRef.current\n    if (!panel) return\n    const focusables = panel.querySelectorAll<HTMLElement>(FOCUSABLE)\n    if (focusables.length === 0) return\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  const resolvedWidth = width ?? (matchTriggerWidth ? pos?.width : undefined)\n\n  return createPortal(\n    <div\n      ref={setRef}\n      id={id}\n      className={clsx(styles.panel, className)}\n      role={role}\n      aria-modal={(role === 'dialog' || role === 'alertdialog') && trapFocus ? true : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-open={visible ? 'true' : 'false'}\n      data-side={pos?.side ?? 'bottom'}\n      onKeyDown={handleKeyDown}\n      style={{\n        position: 'fixed',\n        top: pos?.top ?? 0,\n        left: pos?.left ?? 0,\n        width: resolvedWidth,\n        maxHeight: pos?.maxHeight,\n        visibility: pos ? 'visible' : 'hidden',\n        ...style,\n      }}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n"],"names":["VIEWPORT_PADDING","OFFSET","useFloatingPanel","open","triggerRef","align","onClose","popoverRef","useRef","position","setPosition","useState","visible","setVisible","useLockBodyScroll","reposition","useCallback","trigger","panel","rect","panelH","vh","vw","spaceBelow","spaceAbove","side","maxHeight","usedH","top","panelW","baseLeft","left","useLayoutEffect","useEffect","raf","onReposition","ro","onPointerDown","t","_a","_b","_c","onKey","FOCUSABLE","FloatingPanel","forwardRef","id","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","trapFocus","matchTriggerWidth","width","className","style","children","forwardedRef","pos","setRef","node","handleEscape","event","handleKeyDown","focusables","first","last","resolvedWidth","createPortal","jsx","clsx","styles"],"mappings":"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"}

package/dist/FloatingPanel-tGCG2nhA.cjs

@@ -0,0 +1,2 @@
+"use strict";const A=require("react/jsx-runtime"),u=require("react"),B=require("react-dom"),K=require("clsx"),O=require("./useLockBodyScroll-CIXHZo-Q.cjs"),l=8,q=6;function W({open:c,triggerRef:s,align:p="start",onClose:h}){const a=u.useRef(null),[D,v]=u.useState(null),[F,x]=u.useState(!1);O.useLockBodyScroll(c);const d=u.useCallback(()=>{const r=s.current,i=a.current;if(!r||!i)return;const e=r.getBoundingClientRect(),f=i.offsetHeight,m=window.innerHeight,b=window.innerWidth,o=m-e.bottom-q-l,w=e.top-q-l;let t="bottom";f>o&&w>o&&(t="top");const E=Math.max(0,t==="bottom"?o:w),L=Math.min(f,E);let y=t==="bottom"?e.bottom+q:e.top-q-L;y=Math.min(Math.max(y,l),Math.max(l,m-l-L));const P=i.offsetWidth,M=p==="end"?e.right-P:e.left,n=Math.min(Math.max(M,l),Math.max(l,b-l-P));v({top:y,left:n,width:e.width,side:t,maxHeight:E})},[s,p]);return u.useLayoutEffect(()=>{if(!c){x(!1);return}d()},[c,d]),u.useEffect(()=>{if(!c)return;const r=requestAnimationFrame(()=>x(!0)),i=()=>d();window.addEventListener("resize",i),window.addEventListener("scroll",i,!0);let e;return typeof ResizeObserver<"u"&&(e=new ResizeObserver(i),a.current&&e.observe(a.current),s.current&&e.observe(s.current)),()=>{cancelAnimationFrame(r),window.removeEventListener("resize",i),window.removeEventListener("scroll",i,!0),e==null||e.disconnect()}},[c,d,s]),u.useEffect(()=>{if(!c)return;const r=e=>{var m,b,o;const f=e.target;(m=s.current)!=null&&m.contains(f)||(b=a.current)!=null&&b.contains(f)||h(!!((o=a.current)!=null&&o.contains(document.activeElement)))},i=e=>{e.key==="Escape"&&h(!0)};return document.addEventListener("pointerdown",r,!0),document.addEventListener("keydown",i),()=>{document.removeEventListener("pointerdown",r,!0),document.removeEventListener("keydown",i)}},[c,h,s]),{popoverRef:a,position:D,visible:F,reposition:d}}const z="_panel_1cr9q_5",_={panel:z},T='a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]):not(:disabled), input:not([tabindex="-1"]):not(:disabled), select:not([tabindex="-1"]):not(:disabled), textarea:not([tabindex="-1"]):not(:disabled), [tabindex="0"]',j=u.forwardRef(function({open:s,triggerRef:p,align:h,onClose:a,id:D,role:v,ariaLabel:F,ariaLabelledBy:x,ariaDescribedBy:d,trapFocus:r=!1,matchTriggerWidth:i=!1,width:e,className:f,style:m,children:b},o){const{popoverRef:w,position:t,visible:E}=W({open:s,triggerRef:p,align:h,onClose:a}),L=n=>{w.current=n,typeof o=="function"?o(n):o&&(o.current=n)},y=n=>n.key!=="Escape"?!1:(n.stopPropagation(),a(!0),!0),P=n=>{if(y(n)||!r||n.key!=="Tab")return;const g=w.current;if(!g)return;const k=g.querySelectorAll(T);if(k.length===0)return;const H=k[0],S=k[k.length-1];n.shiftKey&&document.activeElement===H?(n.preventDefault(),S.focus()):!n.shiftKey&&document.activeElement===S&&(n.preventDefault(),H.focus())};if(!s)return null;const M=e??(i?t==null?void 0:t.width:void 0);return B.createPortal(A.jsx("div",{ref:L,id:D,className:K.clsx(_.panel,f),role:v,"aria-modal":(v==="dialog"||v==="alertdialog")&&r?!0:void 0,"aria-label":F,"aria-labelledby":x,"aria-describedby":d,"data-open":E?"true":"false","data-side":(t==null?void 0:t.side)??"bottom",onKeyDown:P,style:{position:"fixed",top:(t==null?void 0:t.top)??0,left:(t==null?void 0:t.left)??0,width:M,maxHeight:t==null?void 0:t.maxHeight,visibility:t?"visible":"hidden",...m},children:b}),document.body)});exports.FloatingPanel=j;
+//# sourceMappingURL=FloatingPanel-tGCG2nhA.cjs.map

package/dist/{FloatingPanel-BIC4WrFa.cjs.map → FloatingPanel-tGCG2nhA.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel-BIC4WrFa.cjs","sources":["../src/hooks/useFloatingPanel.ts","../src/components/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'\nimport { useLockBodyScroll } from './useLockBodyScroll'\n\n/** Geometry computed for a floating panel anchored to a trigger. */\nexport interface FloatingPanelPosition {\n  top: number\n  left: number\n  width: number\n  side: 'top' | 'bottom'\n  maxHeight: number\n}\n\nconst VIEWPORT_PADDING = 8\nconst OFFSET = 6\n\nexport interface UseFloatingPanelOptions {\n  /** Whether the panel is open. */\n  open: boolean\n  /** Ref to the anchor/trigger element. */\n  triggerRef: RefObject<HTMLElement | null>\n  /**\n   * Horizontal alignment to the trigger: `start` (panel's left edge at the trigger's left — grows\n   * right, the default) or `end` (panel's right edge at the trigger's right — grows left).\n   */\n  align?: 'start' | 'end'\n  /**\n   * Dismiss request. Outside-pointerdown passes whether focus was parked inside the panel (so the\n   * consumer can restore focus to the trigger); Escape passes `true`.\n   */\n  onClose: (refocus: boolean) => void\n}\n\nexport interface UseFloatingPanelResult {\n  /** Attach to the portaled panel element. */\n  popoverRef: RefObject<HTMLDivElement | null>\n  /** Computed geometry (null until first measured). */\n  position: FloatingPanelPosition | null\n  /** Enter-animation flag (rAF-driven once open). */\n  visible: boolean\n  /** Force a re-measure (rarely needed — scroll/resize/ResizeObserver already drive it). */\n  reposition: () => void\n}\n\n/**\n * Shared floating-panel plumbing — a `<body>`-portaled panel that opens below its trigger (flips above\n * only when it would overflow), exposes the trigger width (for select-like matching), clamps to the\n * viewport, re-positions on scroll/resize (+ `ResizeObserver`), locks page scroll while open, and\n * dismisses on outside-pointerdown / `Escape`. The consumer owns the trigger ref, the `open` state, and\n * the `onClose` cleanup; this hook owns the panel ref, geometry, the enter-animation flag, and the\n * listeners. Wrapped by the internal `FloatingPanel` component, which every popover in the library\n * (`Select` / `MultiSelect`, the date/time pickers, `ColorPicker`) renders. Internal (not public).\n */\nexport function useFloatingPanel({\n  open,\n  triggerRef,\n  align = 'start',\n  onClose,\n}: UseFloatingPanelOptions): UseFloatingPanelResult {\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [position, setPosition] = useState<FloatingPanelPosition | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open)\n\n  const reposition = useCallback(() => {\n    const trigger = triggerRef.current\n    const panel = popoverRef.current\n    if (!trigger || !panel) return\n    const rect = trigger.getBoundingClientRect()\n    const panelH = panel.offsetHeight\n    const vh = window.innerHeight\n    const vw = window.innerWidth\n\n    const spaceBelow = vh - rect.bottom - OFFSET - VIEWPORT_PADDING\n    const spaceAbove = rect.top - OFFSET - VIEWPORT_PADDING\n    // prefer below; flip up only when below can't fit AND above has more room\n    let side: 'top' | 'bottom' = 'bottom'\n    if (panelH > spaceBelow && spaceAbove > spaceBelow) side = 'top'\n\n    const maxHeight = Math.max(0, side === 'bottom' ? spaceBelow : spaceAbove)\n    const usedH = Math.min(panelH, maxHeight)\n    let top = side === 'bottom' ? rect.bottom + OFFSET : rect.top - OFFSET - usedH\n    top = Math.min(\n      Math.max(top, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vh - VIEWPORT_PADDING - usedH),\n    )\n    // clamp using the panel's actual width (a panel can be wider than its trigger, e.g. a calendar);\n    // `width` returns the trigger width for consumers that match it (Select/MultiSelect).\n    const panelW = panel.offsetWidth\n    // `end` pins the panel's right edge to the trigger's right (grows left); `start` pins left (grows right)\n    const baseLeft = align === 'end' ? rect.right - panelW : rect.left\n    const left = Math.min(\n      Math.max(baseLeft, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vw - VIEWPORT_PADDING - panelW),\n    )\n    setPosition({ top, left, width: rect.width, side, maxHeight })\n  }, [triggerRef, align])\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    reposition()\n  }, [open, reposition])\n\n  useEffect(() => {\n    if (!open) return\n    const raf = requestAnimationFrame(() => setVisible(true))\n    const onReposition = () => reposition()\n    window.addEventListener('resize', onReposition)\n    window.addEventListener('scroll', onReposition, true)\n    let ro: ResizeObserver | undefined\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(onReposition)\n      if (popoverRef.current) ro.observe(popoverRef.current)\n      if (triggerRef.current) ro.observe(triggerRef.current)\n    }\n    return () => {\n      cancelAnimationFrame(raf)\n      window.removeEventListener('resize', onReposition)\n      window.removeEventListener('scroll', onReposition, true)\n      ro?.disconnect()\n    }\n  }, [open, reposition, triggerRef])\n\n  useEffect(() => {\n    if (!open) return\n    const onPointerDown = (e: PointerEvent) => {\n      const t = e.target as Node\n      if (triggerRef.current?.contains(t) || popoverRef.current?.contains(t)) return\n      // restore focus to the trigger only if it was parked inside the panel (e.g. a search box)\n      onClose(!!popoverRef.current?.contains(document.activeElement))\n    }\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose(true)\n    }\n    document.addEventListener('pointerdown', onPointerDown, true)\n    document.addEventListener('keydown', onKey)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown, true)\n      document.removeEventListener('keydown', onKey)\n    }\n  }, [open, onClose, triggerRef])\n\n  return { popoverRef, position, visible, reposition }\n}\n","import {\n  forwardRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useFloatingPanel } from '../../hooks/useFloatingPanel'\nimport styles from './FloatingPanel.module.css'\n\nexport interface FloatingPanelProps {\n  /** Whether the panel is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Ref to the anchor/trigger element the panel is positioned against. */\n  triggerRef: RefObject<HTMLElement | null>\n  /** Horizontal alignment to the trigger: `start` (default, grows right) or `end` (grows left). */\n  align?: 'start' | 'end'\n  /** Dismiss request: outside-pointerdown (arg = restore focus to the trigger?) or Escape (`true`). */\n  onClose: (refocus: boolean) => void\n  /** `id` for the panel element — pair with the trigger's `aria-controls`. */\n  id?: string\n  /** ARIA role for the panel element (e.g. `'dialog'`). Omit for a plain wrapper (e.g. around a listbox). */\n  role?: string\n  /** Accessible label, paired with `role`. */\n  ariaLabel?: string\n  /** `id` of the element that labels the panel (instead of `ariaLabel`). */\n  ariaLabelledBy?: string\n  /** `id` of the element that describes the panel. */\n  ariaDescribedBy?: string\n  /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */\n  trapFocus?: boolean\n  /** Constrain the panel to the trigger's width (select-like). */\n  matchTriggerWidth?: boolean\n  /** Fixed panel width (px number or any CSS width). Wins over `matchTriggerWidth`. */\n  width?: number | string\n  /** Class(es) for the panel element, merged after the shared chrome (layout overrides live here). */\n  className?: string\n  /** Inline style merged onto the panel (e.g. a custom CSS var). */\n  style?: CSSProperties\n  /** Panel content. */\n  children: ReactNode\n}\n\n/** Focusable descendants used by the optional focus trap. */\n// include inputs/selects/textareas/links — picker panels (DatePicker/ColorPicker/…) contain text\n// inputs, and a button-only selector let Shift+Tab escape the trap into the scroll-locked page\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not([tabindex=\"-1\"]):not(:disabled), input:not([tabindex=\"-1\"]):not(:disabled), select:not([tabindex=\"-1\"]):not(:disabled), textarea:not([tabindex=\"-1\"]):not(:disabled), [tabindex=\"0\"]'\n\n/**\n * The shared floating popover used across the library — `Select` / `MultiSelect`, the date/time\n * pickers, `ColorPicker`, and the public `Popover`. Wraps `useFloatingPanel` and renders a `<body>`-portaled, viewport-clamped\n * panel that opens below its trigger (flips above only when it would overflow), locks page scroll while\n * open, animates in (opacity + translate, keyed off `data-open`/`data-side`), and dismisses on\n * outside-pointerdown / `Escape`. Optionally **traps Tab focus** (`trapFocus`, for modal dialogs — also\n * sets `aria-modal`). The forwarded ref points at the panel element, so a consumer can still read it for\n * blur/focus bookkeeping. Internal (not part of the public component surface).\n */\nexport const FloatingPanel = forwardRef<HTMLDivElement, FloatingPanelProps>(function FloatingPanel(\n  {\n    open,\n    triggerRef,\n    align,\n    onClose,\n    id,\n    role,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    trapFocus = false,\n    matchTriggerWidth = false,\n    width,\n    className,\n    style,\n    children,\n  },\n  forwardedRef,\n) {\n  const {\n    popoverRef,\n    position: pos,\n    visible,\n  } = useFloatingPanel({\n    open,\n    triggerRef,\n    align,\n    onClose,\n  })\n\n  // attach the panel node to both the hook's ref (for positioning) and the forwarded ref (for the\n  // consumer's blur/focus bookkeeping)\n  const setRef = (node: HTMLDivElement | null) => {\n    popoverRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // trap Tab within the dialog so focus can't strand on the scroll-locked page behind it\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Tab') return\n    const panel = popoverRef.current\n    if (!panel) return\n    const focusables = panel.querySelectorAll<HTMLElement>(FOCUSABLE)\n    if (focusables.length === 0) return\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  const resolvedWidth = width ?? (matchTriggerWidth ? pos?.width : undefined)\n\n  return createPortal(\n    <div\n      ref={setRef}\n      id={id}\n      className={clsx(styles.panel, className)}\n      role={role}\n      aria-modal={(role === 'dialog' || role === 'alertdialog') && trapFocus ? true : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-open={visible ? 'true' : 'false'}\n      data-side={pos?.side ?? 'bottom'}\n      onKeyDown={trapFocus ? handleKeyDown : undefined}\n      style={{\n        position: 'fixed',\n        top: pos?.top ?? 0,\n        left: pos?.left ?? 0,\n        width: resolvedWidth,\n        maxHeight: pos?.maxHeight,\n        visibility: pos ? 'visible' : 'hidden',\n        ...style,\n      }}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n"],"names":["VIEWPORT_PADDING","OFFSET","useFloatingPanel","open","triggerRef","align","onClose","popoverRef","useRef","position","setPosition","useState","visible","setVisible","useLockBodyScroll","reposition","useCallback","trigger","panel","rect","panelH","vh","vw","spaceBelow","spaceAbove","side","maxHeight","usedH","top","panelW","baseLeft","left","useLayoutEffect","useEffect","raf","onReposition","ro","onPointerDown","t","_a","_b","_c","onKey","FOCUSABLE","FloatingPanel","forwardRef","id","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","trapFocus","matchTriggerWidth","width","className","style","children","forwardedRef","pos","setRef","node","handleKeyDown","event","focusables","first","last","resolvedWidth","createPortal","jsx","clsx","styles"],"mappings":"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"}
+{"version":3,"file":"FloatingPanel-tGCG2nhA.cjs","sources":["../src/hooks/useFloatingPanel.ts","../src/components/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'\nimport { useLockBodyScroll } from './useLockBodyScroll'\n\n/** Geometry computed for a floating panel anchored to a trigger. */\nexport interface FloatingPanelPosition {\n  top: number\n  left: number\n  width: number\n  side: 'top' | 'bottom'\n  maxHeight: number\n}\n\nconst VIEWPORT_PADDING = 8\nconst OFFSET = 6\n\nexport interface UseFloatingPanelOptions {\n  /** Whether the panel is open. */\n  open: boolean\n  /** Ref to the anchor/trigger element. */\n  triggerRef: RefObject<HTMLElement | null>\n  /**\n   * Horizontal alignment to the trigger: `start` (panel's left edge at the trigger's left — grows\n   * right, the default) or `end` (panel's right edge at the trigger's right — grows left).\n   */\n  align?: 'start' | 'end'\n  /**\n   * Dismiss request. Outside-pointerdown passes whether focus was parked inside the panel (so the\n   * consumer can restore focus to the trigger); Escape passes `true`.\n   */\n  onClose: (refocus: boolean) => void\n}\n\nexport interface UseFloatingPanelResult {\n  /** Attach to the portaled panel element. */\n  popoverRef: RefObject<HTMLDivElement | null>\n  /** Computed geometry (null until first measured). */\n  position: FloatingPanelPosition | null\n  /** Enter-animation flag (rAF-driven once open). */\n  visible: boolean\n  /** Force a re-measure (rarely needed — scroll/resize/ResizeObserver already drive it). */\n  reposition: () => void\n}\n\n/**\n * Shared floating-panel plumbing — a `<body>`-portaled panel that opens below its trigger (flips above\n * only when it would overflow), exposes the trigger width (for select-like matching), clamps to the\n * viewport, re-positions on scroll/resize (+ `ResizeObserver`), locks page scroll while open, and\n * dismisses on outside-pointerdown / `Escape`. The consumer owns the trigger ref, the `open` state, and\n * the `onClose` cleanup; this hook owns the panel ref, geometry, the enter-animation flag, and the\n * listeners. Wrapped by the internal `FloatingPanel` component, which every popover in the library\n * (`Select` / `MultiSelect`, the date/time pickers, `ColorPicker`) renders. Internal (not public).\n */\nexport function useFloatingPanel({\n  open,\n  triggerRef,\n  align = 'start',\n  onClose,\n}: UseFloatingPanelOptions): UseFloatingPanelResult {\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [position, setPosition] = useState<FloatingPanelPosition | null>(null)\n  const [visible, setVisible] = useState(false)\n\n  useLockBodyScroll(open)\n\n  const reposition = useCallback(() => {\n    const trigger = triggerRef.current\n    const panel = popoverRef.current\n    if (!trigger || !panel) return\n    const rect = trigger.getBoundingClientRect()\n    const panelH = panel.offsetHeight\n    const vh = window.innerHeight\n    const vw = window.innerWidth\n\n    const spaceBelow = vh - rect.bottom - OFFSET - VIEWPORT_PADDING\n    const spaceAbove = rect.top - OFFSET - VIEWPORT_PADDING\n    // prefer below; flip up only when below can't fit AND above has more room\n    let side: 'top' | 'bottom' = 'bottom'\n    if (panelH > spaceBelow && spaceAbove > spaceBelow) side = 'top'\n\n    const maxHeight = Math.max(0, side === 'bottom' ? spaceBelow : spaceAbove)\n    const usedH = Math.min(panelH, maxHeight)\n    let top = side === 'bottom' ? rect.bottom + OFFSET : rect.top - OFFSET - usedH\n    top = Math.min(\n      Math.max(top, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vh - VIEWPORT_PADDING - usedH),\n    )\n    // clamp using the panel's actual width (a panel can be wider than its trigger, e.g. a calendar);\n    // `width` returns the trigger width for consumers that match it (Select/MultiSelect).\n    const panelW = panel.offsetWidth\n    // `end` pins the panel's right edge to the trigger's right (grows left); `start` pins left (grows right)\n    const baseLeft = align === 'end' ? rect.right - panelW : rect.left\n    const left = Math.min(\n      Math.max(baseLeft, VIEWPORT_PADDING),\n      Math.max(VIEWPORT_PADDING, vw - VIEWPORT_PADDING - panelW),\n    )\n    setPosition({ top, left, width: rect.width, side, maxHeight })\n  }, [triggerRef, align])\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setVisible(false)\n      return\n    }\n    reposition()\n  }, [open, reposition])\n\n  useEffect(() => {\n    if (!open) return\n    const raf = requestAnimationFrame(() => setVisible(true))\n    const onReposition = () => reposition()\n    window.addEventListener('resize', onReposition)\n    window.addEventListener('scroll', onReposition, true)\n    let ro: ResizeObserver | undefined\n    if (typeof ResizeObserver !== 'undefined') {\n      ro = new ResizeObserver(onReposition)\n      if (popoverRef.current) ro.observe(popoverRef.current)\n      if (triggerRef.current) ro.observe(triggerRef.current)\n    }\n    return () => {\n      cancelAnimationFrame(raf)\n      window.removeEventListener('resize', onReposition)\n      window.removeEventListener('scroll', onReposition, true)\n      ro?.disconnect()\n    }\n  }, [open, reposition, triggerRef])\n\n  useEffect(() => {\n    if (!open) return\n    const onPointerDown = (e: PointerEvent) => {\n      const t = e.target as Node\n      if (triggerRef.current?.contains(t) || popoverRef.current?.contains(t)) return\n      // restore focus to the trigger only if it was parked inside the panel (e.g. a search box)\n      onClose(!!popoverRef.current?.contains(document.activeElement))\n    }\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose(true)\n    }\n    document.addEventListener('pointerdown', onPointerDown, true)\n    document.addEventListener('keydown', onKey)\n    return () => {\n      document.removeEventListener('pointerdown', onPointerDown, true)\n      document.removeEventListener('keydown', onKey)\n    }\n  }, [open, onClose, triggerRef])\n\n  return { popoverRef, position, visible, reposition }\n}\n","import {\n  forwardRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type RefObject,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { clsx } from 'clsx'\nimport { useFloatingPanel } from '../../hooks/useFloatingPanel'\nimport styles from './FloatingPanel.module.css'\n\nexport interface FloatingPanelProps {\n  /** Whether the panel is open — gates the portal and drives the enter animation. */\n  open: boolean\n  /** Ref to the anchor/trigger element the panel is positioned against. */\n  triggerRef: RefObject<HTMLElement | null>\n  /** Horizontal alignment to the trigger: `start` (default, grows right) or `end` (grows left). */\n  align?: 'start' | 'end'\n  /** Dismiss request: outside-pointerdown (arg = restore focus to the trigger?) or Escape (`true`). */\n  onClose: (refocus: boolean) => void\n  /** `id` for the panel element — pair with the trigger's `aria-controls`. */\n  id?: string\n  /** ARIA role for the panel element (e.g. `'dialog'`). Omit for a plain wrapper (e.g. around a listbox). */\n  role?: string\n  /** Accessible label, paired with `role`. */\n  ariaLabel?: string\n  /** `id` of the element that labels the panel (instead of `ariaLabel`). */\n  ariaLabelledBy?: string\n  /** `id` of the element that describes the panel. */\n  ariaDescribedBy?: string\n  /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */\n  trapFocus?: boolean\n  /** Constrain the panel to the trigger's width (select-like). */\n  matchTriggerWidth?: boolean\n  /** Fixed panel width (px number or any CSS width). Wins over `matchTriggerWidth`. */\n  width?: number | string\n  /** Class(es) for the panel element, merged after the shared chrome (layout overrides live here). */\n  className?: string\n  /** Inline style merged onto the panel (e.g. a custom CSS var). */\n  style?: CSSProperties\n  /** Panel content. */\n  children: ReactNode\n}\n\n/** Focusable descendants used by the optional focus trap. */\n// include inputs/selects/textareas/links — picker panels (DatePicker/ColorPicker/…) contain text\n// inputs, and a button-only selector let Shift+Tab escape the trap into the scroll-locked page\nconst FOCUSABLE =\n  'a[href]:not([tabindex=\"-1\"]), button:not([tabindex=\"-1\"]):not(:disabled), input:not([tabindex=\"-1\"]):not(:disabled), select:not([tabindex=\"-1\"]):not(:disabled), textarea:not([tabindex=\"-1\"]):not(:disabled), [tabindex=\"0\"]'\n\n/**\n * The shared floating popover used across the library — `Select` / `MultiSelect`, the date/time\n * pickers, `ColorPicker`, and the public `Popover`. Wraps `useFloatingPanel` and renders a `<body>`-portaled, viewport-clamped\n * panel that opens below its trigger (flips above only when it would overflow), locks page scroll while\n * open, animates in (opacity + translate, keyed off `data-open`/`data-side`), and dismisses on\n * outside-pointerdown / `Escape`. Optionally **traps Tab focus** (`trapFocus`, for modal dialogs — also\n * sets `aria-modal`). The forwarded ref points at the panel element, so a consumer can still read it for\n * blur/focus bookkeeping. Internal (not part of the public component surface).\n */\nexport const FloatingPanel = forwardRef<HTMLDivElement, FloatingPanelProps>(function FloatingPanel(\n  {\n    open,\n    triggerRef,\n    align,\n    onClose,\n    id,\n    role,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    trapFocus = false,\n    matchTriggerWidth = false,\n    width,\n    className,\n    style,\n    children,\n  },\n  forwardedRef,\n) {\n  const {\n    popoverRef,\n    position: pos,\n    visible,\n  } = useFloatingPanel({\n    open,\n    triggerRef,\n    align,\n    onClose,\n  })\n\n  // attach the panel node to both the hook's ref (for positioning) and the forwarded ref (for the\n  // consumer's blur/focus bookkeeping)\n  const setRef = (node: HTMLDivElement | null) => {\n    popoverRef.current = node\n    if (typeof forwardedRef === 'function') forwardedRef(node)\n    else if (forwardedRef) forwardedRef.current = node\n  }\n\n  // Escape inside the panel closes THIS panel only — stopped here so it can't bubble (through the React tree,\n  // the panel is portaled) to an enclosing Modal / drawer's Overlay and dismiss that too. Stopping it also\n  // keeps it from the document listener in `useFloatingPanel`, hence the explicit close.\n  const handleEscape = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Escape') return false\n    event.stopPropagation()\n    onClose(true)\n    return true\n  }\n\n  // trap Tab within the dialog so focus can't strand on the scroll-locked page behind it\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (handleEscape(event)) return\n    if (!trapFocus) return\n    if (event.key !== 'Tab') return\n    const panel = popoverRef.current\n    if (!panel) return\n    const focusables = panel.querySelectorAll<HTMLElement>(FOCUSABLE)\n    if (focusables.length === 0) return\n    const first = focusables[0]\n    const last = focusables[focusables.length - 1]\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault()\n      last.focus()\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault()\n      first.focus()\n    }\n  }\n\n  if (!open) return null\n\n  const resolvedWidth = width ?? (matchTriggerWidth ? pos?.width : undefined)\n\n  return createPortal(\n    <div\n      ref={setRef}\n      id={id}\n      className={clsx(styles.panel, className)}\n      role={role}\n      aria-modal={(role === 'dialog' || role === 'alertdialog') && trapFocus ? true : undefined}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-open={visible ? 'true' : 'false'}\n      data-side={pos?.side ?? 'bottom'}\n      onKeyDown={handleKeyDown}\n      style={{\n        position: 'fixed',\n        top: pos?.top ?? 0,\n        left: pos?.left ?? 0,\n        width: resolvedWidth,\n        maxHeight: pos?.maxHeight,\n        visibility: pos ? 'visible' : 'hidden',\n        ...style,\n      }}\n    >\n      {children}\n    </div>,\n    document.body,\n  )\n})\n"],"names":["VIEWPORT_PADDING","OFFSET","useFloatingPanel","open","triggerRef","align","onClose","popoverRef","useRef","position","setPosition","useState","visible","setVisible","useLockBodyScroll","reposition","useCallback","trigger","panel","rect","panelH","vh","vw","spaceBelow","spaceAbove","side","maxHeight","usedH","top","panelW","baseLeft","left","useLayoutEffect","useEffect","raf","onReposition","ro","onPointerDown","t","_a","_b","_c","onKey","FOCUSABLE","FloatingPanel","forwardRef","id","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","trapFocus","matchTriggerWidth","width","className","style","children","forwardedRef","pos","setRef","node","handleEscape","event","handleKeyDown","focusables","first","last","resolvedWidth","createPortal","jsx","clsx","styles"],"mappings":"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"}

package/dist/{FullscreenToggle-CeGgw3z1.cjs → FullscreenToggle-BKo1lDSE.cjs}

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),c=require("react"),F=require("./Icon-BVULqOJD.cjs"),h=require("./IconButton-BNa0yLcv.cjs"),q=require("./ConfigProvider-ByLHqXpv.cjs"),E=c.forwardRef(function({variant:i="outlined",...t},d){const[a]=c.useState(()=>typeof document<"u"&&typeof document.documentElement.requestFullscreen=="function"),[l,f]=c.useState(!1),m=q.useT();if(c.useEffect(()=>{const e=()=>f(document.fullscreenElement!=null);return e(),document.addEventListener("fullscreenchange",e),()=>document.removeEventListener("fullscreenchange",e)},[]),!a)return null;const g=()=>{var e,n,u,o,r;document.fullscreenElement?(n=(e=document.exitFullscreen)==null?void 0:e.call(document))==null||n.catch(()=>{}):(r=(o=(u=document.documentElement).requestFullscreen)==null?void 0:o.call(u))==null||r.catch(()=>{})};return s.jsx(h.IconButton,{ref:d,variant:i,role:"switch","aria-checked":l,"aria-label":m("fullscreenToggle.label"),...t,onClick:e=>{var n;(n=t.onClick)==null||n.call(t,e),g()},children:s.jsx(F.Icon,{name:"Maximize3",style:l?{transform:"rotate(180deg)"}:void 0})})});exports.FullscreenToggle=E;
-//# sourceMappingURL=FullscreenToggle-CeGgw3z1.cjs.map
+"use strict";const s=require("react/jsx-runtime"),c=require("react"),F=require("./Icon-BUP5_kRs.cjs"),h=require("./IconButton-CvIXSFsr.cjs"),q=require("./ConfigProvider-CtpfSy1i.cjs"),E=c.forwardRef(function({variant:i="outlined",...t},d){const[a]=c.useState(()=>typeof document<"u"&&typeof document.documentElement.requestFullscreen=="function"),[l,f]=c.useState(!1),m=q.useT();if(c.useEffect(()=>{const e=()=>f(document.fullscreenElement!=null);return e(),document.addEventListener("fullscreenchange",e),()=>document.removeEventListener("fullscreenchange",e)},[]),!a)return null;const g=()=>{var e,n,u,o,r;document.fullscreenElement?(n=(e=document.exitFullscreen)==null?void 0:e.call(document))==null||n.catch(()=>{}):(r=(o=(u=document.documentElement).requestFullscreen)==null?void 0:o.call(u))==null||r.catch(()=>{})};return s.jsx(h.IconButton,{ref:d,variant:i,role:"switch","aria-checked":l,"aria-label":m("fullscreenToggle.label"),...t,onClick:e=>{var n;(n=t.onClick)==null||n.call(t,e),g()},children:s.jsx(F.Icon,{name:"Maximize3",style:l?{transform:"rotate(180deg)"}:void 0})})});exports.FullscreenToggle=E;
+//# sourceMappingURL=FullscreenToggle-BKo1lDSE.cjs.map

package/dist/{FullscreenToggle-CeGgw3z1.cjs.map → FullscreenToggle-BKo1lDSE.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FullscreenToggle-CeGgw3z1.cjs","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":"wLAgBaA,EAAmBC,EAAAA,WAC9B,SAA0B,CAAE,QAAAC,EAAU,WAAY,GAAGC,CAAA,EAASC,EAAK,CAGjE,KAAM,CAACC,CAAS,EAAIC,EAAAA,SAClB,IACE,OAAO,SAAa,KACpB,OAAO,SAAS,gBAAgB,mBAAsB,UAAA,EAEpD,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAAS,EAAK,EAChDG,EAAIC,EAAAA,KAAA,EASV,GAPAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAMJ,EAAgB,SAAS,mBAAqB,IAAI,EACrE,OAAAI,EAAA,EACA,SAAS,iBAAiB,mBAAoBA,CAAI,EAC3C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAI,CACpE,EAAG,CAAA,CAAE,EAED,CAACP,EAAW,OAAO,KAEvB,MAAMQ,EAAS,IAAM,eAEf,SAAS,mBACXC,GAAAC,EAAA,SAAS,iBAAT,YAAAA,EAAA,uBAAAD,EAA6B,MAAM,IAAM,CAAC,IAE1CE,GAAAC,GAAAC,EAAA,SAAS,iBAAgB,oBAAzB,YAAAD,EAAA,KAAAC,KAAA,MAAAF,EAAgD,MAAM,IAAM,CAAC,EAEjE,EAEA,OACEG,EAAAA,IAACC,EAAAA,WAAA,CACC,IAAAhB,EACA,QAAAF,EACA,KAAK,SACL,eAAcK,EACd,aAAYE,EAAE,wBAAwB,EACrC,GAAGN,EACJ,QAAUkB,GAAU,QAClBN,EAAAZ,EAAM,UAAN,MAAAY,EAAA,KAAAZ,EAAgBkB,GAChBR,EAAA,CACF,EAEA,SAAAM,EAAAA,IAACG,OAAA,CAAK,KAAK,YAAY,MAAOf,EAAe,CAAE,UAAW,gBAAA,EAAqB,MAAA,CAAW,CAAA,CAAA,CAGhG,CACF"}
+{"version":3,"file":"FullscreenToggle-BKo1lDSE.cjs","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":"wLAgBaA,EAAmBC,EAAAA,WAC9B,SAA0B,CAAE,QAAAC,EAAU,WAAY,GAAGC,CAAA,EAASC,EAAK,CAGjE,KAAM,CAACC,CAAS,EAAIC,EAAAA,SAClB,IACE,OAAO,SAAa,KACpB,OAAO,SAAS,gBAAgB,mBAAsB,UAAA,EAEpD,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAAS,EAAK,EAChDG,EAAIC,EAAAA,KAAA,EASV,GAPAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAMJ,EAAgB,SAAS,mBAAqB,IAAI,EACrE,OAAAI,EAAA,EACA,SAAS,iBAAiB,mBAAoBA,CAAI,EAC3C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAI,CACpE,EAAG,CAAA,CAAE,EAED,CAACP,EAAW,OAAO,KAEvB,MAAMQ,EAAS,IAAM,eAEf,SAAS,mBACXC,GAAAC,EAAA,SAAS,iBAAT,YAAAA,EAAA,uBAAAD,EAA6B,MAAM,IAAM,CAAC,IAE1CE,GAAAC,GAAAC,EAAA,SAAS,iBAAgB,oBAAzB,YAAAD,EAAA,KAAAC,KAAA,MAAAF,EAAgD,MAAM,IAAM,CAAC,EAEjE,EAEA,OACEG,EAAAA,IAACC,EAAAA,WAAA,CACC,IAAAhB,EACA,QAAAF,EACA,KAAK,SACL,eAAcK,EACd,aAAYE,EAAE,wBAAwB,EACrC,GAAGN,EACJ,QAAUkB,GAAU,QAClBN,EAAAZ,EAAM,UAAN,MAAAY,EAAA,KAAAZ,EAAgBkB,GAChBR,EAAA,CACF,EAEA,SAAAM,EAAAA,IAACG,OAAA,CAAK,KAAK,YAAY,MAAOf,EAAe,CAAE,UAAW,gBAAA,EAAqB,MAAA,CAAW,CAAA,CAAA,CAGhG,CACF"}

package/dist/{FullscreenToggle-2IYIS5KF.js → FullscreenToggle-DmH1541W.js}

@@ -1,8 +1,8 @@
 import { jsx as u } from "react/jsx-runtime";
 import { forwardRef as F, useState as s, useEffect as h } from "react";
-import { I as E } from "./Icon-DaTvzLBu.js";
-import { I } from "./IconButton-GU3Ud4Zg.js";
-import { a as v } from "./ConfigProvider-BbsI15b-.js";
+import { I as E } from "./Icon-CGQ5yGSZ.js";
+import { I } from "./IconButton-CL_6iMQh.js";
+import { a as v } from "./ConfigProvider-Ct0Pe3Ku.js";
 const w = F(
   function({ variant: m = "outlined", ...t }, i) {
     const [a] = s(
@@ -39,4 +39,4 @@ const w = F(
 export {
   w as F
 };
-//# sourceMappingURL=FullscreenToggle-2IYIS5KF.js.map
+//# sourceMappingURL=FullscreenToggle-DmH1541W.js.map

package/dist/{FullscreenToggle-2IYIS5KF.js.map → FullscreenToggle-DmH1541W.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FullscreenToggle-2IYIS5KF.js","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":";;;;;AAgBO,MAAMA,IAAmBC;AAAA,EAC9B,SAA0B,EAAE,SAAAC,IAAU,YAAY,GAAGC,EAAA,GAASC,GAAK;AAGjE,UAAM,CAACC,CAAS,IAAIC;AAAA,MAClB,MACE,OAAO,WAAa,OACpB,OAAO,SAAS,gBAAgB,qBAAsB;AAAA,IAAA,GAEpD,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAK,GAChDG,IAAIC,EAAA;AASV,QAPAC,EAAU,MAAM;AACd,YAAMC,IAAO,MAAMJ,EAAgB,SAAS,qBAAqB,IAAI;AACrE,aAAAI,EAAA,GACA,SAAS,iBAAiB,oBAAoBA,CAAI,GAC3C,MAAM,SAAS,oBAAoB,oBAAoBA,CAAI;AAAA,IACpE,GAAG,CAAA,CAAE,GAED,CAACP,EAAW,QAAO;AAEvB,UAAMQ,IAAS,MAAM;;AAEnB,MAAI,SAAS,qBACXC,KAAAC,IAAA,SAAS,mBAAT,gBAAAA,EAAA,2BAAAD,EAA6B,MAAM,MAAM;AAAA,MAAC,MAE1CE,KAAAC,KAAAC,IAAA,SAAS,iBAAgB,sBAAzB,gBAAAD,EAAA,KAAAC,OAAA,QAAAF,EAAgD,MAAM,MAAM;AAAA,MAAC;AAAA,IAEjE;AAEA,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,SAAAF;AAAA,QACA,MAAK;AAAA,QACL,gBAAcK;AAAA,QACd,cAAYE,EAAE,wBAAwB;AAAA,QACrC,GAAGN;AAAA,QACJ,SAAS,CAACkB,MAAU;;AAClB,WAAAN,IAAAZ,EAAM,YAAN,QAAAY,EAAA,KAAAZ,GAAgBkB,IAChBR,EAAA;AAAA,QACF;AAAA,QAEA,UAAA,gBAAAM,EAACG,GAAA,EAAK,MAAK,aAAY,OAAOf,IAAe,EAAE,WAAW,iBAAA,IAAqB,OAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhG;AACF;"}
+{"version":3,"file":"FullscreenToggle-DmH1541W.js","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":";;;;;AAgBO,MAAMA,IAAmBC;AAAA,EAC9B,SAA0B,EAAE,SAAAC,IAAU,YAAY,GAAGC,EAAA,GAASC,GAAK;AAGjE,UAAM,CAACC,CAAS,IAAIC;AAAA,MAClB,MACE,OAAO,WAAa,OACpB,OAAO,SAAS,gBAAgB,qBAAsB;AAAA,IAAA,GAEpD,CAACC,GAAcC,CAAe,IAAIF,EAAS,EAAK,GAChDG,IAAIC,EAAA;AASV,QAPAC,EAAU,MAAM;AACd,YAAMC,IAAO,MAAMJ,EAAgB,SAAS,qBAAqB,IAAI;AACrE,aAAAI,EAAA,GACA,SAAS,iBAAiB,oBAAoBA,CAAI,GAC3C,MAAM,SAAS,oBAAoB,oBAAoBA,CAAI;AAAA,IACpE,GAAG,CAAA,CAAE,GAED,CAACP,EAAW,QAAO;AAEvB,UAAMQ,IAAS,MAAM;;AAEnB,MAAI,SAAS,qBACXC,KAAAC,IAAA,SAAS,mBAAT,gBAAAA,EAAA,2BAAAD,EAA6B,MAAM,MAAM;AAAA,MAAC,MAE1CE,KAAAC,KAAAC,IAAA,SAAS,iBAAgB,sBAAzB,gBAAAD,EAAA,KAAAC,OAAA,QAAAF,EAAgD,MAAM,MAAM;AAAA,MAAC;AAAA,IAEjE;AAEA,WACE,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAAhB;AAAA,QACA,SAAAF;AAAA,QACA,MAAK;AAAA,QACL,gBAAcK;AAAA,QACd,cAAYE,EAAE,wBAAwB;AAAA,QACrC,GAAGN;AAAA,QACJ,SAAS,CAACkB,MAAU;;AAClB,WAAAN,IAAAZ,EAAM,YAAN,QAAAY,EAAA,KAAAZ,GAAgBkB,IAChBR,EAAA;AAAA,QACF;AAAA,QAEA,UAAA,gBAAAM,EAACG,GAAA,EAAK,MAAK,aAAY,OAAOf,IAAe,EAAE,WAAW,iBAAA,IAAqB,OAAA,CAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhG;AACF;"}