@acronis-platform/ui-react 0.57.0 → 0.58.0

package/dist/components/ui/sheet/sheet-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-details.js","sources":["../../../../src/components/ui/sheet/sheet-details.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n} from '../description-list';\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from '../empty';\nimport { Loading } from '../loading';\nimport {\n  Sheet,\n  SheetBody,\n  SheetCloseButton,\n  type SheetContentProps,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet';\n\n// `SheetDetails` is the preset for the `sheet-detail-panel` usage pattern — the\n// \"easy path that IS the pattern\". It bakes a right-anchored Sheet's header\n// (title + close), a body that switches by `contentState`\n// (loading → Loading, empty/error → Empty, else a key/value property list or\n// custom children), and an optional footer of actions — so consumers don't\n// re-assemble (or hand-roll) the recipe. For anything outside the recipe, compose\n// the `Sheet*` parts directly. (React composition of the Vue kit's `Details`.)\n\nexport interface SheetDetailsProperty {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type SheetDetailsContentState = 'content' | 'loading' | 'empty' | 'error';\n\nexport interface SheetDetailsProps {\n  /** Controlled open state. Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Fires when the sheet opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Panel title (header). Also the accessible name. */\n  title: React.ReactNode;\n  /** Edge the panel anchors to. Defaults to `right`. */\n  side?: SheetContentProps['side'];\n  /** Which body view to show. Defaults to `content`. */\n  contentState?: SheetDetailsContentState;\n  /** Key/value rows rendered as the body in the `content` state (unless `children`). */\n  properties?: SheetDetailsProperty[];\n  /** Custom body for the `content` state — overrides `properties`. */\n  children?: React.ReactNode;\n  /** Footer action(s). Omit for no footer. */\n  actions?: React.ReactNode;\n  /** Optional trigger element (rendered via the Sheet trigger's `render`). */\n  trigger?: React.ReactElement;\n  /** Empty-state copy (`contentState=\"empty\"`). */\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  /** Error-state copy (`contentState=\"error\"`). */\n  errorTitle?: React.ReactNode;\n  errorDescription?: React.ReactNode;\n  /** Portal container (shadow-root mount for isolated previews). */\n  portalContainer?: SheetContentProps['portalContainer'];\n}\n\nfunction SheetDetailsBody({\n  contentState,\n  properties,\n  children,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n}: Pick<\n  SheetDetailsProps,\n  | 'contentState'\n  | 'properties'\n  | 'children'\n  | 'emptyTitle'\n  | 'emptyDescription'\n  | 'errorTitle'\n  | 'errorDescription'\n>) {\n  if (contentState === 'loading') {\n    return (\n      <div className=\"flex h-40 items-center justify-center\">\n        <Loading />\n      </div>\n    );\n  }\n  if (contentState === 'empty' || contentState === 'error') {\n    const isError = contentState === 'error';\n    return (\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>\n            {isError\n              ? (errorTitle ?? 'Something went wrong')\n              : (emptyTitle ?? 'Nothing to show')}\n          </EmptyTitle>\n          <EmptyDescription>\n            {isError\n              ? (errorDescription ?? 'The details could not be loaded.')\n              : (emptyDescription ?? 'There are no details to display yet.')}\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n  if (children) return <>{children}</>;\n  if (properties?.length) {\n    // Render through DescriptionList. `-mx-6` cancels the SheetBody padding so\n    // the row dividers go full-bleed while the content stays aligned at the\n    // panel's 24px inset; the label column is tightened for the narrow panel.\n    return (\n      <DescriptionList\n        className=\"-mx-6\"\n        style={{ '--description-list-label': '9rem' } as React.CSSProperties}\n      >\n        {properties.map((p, i) => (\n          <DescriptionListItem key={i}>\n            <DescriptionListLabel className=\"text-muted-foreground\">\n              {p.label}\n            </DescriptionListLabel>\n            <DescriptionListValue className=\"font-medium\">\n              {p.value}\n            </DescriptionListValue>\n          </DescriptionListItem>\n        ))}\n      </DescriptionList>\n    );\n  }\n  return null;\n}\n\nfunction SheetDetails({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  side = 'right',\n  contentState = 'content',\n  properties,\n  children,\n  actions,\n  trigger,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n  portalContainer,\n}: SheetDetailsProps) {\n  return (\n    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger ? <SheetTrigger render={trigger} /> : null}\n      <SheetContent side={side} portalContainer={portalContainer}>\n        <SheetHeader>\n          <SheetTitle>{title}</SheetTitle>\n          <SheetCloseButton />\n        </SheetHeader>\n        <SheetBody>\n          <SheetDetailsBody\n            contentState={contentState}\n            properties={properties}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            errorTitle={errorTitle}\n            errorDescription={errorDescription}\n          >\n            {children}\n          </SheetDetailsBody>\n        </SheetBody>\n        {actions ? <SheetFooter>{actions}</SheetFooter> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\nSheetDetails.displayName = 'SheetDetails';\n\nexport { SheetDetails };\n"],"names":["SheetDetailsBody","contentState","properties","children","emptyTitle","emptyDescription","errorTitle","errorDescription","jsx","Loading","isError","Empty","jsxs","EmptyHeader","EmptyTitle","EmptyDescription","Fragment","DescriptionList","p","i","DescriptionListItem","DescriptionListLabel","DescriptionListValue","SheetDetails","open","defaultOpen","onOpenChange","title","side","actions","trigger","portalContainer","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetCloseButton","SheetBody","SheetFooter"],"mappings":";;;;;AAyEA,SAASA,EAAiB;AAAA,EACxB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACF,GASG;AACD,MAAIN,MAAiB;AACnB,6BACG,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAO,EAACC,KAAQ,GACX;AAGJ,MAAIR,MAAiB,WAAWA,MAAiB,SAAS;AACxD,UAAMS,IAAUT,MAAiB;AACjC,WACE,gBAAAO,EAACG,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EACE,UAAAJ,IACIJ,KAAc,yBACdF,KAAc,mBACrB;AAAA,wBACCW,GAAA,EACE,UAAAL,IACIH,KAAoB,qCACpBF,KAAoB,uCAAA,CAC3B;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACA,SAAIF,IAAiB,gBAAAK,EAAAQ,GAAA,EAAG,UAAAb,EAAA,CAAS,IAC7BD,KAAA,QAAAA,EAAY,SAKZ,gBAAAM;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,4BAA4B,OAAA;AAAA,MAEpC,YAAW,IAAI,CAACC,GAAGC,wBACjBC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAA,EAAqB,WAAU,yBAC7B,UAAAH,EAAE,OACL;AAAA,QACA,gBAAAV,EAACc,GAAA,EAAqB,WAAU,eAC7B,YAAE,MAAA,CACL;AAAA,MAAA,EAAA,GANwBH,CAO1B,CACD;AAAA,IAAA;AAAA,EAAA,IAIA;AACT;AAEA,SAASI,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAA3B,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAA0B;AAAA,EACA,SAAAC;AAAA,EACA,YAAA1B;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAwB;AACF,GAAsB;AACpB,SACE,gBAAAnB,EAACoB,GAAA,EAAM,MAAAR,GAAY,aAAAC,GAA0B,cAAAC,GAC1C,UAAA;AAAA,IAAAI,IAAU,gBAAAtB,EAACyB,GAAA,EAAa,QAAQH,EAAA,CAAS,IAAK;AAAA,IAC/C,gBAAAlB,EAACsB,GAAA,EAAa,MAAAN,GAAY,iBAAAG,GACxB,UAAA;AAAA,MAAA,gBAAAnB,EAACuB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,KAAY,UAAAT,EAAA,CAAM;AAAA,0BAClBU,GAAA,CAAA,CAAiB;AAAA,MAAA,GACpB;AAAA,wBACCC,GAAA,EACC,UAAA,gBAAA9B;AAAA,QAACR;AAAA,QAAA;AAAA,UACC,cAAAC;AAAA,UACA,YAAAC;AAAA,UACA,YAAAE;AAAA,UACA,kBAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UAEC,UAAAJ;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACC0B,IAAU,gBAAArB,EAAC+B,GAAA,EAAa,UAAAV,EAAA,CAAQ,IAAiB;AAAA,IAAA,EAAA,CACpD;AAAA,EAAA,GACF;AAEJ;AACAN,EAAa,cAAc;"}

package/dist/components/ui/sheet/sheet.js

@@ -0,0 +1,136 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import * as s from "react";
+import { Dialog as a } from "@base-ui/react/dialog";
+import { TimesIcon as b } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as d } from "../../../lib/utils.js";
+import { usePortalContainer as x } from "../../../lib/portal-container.js";
+const S = g(
+  "fixed z-50 flex flex-col overflow-hidden bg-muted text-foreground shadow-lg duration-300 data-[open]:animate-in data-[closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 max-h-[80vh] border-b border-border data-[open]:slide-in-from-top data-[closed]:slide-out-to-top",
+        bottom: "inset-x-0 bottom-0 max-h-[80vh] border-t border-border data-[open]:slide-in-from-bottom data-[closed]:slide-out-to-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r border-border data-[open]:slide-in-from-left data-[closed]:slide-out-to-left sm:max-w-md",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l border-border data-[open]:slide-in-from-right data-[closed]:slide-out-to-right sm:max-w-md"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+), H = a.Root, O = a.Trigger, V = a.Portal, I = a.Close, y = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  a.Backdrop,
+  {
+    ref: t,
+    className: d(
+      "fixed inset-0 z-50 duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0",
+      e
+    ),
+    ...o
+  }
+));
+y.displayName = "SheetOverlay";
+const v = s.forwardRef(
+  ({
+    className: e,
+    children: o,
+    side: t,
+    portal: n = !0,
+    portalContainer: l,
+    keepMounted: m,
+    ...f
+  }, c) => {
+    const p = x(), h = l ?? p, i = /* @__PURE__ */ r(
+      a.Popup,
+      {
+        ref: c,
+        className: d(S({ side: t }), e),
+        ...f,
+        children: o
+      }
+    );
+    return n ? /* @__PURE__ */ r(a.Portal, { container: h, keepMounted: m, children: i }) : i;
+  }
+);
+v.displayName = "SheetContent";
+const N = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: t,
+    className: d(
+      "flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-5 py-4",
+      e
+    ),
+    ...o
+  }
+));
+N.displayName = "SheetHeader";
+const w = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: t,
+    className: d(
+      "flex h-16 shrink-0 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4",
+      e
+    ),
+    ...o
+  }
+));
+w.displayName = "SheetFooter";
+const C = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r("div", { ref: t, className: d("flex-1 overflow-auto p-6", e), ...o }));
+C.displayName = "SheetBody";
+const R = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  a.Title,
+  {
+    ref: t,
+    className: d(
+      "flex-1 text-lg font-semibold leading-7 text-foreground",
+      e
+    ),
+    ...o
+  }
+));
+R.displayName = "SheetTitle";
+const T = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ r(
+  a.Description,
+  {
+    ref: t,
+    className: d("text-sm text-muted-foreground", e),
+    ...o
+  }
+));
+T.displayName = "SheetDescription";
+const k = s.forwardRef(({ className: e, ...o }, t) => /* @__PURE__ */ u(
+  a.Close,
+  {
+    ref: t,
+    className: d(
+      "rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none",
+      e
+    ),
+    ...o,
+    children: [
+      /* @__PURE__ */ r(b, { size: 24 }),
+      /* @__PURE__ */ r("span", { className: "sr-only", children: "Close" })
+    ]
+  }
+));
+k.displayName = "SheetCloseButton";
+export {
+  H as Sheet,
+  C as SheetBody,
+  I as SheetClose,
+  k as SheetCloseButton,
+  v as SheetContent,
+  T as SheetDescription,
+  w as SheetFooter,
+  N as SheetHeader,
+  y as SheetOverlay,
+  V as SheetPortal,
+  R as SheetTitle,
+  O as SheetTrigger,
+  S as sheetVariants
+};
+//# sourceMappingURL=sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","sources":["../../../../src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Initial version ported from `@acronis-platform/shadcn-uikit`'s `sheet`\n// (packages/ui-legacy/src/components/ui/sheet.tsx). A modal side panel — the\n// same Base UI Dialog primitive the `Dialog` component uses (keyboard, focus\n// trap, scroll lock, ARIA come from Base UI), but anchored to a screen edge with\n// a slide transition. In the Vue kit this was `Details`; it's re-exported under\n// `Details*` aliases for a 1:1 drop-in. No `--ui-sheet-*` token tier exists yet,\n// so this design-pending v1 mirrors the Dialog family's semantic theming.\n// Sheets do NOT render a backdrop — they open on top of the page — so the\n// `SheetOverlay`/`DetailsOverlay` export is retained for drop-in compat but is\n// no longer part of the default `SheetContent` render.\n//   • panel    -> bg-muted        = --ui-background-surface-secondary\n//   • header / footer -> bg-background = --ui-background-surface-primary bars,\n//     divided by border-border\n//   • title    -> text-foreground / description -> text-muted-foreground\n//   • close    -> text-muted-foreground → hover text-foreground, focus ring\n//     var(--ui-focus-primary)\n// Enter/exit slide animations use `tw-animate-css` (imported in styles/index.css),\n// keyed to Base UI's data-[open] / data-[closed] state attributes. Reconcile\n// against the real design with `/figma-component Sheet <url> --update`\n// (Cyber-Compliance node 3442-31542) once the mockup is ready for dev.\n\nconst sheetVariants = cva(\n  'fixed z-50 flex flex-col overflow-hidden bg-muted text-foreground shadow-lg duration-300 data-[open]:animate-in data-[closed]:animate-out',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 max-h-[80vh] border-b border-border data-[open]:slide-in-from-top data-[closed]:slide-out-to-top',\n        bottom:\n          'inset-x-0 bottom-0 max-h-[80vh] border-t border-border data-[open]:slide-in-from-bottom data-[closed]:slide-out-to-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[open]:slide-in-from-left data-[closed]:slide-out-to-left sm:max-w-md',\n        right:\n          'inset-y-0 right-0 h-full w-3/4 border-l border-border data-[open]:slide-in-from-right data-[closed]:slide-out-to-right sm:max-w-md',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  }\n);\n\nconst Sheet = DialogPrimitive.Root;\n\nconst SheetTrigger = DialogPrimitive.Trigger;\n\nconst SheetPortal = DialogPrimitive.Portal;\n\nconst SheetClose = DialogPrimitive.Close;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Backdrop\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 duration-200 data-[open]:animate-in data-[open]:fade-in-0 data-[closed]:animate-out data-[closed]:fade-out-0',\n      className\n    )}\n    {...props}\n  />\n));\nSheetOverlay.displayName = 'SheetOverlay';\n\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup>,\n    VariantProps<typeof sheetVariants> {\n  /** Screen edge the panel anchors to. Defaults to `right`. */\n  side?: VariantProps<typeof sheetVariants>['side'];\n  /**\n   * Render the content inside a portal (default `true`). Base UI requires the\n   * Popup to sit in a Portal for correct stacking; set `false` for inline usage\n   * (e.g. when the caller supplies its own `SheetPortal`, or in tests).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: DialogPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: DialogPrimitive.Portal.Props['keepMounted'];\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Popup>,\n  SheetContentProps\n>(\n  (\n    {\n      className,\n      children,\n      side,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    const popup = (\n      <DialogPrimitive.Popup\n        ref={ref}\n        className={cn(sheetVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Popup>\n    );\n\n    return portal ? (\n      <DialogPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {popup}\n      </DialogPrimitive.Portal>\n    ) : (\n      popup\n    );\n  }\n);\nSheetContent.displayName = 'SheetContent';\n\nconst SheetHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-5 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nSheetHeader.displayName = 'SheetHeader';\n\nconst SheetFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex h-16 shrink-0 items-center justify-end gap-4 border-t border-border bg-background px-6 py-4',\n      className\n    )}\n    {...props}\n  />\n));\nSheetFooter.displayName = 'SheetFooter';\n\nconst SheetBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex-1 overflow-auto p-6', className)} {...props} />\n));\nSheetBody.displayName = 'SheetBody';\n\nconst SheetTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'flex-1 text-lg font-semibold leading-7 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nSheetTitle.displayName = 'SheetTitle';\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nSheetDescription.displayName = 'SheetDescription';\n\nconst SheetCloseButton = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Close\n    ref={ref}\n    className={cn(\n      'rounded p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] disabled:pointer-events-none',\n      className\n    )}\n    {...props}\n  >\n    <TimesIcon size={24} />\n    <span className=\"sr-only\">Close</span>\n  </DialogPrimitive.Close>\n));\nSheetCloseButton.displayName = 'SheetCloseButton';\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetPortal,\n  SheetClose,\n  SheetCloseButton,\n  SheetOverlay,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetBody,\n  SheetTitle,\n  SheetDescription,\n  sheetVariants,\n};\n"],"names":["sheetVariants","cva","Sheet","DialogPrimitive","SheetTrigger","SheetPortal","SheetClose","SheetOverlay","React","className","props","ref","jsx","cn","SheetContent","children","side","portal","portalContainer","keepMounted","ctxContainer","usePortalContainer","resolvedContainer","popup","SheetHeader","SheetFooter","SheetBody","SheetTitle","SheetDescription","SheetCloseButton","jsxs","TimesIcon"],"mappings":"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"}

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

@@ -0,0 +1,369 @@
+import { jsx as a, jsxs as y, Fragment as k } from "react/jsx-runtime";
+import * as n from "react";
+import { mergeProps as P } from "@base-ui/react/merge-props";
+import { useRender as R } from "@base-ui/react/use-render";
+import { SquareArrowUpRightIcon as M } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as z } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as c } from "../../../lib/utils.js";
+import { useDocDir as _ } from "../../../lib/use-doc-dir.js";
+import { Tooltip as f, TooltipTrigger as h, TooltipContent as x } from "../tooltip/tooltip.js";
+import { ScrollArea as O } from "../scroll-area/scroll-area.js";
+const T = n.createContext(null);
+function w() {
+  return n.useContext(T) ?? {
+    expanded: !0,
+    toggleExpanded: () => {
+    }
+  };
+}
+function C(i, e, r) {
+  const [l, s] = n.useState(e), t = i !== void 0, d = t ? i : l, m = n.useCallback(
+    (o) => {
+      t || s(o), r == null || r(o);
+    },
+    [t, r]
+  );
+  return [d, m];
+}
+function E(i, { enabled: e }) {
+  const [r, l] = n.useState(!1);
+  return n.useEffect(() => {
+    const s = i.current;
+    if (!e || !s) {
+      l(!1);
+      return;
+    }
+    const t = () => l(s.scrollWidth > s.clientWidth);
+    t();
+    const d = new ResizeObserver(t);
+    return d.observe(s), () => d.disconnect();
+  }, [i, e]), r;
+}
+const D = n.forwardRef(
+  ({
+    className: i,
+    expanded: e,
+    defaultExpanded: r = !0,
+    onExpandedChange: l,
+    "aria-label": s = "Primary",
+    render: t,
+    children: d,
+    ...m
+  }, o) => {
+    const [u, p] = C(
+      e,
+      r,
+      l
+    ), v = n.useMemo(
+      () => ({ expanded: u, toggleExpanded: () => p(!u) }),
+      [u, p]
+    ), g = R({
+      render: t,
+      ref: o,
+      defaultTagName: "nav",
+      props: P(
+        {
+          "aria-label": s,
+          "data-state": u ? "expanded" : "collapsed",
+          className: c(
+            "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]",
+            i
+          ),
+          children: d
+        },
+        m
+      )
+    });
+    return /* @__PURE__ */ a(T.Provider, { value: v, children: g });
+  }
+);
+D.displayName = "SidebarPrimary";
+const F = n.forwardRef(({ className: i, logo: e, collapsedLogo: r, children: l, ...s }, t) => {
+  const { expanded: d } = w(), o = e != null || r != null ? d ? e ?? r : r ?? e : l;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      className: c(
+        "flex items-center shrink-0 text-[var(--ui-sidebar-primary-global-logo-color)] transition-[padding]",
+        "px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]",
+        // `logo`/`collapsedLogo` are two separate elements swapped by a JS
+        // conditional (not one element whose size CSS-transitions) — the new
+        // one mounts at its final height instantly, while `padding-y` is
+        // still mid-transition. Since the two states' (padding*2 + logo
+        // height) sums only match at the transition's start/end, that instant
+        // pop makes the row briefly overshoot/undershoot its resting height
+        // and "jump". Pinning the row to the larger of the two sums makes the
+        // outer box's height constant across the whole transition regardless
+        // of that mismatch — padding/logo-height still animate cosmetically
+        // inside it.
+        "h-[max(calc(var(--ui-sidebar-primary-collapsed-container-header-padding-y)*2+var(--ui-sidebar-primary-collapsed-logo-height)),calc(var(--ui-sidebar-primary-expanded-container-header-padding-y)*2+var(--ui-sidebar-primary-expanded-logo-height)))]",
+        // Animate the logo's own height alongside the header's padding transition
+        // (both keyed off the same `data-state` flip) — without it the logo swaps
+        // size instantly while the rail width is still animating, reading as a jump.
+        "[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto [&_:where(img,svg)]:transition-[height]",
+        "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)]",
+        "group-data-[state=expanded]/sidebar:[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-expanded-logo-height)]",
+        i
+      ),
+      ...s,
+      children: o
+    }
+  );
+});
+F.displayName = "SidebarPrimaryHeader";
+const L = n.forwardRef(({ className: i, children: e, ...r }, l) => (
+  // 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.
+  //
+  // 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__ */ a(
+    O,
+    {
+      ref: l,
+      className: c(
+        "min-h-0 flex-1 [&_[data-slot=scroll-area-content]]:min-w-0!",
+        i
+      ),
+      ...r,
+      children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-[var(--ui-sidebar-primary-global-section-list-gap)]", children: e })
+    }
+  )
+));
+L.displayName = "SidebarPrimaryContent";
+const V = n.forwardRef(({ className: i, ...e }, r) => /* @__PURE__ */ a(
+  "div",
+  {
+    ref: r,
+    className: c(
+      "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)]",
+      i
+    ),
+    ...e
+  }
+));
+V.displayName = "SidebarPrimaryFooter";
+const j = n.forwardRef(({ className: i, ...e }, r) => (
+  // position (`:not(:first-child)`) instead of a prop.
+  /* @__PURE__ */ a(
+    "div",
+    {
+      ref: r,
+      className: c(
+        "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)]",
+        i
+      ),
+      ...e
+    }
+  )
+));
+j.displayName = "SidebarPrimarySection";
+const A = n.forwardRef(({ className: i, ...e }, r) => /* @__PURE__ */ a(
+  "ul",
+  {
+    ref: r,
+    className: c(
+      "flex flex-col gap-[var(--ui-sidebar-primary-section-menu-item-list-gap)]",
+      i
+    ),
+    ...e
+  }
+));
+A.displayName = "SidebarPrimaryMenu";
+const I = z(
+  "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 cursor-pointer 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: {
+      variant: {
+        unselected: "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)]",
+        selected: "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)]"
+      }
+    },
+    defaultVariants: {
+      variant: "unselected"
+    }
+  }
+), H = n.forwardRef(
+  ({
+    className: i,
+    selected: e = !1,
+    icon: r,
+    noIcon: l,
+    render: s,
+    children: t,
+    extras: d,
+    ...m
+  }, o) => {
+    const { expanded: u } = w(), p = _(), v = n.useRef(null), g = n.useRef(null), N = E(g, { enabled: u }), S = R({
+      render: s,
+      ref: [o, v],
+      defaultTagName: "a",
+      props: P(
+        {
+          className: c(
+            I({
+              variant: e ? "selected" : "unselected"
+            }),
+            i
+          ),
+          "aria-current": e ? "page" : void 0,
+          onKeyDown: (b) => {
+            b.key === " " && (b.preventDefault(), b.currentTarget.click());
+          },
+          children: /* @__PURE__ */ y(k, { children: [
+            r != null && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)]", children: r }),
+            /* @__PURE__ */ y(f, { disabled: !N, children: [
+              /* @__PURE__ */ a(
+                h,
+                {
+                  render: /* @__PURE__ */ a(
+                    "span",
+                    {
+                      ref: g,
+                      className: c(
+                        "min-w-0 flex-1 truncate text-start",
+                        !u && "sr-only"
+                      )
+                    }
+                  ),
+                  children: t
+                }
+              ),
+              /* @__PURE__ */ a(
+                x,
+                {
+                  anchor: v,
+                  side: p === "rtl" ? "left" : "right",
+                  children: t
+                }
+              )
+            ] }),
+            d != null && /* @__PURE__ */ a("span", { className: c(!u && "hidden"), children: d })
+          ] })
+        },
+        m
+      )
+    });
+    return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ y(f, { disabled: u, children: [
+      /* @__PURE__ */ a(h, { render: S }),
+      /* @__PURE__ */ a(x, { side: p === "rtl" ? "left" : "right", children: t })
+    ] }) });
+  }
+);
+H.displayName = "SidebarPrimaryMenuItem";
+const U = n.forwardRef(({ className: i, variant: e, shortcut: r, tag: l, children: s, ...t }, d) => {
+  const { expanded: m } = w(), o = e === "tag" || e === "tag-externalLink", u = e === "externalLink" || e === "tag-externalLink", p = e === "shortcut";
+  return /* @__PURE__ */ y(
+    "span",
+    {
+      ref: d,
+      className: c(
+        "inline-flex items-center gap-[var(--ui-sidebar-primary-menu-item-extras-global-container-gap)]",
+        !m && "hidden",
+        i
+      ),
+      ...t,
+      children: [
+        o && (l ?? s),
+        p && /* @__PURE__ */ a("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 ?? s }),
+        u && /* @__PURE__ */ a(
+          M,
+          {
+            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)]"
+          }
+        )
+      ]
+    }
+  );
+});
+U.displayName = "SidebarPrimaryMenuItemExtras";
+const W = n.forwardRef(
+  ({ className: i, icon: e, children: r, extras: l, expandTooltip: s = "Expand", onClick: t, ...d }, m) => {
+    const { expanded: o, toggleExpanded: u } = w(), p = _(), v = n.useRef(null), g = n.useRef(null), N = E(g, { enabled: o }), S = /* @__PURE__ */ y(
+      "button",
+      {
+        ref: (b) => {
+          v.current = b, typeof m == "function" ? m(b) : m && (m.current = b);
+        },
+        type: "button",
+        "aria-expanded": o,
+        className: c(
+          I({ variant: "unselected" }),
+          "text-start",
+          i
+        ),
+        onClick: (b) => {
+          t == null || t(b), b.defaultPrevented || u();
+        },
+        ...d,
+        children: [
+          e != null && /* @__PURE__ */ a(
+            "span",
+            {
+              className: c(
+                "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-primary-menu-item-global-icon-margin-t)] transition-transform",
+                o ? "rtl:rotate-180" : "ltr:rotate-180"
+              ),
+              children: e
+            }
+          ),
+          /* @__PURE__ */ y(f, { disabled: !N, children: [
+            /* @__PURE__ */ a(
+              h,
+              {
+                render: /* @__PURE__ */ a(
+                  "span",
+                  {
+                    ref: g,
+                    className: c(
+                      "min-w-0 flex-1 truncate",
+                      !o && "sr-only"
+                    )
+                  }
+                ),
+                children: r
+              }
+            ),
+            /* @__PURE__ */ a(
+              x,
+              {
+                anchor: v,
+                side: p === "rtl" ? "left" : "right",
+                children: r
+              }
+            )
+          ] }),
+          l != null && /* @__PURE__ */ a("span", { className: c(!o && "hidden"), children: l })
+        ]
+      }
+    );
+    return /* @__PURE__ */ a("li", { className: "contents", children: /* @__PURE__ */ y(f, { disabled: o, children: [
+      /* @__PURE__ */ a(h, { render: S }),
+      /* @__PURE__ */ a(x, { side: p === "rtl" ? "left" : "right", children: s })
+    ] }) });
+  }
+);
+W.displayName = "SidebarPrimaryCollapseTrigger";
+export {
+  D as SidebarPrimary,
+  W as SidebarPrimaryCollapseTrigger,
+  L as SidebarPrimaryContent,
+  V as SidebarPrimaryFooter,
+  F as SidebarPrimaryHeader,
+  A as SidebarPrimaryMenu,
+  H as SidebarPrimaryMenuItem,
+  U as SidebarPrimaryMenuItemExtras,
+  j as SidebarPrimarySection,
+  I as sidebarPrimaryMenuItemVariants,
+  E as useIsOverflowing
+};
+//# sourceMappingURL=sidebar-primary.js.map

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

@@ -0,0 +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';\nimport { useDocDir } from '@/lib/use-doc-dir';\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)] transition-[padding]',\n        'px-[var(--ui-sidebar-primary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-primary-collapsed-container-header-padding-y)]',\n        // `logo`/`collapsedLogo` are two separate elements swapped by a JS\n        // conditional (not one element whose size CSS-transitions) — the new\n        // one mounts at its final height instantly, while `padding-y` is\n        // still mid-transition. Since the two states' (padding*2 + logo\n        // height) sums only match at the transition's start/end, that instant\n        // pop makes the row briefly overshoot/undershoot its resting height\n        // and \"jump\". Pinning the row to the larger of the two sums makes the\n        // outer box's height constant across the whole transition regardless\n        // of that mismatch — padding/logo-height still animate cosmetically\n        // inside it.\n        'h-[max(calc(var(--ui-sidebar-primary-collapsed-container-header-padding-y)*2+var(--ui-sidebar-primary-collapsed-logo-height)),calc(var(--ui-sidebar-primary-expanded-container-header-padding-y)*2+var(--ui-sidebar-primary-expanded-logo-height)))]',\n        // Animate the logo's own height alongside the header's padding transition\n        // (both keyed off the same `data-state` flip) — without it the logo swaps\n        // size instantly while the rail width is still animating, reading as a jump.\n        '[&_:where(img,svg)]:h-[var(--ui-sidebar-primary-collapsed-logo-height)] [&_:where(img,svg)]:w-auto [&_:where(img,svg)]:transition-[height]',\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 cursor-pointer 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\ninterface SidebarPrimaryMenuItemBaseProps\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  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\n// A nav rail row is icon-only when collapsed, so `icon` is required by default\n// (UX: every row must stay legible in rail mode). `noIcon` is the explicit,\n// rare escape hatch for a consumer that truly has no icon for a row.\nexport type SidebarPrimaryMenuItemProps = SidebarPrimaryMenuItemBaseProps &\n  (\n    | {\n        /** Leading 16px icon (from `@acronis-platform/icons-react`). */\n        icon: Exclude<React.ReactNode, undefined>;\n        noIcon?: never;\n      }\n    | { icon?: undefined; /** Explicit opt-out for the rare row with no icon. */ noIcon: true }\n  );\n\nconst SidebarPrimaryMenuItem = React.forwardRef<\n  HTMLAnchorElement,\n  SidebarPrimaryMenuItemProps\n>(\n  (\n    {\n      className,\n      selected = false,\n      icon,\n      noIcon,\n      render,\n      children,\n      extras,\n      ...props\n    },\n    ref\n  ) => {\n    const { expanded } = useSidebarPrimaryContext();\n    const dir = useDocDir();\n    const rowRef = React.useRef<HTMLAnchorElement>(null);\n    const labelRef = React.useRef<HTMLSpanElement>(null);\n    const isOverflowing = useIsOverflowing(labelRef, { enabled: expanded });\n\n    const inner = useRender({\n      render,\n      ref: [ref, rowRef],\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          onKeyDown: (e: React.KeyboardEvent<HTMLAnchorElement>) => {\n            if (e.key === ' ') {\n              e.preventDefault();\n              e.currentTarget.click();\n            }\n          },\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. It's anchored to the row\n                  (not the label span) so it lines up with the sidebar's right\n                  edge regardless of how much the label shrinks for extras. */}\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\n                  anchor={rowRef}\n                  side={dir === 'rtl' ? 'left' : 'right'}\n                >\n                  {children}\n                </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 (\n      <li className=\"contents\">\n        {/* In collapsed/rail mode the label above is `sr-only` (zero-size), so\n            it never receives the hover that would open its tooltip — wrap the\n            whole row so the icon itself is hoverable and always shows the\n            item's label as a tooltip while collapsed. */}\n        <Tooltip disabled={expanded}>\n          <TooltipTrigger render={inner} />\n          <TooltipContent side={dir === 'rtl' ? 'left' : 'right'}>\n            {children}\n          </TooltipContent>\n        </Tooltip>\n      </li>\n    );\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). Rotates 180° between expanded/collapsed. */\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  /** Tooltip text shown when the rail is collapsed. Defaults to `'Expand'`. */\n  expandTooltip?: 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, and (same as\n// `SidebarSecondaryCollapseTrigger`) wraps the whole button in a tooltip\n// showing `expandTooltip` — the `sr-only` label can't receive the hover that\n// would open its own tooltip.\nconst SidebarPrimaryCollapseTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SidebarPrimaryCollapseTriggerProps\n>(\n  (\n    { className, icon, children, extras, expandTooltip = 'Expand', onClick, ...props },\n    ref\n  ) => {\n    const { expanded, toggleExpanded } = useSidebarPrimaryContext();\n    const dir = useDocDir();\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const labelRef = React.useRef<HTMLSpanElement>(null);\n    const isOverflowing = useIsOverflowing(labelRef, { enabled: expanded });\n\n    const button = (\n      <button\n        ref={(node) => {\n          buttonRef.current = node;\n          if (typeof ref === 'function') ref(node);\n          else if (ref) ref.current = node;\n        }}\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\n            anchor={buttonRef}\n            side={dir === 'rtl' ? 'left' : 'right'}\n          >\n            {children}\n          </TooltipContent>\n        </Tooltip>\n        {extras != null && (\n          <span className={cn(!expanded && 'hidden')}>{extras}</span>\n        )}\n      </button>\n    );\n\n    return (\n      <li className=\"contents\">\n        <Tooltip disabled={expanded}>\n          <TooltipTrigger render={button} />\n          <TooltipContent side={dir === 'rtl' ? 'left' : 'right'}>\n            {expandTooltip}\n          </TooltipContent>\n        </Tooltip>\n      </li>\n    );\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","noIcon","extras","dir","useDocDir","rowRef","labelRef","inner","e","jsxs","Fragment","Tooltip","TooltipTrigger","TooltipContent","SidebarPrimaryMenuItemExtras","variant","shortcut","tag","showTag","showExternal","showShortcut","SquareArrowUpRightIcon","SidebarPrimaryCollapseTrigger","expandTooltip","onClick","toggleExpanded","buttonRef","button","node","event"],"mappings":"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"}