@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/components/ui/widget-placeholder/widget-placeholder.js

@@ -1,106 +1,63 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as a from "react";
-import { cn as d } from "../../../lib/utils.js";
-const i = a.forwardRef(({ className: t, interactive: e, ...o }, l) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: l,
-    tabIndex: e ? 0 : void 0,
-    className: d(
-      "relative flex flex-col rounded-lg border border-border bg-background text-foreground transition-colors",
-      e && "cursor-pointer hover:bg-accent active:bg-[var(--ui-background-surface-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]",
-      t
-    ),
-    ...o
-  }
-));
-i.displayName = "WidgetPlaceholder";
-const s = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: o,
-    className: d("flex items-center gap-2 px-6 pb-2 pt-4", t),
-    ...e
-  }
-));
-s.displayName = "WidgetPlaceholderHeader";
-const c = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: o,
-    className: d("flex-1 truncate text-sm font-semibold leading-6", t),
-    ...e
-  }
-));
-c.displayName = "WidgetPlaceholderTitle";
-const n = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: o,
-    className: d(
-      "flex-shrink-0 text-secondary [&>svg]:size-4",
-      t
-    ),
-    ...e
-  }
-));
-n.displayName = "WidgetPlaceholderIcon";
-const f = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: o,
-    className: d(
-      "flex flex-1 flex-col items-center justify-center gap-2 px-6 py-4 text-center",
-      t
-    ),
-    ...e
-  }
-));
-f.displayName = "WidgetPlaceholderContent";
-const m = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: o,
-    className: d(
-      "flex items-center justify-center text-muted-foreground [&>svg]:size-[72px]",
-      t
-    ),
-    ...e
-  }
-));
-m.displayName = "WidgetPlaceholderImage";
-const g = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r("div", { ref: o, className: d("text-sm leading-6", t), ...e }));
-g.displayName = "WidgetPlaceholderText";
-const x = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: o,
-    className: d(
-      "cursor-pointer text-sm font-semibold text-secondary hover:underline",
-      t
-    ),
-    ...e
-  }
-));
-x.displayName = "WidgetPlaceholderAction";
-const p = a.forwardRef(({ className: t, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    ref: o,
-    className: d("px-6 pb-4 pt-0 text-xs text-muted-foreground", t),
-    ...e
-  }
-));
-p.displayName = "WidgetPlaceholderFooter";
-export {
-  i as WidgetPlaceholder,
-  x as WidgetPlaceholderAction,
-  f as WidgetPlaceholderContent,
-  p as WidgetPlaceholderFooter,
-  s as WidgetPlaceholderHeader,
-  n as WidgetPlaceholderIcon,
-  m as WidgetPlaceholderImage,
-  g as WidgetPlaceholderText,
-  c as WidgetPlaceholderTitle
-};
-//# sourceMappingURL=widget-placeholder.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ui/widget-placeholder/widget-placeholder.tsx
+var r = t.forwardRef(({ className: t, interactive: r, ...i }, a) => /* @__PURE__ */ n("div", {
+	ref: a,
+	tabIndex: r ? 0 : void 0,
+	className: e("relative flex flex-col rounded-lg border border-border bg-background text-foreground transition-colors", r && "cursor-pointer hover:bg-accent active:bg-[var(--ui-background-surface-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]", t),
+	...i
+}));
+r.displayName = "WidgetPlaceholder";
+var i = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("flex items-center gap-2 px-6 pb-2 pt-4", t),
+	...r
+}));
+i.displayName = "WidgetPlaceholderHeader";
+var a = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("flex-1 truncate text-sm font-semibold leading-6", t),
+	...r
+}));
+a.displayName = "WidgetPlaceholderTitle";
+var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("flex-shrink-0 text-secondary [&>svg]:size-4", t),
+	...r
+}));
+o.displayName = "WidgetPlaceholderIcon";
+var s = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("flex flex-1 flex-col items-center justify-center gap-2 px-6 py-4 text-center", t),
+	...r
+}));
+s.displayName = "WidgetPlaceholderContent";
+var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("flex items-center justify-center text-muted-foreground [&>svg]:size-[72px]", t),
+	...r
+}));
+c.displayName = "WidgetPlaceholderImage";
+var l = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("text-sm leading-6", t),
+	...r
+}));
+l.displayName = "WidgetPlaceholderText";
+var u = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("cursor-pointer text-sm font-semibold text-secondary hover:underline", t),
+	...r
+}));
+u.displayName = "WidgetPlaceholderAction";
+var d = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	className: e("px-6 pb-4 pt-0 text-xs text-muted-foreground", t),
+	...r
+}));
+d.displayName = "WidgetPlaceholderFooter";
+//#endregion
+export { r as WidgetPlaceholder, u as WidgetPlaceholderAction, s as WidgetPlaceholderContent, d as WidgetPlaceholderFooter, i as WidgetPlaceholderHeader, o as WidgetPlaceholderIcon, c as WidgetPlaceholderImage, l as WidgetPlaceholderText, a as WidgetPlaceholderTitle };
+
+//# sourceMappingURL=widget-placeholder.js.map

package/dist/components/ui/widget-placeholder/widget-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-placeholder.js","sources":["../../../../src/components/ui/widget-placeholder/widget-placeholder.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Composable dashboard-widget empty-state parts, ported from\n// `@acronis-platform/shadcn-uikit`'s `widget-placeholder`\n// (packages/ui-legacy/src/components/ui/widget-placeholder.tsx). Plain styled\n// elements — no Base UI primitive. No `--ui-widget-placeholder-*` tier exists\n// yet, so this design-pending v1 themes from the shared semantic vocabulary:\n//   • root      -> border-border + bg-background + text-foreground\n//   • icon/action (was --av-fixed-link) -> text-secondary (the brand action blue)\n//   • image (was --av-brand-light, a soft brand tint) -> text-muted-foreground\n//     (a muted decorative placeholder; the brand tint is design-pending)\n//   • interactive hover/active -> bg-accent (surface-hover) /\n//     surface-active; focus -> the standard 3px --ui-focus-primary ring\n// Reconcile with `/figma-component WidgetPlaceholder <url> --update` once a\n// mockup lands (Figma: Charts-anatomy / Placeholders, node 229:73962).\n\nexport interface WidgetPlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Make the whole widget focusable and clickable (hover/active surface + focus\n   * ring). Wire the behavior via `onClick`.\n   */\n  interactive?: boolean;\n}\n\nconst WidgetPlaceholder = React.forwardRef<\n  HTMLDivElement,\n  WidgetPlaceholderProps\n>(({ className, interactive, ...props }, ref) => (\n  <div\n    ref={ref}\n    tabIndex={interactive ? 0 : undefined}\n    className={cn(\n      'relative flex flex-col rounded-lg border border-border bg-background text-foreground transition-colors',\n      interactive &&\n        'cursor-pointer hover:bg-accent active:bg-[var(--ui-background-surface-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholder.displayName = 'WidgetPlaceholder';\n\nconst WidgetPlaceholderHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-2 px-6 pb-2 pt-4', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderHeader.displayName = 'WidgetPlaceholderHeader';\n\nconst WidgetPlaceholderTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-1 truncate text-sm font-semibold leading-6', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderTitle.displayName = 'WidgetPlaceholderTitle';\n\nconst WidgetPlaceholderIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex-shrink-0 text-secondary [&>svg]:size-4',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderIcon.displayName = 'WidgetPlaceholderIcon';\n\nconst WidgetPlaceholderContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col items-center justify-center gap-2 px-6 py-4 text-center',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderContent.displayName = 'WidgetPlaceholderContent';\n\nconst WidgetPlaceholderImage = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-center text-muted-foreground [&>svg]:size-[72px]',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderImage.displayName = 'WidgetPlaceholderImage';\n\nconst WidgetPlaceholderText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('text-sm leading-6', className)} {...props} />\n));\nWidgetPlaceholderText.displayName = 'WidgetPlaceholderText';\n\nconst WidgetPlaceholderAction = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'cursor-pointer text-sm font-semibold text-secondary hover:underline',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderAction.displayName = 'WidgetPlaceholderAction';\n\nconst WidgetPlaceholderFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('px-6 pb-4 pt-0 text-xs text-muted-foreground', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderFooter.displayName = 'WidgetPlaceholderFooter';\n\nexport {\n  WidgetPlaceholder,\n  WidgetPlaceholderHeader,\n  WidgetPlaceholderTitle,\n  WidgetPlaceholderIcon,\n  WidgetPlaceholderContent,\n  WidgetPlaceholderImage,\n  WidgetPlaceholderText,\n  WidgetPlaceholderAction,\n  WidgetPlaceholderFooter,\n};\n"],"names":["WidgetPlaceholder","React","className","interactive","props","ref","jsx","cn","WidgetPlaceholderHeader","WidgetPlaceholderTitle","WidgetPlaceholderIcon","WidgetPlaceholderContent","WidgetPlaceholderImage","WidgetPlaceholderText","WidgetPlaceholderAction","WidgetPlaceholderFooter"],"mappings":";;;AA2BA,MAAMA,IAAoBC,EAAM,WAG9B,CAAC,EAAE,WAAAC,GAAW,aAAAC,GAAa,GAAGC,KAASC,MACvC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,UAAUF,IAAc,IAAI;AAAA,IAC5B,WAAWI;AAAA,MACT;AAAA,MACAJ,KACE;AAAA,MACFD;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAkB,cAAc;AAEhC,MAAMQ,IAA0BP,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,0CAA0CL,CAAS;AAAA,IAChE,GAAGE;AAAA,EAAA;AACN,CACD;AACDI,EAAwB,cAAc;AAEtC,MAAMC,IAAyBR,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,mDAAmDL,CAAS;AAAA,IACzE,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAuB,cAAc;AAErC,MAAMC,IAAwBT,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAsB,cAAc;AAEpC,MAAMC,IAA2BV,EAAM,WAGrC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDO,EAAyB,cAAc;AAEvC,MAAMC,IAAyBX,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDQ,EAAuB,cAAc;AAErC,MAAMC,IAAwBZ,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,qBAAqBL,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDS,EAAsB,cAAc;AAEpC,MAAMC,IAA0Bb,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDU,EAAwB,cAAc;AAEtC,MAAMC,IAA0Bd,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,gDAAgDL,CAAS;AAAA,IACtE,GAAGE;AAAA,EAAA;AACN,CACD;AACDW,EAAwB,cAAc;"}
+{"version":3,"file":"widget-placeholder.js","names":[],"sources":["../../../../src/components/ui/widget-placeholder/widget-placeholder.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Composable dashboard-widget empty-state parts, ported from\n// `@acronis-platform/shadcn-uikit`'s `widget-placeholder`\n// (packages/ui-legacy/src/components/ui/widget-placeholder.tsx). Plain styled\n// elements — no Base UI primitive. No `--ui-widget-placeholder-*` tier exists\n// yet, so this design-pending v1 themes from the shared semantic vocabulary:\n//   • root      -> border-border + bg-background + text-foreground\n//   • icon/action (was --av-fixed-link) -> text-secondary (the brand action blue)\n//   • image (was --av-brand-light, a soft brand tint) -> text-muted-foreground\n//     (a muted decorative placeholder; the brand tint is design-pending)\n//   • interactive hover/active -> bg-accent (surface-hover) /\n//     surface-active; focus -> the standard 3px --ui-focus-primary ring\n// Reconcile with `/figma-component WidgetPlaceholder <url> --update` once a\n// mockup lands (Figma: Charts-anatomy / Placeholders, node 229:73962).\n\nexport interface WidgetPlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Make the whole widget focusable and clickable (hover/active surface + focus\n   * ring). Wire the behavior via `onClick`.\n   */\n  interactive?: boolean;\n}\n\nconst WidgetPlaceholder = React.forwardRef<\n  HTMLDivElement,\n  WidgetPlaceholderProps\n>(({ className, interactive, ...props }, ref) => (\n  <div\n    ref={ref}\n    tabIndex={interactive ? 0 : undefined}\n    className={cn(\n      'relative flex flex-col rounded-lg border border-border bg-background text-foreground transition-colors',\n      interactive &&\n        'cursor-pointer hover:bg-accent active:bg-[var(--ui-background-surface-active)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-focus-primary)]',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholder.displayName = 'WidgetPlaceholder';\n\nconst WidgetPlaceholderHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center gap-2 px-6 pb-2 pt-4', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderHeader.displayName = 'WidgetPlaceholderHeader';\n\nconst WidgetPlaceholderTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex-1 truncate text-sm font-semibold leading-6', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderTitle.displayName = 'WidgetPlaceholderTitle';\n\nconst WidgetPlaceholderIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex-shrink-0 text-secondary [&>svg]:size-4',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderIcon.displayName = 'WidgetPlaceholderIcon';\n\nconst WidgetPlaceholderContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col items-center justify-center gap-2 px-6 py-4 text-center',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderContent.displayName = 'WidgetPlaceholderContent';\n\nconst WidgetPlaceholderImage = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-center text-muted-foreground [&>svg]:size-[72px]',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderImage.displayName = 'WidgetPlaceholderImage';\n\nconst WidgetPlaceholderText = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('text-sm leading-6', className)} {...props} />\n));\nWidgetPlaceholderText.displayName = 'WidgetPlaceholderText';\n\nconst WidgetPlaceholderAction = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'cursor-pointer text-sm font-semibold text-secondary hover:underline',\n      className\n    )}\n    {...props}\n  />\n));\nWidgetPlaceholderAction.displayName = 'WidgetPlaceholderAction';\n\nconst WidgetPlaceholderFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('px-6 pb-4 pt-0 text-xs text-muted-foreground', className)}\n    {...props}\n  />\n));\nWidgetPlaceholderFooter.displayName = 'WidgetPlaceholderFooter';\n\nexport {\n  WidgetPlaceholder,\n  WidgetPlaceholderHeader,\n  WidgetPlaceholderTitle,\n  WidgetPlaceholderIcon,\n  WidgetPlaceholderContent,\n  WidgetPlaceholderImage,\n  WidgetPlaceholderText,\n  WidgetPlaceholderAction,\n  WidgetPlaceholderFooter,\n};\n"],"mappings":";;;;AA2BA,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,gBAAa,GAAG,KAAS,MACvC,kBAAC,OAAD;CACO;CACL,UAAU,IAAc,IAAI,KAAA;CAC5B,WAAW,EACT,0GACA,KACE,yLACF,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAkB,cAAc;AAEhC,IAAM,IAA0B,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACL,CAAA,CACF;AACD,EAAwB,cAAc;AAEtC,IAAM,IAAyB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EAAG,mDAAmD,CAAS;CAC1E,GAAI;AACL,CAAA,CACF;AACD,EAAuB,cAAc;AAErC,IAAM,IAAwB,EAAM,YAGjC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EACT,+CACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAsB,cAAc;AAEpC,IAAM,IAA2B,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EACT,gFACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAyB,cAAc;AAEvC,IAAM,IAAyB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EACT,8EACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAuB,cAAc;AAErC,IAAM,IAAwB,EAAM,YAGjC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,qBAAqB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC3E;AACD,EAAsB,cAAc;AAEpC,IAAM,IAA0B,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EACT,uEACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAwB,cAAc;AAEtC,IAAM,IAA0B,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,WAAW,EAAG,gDAAgD,CAAS;CACvE,GAAI;AACL,CAAA,CACF;AACD,EAAwB,cAAc"}

package/dist/components/ui/wizard/wizard.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ui/wizard/wizard.tsx
+var r = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	"data-slot": "wizard",
+	className: e("flex h-full w-full flex-col", t),
+	...r
+}));
+r.displayName = "Wizard";
+var i = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	"data-slot": "wizard-header",
+	className: e("sticky top-0 z-10 flex w-full flex-col gap-[var(--ui-gap-12)] border-b border-[var(--ui-border-on-surface-divider)] bg-[var(--ui-background-surface-secondary)] p-[var(--ui-gap-16)]", t),
+	...r
+}));
+i.displayName = "WizardHeader";
+var a = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("p", {
+	ref: i,
+	"data-slot": "wizard-subtitle",
+	className: e("text-sm font-normal leading-6 text-muted-foreground", t),
+	...r
+}));
+a.displayName = "WizardSubtitle";
+var o = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("div", {
+	ref: i,
+	"data-slot": "wizard-body",
+	className: e("mx-auto flex w-full max-w-[1024px] flex-col pb-[var(--ui-gap-16)]", t),
+	...r
+}));
+o.displayName = "WizardBody";
+//#endregion
+export { r as Wizard, o as WizardBody, i as WizardHeader, a as WizardSubtitle };
+
+//# sourceMappingURL=wizard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.js","names":[],"sources":["../../../../src/components/ui/wizard/wizard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The full-page wizard page template, from the Figma \"RegionMain\" frame\n// (ui-react file, node 10511-61418).\n//\n// ── Why this is layout only ──\n// Wizard is a *composition*, not a new primitive: every visual part it needs\n// already exists in this package (`Breadcrumb`, `PageHeaderRow` /\n// `PageHeaderTitle` / `PageHeaderActions`, `Stepper` + `StepperItem`,\n// `Section`, `Button`). Its whole job is the structural skeleton — the sticky\n// header band, its stacking gap, and the capped content column — plus slots for\n// those parts. It deliberately owns **no** step state, no navigation, and no\n// button wiring: which of Cancel / Back / Next / Submit shows on which step is a\n// per-flow product decision the design brief assigns to the consuming UI block,\n// not to the kit (the same call `PageHeader` makes about its own actions slot).\n// So there is no `step`/`currentStep`/`onNext` prop here by omission, not\n// oversight.\n//\n// That boundary is about these *components*, not about the package: a consumer\n// that would rather not hand-maintain one `StepperItem` block per step can opt\n// into `useWizard` (`src/hooks/use-wizard.ts`), a headless hook that holds the\n// step index and derives the `Stepper` summary props plus each step's\n// `variant` + avatar presentation. It is separate and optional — it renders\n// nothing, decides no button visibility, and `Wizard` neither knows nor\n// requires it.\n//\n// ── Reuse over new parts ──\n// The title row is functionally identical to `PageHeader`'s, so consumers place\n// `PageHeaderRow` / `PageHeaderTitle` / `PageHeaderActions` directly inside\n// `WizardHeader` rather than getting near-duplicate `WizardTitle` /\n// `WizardActions` parts. `PageHeader`'s *root* is intentionally not reused: it\n// carries `role=\"banner\"`, and the wizard header band is not a page banner —\n// composing the row parts alone keeps the landmark structure honest.\n// `WizardSubtitle` is the one piece of typography with no existing home (a\n// dedicated `Subtitle` component was considered and rejected upstream), so it\n// reuses `PageHeaderDescription`'s exact body/secondary text treatment instead\n// of inventing a scale.\n//\n// ── Tokens ──\n// The header band's surface, divider, padding, and stacking gap come from the\n// generic semantic tiers (`--ui-background-surface-secondary`,\n// `--ui-border-on-surface-divider`, `--ui-gap-16`, `--ui-gap-12`) — Figma\n// references no `components/Wizard/*` variables, and there is no\n// `--ui-wizard-*` tier in @acronis-platform/tokens-pd.\n//\n// The body's 1024px cap is the one hardcoded number, and it is a plain layout\n// constant rather than a themed value — the same call `dialog.tsx` makes for its\n// `large` size's 832px. It deliberately does *not* read from the\n// `--ui-breakpoint-lg` bridge var even though that hand-authored var also\n// resolves to 1024px: a content column's max width and a viewport breakpoint are\n// independent facts that happen to coincide today, and tying them would make a\n// future change to either silently move the other. No `cva` variant either —\n// Figma shows exactly one width; a per-step override goes through `className`,\n// exactly as Dialog's per-instance width override does.\n//\n// The body is horizontally centered (`mx-auto`), not left-aligned with the\n// header's content: the Figma frame is 1344px wide with `containerBody` at\n// x=160/width=1024 — (1344 - 1024) / 2 = 160 on both sides, a centered column,\n// while `WizardHeader`'s content spans edge-to-edge inside its own 16px padding.\n// The two rows are intentionally not flush on the same left edge.\n\nconst Wizard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"wizard\"\n    className={cn('flex h-full w-full flex-col', className)}\n    {...props}\n  />\n));\nWizard.displayName = 'Wizard';\n\n// The header band: breadcrumb, title row, optional subtitle, and optional\n// stepper, stacked in that order as children. Sticky, so the step context and\n// the Cancel/Back/Next actions stay reachable while a long step body scrolls.\nconst WizardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"wizard-header\"\n    className={cn(\n      'sticky top-0 z-10 flex w-full flex-col gap-[var(--ui-gap-12)] border-b border-[var(--ui-border-on-surface-divider)] bg-[var(--ui-background-surface-secondary)] p-[var(--ui-gap-16)]',\n      className\n    )}\n    {...props}\n  />\n));\nWizardHeader.displayName = 'WizardHeader';\n\n// Optional supporting line under the title row. Same treatment as\n// `PageHeaderDescription` — body size, secondary (muted) color.\nconst WizardSubtitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"wizard-subtitle\"\n    className={cn(\n      'text-sm font-normal leading-6 text-muted-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nWizardSubtitle.displayName = 'WizardSubtitle';\n\n// The step's content column, capped at 1024px. Always meant to wrap a\n// `Section` (or several) — the wizard step's own fields live inside that, not\n// here.\nconst WizardBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"wizard-body\"\n    className={cn(\n      'mx-auto flex w-full max-w-[1024px] flex-col pb-[var(--ui-gap-16)]',\n      className\n    )}\n    {...props}\n  />\n));\nWizardBody.displayName = 'WizardBody';\n\nexport { Wizard, WizardHeader, WizardSubtitle, WizardBody };\n"],"mappings":";;;;AA+DA,IAAM,IAAS,EAAM,YAGlB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EAAG,+BAA+B,CAAS;CACtD,GAAI;AACL,CAAA,CACF;AACD,EAAO,cAAc;AAKrB,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,wLACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc;AAI3B,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,KAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,uDACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAe,cAAc;AAK7B,IAAM,IAAa,EAAM,YAGtB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,OAAD;CACO;CACL,aAAU;CACV,WAAW,EACT,qEACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAW,cAAc"}

package/dist/hooks/use-intersection-observer.js

@@ -1,26 +1,28 @@
-import { useRef as v, useState as b, useEffect as l } from "react";
-function p({
-  onIntersect: n,
-  disabled: t = !1,
-  root: r,
-  rootMargin: s,
-  threshold: c
-}) {
-  const u = v(n);
-  u.current = n;
-  const [e, o] = b(null);
-  return l(() => {
-    if (t || !e) return;
-    const f = new IntersectionObserver(
-      (i) => {
-        i.some((m) => m.isIntersecting) && u.current();
-      },
-      { root: r, rootMargin: s, threshold: c }
-    );
-    return f.observe(e), () => f.disconnect();
-  }, [e, t, r, s, c]), o;
+import { useEffect as e, useRef as t, useState as n } from "react";
+//#region src/hooks/use-intersection-observer.ts
+function r({ onIntersect: r, disabled: i = !1, root: a, rootMargin: o, threshold: s }) {
+	let c = t(r);
+	c.current = r;
+	let [l, u] = n(null);
+	return e(() => {
+		if (i || !l) return;
+		let e = new IntersectionObserver((e) => {
+			e.some((e) => e.isIntersecting) && c.current();
+		}, {
+			root: a,
+			rootMargin: o,
+			threshold: s
+		});
+		return e.observe(l), () => e.disconnect();
+	}, [
+		l,
+		i,
+		a,
+		o,
+		s
+	]), u;
 }
-export {
-  p as useIntersectionObserver
-};
-//# sourceMappingURL=use-intersection-observer.js.map
+//#endregion
+export { r as useIntersectionObserver };
+
+//# sourceMappingURL=use-intersection-observer.js.map

package/dist/hooks/use-intersection-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-intersection-observer.js","sources":["../../src/hooks/use-intersection-observer.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport interface UseIntersectionObserverOptions extends IntersectionObserverInit {\n  /** Called each time the observed element intersects its root. */\n  onIntersect: () => void;\n  /**\n   * Skip observing — e.g. there's nothing left to load, or a load is already\n   * in flight. Disconnects any existing observer.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Wires a single `IntersectionObserver` on the returned ref callback's element\n * and calls `onIntersect` each time it intersects. Re-creates the observer when\n * the element, `disabled`, or any `IntersectionObserverInit` option changes;\n * disconnects on cleanup. `onIntersect` itself doesn't need to be memoized by\n * the caller — the latest version is always used (via a ref) without\n * reconnecting the observer.\n *\n * Takes a ref *callback* (not a `RefObject`) rather than accepting one from the\n * caller — attaching to `element.current` inside a `useEffect` keyed on a\n * `RefObject` misses conditionally-mounted elements: the `ref` object's\n * identity never changes when its `.current` is populated, so an effect keyed\n * on it (rather than on the element itself) never re-runs once the element\n * actually mounts. Routing the DOM node through `useState` instead makes the\n * mount itself a dependency.\n */\nexport function useIntersectionObserver<T extends Element>({\n  onIntersect,\n  disabled = false,\n  root,\n  rootMargin,\n  threshold,\n}: UseIntersectionObserverOptions): (node: T | null) => void {\n  const onIntersectRef = useRef(onIntersect);\n  onIntersectRef.current = onIntersect;\n\n  const [element, setElement] = useState<T | null>(null);\n\n  useEffect(() => {\n    if (disabled || !element) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          onIntersectRef.current();\n        }\n      },\n      { root, rootMargin, threshold }\n    );\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [element, disabled, root, rootMargin, threshold]);\n\n  return setElement;\n}\n"],"names":["useIntersectionObserver","onIntersect","disabled","root","rootMargin","threshold","onIntersectRef","useRef","element","setElement","useState","useEffect","observer","entries","entry"],"mappings":";AA4BO,SAASA,EAA2C;AAAA,EACzD,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AACF,GAA6D;AAC3D,QAAMC,IAAiBC,EAAON,CAAW;AACzC,EAAAK,EAAe,UAAUL;AAEzB,QAAM,CAACO,GAASC,CAAU,IAAIC,EAAmB,IAAI;AAErD,SAAAC,EAAU,MAAM;AACd,QAAIT,KAAY,CAACM,EAAS;AAE1B,UAAMI,IAAW,IAAI;AAAA,MACnB,CAACC,MAAY;AACX,QAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,KAC9CR,EAAe,QAAA;AAAA,MAEnB;AAAA,MACA,EAAE,MAAAH,GAAM,YAAAC,GAAY,WAAAC,EAAA;AAAA,IAAU;AAEhC,WAAAO,EAAS,QAAQJ,CAAO,GACjB,MAAMI,EAAS,WAAA;AAAA,EACxB,GAAG,CAACJ,GAASN,GAAUC,GAAMC,GAAYC,CAAS,CAAC,GAE5CI;AACT;"}
+{"version":3,"file":"use-intersection-observer.js","names":[],"sources":["../../src/hooks/use-intersection-observer.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nexport interface UseIntersectionObserverOptions extends IntersectionObserverInit {\n  /** Called each time the observed element intersects its root. */\n  onIntersect: () => void;\n  /**\n   * Skip observing — e.g. there's nothing left to load, or a load is already\n   * in flight. Disconnects any existing observer.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Wires a single `IntersectionObserver` on the returned ref callback's element\n * and calls `onIntersect` each time it intersects. Re-creates the observer when\n * the element, `disabled`, or any `IntersectionObserverInit` option changes;\n * disconnects on cleanup. `onIntersect` itself doesn't need to be memoized by\n * the caller — the latest version is always used (via a ref) without\n * reconnecting the observer.\n *\n * Takes a ref *callback* (not a `RefObject`) rather than accepting one from the\n * caller — attaching to `element.current` inside a `useEffect` keyed on a\n * `RefObject` misses conditionally-mounted elements: the `ref` object's\n * identity never changes when its `.current` is populated, so an effect keyed\n * on it (rather than on the element itself) never re-runs once the element\n * actually mounts. Routing the DOM node through `useState` instead makes the\n * mount itself a dependency.\n */\nexport function useIntersectionObserver<T extends Element>({\n  onIntersect,\n  disabled = false,\n  root,\n  rootMargin,\n  threshold,\n}: UseIntersectionObserverOptions): (node: T | null) => void {\n  const onIntersectRef = useRef(onIntersect);\n  onIntersectRef.current = onIntersect;\n\n  const [element, setElement] = useState<T | null>(null);\n\n  useEffect(() => {\n    if (disabled || !element) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          onIntersectRef.current();\n        }\n      },\n      { root, rootMargin, threshold }\n    );\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [element, disabled, root, rootMargin, threshold]);\n\n  return setElement;\n}\n"],"mappings":";;AA4BA,SAAgB,EAA2C,EACzD,gBACA,cAAW,IACX,SACA,eACA,gBAC2D;CAC3D,IAAM,IAAiB,EAAO,CAAW;CACzC,EAAe,UAAU;CAEzB,IAAM,CAAC,GAAS,KAAc,EAAmB,IAAI;CAiBrD,OAfA,QAAgB;EACd,IAAI,KAAY,CAAC,GAAS;EAE1B,IAAM,IAAW,IAAI,sBAClB,MAAY;GACX,AAAI,EAAQ,MAAM,MAAU,EAAM,cAAc,KAC9C,EAAe,QAAQ;EAE3B,GACA;GAAE;GAAM;GAAY;EAAU,CAChC;EAEA,OADA,EAAS,QAAQ,CAAO,SACX,EAAS,WAAW;CACnC,GAAG;EAAC;EAAS;EAAU;EAAM;EAAY;CAAS,CAAC,GAE5C;AACT"}

package/dist/hooks/use-sort-state.js

@@ -1,35 +1,45 @@
-import * as l from "react";
-function p(e, r) {
-  return e == null && r == null ? 0 : e == null ? -1 : r == null ? 1 : typeof e == "number" && typeof r == "number" ? e - r : String(e).localeCompare(String(r), void 0, {
-    numeric: !0,
-    sensitivity: "base"
-  });
+import * as e from "react";
+//#region src/hooks/use-sort-state.ts
+function t(e, t) {
+	return e == null && t == null ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, {
+		numeric: !0,
+		sensitivity: "base"
+	});
 }
-function g({
-  data: e,
-  initialSort: r = null,
-  comparators: s,
-  getValue: f = (t, c) => t[c]
-}) {
-  const [t, c] = l.useState(r), m = l.useCallback((o) => {
-    c((i) => !i || i.columnId !== o ? { columnId: o, direction: "asc" } : i.direction === "asc" ? { columnId: o, direction: "desc" } : null);
-  }, []), S = l.useCallback(
-    (o) => t && t.columnId === o ? t.direction : !1,
-    [t]
-  );
-  return { sortedData: l.useMemo(() => {
-    if (!t) return e;
-    const i = (s == null ? void 0 : s[t.columnId]) ?? ((n, u) => p(
-      f(n, t.columnId),
-      f(u, t.columnId)
-    )), a = t.direction === "desc" ? -1 : 1;
-    return e.map((n, u) => ({ row: n, index: u })).sort((n, u) => {
-      const d = i(n.row, u.row);
-      return d !== 0 ? d * a : n.index - u.index;
-    }).map((n) => n.row);
-  }, [e, t, s, f]), sort: t, setSort: c, toggleSort: m, getSortDirection: S };
+function n({ data: n, initialSort: r = null, comparators: i, getValue: a = (e, t) => e[t] }) {
+	let [o, s] = e.useState(r), c = e.useCallback((e) => {
+		s((t) => !t || t.columnId !== e ? {
+			columnId: e,
+			direction: "asc"
+		} : t.direction === "asc" ? {
+			columnId: e,
+			direction: "desc"
+		} : null);
+	}, []), l = e.useCallback((e) => o && o.columnId === e ? o.direction : !1, [o]);
+	return {
+		sortedData: e.useMemo(() => {
+			if (!o) return n;
+			let e = i?.[o.columnId] ?? ((e, n) => t(a(e, o.columnId), a(n, o.columnId))), r = o.direction === "desc" ? -1 : 1;
+			return n.map((e, t) => ({
+				row: e,
+				index: t
+			})).sort((t, n) => {
+				let i = e(t.row, n.row);
+				return i === 0 ? t.index - n.index : i * r;
+			}).map((e) => e.row);
+		}, [
+			n,
+			o,
+			i,
+			a
+		]),
+		sort: o,
+		setSort: s,
+		toggleSort: c,
+		getSortDirection: l
+	};
 }
-export {
-  g as useSortState
-};
-//# sourceMappingURL=use-sort-state.js.map
+//#endregion
+export { n as useSortState };
+
+//# sourceMappingURL=use-sort-state.js.map

package/dist/hooks/use-sort-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sort-state.js","sources":["../../src/hooks/use-sort-state.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SortDirection = 'asc' | 'desc' | false;\n\nexport interface SortState {\n  columnId: string;\n  direction: 'asc' | 'desc';\n}\n\n/**\n * Compares two rows for a column. Ascending order; the hook negates the result\n * for descending. Receives the full rows so a custom comparator has access to\n * every field.\n */\nexport type SortComparator<TData> = (a: TData, b: TData) => number;\n\nexport interface UseSortStateOptions<TData> {\n  /** Rows to sort. */\n  data: TData[];\n  /** Initial sorted column + direction. */\n  initialSort?: SortState | null;\n  /**\n   * Custom per-column comparators keyed by column id. When absent for a column,\n   * the default alphanumeric comparator on `getValue(row, columnId)` is used.\n   */\n  comparators?: Record<string, SortComparator<TData>>;\n  /**\n   * How to read a column's value from a row for the default comparator.\n   * Defaults to `row[columnId]`.\n   */\n  getValue?: (row: TData, columnId: string) => unknown;\n}\n\nexport interface UseSortStateResult<TData> {\n  /** The rows sorted by the current sort state (unsorted `data` when none). */\n  sortedData: TData[];\n  /** The current sort, or `null` when unsorted. */\n  sort: SortState | null;\n  /** Directly set (or clear) the sort. */\n  setSort: (sort: SortState | null) => void;\n  /** Cycle a column's sort: none → asc → desc → none. */\n  toggleSort: (columnId: string) => void;\n  /** Direction for a column, shaped for `TableHead`'s `sortDirection` prop. */\n  getSortDirection: (columnId: string) => SortDirection;\n}\n\n// Natural alphanumeric comparison: numbers numerically, everything else via a\n// locale-aware numeric string compare (so \"item2\" sorts before \"item10\").\n// null/undefined sort first.\nfunction defaultCompareValues(a: unknown, b: unknown): number {\n  if (a == null && b == null) return 0;\n  if (a == null) return -1;\n  if (b == null) return 1;\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, {\n    numeric: true,\n    sensitivity: 'base',\n  });\n}\n\n/**\n * Headless client-side sort state for the `Table` primitives (no TanStack\n * dependency). Drives `TableHead`'s `sortable`/`sortDirection`/`onSort` props\n * and returns the sorted rows. Default comparator is alphanumeric; pass\n * `comparators` to override per column.\n */\nexport function useSortState<TData>({\n  data,\n  initialSort = null,\n  comparators,\n  getValue = (row, columnId) => (row as Record<string, unknown>)[columnId],\n}: UseSortStateOptions<TData>): UseSortStateResult<TData> {\n  const [sort, setSort] = React.useState<SortState | null>(initialSort);\n\n  const toggleSort = React.useCallback((columnId: string) => {\n    setSort((current) => {\n      if (!current || current.columnId !== columnId) {\n        return { columnId, direction: 'asc' };\n      }\n      if (current.direction === 'asc') {\n        return { columnId, direction: 'desc' };\n      }\n      return null;\n    });\n  }, []);\n\n  const getSortDirection = React.useCallback(\n    (columnId: string): SortDirection =>\n      sort && sort.columnId === columnId ? sort.direction : false,\n    [sort]\n  );\n\n  const sortedData = React.useMemo(() => {\n    if (!sort) return data;\n    const custom = comparators?.[sort.columnId];\n    const compare: SortComparator<TData> =\n      custom ??\n      ((a, b) =>\n        defaultCompareValues(\n          getValue(a, sort.columnId),\n          getValue(b, sort.columnId)\n        ));\n    const factor = sort.direction === 'desc' ? -1 : 1;\n    // Slice keeps the input array intact; index tiebreak keeps sort stable.\n    return data\n      .map((row, index) => ({ row, index }))\n      .sort((a, b) => {\n        const result = compare(a.row, b.row);\n        return result !== 0 ? result * factor : a.index - b.index;\n      })\n      .map((entry) => entry.row);\n  }, [data, sort, comparators, getValue]);\n\n  return { sortedData, sort, setSort, toggleSort, getSortDirection };\n}\n"],"names":["defaultCompareValues","a","b","useSortState","data","initialSort","comparators","getValue","row","columnId","sort","setSort","React","toggleSort","current","getSortDirection","compare","factor","index","result","entry"],"mappings":";AAiDA,SAASA,EAAqBC,GAAYC,GAAoB;AAC5D,SAAID,KAAK,QAAQC,KAAK,OAAa,IAC/BD,KAAK,OAAa,KAClBC,KAAK,OAAa,IAClB,OAAOD,KAAM,YAAY,OAAOC,KAAM,WAAiBD,IAAIC,IACxD,OAAOD,CAAC,EAAE,cAAc,OAAOC,CAAC,GAAG,QAAW;AAAA,IACnD,SAAS;AAAA,IACT,aAAa;AAAA,EAAA,CACd;AACH;AAQO,SAASC,EAAoB;AAAA,EAClC,MAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AAAA,EACA,UAAAC,IAAW,CAACC,GAAKC,MAAcD,EAAgCC,CAAQ;AACzE,GAA0D;AACxD,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAM,SAA2BP,CAAW,GAE9DQ,IAAaD,EAAM,YAAY,CAACH,MAAqB;AACzD,IAAAE,EAAQ,CAACG,MACH,CAACA,KAAWA,EAAQ,aAAaL,IAC5B,EAAE,UAAAA,GAAU,WAAW,MAAA,IAE5BK,EAAQ,cAAc,QACjB,EAAE,UAAAL,GAAU,WAAW,OAAA,IAEzB,IACR;AAAA,EACH,GAAG,CAAA,CAAE,GAECM,IAAmBH,EAAM;AAAA,IAC7B,CAACH,MACCC,KAAQA,EAAK,aAAaD,IAAWC,EAAK,YAAY;AAAA,IACxD,CAACA,CAAI;AAAA,EAAA;AAwBP,SAAO,EAAE,YArBUE,EAAM,QAAQ,MAAM;AACrC,QAAI,CAACF,EAAM,QAAON;AAElB,UAAMY,KADSV,KAAA,gBAAAA,EAAcI,EAAK,eAG/B,CAACT,GAAGC,MACHF;AAAA,MACEO,EAASN,GAAGS,EAAK,QAAQ;AAAA,MACzBH,EAASL,GAAGQ,EAAK,QAAQ;AAAA,IAAA,IAEzBO,IAASP,EAAK,cAAc,SAAS,KAAK;AAEhD,WAAON,EACJ,IAAI,CAACI,GAAKU,OAAW,EAAE,KAAAV,GAAK,OAAAU,EAAA,EAAQ,EACpC,KAAK,CAACjB,GAAGC,MAAM;AACd,YAAMiB,IAASH,EAAQf,EAAE,KAAKC,EAAE,GAAG;AACnC,aAAOiB,MAAW,IAAIA,IAASF,IAAShB,EAAE,QAAQC,EAAE;AAAA,IACtD,CAAC,EACA,IAAI,CAACkB,MAAUA,EAAM,GAAG;AAAA,EAC7B,GAAG,CAAChB,GAAMM,GAAMJ,GAAaC,CAAQ,CAAC,GAEjB,MAAAG,GAAM,SAAAC,GAAS,YAAAE,GAAY,kBAAAE,EAAA;AAClD;"}
+{"version":3,"file":"use-sort-state.js","names":[],"sources":["../../src/hooks/use-sort-state.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type SortDirection = 'asc' | 'desc' | false;\n\nexport interface SortState {\n  columnId: string;\n  direction: 'asc' | 'desc';\n}\n\n/**\n * Compares two rows for a column. Ascending order; the hook negates the result\n * for descending. Receives the full rows so a custom comparator has access to\n * every field.\n */\nexport type SortComparator<TData> = (a: TData, b: TData) => number;\n\nexport interface UseSortStateOptions<TData> {\n  /** Rows to sort. */\n  data: TData[];\n  /** Initial sorted column + direction. */\n  initialSort?: SortState | null;\n  /**\n   * Custom per-column comparators keyed by column id. When absent for a column,\n   * the default alphanumeric comparator on `getValue(row, columnId)` is used.\n   */\n  comparators?: Record<string, SortComparator<TData>>;\n  /**\n   * How to read a column's value from a row for the default comparator.\n   * Defaults to `row[columnId]`.\n   */\n  getValue?: (row: TData, columnId: string) => unknown;\n}\n\nexport interface UseSortStateResult<TData> {\n  /** The rows sorted by the current sort state (unsorted `data` when none). */\n  sortedData: TData[];\n  /** The current sort, or `null` when unsorted. */\n  sort: SortState | null;\n  /** Directly set (or clear) the sort. */\n  setSort: (sort: SortState | null) => void;\n  /** Cycle a column's sort: none → asc → desc → none. */\n  toggleSort: (columnId: string) => void;\n  /** Direction for a column, shaped for `TableHead`'s `sortDirection` prop. */\n  getSortDirection: (columnId: string) => SortDirection;\n}\n\n// Natural alphanumeric comparison: numbers numerically, everything else via a\n// locale-aware numeric string compare (so \"item2\" sorts before \"item10\").\n// null/undefined sort first.\nfunction defaultCompareValues(a: unknown, b: unknown): number {\n  if (a == null && b == null) return 0;\n  if (a == null) return -1;\n  if (b == null) return 1;\n  if (typeof a === 'number' && typeof b === 'number') return a - b;\n  return String(a).localeCompare(String(b), undefined, {\n    numeric: true,\n    sensitivity: 'base',\n  });\n}\n\n/**\n * Headless client-side sort state for the `Table` primitives (no TanStack\n * dependency). Drives `TableHead`'s `sortable`/`sortDirection`/`onSort` props\n * and returns the sorted rows. Default comparator is alphanumeric; pass\n * `comparators` to override per column.\n */\nexport function useSortState<TData>({\n  data,\n  initialSort = null,\n  comparators,\n  getValue = (row, columnId) => (row as Record<string, unknown>)[columnId],\n}: UseSortStateOptions<TData>): UseSortStateResult<TData> {\n  const [sort, setSort] = React.useState<SortState | null>(initialSort);\n\n  const toggleSort = React.useCallback((columnId: string) => {\n    setSort((current) => {\n      if (!current || current.columnId !== columnId) {\n        return { columnId, direction: 'asc' };\n      }\n      if (current.direction === 'asc') {\n        return { columnId, direction: 'desc' };\n      }\n      return null;\n    });\n  }, []);\n\n  const getSortDirection = React.useCallback(\n    (columnId: string): SortDirection =>\n      sort && sort.columnId === columnId ? sort.direction : false,\n    [sort]\n  );\n\n  const sortedData = React.useMemo(() => {\n    if (!sort) return data;\n    const custom = comparators?.[sort.columnId];\n    const compare: SortComparator<TData> =\n      custom ??\n      ((a, b) =>\n        defaultCompareValues(\n          getValue(a, sort.columnId),\n          getValue(b, sort.columnId)\n        ));\n    const factor = sort.direction === 'desc' ? -1 : 1;\n    // Slice keeps the input array intact; index tiebreak keeps sort stable.\n    return data\n      .map((row, index) => ({ row, index }))\n      .sort((a, b) => {\n        const result = compare(a.row, b.row);\n        return result !== 0 ? result * factor : a.index - b.index;\n      })\n      .map((entry) => entry.row);\n  }, [data, sort, comparators, getValue]);\n\n  return { sortedData, sort, setSort, toggleSort, getSortDirection };\n}\n"],"mappings":";;AAiDA,SAAS,EAAqB,GAAY,GAAoB;CAK5D,OAJI,KAAK,QAAQ,KAAK,OAAa,IAC/B,KAAK,OAAa,KAClB,KAAK,OAAa,IAClB,OAAO,KAAM,YAAY,OAAO,KAAM,WAAiB,IAAI,IACxD,OAAO,CAAC,CAAC,CAAC,cAAc,OAAO,CAAC,GAAG,KAAA,GAAW;EACnD,SAAS;EACT,aAAa;CACf,CAAC;AACH;AAQA,SAAgB,EAAoB,EAClC,SACA,iBAAc,MACd,gBACA,eAAY,GAAK,MAAc,EAAgC,MACP;CACxD,IAAM,CAAC,GAAM,KAAW,EAAM,SAA2B,CAAW,GAE9D,IAAa,EAAM,aAAa,MAAqB;EACzD,GAAS,MACH,CAAC,KAAW,EAAQ,aAAa,IAC5B;GAAE;GAAU,WAAW;EAAM,IAElC,EAAQ,cAAc,QACjB;GAAE;GAAU,WAAW;EAAO,IAEhC,IACR;CACH,GAAG,CAAC,CAAC,GAEC,IAAmB,EAAM,aAC5B,MACC,KAAQ,EAAK,aAAa,IAAW,EAAK,YAAY,IACxD,CAAC,CAAI,CACP;CAuBA,OAAO;EAAE,YArBU,EAAM,cAAc;GACrC,IAAI,CAAC,GAAM,OAAO;GAElB,IAAM,IADS,IAAc,EAAK,eAG9B,GAAG,MACH,EACE,EAAS,GAAG,EAAK,QAAQ,GACzB,EAAS,GAAG,EAAK,QAAQ,CAC3B,IACE,IAAS,EAAK,cAAc,SAAS,KAAK;GAEhD,OAAO,EACJ,KAAK,GAAK,OAAW;IAAE;IAAK;GAAM,EAAE,CAAC,CACrC,MAAM,GAAG,MAAM;IACd,IAAM,IAAS,EAAQ,EAAE,KAAK,EAAE,GAAG;IACnC,OAAO,MAAW,IAAsB,EAAE,QAAQ,EAAE,QAA9B,IAAS;GACjC,CAAC,CAAC,CACD,KAAK,MAAU,EAAM,GAAG;EAC7B,GAAG;GAAC;GAAM;GAAM;GAAa;EAAQ,CAE5B;EAAY;EAAM;EAAS;EAAY;CAAiB;AACnE"}