@acronis-platform/ui-react 0.57.0 → 0.57.1

package/dist/components/ui/progress-circle/progress-circle.js

@@ -0,0 +1,115 @@
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
+import * as I from "react";
+import { Progress as M } from "@base-ui/react/progress";
+import { CircleCheckIcon as R, TriangleWarningIcon as g, CircleTimesIcon as j } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as P } 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";
+const S = {
+  tiny: { d: 16, stroke: 2, font: "text-[10px] leading-none" },
+  sm: { d: 24, stroke: 3, font: "text-[10px] leading-none" },
+  md: { d: 40, stroke: 4, font: "text-xs font-semibold" },
+  lg: { d: 64, stroke: 5, font: "text-sm font-semibold" }
+}, T = {
+  brand: "stroke-[var(--ui-background-brand-secondary)]",
+  danger: "stroke-[var(--ui-text-on-status-danger)]",
+  critical: "stroke-[var(--ui-text-on-status-critical)]",
+  warning: "stroke-[var(--ui-text-on-status-warning)]",
+  success: "stroke-[var(--ui-text-on-status-success)]"
+}, _ = {
+  danger: /* @__PURE__ */ e(j, { className: "text-[var(--ui-text-on-status-danger)]" }),
+  critical: /* @__PURE__ */ e(g, { className: "text-[var(--ui-text-on-status-critical)]" }),
+  warning: /* @__PURE__ */ e(g, { className: "text-[var(--ui-text-on-status-warning)]" }),
+  success: /* @__PURE__ */ e(R, { className: "text-[var(--ui-text-on-status-success)]" })
+};
+function O(s) {
+  return s >= 0.8 ? "success" : s >= 0.6 ? "warning" : s >= 0.4 ? "critical" : "danger";
+}
+const W = P(
+  "relative inline-flex shrink-0 items-center justify-center",
+  {
+    variants: {
+      size: { tiny: "", sm: "", md: "", lg: "" }
+    },
+    defaultVariants: { size: "sm" }
+  }
+), $ = I.forwardRef(
+  ({
+    className: s,
+    value: l = 0,
+    max: n = 100,
+    size: u = "sm",
+    status: h,
+    showValue: k = !1,
+    showIcon: v = !1,
+    children: p,
+    ...N
+  }, y) => {
+    const { d: t, stroke: o, font: C } = S[u], w = n > 0 ? n : 100, a = Math.min(1, Math.max(0, l / w)), d = h ?? O(a), i = (t - o) / 2, f = 2 * Math.PI * i, r = t / 2, b = v ? _[d] : void 0, m = p ?? b ?? (k ? `${Math.round(a * 100)}%` : null);
+    return /* @__PURE__ */ x(
+      M.Root,
+      {
+        ref: y,
+        value: l,
+        max: n,
+        className: c(W({ size: u }), s),
+        style: { width: t, height: t },
+        ...N,
+        children: [
+          /* @__PURE__ */ x(
+            "svg",
+            {
+              width: t,
+              height: t,
+              viewBox: `0 0 ${t} ${t}`,
+              className: "-rotate-90",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ e(
+                  "circle",
+                  {
+                    className: "stroke-[var(--ui-border-on-surface-border)]",
+                    fill: "none",
+                    strokeWidth: o,
+                    cx: r,
+                    cy: r,
+                    r: i
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "circle",
+                  {
+                    className: c(T[d], "transition-[stroke-dashoffset]"),
+                    fill: "none",
+                    strokeWidth: o,
+                    strokeLinecap: "round",
+                    cx: r,
+                    cy: r,
+                    r: i,
+                    strokeDasharray: f,
+                    strokeDashoffset: f * (1 - a)
+                  }
+                )
+              ]
+            }
+          ),
+          m != null && /* @__PURE__ */ e(
+            "span",
+            {
+              className: c(
+                "absolute inset-0 flex items-center justify-center text-foreground [&_svg]:size-[60%]",
+                C
+              ),
+              children: m
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+$.displayName = "ProgressCircle";
+export {
+  $ as ProgressCircle,
+  W as progressCircleVariants
+};
+//# sourceMappingURL=progress-circle.js.map

package/dist/components/ui/progress-circle/progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.js","sources":["../../../../src/components/ui/progress-circle/progress-circle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitive } from '@base-ui/react/progress';\nimport {\n  CircleCheckIcon,\n  CircleTimesIcon,\n  TriangleWarningIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A circular (radial) progress indicator — an SVG ring whose arc fills with the\n// value and whose color tracks the level (danger → critical → warning →\n// success). Built from the Cyber-Compliance \"Compliance %\" design (node\n// 2396-186059) and the Vue kit's `AvProgressRadial`. The ring is wrapped in the\n// Base UI Progress primitive so it carries the proper `role=\"progressbar\"` +\n// `aria-valuenow/min/max`; the visuals are a hand-drawn SVG (Base UI's Track/\n// Indicator are linear-only). No `--ui-progress-circle-*` tier — the arc uses the\n// shared status colors (`--ui-text-on-status-*`), the track the border token, and\n// the center label the surface foreground.\n\n// `brand` is the neutral single-color mode (matches the linear Progress accent);\n// the others are score levels. With no `status`, the level is derived from the\n// value (like the Vue ProgressRadial).\nexport type ProgressCircleStatus =\n  | 'brand'\n  | 'danger'\n  | 'critical'\n  | 'warning'\n  | 'success';\n\n// Size → [diameter px, stroke px, center font class]. The table cell uses the\n// smaller sizes; lg suits cards/widgets.\nconst SIZES = {\n  tiny: { d: 16, stroke: 2, font: 'text-[10px] leading-none' },\n  sm: { d: 24, stroke: 3, font: 'text-[10px] leading-none' },\n  md: { d: 40, stroke: 4, font: 'text-xs font-semibold' },\n  lg: { d: 64, stroke: 5, font: 'text-sm font-semibold' },\n} as const;\n\nexport type ProgressCircleSize = keyof typeof SIZES;\n\nconst ARC_COLOR: Record<ProgressCircleStatus, string> = {\n  brand: 'stroke-[var(--ui-background-brand-secondary)]',\n  danger: 'stroke-[var(--ui-text-on-status-danger)]',\n  critical: 'stroke-[var(--ui-text-on-status-critical)]',\n  warning: 'stroke-[var(--ui-text-on-status-warning)]',\n  success: 'stroke-[var(--ui-text-on-status-success)]',\n};\n\n// `brand` has no score icon — only the level statuses do.\nconst ICON_BY_STATUS: Partial<Record<ProgressCircleStatus, React.ReactNode>> = {\n  danger: <CircleTimesIcon className=\"text-[var(--ui-text-on-status-danger)]\" />,\n  critical: (\n    <TriangleWarningIcon className=\"text-[var(--ui-text-on-status-critical)]\" />\n  ),\n  warning: (\n    <TriangleWarningIcon className=\"text-[var(--ui-text-on-status-warning)]\" />\n  ),\n  success: (\n    <CircleCheckIcon className=\"text-[var(--ui-text-on-status-success)]\" />\n  ),\n};\n\n// Default value → status thresholds (confirm exact breakpoints with design — the\n// Figma shows ~25% danger, 50% critical, 75% warning, 80%+ success).\nfunction statusForFraction(fraction: number): ProgressCircleStatus {\n  if (fraction >= 0.8) return 'success';\n  if (fraction >= 0.6) return 'warning';\n  if (fraction >= 0.4) return 'critical';\n  return 'danger';\n}\n\nconst progressCircleVariants = cva(\n  'relative inline-flex shrink-0 items-center justify-center',\n  {\n    variants: {\n      size: { tiny: '', sm: '', md: '', lg: '' },\n    },\n    defaultVariants: { size: 'sm' },\n  }\n);\n\nexport interface ProgressCircleProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof progressCircleVariants> {\n  /** Current progress; clamped to `[0, max]`. */\n  value?: number;\n  /** Value representing full completion. */\n  max?: number;\n  /** Ring diameter + stroke. Defaults to `sm`. */\n  size?: ProgressCircleSize;\n  /** Color level for the arc. Omit to derive from `value`/`max` by thresholds. */\n  status?: ProgressCircleStatus;\n  /** Show the rounded percentage in the center. */\n  showValue?: boolean;\n  /** Show a status icon in the center (takes priority over `showValue`). */\n  showIcon?: boolean;\n  /** Custom center content (takes priority over icon/value). */\n  children?: React.ReactNode;\n}\n\nconst ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (\n    {\n      className,\n      value = 0,\n      max = 100,\n      size = 'sm',\n      status,\n      showValue = false,\n      showIcon = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { d, stroke, font } = SIZES[size];\n    const safeMax = max > 0 ? max : 100;\n    const fraction = Math.min(1, Math.max(0, value / safeMax));\n    const level = status ?? statusForFraction(fraction);\n    const radius = (d - stroke) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const center = d / 2;\n    const icon = showIcon ? ICON_BY_STATUS[level] : undefined;\n    const centerContent =\n      children ?? icon ?? (showValue ? `${Math.round(fraction * 100)}%` : null);\n\n    return (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={value}\n        max={max}\n        className={cn(progressCircleVariants({ size }), className)}\n        style={{ width: d, height: d }}\n        {...props}\n      >\n        <svg\n          width={d}\n          height={d}\n          viewBox={`0 0 ${d} ${d}`}\n          className=\"-rotate-90\"\n          aria-hidden=\"true\"\n        >\n          <circle\n            className=\"stroke-[var(--ui-border-on-surface-border)]\"\n            fill=\"none\"\n            strokeWidth={stroke}\n            cx={center}\n            cy={center}\n            r={radius}\n          />\n          <circle\n            className={cn(ARC_COLOR[level], 'transition-[stroke-dashoffset]')}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            cx={center}\n            cy={center}\n            r={radius}\n            strokeDasharray={circumference}\n            strokeDashoffset={circumference * (1 - fraction)}\n          />\n        </svg>\n        {centerContent != null && (\n          <span\n            className={cn(\n              'absolute inset-0 flex items-center justify-center text-foreground [&_svg]:size-[60%]',\n              font\n            )}\n          >\n            {centerContent}\n          </span>\n        )}\n      </ProgressPrimitive.Root>\n    );\n  }\n);\nProgressCircle.displayName = 'ProgressCircle';\n\nexport { ProgressCircle, progressCircleVariants };\n"],"names":["SIZES","ARC_COLOR","ICON_BY_STATUS","jsx","CircleTimesIcon","TriangleWarningIcon","CircleCheckIcon","statusForFraction","fraction","progressCircleVariants","cva","ProgressCircle","React","className","value","max","size","status","showValue","showIcon","children","props","ref","d","stroke","font","safeMax","level","radius","circumference","center","icon","centerContent","jsxs","ProgressPrimitive","cn"],"mappings":";;;;;;AAmCA,MAAMA,IAAQ;AAAA,EACZ,MAAM,EAAE,GAAG,IAAI,QAAQ,GAAG,MAAM,2BAAA;AAAA,EAChC,IAAI,EAAE,GAAG,IAAI,QAAQ,GAAG,MAAM,2BAAA;AAAA,EAC9B,IAAI,EAAE,GAAG,IAAI,QAAQ,GAAG,MAAM,wBAAA;AAAA,EAC9B,IAAI,EAAE,GAAG,IAAI,QAAQ,GAAG,MAAM,wBAAA;AAChC,GAIMC,IAAkD;AAAA,EACtD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AACX,GAGMC,IAAyE;AAAA,EAC7E,QAAQ,gBAAAC,EAACC,GAAA,EAAgB,WAAU,yCAAA,CAAyC;AAAA,EAC5E,UACE,gBAAAD,EAACE,GAAA,EAAoB,WAAU,2CAAA,CAA2C;AAAA,EAE5E,SACE,gBAAAF,EAACE,GAAA,EAAoB,WAAU,0CAAA,CAA0C;AAAA,EAE3E,SACE,gBAAAF,EAACG,GAAA,EAAgB,WAAU,0CAAA,CAA0C;AAEzE;AAIA,SAASC,EAAkBC,GAAwC;AACjE,SAAIA,KAAY,MAAY,YACxBA,KAAY,MAAY,YACxBA,KAAY,MAAY,aACrB;AACT;AAEA,MAAMC,IAAyBC;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM,EAAE,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAAA,IAAG;AAAA,IAE3C,iBAAiB,EAAE,MAAM,KAAA;AAAA,EAAK;AAElC,GAqBMC,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,QAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,GAAG,QAAAC,GAAQ,MAAAC,EAAA,IAASzB,EAAMgB,CAAI,GAChCU,IAAUX,IAAM,IAAIA,IAAM,KAC1BP,IAAW,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGM,IAAQY,CAAO,CAAC,GACnDC,IAAQV,KAAUV,EAAkBC,CAAQ,GAC5CoB,KAAUL,IAAIC,KAAU,GACxBK,IAAgB,IAAI,KAAK,KAAKD,GAC9BE,IAASP,IAAI,GACbQ,IAAOZ,IAAWjB,EAAeyB,CAAK,IAAI,QAC1CK,IACJZ,KAAYW,MAASb,IAAY,GAAG,KAAK,MAAMV,IAAW,GAAG,CAAC,MAAM;AAEtE,WACE,gBAAAyB;AAAA,MAACC,EAAkB;AAAA,MAAlB;AAAA,QACC,KAAAZ;AAAA,QACA,OAAAR;AAAA,QACA,KAAAC;AAAA,QACA,WAAWoB,EAAG1B,EAAuB,EAAE,MAAAO,EAAA,CAAM,GAAGH,CAAS;AAAA,QACzD,OAAO,EAAE,OAAOU,GAAG,QAAQA,EAAA;AAAA,QAC1B,GAAGF;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAOV;AAAA,cACP,QAAQA;AAAA,cACR,SAAS,OAAOA,CAAC,IAAIA,CAAC;AAAA,cACtB,WAAU;AAAA,cACV,eAAY;AAAA,cAEZ,UAAA;AAAA,gBAAA,gBAAApB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,MAAK;AAAA,oBACL,aAAaqB;AAAA,oBACb,IAAIM;AAAA,oBACJ,IAAIA;AAAA,oBACJ,GAAGF;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEL,gBAAAzB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWgC,EAAGlC,EAAU0B,CAAK,GAAG,gCAAgC;AAAA,oBAChE,MAAK;AAAA,oBACL,aAAaH;AAAA,oBACb,eAAc;AAAA,oBACd,IAAIM;AAAA,oBACJ,IAAIA;AAAA,oBACJ,GAAGF;AAAA,oBACH,iBAAiBC;AAAA,oBACjB,kBAAkBA,KAAiB,IAAIrB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACzC;AAAA,YAAA;AAAA,UAAA;AAAA,UAEDwB,KAAiB,QAChB,gBAAA7B;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWgC;AAAA,gBACT;AAAA,gBACAV;AAAA,cAAA;AAAA,cAGD,UAAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACArB,EAAe,cAAc;"}

package/dist/components/ui/radio/radio.js

@@ -0,0 +1,44 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as i from "react";
+import { Radio as r } from "@base-ui/react/radio";
+import { RadioGroup as b } from "@base-ui/react/radio-group";
+import { cn as c } from "../../../lib/utils.js";
+const l = i.forwardRef(({ className: o, ...d }, a) => /* @__PURE__ */ e(
+  b,
+  {
+    ref: a,
+    className: c("flex flex-col gap-2", o),
+    ...d
+  }
+));
+l.displayName = "RadioGroup";
+const t = i.forwardRef(({ className: o, ...d }, a) => /* @__PURE__ */ e(
+  r.Root,
+  {
+    ref: a,
+    className: c(
+      // geometry + focus ring
+      "inline-flex size-[var(--ui-radio-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-full border outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
+      // unchecked (base): idle / hover / active
+      "bg-[var(--ui-radio-unchecked-box-color-idle)] border-[var(--ui-radio-unchecked-box-border-color-idle)]",
+      "not-data-[disabled]:hover:bg-[var(--ui-radio-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-radio-unchecked-box-border-color-hover)]",
+      "not-data-[disabled]:active:bg-[var(--ui-radio-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-radio-unchecked-box-border-color-active)]",
+      // checked: idle / hover / active
+      "data-[checked]:not-data-[disabled]:bg-[var(--ui-radio-checked-box-color-idle)] data-[checked]:not-data-[disabled]:border-[var(--ui-radio-checked-box-border-color-idle)]",
+      "data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-radio-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-radio-checked-box-border-color-hover)]",
+      "data-[checked]:not-data-[disabled]:active:bg-[var(--ui-radio-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-radio-checked-box-border-color-active)]",
+      // disabled (unchecked base + checked override)
+      "data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-radio-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-radio-unchecked-box-border-color-disabled)]",
+      "data-[disabled]:data-[checked]:bg-[var(--ui-radio-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-radio-checked-box-border-color-disabled)]",
+      o
+    ),
+    ...d,
+    children: /* @__PURE__ */ e(r.Indicator, { className: "size-2 rounded-full bg-[var(--ui-radio-checked-icon-color-idle)] data-[disabled]:bg-[var(--ui-radio-checked-icon-color-disabled)]" })
+  }
+));
+t.displayName = "Radio";
+export {
+  t as Radio,
+  l as RadioGroup
+};
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sources":["../../../../src/components/ui/radio/radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\n\nimport { cn } from '@/lib/utils';\n\n// Radio group + item, wrapping Base UI's RadioGroup / Radio primitives. Radios\n// are mutually exclusive, so the group owns the selected value; each Radio takes\n// a `value`. Colors and geometry come from the dedicated next-gen `--ui-radio-*`\n// token tier from @acronis-platform/tokens-pd (which mirrors `--ui-checkbox-*`):\n// the circle has two logical states — `unchecked` (the base) and `checked` —\n// each with its own per-interaction (idle / hover / active / disabled) fill\n// (`*-box-color-*`) and border (`*-box-border-color-*`) tokens. `unchecked` is\n// the base layer (lowest specificity); `data-[checked]` overrides it, and\n// `data-[disabled]:data-[checked]` overrides that in turn. The inner dot fill\n// uses `--ui-radio-checked-icon-color-*`. Box geometry (16px size) comes from\n// `--ui-radio-global-box-size`; the focus ring uses `--ui-focus-primary`. Each\n// state is wired to its own token, and the checked overrides are scoped with\n// `not-data-[disabled]` so the disabled tokens win.\n\nexport type RadioGroupProps = React.ComponentPropsWithoutRef<\n  typeof RadioGroupPrimitive\n>;\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive>,\n  RadioGroupProps\n>(({ className, ...props }, ref) => (\n  <RadioGroupPrimitive\n    ref={ref}\n    className={cn('flex flex-col gap-2', className)}\n    {...props}\n  />\n));\nRadioGroup.displayName = 'RadioGroup';\n\nexport type RadioProps = React.ComponentPropsWithoutRef<\n  typeof RadioPrimitive.Root\n>;\n\nconst Radio = React.forwardRef<\n  React.ElementRef<typeof RadioPrimitive.Root>,\n  RadioProps\n>(({ className, ...props }, ref) => (\n  <RadioPrimitive.Root\n    ref={ref}\n    className={cn(\n      // geometry + focus ring\n      'inline-flex size-[var(--ui-radio-global-box-size)] shrink-0 cursor-pointer items-center justify-center rounded-full border outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      // unchecked (base): idle / hover / active\n      'bg-[var(--ui-radio-unchecked-box-color-idle)] border-[var(--ui-radio-unchecked-box-border-color-idle)]',\n      'not-data-[disabled]:hover:bg-[var(--ui-radio-unchecked-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-radio-unchecked-box-border-color-hover)]',\n      'not-data-[disabled]:active:bg-[var(--ui-radio-unchecked-box-color-active)] not-data-[disabled]:active:border-[var(--ui-radio-unchecked-box-border-color-active)]',\n      // checked: idle / hover / active\n      'data-[checked]:not-data-[disabled]:bg-[var(--ui-radio-checked-box-color-idle)] data-[checked]:not-data-[disabled]:border-[var(--ui-radio-checked-box-border-color-idle)]',\n      'data-[checked]:not-data-[disabled]:hover:bg-[var(--ui-radio-checked-box-color-hover)] data-[checked]:not-data-[disabled]:hover:border-[var(--ui-radio-checked-box-border-color-hover)]',\n      'data-[checked]:not-data-[disabled]:active:bg-[var(--ui-radio-checked-box-color-active)] data-[checked]:not-data-[disabled]:active:border-[var(--ui-radio-checked-box-border-color-active)]',\n      // disabled (unchecked base + checked override)\n      'data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-radio-unchecked-box-color-disabled)] data-[disabled]:border-[var(--ui-radio-unchecked-box-border-color-disabled)]',\n      'data-[disabled]:data-[checked]:bg-[var(--ui-radio-checked-box-color-disabled)] data-[disabled]:data-[checked]:border-[var(--ui-radio-checked-box-border-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    <RadioPrimitive.Indicator className=\"size-2 rounded-full bg-[var(--ui-radio-checked-icon-color-idle)] data-[disabled]:bg-[var(--ui-radio-checked-icon-color-disabled)]\" />\n  </RadioPrimitive.Root>\n));\nRadio.displayName = 'Radio';\n\nexport { RadioGroup, Radio };\n"],"names":["RadioGroup","React","className","props","ref","jsx","RadioGroupPrimitive","cn","Radio","RadioPrimitive"],"mappings":";;;;;AAwBA,MAAMA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,uBAAuBL,CAAS;AAAA,IAC7C,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAW,cAAc;AAMzB,MAAMQ,IAAQP,EAAM,WAGlB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACI,EAAe;AAAA,EAAf;AAAA,IACC,KAAAL;AAAA,IACA,WAAWG;AAAA;AAAA,MAET;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEJ,UAAA,gBAAAE,EAACI,EAAe,WAAf,EAAyB,WAAU,oIAAA,CAAoI;AAAA,EAAA;AAC1K,CACD;AACDD,EAAM,cAAc;"}

package/dist/components/ui/resizable/resizable.js

@@ -0,0 +1,55 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Separator as t, Panel as i, Group as n } from "../../../node_modules/.pnpm/react-resizable-panels@4.11.2_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/react-resizable-panels/dist/react-resizable-panels.js";
+import { cn as e } from "../../../lib/utils.js";
+function u({ className: r, ...a }) {
+  return /* @__PURE__ */ o(
+    n,
+    {
+      className: e("flex h-full w-full aria-[orientation=vertical]:flex-col", r),
+      ...a
+    }
+  );
+}
+function b(r) {
+  return /* @__PURE__ */ o(i, { ...r });
+}
+function c({ className: r, ...a }) {
+  return /* @__PURE__ */ o(
+    t,
+    {
+      className: e(
+        // 9px hit area: 1px divider + 4px padding each side.
+        "relative flex w-[9px] items-center justify-center",
+        "cursor-[var(--ui-resizable-cursor)] outline-none",
+        // Centered 1px divider line (idle → semantic border, hover → hover token, drag → active token).
+        // Uses a CSS border (not width+background) so the browser pixel-snaps the line
+        // and it doesn't blur across device pixels when the handle lands at a fractional position.
+        // The vertical divider is a zero-width box painted by its inline-start
+        // (left) border; the horizontal override below swaps to the block-start
+        // (top) border. Color is set with `border-color` (all sides) so it
+        // applies regardless of which side carries the width.
+        "after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0",
+        "after:[border-inline-start-width:var(--ui-resizable-border-width)] after:border-solid after:[border-color:var(--ui-border-on-surface-border)]",
+        "hover:after:[border-color:var(--ui-resizable-border-color-hover)]",
+        "active:after:[border-color:var(--ui-resizable-border-color-active)]",
+        // Focus ring: 3px box-shadow on the line itself so it auto-centers (Figma 4649:6686).
+        "focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)] focus-visible:after:[border-color:var(--ui-resizable-border-color-active)]",
+        "active:after:shadow-none",
+        // orientation=horizontal = panels stacked → horizontal divider line.
+        // Draw it with the block-start (top) border and reset the inline-start
+        // border used for the vertical line, so the full-width line renders.
+        "aria-[orientation=horizontal]:h-[9px] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-[ns-resize]",
+        "aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:start-auto aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-0 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0",
+        "aria-[orientation=horizontal]:after:[border-inline-start-width:0] aria-[orientation=horizontal]:after:[border-block-start-width:var(--ui-resizable-border-width)]",
+        r
+      ),
+      ...a
+    }
+  );
+}
+export {
+  c as ResizableHandle,
+  b as ResizablePanel,
+  u as ResizablePanelGroup
+};
+//# sourceMappingURL=resizable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.js","sources":["../../../../src/components/ui/resizable/resizable.tsx"],"sourcesContent":["import * as ResizablePrimitive from 'react-resizable-panels';\n\nimport { cn } from '@/lib/utils';\n\n// Resizable panels: a thin wrapper over `react-resizable-panels` (v4: `Group` /\n// `Panel` / `Separator`) themed with the next-gen `--ui-resizable-*` token tier,\n// following the shadcn composition (`ResizablePanelGroup` / `ResizablePanel` /\n// `ResizableHandle`). Base UI has no resizable primitive, so this is the one\n// component that wraps a third-party panel library instead.\n//\n// The handle is the 9px-wide draggable `Separator` (Figma node 4649:6681,\n// 1px divider + 4px padding each side for hover hit area). It paints a centered\n// 1px divider line (`--ui-resizable-border-width`) — `--ui-border-on-surface-border`\n// at rest (idle), `--ui-resizable-border-color-hover` on pointer hover,\n// `--ui-resizable-border-color-active` while dragging (`:active`). Keyboard focus\n// paints a 3px `--ui-focus-primary` ring; the resting cursor is\n// `--ui-resizable-cursor` (`ew-resize`). Each interaction state is wired to its\n// own token so brands can diverge.\n//\n// `orientation=\"vertical\"` (panels stacked) flips the layout: the Group goes\n// `flex-col`, the Separator becomes a horizontal line (`aria-orientation=horizontal`),\n// and the cursor becomes `ns-resize`.\n\nfunction ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      className={cn('flex h-full w-full aria-[orientation=vertical]:flex-col', className)}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel(props: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel {...props} />;\n}\n\nexport type ResizableHandleProps = ResizablePrimitive.SeparatorProps;\n\nfunction ResizableHandle({ className, ...props }: ResizableHandleProps) {\n  return (\n    <ResizablePrimitive.Separator\n      className={cn(\n        // 9px hit area: 1px divider + 4px padding each side.\n        'relative flex w-[9px] items-center justify-center',\n        'cursor-[var(--ui-resizable-cursor)] outline-none',\n        // Centered 1px divider line (idle → semantic border, hover → hover token, drag → active token).\n        // Uses a CSS border (not width+background) so the browser pixel-snaps the line\n        // and it doesn't blur across device pixels when the handle lands at a fractional position.\n        // The vertical divider is a zero-width box painted by its inline-start\n        // (left) border; the horizontal override below swaps to the block-start\n        // (top) border. Color is set with `border-color` (all sides) so it\n        // applies regardless of which side carries the width.\n        'after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0',\n        'after:[border-inline-start-width:var(--ui-resizable-border-width)] after:border-solid after:[border-color:var(--ui-border-on-surface-border)]',\n        'hover:after:[border-color:var(--ui-resizable-border-color-hover)]',\n        'active:after:[border-color:var(--ui-resizable-border-color-active)]',\n        // Focus ring: 3px box-shadow on the line itself so it auto-centers (Figma 4649:6686).\n        'focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)] focus-visible:after:[border-color:var(--ui-resizable-border-color-active)]',\n        'active:after:shadow-none',\n        // orientation=horizontal = panels stacked → horizontal divider line.\n        // Draw it with the block-start (top) border and reset the inline-start\n        // border used for the vertical line, so the full-width line renders.\n        'aria-[orientation=horizontal]:h-[9px] aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-[ns-resize]',\n        'aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:start-auto aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-0 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=horizontal]:after:translate-x-0',\n        'aria-[orientation=horizontal]:after:[border-inline-start-width:0] aria-[orientation=horizontal]:after:[border-block-start-width:var(--ui-resizable-border-width)]',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive.Group","cn","ResizablePanel","ResizablePrimitive.Panel","ResizableHandle","ResizablePrimitive.Separator"],"mappings":";;;AAuBA,SAASA,EAAoB,EAAE,WAAAC,GAAW,GAAGC,KAAwC;AACnF,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,2DAA2DJ,CAAS;AAAA,MACjF,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAeJ,GAAsC;AAC5D,SAAO,gBAAAC,EAACI,GAAA,EAA0B,GAAGL,EAAA,CAAO;AAC9C;AAIA,SAASM,EAAgB,EAAE,WAAAP,GAAW,GAAGC,KAA+B;AACtE,SACE,gBAAAC;AAAA,IAACM;AAAAA,IAAA;AAAA,MACC,WAAWJ;AAAA;AAAA,QAET;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA,QAIA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/ui/scroll-area/scroll-area.js

@@ -0,0 +1,61 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import * as i from "react";
+import { ScrollArea as a } from "@base-ui/react/scroll-area";
+import { cn as s } from "../../../lib/utils.js";
+const c = i.forwardRef(
+  ({ className: e, orientation: o = "vertical", ...l }, t) => /* @__PURE__ */ r(
+    a.Scrollbar,
+    {
+      ref: t,
+      orientation: o,
+      "data-slot": "scroll-area-scrollbar",
+      className: s(
+        "flex touch-none select-none opacity-0 transition-opacity duration-150",
+        // Revealed on hover/scroll; hidden at rest.
+        "data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
+        o === "vertical" && "h-full w-2.5 p-px",
+        o === "horizontal" && "h-2.5 w-full flex-col p-px",
+        e
+      ),
+      ...l,
+      children: /* @__PURE__ */ r(
+        a.Thumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]"
+        }
+      )
+    }
+  )
+);
+c.displayName = "ScrollBar";
+const f = i.forwardRef(
+  ({ className: e, children: o, orientation: l = "vertical", ...t }, n) => /* @__PURE__ */ d(
+    a.Root,
+    {
+      ref: n,
+      "data-slot": "scroll-area",
+      className: s("relative overflow-hidden", e),
+      ...t,
+      children: [
+        /* @__PURE__ */ r(
+          a.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]",
+            children: /* @__PURE__ */ r(a.Content, { "data-slot": "scroll-area-content", children: o })
+          }
+        ),
+        l !== "horizontal" && /* @__PURE__ */ r(c, { orientation: "vertical" }),
+        l !== "vertical" && /* @__PURE__ */ r(c, { orientation: "horizontal" }),
+        l === "both" && /* @__PURE__ */ r(a.Corner, { "data-slot": "scroll-area-corner" })
+      ]
+    }
+  )
+);
+f.displayName = "ScrollArea";
+export {
+  f as ScrollArea,
+  c as ScrollBar
+};
+//# sourceMappingURL=scroll-area.js.map

package/dist/components/ui/scroll-area/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.js","sources":["../../../../src/components/ui/scroll-area/scroll-area.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';\n\nimport { cn } from '@/lib/utils';\n\n// A scrollable region with a custom **overlay** scrollbar built on Base UI's\n// Scroll Area. Unlike a native `overflow: auto` element, the scrollbar floats\n// over the content and reserves **zero** layout space, so full-bleed content\n// (e.g. edge-to-edge selected rows in a sidebar) is never cropped by a gutter —\n// on every OS and browser, not just where the platform provides overlay bars.\n// The bar is revealed on hover/scroll and hidden at rest.\n\nexport type ScrollBarProps = React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.Scrollbar\n>;\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      orientation={orientation}\n      data-slot=\"scroll-area-scrollbar\"\n      className={cn(\n        'flex touch-none select-none opacity-0 transition-opacity duration-150',\n        // Revealed on hover/scroll; hidden at rest.\n        'data-[hovering]:opacity-100 data-[scrolling]:opacity-100',\n        orientation === 'vertical' && 'h-full w-2.5 p-px',\n        orientation === 'horizontal' && 'h-2.5 w-full flex-col p-px',\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-[var(--ui-border-on-surface-border)] transition-colors hover:bg-[var(--ui-border-on-surface-border-active)]\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n);\nScrollBar.displayName = 'ScrollBar';\n\nexport interface ScrollAreaProps\n  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /** Which scrollbar(s) to render. @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal' | 'both';\n}\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, children, orientation = 'vertical', ...props }, ref) => (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      data-slot=\"scroll-area\"\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)]\"\n      >\n        <ScrollAreaPrimitive.Content data-slot=\"scroll-area-content\">\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      {orientation !== 'horizontal' && <ScrollBar orientation=\"vertical\" />}\n      {orientation !== 'vertical' && <ScrollBar orientation=\"horizontal\" />}\n      {orientation === 'both' && (\n        <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n      )}\n    </ScrollAreaPrimitive.Root>\n  )\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea, ScrollBar };\n"],"names":["ScrollBar","React","className","orientation","props","ref","jsx","ScrollAreaPrimitive","cn","ScrollArea","children","jsxs"],"mappings":";;;;AAgBA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAASC,MAClD,gBAAAC;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWK;AAAA,QACT;AAAA;AAAA,QAEA;AAAA,QACAL,MAAgB,cAAc;AAAA,QAC9BA,MAAgB,gBAAgB;AAAA,QAChCD;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;AACAP,EAAU,cAAc;AAQxB,MAAMS,IAAaR,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,aAAAP,IAAc,YAAY,GAAGC,EAAA,GAASC,MAC5D,gBAAAM;AAAA,IAACJ,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACV,WAAWG,EAAG,4BAA4BN,CAAS;AAAA,MAClD,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC,EAAoB;AAAA,UAApB;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAEV,4BAACA,EAAoB,SAApB,EAA4B,aAAU,uBACpC,UAAAG,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDP,MAAgB,gBAAgB,gBAAAG,EAACN,GAAA,EAAU,aAAY,YAAW;AAAA,QAClEG,MAAgB,cAAc,gBAAAG,EAACN,GAAA,EAAU,aAAY,cAAa;AAAA,QAClEG,MAAgB,UACf,gBAAAG,EAACC,EAAoB,QAApB,EAA2B,aAAU,qBAAA,CAAqB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAInE;AACAE,EAAW,cAAc;"}

package/dist/components/ui/search/search.js

@@ -0,0 +1,93 @@
+import { jsxs as w, jsx as o } from "react/jsx-runtime";
+import * as t from "react";
+import { MagnifierIcon as S, TimesIcon as k } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as N } from "../../../lib/utils.js";
+const j = t.forwardRef(
+  ({
+    className: p,
+    type: v = "search",
+    disabled: s,
+    onClear: n,
+    onChange: c,
+    value: r,
+    defaultValue: u,
+    ...f
+  }, i) => {
+    const d = t.useRef(null), [x, l] = t.useState(
+      () => String(r ?? u ?? "").length > 0
+    );
+    t.useEffect(() => {
+      r !== void 0 && l(String(r).length > 0);
+    }, [r]);
+    const g = t.useCallback(
+      (e) => {
+        d.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+      },
+      [i]
+    ), m = (e) => {
+      l(e.target.value.length > 0), c == null || c(e);
+    }, y = () => {
+      var h, b;
+      const e = d.current;
+      if (!e) return;
+      let a;
+      try {
+        a = (b = Object.getOwnPropertyDescriptor(
+          (h = globalThis.HTMLInputElement) == null ? void 0 : h.prototype,
+          "value"
+        )) == null ? void 0 : b.set;
+      } catch {
+        a = void 0;
+      }
+      a ? a.call(e, "") : e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), l(!1), e.focus(), n == null || n();
+    };
+    return /* @__PURE__ */ w(
+      "div",
+      {
+        "data-disabled": s || void 0,
+        className: N(
+          "group inline-flex h-[var(--ui-input-search-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-search-box-gap)] rounded-[var(--ui-input-search-box-border-radius)] border bg-[var(--ui-input-search-box-color-idle)] border-[var(--ui-input-search-border-color-idle)] px-[var(--ui-input-search-box-padding-x)] text-sm leading-6 text-[var(--ui-input-search-value-color-idle)] transition-colors not-data-[disabled]:hover:bg-[var(--ui-input-search-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-search-border-color-hover)] focus-within:border-[var(--ui-input-search-border-color-hover)] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-search-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-search-box-color-disabled)] data-[disabled]:text-[var(--ui-input-search-value-color-disabled)]",
+          p
+        ),
+        children: [
+          /* @__PURE__ */ o(
+            S,
+            {
+              size: 16,
+              className: "shrink-0 text-[var(--ui-input-search-icon-search-color-idle)] group-data-[disabled]:text-[var(--ui-input-search-icon-search-color-disabled)]"
+            }
+          ),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              ref: g,
+              type: v,
+              disabled: s,
+              value: r,
+              defaultValue: u,
+              onChange: m,
+              "aria-label": "Search",
+              className: "h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--ui-input-search-placeholder-color-idle)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none",
+              ...f
+            }
+          ),
+          x && !s && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Clear search",
+              onClick: y,
+              className: "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-button-icon-global-icon-color-idle)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&>svg]:size-4",
+              children: /* @__PURE__ */ o(k, { size: 16 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+j.displayName = "SearchBox";
+export {
+  j as SearchBox
+};
+//# sourceMappingURL=search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sources":["../../../../src/components/ui/search/search.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  MagnifierIcon,\n  TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Internal primitive: the bare search box behind the public `InputSearch` field\n// (which is also exported as `Search`). Not exported from the package; consumed\n// by `input-search`. A bordered box (the dedicated `--ui-input-search-*` token\n// tier) holding a leading magnifier, a borderless native input, and a trailing\n// clear button shown once there's a value. The box owns the visual state via\n// `focus-within` (the input-search tier has no focus/active border token, so the\n// focused border reuses `--ui-input-search-border-color-hover` plus a 3px\n// `--ui-focus-primary` ring) / hover / disabled; the magnifier uses\n// `--ui-input-search-icon-search-color-{idle,disabled}` (via the `group`) and the\n// clear button is a ghost ButtonIcon, so its glyph uses\n// `--ui-button-icon-global-icon-color-idle` (the input-search tier dropped its own\n// clear-icon token in the Figma sync).\n\nexport interface SearchBoxProps extends React.ComponentPropsWithoutRef<'input'> {\n  /** Called when the clear (×) button is pressed, after the value is cleared. */\n  onClear?: () => void;\n}\n\nconst SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>(\n  (\n    {\n      className,\n      type = 'search',\n      disabled,\n      onClear,\n      onChange,\n      value,\n      defaultValue,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    const [hasValue, setHasValue] = React.useState(\n      () => String(value ?? defaultValue ?? '').length > 0\n    );\n\n    // Keep the clear button in sync when the value is controlled externally.\n    React.useEffect(() => {\n      if (value !== undefined) setHasValue(String(value).length > 0);\n    }, [value]);\n\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        innerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      setHasValue(event.target.value.length > 0);\n      onChange?.(event);\n    };\n\n    const handleClear = () => {\n      const input = innerRef.current;\n      if (!input) return;\n      // Use the native value setter when available + dispatch a real input event\n      // so React's onChange fires for both controlled and uncontrolled usage.\n      let setter: ((this: HTMLInputElement, value: string) => void) | undefined;\n      try {\n        setter = Object.getOwnPropertyDescriptor(\n          globalThis.HTMLInputElement?.prototype,\n          'value'\n        )?.set;\n      } catch {\n        setter = undefined;\n      }\n\n      if (setter) setter.call(input, '');\n      else input.value = '';\n\n      input.dispatchEvent(new Event('input', { bubbles: true }));\n      setHasValue(false);\n      input.focus();\n      onClear?.();\n    };\n\n    return (\n      <div\n        data-disabled={disabled || undefined}\n        className={cn(\n          'group inline-flex h-[var(--ui-input-search-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-search-box-gap)] rounded-[var(--ui-input-search-box-border-radius)] border bg-[var(--ui-input-search-box-color-idle)] border-[var(--ui-input-search-border-color-idle)] px-[var(--ui-input-search-box-padding-x)] text-sm leading-6 text-[var(--ui-input-search-value-color-idle)] transition-colors not-data-[disabled]:hover:bg-[var(--ui-input-search-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-search-border-color-hover)] focus-within:border-[var(--ui-input-search-border-color-hover)] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-search-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-search-box-color-disabled)] data-[disabled]:text-[var(--ui-input-search-value-color-disabled)]',\n          className\n        )}\n      >\n        <MagnifierIcon\n          size={16}\n          className=\"shrink-0 text-[var(--ui-input-search-icon-search-color-idle)] group-data-[disabled]:text-[var(--ui-input-search-icon-search-color-disabled)]\"\n        />\n        <input\n          ref={setRefs}\n          type={type}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          aria-label=\"Search\"\n          className=\"h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-inherit outline-none placeholder:text-[var(--ui-input-search-placeholder-color-idle)] disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none\"\n          {...props}\n        />\n        {hasValue && !disabled && (\n          <button\n            type=\"button\"\n            aria-label=\"Clear search\"\n            onClick={handleClear}\n            className=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm text-[var(--ui-button-icon-global-icon-color-idle)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&>svg]:size-4\"\n          >\n            <TimesIcon size={16} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nSearchBox.displayName = 'SearchBox';\n\nexport { SearchBox };\n"],"names":["SearchBox","React","className","type","disabled","onClear","onChange","value","defaultValue","props","forwardedRef","innerRef","hasValue","setHasValue","setRefs","node","handleChange","event","handleClear","input","setter","_b","_a","jsxs","cn","jsx","MagnifierIcon","TimesIcon"],"mappings":";;;;AA0BA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAWV,EAAM,OAAyB,IAAI,GAC9C,CAACW,GAAUC,CAAW,IAAIZ,EAAM;AAAA,MACpC,MAAM,OAAOM,KAASC,KAAgB,EAAE,EAAE,SAAS;AAAA,IAAA;AAIrD,IAAAP,EAAM,UAAU,MAAM;AACpB,MAAIM,MAAU,UAAWM,EAAY,OAAON,CAAK,EAAE,SAAS,CAAC;AAAA,IAC/D,GAAG,CAACA,CAAK,CAAC;AAEV,UAAMO,IAAUb,EAAM;AAAA,MACpB,CAACc,MAAkC;AACjC,QAAAJ,EAAS,UAAUI,GACf,OAAOL,KAAiB,aAAYA,EAAaK,CAAI,IAChDL,QAA2B,UAAUK;AAAA,MAChD;AAAA,MACA,CAACL,CAAY;AAAA,IAAA,GAGTM,IAAe,CAACC,MAA+C;AACnE,MAAAJ,EAAYI,EAAM,OAAO,MAAM,SAAS,CAAC,GACzCX,KAAA,QAAAA,EAAWW;AAAA,IACb,GAEMC,IAAc,MAAM;;AACxB,YAAMC,IAAQR,EAAS;AACvB,UAAI,CAACQ,EAAO;AAGZ,UAAIC;AACJ,UAAI;AACF,QAAAA,KAASC,IAAA,OAAO;AAAA,WACdC,IAAA,WAAW,qBAAX,gBAAAA,EAA6B;AAAA,UAC7B;AAAA,QAAA,MAFO,gBAAAD,EAGN;AAAA,MACL,QAAQ;AACN,QAAAD,IAAS;AAAA,MACX;AAEA,MAAIA,IAAQA,EAAO,KAAKD,GAAO,EAAE,MACtB,QAAQ,IAEnBA,EAAM,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAA,CAAM,CAAC,GACzDN,EAAY,EAAK,GACjBM,EAAM,MAAA,GACNd,KAAA,QAAAA;AAAA,IACF;AAEA,WACE,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,iBAAenB,KAAY;AAAA,QAC3B,WAAWoB;AAAA,UACT;AAAA,UACAtB;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAuB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEZ,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKX;AAAA,cACL,MAAAX;AAAA,cACA,UAAAC;AAAA,cACA,OAAAG;AAAA,cACA,cAAAC;AAAA,cACA,UAAUQ;AAAA,cACV,cAAW;AAAA,cACX,WAAU;AAAA,cACT,GAAGP;AAAA,YAAA;AAAA,UAAA;AAAA,UAELG,KAAY,CAACR,KACZ,gBAAAqB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAASP;AAAA,cACT,WAAU;AAAA,cAEV,UAAA,gBAAAO,EAACE,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA3B,EAAU,cAAc;"}

package/dist/components/ui/search-global/search-global.js

@@ -0,0 +1,60 @@
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import { MagnifierIcon as n } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as h } from "../../../lib/utils.js";
+const d = t.forwardRef(
+  ({
+    className: o,
+    type: e = "search",
+    placeholder: l = "Search anything",
+    shortcut: a = "⌘K",
+    "aria-label": i = "Search",
+    ...c
+  }, s) => /* @__PURE__ */ b(
+    "div",
+    {
+      className: h(
+        "inline-flex h-[var(--ui-search-global-box-height)] w-[var(--ui-search-global-box-width)] min-w-[var(--ui-search-global-box-width-min)] max-w-[var(--ui-search-global-box-width-max)] items-center gap-[var(--ui-search-global-box-gap)]",
+        "rounded-[var(--ui-search-global-box-border-radius)] border-[length:var(--ui-search-global-box-border-width)] border-solid border-transparent px-[var(--ui-search-global-box-padding-x)]",
+        // Gradient border via padding-box (box fill) + border-box (the `--sg-border` gradient).
+        "[--sg-border:var(--ui-search-global-border-color-idle)] hover:[--sg-border:var(--ui-search-global-border-color-hover)] active:[--sg-border:var(--ui-search-global-border-color-active)]",
+        "[background:linear-gradient(var(--ui-search-global-box-color),var(--ui-search-global-box-color))_padding-box,var(--sg-border)_border-box]",
+        "transition-[background] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)]",
+        o
+      ),
+      children: [
+        /* @__PURE__ */ r(
+          n,
+          {
+            size: 16,
+            className: "shrink-0 text-[var(--ui-search-global-icon-color)]"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ref: s,
+            type: e,
+            placeholder: l,
+            "aria-label": i,
+            className: "ui-search-global-placeholoder-text-style h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-foreground outline-none placeholder:text-[var(--ui-search-global-placeholoder-color)] [&::-webkit-search-cancel-button]:appearance-none",
+            ...c
+          }
+        ),
+        a != null && /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "ui-search-global-shortcut-text-style shrink-0 whitespace-nowrap text-[var(--ui-search-global-shortcut-color)]",
+            children: a
+          }
+        )
+      ]
+    }
+  )
+);
+d.displayName = "SearchGlobal";
+export {
+  d as SearchGlobal
+};
+//# sourceMappingURL=search-global.js.map

package/dist/components/ui/search-global/search-global.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-global.js","sources":["../../../../src/components/ui/search-global/search-global.tsx"],"sourcesContent":["import * as React from 'react';\nimport { MagnifierIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// A global (\"search anything\") field: a 48px pill with a gradient border (the\n// dedicated `--ui-search-global-*` token tier), a leading magnifier, a borderless\n// native input, and a trailing keyboard-shortcut hint (⌘K by default).\n//\n// The border is a brand gradient, not a flat color, so it can't go through\n// `border-color`. Instead a private `--sg-border` custom property holds the\n// active gradient and the box paints it with the standard padding-box/border-box\n// double-background trick (box fill in padding-box, gradient in border-box over a\n// transparent border). State swaps only the gradient: idle\n// (`--ui-search-global-border-color-idle`) / hover / active (`:active`, the\n// darkest). Focus reuses the idle gradient plus a 3px `--ui-focus-primary` ring\n// via `focus-within`, mirroring the Figma focused state. The magnifier +\n// placeholder take the AI-purple `--ui-search-global-icon-color` /\n// `-placeholoder-color` (the token tier keeps Figma's \"placeholoder\" spelling);\n// the shortcut is `--ui-search-global-shortcut-color`.\n\nexport interface SearchGlobalProps extends React.ComponentPropsWithoutRef<'input'> {\n  /** Keyboard-shortcut hint shown at the trailing edge (decorative). Pass `null` to hide. */\n  shortcut?: React.ReactNode;\n}\n\nconst SearchGlobal = React.forwardRef<HTMLInputElement, SearchGlobalProps>(\n  (\n    {\n      className,\n      type = 'search',\n      placeholder = 'Search anything',\n      shortcut = '⌘K',\n      'aria-label': ariaLabel = 'Search',\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      className={cn(\n        'inline-flex h-[var(--ui-search-global-box-height)] w-[var(--ui-search-global-box-width)] min-w-[var(--ui-search-global-box-width-min)] max-w-[var(--ui-search-global-box-width-max)] items-center gap-[var(--ui-search-global-box-gap)]',\n        'rounded-[var(--ui-search-global-box-border-radius)] border-[length:var(--ui-search-global-box-border-width)] border-solid border-transparent px-[var(--ui-search-global-box-padding-x)]',\n        // Gradient border via padding-box (box fill) + border-box (the `--sg-border` gradient).\n        '[--sg-border:var(--ui-search-global-border-color-idle)] hover:[--sg-border:var(--ui-search-global-border-color-hover)] active:[--sg-border:var(--ui-search-global-border-color-active)]',\n        '[background:linear-gradient(var(--ui-search-global-box-color),var(--ui-search-global-box-color))_padding-box,var(--sg-border)_border-box]',\n        'transition-[background] focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)]',\n        className\n      )}\n    >\n      <MagnifierIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-search-global-icon-color)]\"\n      />\n      <input\n        ref={ref}\n        type={type}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        className=\"ui-search-global-placeholoder-text-style h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-foreground outline-none placeholder:text-[var(--ui-search-global-placeholoder-color)] [&::-webkit-search-cancel-button]:appearance-none\"\n        {...props}\n      />\n      {shortcut != null && (\n        <span\n          aria-hidden\n          className=\"ui-search-global-shortcut-text-style shrink-0 whitespace-nowrap text-[var(--ui-search-global-shortcut-color)]\"\n        >\n          {shortcut}\n        </span>\n      )}\n    </div>\n  )\n);\nSearchGlobal.displayName = 'SearchGlobal';\n\nexport { SearchGlobal };\n"],"names":["SearchGlobal","React","className","type","placeholder","shortcut","ariaLabel","props","ref","jsxs","cn","jsx","MagnifierIcon"],"mappings":";;;;AA0BA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,cAAcC,IAAY;AAAA,IAC1B,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACAR;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAS;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAH;AAAA,YACA,MAAAL;AAAA,YACA,aAAAC;AAAA,YACA,cAAYE;AAAA,YACZ,WAAU;AAAA,YACT,GAAGC;AAAA,UAAA;AAAA,QAAA;AAAA,QAELF,KAAY,QACX,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,YAET,UAAAN;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;AACAL,EAAa,cAAc;"}

package/dist/components/ui/section/section.js

@@ -0,0 +1,37 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as n } from "../../../lib/utils.js";
+const s = i.forwardRef(
+  ({ className: e, ...t }, o) => /* @__PURE__ */ a("section", { ref: o, className: n("space-y-4", e), ...t })
+);
+s.displayName = "Section";
+const c = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a("div", { ref: o, className: n("space-y-1", e), ...t }));
+c.displayName = "SectionHeader";
+const r = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
+  "h2",
+  {
+    ref: o,
+    className: n("text-lg font-semibold leading-none tracking-tight", e),
+    ...t
+  }
+));
+r.displayName = "SectionTitle";
+const m = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a(
+  "p",
+  {
+    ref: o,
+    className: n("text-sm text-muted-foreground", e),
+    ...t
+  }
+));
+m.displayName = "SectionDescription";
+const d = i.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ a("div", { ref: o, className: n("pt-2", e), ...t }));
+d.displayName = "SectionContent";
+export {
+  s as Section,
+  d as SectionContent,
+  m as SectionDescription,
+  c as SectionHeader,
+  r as SectionTitle
+};
+//# sourceMappingURL=section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sources":["../../../../src/components/ui/section/section.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported 1:1 from `@acronis-platform`'s `section`. A titled content block —\n// semantic markup parts; the only color is the muted description\n// (`text-muted-foreground` → --ui-text-on-surface-secondary).\nconst Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(\n  ({ className, ...props }, ref) => (\n    <section ref={ref} className={cn('space-y-4', className)} {...props} />\n  )\n);\nSection.displayName = 'Section';\n\nconst SectionHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('space-y-1', className)} {...props} />\n));\nSectionHeader.displayName = 'SectionHeader';\n\nconst SectionTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h2\n    ref={ref}\n    className={cn('text-lg font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n));\nSectionTitle.displayName = 'SectionTitle';\n\nconst SectionDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nSectionDescription.displayName = 'SectionDescription';\n\nconst SectionContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('pt-2', className)} {...props} />\n));\nSectionContent.displayName = 'SectionContent';\n\nexport {\n  Section,\n  SectionHeader,\n  SectionTitle,\n  SectionDescription,\n  SectionContent,\n};\n"],"names":["Section","React","className","props","ref","jsx","cn","SectionHeader","SectionTitle","SectionDescription","SectionContent"],"mappings":";;;AAOA,MAAMA,IAAUC,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAAC,WAAA,EAAQ,KAAAD,GAAU,WAAWE,EAAG,aAAaJ,CAAS,GAAI,GAAGC,EAAA,CAAO;AAEzE;AACAH,EAAQ,cAAc;AAEtB,MAAMO,IAAgBN,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,aAAaJ,CAAS,GAAI,GAAGC,GAAO,CAClE;AACDI,EAAc,cAAc;AAE5B,MAAMC,IAAeP,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,qDAAqDJ,CAAS;AAAA,IAC3E,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAa,cAAc;AAE3B,MAAMC,IAAqBR,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAmB,cAAc;AAEjC,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,QAAQJ,CAAS,GAAI,GAAGC,GAAO,CAC7D;AACDO,EAAe,cAAc;"}

package/dist/components/ui/separator/separator.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as m from "react";
+import { Separator as e } from "@base-ui/react/separator";
+import { cn as f } from "../../../lib/utils.js";
+const l = m.forwardRef(({ className: o, orientation: r = "horizontal", ...a }, p) => /* @__PURE__ */ t(
+  e,
+  {
+    ref: p,
+    orientation: r,
+    className: f(
+      "shrink-0 bg-border",
+      r === "horizontal" ? "h-px w-full" : "h-full w-px",
+      o
+    ),
+    ...a
+  }
+));
+l.displayName = "Separator";
+export {
+  l as Separator
+};
+//# sourceMappingURL=separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sources":["../../../../src/components/ui/separator/separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `separator`\n// (packages/ui-legacy/src/components/ui/separator.tsx). A thin divider built on\n// the Base UI Separator primitive (sets the `separator` role + aria-orientation).\n// No `--ui-separator-*` tier; the line uses the shared divider token `bg-border`\n// (--ui-border-on-surface-border), replacing the legacy `bg-primary/10` hack.\n\nconst Separator = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive>,\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive>\n>(({ className, orientation = 'horizontal', ...props }, ref) => (\n  <SeparatorPrimitive\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'shrink-0 bg-border',\n      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n      className\n    )}\n    {...props}\n  />\n));\nSeparator.displayName = 'Separator';\n\nexport { Separator };\n"],"names":["Separator","React","className","orientation","props","ref","jsx","SeparatorPrimitive","cn"],"mappings":";;;;AAWA,MAAMA,IAAYC,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,aAAAC,IAAc,cAAc,GAAGC,KAASC,MACtD,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,aAAAF;AAAA,IACA,WAAWK;AAAA,MACT;AAAA,MACAL,MAAgB,eAAe,gBAAgB;AAAA,MAC/CD;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAU,cAAc;"}