@acronis-platform/ui-react 0.57.0 → 0.57.1

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

@@ -0,0 +1,80 @@
+import { jsxs as l, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { Sheet as g, SheetTrigger as D, SheetContent as x, SheetHeader as N, SheetTitle as E, SheetCloseButton as L, SheetBody as T, SheetFooter as b } from "./sheet.js";
+import { Spinner as j } from "../spinner/spinner.js";
+import { Empty as w, EmptyHeader as B, EmptyTitle as v, EmptyDescription as C } from "../empty/empty.js";
+import { DescriptionList as F, DescriptionListItem as H, DescriptionListLabel as I, DescriptionListValue as V } from "../description-list/description-list.js";
+function k({
+  contentState: t,
+  properties: i,
+  children: n,
+  emptyTitle: h,
+  emptyDescription: d,
+  errorTitle: m,
+  errorDescription: s
+}) {
+  if (t === "loading")
+    return /* @__PURE__ */ e("div", { className: "flex h-40 items-center justify-center", children: /* @__PURE__ */ e(j, {}) });
+  if (t === "empty" || t === "error") {
+    const r = t === "error";
+    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ l(B, { children: [
+      /* @__PURE__ */ e(v, { children: r ? m ?? "Something went wrong" : h ?? "Nothing to show" }),
+      /* @__PURE__ */ e(C, { children: r ? s ?? "The details could not be loaded." : d ?? "There are no details to display yet." })
+    ] }) });
+  }
+  return n ? /* @__PURE__ */ e(S, { children: n }) : i != null && i.length ? /* @__PURE__ */ e(
+    F,
+    {
+      className: "-mx-6",
+      style: { "--description-list-label": "9rem" },
+      children: i.map((r, o) => /* @__PURE__ */ l(H, { children: [
+        /* @__PURE__ */ e(I, { className: "text-muted-foreground", children: r.label }),
+        /* @__PURE__ */ e(V, { className: "font-medium", children: r.value })
+      ] }, o))
+    }
+  ) : null;
+}
+function q({
+  open: t,
+  defaultOpen: i,
+  onOpenChange: n,
+  title: h,
+  side: d = "right",
+  contentState: m = "content",
+  properties: s,
+  children: r,
+  actions: o,
+  trigger: c,
+  emptyTitle: a,
+  emptyDescription: u,
+  errorTitle: f,
+  errorDescription: y,
+  portalContainer: p
+}) {
+  return /* @__PURE__ */ l(g, { open: t, defaultOpen: i, onOpenChange: n, children: [
+    c ? /* @__PURE__ */ e(D, { render: c }) : null,
+    /* @__PURE__ */ l(x, { side: d, portalContainer: p, children: [
+      /* @__PURE__ */ l(N, { children: [
+        /* @__PURE__ */ e(E, { children: h }),
+        /* @__PURE__ */ e(L, {})
+      ] }),
+      /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
+        k,
+        {
+          contentState: m,
+          properties: s,
+          emptyTitle: a,
+          emptyDescription: u,
+          errorTitle: f,
+          errorDescription: y,
+          children: r
+        }
+      ) }),
+      o ? /* @__PURE__ */ e(b, { children: o }) : null
+    ] })
+  ] });
+}
+q.displayName = "SheetDetails";
+export {
+  q as SheetDetails
+};
+//# sourceMappingURL=sheet-details.js.map

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 { Spinner } from '../spinner';\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 → Spinner, 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        <Spinner />\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","Spinner","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