@acronis-platform/ui-react 0.56.0 → 0.56.1

package/dist/components/ui/accordion/accordion.js

@@ -0,0 +1,53 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import * as a from "react";
+import { Accordion as n } from "@base-ui/react/accordion";
+import { ChevronDownIcon as d } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as s } from "../../../lib/utils.js";
+const h = n.Root, m = a.forwardRef(({ className: e, ...o }, r) => /* @__PURE__ */ t(
+  n.Item,
+  {
+    ref: r,
+    className: s("border-b border-border", e),
+    ...o
+  }
+));
+m.displayName = "AccordionItem";
+const l = a.forwardRef(({ className: e, children: o, ...r }, i) => /* @__PURE__ */ t(n.Header, { className: "flex", children: /* @__PURE__ */ c(
+  n.Trigger,
+  {
+    ref: i,
+    className: s(
+      "flex flex-1 items-center justify-between py-4 text-sm font-medium outline-none transition-all hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&[data-panel-open]>svg]:rotate-180",
+      e
+    ),
+    ...r,
+    children: [
+      o,
+      /* @__PURE__ */ t(
+        d,
+        {
+          size: 16,
+          className: "shrink-0 text-[var(--ui-text-on-surface-secondary)] transition-transform duration-200"
+        }
+      )
+    ]
+  }
+) }));
+l.displayName = "AccordionTrigger";
+const f = a.forwardRef(({ className: e, children: o, ...r }, i) => /* @__PURE__ */ t(
+  n.Panel,
+  {
+    ref: i,
+    className: "overflow-hidden text-sm transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0",
+    ...r,
+    children: /* @__PURE__ */ t("div", { className: s("pb-4 pt-0 text-[var(--ui-text-on-surface-secondary)]", e), children: o })
+  }
+));
+f.displayName = "AccordionContent";
+export {
+  h as Accordion,
+  f as AccordionContent,
+  m as AccordionItem,
+  l as AccordionTrigger
+};
+//# sourceMappingURL=accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../../src/components/ui/accordion/accordion.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `accordion`. A vertical set of\n// disclosure sections built on Base UI's Accordion. Markup-only — the item divider\n// uses the shared border token (bare `border-b` renders transparent in ui-react,\n// so it must name `border-border`); text inherits the foreground.\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b border-border', className)}\n    {...props}\n  />\n));\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref as React.Ref<HTMLElement>}\n      className={cn(\n        'flex flex-1 items-center justify-between py-4 text-sm font-medium outline-none transition-all hover:underline focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&[data-panel-open]>svg]:rotate-180',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-text-on-surface-secondary)] transition-transform duration-200\"\n      />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Panel>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Panel>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Panel\n    ref={ref}\n    className=\"overflow-hidden text-sm transition-[height] duration-200 ease-out data-[ending-style]:h-0 data-[starting-style]:h-0\"\n    {...props}\n  >\n    <div className={cn('pb-4 pt-0 text-[var(--ui-text-on-surface-secondary)]', className)}>\n      {children}\n    </div>\n  </AccordionPrimitive.Panel>\n));\nAccordionContent.displayName = 'AccordionContent';\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n"],"names":["Accordion","AccordionPrimitive","AccordionItem","React","className","props","ref","jsx","cn","AccordionTrigger","children","jsxs","ChevronDownIcon","AccordionContent"],"mappings":";;;;;AAYA,MAAMA,IAAYC,EAAmB,MAE/BC,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAmB;AAAA,EAAnB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAG,0BAA0BJ,CAAS;AAAA,IAChD,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAc,cAAc;AAE5B,MAAMO,IAAmBN,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,EAAA,GAASC,MACpC,gBAAAC,EAACN,EAAmB,QAAnB,EAA0B,WAAU,QACnC,UAAA,gBAAAU;AAAA,EAACV,EAAmB;AAAA,EAAnB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEH,UAAA;AAAA,MAAAK;AAAA,MACD,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AACF,GACF,CACD;AACDH,EAAiB,cAAc;AAE/B,MAAMI,IAAmBV,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,UAAAM,GAAU,GAAGL,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAmB;AAAA,EAAnB;AAAA,IACC,KAAAK;AAAA,IACA,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,4BAAC,OAAA,EAAI,WAAWG,EAAG,wDAAwDJ,CAAS,GACjF,UAAAM,EAAA,CACH;AAAA,EAAA;AACF,CACD;AACDG,EAAiB,cAAc;"}

package/dist/components/ui/alert/alert.js

@@ -0,0 +1,99 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as e from "react";
+import { cva as i } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as o } from "../../../lib/utils.js";
+const l = i(
+  "relative flex w-full items-start gap-3 rounded-md border p-4 text-foreground",
+  {
+    variants: {
+      variant: {
+        info: "border-[var(--ui-background-status-strong-info)] bg-[var(--ui-background-status-info)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-info)]",
+        success: "border-[var(--ui-background-status-strong-success)] bg-[var(--ui-background-status-success)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-success)]",
+        warning: "border-[var(--ui-background-status-strong-warning)] bg-[var(--ui-background-status-warning)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-warning)]",
+        critical: "border-[var(--ui-background-status-strong-critical)] bg-[var(--ui-background-status-critical)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-critical)]",
+        destructive: "border-[var(--ui-background-status-strong-danger)] bg-[var(--ui-background-status-danger)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-danger)]",
+        ai: "border-[var(--ui-text-on-status-ai)] bg-[var(--ui-background-status-ai)] [&_[data-slot=alert-icon]]:text-[var(--ui-text-on-status-ai)]",
+        neutral: "border-[var(--ui-background-status-strong-neutral)] bg-[var(--ui-background-status-neutral)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-neutral)]"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+), u = e.forwardRef(
+  ({ className: t, variant: a, ...r }, n) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      role: "alert",
+      "data-slot": "alert",
+      className: o(l({ variant: a }), t),
+      ...r
+    }
+  )
+);
+u.displayName = "Alert";
+const c = e.forwardRef(({ className: t, ...a }, r) => (
+  // Color is set by the Alert variant (targets [data-slot=alert-icon]). The icon
+  // sits in a line-height-matched box (h-6 = leading-6) and is centered in it, so
+  // it optically aligns with the first line of the title/description.
+  /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      "data-slot": "alert-icon",
+      className: o("flex h-6 shrink-0 items-center", t),
+      ...a
+    }
+  )
+));
+c.displayName = "AlertIcon";
+const d = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: r,
+    "data-slot": "alert-content",
+    className: o("flex min-w-0 flex-1 flex-col gap-0.5", t),
+    ...a
+  }
+));
+d.displayName = "AlertContent";
+const g = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ s(
+  "h5",
+  {
+    ref: r,
+    "data-slot": "alert-title",
+    className: o("mb-0 text-sm font-semibold leading-6", t),
+    ...a
+  }
+));
+g.displayName = "AlertTitle";
+const b = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: r,
+    "data-slot": "alert-description",
+    className: o("text-sm font-normal leading-6", t),
+    ...a
+  }
+));
+b.displayName = "AlertDescription";
+const f = e.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ s(
+  "div",
+  {
+    ref: r,
+    "data-slot": "alert-actions",
+    className: o("flex items-center gap-2", t),
+    ...a
+  }
+));
+f.displayName = "AlertActions";
+export {
+  u as Alert,
+  f as AlertActions,
+  d as AlertContent,
+  b as AlertDescription,
+  c as AlertIcon,
+  g as AlertTitle
+};
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../../../src/components/ui/alert/alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `alert`\n// (packages/ui-legacy/src/components/ui/alert.tsx) and reconciled with the Figma\n// design (node 5337-71774): a rounded banner with a *full* border in the strong\n// status color, a pale status surface, foreground text, and only the icon tinted\n// with the status color. No Base UI primitive — semantic markup with\n// `role=\"alert\"`. Each variant maps to the `--ui-*` status tokens: the pale\n// surface (`--ui-background-status-*`) + the saturated border/icon\n// (`--ui-background-status-strong-*`). `destructive` uses the danger tokens; `ai`\n// has no `strong` surface token, so it uses its solid text token for the\n// border + icon.\nconst alertVariants = cva(\n  'relative flex w-full items-start gap-3 rounded-md border p-4 text-foreground',\n  {\n    variants: {\n      variant: {\n        info: 'border-[var(--ui-background-status-strong-info)] bg-[var(--ui-background-status-info)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-info)]',\n        success:\n          'border-[var(--ui-background-status-strong-success)] bg-[var(--ui-background-status-success)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-success)]',\n        warning:\n          'border-[var(--ui-background-status-strong-warning)] bg-[var(--ui-background-status-warning)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-warning)]',\n        critical:\n          'border-[var(--ui-background-status-strong-critical)] bg-[var(--ui-background-status-critical)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-critical)]',\n        destructive:\n          'border-[var(--ui-background-status-strong-danger)] bg-[var(--ui-background-status-danger)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-danger)]',\n        ai: 'border-[var(--ui-text-on-status-ai)] bg-[var(--ui-background-status-ai)] [&_[data-slot=alert-icon]]:text-[var(--ui-text-on-status-ai)]',\n        neutral:\n          'border-[var(--ui-background-status-strong-neutral)] bg-[var(--ui-background-status-neutral)] [&_[data-slot=alert-icon]]:text-[var(--ui-background-status-strong-neutral)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  }\n);\n\nexport interface AlertProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"alert\"\n      data-slot=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n);\nAlert.displayName = 'Alert';\n\nconst AlertIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  // Color is set by the Alert variant (targets [data-slot=alert-icon]). The icon\n  // sits in a line-height-matched box (h-6 = leading-6) and is centered in it, so\n  // it optically aligns with the first line of the title/description.\n  <div\n    ref={ref}\n    data-slot=\"alert-icon\"\n    className={cn('flex h-6 shrink-0 items-center', className)}\n    {...props}\n  />\n));\nAlertIcon.displayName = 'AlertIcon';\n\nconst AlertContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-content\"\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n));\nAlertContent.displayName = 'AlertContent';\n\nconst AlertTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    data-slot=\"alert-title\"\n    className={cn('mb-0 text-sm font-semibold leading-6', className)}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-description\"\n    className={cn('text-sm font-normal leading-6', className)}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\n// Action slot for alert buttons. Two placements (see the Figma): as a direct\n// child of Alert after AlertContent it sits at the right edge (AlertContent is\n// flex-1) — add `self-center` to center it vertically; placed inside AlertContent\n// (under the description) it flows below the text.\nconst AlertActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"alert-actions\"\n    className={cn('flex items-center gap-2', className)}\n    {...props}\n  />\n));\nAlertActions.displayName = 'AlertActions';\n\nexport {\n  Alert,\n  AlertIcon,\n  AlertContent,\n  AlertTitle,\n  AlertDescription,\n  AlertActions,\n};\n"],"names":["alertVariants","cva","Alert","React","className","variant","props","ref","jsx","cn","AlertIcon","AlertContent","AlertTitle","AlertDescription","AlertActions"],"mappings":";;;;AAeA,MAAMA,IAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SACE;AAAA,QACF,SACE;AAAA,QACF,UACE;AAAA,QACF,aACE;AAAA,QACF,IAAI;AAAA,QACJ,SACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAMMC,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GAASC,MACjC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAWE,EAAGT,EAAc,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,MAClD,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAM,cAAc;AAEpB,MAAMQ,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC;AAAA;AAAA;AAAA;AAAA,EAI1B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAG,kCAAkCL,CAAS;AAAA,MACxD,GAAGE;AAAA,IAAA;AAAA,EAAA;AAAA,CAEP;AACDI,EAAU,cAAc;AAExB,MAAMC,IAAeR,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,wCAAwCL,CAAS;AAAA,IAC9D,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAa,cAAc;AAE3B,MAAMC,IAAaT,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,wCAAwCL,CAAS;AAAA,IAC9D,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAW,cAAc;AAEzB,MAAMC,IAAmBV,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,iCAAiCL,CAAS;AAAA,IACvD,GAAGE;AAAA,EAAA;AACN,CACD;AACDO,EAAiB,cAAc;AAM/B,MAAMC,IAAeX,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,2BAA2BL,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDQ,EAAa,cAAc;"}

package/dist/components/ui/app-shell/app-shell.js

@@ -0,0 +1,75 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as o } from "../../../lib/utils.js";
+const s = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
+  "div",
+  {
+    ref: l,
+    "data-slot": "app-shell",
+    className: o("flex min-h-screen w-full bg-background", e),
+    ...a
+  }
+));
+s.displayName = "AppShell";
+const d = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
+  "aside",
+  {
+    ref: l,
+    "data-slot": "app-shell-sidebar",
+    className: o("flex shrink-0", e),
+    ...a
+  }
+));
+d.displayName = "AppShellSidebar";
+const t = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
+  "div",
+  {
+    ref: l,
+    "data-slot": "app-shell-body",
+    className: o("flex min-w-0 flex-1 flex-col", e),
+    ...a
+  }
+));
+t.displayName = "AppShellBody";
+const f = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
+  "header",
+  {
+    ref: l,
+    "data-slot": "app-shell-header",
+    className: o(
+      "sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-6",
+      e
+    ),
+    ...a
+  }
+));
+f.displayName = "AppShellHeader";
+const i = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
+  "main",
+  {
+    ref: l,
+    "data-slot": "app-shell-main",
+    className: o("flex-1 overflow-auto", e),
+    ...a
+  }
+));
+i.displayName = "AppShellMain";
+const h = r.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ p(
+  "footer",
+  {
+    ref: l,
+    "data-slot": "app-shell-footer",
+    className: o("shrink-0 border-t border-border bg-background px-6 py-4", e),
+    ...a
+  }
+));
+h.displayName = "AppShellFooter";
+export {
+  s as AppShell,
+  t as AppShellBody,
+  h as AppShellFooter,
+  f as AppShellHeader,
+  i as AppShellMain,
+  d as AppShellSidebar
+};
+//# sourceMappingURL=app-shell.js.map

package/dist/components/ui/app-shell/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","sources":["../../../../src/components/ui/app-shell/app-shell.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The full-page application scaffold from the Figma App Shell (node 2782-1495):\n// a left sidebar column (holds SidebarPrimary, optionally a secondary menu) beside\n// a body column of a sticky header (with the global search) over the scrolling\n// main content. Layout-only — the rich parts come from SidebarPrimary /\n// SidebarSecondary / SearchGlobal placed inside these slots. Surfaces use the\n// shared `--ui-*` tokens (bg-background / border-border; a bare `border` is\n// transparent in ui-react, so borders name `border-border`).\n\nconst AppShell = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell\"\n    className={cn('flex min-h-screen w-full bg-background', className)}\n    {...props}\n  />\n));\nAppShell.displayName = 'AppShell';\n\nconst AppShellSidebar = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <aside\n    ref={ref}\n    data-slot=\"app-shell-sidebar\"\n    className={cn('flex shrink-0', className)}\n    {...props}\n  />\n));\nAppShellSidebar.displayName = 'AppShellSidebar';\n\nconst AppShellBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-body\"\n    className={cn('flex min-w-0 flex-1 flex-col', className)}\n    {...props}\n  />\n));\nAppShellBody.displayName = 'AppShellBody';\n\nconst AppShellHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    data-slot=\"app-shell-header\"\n    className={cn(\n      'sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-6',\n      className\n    )}\n    {...props}\n  />\n));\nAppShellHeader.displayName = 'AppShellHeader';\n\nconst AppShellMain = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <main\n    ref={ref}\n    data-slot=\"app-shell-main\"\n    className={cn('flex-1 overflow-auto', className)}\n    {...props}\n  />\n));\nAppShellMain.displayName = 'AppShellMain';\n\nconst AppShellFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    data-slot=\"app-shell-footer\"\n    className={cn('shrink-0 border-t border-border bg-background px-6 py-4', className)}\n    {...props}\n  />\n));\nAppShellFooter.displayName = 'AppShellFooter';\n\nexport {\n  AppShell,\n  AppShellSidebar,\n  AppShellBody,\n  AppShellHeader,\n  AppShellMain,\n  AppShellFooter,\n};\n"],"names":["AppShell","React","className","props","ref","jsx","cn","AppShellSidebar","AppShellBody","AppShellHeader","AppShellMain","AppShellFooter"],"mappings":";;;AAYA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,0CAA0CJ,CAAS;AAAA,IAChE,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAkBN,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,iBAAiBJ,CAAS;AAAA,IACvC,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAgB,cAAc;AAE9B,MAAMC,IAAeP,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,gCAAgCJ,CAAS;AAAA,IACtD,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAa,cAAc;AAE3B,MAAMC,IAAiBR,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAE7B,MAAMC,IAAeT,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,wBAAwBJ,CAAS;AAAA,IAC9C,GAAGC;AAAA,EAAA;AACN,CACD;AACDO,EAAa,cAAc;AAE3B,MAAMC,IAAiBV,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,2DAA2DJ,CAAS;AAAA,IACjF,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAe,cAAc;"}

package/dist/components/ui/app-shell-chat/app-shell-chat.js

@@ -0,0 +1,344 @@
+import { jsx as i, jsxs as w, Fragment as g } from "react/jsx-runtime";
+import * as n from "react";
+import { AcronisIcon as M } from "@acronis-platform/icons-react/solid-mono";
+import { cn as m } from "../../../lib/utils.js";
+import { useDocDir as z } from "../../../lib/use-doc-dir.js";
+import { BREAKPOINT_3XL as T, getViewportWidth as y, BREAKPOINT_XL as P } from "../../../lib/breakpoints.js";
+import { Tooltip as L, TooltipTrigger as W, TooltipContent as _ } from "../tooltip/tooltip.js";
+const A = 512, K = 448, C = 48, D = A * 2, X = {
+  primaryExpanded: !0,
+  secondaryExpanded: !0
+}, j = {
+  primaryExpanded: !1,
+  secondaryExpanded: !0
+};
+function F(e) {
+  return e === void 0 || e >= T ? X : j;
+}
+function ce() {
+  const [e] = n.useState(
+    () => F(y())
+  );
+  return e;
+}
+function N(e) {
+  return e === void 0 || e >= T ? A : e >= P ? K : C;
+}
+function U() {
+  const [e, r] = n.useState(
+    () => N(y())
+  );
+  return n.useEffect(() => {
+    const t = () => r(N(y()));
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, []), e;
+}
+const k = /* @__PURE__ */ w(g, { children: [
+  /* @__PURE__ */ i("span", { className: "font-semibold", children: "Resize:" }),
+  " Drag",
+  /* @__PURE__ */ i("br", {}),
+  /* @__PURE__ */ i("span", { className: "font-semibold", children: "Reset size:" }),
+  " Double click"
+] }), Y = n.forwardRef(
+  ({ className: e, children: r, ...t }, a) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: a,
+      "data-slot": "app-shell-chat",
+      className: m("flex h-full w-full bg-background", e),
+      ...t,
+      children: r
+    }
+  )
+);
+Y.displayName = "AppShellChat";
+const V = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ i(
+  "aside",
+  {
+    ref: t,
+    "data-slot": "app-shell-chat-sidebar",
+    className: m("flex h-full shrink-0", e),
+    ...r
+  }
+));
+V.displayName = "AppShellChatSidebar";
+const q = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: t,
+    "data-slot": "app-shell-chat-content",
+    className: m("flex h-full min-w-0 flex-1 flex-col bg-muted", e),
+    ...r
+  }
+));
+q.displayName = "AppShellChatContent";
+const G = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: t,
+    "data-slot": "app-shell-chat-content-header",
+    className: m(
+      "flex shrink-0 flex-col gap-3 border-b border-[var(--ui-border-on-surface-divider)] p-4",
+      e
+    ),
+    ...r
+  }
+));
+G.displayName = "AppShellChatContentHeader";
+const J = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: t,
+    "data-slot": "app-shell-chat-content-body",
+    className: m("flex flex-1 flex-col overflow-auto p-4", e),
+    ...r
+  }
+));
+J.displayName = "AppShellChatContentBody";
+const I = n.createContext(null);
+function R() {
+  return n.useContext(I) ?? {
+    compact: !1,
+    width: A,
+    setWidth: () => {
+    },
+    resetWidth: () => {
+    },
+    minWidth: C,
+    maxWidth: D,
+    resizeAriaLabel: "Resize chat",
+    resizeTooltip: k
+  };
+}
+function E(e, r) {
+  const t = e.parentElement;
+  if (!t) return r;
+  const a = t.getBoundingClientRect();
+  if (a.width <= 0) return r;
+  let l = 0;
+  for (const o of Array.from(t.children))
+    o !== e && o.dataset.slot !== "app-shell-chat-content" && (l += o.getBoundingClientRect().width);
+  const c = a.width - l;
+  return c > 0 ? c : r;
+}
+function Q(e, r, { onDragStart: t, onDragEnd: a } = {}) {
+  e.preventDefault();
+  const l = e.currentTarget, { pointerId: c } = e;
+  l.setPointerCapture(c), t == null || t();
+  const o = l.closest("[data-state]");
+  if (!o) {
+    a == null || a(), l.releasePointerCapture(c);
+    return;
+  }
+  o.style.transitionProperty = "none";
+  const u = getComputedStyle(o).direction === "rtl", d = o.getBoundingClientRect(), { minWidth: v, maxWidth: b } = r.current, s = E(o, b), f = (p) => {
+    if (p.pointerId !== c) return;
+    const x = u ? p.clientX - d.left : d.right - p.clientX;
+    r.current.setWidth(Math.min(Math.max(x, v), s));
+  }, h = (p) => {
+    p.pointerId === c && (a == null || a(), o.style.transitionProperty = "", window.removeEventListener("pointermove", f), window.removeEventListener("pointerup", h), window.removeEventListener("pointercancel", h));
+  };
+  window.addEventListener("pointermove", f), window.addEventListener("pointerup", h), window.addEventListener("pointercancel", h);
+}
+function Z(e, r, t) {
+  const { minWidth: a, maxWidth: l, width: c, setWidth: o, resetWidth: u } = r, d = 16, v = t === "rtl" ? "ArrowRight" : "ArrowLeft", b = t === "rtl" ? "ArrowLeft" : "ArrowRight", s = e.currentTarget.closest("[data-state]"), f = s ? E(s, l) : l, h = (p) => Math.min(Math.max(p, a), f);
+  e.key === v ? (e.preventDefault(), o(h(c + d))) : e.key === b ? (e.preventDefault(), o(h(c - d))) : e.key === "Home" && (e.preventDefault(), u());
+}
+function O() {
+  const e = R(), r = z(), t = n.useRef(e);
+  t.current = e;
+  const [a, l] = n.useState(!1), [c, o] = n.useState(!1), u = (s) => {
+    l(!1), Q(s, t, {
+      onDragStart: () => o(!0),
+      onDragEnd: () => o(!1)
+    });
+  }, d = () => {
+    e.resetWidth();
+  }, v = (s) => {
+    Z(s, e, r);
+  };
+  return /* @__PURE__ */ w(
+    L,
+    {
+      open: a,
+      onOpenChange: (s) => {
+        c || l(s);
+      },
+      trackCursorAxis: "y",
+      children: [
+        /* @__PURE__ */ i(
+          W,
+          {
+            render: /* @__PURE__ */ i(
+              "div",
+              {
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": e.resizeAriaLabel,
+                className: m(
+                  // 17px hit area on the inline-start edge. The chat's own border-s
+                  // provides the visible 1px line; its color changes via :has() on
+                  // hover/active/focus-visible (see AppShellChatChat).
+                  "absolute start-0 top-0 h-full w-[17px] ltr:-translate-x-1/2 rtl:translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10",
+                  // On focus: a 1px active-color line (after pseudo) + 3px ring.
+                  "after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0 after:pointer-events-none",
+                  "after:[border-inline-start-width:var(--ui-resizable-border-width,1px)] after:border-solid after:border-transparent",
+                  "focus-visible:outline-none focus-visible:after:[border-inline-start-color:var(--ui-resizable-border-color-active)] focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)]"
+                ),
+                tabIndex: 0,
+                onKeyDown: v,
+                onPointerDown: u,
+                onDoubleClick: d
+              }
+            )
+          }
+        ),
+        e.resizeTooltip != null && /* @__PURE__ */ i(_, { side: r === "rtl" ? "right" : "left", align: "center", children: e.resizeTooltip })
+      ]
+    }
+  );
+}
+O.displayName = "AppShellChatResizeEdge";
+const $ = n.forwardRef(
+  ({
+    className: e,
+    width: r,
+    onWidthChange: t,
+    resizeAriaLabel: a = "Resize chat",
+    resizeTooltip: l = k,
+    children: c,
+    ...o
+  }, u) => {
+    const d = U(), [v, b] = n.useState(
+      void 0
+    ), s = r !== void 0, f = s ? r : v ?? d, h = n.useCallback(
+      (S) => {
+        s || b(S), t == null || t(S);
+      },
+      [s, t]
+    ), p = n.useCallback(() => {
+      s || b(void 0), t == null || t(d);
+    }, [s, t, d]), x = f <= C, H = n.useMemo(
+      () => ({
+        compact: x,
+        width: f,
+        setWidth: h,
+        resetWidth: p,
+        minWidth: C,
+        maxWidth: D,
+        resizeAriaLabel: a,
+        resizeTooltip: l
+      }),
+      [x, f, h, p, a, l]
+    ), B = s || v !== void 0 ? { width: f } : void 0;
+    return /* @__PURE__ */ i(I.Provider, { value: H, children: /* @__PURE__ */ w(
+      "aside",
+      {
+        ref: u,
+        "data-slot": "app-shell-chat-chat",
+        "data-state": x ? "collapsed" : "expanded",
+        style: B,
+        className: m(
+          // Live, responsive width — no JS, reflows on every browser
+          // resize until `hasWidthOverride` (above) switches to the
+          // inline style. `w-12` is the spacing scale (3rem = 48px);
+          // `w-md`/`w-lg` are Tailwind's named container-scale width
+          // utilities (28rem/32rem = 448px/512px) — see the `CHAT_*`
+          // constants above for the same numbers.
+          "group/chat relative flex h-full shrink-0 flex-col border-s border-[var(--ui-border-on-surface-divider)] bg-background w-12 xl:w-md 3xl:w-lg transition-[width,border-color]",
+          // Resize-edge hover/active/focus recolors the START border line.
+          "has-[[role=separator]:hover]:[border-inline-start-color:var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:[border-inline-start-color:var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:[border-inline-start-color:var(--ui-resizable-border-color-active)]",
+          e
+        ),
+        ...o,
+        children: [
+          /* @__PURE__ */ i(O, {}),
+          c
+        ]
+      }
+    ) });
+  }
+);
+$.displayName = "AppShellChatChat";
+const ee = n.forwardRef(({ className: e, label: r, actions: t, children: a, ...l }, c) => {
+  const { compact: o } = R(), u = z(), d = r ?? a;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: c,
+      "data-slot": "app-shell-chat-chat-header",
+      className: m(
+        "flex shrink-0 items-center border-b border-[var(--ui-border-on-surface-divider)] p-4",
+        o ? "justify-center" : "gap-3",
+        e
+      ),
+      ...l,
+      children: o ? (
+        // Collapsed rail: only the Acronis "A" mark, with the full label on
+        // hover. `size-8` keeps this row exactly as tall as the label row
+        // below (a 32px line height) — the icon alone is only 24px, so
+        // without an explicit size the header would be a few px shorter than
+        // Content's header. The accessible name comes from the `sr-only`
+        // span's actual DOM content (same pattern as
+        // `SidebarPrimaryMenuItem`'s collapsed rail), not a derived
+        // `aria-label` string — that works for ANY `resolvedLabel`
+        // (a plain string or a rich ReactNode via `children`), whereas a
+        // `typeof resolvedLabel === 'string'` check would silently leave
+        // the icon with no accessible name at all for non-string content.
+        /* @__PURE__ */ w(L, { children: [
+          /* @__PURE__ */ w(
+            W,
+            {
+              render: /* @__PURE__ */ i("span", { className: "flex size-8 items-center justify-center" }),
+              children: [
+                /* @__PURE__ */ i(M, { size: 24, "aria-hidden": "true" }),
+                /* @__PURE__ */ i("span", { className: "sr-only", children: d })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(_, { side: u === "rtl" ? "left" : "right", children: d })
+        ] })
+      ) : /* @__PURE__ */ w(g, { children: [
+        /* @__PURE__ */ i("span", { className: "ui-typography-headings-title min-w-0 flex-1 truncate text-[var(--ui-text-on-surface-primary)]", children: d }),
+        t != null && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center", children: t })
+      ] })
+    }
+  );
+});
+ee.displayName = "AppShellChatChatHeader";
+const te = n.forwardRef(({ className: e, ...r }, t) => {
+  const { compact: a } = R();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: t,
+      "data-slot": "app-shell-chat-chat-body",
+      className: m(
+        "flex flex-1 flex-col overflow-auto p-4",
+        a && "hidden",
+        e
+      ),
+      ...r
+    }
+  );
+});
+te.displayName = "AppShellChatChatBody";
+export {
+  Y as AppShellChat,
+  $ as AppShellChatChat,
+  te as AppShellChatChatBody,
+  I as AppShellChatChatContext,
+  ee as AppShellChatChatHeader,
+  q as AppShellChatContent,
+  J as AppShellChatContentBody,
+  G as AppShellChatContentHeader,
+  O as AppShellChatResizeEdge,
+  V as AppShellChatSidebar,
+  F as getAppShellChatInitialLayout,
+  N as getLiveChatDefaultWidth,
+  E as getResizeMaxWidth,
+  Z as handleResizeKeyDown,
+  Q as handleResizePointerDown,
+  ce as useAppShellChatInitialLayout
+};
+//# sourceMappingURL=app-shell-chat.js.map