npm - @acronis-platform/ui-react - Versions diffs - 0.54.0 → 0.55.0 - Mend

@acronis-platform/ui-react 0.54.0 → 0.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/dist/components/ui/sidebar-primary/sidebar-primary.js CHANGED Viewed

@@ -1,76 +1,89 @@
-import { jsx as i, jsxs as y, Fragment as w } from "react/jsx-runtime";
-import * as t from "react";
-import { mergeProps as x } from "@base-ui/react/merge-props";
+import { jsx as i, jsxs as v, Fragment as _ } from "react/jsx-runtime";
+import * as n from "react";
+import { mergeProps as y } from "@base-ui/react/merge-props";
 import { useRender as f } from "@base-ui/react/use-render";
-import { SquareArrowUpRightIcon as S } from "@acronis-platform/icons-react/stroke-mono";
-import { cva as P } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as l } from "../../../lib/utils.js";
-import { ScrollArea as R } from "../scroll-area/scroll-area.js";
-const h = t.createContext(null);
+import { SquareArrowUpRightIcon as T } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as E } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as m } from "../../../lib/utils.js";
+import { Tooltip as x, TooltipTrigger as h, TooltipContent as w } from "../tooltip/tooltip.js";
+import { ScrollArea as I } from "../scroll-area/scroll-area.js";
+const N = n.createContext(null);
 function g() {
-  return t.useContext(h) ?? {
+  return n.useContext(N) ?? {
     expanded: !0,
     toggleExpanded: () => {
     }
   };
 }
-function _(a, e, r) {
-  const [n, d] = t.useState(e), o = a !== void 0, m = o ? a : n, u = t.useCallback(
-    (s) => {
-      o || d(s), r == null || r(s);
+function M(a, e, r) {
+  const [s, t] = n.useState(e), o = a !== void 0, l = o ? a : s, d = n.useCallback(
+    (c) => {
+      o || t(c), r == null || r(c);
     },
     [o, r]
   );
-  return [m, u];
+  return [l, d];
 }
-const E = t.forwardRef(
+function S(a, { enabled: e }) {
+  const [r, s] = n.useState(!1);
+  return n.useEffect(() => {
+    const t = a.current;
+    if (!e || !t) {
+      s(!1);
+      return;
+    }
+    const o = () => s(t.scrollWidth > t.clientWidth);
+    o();
+    const l = new ResizeObserver(o);
+    return l.observe(t), () => l.disconnect();
+  }, [a, e]), r;
+}
+const k = n.forwardRef(
   ({
     className: a,
     expanded: e,
     defaultExpanded: r = !0,
-    onExpandedChange: n,
-    "aria-label": d = "Primary",
+    onExpandedChange: s,
+    "aria-label": t = "Primary",
     render: o,
-    children: m,
-    ...u
-  }, s) => {
-    const [c, p] = _(
+    children: l,
+    ...d
+  }, c) => {
+    const [u, p] = M(
       e,
       r,
-      n
-    ), v = t.useMemo(
-      () => ({ expanded: c, toggleExpanded: () => p(!c) }),
-      [c, p]
-    ), b = f({
+      s
+    ), b = n.useMemo(
+      () => ({ expanded: u, toggleExpanded: () => p(!u) }),
+      [u, p]
+    ), R = f({
       render: o,
-      ref: s,
+      ref: c,
       defaultTagName: "nav",
-      props: x(
+      props: y(
         {
-          "aria-label": d,
-          "data-state": c ? "expanded" : "collapsed",
-          className: l(
+          "aria-label": t,
+          "data-state": u ? "expanded" : "collapsed",
+          className: m(
             "group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-primary-global-container-color)] w-[var(--ui-sidebar-primary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-primary-expanded-container-width)] transition-[width]",
             a
           ),
-          children: m
+          children: l
         },
-        u
+        d
       )
     });
-    return /* @__PURE__ */ i(h.Provider, { value: v, children: b });
+    return /* @__PURE__ */ i(N.Provider, { value: b, children: R });
   }
 );
-E.displayName = "SidebarPrimary";
-const M = t.forwardRef(({ className: a, ...e }, r) => (
-  // Hosts a consumer-provided logo (R7 — no Logo part is built). Padding and the
-  // logo height switch on expanded/collapsed; `[&_*]:h-…` sizes whatever the
-  // consumer slots in. The logo color token tints any `currentColor` mark.
-  /* @__PURE__ */ i(
+k.displayName = "SidebarPrimary";
+const z = n.forwardRef(({ className: a, logo: e, collapsedLogo: r, children: s, ...t }, o) => {
+  const { expanded: l } = g(), c = e != null || r != null ? l ? e ?? r : r ?? e : s;
+  return /* @__PURE__ */ i(
     "div",
     {
-      ref: r,
-      className: l(
+      ref: o,
+      className: m(
         "flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)]",
         "px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]",
         "[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto",
@@ -78,62 +91,79 @@ const M = t.forwardRef(({ className: a, ...e }, r) => (
         "group-data-[state=expanded]/sidebar:[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-expanded-logo-height)]",
         a
       ),
-      ...e
+      ...t,
+      children: c
     }
-  )
-));
-M.displayName = "SidebarPrimaryHeader";
-const k = t.forwardRef(({ className: a, children: e, ...r }, n) => (
+  );
+});
+z.displayName = "SidebarPrimaryHeader";
+const O = n.forwardRef(({ className: a, children: e, ...r }, s) => (
   // The section list scrolls inside a ScrollArea: its overlay scrollbar floats
   // over the content and reserves no gutter, so the full-bleed selected row is
   // never cropped — on every OS, unlike a native `overflow` scrollbar.
-  /* @__PURE__ */ i(R, { ref: n, className: l("min-h-0 flex-1", a), ...r, children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]", children: e }) })
+  //
+  // Base UI's Scroll Area Content sets `min-width: fit-content` inline (it
+  // needs the content's true intrinsic width to detect horizontal overflow),
+  // which forces every row wider than the rail — overriding `min-w-0` +
+  // `truncate` on a long label, since intrinsic-width calculations ignore
+  // `text-overflow`. We only ever scroll vertically here, so cancel it: the
+  // `!` (important) is required to beat the inline style's specificity.
+  /* @__PURE__ */ i(
+    I,
+    {
+      ref: s,
+      className: m(
+        "min-h-0 flex-1 [&_[data-slot=scroll-area-content]]:min-w-0!",
+        a
+      ),
+      ...r,
+      children: /* @__PURE__ */ i("div", { className: "flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]", children: e })
+    }
+  )
 ));
-k.displayName = "SidebarPrimaryContent";
-const I = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
+O.displayName = "SidebarPrimaryContent";
+const C = n.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
     ref: r,
-    className: l(
+    className: m(
       "flex flex-col shrink-0 gap-[var(--ui-sidebar-primary-global-footer-list-gap)]",
       "border-t border-[var(--ui-sidebar-primary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-primary-global-container-footer-border-width)]",
-      "py-[var(--ui-sidebar-primary-section-container-padding-y)]",
       a
     ),
     ...e
   }
 ));
-I.displayName = "SidebarPrimaryFooter";
-const z = t.forwardRef(({ className: a, ...e }, r) => (
-  // `firstSection` in Figma only toggles the top divider — derive it from DOM
+C.displayName = "SidebarPrimaryFooter";
+const F = n.forwardRef(({ className: a, ...e }, r) => (
   // position (`:not(:first-child)`) instead of a prop.
   /* @__PURE__ */ i(
     "div",
     {
       ref: r,
-      className: l(
-        "flex flex-col py-[var(--ui-sidebar-primary-section-container-padding-y)]",
-        "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-[var(--ui-sidebar-primary-section-container-border-color)] [&:not(:first-child)]:[border-top-width:var(--ui-sidebar-primary-section-container-border-width)]",
+      className: m(
+        "flex flex-col pb-[var(--ui-sidebar-primary-section-container-padding-y)]",
+        "[&:not(:first-child)]:border-t [&:not(:first-child)]:border-[var(--ui-sidebar-primary-section-container-border-color)] [&:not(:first-child)]:[border-top-width:var(--ui-sidebar-primary-section-container-border-width)] [&:not(:first-child)]:pt-[var(--ui-sidebar-primary-section-container-padding-y)]",
         a
       ),
       ...e
     }
   )
 ));
-z.displayName = "SidebarPrimarySection";
-const T = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
+F.displayName = "SidebarPrimarySection";
+const L = n.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
   "ul",
   {
     ref: r,
-    className: l(
+    className: m(
       "flex flex-col gap-[var(--ui-sidebar-primary-section-menu-item-list-gap)]",
       a
     ),
     ...e
   }
 ));
-T.displayName = "SidebarPrimaryMenu";
-const N = P(
+L.displayName = "SidebarPrimaryMenu";
+const P = E(
   "group/menu-item flex w-full items-center gap-[var(--ui-sidebar-primary-menu-item-global-container-gap)] h-[var(--ui-sidebar-primary-menu-item-global-container-height)] px-[var(--ui-sidebar-primary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-primary-menu-item-global-container-padding-y)] no-underline ui-sidebar-primary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-primary-menu-item-global-icon-size)]",
   {
     variants: {
@@ -146,62 +176,69 @@ const N = P(
       variant: "unselected"
     }
   }
-), C = t.forwardRef(({ className: a, selected: e = !1, icon: r, render: n, children: d, ...o }, m) => {
-  const { expanded: u } = g(), s = t.Children.toArray(d), c = s.filter(
-    (b) => t.isValidElement(b) && b.type.displayName === "SidebarPrimaryMenuItemExtras"
-  ), p = s.filter(
-    (b) => !c.includes(b)
-  ), v = f({
-    render: n,
-    ref: m,
-    defaultTagName: "a",
-    props: x(
-      {
-        className: l(
-          N({
-            variant: e ? "selected" : "unselected"
-          }),
-          a
-        ),
-        "aria-current": e ? "page" : void 0,
-        children: /* @__PURE__ */ y(w, { children: [
-          r != null && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: r }),
-          /* @__PURE__ */ i(
-            "span",
-            {
-              className: l(
-                "min-w-0 flex-1 truncate text-left",
-                !u && "sr-only"
-              ),
-              children: p
-            }
+), V = n.forwardRef(
+  ({ className: a, selected: e = !1, icon: r, render: s, children: t, extras: o, ...l }, d) => {
+    const { expanded: c } = g(), u = n.useRef(null), p = S(u, { enabled: c }), b = f({
+      render: s,
+      ref: d,
+      defaultTagName: "a",
+      props: y(
+        {
+          className: m(
+            P({
+              variant: e ? "selected" : "unselected"
+            }),
+            a
           ),
-          c.length > 0 && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center", children: c })
-        ] })
-      },
-      o
-    )
-  });
-  return /* @__PURE__ */ i("li", { className: "contents", children: v });
-});
-C.displayName = "SidebarPrimaryMenuItem";
-const V = t.forwardRef(({ className: a, variant: e, shortcut: r, tag: n, children: d, ...o }, m) => {
-  const { expanded: u } = g(), s = e === "tag" || e === "tag-externalLink", c = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
-  return /* @__PURE__ */ y(
+          "aria-current": e ? "page" : void 0,
+          children: /* @__PURE__ */ v(_, { children: [
+            r != null && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: r }),
+            /* @__PURE__ */ v(x, { disabled: !p, children: [
+              /* @__PURE__ */ i(
+                h,
+                {
+                  render: /* @__PURE__ */ i(
+                    "span",
+                    {
+                      ref: u,
+                      className: m(
+                        "min-w-0 flex-1 truncate text-start",
+                        !c && "sr-only"
+                      )
+                    }
+                  ),
+                  children: t
+                }
+              ),
+              /* @__PURE__ */ i(w, { children: t })
+            ] }),
+            o != null && /* @__PURE__ */ i("span", { className: m(!c && "hidden"), children: o })
+          ] })
+        },
+        l
+      )
+    });
+    return /* @__PURE__ */ i("li", { className: "contents", children: b });
+  }
+);
+V.displayName = "SidebarPrimaryMenuItem";
+const j = n.forwardRef(({ className: a, variant: e, shortcut: r, tag: s, children: t, ...o }, l) => {
+  const { expanded: d } = g(), c = e === "tag" || e === "tag-externalLink", u = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
+  return /* @__PURE__ */ v(
     "span",
     {
-      ref: m,
-      className: l(
+      ref: l,
+      className: m(
         "inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]",
-        !u && "hidden",
+        !d && "hidden",
         a
       ),
       ...o,
       children: [
-        s && (n ?? d),
-        p && /* @__PURE__ */ i("span", { className: "ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]", children: r ?? d }),
-        c && /* @__PURE__ */ i(
-          S,
+        c && (s ?? t),
+        p && /* @__PURE__ */ i("span", { className: "ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]", children: r ?? t }),
+        u && /* @__PURE__ */ i(
+          T,
           {
             size: 16,
             className: "text-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-size)]"
@@ -211,42 +248,71 @@ const V = t.forwardRef(({ className: a, variant: e, shortcut: r, tag: n, childre
     }
   );
 });
-V.displayName = "SidebarPrimaryMenuItemExtras";
-const A = t.forwardRef(({ className: a, icon: e, children: r, onClick: n, ...d }, o) => {
-  const { expanded: m, toggleExpanded: u } = g();
-  return /* @__PURE__ */ i("li", { className: "contents", children: /* @__PURE__ */ y(
+j.displayName = "SidebarPrimaryMenuItemExtras";
+const A = n.forwardRef(({ className: a, icon: e, children: r, extras: s, onClick: t, ...o }, l) => {
+  const { expanded: d, toggleExpanded: c } = g(), u = n.useRef(null), p = S(u, { enabled: d });
+  return /* @__PURE__ */ i("li", { className: "contents", children: /* @__PURE__ */ v(
     "button",
     {
-      ref: o,
+      ref: l,
       type: "button",
-      "aria-expanded": m,
-      className: l(
-        N({ variant: "unselected" }),
-        "text-left",
+      "aria-expanded": d,
+      className: m(
+        P({ variant: "unselected" }),
+        "text-start",
         a
       ),
-      onClick: (s) => {
-        n == null || n(s), s.defaultPrevented || u();
+      onClick: (b) => {
+        t == null || t(b), b.defaultPrevented || c();
       },
-      ...d,
+      ...o,
       children: [
-        e != null && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: e }),
-        /* @__PURE__ */ i("span", { className: l("flex-1 truncate", !m && "sr-only"), children: r })
+        e != null && /* @__PURE__ */ i(
+          "span",
+          {
+            className: m(
+              "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)] transition-transform",
+              d ? "rtl:rotate-180" : "ltr:rotate-180"
+            ),
+            children: e
+          }
+        ),
+        /* @__PURE__ */ v(x, { disabled: !p, children: [
+          /* @__PURE__ */ i(
+            h,
+            {
+              render: /* @__PURE__ */ i(
+                "span",
+                {
+                  ref: u,
+                  className: m(
+                    "min-w-0 flex-1 truncate",
+                    !d && "sr-only"
+                  )
+                }
+              ),
+              children: r
+            }
+          ),
+          /* @__PURE__ */ i(w, { children: r })
+        ] }),
+        s != null && /* @__PURE__ */ i("span", { className: m(!d && "hidden"), children: s })
       ]
     }
   ) });
 });
 A.displayName = "SidebarPrimaryCollapseTrigger";
 export {
-  E as SidebarPrimary,
+  k as SidebarPrimary,
   A as SidebarPrimaryCollapseTrigger,
-  k as SidebarPrimaryContent,
-  I as SidebarPrimaryFooter,
-  M as SidebarPrimaryHeader,
-  T as SidebarPrimaryMenu,
-  C as SidebarPrimaryMenuItem,
-  V as SidebarPrimaryMenuItemExtras,
-  z as SidebarPrimarySection,
-  N as sidebarPrimaryMenuItemVariants
+  O as SidebarPrimaryContent,
+  C as SidebarPrimaryFooter,
+  z as SidebarPrimaryHeader,
+  L as SidebarPrimaryMenu,
+  V as SidebarPrimaryMenuItem,
+  j as SidebarPrimaryMenuItemExtras,
+  F as SidebarPrimarySection,
+  P as sidebarPrimaryMenuItemVariants,
+  S as useIsOverflowing
 };
 //# sourceMappingURL=sidebar-primary.js.map

package/dist/components/ui/sidebar-primary/sidebar-primary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar-primary.js","sources":["../../../../src/components/ui/sidebar-primary/sidebar-primary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nimport { ScrollArea } from '../scroll-area';\n\n// Composable SidebarPrimary primitives mirroring the Figma \"SidebarPrimary\"\n// component set (node 2092:4359, variant expanded\|collapsed). Every color and\n// metric is wired to a next-gen `--ui-sidebar-primary-` token from\n// @acronis-platform/tokens-pd — no hex, no invented tokens.\n//\n// expanded/collapsed is a width-reflow state, not a panel show/hide, so it is\n// modelled as a controlled/uncontrolled `expanded` prop (default true) that sets\n// `data-state=\"expanded\|collapsed\"` on the root. Every metric token has a\n// distinct `collapsed-` / `expanded-` name, switched via `data-[state=…]`\n// attribute selectors — Base UI Collapsible would fight this (it hides a panel;\n// the rail never hides). Layout state is shared to descendants through a small\n// context so menu items know whether to show or `sr-only` their label/extras.\n//\n// R2 (menu-item border-radius): the token tier ships no radius token. Verified\n// against the Figma node — the menu-item COMPONENT and its container frame both\n// report cornerRadius=None (the only radius in the node is the COMPONENT_SET's\n// own variant-container chrome). Rows are therefore SQUARE; no `rounded-` is\n// applied. The focus ring uses the shared `--ui-focus-brand` (no sidebar focus\n// token exists — R1), matching Button/Breadcrumb.\n\ninterface SidebarPrimaryContextValue {\n expanded: boolean;\n /** Flip the rail width — drives the controlled/uncontrolled `expanded` state. /\n toggleExpanded: () => void;\n}\n\nconst SidebarPrimaryContext =\n React.createContext<SidebarPrimaryContextValue \| null>(null);\n\nfunction useSidebarPrimaryContext(): SidebarPrimaryContextValue {\n // Default to expanded so parts render standalone (e.g. in isolation tests /\n // stories) without a wrapping root; the toggle is a no-op outside a root.\n return (\n React.useContext(SidebarPrimaryContext) ?? {\n expanded: true,\n toggleExpanded: () => {},\n }\n );\n}\n\n/\n Controlled + uncontrolled boolean state (the Base UI idiom). When `controlled`\n * is provided it wins and the setter only emits the change callback; otherwise\n * the setter updates internal state. `onChange` is ALWAYS invoked with the next\n * value so a consumer can react in either mode.\n /\nfunction useControllableBoolean(\n controlled: boolean \| undefined,\n defaultValue: boolean,\n onChange?: (next: boolean) => void\n): [boolean, (next: boolean) => void] {\n const [uncontrolled, setUncontrolled] = React.useState(defaultValue);\n const isControlled = controlled !== undefined;\n const value = isControlled ? controlled : uncontrolled;\n const setValue = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolled(next);\n onChange?.(next);\n },\n [isControlled, onChange]\n );\n return [value, setValue];\n}\n\nexport interface SidebarPrimaryProps\n extends React.ComponentPropsWithoutRef<'nav'> {\n /* Controlled expanded (rail width) state. /\n expanded?: boolean;\n /* Uncontrolled initial expanded state. Defaults to `true` (full width). /\n defaultExpanded?: boolean;\n /* Fires when the expanded state changes (e.g. a consumer toggle). /\n onExpandedChange?: (expanded: boolean) => void;\n /\n Replace the rendered `<nav>` with another element or component\n * (Base UI composition). Accepts a React element or a render function.\n /\n render?: useRender.RenderProp;\n}\n\nconst SidebarPrimary = React.forwardRef<HTMLElement, SidebarPrimaryProps>(\n (\n {\n className,\n expanded: expandedProp,\n defaultExpanded = true,\n onExpandedChange,\n 'aria-label': ariaLabel = 'Primary',\n render,\n children,\n ...props\n },\n ref\n ) => {\n const [expanded, setExpanded] = useControllableBoolean(\n expandedProp,\n defaultExpanded,\n onExpandedChange\n );\n\n // Collapse is driven by the consumer through the layout context — the\n // `SidebarPrimaryCollapseTrigger` (the Figma \"Collapse menu\" footer item)\n // calls `toggleExpanded`, which updates uncontrolled state and always emits\n // `onExpandedChange`. Controlled consumers ignore the internal state and\n // react to the callback.\n const context = React.useMemo<SidebarPrimaryContextValue>(\n () => ({ expanded, toggleExpanded: () => setExpanded(!expanded) }),\n [expanded, setExpanded]\n );\n\n const element = useRender({\n render,\n ref,\n defaultTagName: 'nav',\n props: mergeProps<'nav'>(\n {\n 'aria-label': ariaLabel,\n // `data-state` drives every collapsed/expanded token switch via\n // attribute selectors; typed loosely because React's nav attribute\n // map doesn't include arbitrary data- keys as literals.\n ...({ 'data-state': expanded ? 'expanded' : 'collapsed' } as Record<\n string,\n string\n >),\n className: cn(\n 'group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-primary-global-container-color)] w-[var(--ui-sidebar-primary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-primary-expanded-container-width)] transition-[width]',\n className\n ),\n children,\n },\n props\n ),\n });\n\n return (\n <SidebarPrimaryContext.Provider value={context}>\n {element}\n </SidebarPrimaryContext.Provider>\n );\n }\n);\nSidebarPrimary.displayName = 'SidebarPrimary';\n\nconst SidebarPrimaryHeader = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n // Hosts a consumer-provided logo (R7 — no Logo part is built). Padding and the\n // logo height switch on expanded/collapsed; `[&_]:h-…` sizes whatever the\n // consumer slots in. The logo color token tints any `currentColor` mark.\n <div\n ref={ref}\n className={cn(\n 'flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)]',\n 'px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]',\n '[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto',\n 'group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-primary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-primary-expanded-container-header-padding-y)]',\n 'group-data-[state=expanded]/sidebar:[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-expanded-logo-height)]',\n className\n )}\n {...props}\n />\n));\nSidebarPrimaryHeader.displayName = 'SidebarPrimaryHeader';\n\nconst SidebarPrimaryContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n // The section list scrolls inside a ScrollArea: its overlay scrollbar floats\n // over the content and reserves no gutter, so the full-bleed selected row is\n // never cropped — on every OS, unlike a native `overflow` scrollbar.\n <ScrollArea ref={ref} className={cn('min-h-0 flex-1', className)} {...props}>\n <div className=\"flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]\">\n {children}\n </div>\n </ScrollArea>\n));\nSidebarPrimaryContent.displayName = 'SidebarPrimaryContent';\n\nconst SidebarPrimaryFooter = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col shrink-0 gap-[var(--ui-sidebar-primary-global-footer-list-gap)]',\n 'border-t border-[var(--ui-sidebar-primary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-primary-global-container-footer-border-width)]',\n 'py-[var(--ui-sidebar-primary-section-container-padding-y)]',\n className\n )}\n {...props}\n />\n));\nSidebarPrimaryFooter.displayName = 'SidebarPrimaryFooter';\n\nconst SidebarPrimarySection = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n // `firstSection` in Figma only toggles the top divider — derive it from DOM\n // position (`:not(:first-child)`) instead of a prop.\n <div\n ref={ref}\n className={cn(\n 'flex flex-col py-[var(--ui-sidebar-primary-section-container-padding-y)]',\n '[&:not(:first-child)]:border-t [&:not(:first-child)]:border-[var(--ui-sidebar-primary-section-container-border-color)] [&:not(:first-child)]:[border-top-width:var(--ui-sidebar-primary-section-container-border-width)]',\n className\n )}\n {...props}\n />\n));\nSidebarPrimarySection.displayName = 'SidebarPrimarySection';\n\nconst SidebarPrimaryMenu = React.forwardRef<\n HTMLUListElement,\n React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n className={cn(\n 'flex flex-col gap-[var(--ui-sidebar-primary-section-menu-item-list-gap)]',\n className\n )}\n {...props}\n />\n));\nSidebarPrimaryMenu.displayName = 'SidebarPrimaryMenu';\n\n// Primary recolors the container, the icon AND the label per variant\n// (selected\|unselected) × interaction state (idle/hover/active). Every state is\n// wired to its own token even where acronis's value is unchanged, because these\n// are runtime `var()` references — a brand override is only honored if the\n// matching state token is referenced. (This is why Primary cannot share a cva\n// with Secondary, which recolors only the container — DESIGN §6.2.)\nconst sidebarPrimaryMenuItemVariants = cva(\n 'group/menu-item flex w-full items-center gap-[var(--ui-sidebar-primary-menu-item-global-container-gap)] h-[var(--ui-sidebar-primary-menu-item-global-container-height)] px-[var(--ui-sidebar-primary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-primary-menu-item-global-container-padding-y)] no-underline ui-sidebar-primary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-primary-menu-item-global-icon-size)]',\n {\n variants: {\n variant: {\n unselected:\n 'bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-active)]',\n selected:\n 'bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-selected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-active)]',\n },\n },\n defaultVariants: {\n variant: 'unselected',\n },\n }\n);\n\nexport interface SidebarPrimaryMenuItemProps\n extends Omit<React.ComponentPropsWithoutRef<'a'>, 'children'>,\n Omit<VariantProps<typeof sidebarPrimaryMenuItemVariants>, 'variant'> {\n /* Marks the current route: sets the `selected` variant + `aria-current=\"page\"`. /\n selected?: boolean;\n /* Leading 16px icon (from `@acronis-platform/icons-react`). /\n icon?: React.ReactNode;\n children?: React.ReactNode;\n /\n Replace the rendered `<a>` with another element or component (e.g. a router\n * `Link` or a `<button>`) via Base UI composition.\n /\n render?: useRender.RenderProp;\n}\n\nconst SidebarPrimaryMenuItem = React.forwardRef<\n HTMLAnchorElement,\n SidebarPrimaryMenuItemProps\n>(({ className, selected = false, icon, render, children, ...props }, ref) => {\n const { expanded } = useSidebarPrimaryContext();\n\n // Trailing extras (tag / shortcut / external link) are passed as children but\n // belong at the right edge of the row — split them out so the title takes the\n // remaining width and truncates with an ellipsis, while the extras stay\n // `shrink-0` on the right (the row's `gap` is their left margin).\n const items = React.Children.toArray(children);\n const extras = items.filter(\n (child): child is React.ReactElement =>\n React.isValidElement(child) &&\n (child.type as { displayName?: string }).displayName ===\n 'SidebarPrimaryMenuItemExtras'\n );\n const label = items.filter(\n (child) => !extras.includes(child as React.ReactElement)\n );\n\n const inner = useRender({\n render,\n ref,\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n sidebarPrimaryMenuItemVariants({\n variant: selected ? 'selected' : 'unselected',\n }),\n className\n ),\n 'aria-current': selected ? 'page' : undefined,\n children: (\n <>\n {icon != null && (\n <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]\">\n {icon}\n </span>\n )}\n {/ Keep the label in the DOM in collapsed/rail mode as `sr-only` so\n the icon-only row keeps an accessible name (a11y §7) — never\n `display:none` the text. Extras are visually dropped when\n collapsed but stay queryable for the same reason. /}\n <span\n className={cn(\n 'min-w-0 flex-1 truncate text-left',\n !expanded && 'sr-only'\n )}\n >\n {label}\n </span>\n {extras.length > 0 && (\n <span className=\"flex shrink-0 items-center\">{extras}</span>\n )}\n </>\n ),\n },\n props\n ),\n });\n\n return <li className=\"contents\">{inner}</li>;\n});\nSidebarPrimaryMenuItem.displayName = 'SidebarPrimaryMenuItem';\n\nexport interface SidebarPrimaryMenuItemExtrasProps\n extends React.ComponentPropsWithoutRef<'span'> {\n /* Which trailing affordance to render. /\n variant: 'tag' \| 'externalLink' \| 'shortcut' \| 'tag-externalLink';\n /* Shortcut text (e.g. \"⌘H\") for the `shortcut` variant. /\n shortcut?: string;\n /* Tag content for the `tag` / `tag-externalLink` variants. /\n tag?: React.ReactNode;\n}\n\nconst SidebarPrimaryMenuItemExtras = React.forwardRef<\n HTMLSpanElement,\n SidebarPrimaryMenuItemExtrasProps\n>(({ className, variant, shortcut, tag, children, ...props }, ref) => {\n const { expanded } = useSidebarPrimaryContext();\n const showTag = variant === 'tag' \|\| variant === 'tag-externalLink';\n const showExternal =\n variant === 'externalLink' \|\| variant === 'tag-externalLink';\n const showShortcut = variant === 'shortcut';\n\n return (\n <span\n ref={ref}\n // The extras cluster is rail-mode noise — drop it when collapsed.\n className={cn(\n 'inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]',\n !expanded && 'hidden',\n className\n )}\n {...props}\n >\n {showTag && (tag ?? children)}\n {showShortcut && (\n <span className=\"ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]\">\n {shortcut ?? children}\n </span>\n )}\n {showExternal && (\n <SquareArrowUpRightIcon\n size={16}\n className=\"text-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-size)]\"\n />\n )}\n </span>\n );\n});\nSidebarPrimaryMenuItemExtras.displayName = 'SidebarPrimaryMenuItemExtras';\n\nexport interface SidebarPrimaryCollapseTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {\n /* Leading 16px icon (e.g. a panel-left glyph). */\n icon?: React.ReactNode;\n children?: React.ReactNode;\n}\n\n// The footer \"Collapse menu\" affordance (Figma). A menu-item-styled `<button>`\n// that flips the rail width via the layout context — this is the live wiring\n// for the controllable `expanded` state (B1). In collapsed mode it keeps its\n// label as `sr-only` like every other row.\nconst SidebarPrimaryCollapseTrigger = React.forwardRef<\n HTMLButtonElement,\n SidebarPrimaryCollapseTriggerProps\n>(({ className, icon, children, onClick, ...props }, ref) => {\n const { expanded, toggleExpanded } = useSidebarPrimaryContext();\n\n return (\n <li className=\"contents\">\n <button\n ref={ref}\n type=\"button\"\n aria-expanded={expanded}\n className={cn(\n sidebarPrimaryMenuItemVariants({ variant: 'unselected' }),\n 'text-left',\n className\n )}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) toggleExpanded();\n }}\n {...props}\n >\n {icon != null && (\n <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]\">\n {icon}\n </span>\n )}\n <span className={cn('flex-1 truncate', !expanded && 'sr-only')}>\n {children}\n </span>\n </button>\n </li>\n );\n});\nSidebarPrimaryCollapseTrigger.displayName = 'SidebarPrimaryCollapseTrigger';\n\nexport {\n SidebarPrimary,\n SidebarPrimaryHeader,\n SidebarPrimaryContent,\n SidebarPrimaryFooter,\n SidebarPrimarySection,\n SidebarPrimaryMenu,\n SidebarPrimaryMenuItem,\n SidebarPrimaryMenuItemExtras,\n SidebarPrimaryCollapseTrigger,\n sidebarPrimaryMenuItemVariants,\n};\n"],"names":["SidebarPrimaryContext","React","useSidebarPrimaryContext","useControllableBoolean","controlled","defaultValue","onChange","uncontrolled","setUncontrolled","isControlled","value","setValue","next","SidebarPrimary","className","expandedProp","defaultExpanded","onExpandedChange","ariaLabel","render","children","props","ref","expanded","setExpanded","context","element","useRender","mergeProps","cn","SidebarPrimaryHeader","jsx","SidebarPrimaryContent","ScrollArea","SidebarPrimaryFooter","SidebarPrimarySection","SidebarPrimaryMenu","sidebarPrimaryMenuItemVariants","cva","SidebarPrimaryMenuItem","selected","icon","items","extras","child","label","inner","jsxs","Fragment","SidebarPrimaryMenuItemExtras","variant","shortcut","tag","showTag","showExternal","showShortcut","SquareArrowUpRightIcon","SidebarPrimaryCollapseTrigger","onClick","toggleExpanded","event"],"mappings":"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"}
1	+ {"version":3,"file":"sidebar-primary.js","sources":["../../../../src/components/ui/sidebar-primary/sidebar-primary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { SquareArrowUpRightIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nimport { ScrollArea } from '../scroll-area';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// Composable SidebarPrimary primitives mirroring the Figma \"SidebarPrimary\"\n// component set (node 2092:4359, variant expanded\|collapsed). Every color and\n// metric is wired to a next-gen `--ui-sidebar-primary-` token from\n// @acronis-platform/tokens-pd — no hex, no invented tokens.\n//\n// expanded/collapsed is a width-reflow state, not a panel show/hide, so it is\n// modelled as a controlled/uncontrolled `expanded` prop (default true) that sets\n// `data-state=\"expanded\|collapsed\"` on the root. Every metric token has a\n// distinct `collapsed-` / `expanded-` name, switched via `data-[state=…]`\n// attribute selectors — Base UI Collapsible would fight this (it hides a panel;\n// the rail never hides). Layout state is shared to descendants through a small\n// context so menu items know whether to show or `sr-only` their label/extras.\n//\n// R2 (menu-item border-radius): the token tier ships no radius token. Verified\n// against the Figma node — the menu-item COMPONENT and its container frame both\n// report cornerRadius=None (the only radius in the node is the COMPONENT_SET's\n// own variant-container chrome). Rows are therefore SQUARE; no `rounded-` is\n// applied. The focus ring uses the shared `--ui-focus-brand` (no sidebar focus\n// token exists — R1), matching Button/Breadcrumb.\n\ninterface SidebarPrimaryContextValue {\n expanded: boolean;\n /** Flip the rail width — drives the controlled/uncontrolled `expanded` state. /\n toggleExpanded: () => void;\n}\n\nconst SidebarPrimaryContext =\n React.createContext<SidebarPrimaryContextValue \| null>(null);\n\nfunction useSidebarPrimaryContext(): SidebarPrimaryContextValue {\n // Default to expanded so parts render standalone (e.g. in isolation tests /\n // stories) without a wrapping root; the toggle is a no-op outside a root.\n return (\n React.useContext(SidebarPrimaryContext) ?? {\n expanded: true,\n toggleExpanded: () => {},\n }\n );\n}\n\n/\n Controlled + uncontrolled boolean state (the Base UI idiom). When `controlled`\n * is provided it wins and the setter only emits the change callback; otherwise\n * the setter updates internal state. `onChange` is ALWAYS invoked with the next\n * value so a consumer can react in either mode.\n /\nfunction useControllableBoolean(\n controlled: boolean \| undefined,\n defaultValue: boolean,\n onChange?: (next: boolean) => void\n): [boolean, (next: boolean) => void] {\n const [uncontrolled, setUncontrolled] = React.useState(defaultValue);\n const isControlled = controlled !== undefined;\n const value = isControlled ? controlled : uncontrolled;\n const setValue = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setUncontrolled(next);\n onChange?.(next);\n },\n [isControlled, onChange]\n );\n return [value, setValue];\n}\n\n/\n Tracks whether `ref`'s element is clipping its own content (`scrollWidth >\n * clientWidth`) — used to gate a tooltip so it only opens when a truncated\n * label is actually cut off. Re-measures via `ResizeObserver` (covers the\n * rail's expand/collapse width transition); `enabled` skips measurement\n * entirely (e.g. while collapsed, where the label is `sr-only`).\n /\nfunction useIsOverflowing<T extends Element>(\n ref: React.RefObject<T \| null>,\n { enabled }: { enabled: boolean }\n): boolean {\n const [isOverflowing, setIsOverflowing] = React.useState(false);\n\n React.useEffect(() => {\n const element = ref.current;\n if (!enabled \|\| !element) {\n setIsOverflowing(false);\n return;\n }\n const measure = () =>\n setIsOverflowing(element.scrollWidth > element.clientWidth);\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(element);\n return () => observer.disconnect();\n }, [ref, enabled]);\n\n return isOverflowing;\n}\n\nexport interface SidebarPrimaryProps\n extends React.ComponentPropsWithoutRef<'nav'> {\n /* Controlled expanded (rail width) state. /\n expanded?: boolean;\n /* Uncontrolled initial expanded state. Defaults to `true` (full width). /\n defaultExpanded?: boolean;\n /* Fires when the expanded state changes (e.g. a consumer toggle). /\n onExpandedChange?: (expanded: boolean) => void;\n /\n Replace the rendered `<nav>` with another element or component\n * (Base UI composition). Accepts a React element or a render function.\n /\n render?: useRender.RenderProp;\n}\n\nconst SidebarPrimary = React.forwardRef<HTMLElement, SidebarPrimaryProps>(\n (\n {\n className,\n expanded: expandedProp,\n defaultExpanded = true,\n onExpandedChange,\n 'aria-label': ariaLabel = 'Primary',\n render,\n children,\n ...props\n },\n ref\n ) => {\n const [expanded, setExpanded] = useControllableBoolean(\n expandedProp,\n defaultExpanded,\n onExpandedChange\n );\n\n // Collapse is driven by the consumer through the layout context — the\n // `SidebarPrimaryCollapseTrigger` (the Figma \"Collapse menu\" footer item)\n // calls `toggleExpanded`, which updates uncontrolled state and always emits\n // `onExpandedChange`. Controlled consumers ignore the internal state and\n // react to the callback.\n const context = React.useMemo<SidebarPrimaryContextValue>(\n () => ({ expanded, toggleExpanded: () => setExpanded(!expanded) }),\n [expanded, setExpanded]\n );\n\n const element = useRender({\n render,\n ref,\n defaultTagName: 'nav',\n props: mergeProps<'nav'>(\n {\n 'aria-label': ariaLabel,\n // `data-state` drives every collapsed/expanded token switch via\n // attribute selectors; typed loosely because React's nav attribute\n // map doesn't include arbitrary data- keys as literals.\n ...({ 'data-state': expanded ? 'expanded' : 'collapsed' } as Record<\n string,\n string\n >),\n className: cn(\n 'group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-primary-global-container-color)] w-[var(--ui-sidebar-primary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-primary-expanded-container-width)] transition-[width]',\n className\n ),\n children,\n },\n props\n ),\n });\n\n return (\n <SidebarPrimaryContext.Provider value={context}>\n {element}\n </SidebarPrimaryContext.Provider>\n );\n }\n);\nSidebarPrimary.displayName = 'SidebarPrimary';\n\nexport interface SidebarPrimaryHeaderProps\n extends React.ComponentPropsWithoutRef<'div'> {\n /*\n Logo content shown while the rail is expanded (e.g. a full lockup).\n * Pairs with `collapsedLogo` to swap distinct graphics per rail state\n * instead of resizing one. When neither `logo` nor `collapsedLogo` is\n * given, `children` renders in both states (the original single-slot\n * behavior).\n /\n logo?: React.ReactNode;\n /\n Logo content shown while the rail is collapsed (e.g. a monogram mark).\n * Falls back to `logo` when omitted.\n /\n collapsedLogo?: React.ReactNode;\n}\n\nconst SidebarPrimaryHeader = React.forwardRef<\n HTMLDivElement,\n SidebarPrimaryHeaderProps\n>(({ className, logo, collapsedLogo, children, ...props }, ref) => {\n // Hosts a consumer-provided logo (R7 — no Logo part is built). Padding and the\n // logo height switch on expanded/collapsed; `[&_]:h-…` sizes whatever the\n // consumer slots in. The logo color token tints any `currentColor` mark.\n const { expanded } = useSidebarPrimaryContext();\n const hasTwinLogos = logo != null \|\| collapsedLogo != null;\n const content = hasTwinLogos\n ? expanded\n ? (logo ?? collapsedLogo)\n : (collapsedLogo ?? logo)\n : children;\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)]',\n 'px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]',\n '[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto',\n 'group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-primary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-primary-expanded-container-header-padding-y)]',\n 'group-data-[state=expanded]/sidebar:[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-expanded-logo-height)]',\n className\n )}\n {...props}\n >\n {content}\n </div>\n );\n});\nSidebarPrimaryHeader.displayName = 'SidebarPrimaryHeader';\n\nconst SidebarPrimaryContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, children, ...props }, ref) => (\n // The section list scrolls inside a ScrollArea: its overlay scrollbar floats\n // over the content and reserves no gutter, so the full-bleed selected row is\n // never cropped — on every OS, unlike a native `overflow` scrollbar.\n //\n // Base UI's Scroll Area Content sets `min-width: fit-content` inline (it\n // needs the content's true intrinsic width to detect horizontal overflow),\n // which forces every row wider than the rail — overriding `min-w-0` +\n // `truncate` on a long label, since intrinsic-width calculations ignore\n // `text-overflow`. We only ever scroll vertically here, so cancel it: the\n // `!` (important) is required to beat the inline style's specificity.\n <ScrollArea\n ref={ref}\n className={cn(\n 'min-h-0 flex-1 [&_[data-slot=scroll-area-content]]:min-w-0!',\n className\n )}\n {...props}\n >\n <div className=\"flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]\">\n {children}\n </div>\n </ScrollArea>\n));\nSidebarPrimaryContent.displayName = 'SidebarPrimaryContent';\n\nconst SidebarPrimaryFooter = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col shrink-0 gap-[var(--ui-sidebar-primary-global-footer-list-gap)]',\n 'border-t border-[var(--ui-sidebar-primary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-primary-global-container-footer-border-width)]',\n className\n )}\n {...props}\n />\n));\nSidebarPrimaryFooter.displayName = 'SidebarPrimaryFooter';\n\nconst SidebarPrimarySection = React.forwardRef<\n HTMLDivElement,\n React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n // position (`:not(:first-child)`) instead of a prop.\n <div\n ref={ref}\n className={cn(\n 'flex flex-col pb-[var(--ui-sidebar-primary-section-container-padding-y)]',\n '[&:not(:first-child)]:border-t [&:not(:first-child)]:border-[var(--ui-sidebar-primary-section-container-border-color)] [&:not(:first-child)]:[border-top-width:var(--ui-sidebar-primary-section-container-border-width)] [&:not(:first-child)]:pt-[var(--ui-sidebar-primary-section-container-padding-y)]',\n className\n )}\n {...props}\n />\n));\nSidebarPrimarySection.displayName = 'SidebarPrimarySection';\n\nconst SidebarPrimaryMenu = React.forwardRef<\n HTMLUListElement,\n React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n className={cn(\n 'flex flex-col gap-[var(--ui-sidebar-primary-section-menu-item-list-gap)]',\n className\n )}\n {...props}\n />\n));\nSidebarPrimaryMenu.displayName = 'SidebarPrimaryMenu';\n\n// Primary recolors the container, the icon AND the label per variant\n// (selected\|unselected) × interaction state (idle/hover/active). Every state is\n// wired to its own token even where acronis's value is unchanged, because these\n// are runtime `var()` references — a brand override is only honored if the\n// matching state token is referenced. (This is why Primary cannot share a cva\n// with Secondary, which recolors only the container — DESIGN §6.2.)\nconst sidebarPrimaryMenuItemVariants = cva(\n 'group/menu-item flex w-full items-center gap-[var(--ui-sidebar-primary-menu-item-global-container-gap)] h-[var(--ui-sidebar-primary-menu-item-global-container-height)] px-[var(--ui-sidebar-primary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-primary-menu-item-global-container-padding-y)] no-underline ui-sidebar-primary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-primary-menu-item-global-icon-size)]',\n {\n variants: {\n variant: {\n unselected:\n 'bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-unselected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-unselected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-unselected-icon-color-active)]',\n selected:\n 'bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-idle)] text-[var(--ui-sidebar-primary-menu-item-selected-label-color-idle)] [&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-idle)] hover:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-hover)] hover:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-hover)] hover:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-hover)] active:bg-[var(--ui-sidebar-primary-menu-item-selected-container-color-active)] active:text-[var(--ui-sidebar-primary-menu-item-selected-label-color-active)] active:[&_svg]:text-[var(--ui-sidebar-primary-menu-item-selected-icon-color-active)]',\n },\n },\n defaultVariants: {\n variant: 'unselected',\n },\n }\n);\n\nexport interface SidebarPrimaryMenuItemProps\n extends Omit<React.ComponentPropsWithoutRef<'a'>, 'children'>,\n Omit<VariantProps<typeof sidebarPrimaryMenuItemVariants>, 'variant'> {\n /** Marks the current route: sets the `selected` variant + `aria-current=\"page\"`. /\n selected?: boolean;\n /* Leading 16px icon (from `@acronis-platform/icons-react`). /\n icon?: React.ReactNode;\n children?: React.ReactNode;\n /\n Trailing affordance — a `SidebarPrimaryMenuItemExtras` element. Rendered as\n * a flex sibling of the label (its own `gap` from `_global/container/gap`),\n * not nested inside the label's truncating span — nesting it there collapses\n * the row gap and lets `truncate` clip the affordance. Hidden in collapsed/rail\n * mode regardless of node type — the parent wraps it, so this holds even for\n * a raw node rather than `SidebarPrimaryMenuItemExtras`.\n /\n extras?: React.ReactNode;\n /\n Replace the rendered `<a>` with another element or component (e.g. a router\n * `Link` or a `<button>`) via Base UI composition.\n /\n render?: useRender.RenderProp;\n}\n\nconst SidebarPrimaryMenuItem = React.forwardRef<\n HTMLAnchorElement,\n SidebarPrimaryMenuItemProps\n>(\n (\n { className, selected = false, icon, render, children, extras, ...props },\n ref\n ) => {\n const { expanded } = useSidebarPrimaryContext();\n const labelRef = React.useRef<HTMLSpanElement>(null);\n const isOverflowing = useIsOverflowing(labelRef, { enabled: expanded });\n\n const inner = useRender({\n render,\n ref,\n defaultTagName: 'a',\n props: mergeProps<'a'>(\n {\n className: cn(\n sidebarPrimaryMenuItemVariants({\n variant: selected ? 'selected' : 'unselected',\n }),\n className\n ),\n 'aria-current': selected ? 'page' : undefined,\n children: (\n <>\n {icon != null && (\n <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]\">\n {icon}\n </span>\n )}\n {/ Keep the label in the DOM in collapsed/rail mode as `sr-only` so\n the icon-only row keeps an accessible name (a11y §7) — never\n `display:none` the text. Extras are visually dropped when\n collapsed but stay queryable for the same reason. The tooltip\n trigger is the label span itself, not the row — it must not\n open when hovering the icon or extras, and only ever opens\n when the label is actually clipped. /}\n <Tooltip disabled={!isOverflowing}>\n <TooltipTrigger\n render={\n <span\n ref={labelRef}\n className={cn(\n 'min-w-0 flex-1 truncate text-start',\n !expanded && 'sr-only'\n )}\n />\n }\n >\n {children}\n </TooltipTrigger>\n <TooltipContent>{children}</TooltipContent>\n </Tooltip>\n {extras != null && (\n <span className={cn(!expanded && 'hidden')}>{extras}</span>\n )}\n </>\n ),\n },\n props\n ),\n });\n\n return <li className=\"contents\">{inner}</li>;\n }\n);\nSidebarPrimaryMenuItem.displayName = 'SidebarPrimaryMenuItem';\n\nexport interface SidebarPrimaryMenuItemExtrasProps\n extends React.ComponentPropsWithoutRef<'span'> {\n /* Which trailing affordance to render. /\n variant: 'tag' \| 'externalLink' \| 'shortcut' \| 'tag-externalLink';\n /* Shortcut text (e.g. \"⌘H\") for the `shortcut` variant. /\n shortcut?: string;\n /\n Tag content for the `tag` / `tag-externalLink` variants. Figma constrains\n * this slot's `Tag` instance to `size=\"sm\"` (no other size is offered on\n * MenuItemExtras) — always pass a `<Tag variant=\"info\" size=\"sm\">`, never the\n * default size.\n /\n tag?: React.ReactNode;\n}\n\nconst SidebarPrimaryMenuItemExtras = React.forwardRef<\n HTMLSpanElement,\n SidebarPrimaryMenuItemExtrasProps\n>(({ className, variant, shortcut, tag, children, ...props }, ref) => {\n const { expanded } = useSidebarPrimaryContext();\n const showTag = variant === 'tag' \|\| variant === 'tag-externalLink';\n const showExternal =\n variant === 'externalLink' \|\| variant === 'tag-externalLink';\n const showShortcut = variant === 'shortcut';\n\n return (\n <span\n ref={ref}\n // The extras cluster is rail-mode noise — drop it when collapsed.\n className={cn(\n 'inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]',\n !expanded && 'hidden',\n className\n )}\n {...props}\n >\n {showTag && (tag ?? children)}\n {showShortcut && (\n <span className=\"ui-sidebar-primary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-primary-menu-item-extras-global-shortcut-color)]\">\n {shortcut ?? children}\n </span>\n )}\n {showExternal && (\n <SquareArrowUpRightIcon\n size={16}\n className=\"text-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-primary-menu-item-extras-global-external-icon-size)]\"\n />\n )}\n </span>\n );\n});\nSidebarPrimaryMenuItemExtras.displayName = 'SidebarPrimaryMenuItemExtras';\n\nexport interface SidebarPrimaryCollapseTriggerProps\n extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {\n /* Leading 16px icon (e.g. a panel-left glyph). /\n icon?: React.ReactNode;\n children?: React.ReactNode;\n /\n Trailing affordance — a `SidebarPrimaryMenuItemExtras` element (Figma\n * shows a `⌘H` shortcut here). Rendered as a flex sibling of the label, same\n * as `SidebarPrimaryMenuItem`'s `extras` prop.\n */\n extras?: React.ReactNode;\n}\n\n// The footer \"Collapse menu\" affordance (Figma). A menu-item-styled `<button>`\n// that flips the rail width via the layout context — this is the live wiring\n// for the controllable `expanded` state (B1). In collapsed mode it keeps its\n// label as `sr-only` like every other row.\nconst SidebarPrimaryCollapseTrigger = React.forwardRef<\n HTMLButtonElement,\n SidebarPrimaryCollapseTriggerProps\n>(({ className, icon, children, extras, onClick, ...props }, ref) => {\n const { expanded, toggleExpanded } = useSidebarPrimaryContext();\n const labelRef = React.useRef<HTMLSpanElement>(null);\n const isOverflowing = useIsOverflowing(labelRef, { enabled: expanded });\n\n return (\n <li className=\"contents\">\n <button\n ref={ref}\n type=\"button\"\n aria-expanded={expanded}\n className={cn(\n sidebarPrimaryMenuItemVariants({ variant: 'unselected' }),\n 'text-start',\n className\n )}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) toggleExpanded();\n }}\n {...props}\n >\n {icon != null && (\n <span\n className={cn(\n 'flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)] transition-transform',\n expanded ? 'rtl:rotate-180' : 'ltr:rotate-180'\n )}\n >\n {icon}\n </span>\n )}\n <Tooltip disabled={!isOverflowing}>\n <TooltipTrigger\n render={\n <span\n ref={labelRef}\n className={cn(\n 'min-w-0 flex-1 truncate',\n !expanded && 'sr-only'\n )}\n />\n }\n >\n {children}\n </TooltipTrigger>\n <TooltipContent>{children}</TooltipContent>\n </Tooltip>\n {extras != null && (\n <span className={cn(!expanded && 'hidden')}>{extras}</span>\n )}\n </button>\n </li>\n );\n});\nSidebarPrimaryCollapseTrigger.displayName = 'SidebarPrimaryCollapseTrigger';\n\nexport {\n SidebarPrimary,\n SidebarPrimaryHeader,\n SidebarPrimaryContent,\n SidebarPrimaryFooter,\n SidebarPrimarySection,\n SidebarPrimaryMenu,\n SidebarPrimaryMenuItem,\n SidebarPrimaryMenuItemExtras,\n SidebarPrimaryCollapseTrigger,\n useIsOverflowing,\n sidebarPrimaryMenuItemVariants,\n};\n"],"names":["SidebarPrimaryContext","React","useSidebarPrimaryContext","useControllableBoolean","controlled","defaultValue","onChange","uncontrolled","setUncontrolled","isControlled","value","setValue","next","useIsOverflowing","ref","enabled","isOverflowing","setIsOverflowing","element","measure","observer","SidebarPrimary","className","expandedProp","defaultExpanded","onExpandedChange","ariaLabel","render","children","props","expanded","setExpanded","context","useRender","mergeProps","cn","SidebarPrimaryHeader","logo","collapsedLogo","content","jsx","SidebarPrimaryContent","ScrollArea","SidebarPrimaryFooter","SidebarPrimarySection","SidebarPrimaryMenu","sidebarPrimaryMenuItemVariants","cva","SidebarPrimaryMenuItem","selected","icon","extras","labelRef","inner","jsxs","Fragment","Tooltip","TooltipTrigger","TooltipContent","SidebarPrimaryMenuItemExtras","variant","shortcut","tag","showTag","showExternal","showShortcut","SquareArrowUpRightIcon","SidebarPrimaryCollapseTrigger","onClick","toggleExpanded","event"],"mappings":"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"}