@acronis-platform/ui-react 0.61.0 → 1.0.0

package/dist/components/ui/popover/popover.js

@@ -1,79 +1,98 @@
 import { jsx as a } from "react/jsx-runtime";
 import * as i from "react";
-import { Popover as o } from "@base-ui/react/popover";
-import { cn as d } from "../../../lib/utils.js";
-import { usePortalContainer as b } from "../../../lib/portal-container.js";
-const C = o.Root, R = o.Trigger, z = o.Portal, g = i.forwardRef(
+import { Popover as t } from "@base-ui/react/popover";
+import { cn as n } from "../../../lib/utils.js";
+import { usePortalContainer as y } from "../../../lib/portal-container.js";
+const T = t.Root, k = t.Trigger, D = t.Portal;
+function p(o) {
+  return o == null ? null : "current" in o ? o.current : o;
+}
+function N(o) {
+  const [e, r] = i.useState(
+    () => p(o)
+  );
+  return i.useLayoutEffect(() => {
+    r(p(o));
+  }, [o]), e;
+}
+const C = i.forwardRef(
   ({
-    className: r,
+    className: o,
     side: e = "bottom",
-    align: t = "center",
-    sideOffset: p = 4,
-    portal: l = !0,
-    portalContainer: s,
+    align: r = "center",
+    sideOffset: u = 4,
+    portal: d = !0,
+    portalContainer: f,
     keepMounted: v,
-    ...c
-  }, f) => {
-    const m = b(), u = s ?? m, n = /* @__PURE__ */ a(
-      o.Positioner,
+    collisionBoundary: c,
+    positionMethod: m,
+    ...b
+  }, g) => {
+    const P = y(), l = f ?? P, h = N(l), x = d && h != null, w = m ?? (x ? "fixed" : void 0), s = /* @__PURE__ */ a(
+      t.Positioner,
       {
         side: e,
-        align: t,
-        sideOffset: p,
+        align: r,
+        sideOffset: u,
+        collisionBoundary: c,
+        positionMethod: w,
         className: "z-50",
         children: /* @__PURE__ */ a(
-          o.Popup,
+          t.Popup,
           {
-            ref: f,
-            className: d(
+            ref: g,
+            className: n(
               "min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none",
               "duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95",
               "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-              r
+              o
             ),
-            ...c
+            ...b
           }
         )
       }
     );
-    return l ? /* @__PURE__ */ a(o.Portal, { container: u, keepMounted: v, children: n }) : n;
+    return d ? /* @__PURE__ */ a(
+      t.Portal,
+      {
+        container: l,
+        keepMounted: v,
+        children: s
+      }
+    ) : s;
   }
 );
-g.displayName = "PopoverContent";
-const P = i.forwardRef(
-  ({ className: r, ...e }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: d(
-        "flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]",
-        r
-      ),
-      ...e
-    }
-  )
-);
-P.displayName = "PopoverBody";
-const h = i.forwardRef(
-  ({ className: r, ...e }, t) => /* @__PURE__ */ a(
-    "div",
-    {
-      ref: t,
-      className: d(
-        "flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]",
-        r
-      ),
-      ...e
-    }
-  )
-);
-h.displayName = "PopoverFooter";
+C.displayName = "PopoverContent";
+const R = i.forwardRef(({ className: o, ...e }, r) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    className: n(
+      "flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]",
+      o
+    ),
+    ...e
+  }
+));
+R.displayName = "PopoverBody";
+const z = i.forwardRef(({ className: o, ...e }, r) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    className: n(
+      "flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]",
+      o
+    ),
+    ...e
+  }
+));
+z.displayName = "PopoverFooter";
 export {
-  C as Popover,
-  P as PopoverBody,
-  g as PopoverContent,
-  h as PopoverFooter,
-  z as PopoverPortal,
-  R as PopoverTrigger
+  T as Popover,
+  R as PopoverBody,
+  C as PopoverContent,
+  z as PopoverFooter,
+  D as PopoverPortal,
+  k as PopoverTrigger
 };
 //# sourceMappingURL=popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/ui/popover/popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `popover`\n// (packages/ui-legacy/src/components/ui/popover.tsx). A floating panel anchored\n// to a trigger, built on the Base UI Popover primitive (positioning, focus\n// management, outside-press / Esc dismissal, ARIA come from Base UI). Themed by\n// the `--ui-popover-*` tier (container chrome: color, border, radius, min/max\n// width) per Figma node 6364:17907. The optional `PopoverBody`/`PopoverFooter`\n// parts mirror that node's `Body` slot and `FooterDefault` recipe — `PopoverBody`\n// from `--ui-popover-body-*`, `PopoverFooter` from the shared `--ui-footer-*`\n// tier (also used by other components' default action-row footer). Text color\n// stays on the bridged semantic token (--ui-text-on-surface-primary), which the\n// design references directly rather than a Popover-specific token.\n// Enter/exit animations use `tw-animate-css` keyed to Base UI's data-[open] /\n// data-[closed] / data-[side] attributes.\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> {\n  /** Which side of the trigger to render on. */\n  side?: PopoverPrimitive.Positioner.Props['side'];\n  /** Alignment along the chosen side. */\n  align?: PopoverPrimitive.Positioner.Props['align'];\n  /** Distance in px from the trigger. */\n  sideOffset?: number;\n  /**\n   * Render inside a portal (default `true`). Set `false` for inline usage\n   * (e.g. when supplying your own `PopoverPortal`).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: PopoverPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Popup>,\n  PopoverContentProps\n>(\n  (\n    {\n      className,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 4,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    const positioner = (\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className=\"z-50\"\n      >\n        <PopoverPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none',\n            'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    );\n\n    return portal ? (\n      <PopoverPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {positioner}\n      </PopoverPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nPopoverContent.displayName = 'PopoverContent';\n\n/**\n * Vertical-rhythm wrapper for a `PopoverContent`'s main content — the `Body`\n * slot in the Figma node. Themed from `--ui-popover-body-*` (gap, padding-y);\n * horizontal inset is a plain utility since the design has no dedicated\n * component token for it.\n */\nconst PopoverBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nPopoverBody.displayName = 'PopoverBody';\n\n/**\n * Default action-row footer — the `FooterDefault` (`variant=default`) recipe\n * from the Figma node. Themed from the shared `--ui-footer-*` tier.\n */\nconst PopoverFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nPopoverFooter.displayName = 'PopoverFooter';\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverContent,\n  PopoverBody,\n  PopoverFooter,\n};\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverPortal","PopoverContent","React","className","side","align","sideOffset","portal","portalContainer","keepMounted","props","ref","ctxContainer","usePortalContainer","resolvedContainer","positioner","jsx","cn","PopoverBody","PopoverFooter"],"mappings":";;;;;AAoBA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB,QAwBjCG,IAAiBC,EAAM;AAAA,EAI3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBN,KAAmBI,GAEvCG,IACJ,gBAAAC;AAAA,MAAClB,EAAiB;AAAA,MAAjB;AAAA,QACC,MAAAM;AAAA,QACA,OAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAU;AAAA,UAAClB,EAAiB;AAAA,UAAjB;AAAA,YACC,KAAAa;AAAA,YACA,WAAWM;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAd;AAAA,YAAA;AAAA,YAED,GAAGO;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAIJ,WAAOH,sBACJT,EAAiB,QAAjB,EAAwB,WAAWgB,GAAmB,aAAAL,GACpD,UAAAM,EAAA,CACH,IAEAA;AAAA,EAEJ;AACF;AACAd,EAAe,cAAc;AAQ7B,MAAMiB,IAAchB,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGO,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,MAED,GAAGO;AAAA,IAAA;AAAA,EAAA;AAGV;AACAQ,EAAY,cAAc;AAM1B,MAAMC,IAAgBjB,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,GAAGO,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,MAED,GAAGO;AAAA,IAAA;AAAA,EAAA;AAGV;AACAS,EAAc,cAAc;"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/ui/popover/popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `popover`\n// (packages/ui-legacy/src/components/ui/popover.tsx). A floating panel anchored\n// to a trigger, built on the Base UI Popover primitive (positioning, focus\n// management, outside-press / Esc dismissal, ARIA come from Base UI). Themed by\n// the `--ui-popover-*` tier (container chrome: color, border, radius, min/max\n// width) per Figma node 6364:17907. The optional `PopoverBody`/`PopoverFooter`\n// parts mirror that node's `Body` slot and `FooterDefault` recipe — `PopoverBody`\n// from `--ui-popover-body-*`, `PopoverFooter` from the shared `--ui-footer-*`\n// tier (also used by other components' default action-row footer). Text color\n// stays on the bridged semantic token (--ui-text-on-surface-primary), which the\n// design references directly rather than a Popover-specific token.\n// Enter/exit animations use `tw-animate-css` keyed to Base UI's data-[open] /\n// data-[closed] / data-[side] attributes.\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\n// Mirrors Base UI's own container resolution (FloatingPortal): a `container`\n// prop may be the node itself or a ref object wrapping it. A ref object is\n// always truthy, so a raw `Boolean(container)` would treat `ref.current ===\n// null` as a resolved container when Base UI actually falls back to\n// `document.body`.\nfunction resolvePortalContainerNode(\n  container: PopoverPrimitive.Portal.Props['container']\n): HTMLElement | ShadowRoot | null {\n  if (container == null) return null;\n  return 'current' in container ? container.current : container;\n}\n\n// Base UI resolves the same `container` prop inside a layout effect (see\n// FloatingPortal's useFloatingPortalNode), because a ref pointing at a node\n// rendered in the same commit isn't populated until after commit — React\n// attaches every ref in a commit before running any layout effect in it.\n// Resolving inline during render (as a plain expression) would race that:\n// on the ref's first commit `current` is still null, and since nothing\n// re-renders on a ref mutation, a wrong 'absolute' default could stick\n// indefinitely. Mirroring Base UI's own two-phase timing here — a state\n// value corrected by a layout effect — picks up a same-commit ref\n// correctly, same as Base UI does for its own portaling.\nfunction useResolvedPortalContainerNode(\n  container: PopoverPrimitive.Portal.Props['container']\n): HTMLElement | ShadowRoot | null {\n  const [node, setNode] = React.useState(() =>\n    resolvePortalContainerNode(container)\n  );\n\n  React.useLayoutEffect(() => {\n    setNode(resolvePortalContainerNode(container));\n  }, [container]);\n\n  return node;\n}\n\nexport interface PopoverContentProps extends React.ComponentPropsWithoutRef<\n  typeof PopoverPrimitive.Popup\n> {\n  /** Which side of the trigger to render on. */\n  side?: PopoverPrimitive.Positioner.Props['side'];\n  /** Alignment along the chosen side. */\n  align?: PopoverPrimitive.Positioner.Props['align'];\n  /** Distance in px from the trigger. */\n  sideOffset?: number;\n  /**\n   * Render inside a portal (default `true`). Set `false` for inline usage\n   * (e.g. when supplying your own `PopoverPortal`).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`), or a constrained\n   * MFE/Shadow DOM mount point (see `PortalContainerProvider`).\n   */\n  portalContainer?: PopoverPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];\n  /**\n   * Element/rect the popup is confined to when avoiding collisions. Defaults\n   * to Base UI's own `'clipping-ancestors'` behavior — left alone here,\n   * since pairing it with the `positionMethod` default below already avoids\n   * clipping inside a constrained `portalContainer` (see that prop's doc).\n   * Override explicitly if a different boundary is needed.\n   */\n  collisionBoundary?: PopoverPrimitive.Positioner.Props['collisionBoundary'];\n  /**\n   * Which CSS `position` the popup uses. Defaults to `'fixed'` whenever the\n   * popup is portaled (`portal` is not `false`) into a resolved\n   * `portalContainer` — an `'absolute'`-positioned popup\n   * (Base UI's own default) is still clipped by a `portalContainer` ancestor\n   * that constrains overflow (e.g. a Shadow DOM host with `overflow: hidden`)\n   * no matter how the collision boundary is computed, since it shares that\n   * ancestor's containing block. `'fixed'` escapes a plain overflow-clipping\n   * ancestor — for a `fixed`-positioned popup, the collision-detection\n   * library (floating-ui) drops overflow ancestors that don't establish\n   * their own containing block, so it clips against the real viewport\n   * instead, which is also unaffected by page scroll (unlike measuring\n   * `document.documentElement`'s own bounding rect, which shrinks by the\n   * scroll offset). Note this is not an absolute guarantee: an ancestor with\n   * `transform`, `filter`, `will-change`, `backdrop-filter`, `perspective`,\n   * or `contain: paint`/`layout` *does* establish a containing block, so it\n   * still clips (and repositions relative to) a `fixed` descendant. Override\n   * explicitly if a different strategy is needed.\n   */\n  positionMethod?: PopoverPrimitive.Positioner.Props['positionMethod'];\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Popup>,\n  PopoverContentProps\n>(\n  (\n    {\n      className,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 4,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      collisionBoundary,\n      positionMethod,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n    const resolvedContainerNode =\n      useResolvedPortalContainerNode(resolvedContainer);\n    // Gated on this component's own `portal` prop, not on whether the popup\n    // actually ends up inside a constrained containing block: `portal={false}`\n    // opts out of the viewport-escape defaults so inline content keeps its\n    // intended scroll-with-content behavior. A consumer who wraps this in\n    // their own ancestor Portal targeting the same constrained container can\n    // still get clipped — pass `positionMethod` explicitly in that case.\n    const appliesContainerDefaults = portal && resolvedContainerNode != null;\n    // 'absolute' (Base UI's default) shares its portal container's\n    // containing block, so a container that constrains overflow (e.g.\n    // `overflow: hidden` on a Shadow DOM host) clips the popup at its own\n    // edge no matter how the collision boundary is computed. 'fixed' escapes\n    // a plain overflow-clipping ancestor instead: floating-ui's clipping-\n    // ancestor detection drops overflow ancestors that don't establish their\n    // own containing block for a `fixed`-positioned element, so the platform\n    // default collision boundary ('clipping-ancestors') already resolves to\n    // the real (scroll-independent) viewport without needing an explicit\n    // `collisionBoundary` override here.\n    const resolvedPositionMethod =\n      positionMethod ?? (appliesContainerDefaults ? 'fixed' : undefined);\n\n    const positioner = (\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        collisionBoundary={collisionBoundary}\n        positionMethod={resolvedPositionMethod}\n        className=\"z-50\"\n      >\n        <PopoverPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none',\n            'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    );\n\n    return portal ? (\n      <PopoverPrimitive.Portal\n        container={resolvedContainer}\n        keepMounted={keepMounted}\n      >\n        {positioner}\n      </PopoverPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nPopoverContent.displayName = 'PopoverContent';\n\n/**\n * Vertical-rhythm wrapper for a `PopoverContent`'s main content — the `Body`\n * slot in the Figma node. Themed from `--ui-popover-body-*` (gap, padding-y);\n * horizontal inset is a plain utility since the design has no dedicated\n * component token for it.\n */\nconst PopoverBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nPopoverBody.displayName = 'PopoverBody';\n\n/**\n * Default action-row footer — the `FooterDefault` (`variant=default`) recipe\n * from the Figma node. Themed from the shared `--ui-footer-*` tier.\n */\nconst PopoverFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]',\n      className\n    )}\n    {...props}\n  />\n));\nPopoverFooter.displayName = 'PopoverFooter';\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverContent,\n  PopoverBody,\n  PopoverFooter,\n};\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverPortal","resolvePortalContainerNode","container","useResolvedPortalContainerNode","node","setNode","React","PopoverContent","className","side","align","sideOffset","portal","portalContainer","keepMounted","collisionBoundary","positionMethod","props","ref","ctxContainer","usePortalContainer","resolvedContainer","resolvedContainerNode","appliesContainerDefaults","resolvedPositionMethod","positioner","jsx","cn","PopoverBody","PopoverFooter"],"mappings":";;;;;AAoBA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB;AAOvC,SAASG,EACPC,GACiC;AACjC,SAAIA,KAAa,OAAa,OACvB,aAAaA,IAAYA,EAAU,UAAUA;AACtD;AAYA,SAASC,EACPD,GACiC;AACjC,QAAM,CAACE,GAAMC,CAAO,IAAIC,EAAM;AAAA,IAAS,MACrCL,EAA2BC,CAAS;AAAA,EAAA;AAGtC,SAAAI,EAAM,gBAAgB,MAAM;AAC1B,IAAAD,EAAQJ,EAA2BC,CAAS,CAAC;AAAA,EAC/C,GAAG,CAACA,CAAS,CAAC,GAEPE;AACT;AAsDA,MAAMG,IAAiBD,EAAM;AAAA,EAI3B,CACE;AAAA,IACE,WAAAE;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBR,KAAmBM,GACvCG,IACJnB,EAA+BkB,CAAiB,GAO5CE,IAA2BX,KAAUU,KAAyB,MAW9DE,IACJR,MAAmBO,IAA2B,UAAU,SAEpDE,IACJ,gBAAAC;AAAA,MAAC5B,EAAiB;AAAA,MAAjB;AAAA,QACC,MAAAW;AAAA,QACA,OAAAC;AAAA,QACA,YAAAC;AAAA,QACA,mBAAAI;AAAA,QACA,gBAAgBS;AAAA,QAChB,WAAU;AAAA,QAEV,UAAA,gBAAAE;AAAA,UAAC5B,EAAiB;AAAA,UAAjB;AAAA,YACC,KAAAoB;AAAA,YACA,WAAWS;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAnB;AAAA,YAAA;AAAA,YAED,GAAGS;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAIJ,WAAOL,IACL,gBAAAc;AAAA,MAAC5B,EAAiB;AAAA,MAAjB;AAAA,QACC,WAAWuB;AAAA,QACX,aAAAP;AAAA,QAEC,UAAAW;AAAA,MAAA;AAAA,IAAA,IAGHA;AAAA,EAEJ;AACF;AACAlB,EAAe,cAAc;AAQ7B,MAAMqB,IAActB,EAAM,WAGxB,CAAC,EAAE,WAAAE,GAAW,GAAGS,EAAA,GAASC,MAC1B,gBAAAQ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAR;AAAA,IACA,WAAWS;AAAA,MACT;AAAA,MACAnB;AAAA,IAAA;AAAA,IAED,GAAGS;AAAA,EAAA;AACN,CACD;AACDW,EAAY,cAAc;AAM1B,MAAMC,IAAgBvB,EAAM,WAG1B,CAAC,EAAE,WAAAE,GAAW,GAAGS,EAAA,GAASC,MAC1B,gBAAAQ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAR;AAAA,IACA,WAAWS;AAAA,MACT;AAAA,MACAnB;AAAA,IAAA;AAAA,IAED,GAAGS;AAAA,EAAA;AACN,CACD;AACDY,EAAc,cAAc;"}

package/dist/components/ui/resizable/resizable.js

@@ -1,34 +1,46 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Separator as t, Panel as i, Group as n } from "../../../node_modules/.pnpm/react-resizable-panels@4.11.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/react-resizable-panels/dist/react-resizable-panels.js";
-import { cn as e } from "../../../lib/utils.js";
+import { Separator as t, Panel as e, Group as n } from "../../../node_modules/.pnpm/react-resizable-panels@4.11.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/react-resizable-panels/dist/react-resizable-panels.js";
+import { cn as i } from "../../../lib/utils.js";
 function u({ className: r, ...a }) {
   return /* @__PURE__ */ o(
     n,
     {
-      className: e("flex h-full w-full aria-[orientation=vertical]:flex-col", r),
+      className: i("flex h-full w-full aria-[orientation=vertical]:flex-col", r),
       ...a
     }
   );
 }
 function b(r) {
-  return /* @__PURE__ */ o(i, { ...r });
+  return /* @__PURE__ */ o(e, { ...r });
 }
 function c({ className: r, ...a }) {
   return /* @__PURE__ */ o(
     t,
     {
-      className: e(
-        // 9px hit area: 1px divider + 4px padding each side.
-        "relative flex w-[9px] items-center justify-center",
+      className: i(
+        // 9px hit area (Figma: 1px divider + 4px each side) that costs **no layout
+        // space**: the negative inline margins cancel the width, so the box overlays
+        // the panel boundary instead of pushing the panels apart. `z-10` keeps it —
+        // and the divider it paints — above the panel backgrounds/borders it overlaps.
+        // The margins are asymmetric (-4px start / -5px end) because the 1px line can
+        // only sit on one side of the boundary: the box spans 4px before it and 5px
+        // after, which is 4px of padding on each side of the line, whole-pixel. Logical
+        // (`ms`/`me`), so RTL mirrors it.
+        "relative z-10 w-[9px] -ms-1 -me-[5px]",
         "cursor-[var(--ui-resizable-cursor)] outline-none",
-        // Centered 1px divider line (idle → semantic border, hover → hover token, drag → active token).
+        // 1px divider line, absolutely positioned at the center of the hit area —
+        // i.e. on the panel boundary (idle → semantic border, hover → hover token,
+        // drag → active token).
         // Uses a CSS border (not width+background) so the browser pixel-snaps the line
         // and it doesn't blur across device pixels when the handle lands at a fractional position.
         // The vertical divider is a zero-width box painted by its inline-start
         // (left) border; the horizontal override below swaps to the block-start
         // (top) border. Color is set with `border-color` (all sides) so it
         // applies regardless of which side carries the width.
-        "after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0",
+        // Offset a flat 4px rather than centered with `start-1/2` / auto margins: the
+        // box's 8px of leftover space is split 4/4 around the line by construction,
+        // and centering an odd-width box would land the line on a half pixel.
+        "after:absolute after:inset-y-0 after:start-[4px] after:w-0",
         "after:[border-inline-start-width:var(--ui-resizable-border-width)] after:border-solid after:[border-color:var(--ui-border-on-surface-border)]",
         "hover:after:[border-color:var(--ui-resizable-border-color-hover)]",
         "active:after:[border-color:var(--ui-resizable-border-color-active)]",
@@ -38,8 +50,8 @@ function c({ className: r, ...a }) {
         // orientation=horizontal = panels stacked → horizontal divider line.
         // Draw it with the block-start (top) border and reset the inline-start
         // border used for the vertical line, so the full-width line renders.
-        "aria-[orientation=horizontal]:h-[9px] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-[ns-resize]",
-        "aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:start-auto aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-0 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
+        "aria-[orientation=horizontal]:ms-0 aria-[orientation=horizontal]:me-0 aria-[orientation=horizontal]:-mt-1 aria-[orientation=horizontal]:-mb-[5px] aria-[orientation=horizontal]:h-[9px] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-[ns-resize]",
+        "aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:start-auto aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:top-[4px] aria-[orientation=horizontal]:after:h-0 aria-[orientation=horizontal]:after:w-full",
         "aria-[orientation=horizontal]:after:[border-inline-start-width:0] aria-[orientation=horizontal]:after:[border-block-start-width:var(--ui-resizable-border-width)]",
         r
       ),

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

@@ -1 +1 @@
-{"version":3,"file":"resizable.js","sources":["../../../../src/components/ui/resizable/resizable.tsx"],"sourcesContent":["import * as ResizablePrimitive from 'react-resizable-panels';\n\nimport { cn } from '@/lib/utils';\n\n// Resizable panels: a thin wrapper over `react-resizable-panels` (v4: `Group` /\n// `Panel` / `Separator`) themed with the next-gen `--ui-resizable-*` token tier,\n// following the shadcn composition (`ResizablePanelGroup` / `ResizablePanel` /\n// `ResizableHandle`). Base UI has no resizable primitive, so this is the one\n// component that wraps a third-party panel library instead.\n//\n// The handle is the 9px-wide draggable `Separator` (Figma node 4649:6681,\n// 1px divider + 4px padding each side for hover hit area). It paints a centered\n// 1px divider line (`--ui-resizable-border-width`) — `--ui-border-on-surface-border`\n// at rest (idle), `--ui-resizable-border-color-hover` on pointer hover,\n// `--ui-resizable-border-color-active` while dragging (`:active`). Keyboard focus\n// paints a 3px `--ui-focus-primary` ring; the resting cursor is\n// `--ui-resizable-cursor` (`ew-resize`). Each interaction state is wired to its\n// own token so brands can diverge.\n//\n// `orientation=\"vertical\"` (panels stacked) flips the layout: the Group goes\n// `flex-col`, the Separator becomes a horizontal line (`aria-orientation=horizontal`),\n// and the cursor becomes `ns-resize`.\n\nfunction ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel(props: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel {...props} />;\n}\n\nexport type ResizableHandleProps = ResizablePrimitive.SeparatorProps;\n\nfunction ResizableHandle({ className, ...props }: ResizableHandleProps) {\n  return (\n    <ResizablePrimitive.Separator\n      className={cn(\n        // 9px hit area: 1px divider + 4px padding each side.\n        'relative flex w-[9px] items-center justify-center',\n        'cursor-[var(--ui-resizable-cursor)] outline-none',\n        // Centered 1px divider line (idle → semantic border, hover → hover token, drag → active token).\n        // Uses a CSS border (not width+background) so the browser pixel-snaps the line\n        // and it doesn't blur across device pixels when the handle lands at a fractional position.\n        // The vertical divider is a zero-width box painted by its inline-start\n        // (left) border; the horizontal override below swaps to the block-start\n        // (top) border. Color is set with `border-color` (all sides) so it\n        // applies regardless of which side carries the width.\n        'after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0',\n        'after:[border-inline-start-width:var(--ui-resizable-border-width)] after:border-solid after:[border-color:var(--ui-border-on-surface-border)]',\n        'hover:after:[border-color:var(--ui-resizable-border-color-hover)]',\n        'active:after:[border-color:var(--ui-resizable-border-color-active)]',\n        // Focus ring: 3px box-shadow on the line itself so it auto-centers (Figma 4649:6686).\n        'focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)] focus-visible:after:[border-color:var(--ui-resizable-border-color-active)]',\n        'active:after:shadow-none',\n        // orientation=horizontal = panels stacked → horizontal divider line.\n        // Draw it with the block-start (top) border and reset the inline-start\n        // border used for the vertical line, so the full-width line renders.\n        'aria-[orientation=horizontal]:h-[9px] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-[ns-resize]',\n        'aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:start-auto aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-0 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0',\n        'aria-[orientation=horizontal]:after:[border-inline-start-width:0] aria-[orientation=horizontal]:after:[border-block-start-width:var(--ui-resizable-border-width)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive.Group","cn","ResizablePanel","ResizablePrimitive.Panel","ResizableHandle","ResizablePrimitive.Separator"],"mappings":";;;AAuBA,SAASA,EAAoB,EAAE,WAAAC,GAAW,GAAGC,KAAwC;AACnF,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,2DAA2DJ,CAAS;AAAA,MACjF,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAeJ,GAAsC;AAC5D,SAAO,gBAAAC,EAACI,GAAA,EAA0B,GAAGL,EAAA,CAAO;AAC9C;AAIA,SAASM,EAAgB,EAAE,WAAAP,GAAW,GAAGC,KAA+B;AACtE,SACE,gBAAAC;AAAA,IAACM;AAAAA,IAAA;AAAA,MACC,WAAWJ;AAAA;AAAA,QAET;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"resizable.js","sources":["../../../../src/components/ui/resizable/resizable.tsx"],"sourcesContent":["import * as ResizablePrimitive from 'react-resizable-panels';\n\nimport { cn } from '@/lib/utils';\n\n// Resizable panels: a thin wrapper over `react-resizable-panels` (v4: `Group` /\n// `Panel` / `Separator`) themed with the next-gen `--ui-resizable-*` token tier,\n// following the shadcn composition (`ResizablePanelGroup` / `ResizablePanel` /\n// `ResizableHandle`). Base UI has no resizable primitive, so this is the one\n// component that wraps a third-party panel library instead.\n//\n// The handle is the draggable `Separator` (Figma node 4649:6681): a 9px hit area —\n// the 1px divider plus 4px each side — that costs **no layout space**. Negative\n// margins cancel its width, so the box overlays the panel boundary rather than\n// pushing the panels apart. That keeps the two panels' edges (and their own borders)\n// flush, which is what a consumer sees as \"the borders touch\".\n//\n// It paints a 1px divider line (`--ui-resizable-border-width`) centered on that\n// boundary — `--ui-border-on-surface-border` at rest (idle),\n// `--ui-resizable-border-color-hover` on pointer hover,\n// `--ui-resizable-border-color-active` while dragging. Keyboard focus paints a 3px\n// `--ui-focus-primary` ring; the resting cursor is `--ui-resizable-cursor`\n// (`ew-resize`). Each interaction state is wired to its own token so brands can\n// diverge.\n//\n// `orientation=\"vertical\"` (panels stacked) flips the layout: the Group goes\n// `flex-col`, the Separator becomes a horizontal line (`aria-orientation=horizontal`),\n// and the cursor becomes `ns-resize`.\n\nfunction ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel(props: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel {...props} />;\n}\n\nexport type ResizableHandleProps = ResizablePrimitive.SeparatorProps;\n\nfunction ResizableHandle({ className, ...props }: ResizableHandleProps) {\n  return (\n    <ResizablePrimitive.Separator\n      className={cn(\n        // 9px hit area (Figma: 1px divider + 4px each side) that costs **no layout\n        // space**: the negative inline margins cancel the width, so the box overlays\n        // the panel boundary instead of pushing the panels apart. `z-10` keeps it —\n        // and the divider it paints — above the panel backgrounds/borders it overlaps.\n        // The margins are asymmetric (-4px start / -5px end) because the 1px line can\n        // only sit on one side of the boundary: the box spans 4px before it and 5px\n        // after, which is 4px of padding on each side of the line, whole-pixel. Logical\n        // (`ms`/`me`), so RTL mirrors it.\n        'relative z-10 w-[9px] -ms-1 -me-[5px]',\n        'cursor-[var(--ui-resizable-cursor)] outline-none',\n        // 1px divider line, absolutely positioned at the center of the hit area —\n        // i.e. on the panel boundary (idle → semantic border, hover → hover token,\n        // drag → active token).\n        // Uses a CSS border (not width+background) so the browser pixel-snaps the line\n        // and it doesn't blur across device pixels when the handle lands at a fractional position.\n        // The vertical divider is a zero-width box painted by its inline-start\n        // (left) border; the horizontal override below swaps to the block-start\n        // (top) border. Color is set with `border-color` (all sides) so it\n        // applies regardless of which side carries the width.\n        // Offset a flat 4px rather than centered with `start-1/2` / auto margins: the\n        // box's 8px of leftover space is split 4/4 around the line by construction,\n        // and centering an odd-width box would land the line on a half pixel.\n        'after:absolute after:inset-y-0 after:start-[4px] after:w-0',\n        'after:[border-inline-start-width:var(--ui-resizable-border-width)] after:border-solid after:[border-color:var(--ui-border-on-surface-border)]',\n        'hover:after:[border-color:var(--ui-resizable-border-color-hover)]',\n        'active:after:[border-color:var(--ui-resizable-border-color-active)]',\n        // Focus ring: 3px box-shadow on the line itself so it auto-centers (Figma 4649:6686).\n        'focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)] focus-visible:after:[border-color:var(--ui-resizable-border-color-active)]',\n        'active:after:shadow-none',\n        // orientation=horizontal = panels stacked → horizontal divider line.\n        // Draw it with the block-start (top) border and reset the inline-start\n        // border used for the vertical line, so the full-width line renders.\n        'aria-[orientation=horizontal]:ms-0 aria-[orientation=horizontal]:me-0 aria-[orientation=horizontal]:-mt-1 aria-[orientation=horizontal]:-mb-[5px] aria-[orientation=horizontal]:h-[9px] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-[ns-resize]',\n        'aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:start-auto aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:top-[4px] aria-[orientation=horizontal]:after:h-0 aria-[orientation=horizontal]:after:w-full',\n        'aria-[orientation=horizontal]:after:[border-inline-start-width:0] aria-[orientation=horizontal]:after:[border-block-start-width:var(--ui-resizable-border-width)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive.Group","cn","ResizablePanel","ResizablePrimitive.Panel","ResizableHandle","ResizablePrimitive.Separator"],"mappings":";;;AA4BA,SAASA,EAAoB,EAAE,WAAAC,GAAW,GAAGC,KAAwC;AACnF,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,2DAA2DJ,CAAS;AAAA,MACjF,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAeJ,GAAsC;AAC5D,SAAO,gBAAAC,EAACI,GAAA,EAA0B,GAAGL,EAAA,CAAO;AAC9C;AAIA,SAASM,EAAgB,EAAE,WAAAP,GAAW,GAAGC,KAA+B;AACtE,SACE,gBAAAC;AAAA,IAACM;AAAAA,IAAA;AAAA,MACC,WAAWJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAST;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAaA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/scroll-area/scroll-area.js

@@ -1,25 +1,29 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import * as i from "react";
-import { ScrollArea as a } from "@base-ui/react/scroll-area";
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import * as n from "react";
+import { ScrollArea as r } from "@base-ui/react/scroll-area";
 import { cn as s } from "../../../lib/utils.js";
-const c = i.forwardRef(
-  ({ className: e, orientation: o = "vertical", ...l }, t) => /* @__PURE__ */ r(
-    a.Scrollbar,
+const i = n.forwardRef(
+  ({ className: c, orientation: l = "vertical", ...o }, t) => /* @__PURE__ */ a(
+    r.Scrollbar,
     {
       ref: t,
-      orientation: o,
+      orientation: l,
       "data-slot": "scroll-area-scrollbar",
       className: s(
+        // Above anything the scrolled content stacks. A scrollbar that content
+        // can paint over is not a scrollbar — sticky table headers stack to z-50,
+        // so the bar must sit above them inside the isolated root.
+        "z-[60]",
         "flex touch-none select-none opacity-0 transition-opacity duration-150",
         // Revealed on hover/scroll; hidden at rest.
         "data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
-        o === "vertical" && "h-full w-2.5 p-px",
-        o === "horizontal" && "h-2.5 w-full flex-col p-px",
-        e
+        l === "vertical" && "h-full w-2.5 p-px",
+        l === "horizontal" && "h-2.5 w-full flex-col p-px",
+        c
       ),
-      ...l,
-      children: /* @__PURE__ */ r(
-        a.Thumb,
+      ...o,
+      children: /* @__PURE__ */ a(
+        r.Thumb,
         {
           "data-slot": "scroll-area-thumb",
           className: "relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]"
@@ -28,34 +32,46 @@ const c = i.forwardRef(
     }
   )
 );
-c.displayName = "ScrollBar";
-const f = i.forwardRef(
-  ({ className: e, children: o, orientation: l = "vertical", ...t }, n) => /* @__PURE__ */ d(
-    a.Root,
+i.displayName = "ScrollBar";
+const m = n.forwardRef(
+  ({
+    className: c,
+    children: l,
+    orientation: o = "vertical",
+    viewportRef: t,
+    viewportProps: e,
+    ...d
+  }, f) => /* @__PURE__ */ u(
+    r.Root,
     {
-      ref: n,
+      ref: f,
       "data-slot": "scroll-area",
-      className: s("relative overflow-hidden", e),
-      ...t,
+      className: s("relative isolate overflow-hidden", c),
+      ...d,
       children: [
-        /* @__PURE__ */ r(
-          a.Viewport,
+        /* @__PURE__ */ a(
+          r.Viewport,
           {
+            ref: t,
             "data-slot": "scroll-area-viewport",
-            className: "size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]",
-            children: /* @__PURE__ */ r(a.Content, { "data-slot": "scroll-area-content", children: o })
+            ...e,
+            className: s(
+              "size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]",
+              e == null ? void 0 : e.className
+            ),
+            children: /* @__PURE__ */ a(r.Content, { "data-slot": "scroll-area-content", children: l })
           }
         ),
-        l !== "horizontal" && /* @__PURE__ */ r(c, { orientation: "vertical" }),
-        l !== "vertical" && /* @__PURE__ */ r(c, { orientation: "horizontal" }),
-        l === "both" && /* @__PURE__ */ r(a.Corner, { "data-slot": "scroll-area-corner" })
+        o !== "horizontal" && /* @__PURE__ */ a(i, { orientation: "vertical" }),
+        o !== "vertical" && /* @__PURE__ */ a(i, { orientation: "horizontal" }),
+        o === "both" && /* @__PURE__ */ a(r.Corner, { "data-slot": "scroll-area-corner" })
       ]
     }
   )
 );
-f.displayName = "ScrollArea";
+m.displayName = "ScrollArea";
 export {
-  f as ScrollArea,
-  c as ScrollBar
+  m as ScrollArea,
+  i as ScrollBar
 };
 //# sourceMappingURL=scroll-area.js.map

package/dist/components/ui/scroll-area/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../../src/components/ui/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '@/lib/utils';\n\n// A scrollable region with a custom **overlay** scrollbar built on Base UI's\n// Scroll Area. Unlike a native `overflow: auto` element, the scrollbar floats\n// over the content and reserves **zero** layout space, so full-bleed content\n// (e.g. edge-to-edge selected rows in a sidebar) is never cropped by a gutter —\n// on every OS and browser, not just where the platform provides overlay bars.\n// The bar is revealed on hover/scroll and hidden at rest.\n\nexport type ScrollBarProps = React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.Scrollbar\n>;\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      data-slot=\"scroll-area-scrollbar\"\n      className={cn(\n        'flex touch-none select-none opacity-0 transition-opacity duration-150',\n        // Revealed on hover/scroll; hidden at rest.\n        'data-[hovering]:opacity-100 data-[scrolling]:opacity-100',\n        orientation === 'vertical' && 'h-full w-2.5 p-px',\n        orientation === 'horizontal' && 'h-2.5 w-full flex-col p-px',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n);\nScrollBar.displayName = 'ScrollBar';\n\nexport interface ScrollAreaProps\n  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /** Which scrollbar(s) to render. @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal' | 'both';\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, children, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot=\"scroll-area\"\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]\"\n      >\n        <ScrollAreaPrimitive.Content data-slot=\"scroll-area-content\">\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {orientation !== 'horizontal' && <ScrollBar orientation=\"vertical\" />}\n      {orientation !== 'vertical' && <ScrollBar orientation=\"horizontal\" />}\n      {orientation === 'both' && (\n        <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n      )}\n    </ScrollAreaPrimitive.Root>\n  )\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollBar","React","className","orientation","props","ref","jsx","ScrollAreaPrimitive","cn","ScrollArea","children","jsxs"],"mappings":";;;;AAgBA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAASC,MAClD,gBAAAC;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWK;AAAA,QACT;AAAA;AAAA,QAEA;AAAA,QACAL,MAAgB,cAAc;AAAA,QAC9BA,MAAgB,gBAAgB;AAAA,QAChCD;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;AACAP,EAAU,cAAc;AAQxB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,aAAAP,IAAc,YAAY,GAAGC,EAAA,GAASC,MAC5D,gBAAAM;AAAA,IAACJ,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG,EAAG,4BAA4BN,CAAS;AAAA,MAClD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC,EAAoB;AAAA,UAApB;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAEV,4BAACA,EAAoB,SAApB,EAA4B,aAAU,uBACpC,UAAAG,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDP,MAAgB,gBAAgB,gBAAAG,EAACN,GAAA,EAAU,aAAY,YAAW;AAAA,QAClEG,MAAgB,cAAc,gBAAAG,EAACN,GAAA,EAAU,aAAY,cAAa;AAAA,QAClEG,MAAgB,UACf,gBAAAG,EAACC,EAAoB,QAApB,EAA2B,aAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAInE;AACAE,EAAW,cAAc;"}
+{"version":3,"file":"scroll-area.js","sources":["../../../../src/components/ui/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '@/lib/utils';\n\n// A scrollable region with a custom **overlay** scrollbar built on Base UI's\n// Scroll Area. Unlike a native `overflow: auto` element, the scrollbar floats\n// over the content and reserves **zero** layout space, so full-bleed content\n// (e.g. edge-to-edge selected rows in a sidebar) is never cropped by a gutter —\n// on every OS and browser, not just where the platform provides overlay bars.\n// The bar is revealed on hover/scroll and hidden at rest.\n\nexport type ScrollBarProps = React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.Scrollbar\n>;\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      data-slot=\"scroll-area-scrollbar\"\n      className={cn(\n        // Above anything the scrolled content stacks. A scrollbar that content\n        // can paint over is not a scrollbar — sticky table headers stack to z-50,\n        // so the bar must sit above them inside the isolated root.\n        'z-[60]',\n        'flex touch-none select-none opacity-0 transition-opacity duration-150',\n        // Revealed on hover/scroll; hidden at rest.\n        'data-[hovering]:opacity-100 data-[scrolling]:opacity-100',\n        orientation === 'vertical' && 'h-full w-2.5 p-px',\n        orientation === 'horizontal' && 'h-2.5 w-full flex-col p-px',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n);\nScrollBar.displayName = 'ScrollBar';\n\nexport interface ScrollAreaProps\n  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /** Which scrollbar(s) to render. @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal' | 'both';\n  /**\n   * Ref to the **viewport** — the element that actually scrolls.\n   *\n   * `ref` reaches the root, which is `overflow: hidden` and never scrolls, so\n   * it reports `scrollTop: 0` and `scrollHeight === clientHeight` forever.\n   * Anything that measures, observes, or programmatically scrolls the region\n   * needs this one instead: a virtualizer's scroll element, an infinite-scroll\n   * observer, a scroll-to-item call.\n   */\n  viewportRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Extra props for the viewport — a scroll handler, a tab index, or\n   * `data-*` attributes that must sit on the element that scrolls rather than\n   * on the wrapper around it.\n   *\n   * The `data-*` index signature is deliberate: JSX grants intrinsic elements\n   * an arbitrary-`data-*` escape hatch, but a props object typed as\n   * `HTMLAttributes` does not get it — so without this, the main thing this\n   * prop exists for (marking the scrolling element for an observer) would not\n   * type-check.\n   */\n  viewportProps?: React.HTMLAttributes<HTMLDivElement> & {\n    readonly [attribute: `data-${string}`]: unknown;\n  };\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      className,\n      children,\n      orientation = 'vertical',\n      viewportRef,\n      viewportProps,\n      ...props\n    },\n    ref,\n  ) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot=\"scroll-area\"\n      // `isolate` contains the scroll area's stacking order. Without it the\n      // root is `position: relative` with no z-index — not a stacking context\n      // — so a z-index set on scrolled content competes against everything in\n      // the document, and the scrollbar's own z-index would too. Isolating\n      // keeps both local. It is `isolation`, deliberately, not\n      // `contain`/`transform`: those would create a containing block and break\n      // `position: sticky` inside the viewport.\n      className={cn('relative isolate overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        ref={viewportRef}\n        data-slot=\"scroll-area-viewport\"\n        {...viewportProps}\n        className={cn(\n          'size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]',\n          viewportProps?.className,\n        )}\n      >\n        <ScrollAreaPrimitive.Content data-slot=\"scroll-area-content\">\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {orientation !== 'horizontal' && <ScrollBar orientation=\"vertical\" />}\n      {orientation !== 'vertical' && <ScrollBar orientation=\"horizontal\" />}\n      {orientation === 'both' && (\n        <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n      )}\n    </ScrollAreaPrimitive.Root>\n  ),\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollBar","React","className","orientation","props","ref","jsx","ScrollAreaPrimitive","cn","ScrollArea","children","viewportRef","viewportProps","jsxs"],"mappings":";;;;AAgBA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAASC,MAClD,gBAAAC;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWK;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACAL,MAAgB,cAAc;AAAA,QAC9BA,MAAgB,gBAAgB;AAAA,QAChCD;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;AACAP,EAAU,cAAc;AAgCxB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAQ;AAAA,IACA,aAAAP,IAAc;AAAA,IACd,aAAAQ;AAAA,IACA,eAAAC;AAAA,IACA,GAAGR;AAAA,EAAA,GAELC,MAEA,gBAAAQ;AAAA,IAACN,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MAQV,WAAWG,EAAG,oCAAoCN,CAAS;AAAA,MAC1D,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC,EAAoB;AAAA,UAApB;AAAA,YACC,KAAKI;AAAA,YACL,aAAU;AAAA,YACT,GAAGC;AAAA,YACJ,WAAWJ;AAAA,cACT;AAAA,cACAI,KAAA,gBAAAA,EAAe;AAAA,YAAA;AAAA,YAGjB,4BAACL,EAAoB,SAApB,EAA4B,aAAU,uBACpC,UAAAG,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDP,MAAgB,gBAAgB,gBAAAG,EAACN,GAAA,EAAU,aAAY,YAAW;AAAA,QAClEG,MAAgB,cAAc,gBAAAG,EAACN,GAAA,EAAU,aAAY,cAAa;AAAA,QAClEG,MAAgB,UACf,gBAAAG,EAACC,EAAoB,QAApB,EAA2B,aAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAInE;AACAE,EAAW,cAAc;"}