@acronis-platform/ui-react 0.31.0 → 0.33.1

package/dist/components/ui/input-date-picker/input-date-picker.js

@@ -0,0 +1,104 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import * as m from "react";
+import { CalendarIcon as C } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as p } from "../../../lib/utils.js";
+const E = m.forwardRef(
+  ({
+    className: k,
+    id: h,
+    label: i,
+    required: s,
+    description: f,
+    error: a,
+    pickerType: N = "date",
+    placeholder: w,
+    value: o,
+    startDate: l,
+    endDate: t,
+    separator: I = "–",
+    open: b,
+    disabled: d,
+    "aria-invalid": y,
+    ...R
+  }, j) => {
+    const P = m.useId(), n = h ?? P, v = `${n}-message`, c = a != null && a !== "", q = c || y, u = c ? a : f, g = u != null && u !== "", x = N === "dateRange", z = x ? l != null && l !== "" || t != null && t !== "" : o != null && o !== "";
+    return /* @__PURE__ */ e("div", { className: "flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]", children: [
+      i != null && i !== "" && /* @__PURE__ */ e(
+        "label",
+        {
+          htmlFor: n,
+          className: p(
+            "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
+            d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)]"
+          ),
+          children: [
+            i,
+            s && /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-[var(--ui-input-date-picker-global-required-color)]",
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          ref: j,
+          id: n,
+          type: "button",
+          disabled: d,
+          "aria-invalid": q || void 0,
+          "aria-required": s || void 0,
+          "aria-haspopup": "dialog",
+          "aria-expanded": b || void 0,
+          "aria-describedby": g ? v : void 0,
+          "data-open": b || void 0,
+          className: p(
+            "group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-left text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors",
+            "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]",
+            "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]",
+            "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
+            "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
+            "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]",
+            k
+          ),
+          ...R,
+          children: [
+            z ? x ? /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
+              /* @__PURE__ */ r("span", { children: l }),
+              /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: I }),
+              /* @__PURE__ */ r("span", { children: t })
+            ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: o }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: w }),
+            /* @__PURE__ */ r(
+              C,
+              {
+                size: 16,
+                className: "shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]"
+              }
+            )
+          ]
+        }
+      ),
+      g && /* @__PURE__ */ r(
+        "p",
+        {
+          id: v,
+          className: p(
+            "text-xs leading-4",
+            c ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)]"
+          ),
+          children: u
+        }
+      )
+    ] });
+  }
+);
+E.displayName = "InputDatePicker";
+export {
+  E as InputDatePicker
+};
+//# sourceMappingURL=input-date-picker.js.map

package/dist/components/ui/input-date-picker/input-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-left text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]',\n            className\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <CalendarIcon\n            size={16}\n            className=\"shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]\"\n          />\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":"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"}

package/dist/components/ui/link/link.js

@@ -0,0 +1,39 @@
+import { jsxs as c, Fragment as s, jsx as d } from "react/jsx-runtime";
+import * as v from "react";
+import { mergeProps as x } from "@base-ui/react/merge-props";
+import { useRender as m } from "@base-ui/react/use-render";
+import { SquareArrowUpRightIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as p } from "../../../lib/utils.js";
+const f = v.forwardRef(
+  ({ className: e, external: r, disabled: i, href: o, children: t, render: a, ...n }, l) => m({
+    render: a,
+    ref: l,
+    defaultTagName: "a",
+    props: x(
+      {
+        className: p(
+          "inline-flex items-center gap-[var(--ui-link-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [text-underline-position:from-font] [&_svg]:size-4 [&_svg]:shrink-0",
+          "text-[var(--ui-link-color-idle)] [text-decoration:var(--ui-link-text-decoration-idle)] [&_svg]:text-[var(--ui-link-external-icon-color-idle)]",
+          "hover:text-[var(--ui-link-color-hover)] hover:[text-decoration:var(--ui-link-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-external-icon-color-hover)]",
+          "active:text-[var(--ui-link-color-active)] active:[text-decoration:var(--ui-link-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-external-icon-color-active)]",
+          "focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
+          "aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-external-icon-color-disabled)]",
+          e
+        ),
+        href: i ? void 0 : o,
+        "aria-disabled": i || void 0,
+        tabIndex: i ? -1 : void 0,
+        children: /* @__PURE__ */ c(s, { children: [
+          t,
+          r && /* @__PURE__ */ d(u, { size: 16 })
+        ] })
+      },
+      n
+    )
+  })
+);
+f.displayName = "Link";
+export {
+  f as Link
+};
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../../../src/components/ui/link/link.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';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"Link\" component: an inline text link (semibold, 14/24) with an\n// optional trailing external-link icon (`external`). Themed by the `--ui-link-*`\n// tier — each state wires its own text color (`--ui-link-color-*`), text decoration\n// (`--ui-link-text-decoration-*`; underline on hover only) and external-icon color\n// (`--ui-link-external-icon-color-*`, kept separate from the text per the tier).\n// Focus paints a 3px `--ui-focus-primary` ring. Polymorphic via Base UI `useRender`\n// — pass `render` to render a router `Link` instead of the default `<a>`. `disabled`\n// makes it inert: disabled color, removed from the tab order, no navigation.\n//\n// The Figma container has a fixed 32px height for grid alignment\n// (`--ui-link-container-height`); it is intentionally NOT applied here so the link\n// flows inline within prose.\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Append a trailing external-link icon (e.g. for links that leave the app). */\n  external?: boolean;\n  /** Render the link inert: disabled color, removed from the tab order, no navigation. */\n  disabled?: boolean;\n  /**\n   * Replace the rendered `<a>` with another element or component (Base UI\n   * composition) — e.g. a router `Link`. Props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst Link = React.forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ className, external, disabled, href, children, render, ...props }, ref) =>\n    useRender({\n      render,\n      ref,\n      defaultTagName: 'a',\n      props: mergeProps<'a'>(\n        {\n          className: cn(\n            'inline-flex items-center gap-[var(--ui-link-container-gap)] rounded-sm text-sm font-semibold leading-6 outline-none transition-colors [text-underline-position:from-font] [&_svg]:size-4 [&_svg]:shrink-0',\n            'text-[var(--ui-link-color-idle)] [text-decoration:var(--ui-link-text-decoration-idle)] [&_svg]:text-[var(--ui-link-external-icon-color-idle)]',\n            'hover:text-[var(--ui-link-color-hover)] hover:[text-decoration:var(--ui-link-text-decoration-hover)] hover:[&_svg]:text-[var(--ui-link-external-icon-color-hover)]',\n            'active:text-[var(--ui-link-color-active)] active:[text-decoration:var(--ui-link-text-decoration-active)] active:[&_svg]:text-[var(--ui-link-external-icon-color-active)]',\n            'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-disabled:pointer-events-none aria-disabled:text-[var(--ui-link-color-disabled)] aria-disabled:[text-decoration:var(--ui-link-text-decoration-disabled)] aria-disabled:[&_svg]:text-[var(--ui-link-external-icon-color-disabled)]',\n            className\n          ),\n          href: disabled ? undefined : href,\n          'aria-disabled': disabled || undefined,\n          tabIndex: disabled ? -1 : undefined,\n          children: (\n            <>\n              {children}\n              {external && <SquareArrowUpRightIcon size={16} />}\n            </>\n          ),\n        },\n        props\n      ),\n    })\n);\nLink.displayName = 'Link';\n\nexport { Link };\n"],"names":["Link","React","className","external","disabled","href","children","render","props","ref","useRender","mergeProps","cn","jsxs","Fragment","jsx","SquareArrowUpRightIcon"],"mappings":";;;;;;AA+BA,MAAMA,IAAOC,EAAM;AAAA,EACjB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,QAAAC,GAAQ,GAAGC,KAASC,MACpEC,EAAU;AAAA,IACR,QAAAH;AAAA,IACA,KAAAE;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAOE;AAAA,MACL;AAAA,QACE,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAV;AAAA,QAAA;AAAA,QAEF,MAAME,IAAW,SAAYC;AAAA,QAC7B,iBAAiBD,KAAY;AAAA,QAC7B,UAAUA,IAAW,KAAK;AAAA,QAC1B,UACE,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,UAAAR;AAAA,UACAH,KAAY,gBAAAY,EAACC,GAAA,EAAuB,MAAM,GAAA,CAAI;AAAA,QAAA,EAAA,CACjD;AAAA,MAAA;AAAA,MAGJR;AAAA,IAAA;AAAA,EACF,CACD;AACL;AACAR,EAAK,cAAc;"}

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

@@ -1,71 +1,71 @@
-import { jsx as i, jsxs as b, Fragment as N } from "react/jsx-runtime";
-import * as t from "react";
-import { mergeProps as y } from "@base-ui/react/merge-props";
-import { useRender as g } from "@base-ui/react/use-render";
+import { jsx as t, jsxs as y, Fragment as w } from "react/jsx-runtime";
+import * as i from "react";
+import { mergeProps as x } from "@base-ui/react/merge-props";
+import { useRender as f } from "@base-ui/react/use-render";
 import { SquareArrowUpRightIcon as P } from "@acronis-platform/icons-react/stroke-mono";
 import { cva as S } 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";
-const x = t.createContext(null);
-function v() {
-  return t.useContext(x) ?? {
+const h = i.createContext(null);
+function g() {
+  return i.useContext(h) ?? {
     expanded: !0,
     toggleExpanded: () => {
     }
   };
 }
 function R(a, e, r) {
-  const [o, d] = t.useState(e), n = a !== void 0, m = n ? a : o, c = t.useCallback(
-    (s) => {
-      n || d(s), r == null || r(s);
+  const [s, d] = i.useState(e), o = a !== void 0, m = o ? a : s, u = i.useCallback(
+    (n) => {
+      o || d(n), r == null || r(n);
     },
-    [n, r]
+    [o, r]
   );
-  return [m, c];
+  return [m, u];
 }
-const _ = t.forwardRef(
+const _ = i.forwardRef(
   ({
     className: a,
     expanded: e,
     defaultExpanded: r = !0,
-    onExpandedChange: o,
+    onExpandedChange: s,
     "aria-label": d = "Primary",
-    render: n,
+    render: o,
     children: m,
-    ...c
-  }, s) => {
-    const [u, p] = R(
+    ...u
+  }, n) => {
+    const [c, p] = R(
       e,
       r,
-      o
-    ), h = t.useMemo(
-      () => ({ expanded: u, toggleExpanded: () => p(!u) }),
-      [u, p]
-    ), w = g({
-      render: n,
-      ref: s,
+      s
+    ), v = i.useMemo(
+      () => ({ expanded: c, toggleExpanded: () => p(!c) }),
+      [c, p]
+    ), b = f({
+      render: o,
+      ref: n,
       defaultTagName: "nav",
-      props: y(
+      props: x(
         {
           "aria-label": d,
-          "data-state": u ? "expanded" : "collapsed",
+          "data-state": c ? "expanded" : "collapsed",
           className: l(
             "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
         },
-        c
+        u
       )
     });
-    return /* @__PURE__ */ i(x.Provider, { value: h, children: w });
+    return /* @__PURE__ */ t(h.Provider, { value: v, children: b });
   }
 );
 _.displayName = "SidebarPrimary";
-const M = t.forwardRef(({ className: a, ...e }, r) => (
+const E = i.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(
+  /* @__PURE__ */ t(
     "div",
     {
       ref: r,
@@ -81,8 +81,8 @@ const M = t.forwardRef(({ className: a, ...e }, r) => (
     }
   )
 ));
-M.displayName = "SidebarPrimaryHeader";
-const E = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
+E.displayName = "SidebarPrimaryHeader";
+const M = i.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "div",
   {
     ref: r,
@@ -93,8 +93,8 @@ const E = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
     ...e
   }
 ));
-E.displayName = "SidebarPrimaryContent";
-const k = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
+M.displayName = "SidebarPrimaryContent";
+const k = i.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "div",
   {
     ref: r,
@@ -108,10 +108,10 @@ const k = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
   }
 ));
 k.displayName = "SidebarPrimaryFooter";
-const I = t.forwardRef(({ className: a, ...e }, r) => (
+const I = i.forwardRef(({ className: a, ...e }, r) => (
   // `firstSection` in Figma only toggles the top divider — derive it from DOM
   // position (`:not(:first-child)`) instead of a prop.
-  /* @__PURE__ */ i(
+  /* @__PURE__ */ t(
     "div",
     {
       ref: r,
@@ -125,7 +125,7 @@ const I = t.forwardRef(({ className: a, ...e }, r) => (
   )
 ));
 I.displayName = "SidebarPrimarySection";
-const z = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
+const z = i.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ t(
   "ul",
   {
     ref: r,
@@ -137,7 +137,7 @@ const z = t.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ i(
   }
 ));
 z.displayName = "SidebarPrimaryMenu";
-const f = S(
+const N = S(
   "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: {
@@ -150,47 +150,61 @@ const f = S(
       variant: "unselected"
     }
   }
-), T = t.forwardRef(({ className: a, selected: e = !1, icon: r, render: o, children: d, ...n }, m) => {
-  const { expanded: c } = v(), s = g({
-    render: o,
+), T = i.forwardRef(({ className: a, selected: e = !1, icon: r, render: s, children: d, ...o }, m) => {
+  const { expanded: u } = g(), n = i.Children.toArray(d), c = n.filter(
+    (b) => i.isValidElement(b) && b.type.displayName === "SidebarPrimaryMenuItemExtras"
+  ), p = n.filter(
+    (b) => !c.includes(b)
+  ), v = f({
+    render: s,
     ref: m,
     defaultTagName: "a",
-    props: y(
+    props: x(
       {
         className: l(
-          f({
+          N({
             variant: e ? "selected" : "unselected"
           }),
           a
         ),
         "aria-current": e ? "page" : void 0,
-        children: /* @__PURE__ */ b(N, { 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("flex-1 truncate text-left", !c && "sr-only"), children: d })
+        children: /* @__PURE__ */ y(w, { children: [
+          r != null && /* @__PURE__ */ t("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: r }),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: l(
+                "min-w-0 flex-1 truncate text-left",
+                !u && "sr-only"
+              ),
+              children: p
+            }
+          ),
+          c.length > 0 && /* @__PURE__ */ t("span", { className: "flex shrink-0 items-center", children: c })
         ] })
       },
-      n
+      o
     )
   });
-  return /* @__PURE__ */ i("li", { className: "contents", children: s });
+  return /* @__PURE__ */ t("li", { className: "contents", children: v });
 });
 T.displayName = "SidebarPrimaryMenuItem";
-const C = t.forwardRef(({ className: a, variant: e, shortcut: r, tag: o, children: d, ...n }, m) => {
-  const { expanded: c } = v(), s = e === "tag" || e === "tag-externalLink", u = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
-  return /* @__PURE__ */ b(
+const C = i.forwardRef(({ className: a, variant: e, shortcut: r, tag: s, children: d, ...o }, m) => {
+  const { expanded: u } = g(), n = e === "tag" || e === "tag-externalLink", c = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
+  return /* @__PURE__ */ y(
     "span",
     {
       ref: m,
       className: l(
         "inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]",
-        !c && "hidden",
+        !u && "hidden",
         a
       ),
-      ...n,
+      ...o,
       children: [
-        s && (o ?? 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 }),
-        u && /* @__PURE__ */ i(
+        n && (s ?? d),
+        p && /* @__PURE__ */ t("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__ */ t(
           P,
           {
             size: 16,
@@ -202,41 +216,41 @@ const C = t.forwardRef(({ className: a, variant: e, shortcut: r, tag: o, childre
   );
 });
 C.displayName = "SidebarPrimaryMenuItemExtras";
-const F = t.forwardRef(({ className: a, icon: e, children: r, onClick: o, ...d }, n) => {
-  const { expanded: m, toggleExpanded: c } = v();
-  return /* @__PURE__ */ i("li", { className: "contents", children: /* @__PURE__ */ b(
+const V = i.forwardRef(({ className: a, icon: e, children: r, onClick: s, ...d }, o) => {
+  const { expanded: m, toggleExpanded: u } = g();
+  return /* @__PURE__ */ t("li", { className: "contents", children: /* @__PURE__ */ y(
     "button",
     {
-      ref: n,
+      ref: o,
       type: "button",
       "aria-expanded": m,
       className: l(
-        f({ variant: "unselected" }),
+        N({ variant: "unselected" }),
         "text-left",
         a
       ),
-      onClick: (s) => {
-        o == null || o(s), s.defaultPrevented || c();
+      onClick: (n) => {
+        s == null || s(n), n.defaultPrevented || u();
       },
       ...d,
       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__ */ t("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: e }),
+        /* @__PURE__ */ t("span", { className: l("flex-1 truncate", !m && "sr-only"), children: r })
       ]
     }
   ) });
 });
-F.displayName = "SidebarPrimaryCollapseTrigger";
+V.displayName = "SidebarPrimaryCollapseTrigger";
 export {
   _ as SidebarPrimary,
-  F as SidebarPrimaryCollapseTrigger,
-  E as SidebarPrimaryContent,
+  V as SidebarPrimaryCollapseTrigger,
+  M as SidebarPrimaryContent,
   k as SidebarPrimaryFooter,
-  M as SidebarPrimaryHeader,
+  E as SidebarPrimaryHeader,
   z as SidebarPrimaryMenu,
   T as SidebarPrimaryMenuItem,
   C as SidebarPrimaryMenuItemExtras,
   I as SidebarPrimarySection,
-  f as sidebarPrimaryMenuItemVariants
+  N as sidebarPrimaryMenuItemVariants
 };
 //# sourceMappingURL=sidebar-primary.js.map

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

@@ -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\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, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-primary-global-section-list-gap)]',\n      className\n    )}\n    {...props}\n  />\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  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 className={cn('flex-1 truncate text-left', !expanded && 'sr-only')}>\n              {children}\n            </span>\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","SidebarPrimaryFooter","SidebarPrimarySection","SidebarPrimaryMenu","sidebarPrimaryMenuItemVariants","cva","SidebarPrimaryMenuItem","selected","icon","inner","jsxs","Fragment","SidebarPrimaryMenuItemExtras","variant","shortcut","tag","showTag","showExternal","showShortcut","SquareArrowUpRightIcon","SidebarPrimaryCollapseTrigger","onClick","toggleExpanded","event"],"mappings":"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"}
+{"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\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, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-primary-global-section-list-gap)]',\n      className\n    )}\n    {...props}\n  />\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","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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"}