@acronis-platform/ui-react 0.56.1 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acronis-platform/ui-react",
-  "version": "0.56.1",
+  "version": "0.57.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/acronis/uikit.git",
@@ -55,7 +55,7 @@
     "tailwind-merge": "3.6.0",
     "@acronis-platform/design-assets": "0.4.0",
     "@acronis-platform/icons-react": "0.5.0",
-    "@acronis-platform/tokens-pd": "2.1.0"
+    "@acronis-platform/tokens-pd": "2.2.0"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",

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

@@ -1,53 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,99 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,75 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,344 +0,0 @@
-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