@acronis-platform/ui-react 0.57.0 → 0.57.1

package/dist/components/ui/toolbar/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sources":["../../../../src/components/ui/toolbar/toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '../button';\nimport { ButtonMenu } from '../button-menu';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\n// Mirrors the Figma \"Toolbar\" component (node 3897:7199): a horizontal action\n// row — list actions, an optional overflow control (e.g. a `ButtonMenu`), and\n// an optional trailing area (`ToolbarActions`: a status text or a selection\n// counter + action) — typically shown above/below a list or table when rows\n// are selected or bulk actions are available. Every action is an existing\n// `Button`/`ButtonMenu` instance in Figma, so this component only lays them\n// out and carries no dedicated `--ui-toolbar-*` token tier; the 16px\n// inter-item gap is the Figma `gap/gap-16` semantic token, left un-tokenized —\n// same precedent as `FilterSearch`'s identical gap.\n//\n// The Figma `state: active | disabled` variant is the native `disabled`\n// attribute here: the root renders as a `<fieldset>` (reset to look like a\n// flex row) so every nested `Button`/`ButtonMenu` disables via the platform's\n// own fieldset-disables-descendants behavior — no prop-drilling into\n// arbitrary children required.\n//\n// `min-w-0` is required, not cosmetic: browsers give `<fieldset>` an\n// intrinsic `min-width: min-content` that Tailwind's reset doesn't touch, so\n// without it the fieldset refuses to shrink below its content's natural\n// width. `ToolbarActionList`'s collapse math reads this fieldset's own\n// `clientWidth` as \"available space\" — without `min-w-0` the fieldset\n// balloons to fit every action before that measurement ever runs, so it\n// always measures \"everything fits\" and the row never collapses.\n\nexport type ToolbarProps = React.ComponentPropsWithoutRef<'fieldset'>;\n\nconst Toolbar = React.forwardRef<HTMLFieldSetElement, ToolbarProps>(\n  ({ className, ...props }, ref) => (\n    <fieldset\n      ref={ref}\n      className={cn(\n        'm-0 flex min-w-0 items-center gap-4 border-0 p-0',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nToolbar.displayName = 'Toolbar';\n\n// Trailing, right-aligned area — a status text (e.g. \"25 of 1250 items\n// loaded\") or a selection counter + action (e.g. \"6 items selected: Deselect\").\n// 8px inter-child gap matches the Figma Counter part's own gap. `whitespace-nowrap`\n// is required, not cosmetic: the Figma \"Counter\" part is always single-line, but a\n// plain-text child (e.g. a `<span>`) defaults to `white-space: normal` — without\n// this, the text wraps mid-phrase once the row shrinks below its content's natural\n// width (`white-space` is inherited, so it cascades to children without them\n// needing their own override).\n//\n// `grow shrink-0` (not `flex-1`, which also shrinks): this area must grow to fill\n// leftover space so `justify-end` can right-align it, but must never shrink below\n// its own content's natural width. `ToolbarActionList`'s auto-collapse math reads\n// this element's *rendered* width as the space it needs to reserve — if it could\n// shrink, that measurement would be a moving target (less room reserved than the\n// content actually needs), so the actions row would under-collapse and this area's\n// (nowrap, unshrinkable) content would overflow past its own box instead.\nexport type ToolbarActionsProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst ToolbarActions = React.forwardRef<HTMLDivElement, ToolbarActionsProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex grow shrink-0 items-center justify-end gap-2 whitespace-nowrap',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nToolbarActions.displayName = 'ToolbarActions';\n\n// Matches the `gap-4` utility used on both this component's row and\n// Toolbar's own root — keep in sync if either class changes.\nconst ACTION_LIST_GAP_PX = 16;\n\n// Pure so the collapse math is unit-testable without mocking layout/ResizeObserver.\n// Greedily fits as many leading items as possible into `availableWidth`; the\n// instant not everything fits, reserves `moreWidth` (+ one gap) for the\n// overflow trigger before fitting items.\nexport function computeVisibleActionCount(\n  itemWidths: number[],\n  moreWidth: number,\n  gap: number,\n  availableWidth: number\n): number {\n  const total = itemWidths.length;\n  if (total === 0) return 0;\n\n  const fullWidth =\n    itemWidths.reduce((sum, width) => sum + width, 0) + gap * (total - 1);\n  if (fullWidth <= availableWidth) return total;\n\n  let used = moreWidth;\n  let count = 0;\n  for (let i = 0; i < total; i++) {\n    const next = used + itemWidths[i] + gap;\n    if (next > availableWidth) break;\n    used = next;\n    count++;\n  }\n  return count;\n}\n\n// A grown sibling's own `getBoundingClientRect()` reflects its flex-grown\n// box, not the space its content actually needs — reading that would make\n// `measure()`'s \"available space\" calculation self-referential (see below),\n// so this reads the sibling's *content nodes* instead: normal (non-growing)\n// flex children report their natural width regardless of how large the\n// parent's box has grown to fill leftover row space. Bare text (e.g.\n// `<ToolbarActions>25 selected</ToolbarActions>` with no wrapping element)\n// renders as a `Text` node rather than an `Element`, so `children` alone\n// would miss it and fall through to the self-referential branch this\n// function exists to avoid — a `Range` measures that text's own rendered\n// width the same way `getBoundingClientRect()` does for an element.\n//\n// The sibling's own padding/border don't grow with flex-grow (only the free\n// space between content and box edge does), so they're safe to add back on\n// top of the content sum — unlike the box's own `getBoundingClientRect()`,\n// which is self-referential.\n//\n// Exported (like `computeVisibleActionCount`) so this is unit-testable\n// without mocking layout/ResizeObserver.\nexport function measureNaturalWidth(el: Element): number {\n  const nodes = Array.from(el.childNodes).filter(\n    (node): node is ChildNode =>\n      node.nodeType === Node.ELEMENT_NODE ||\n      (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim())\n  );\n  if (nodes.length === 0) return el.getBoundingClientRect().width;\n\n  const style = getComputedStyle(el);\n  const gap = parseFloat(style.columnGap) || 0;\n  const ownPaddingAndBorder =\n    (parseFloat(style.paddingLeft) || 0) +\n    (parseFloat(style.paddingRight) || 0) +\n    (parseFloat(style.borderLeftWidth) || 0) +\n    (parseFloat(style.borderRightWidth) || 0);\n  const widths = nodes.map((node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      const range = document.createRange();\n      range.selectNodeContents(node);\n      return range.getBoundingClientRect().width;\n    }\n    return (node as Element).getBoundingClientRect().width;\n  });\n\n  return (\n    widths.reduce((sum, width) => sum + width, 0) +\n    gap * (nodes.length - 1) +\n    ownPaddingAndBorder\n  );\n}\n\nfunction mergeRefs<T>(\n  ...refs: Array<React.Ref<T> | undefined>\n): React.RefCallback<T> {\n  return (node) => {\n    for (const ref of refs) {\n      if (!ref) continue;\n      if (typeof ref === 'function') ref(node);\n      else (ref as React.RefObject<T | null>).current = node;\n    }\n  };\n}\n\nexport interface ToolbarActionListItem {\n  /** Stable identity — used as the React key in both the row and the overflow menu. */\n  key: string;\n  /** Rendered as the visible ghost Button's label, and the overflow menu item's label. */\n  label: React.ReactNode;\n  onSelect?: () => void;\n  disabled?: boolean;\n}\n\nexport interface ToolbarActionListProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Ordered list of actions; trailing ones collapse into \"More actions\" first. */\n  actions: ToolbarActionListItem[];\n  /** Label for the overflow trigger. */\n  moreActionsLabel?: React.ReactNode;\n}\n\n// Mirrors the Figma \"ListActions\" part, but drives its `hasMoreActions`\n// overflow menu from measured available width instead of a static boolean —\n// the breakpoints spec (node 6262:28276) requires that \"if there is no space\n// for all Toolbar actions, then last actions must be hidden under More\n// actions.\" Renders every action as a ghost Button until they no longer fit\n// the row, then moves the trailing ones into a ButtonMenu + DropdownMenu\n// (same trigger Figma's `hasMoreActions` variant shows). An invisible clone\n// of every action + the trigger is kept mounted purely to measure natural\n// widths, since a hidden item can't report its own size.\n//\n// The root and each visible action/trigger are Base UI's `Toolbar.Root`/\n// `Toolbar.Button` (`@base-ui/react/toolbar`), giving the row the WAI-ARIA\n// toolbar pattern for free: one Tab stop, arrow-key roving-tabindex between\n// actions and into the overflow trigger. Base UI's `Toolbar.Root` does not\n// forward `enableHomeAndEndKeys` to its underlying composite, so Home/End\n// are not supported here — this is a Base UI limitation, not a choice made\n// in this component. `Toolbar.Button` composes\n// via `render` the same way `DropdownMenuTrigger`/`ButtonMenu` already do\n// below — it merges its own composite/keydown/disabled props onto whatever\n// element you pass. `focusableWhenDisabled={!action.disabled}` opts a\n// disabled action out of Base UI's default APG toolbar treatment (disabled\n// items normally stay focusable via `aria-disabled`, skippable with Tab) so\n// it matches every other disabled `Button` in this library: a real native\n// `disabled` button, unreachable via Tab or arrow keys. This MUST stay\n// conditional on `action.disabled` — `Toolbar.Root` builds its\n// `disabledIndices` list from `focusableWhenDisabled` alone, regardless of\n// the item's actual disabled state, so passing a bare `false` here disables\n// every index and silently breaks arrow-key navigation for the whole row.\n//\n// The invisible measurement clones stay plain `Button`/`ButtonMenu` (not\n// `Toolbar.Button`): registering them too would double-count hidden items in\n// the roving-tabindex list. This is scoped to the action list only —\n// `Toolbar`'s own `<fieldset>` disabled-cascade (see above) is\n// intentionally untouched; Base UI's `Fieldset.Root` strips the native\n// `disabled` attribute in favor of a context other Base UI Field-aware\n// components consume, which `Button`/`ButtonMenu` don't, so it would silently\n// break the \"disabling the toolbar disables every nested control\" guarantee.\nconst ToolbarActionList = React.forwardRef<\n  HTMLDivElement,\n  ToolbarActionListProps\n>(\n  (\n    { className, actions, moreActionsLabel = 'More actions', ...props },\n    forwardedRef\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const itemRefs = React.useRef<Map<string, HTMLButtonElement | null>>(\n      new Map()\n    );\n    const moreRef = React.useRef<HTMLButtonElement>(null);\n    const [visibleCount, setVisibleCount] = React.useState(actions.length);\n    const [moreMenuOpen, setMoreMenuOpen] = React.useState(false);\n    // The overflow menu renders in a portal, outside the ancestor\n    // `<fieldset>`'s DOM subtree, so the native disabled-cascade (see\n    // `Toolbar` above) never reaches its items. Tracked separately here so a\n    // menu already open when the fieldset becomes disabled gets closed, and\n    // its items stay disabled even if forced open again (e.g. via a ref).\n    const [ancestorDisabled, setAncestorDisabled] = React.useState(false);\n\n    React.useEffect(() => {\n      const fieldset = containerRef.current?.closest('fieldset');\n      if (!fieldset) return;\n      const sync = () => setAncestorDisabled(fieldset.disabled);\n      sync();\n      const observer = new MutationObserver(sync);\n      observer.observe(fieldset, {\n        attributes: true,\n        attributeFilter: ['disabled'],\n      });\n      return () => observer.disconnect();\n    }, []);\n\n    React.useEffect(() => {\n      if (ancestorDisabled) setMoreMenuOpen(false);\n    }, [ancestorDisabled]);\n\n    const measure = React.useCallback(() => {\n      const container = containerRef.current;\n      const parent = container?.parentElement;\n      if (!container || !parent) return;\n\n      const siblingsWidth = Array.from(parent.children)\n        .filter((child) => child !== container)\n        .reduce((sum, el) => sum + measureNaturalWidth(el), 0);\n      const gapCount = Math.max(parent.children.length - 1, 0);\n      const available =\n        parent.clientWidth - siblingsWidth - ACTION_LIST_GAP_PX * gapCount;\n\n      // Keyed by `action.key`, not index — an index-keyed array would keep\n      // stale entries (and a stale length) when `actions` shrinks, since\n      // React only nulls out the removed clones' refs without truncating it.\n      const itemWidths = actions.map(\n        (action) =>\n          itemRefs.current.get(action.key)?.getBoundingClientRect().width ?? 0\n      );\n      const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 0;\n\n      setVisibleCount(\n        computeVisibleActionCount(\n          itemWidths,\n          moreWidth,\n          ACTION_LIST_GAP_PX,\n          available\n        )\n      );\n    }, [actions]);\n\n    React.useLayoutEffect(() => {\n      measure();\n      const parent = containerRef.current?.parentElement;\n      if (!parent) return;\n      const observer = new ResizeObserver(measure);\n      observer.observe(parent);\n      // A sibling like `ToolbarActions` is `shrink-0`, so its own border-box\n      // grows with its content (e.g. a \"6 items selected\" counter ticking\n      // up) even while `parent`'s box stays fixed — a ResizeObserver bound\n      // only to `parent` never fires for that case, so `measure()` goes\n      // stale and the row silently overflows instead of collapsing further.\n      // Observing every sibling directly catches that box-size change too.\n      Array.from(parent.children).forEach((sibling) => {\n        if (sibling !== containerRef.current) observer.observe(sibling);\n      });\n      return () => observer.disconnect();\n    }, [measure, actions]);\n\n    const visibleActions = actions.slice(0, visibleCount);\n    const hiddenActions = actions.slice(visibleCount);\n\n    return (\n      <ToolbarPrimitive.Root\n        ref={mergeRefs(containerRef, forwardedRef)}\n        className={cn(\n          // `overflow-hidden` clips the invisible measurement clone below —\n          // it's `position: absolute` + `visibility: hidden`, which keeps\n          // contributing to this element's scrollable overflow (and thus a\n          // real horizontal scrollbar on a narrow container/page) unless\n          // something in the ancestor chain clips it. Visible content is\n          // already sized to fit `availableWidth` by the collapse math, so\n          // clipping never affects anything actually shown.\n          'relative flex min-w-0 flex-nowrap items-center gap-4 overflow-hidden',\n          className\n        )}\n        {...props}\n      >\n        {visibleActions.map((action) => (\n          <ToolbarPrimitive.Button\n            key={action.key}\n            disabled={action.disabled}\n            focusableWhenDisabled={!action.disabled}\n            onClick={action.onSelect}\n            render={<Button variant=\"ghost\">{action.label}</Button>}\n          />\n        ))}\n        {hiddenActions.length > 0 && (\n          <DropdownMenu\n            open={moreMenuOpen}\n            onOpenChange={setMoreMenuOpen}\n            disabled={ancestorDisabled}\n          >\n            <ToolbarPrimitive.Button\n              render={\n                <DropdownMenuTrigger\n                  render={\n                    <ButtonMenu variant=\"secondary\">\n                      {moreActionsLabel}\n                    </ButtonMenu>\n                  }\n                />\n              }\n            />\n            <DropdownMenuContent align=\"start\">\n              {hiddenActions.map((action) => (\n                <DropdownMenuItem\n                  key={action.key}\n                  disabled={action.disabled || ancestorDisabled}\n                  onClick={action.onSelect}\n                >\n                  {action.label}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n        <div\n          aria-hidden\n          inert\n          className=\"pointer-events-none invisible absolute start-0 top-0 flex items-center gap-4\"\n        >\n          {actions.map((action) => (\n            <Button\n              key={action.key}\n              ref={(el) => {\n                itemRefs.current.set(action.key, el);\n              }}\n              variant=\"ghost\"\n              tabIndex={-1}\n            >\n              {action.label}\n            </Button>\n          ))}\n          <ButtonMenu ref={moreRef} variant=\"secondary\" tabIndex={-1}>\n            {moreActionsLabel}\n          </ButtonMenu>\n        </div>\n      </ToolbarPrimitive.Root>\n    );\n  }\n);\nToolbarActionList.displayName = 'ToolbarActionList';\n\nexport { Toolbar, ToolbarActions, ToolbarActionList };\n"],"names":["Toolbar","React","className","props","ref","jsx","cn","ToolbarActions","ACTION_LIST_GAP_PX","computeVisibleActionCount","itemWidths","moreWidth","gap","availableWidth","total","sum","width","used","count","i","next","measureNaturalWidth","el","nodes","node","_a","style","ownPaddingAndBorder","range","mergeRefs","refs","ToolbarActionList","actions","moreActionsLabel","forwardedRef","containerRef","itemRefs","moreRef","visibleCount","setVisibleCount","moreMenuOpen","setMoreMenuOpen","ancestorDisabled","setAncestorDisabled","fieldset","sync","observer","measure","container","parent","siblingsWidth","child","gapCount","available","action","sibling","visibleActions","hiddenActions","jsxs","ToolbarPrimitive","Button","DropdownMenu","DropdownMenuTrigger","ButtonMenu","DropdownMenuContent","DropdownMenuItem"],"mappings":";;;;;;;AAuCA,MAAMA,IAAUC,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAQ,cAAc;AAoBtB,MAAMO,IAAiBN,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAI,EAAe,cAAc;AAI7B,MAAMC,IAAqB;AAMpB,SAASC,EACdC,GACAC,GACAC,GACAC,GACQ;AACR,QAAMC,IAAQJ,EAAW;AACzB,MAAII,MAAU,EAAG,QAAO;AAIxB,MADEJ,EAAW,OAAO,CAACK,GAAKC,MAAUD,IAAMC,GAAO,CAAC,IAAIJ,KAAOE,IAAQ,MACpDD,EAAgB,QAAOC;AAExC,MAAIG,IAAON,GACPO,IAAQ;AACZ,WAASC,IAAI,GAAGA,IAAIL,GAAOK,KAAK;AAC9B,UAAMC,IAAOH,IAAOP,EAAWS,CAAC,IAAIP;AACpC,QAAIQ,IAAOP,EAAgB;AAC3B,IAAAI,IAAOG,GACPF;AAAA,EACF;AACA,SAAOA;AACT;AAqBO,SAASG,EAAoBC,GAAqB;AACvD,QAAMC,IAAQ,MAAM,KAAKD,EAAG,UAAU,EAAE;AAAA,IACtC,CAACE,MAAA;;AACC,aAAAA,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,aAAa,CAAC,GAACC,IAAAD,EAAK,gBAAL,QAAAC,EAAkB;AAAA;AAAA,EAAK;AAElE,MAAIF,EAAM,WAAW,EAAG,QAAOD,EAAG,wBAAwB;AAE1D,QAAMI,IAAQ,iBAAiBJ,CAAE,GAC3BV,IAAM,WAAWc,EAAM,SAAS,KAAK,GACrCC,KACH,WAAWD,EAAM,WAAW,KAAK,MACjC,WAAWA,EAAM,YAAY,KAAK,MAClC,WAAWA,EAAM,eAAe,KAAK,MACrC,WAAWA,EAAM,gBAAgB,KAAK;AAUzC,SATeH,EAAM,IAAI,CAACC,MAAS;AACjC,QAAIA,EAAK,aAAa,KAAK,WAAW;AACpC,YAAMI,IAAQ,SAAS,YAAA;AACvB,aAAAA,EAAM,mBAAmBJ,CAAI,GACtBI,EAAM,wBAAwB;AAAA,IACvC;AACA,WAAQJ,EAAiB,wBAAwB;AAAA,EACnD,CAAC,EAGQ,OAAO,CAACT,GAAKC,MAAUD,IAAMC,GAAO,CAAC,IAC5CJ,KAAOW,EAAM,SAAS,KACtBI;AAEJ;AAEA,SAASE,KACJC,GACmB;AACtB,SAAO,CAACN,MAAS;AACf,eAAWpB,KAAO0B;AAChB,MAAK1B,MACD,OAAOA,KAAQ,aAAYA,EAAIoB,CAAI,IACjCpB,EAAkC,UAAUoB;AAAA,EAEtD;AACF;AAwDA,MAAMO,IAAoB9B,EAAM;AAAA,EAI9B,CACE,EAAE,WAAAC,GAAW,SAAA8B,GAAS,kBAAAC,IAAmB,gBAAgB,GAAG9B,EAAA,GAC5D+B,MACG;AACH,UAAMC,IAAelC,EAAM,OAAuB,IAAI,GAChDmC,IAAWnC,EAAM;AAAA,0BACjB,IAAA;AAAA,IAAI,GAEJoC,IAAUpC,EAAM,OAA0B,IAAI,GAC9C,CAACqC,GAAcC,CAAe,IAAItC,EAAM,SAAS+B,EAAQ,MAAM,GAC/D,CAACQ,GAAcC,CAAe,IAAIxC,EAAM,SAAS,EAAK,GAMtD,CAACyC,GAAkBC,CAAmB,IAAI1C,EAAM,SAAS,EAAK;AAEpE,IAAAA,EAAM,UAAU,MAAM;;AACpB,YAAM2C,KAAWnB,IAAAU,EAAa,YAAb,gBAAAV,EAAsB,QAAQ;AAC/C,UAAI,CAACmB,EAAU;AACf,YAAMC,IAAO,MAAMF,EAAoBC,EAAS,QAAQ;AACxD,MAAAC,EAAA;AACA,YAAMC,IAAW,IAAI,iBAAiBD,CAAI;AAC1C,aAAAC,EAAS,QAAQF,GAAU;AAAA,QACzB,YAAY;AAAA,QACZ,iBAAiB,CAAC,UAAU;AAAA,MAAA,CAC7B,GACM,MAAME,EAAS,WAAA;AAAA,IACxB,GAAG,CAAA,CAAE,GAEL7C,EAAM,UAAU,MAAM;AACpB,MAAIyC,OAAkC,EAAK;AAAA,IAC7C,GAAG,CAACA,CAAgB,CAAC;AAErB,UAAMK,IAAU9C,EAAM,YAAY,MAAM;;AACtC,YAAM+C,IAAYb,EAAa,SACzBc,IAASD,KAAA,gBAAAA,EAAW;AAC1B,UAAI,CAACA,KAAa,CAACC,EAAQ;AAE3B,YAAMC,IAAgB,MAAM,KAAKD,EAAO,QAAQ,EAC7C,OAAO,CAACE,MAAUA,MAAUH,CAAS,EACrC,OAAO,CAACjC,GAAKO,MAAOP,IAAMM,EAAoBC,CAAE,GAAG,CAAC,GACjD8B,IAAW,KAAK,IAAIH,EAAO,SAAS,SAAS,GAAG,CAAC,GACjDI,IACJJ,EAAO,cAAcC,IAAgB1C,IAAqB4C,GAKtD1C,IAAasB,EAAQ;AAAA,QACzB,CAACsB,MAAA;;AACC,mBAAA7B,IAAAW,EAAS,QAAQ,IAAIkB,EAAO,GAAG,MAA/B,gBAAA7B,EAAkC,wBAAwB,UAAS;AAAA;AAAA,MAAA,GAEjEd,MAAYc,IAAAY,EAAQ,YAAR,gBAAAZ,EAAiB,wBAAwB,UAAS;AAEpE,MAAAc;AAAA,QACE9B;AAAA,UACEC;AAAA,UACAC;AAAA,UACAH;AAAA,UACA6C;AAAA,QAAA;AAAA,MACF;AAAA,IAEJ,GAAG,CAACrB,CAAO,CAAC;AAEZ,IAAA/B,EAAM,gBAAgB,MAAM;;AAC1B,MAAA8C,EAAA;AACA,YAAME,KAASxB,IAAAU,EAAa,YAAb,gBAAAV,EAAsB;AACrC,UAAI,CAACwB,EAAQ;AACb,YAAMH,IAAW,IAAI,eAAeC,CAAO;AAC3C,aAAAD,EAAS,QAAQG,CAAM,GAOvB,MAAM,KAAKA,EAAO,QAAQ,EAAE,QAAQ,CAACM,MAAY;AAC/C,QAAIA,MAAYpB,EAAa,WAASW,EAAS,QAAQS,CAAO;AAAA,MAChE,CAAC,GACM,MAAMT,EAAS,WAAA;AAAA,IACxB,GAAG,CAACC,GAASf,CAAO,CAAC;AAErB,UAAMwB,IAAiBxB,EAAQ,MAAM,GAAGM,CAAY,GAC9CmB,IAAgBzB,EAAQ,MAAMM,CAAY;AAEhD,WACE,gBAAAoB;AAAA,MAACC,EAAiB;AAAA,MAAjB;AAAA,QACC,KAAK9B,EAAUM,GAAcD,CAAY;AAAA,QACzC,WAAW5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQT;AAAA,UACAJ;AAAA,QAAA;AAAA,QAED,GAAGC;AAAA,QAEH,UAAA;AAAA,UAAAqD,EAAe,IAAI,CAACF,MACnB,gBAAAjD;AAAA,YAACsD,EAAiB;AAAA,YAAjB;AAAA,cAEC,UAAUL,EAAO;AAAA,cACjB,uBAAuB,CAACA,EAAO;AAAA,cAC/B,SAASA,EAAO;AAAA,cAChB,QAAQ,gBAAAjD,EAACuD,GAAA,EAAO,SAAQ,SAAS,YAAO,MAAA,CAAM;AAAA,YAAA;AAAA,YAJzCN,EAAO;AAAA,UAAA,CAMf;AAAA,UACAG,EAAc,SAAS,KACtB,gBAAAC;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,MAAMrB;AAAA,cACN,cAAcC;AAAA,cACd,UAAUC;AAAA,cAEV,UAAA;AAAA,gBAAA,gBAAArC;AAAA,kBAACsD,EAAiB;AAAA,kBAAjB;AAAA,oBACC,QACE,gBAAAtD;AAAA,sBAACyD;AAAA,sBAAA;AAAA,wBACC,QACE,gBAAAzD,EAAC0D,GAAA,EAAW,SAAQ,aACjB,UAAA9B,EAAA,CACH;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAEJ;AAAA,gBAAA;AAAA,kCAGH+B,GAAA,EAAoB,OAAM,SACxB,UAAAP,EAAc,IAAI,CAACH,MAClB,gBAAAjD;AAAA,kBAAC4D;AAAA,kBAAA;AAAA,oBAEC,UAAUX,EAAO,YAAYZ;AAAA,oBAC7B,SAASY,EAAO;AAAA,oBAEf,UAAAA,EAAO;AAAA,kBAAA;AAAA,kBAJHA,EAAO;AAAA,gBAAA,CAMf,EAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,gBAAAI;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,OAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAA;AAAA,gBAAA1B,EAAQ,IAAI,CAACsB,MACZ,gBAAAjD;AAAA,kBAACuD;AAAA,kBAAA;AAAA,oBAEC,KAAK,CAACtC,MAAO;AACX,sBAAAc,EAAS,QAAQ,IAAIkB,EAAO,KAAKhC,CAAE;AAAA,oBACrC;AAAA,oBACA,SAAQ;AAAA,oBACR,UAAU;AAAA,oBAET,UAAAgC,EAAO;AAAA,kBAAA;AAAA,kBAPHA,EAAO;AAAA,gBAAA,CASf;AAAA,gBACD,gBAAAjD,EAAC0D,KAAW,KAAK1B,GAAS,SAAQ,aAAY,UAAU,IACrD,UAAAJ,EAAA,CACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACAF,EAAkB,cAAc;"}

package/dist/components/ui/tooltip/tooltip.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as u from "react";
+import { Tooltip as o } from "@base-ui/react/tooltip";
+import { cn as v } from "../../../lib/utils.js";
+import { usePortalContainer as x } from "../../../lib/portal-container.js";
+function C(i) {
+  return /* @__PURE__ */ t(o.Provider, { delay: 300, ...i });
+}
+const h = o.Root, y = o.Trigger, f = u.forwardRef(
+  ({
+    className: i,
+    sideOffset: r = 6,
+    side: n = "top",
+    align: e = "center",
+    anchor: a,
+    portalContainer: l,
+    keepMounted: p,
+    ...c
+  }, d) => {
+    const m = x(), s = l ?? m;
+    return /* @__PURE__ */ t(
+      o.Portal,
+      {
+        container: s,
+        keepMounted: p,
+        children: /* @__PURE__ */ t(
+          o.Positioner,
+          {
+            sideOffset: r,
+            side: n,
+            align: e,
+            anchor: a,
+            className: "z-50",
+            children: /* @__PURE__ */ t(
+              o.Popup,
+              {
+                ref: d,
+                className: v(
+                  "max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]",
+                  i
+                ),
+                ...c
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+f.displayName = "TooltipContent";
+export {
+  h as Tooltip,
+  f as TooltipContent,
+  C as TooltipProvider,
+  y as TooltipTrigger
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/ui/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A contextual hint shown on hover/focus of its trigger. Wraps the Base UI\n// Tooltip primitive; the popup is themed with the `--ui-tooltip-*` token tier\n// (a dark, ~90%-opaque bubble with a light label, 12/8px padding, 4px radius,\n// 48–256px width). No arrow — matching the Figma design. Wrap the whole app (or\n// a region) in `TooltipProvider` to share open/close delays across tooltips.\n\nfunction TooltipProvider(props: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return <TooltipPrimitive.Provider delay={300} {...props} />;\n}\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Popup> & {\n    sideOffset?: number;\n    side?: TooltipPrimitive.Positioner.Props['side'];\n    align?: TooltipPrimitive.Positioner.Props['align'];\n    /**\n     * Override what the popup is positioned against — defaults to the\n     * `TooltipTrigger` element. Useful when the hover/focus trigger is\n     * narrower than the element the tooltip should visually align to (e.g. a\n     * truncating label inside a full-width row, where the tooltip should\n     * anchor to the row's edge, not the label's).\n     */\n    anchor?: TooltipPrimitive.Positioner.Props['anchor'];\n    portalContainer?: TooltipPrimitive.Portal.Props['container'];\n    keepMounted?: TooltipPrimitive.Portal.Props['keepMounted'];\n  }\n>(\n  (\n    {\n      className,\n      sideOffset = 6,\n      side = 'top',\n      align = 'center',\n      anchor,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <TooltipPrimitive.Portal\n      container={resolvedContainer}\n      keepMounted={keepMounted}\n    >\n      <TooltipPrimitive.Positioner\n        sideOffset={sideOffset}\n        side={side}\n        align={align}\n        anchor={anchor}\n        className=\"z-50\"\n      >\n        <TooltipPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]',\n            className\n          )}\n          {...props}\n        />\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n    );\n  }\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipProvider","props","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","React","className","sideOffset","side","align","anchor","portalContainer","keepMounted","ref","ctxContainer","usePortalContainer","resolvedContainer","jsx","cn"],"mappings":";;;;;AAYA,SAASA,EAAgBC,GAA+D;AACtF,2BAAQC,EAAiB,UAAjB,EAA0B,OAAO,KAAM,GAAGD,GAAO;AAC3D;AAEA,MAAME,IAAUD,EAAiB,MAE3BE,IAAiBF,EAAiB,SAElCG,IAAiBC,EAAM;AAAA,EAkB3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGZ;AAAA,EAAA,GAELa,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBL,KAAmBG;AAE7C,WACA,gBAAAG;AAAA,MAAChB,EAAiB;AAAA,MAAjB;AAAA,QACC,WAAWe;AAAA,QACX,aAAAJ;AAAA,QAEA,UAAA,gBAAAK;AAAA,UAAChB,EAAiB;AAAA,UAAjB;AAAA,YACC,YAAAM;AAAA,YACA,MAAAC;AAAA,YACA,OAAAC;AAAA,YACA,QAAAC;AAAA,YACA,WAAU;AAAA,YAEV,UAAA,gBAAAO;AAAA,cAAChB,EAAiB;AAAA,cAAjB;AAAA,gBACC,KAAAY;AAAA,gBACA,WAAWK;AAAA,kBACT;AAAA,kBACAZ;AAAA,gBAAA;AAAA,gBAED,GAAGN;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGJ;AACF;AACAI,EAAe,cAAc;"}

package/dist/components/ui/widget-placeholder/widget-placeholder.js

@@ -0,0 +1,106 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as a from "react";
+import { cn as d } from "../../../lib/utils.js";
+const i = a.forwardRef(({ className: t, interactive: e, ...o }, l) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: l,
+    tabIndex: e ? 0 : void 0,
+    className: d(
+      "relative flex flex-col rounded-lg border border-border bg-background text-foreground transition-colors",
+      e && "cursor-pointer hover:bg-accent active:bg-[var(--ui-background-surface-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]",
+      t
+    ),
+    ...o
+  }
+));
+i.displayName = "WidgetPlaceholder";
+const s = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: o,
+    className: d("flex items-center gap-2 px-6 pb-2 pt-4", t),
+    ...e
+  }
+));
+s.displayName = "WidgetPlaceholderHeader";
+const c = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: o,
+    className: d("flex-1 truncate text-sm font-semibold leading-6", t),
+    ...e
+  }
+));
+c.displayName = "WidgetPlaceholderTitle";
+const n = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: o,
+    className: d(
+      "flex-shrink-0 text-secondary [&>svg]:size-4",
+      t
+    ),
+    ...e
+  }
+));
+n.displayName = "WidgetPlaceholderIcon";
+const f = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: o,
+    className: d(
+      "flex flex-1 flex-col items-center justify-center gap-2 px-6 py-4 text-center",
+      t
+    ),
+    ...e
+  }
+));
+f.displayName = "WidgetPlaceholderContent";
+const m = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: o,
+    className: d(
+      "flex items-center justify-center text-muted-foreground [&>svg]:size-[72px]",
+      t
+    ),
+    ...e
+  }
+));
+m.displayName = "WidgetPlaceholderImage";
+const g = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r("div", { ref: o, className: d("text-sm leading-6", t), ...e }));
+g.displayName = "WidgetPlaceholderText";
+const x = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: o,
+    className: d(
+      "cursor-pointer text-sm font-semibold text-secondary hover:underline",
+      t
+    ),
+    ...e
+  }
+));
+x.displayName = "WidgetPlaceholderAction";
+const p = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: o,
+    className: d("px-6 pb-4 pt-0 text-xs text-muted-foreground", t),
+    ...e
+  }
+));
+p.displayName = "WidgetPlaceholderFooter";
+export {
+  i as WidgetPlaceholder,
+  x as WidgetPlaceholderAction,
+  f as WidgetPlaceholderContent,
+  p as WidgetPlaceholderFooter,
+  s as WidgetPlaceholderHeader,
+  n as WidgetPlaceholderIcon,
+  m as WidgetPlaceholderImage,
+  g as WidgetPlaceholderText,
+  c as WidgetPlaceholderTitle
+};
+//# sourceMappingURL=widget-placeholder.js.map

package/dist/components/ui/widget-placeholder/widget-placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-placeholder.js","sources":["../../../../src/components/ui/widget-placeholder/widget-placeholder.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Composable dashboard-widget empty-state parts, ported from\n// `@acronis-platform/shadcn-uikit`'s `widget-placeholder`\n// (packages/ui-legacy/src/components/ui/widget-placeholder.tsx). Plain styled\n// elements — no Base UI primitive. No `--ui-widget-placeholder-*` tier exists\n// yet, so this design-pending v1 themes from the shared semantic vocabulary:\n//   • root      -> border-border + bg-background + text-foreground\n//   • icon/action (was --av-fixed-link) -> text-secondary (the brand action blue)\n//   • image (was --av-brand-light, a soft brand tint) -> text-muted-foreground\n//     (a muted decorative placeholder; the brand tint is design-pending)\n//   • interactive hover/active -> bg-accent (surface-hover) /\n//     surface-active; focus -> the standard 3px --ui-focus-primary ring\n// Reconcile with `/figma-component WidgetPlaceholder <url> --update` once a\n// mockup lands (Figma: Charts-anatomy / Placeholders, node 229:73962).\n\nexport interface WidgetPlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Make the whole widget focusable and clickable (hover/active surface + focus\n   * ring). Wire the behavior via `onClick`.\n   */\n  interactive?: boolean;\n}\n\nconst WidgetPlaceholder = React.forwardRef<\n  HTMLDivElement,\n  WidgetPlaceholderProps\n>(({ className, interactive, ...props }, ref) => (\n  <div\n    ref={ref}\n    tabIndex={interactive ? 0 : undefined}\n    className={cn(\n      'relative flex flex-col rounded-lg border border-border bg-background text-foreground transition-colors',\n      interactive &&\n        'cursor-pointer hover:bg-accent active:bg-[var(--ui-background-surface-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholder.displayName = 'WidgetPlaceholder';\n\nconst WidgetPlaceholderHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-2 px-6 pb-2 pt-4', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderHeader.displayName = 'WidgetPlaceholderHeader';\n\nconst WidgetPlaceholderTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-1 truncate text-sm font-semibold leading-6', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderTitle.displayName = 'WidgetPlaceholderTitle';\n\nconst WidgetPlaceholderIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex-shrink-0 text-secondary [&>svg]:size-4',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderIcon.displayName = 'WidgetPlaceholderIcon';\n\nconst WidgetPlaceholderContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col items-center justify-center gap-2 px-6 py-4 text-center',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderContent.displayName = 'WidgetPlaceholderContent';\n\nconst WidgetPlaceholderImage = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-center text-muted-foreground [&>svg]:size-[72px]',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderImage.displayName = 'WidgetPlaceholderImage';\n\nconst WidgetPlaceholderText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('text-sm leading-6', className)} {...props} />\n));\nWidgetPlaceholderText.displayName = 'WidgetPlaceholderText';\n\nconst WidgetPlaceholderAction = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'cursor-pointer text-sm font-semibold text-secondary hover:underline',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderAction.displayName = 'WidgetPlaceholderAction';\n\nconst WidgetPlaceholderFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('px-6 pb-4 pt-0 text-xs text-muted-foreground', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderFooter.displayName = 'WidgetPlaceholderFooter';\n\nexport {\n  WidgetPlaceholder,\n  WidgetPlaceholderHeader,\n  WidgetPlaceholderTitle,\n  WidgetPlaceholderIcon,\n  WidgetPlaceholderContent,\n  WidgetPlaceholderImage,\n  WidgetPlaceholderText,\n  WidgetPlaceholderAction,\n  WidgetPlaceholderFooter,\n};\n"],"names":["WidgetPlaceholder","React","className","interactive","props","ref","jsx","cn","WidgetPlaceholderHeader","WidgetPlaceholderTitle","WidgetPlaceholderIcon","WidgetPlaceholderContent","WidgetPlaceholderImage","WidgetPlaceholderText","WidgetPlaceholderAction","WidgetPlaceholderFooter"],"mappings":";;;AA2BA,MAAMA,IAAoBC,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,aAAAC,GAAa,GAAGC,KAASC,MACvC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,UAAUF,IAAc,IAAI;AAAA,IAC5B,WAAWI;AAAA,MACT;AAAA,MACAJ,KACE;AAAA,MACFD;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAkB,cAAc;AAEhC,MAAMQ,IAA0BP,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,0CAA0CL,CAAS;AAAA,IAChE,GAAGE;AAAA,EAAA;AACN,CACD;AACDI,EAAwB,cAAc;AAEtC,MAAMC,IAAyBR,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,mDAAmDL,CAAS;AAAA,IACzE,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAuB,cAAc;AAErC,MAAMC,IAAwBT,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAsB,cAAc;AAEpC,MAAMC,IAA2BV,EAAM,WAGrC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDO,EAAyB,cAAc;AAEvC,MAAMC,IAAyBX,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDQ,EAAuB,cAAc;AAErC,MAAMC,IAAwBZ,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,qBAAqBL,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDS,EAAsB,cAAc;AAEpC,MAAMC,IAA0Bb,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDU,EAAwB,cAAc;AAEtC,MAAMC,IAA0Bd,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,gDAAgDL,CAAS;AAAA,IACtE,GAAGE;AAAA,EAAA;AACN,CACD;AACDW,EAAwB,cAAc;"}

package/dist/hooks/use-intersection-observer.js

@@ -0,0 +1,26 @@
+import { useRef as v, useState as b, useEffect as l } from "react";
+function p({
+  onIntersect: n,
+  disabled: t = !1,
+  root: r,
+  rootMargin: s,
+  threshold: c
+}) {
+  const u = v(n);
+  u.current = n;
+  const [e, o] = b(null);
+  return l(() => {
+    if (t || !e) return;
+    const f = new IntersectionObserver(
+      (i) => {
+        i.some((m) => m.isIntersecting) && u.current();
+      },
+      { root: r, rootMargin: s, threshold: c }
+    );
+    return f.observe(e), () => f.disconnect();
+  }, [e, t, r, s, c]), o;
+}
+export {
+  p as useIntersectionObserver
+};
+//# sourceMappingURL=use-intersection-observer.js.map

package/dist/hooks/use-intersection-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-intersection-observer.js","sources":["../../src/hooks/use-intersection-observer.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport interface UseIntersectionObserverOptions extends IntersectionObserverInit {\n  /** Called each time the observed element intersects its root. */\n  onIntersect: () => void;\n  /**\n   * Skip observing — e.g. there's nothing left to load, or a load is already\n   * in flight. Disconnects any existing observer.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Wires a single `IntersectionObserver` on the returned ref callback's element\n * and calls `onIntersect` each time it intersects. Re-creates the observer when\n * the element, `disabled`, or any `IntersectionObserverInit` option changes;\n * disconnects on cleanup. `onIntersect` itself doesn't need to be memoized by\n * the caller — the latest version is always used (via a ref) without\n * reconnecting the observer.\n *\n * Takes a ref *callback* (not a `RefObject`) rather than accepting one from the\n * caller — attaching to `element.current` inside a `useEffect` keyed on a\n * `RefObject` misses conditionally-mounted elements: the `ref` object's\n * identity never changes when its `.current` is populated, so an effect keyed\n * on it (rather than on the element itself) never re-runs once the element\n * actually mounts. Routing the DOM node through `useState` instead makes the\n * mount itself a dependency.\n */\nexport function useIntersectionObserver<T extends Element>({\n  onIntersect,\n  disabled = false,\n  root,\n  rootMargin,\n  threshold,\n}: UseIntersectionObserverOptions): (node: T | null) => void {\n  const onIntersectRef = useRef(onIntersect);\n  onIntersectRef.current = onIntersect;\n\n  const [element, setElement] = useState<T | null>(null);\n\n  useEffect(() => {\n    if (disabled || !element) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          onIntersectRef.current();\n        }\n      },\n      { root, rootMargin, threshold }\n    );\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [element, disabled, root, rootMargin, threshold]);\n\n  return setElement;\n}\n"],"names":["useIntersectionObserver","onIntersect","disabled","root","rootMargin","threshold","onIntersectRef","useRef","element","setElement","useState","useEffect","observer","entries","entry"],"mappings":";AA4BO,SAASA,EAA2C;AAAA,EACzD,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAA6D;AAC3D,QAAMC,IAAiBC,EAAON,CAAW;AACzC,EAAAK,EAAe,UAAUL;AAEzB,QAAM,CAACO,GAASC,CAAU,IAAIC,EAAmB,IAAI;AAErD,SAAAC,EAAU,MAAM;AACd,QAAIT,KAAY,CAACM,EAAS;AAE1B,UAAMI,IAAW,IAAI;AAAA,MACnB,CAACC,MAAY;AACX,QAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,KAC9CR,EAAe,QAAA;AAAA,MAEnB;AAAA,MACA,EAAE,MAAAH,GAAM,YAAAC,GAAY,WAAAC,EAAA;AAAA,IAAU;AAEhC,WAAAO,EAAS,QAAQJ,CAAO,GACjB,MAAMI,EAAS,WAAA;AAAA,EACxB,GAAG,CAACJ,GAASN,GAAUC,GAAMC,GAAYC,CAAS,CAAC,GAE5CI;AACT;"}

package/dist/hooks/use-sort-state.js

@@ -0,0 +1,35 @@
+import * as l from "react";
+function p(e, r) {
+  return e == null && r == null ? 0 : e == null ? -1 : r == null ? 1 : typeof e == "number" && typeof r == "number" ? e - r : String(e).localeCompare(String(r), void 0, {
+    numeric: !0,
+    sensitivity: "base"
+  });
+}
+function g({
+  data: e,
+  initialSort: r = null,
+  comparators: s,
+  getValue: f = (t, c) => t[c]
+}) {
+  const [t, c] = l.useState(r), m = l.useCallback((o) => {
+    c((i) => !i || i.columnId !== o ? { columnId: o, direction: "asc" } : i.direction === "asc" ? { columnId: o, direction: "desc" } : null);
+  }, []), S = l.useCallback(
+    (o) => t && t.columnId === o ? t.direction : !1,
+    [t]
+  );
+  return { sortedData: l.useMemo(() => {
+    if (!t) return e;
+    const i = (s == null ? void 0 : s[t.columnId]) ?? ((n, u) => p(
+      f(n, t.columnId),
+      f(u, t.columnId)
+    )), a = t.direction === "desc" ? -1 : 1;
+    return e.map((n, u) => ({ row: n, index: u })).sort((n, u) => {
+      const d = i(n.row, u.row);
+      return d !== 0 ? d * a : n.index - u.index;
+    }).map((n) => n.row);
+  }, [e, t, s, f]), sort: t, setSort: c, toggleSort: m, getSortDirection: S };
+}
+export {
+  g as useSortState
+};
+//# sourceMappingURL=use-sort-state.js.map

package/dist/hooks/use-sort-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sort-state.js","sources":["../../src/hooks/use-sort-state.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SortDirection = 'asc' | 'desc' | false;\n\nexport interface SortState {\n  columnId: string;\n  direction: 'asc' | 'desc';\n}\n\n/**\n * Compares two rows for a column. Ascending order; the hook negates the result\n * for descending. Receives the full rows so a custom comparator has access to\n * every field.\n */\nexport type SortComparator<TData> = (a: TData, b: TData) => number;\n\nexport interface UseSortStateOptions<TData> {\n  /** Rows to sort. */\n  data: TData[];\n  /** Initial sorted column + direction. */\n  initialSort?: SortState | null;\n  /**\n   * Custom per-column comparators keyed by column id. When absent for a column,\n   * the default alphanumeric comparator on `getValue(row, columnId)` is used.\n   */\n  comparators?: Record<string, SortComparator<TData>>;\n  /**\n   * How to read a column's value from a row for the default comparator.\n   * Defaults to `row[columnId]`.\n   */\n  getValue?: (row: TData, columnId: string) => unknown;\n}\n\nexport interface UseSortStateResult<TData> {\n  /** The rows sorted by the current sort state (unsorted `data` when none). */\n  sortedData: TData[];\n  /** The current sort, or `null` when unsorted. */\n  sort: SortState | null;\n  /** Directly set (or clear) the sort. */\n  setSort: (sort: SortState | null) => void;\n  /** Cycle a column's sort: none → asc → desc → none. */\n  toggleSort: (columnId: string) => void;\n  /** Direction for a column, shaped for `TableHead`'s `sortDirection` prop. */\n  getSortDirection: (columnId: string) => SortDirection;\n}\n\n// Natural alphanumeric comparison: numbers numerically, everything else via a\n// locale-aware numeric string compare (so \"item2\" sorts before \"item10\").\n// null/undefined sort first.\nfunction defaultCompareValues(a: unknown, b: unknown): number {\n  if (a == null && b == null) return 0;\n  if (a == null) return -1;\n  if (b == null) return 1;\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, {\n    numeric: true,\n    sensitivity: 'base',\n  });\n}\n\n/**\n * Headless client-side sort state for the `Table` primitives (no TanStack\n * dependency). Drives `TableHead`'s `sortable`/`sortDirection`/`onSort` props\n * and returns the sorted rows. Default comparator is alphanumeric; pass\n * `comparators` to override per column.\n */\nexport function useSortState<TData>({\n  data,\n  initialSort = null,\n  comparators,\n  getValue = (row, columnId) => (row as Record<string, unknown>)[columnId],\n}: UseSortStateOptions<TData>): UseSortStateResult<TData> {\n  const [sort, setSort] = React.useState<SortState | null>(initialSort);\n\n  const toggleSort = React.useCallback((columnId: string) => {\n    setSort((current) => {\n      if (!current || current.columnId !== columnId) {\n        return { columnId, direction: 'asc' };\n      }\n      if (current.direction === 'asc') {\n        return { columnId, direction: 'desc' };\n      }\n      return null;\n    });\n  }, []);\n\n  const getSortDirection = React.useCallback(\n    (columnId: string): SortDirection =>\n      sort && sort.columnId === columnId ? sort.direction : false,\n    [sort]\n  );\n\n  const sortedData = React.useMemo(() => {\n    if (!sort) return data;\n    const custom = comparators?.[sort.columnId];\n    const compare: SortComparator<TData> =\n      custom ??\n      ((a, b) =>\n        defaultCompareValues(\n          getValue(a, sort.columnId),\n          getValue(b, sort.columnId)\n        ));\n    const factor = sort.direction === 'desc' ? -1 : 1;\n    // Slice keeps the input array intact; index tiebreak keeps sort stable.\n    return data\n      .map((row, index) => ({ row, index }))\n      .sort((a, b) => {\n        const result = compare(a.row, b.row);\n        return result !== 0 ? result * factor : a.index - b.index;\n      })\n      .map((entry) => entry.row);\n  }, [data, sort, comparators, getValue]);\n\n  return { sortedData, sort, setSort, toggleSort, getSortDirection };\n}\n"],"names":["defaultCompareValues","a","b","useSortState","data","initialSort","comparators","getValue","row","columnId","sort","setSort","React","toggleSort","current","getSortDirection","compare","factor","index","result","entry"],"mappings":";AAiDA,SAASA,EAAqBC,GAAYC,GAAoB;AAC5D,SAAID,KAAK,QAAQC,KAAK,OAAa,IAC/BD,KAAK,OAAa,KAClBC,KAAK,OAAa,IAClB,OAAOD,KAAM,YAAY,OAAOC,KAAM,WAAiBD,IAAIC,IACxD,OAAOD,CAAC,EAAE,cAAc,OAAOC,CAAC,GAAG,QAAW;AAAA,IACnD,SAAS;AAAA,IACT,aAAa;AAAA,EAAA,CACd;AACH;AAQO,SAASC,EAAoB;AAAA,EAClC,MAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AAAA,EACA,UAAAC,IAAW,CAACC,GAAKC,MAAcD,EAAgCC,CAAQ;AACzE,GAA0D;AACxD,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAM,SAA2BP,CAAW,GAE9DQ,IAAaD,EAAM,YAAY,CAACH,MAAqB;AACzD,IAAAE,EAAQ,CAACG,MACH,CAACA,KAAWA,EAAQ,aAAaL,IAC5B,EAAE,UAAAA,GAAU,WAAW,MAAA,IAE5BK,EAAQ,cAAc,QACjB,EAAE,UAAAL,GAAU,WAAW,OAAA,IAEzB,IACR;AAAA,EACH,GAAG,CAAA,CAAE,GAECM,IAAmBH,EAAM;AAAA,IAC7B,CAACH,MACCC,KAAQA,EAAK,aAAaD,IAAWC,EAAK,YAAY;AAAA,IACxD,CAACA,CAAI;AAAA,EAAA;AAwBP,SAAO,EAAE,YArBUE,EAAM,QAAQ,MAAM;AACrC,QAAI,CAACF,EAAM,QAAON;AAElB,UAAMY,KADSV,KAAA,gBAAAA,EAAcI,EAAK,eAG/B,CAACT,GAAGC,MACHF;AAAA,MACEO,EAASN,GAAGS,EAAK,QAAQ;AAAA,MACzBH,EAASL,GAAGQ,EAAK,QAAQ;AAAA,IAAA,IAEzBO,IAASP,EAAK,cAAc,SAAS,KAAK;AAEhD,WAAON,EACJ,IAAI,CAACI,GAAKU,OAAW,EAAE,KAAAV,GAAK,OAAAU,EAAA,EAAQ,EACpC,KAAK,CAACjB,GAAGC,MAAM;AACd,YAAMiB,IAASH,EAAQf,EAAE,KAAKC,EAAE,GAAG;AACnC,aAAOiB,MAAW,IAAIA,IAASF,IAAShB,EAAE,QAAQC,EAAE;AAAA,IACtD,CAAC,EACA,IAAI,CAACkB,MAAUA,EAAM,GAAG;AAAA,EAC7B,GAAG,CAAChB,GAAMM,GAAMJ,GAAaC,CAAQ,CAAC,GAEjB,MAAAG,GAAM,SAAAC,GAAS,YAAAE,GAAY,kBAAAE,EAAA;AAClD;"}

package/dist/hooks/use-table-url-state.js

@@ -0,0 +1,115 @@
+import * as u from "react";
+const y = {
+  page: "tbl_page",
+  size: "tbl_size",
+  sort: "tbl_sort",
+  filter: "tbl_filter"
+};
+function b(e, r) {
+  return typeof e == "function" ? e(r) : e;
+}
+function z(e, {
+  defaultPageSize: r = 10,
+  paramKeys: i
+} = {}) {
+  const a = i ?? y, o = new URLSearchParams(e), t = Number(o.get(a.page)), s = Number.isFinite(t) && t >= 1 ? Math.floor(t) - 1 : 0, c = Number(o.get(a.size)), S = Number.isFinite(c) && c >= 1 ? Math.floor(c) : r, g = o.get(a.sort), m = /* @__PURE__ */ new Map();
+  if (g)
+    for (const l of g.split(",")) {
+      const f = l.indexOf(":");
+      if (f === -1) continue;
+      const p = l.slice(0, f), h = l.slice(f + 1);
+      !p || h !== "asc" && h !== "desc" || m.set(p, { id: p, desc: h === "desc" });
+    }
+  const n = Array.from(m.values()), d = o.get(a.filter), w = d ? d.split(",").map((l) => {
+    const f = l.indexOf(":");
+    if (f === -1) return null;
+    const p = l.slice(0, f);
+    if (!p) return null;
+    try {
+      return { id: p, value: decodeURIComponent(l.slice(f + 1)) };
+    } catch {
+      return null;
+    }
+  }).filter((l) => l !== null) : [];
+  return { pagination: { pageIndex: s, pageSize: S }, sorting: n, columnFilters: w };
+}
+function P(e, r, {
+  defaultPageSize: i = 10,
+  paramKeys: a
+} = {}) {
+  const o = a ?? y, t = new URLSearchParams(r);
+  for (const s of Object.values(o)) t.delete(s);
+  return e.pagination.pageIndex > 0 && t.set(o.page, String(e.pagination.pageIndex + 1)), e.pagination.pageSize !== i && t.set(o.size, String(e.pagination.pageSize)), e.sorting.length > 0 && t.set(
+    o.sort,
+    e.sorting.map((s) => `${s.id}:${s.desc ? "desc" : "asc"}`).join(",")
+  ), e.columnFilters.length > 0 && t.set(
+    o.filter,
+    e.columnFilters.map((s) => `${s.id}:${encodeURIComponent(s.value)}`).join(",")
+  ), t.toString();
+}
+function R(e, r) {
+  const i = typeof window < "u" ? window.location.search : "";
+  return z(i, { defaultPageSize: e, paramKeys: r });
+}
+function U(e = {}) {
+  const { defaultPageSize: r = 10 } = e, i = u.useMemo(
+    () => ({ ...y, ...e.paramKeys }),
+    [e.paramKeys]
+  ), [a, o] = u.useState(
+    () => R(r, i)
+  ), t = u.useRef(a);
+  t.current = a;
+  const s = u.useRef(!1);
+  u.useEffect(() => {
+    if (typeof window > "u") return;
+    const n = () => {
+      o(R(r, i));
+    };
+    return window.addEventListener("popstate", n), () => window.removeEventListener("popstate", n);
+  }, [r, i]);
+  const c = u.useCallback(
+    (n) => {
+      if (t.current = n, o(n), typeof window > "u") return;
+      const d = P(n, window.location.search, {
+        defaultPageSize: r,
+        paramKeys: i
+      }), w = `${window.location.pathname}${d ? `?${d}` : ""}${window.location.hash}`;
+      s.current ? window.history.replaceState(null, "", w) : (window.history.pushState(null, "", w), s.current = !0, queueMicrotask(() => {
+        s.current = !1;
+      }));
+    },
+    [r, i]
+  ), S = u.useCallback(
+    (n) => {
+      c({
+        ...t.current,
+        pagination: b(n, t.current.pagination)
+      });
+    },
+    [c]
+  ), g = u.useCallback(
+    (n) => {
+      c({
+        ...t.current,
+        sorting: b(n, t.current.sorting)
+      });
+    },
+    [c]
+  ), m = u.useCallback(
+    (n) => {
+      c({
+        ...t.current,
+        columnFilters: b(n, t.current.columnFilters)
+      });
+    },
+    [c]
+  );
+  return { state: a, setPagination: S, setSorting: g, setColumnFilters: m };
+}
+export {
+  y as DEFAULT_TABLE_URL_PARAM_KEYS,
+  z as parseTableUrlState,
+  P as serializeTableUrlState,
+  U as useTableUrlState
+};
+//# sourceMappingURL=use-table-url-state.js.map

package/dist/hooks/use-table-url-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-url-state.js","sources":["../../src/hooks/use-table-url-state.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface TablePaginationState {\n  /** Zero-based page index. */\n  pageIndex: number;\n  /** Rows per page. */\n  pageSize: number;\n}\n\nexport interface TableSortingState {\n  /** Column id. */\n  id: string;\n  /** `true` for descending. */\n  desc: boolean;\n}\n\nexport interface TableColumnFilterState {\n  /** Column id. */\n  id: string;\n  /** Filter value (string-encoded in the URL). */\n  value: string;\n}\n\n/**\n * Controlled table state. The three fields mirror TanStack's `PaginationState`,\n * `SortingState`, and `ColumnFiltersState` shapes (filter value narrowed to\n * `string`) so they can wire straight into `onPaginationChange` /\n * `onSortingChange` / `onColumnFiltersChange`.\n */\nexport interface TableUrlState {\n  pagination: TablePaginationState;\n  sorting: TableSortingState[];\n  columnFilters: TableColumnFilterState[];\n}\n\n/** Query-string keys. Namespaced (`tbl_*`) to avoid collisions with Storybook's\n * own `path`/`args`/`globals` params on a shared preview-iframe URL. */\nexport interface TableUrlParamKeys {\n  page: string;\n  size: string;\n  sort: string;\n  filter: string;\n}\n\nexport const DEFAULT_TABLE_URL_PARAM_KEYS: TableUrlParamKeys = {\n  page: 'tbl_page',\n  size: 'tbl_size',\n  sort: 'tbl_sort',\n  filter: 'tbl_filter',\n};\n\nexport interface UseTableUrlStateOptions {\n  /** Default page size; omitted from the URL when the size matches it. */\n  defaultPageSize?: number;\n  /** Override the namespaced query-string keys. */\n  paramKeys?: Partial<TableUrlParamKeys>;\n}\n\nexport type TableUrlUpdater<T> = T | ((old: T) => T);\n\nexport interface UseTableUrlStateResult {\n  state: TableUrlState;\n  /** Accepts a value or updater — shaped for TanStack's `onPaginationChange`. */\n  setPagination: (updater: TableUrlUpdater<TablePaginationState>) => void;\n  /** Accepts a value or updater — shaped for TanStack's `onSortingChange`. */\n  setSorting: (updater: TableUrlUpdater<TableSortingState[]>) => void;\n  /** Accepts a value or updater — shaped for TanStack's `onColumnFiltersChange`. */\n  setColumnFilters: (\n    updater: TableUrlUpdater<TableColumnFilterState[]>\n  ) => void;\n}\n\nfunction applyUpdater<T>(updater: TableUrlUpdater<T>, old: T): T {\n  return typeof updater === 'function'\n    ? (updater as (old: T) => T)(old)\n    : updater;\n}\n\n/**\n * Parses table state out of a query string. Pure — safe to reuse for seeding a\n * story or an SSR default. `search` may include or omit the leading `?`.\n *\n * Encoding: `tbl_page` is 1-based; `tbl_sort` is `id:asc|desc` pairs joined by\n * `,`; `tbl_filter` is `id:<encoded-value>` pairs joined by `,` (the value is\n * `encodeURIComponent`-escaped so it may contain `:`/`,`). Column ids must not\n * contain `:` or `,`.\n */\nexport function parseTableUrlState(\n  search: string,\n  {\n    defaultPageSize = 10,\n    paramKeys,\n  }: { defaultPageSize?: number; paramKeys?: TableUrlParamKeys } = {}\n): TableUrlState {\n  const keys = paramKeys ?? DEFAULT_TABLE_URL_PARAM_KEYS;\n  const params = new URLSearchParams(search);\n\n  const rawPage = Number(params.get(keys.page));\n  const pageIndex =\n    Number.isFinite(rawPage) && rawPage >= 1 ? Math.floor(rawPage) - 1 : 0;\n\n  const rawSize = Number(params.get(keys.size));\n  const pageSize =\n    Number.isFinite(rawSize) && rawSize >= 1 ? Math.floor(rawSize) : defaultPageSize;\n\n  const sortParam = params.get(keys.sort);\n  const sortingById = new Map<string, TableSortingState>();\n  if (sortParam) {\n    for (const pair of sortParam.split(',')) {\n      const separator = pair.indexOf(':');\n      if (separator === -1) continue;\n      const id = pair.slice(0, separator);\n      const dir = pair.slice(separator + 1);\n      if (!id || (dir !== 'asc' && dir !== 'desc')) continue;\n      // Last occurrence wins on a duplicate id — matches URLSearchParams'\n      // own semantics for a repeated key.\n      sortingById.set(id, { id, desc: dir === 'desc' });\n    }\n  }\n  const sorting: TableSortingState[] = Array.from(sortingById.values());\n\n  const filterParam = params.get(keys.filter);\n  const columnFilters: TableColumnFilterState[] = filterParam\n    ? filterParam\n        .split(',')\n        .map((pair) => {\n          const separator = pair.indexOf(':');\n          if (separator === -1) return null;\n          const id = pair.slice(0, separator);\n          if (!id) return null;\n          try {\n            return { id, value: decodeURIComponent(pair.slice(separator + 1)) };\n          } catch {\n            return null;\n          }\n        })\n        .filter((entry): entry is TableColumnFilterState => entry !== null)\n    : [];\n\n  return { pagination: { pageIndex, pageSize }, sorting, columnFilters };\n}\n\n/**\n * Serializes table state onto a query string, preserving any foreign params\n * already present in `search` (e.g. Storybook's `path`/`args`/`globals`).\n * Returns the query string without a leading `?` (empty string when no params).\n */\nexport function serializeTableUrlState(\n  state: TableUrlState,\n  search: string,\n  {\n    defaultPageSize = 10,\n    paramKeys,\n  }: { defaultPageSize?: number; paramKeys?: TableUrlParamKeys } = {}\n): string {\n  const keys = paramKeys ?? DEFAULT_TABLE_URL_PARAM_KEYS;\n  const params = new URLSearchParams(search);\n\n  // Clear our namespaced keys before rewriting so a cleared field drops out.\n  for (const key of Object.values(keys)) params.delete(key);\n\n  if (state.pagination.pageIndex > 0) {\n    params.set(keys.page, String(state.pagination.pageIndex + 1));\n  }\n  if (state.pagination.pageSize !== defaultPageSize) {\n    params.set(keys.size, String(state.pagination.pageSize));\n  }\n  if (state.sorting.length > 0) {\n    params.set(\n      keys.sort,\n      state.sorting\n        .map((entry) => `${entry.id}:${entry.desc ? 'desc' : 'asc'}`)\n        .join(',')\n    );\n  }\n  if (state.columnFilters.length > 0) {\n    params.set(\n      keys.filter,\n      state.columnFilters\n        .map((entry) => `${entry.id}:${encodeURIComponent(entry.value)}`)\n        .join(',')\n    );\n  }\n\n  return params.toString();\n}\n\nfunction readCurrentState(\n  defaultPageSize: number,\n  paramKeys: TableUrlParamKeys\n): TableUrlState {\n  const search = typeof window !== 'undefined' ? window.location.search : '';\n  return parseTableUrlState(search, { defaultPageSize, paramKeys });\n}\n\n/**\n * Router-agnostic hook that syncs controlled table state (pagination / sorting\n * / column filters) to and from the URL query string via `history.pushState` +\n * `popstate`. Depends only on `window.location` / `window.history`, so it works\n * with any router (or none). Query keys are namespaced (`tbl_*`) so they never\n * collide with other params on the same URL. Reads initial state from the URL,\n * so a bookmarked link restores the table's view.\n */\nexport function useTableUrlState(\n  options: UseTableUrlStateOptions = {}\n): UseTableUrlStateResult {\n  const { defaultPageSize = 10 } = options;\n  const paramKeys = React.useMemo<TableUrlParamKeys>(\n    () => ({ ...DEFAULT_TABLE_URL_PARAM_KEYS, ...options.paramKeys }),\n    [options.paramKeys]\n  );\n\n  const [state, setState] = React.useState<TableUrlState>(() =>\n    readCurrentState(defaultPageSize, paramKeys)\n  );\n\n  // Keep a ref of the latest state so `popstate` and the setters can compute\n  // the next URL/state without re-subscribing on every change.\n  const stateRef = React.useRef(state);\n  stateRef.current = state;\n\n  // Coalesce multiple setters called synchronously in the same handler (e.g. a\n  // filter change that also resets the page) into a single history entry: the\n  // first commit in a tick pushes, later ones in the same tick replace. The\n  // flag clears on a microtask so the next distinct user action pushes again.\n  const hasPushedThisTickRef = React.useRef(false);\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const onPopState = () => {\n      setState(readCurrentState(defaultPageSize, paramKeys));\n    };\n    window.addEventListener('popstate', onPopState);\n    return () => window.removeEventListener('popstate', onPopState);\n  }, [defaultPageSize, paramKeys]);\n\n  const commit = React.useCallback(\n    (next: TableUrlState) => {\n      // Refresh the ref here, not just in the render body — two setters\n      // called synchronously in the same handler (before React re-renders)\n      // must see each other's updates, not the pre-batch snapshot.\n      stateRef.current = next;\n      setState(next);\n      if (typeof window === 'undefined') return;\n      const query = serializeTableUrlState(next, window.location.search, {\n        defaultPageSize,\n        paramKeys,\n      });\n      const url = `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`;\n      if (hasPushedThisTickRef.current) {\n        window.history.replaceState(null, '', url);\n      } else {\n        window.history.pushState(null, '', url);\n        hasPushedThisTickRef.current = true;\n        queueMicrotask(() => {\n          hasPushedThisTickRef.current = false;\n        });\n      }\n    },\n    [defaultPageSize, paramKeys]\n  );\n\n  const setPagination = React.useCallback(\n    (updater: TableUrlUpdater<TablePaginationState>) => {\n      commit({\n        ...stateRef.current,\n        pagination: applyUpdater(updater, stateRef.current.pagination),\n      });\n    },\n    [commit]\n  );\n\n  const setSorting = React.useCallback(\n    (updater: TableUrlUpdater<TableSortingState[]>) => {\n      commit({\n        ...stateRef.current,\n        sorting: applyUpdater(updater, stateRef.current.sorting),\n      });\n    },\n    [commit]\n  );\n\n  const setColumnFilters = React.useCallback(\n    (updater: TableUrlUpdater<TableColumnFilterState[]>) => {\n      commit({\n        ...stateRef.current,\n        columnFilters: applyUpdater(updater, stateRef.current.columnFilters),\n      });\n    },\n    [commit]\n  );\n\n  return { state, setPagination, setSorting, setColumnFilters };\n}\n"],"names":["DEFAULT_TABLE_URL_PARAM_KEYS","applyUpdater","updater","old","parseTableUrlState","search","defaultPageSize","paramKeys","keys","params","rawPage","pageIndex","rawSize","pageSize","sortParam","sortingById","pair","separator","id","dir","sorting","filterParam","columnFilters","entry","serializeTableUrlState","state","key","readCurrentState","useTableUrlState","options","React","setState","stateRef","hasPushedThisTickRef","onPopState","commit","next","query","url","setPagination","setSorting","setColumnFilters"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}