@acronis-platform/ui-react 0.57.1 → 0.58.0

package/dist/components/ui/card-filter/card-filter.js

@@ -1,48 +1,61 @@
-import { jsxs as i, Fragment as v, jsx as l } from "react/jsx-runtime";
-import * as g from "react";
+import { jsxs as l, Fragment as g, jsx as t } from "react/jsx-runtime";
+import * as p from "react";
 import { mergeProps as m } from "@base-ui/react/merge-props";
-import { useRender as p } from "@base-ui/react/use-render";
-import { cva as x } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { cn as o } from "../../../lib/utils.js";
-const h = x(
+import { useRender as x } from "@base-ui/react/use-render";
+import { cva as h } 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 y = h(
   "inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors",
   {
     variants: {
       variant: {
         static: "",
         "static-empty": "",
-        clickable: "cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]"
+        clickable: "cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[color:var(--ui-card-filter-global-border-color-active)] data-[selected=true]:bg-[var(--ui-card-filter-global-container-color-active)]"
       }
     },
     defaultVariants: {
       variant: "static"
     }
   }
-), y = {
+), k = {
   static: "text-[var(--ui-card-filter-static-value-color-idle)]",
   "static-empty": "text-[var(--ui-card-filter-static-value-color-disabled)]",
   clickable: "text-[var(--ui-card-filter-clickable-value-color)]"
-}, k = g.forwardRef(
-  ({ className: t, variant: r = "static", label: c, value: s, icon: d, render: n, ...b }, u) => {
-    const a = r === "static-empty", e = r === "clickable", f = a ? "–" : s;
-    return p({
-      render: n,
-      ref: u,
+}, N = p.forwardRef(
+  ({
+    className: d,
+    variant: r = "static",
+    label: s,
+    value: n,
+    icon: b,
+    selected: a,
+    render: o,
+    ...u
+  }, v) => {
+    const i = r === "static-empty", e = r === "clickable", f = i ? "–" : n;
+    return x({
+      render: o,
+      ref: v,
       defaultTagName: e ? "button" : "div",
       props: m(
         {
-          className: o(h({ variant: r }), t),
-          ...e ? { type: "button" } : {},
-          children: /* @__PURE__ */ i(v, { children: [
-            /* @__PURE__ */ l("span", { className: "text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]", children: c }),
-            /* @__PURE__ */ i("span", { className: "flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0", children: [
-              !a && d,
-              /* @__PURE__ */ l(
+          className: c(y({ variant: r }), d),
+          ...e && !o ? {
+            type: "button",
+            ...a !== void 0 ? { "aria-pressed": a } : {}
+          } : {},
+          ...e ? { "data-selected": a ? "true" : void 0 } : {},
+          children: /* @__PURE__ */ l(g, { children: [
+            /* @__PURE__ */ t("span", { className: "text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]", children: s }),
+            /* @__PURE__ */ l("span", { className: "flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0", children: [
+              !i && b,
+              /* @__PURE__ */ t(
                 "span",
                 {
-                  className: o(
+                  className: c(
                     "text-2xl font-semibold leading-8",
-                    y[r ?? "static"]
+                    k[r ?? "static"]
                   ),
                   children: f
                 }
@@ -50,14 +63,14 @@ const h = x(
             ] })
           ] })
         },
-        b
+        u
       )
     });
   }
 );
-k.displayName = "CardFilter";
+N.displayName = "CardFilter";
 export {
-  k as CardFilter,
-  h as cardFilterVariants
+  N as CardFilter,
+  y as cardFilterVariants
 };
 //# sourceMappingURL=card-filter.js.map

package/dist/components/ui/card-filter/card-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-filter.js","sources":["../../../../src/components/ui/card-filter/card-filter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"CardFilter\" component: a compact stat/filter card — a caption\n// `label` above a content row (optional `icon` + a large `value`). `variant` maps\n// to the Figma `variant` property:\n//   • `static`        — non-interactive; value in `--ui-card-filter-static-value-color-idle`.\n//   • `static-empty`  — non-interactive placeholder; no icon, an em-dash value in\n//                       `--ui-card-filter-static-value-color-disabled`.\n//   • `clickable`     — interactive (renders a <button>); value in\n//                       `--ui-card-filter-clickable-value-color`, plus hover / active /\n//                       focus-visible treatments.\n// Per the Figma constraint (\"if an element is not clickable, it cannot have a state\n// other than Idle\") only `clickable` carries the hover / active / focus state\n// classes — `static` / `static-empty` stay idle. Geometry (224px width, 64px min\n// height, 8px radius, 16/8px padding, 8px content gap, 1px border) and every state\n// color come from the `--ui-card-filter-*` tokens. Focus: a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the rest of the library.\nconst cardFilterVariants = cva(\n  'inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors',\n  {\n    variants: {\n      variant: {\n        static: '',\n        'static-empty': '',\n        clickable:\n          'cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'static',\n    },\n  }\n);\n\n// The value color is the one token that varies by variant rather than by state.\nconst valueColorClass: Record<\n  NonNullable<VariantProps<typeof cardFilterVariants>['variant']>,\n  string\n> = {\n  static: 'text-[var(--ui-card-filter-static-value-color-idle)]',\n  'static-empty': 'text-[var(--ui-card-filter-static-value-color-disabled)]',\n  clickable: 'text-[var(--ui-card-filter-clickable-value-color)]',\n};\n\nexport interface CardFilterProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children'>,\n    VariantProps<typeof cardFilterVariants> {\n  /** Caption shown above the value. */\n  label?: React.ReactNode;\n  /** The large value. Ignored for `variant=\"static-empty\"` (shows an em-dash). */\n  value?: React.ReactNode;\n  /** Optional leading icon (16px) rendered before the value. Hidden for `static-empty`. */\n  icon?: React.ReactNode;\n  /**\n   * Replace the rendered element (`<button>` for `clickable`, otherwise `<div>`)\n   * with another element or component (Base UI composition) — e.g. a router link\n   * for a clickable filter. The component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A compact stat/filter card: a label, an optional icon, and a prominent value.\n * Use `variant=\"clickable\"` for a filter the user can activate (renders a button);\n * `static` / `static-empty` are presentational.\n */\nconst CardFilter = React.forwardRef<HTMLElement, CardFilterProps>(\n  (\n    { className, variant = 'static', label, value, icon, render, ...props },\n    ref\n  ) => {\n    const isEmpty = variant === 'static-empty';\n    const isClickable = variant === 'clickable';\n    const displayValue = isEmpty ? '–' : value;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: isClickable ? 'button' : 'div',\n      props: mergeProps<'button'>(\n        {\n          className: cn(cardFilterVariants({ variant }), className),\n          ...(isClickable ? { type: 'button' as const } : {}),\n          children: (\n            <>\n              <span className=\"text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]\">\n                {label}\n              </span>\n              <span className=\"flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0\">\n                {!isEmpty && icon}\n                <span\n                  className={cn(\n                    'text-2xl font-semibold leading-8',\n                    valueColorClass[variant ?? 'static']\n                  )}\n                >\n                  {displayValue}\n                </span>\n              </span>\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nCardFilter.displayName = 'CardFilter';\n\nexport { CardFilter, cardFilterVariants };\n"],"names":["cardFilterVariants","cva","valueColorClass","CardFilter","React","className","variant","label","value","icon","render","props","ref","isEmpty","isClickable","displayValue","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AAsBA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAGMC,IAGF;AAAA,EACF,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AACb,GAyBMC,IAAaC,EAAM;AAAA,EACvB,CACE,EAAE,WAAAC,GAAW,SAAAC,IAAU,UAAU,OAAAC,GAAO,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,EAAA,GAChEC,MACG;AACH,UAAMC,IAAUP,MAAY,gBACtBQ,IAAcR,MAAY,aAC1BS,IAAeF,IAAU,MAAML;AAErC,WAAOQ,EAAU;AAAA,MACf,QAAAN;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgBE,IAAc,WAAW;AAAA,MACzC,OAAOG;AAAA,QACL;AAAA,UACE,WAAWC,EAAGlB,EAAmB,EAAE,SAAAM,EAAA,CAAS,GAAGD,CAAS;AAAA,UACxD,GAAIS,IAAc,EAAE,MAAM,SAAA,IAAsB,CAAA;AAAA,UAChD,UACE,gBAAAK,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,iFACb,UAAAd,GACH;AAAA,YACA,gBAAAY,EAAC,QAAA,EAAK,WAAU,oGACb,UAAA;AAAA,cAAA,CAACN,KAAWJ;AAAA,cACb,gBAAAY;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACT;AAAA,oBACAhB,EAAgBI,KAAW,QAAQ;AAAA,kBAAA;AAAA,kBAGpC,UAAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,QAGJJ;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAR,EAAW,cAAc;"}
+{"version":3,"file":"card-filter.js","sources":["../../../../src/components/ui/card-filter/card-filter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"CardFilter\" component: a compact stat/filter card — a caption\n// `label` above a content row (optional `icon` + a large `value`). `variant` maps\n// to the Figma `variant` property:\n//   • `static`        — non-interactive; value in `--ui-card-filter-static-value-color-idle`.\n//   • `static-empty`  — non-interactive placeholder; no icon, an em-dash value in\n//                       `--ui-card-filter-static-value-color-disabled`.\n//   • `clickable`     — interactive (renders a <button>); value in\n//                       `--ui-card-filter-clickable-value-color`, plus hover / active /\n//                       focus-visible treatments.\n// Per the Figma constraint (\"if an element is not clickable, it cannot have a state\n// other than Idle\") only `clickable` carries the hover / active / focus state\n// classes — `static` / `static-empty` stay idle. Geometry (224px width, 64px min\n// height, 8px radius, 16/8px padding, 8px content gap, 1px border) and every state\n// color come from the `--ui-card-filter-*` tokens. Focus: a 3px `--ui-focus-primary`\n// ring flush to the edge (no offset), matching the rest of the library.\nconst cardFilterVariants = cva(\n  'inline-flex w-[224px] min-h-[var(--ui-card-filter-global-container-height)] flex-col items-start rounded-[var(--ui-card-filter-global-container-border-radius)] border-[length:var(--ui-card-filter-global-container-border-width)] border-solid border-[color:var(--ui-card-filter-global-border-color-idle)] bg-[var(--ui-card-filter-global-container-color-idle)] px-[var(--ui-card-filter-global-container-padding-x)] py-[var(--ui-card-filter-global-container-padding-y)] transition-colors',\n  {\n    variants: {\n      variant: {\n        static: '',\n        'static-empty': '',\n        clickable:\n          'cursor-pointer outline-none hover:border-[color:var(--ui-card-filter-global-border-color-hover)] hover:bg-[var(--ui-card-filter-global-container-color-hover)] active:border-[color:var(--ui-card-filter-global-border-color-active)] active:bg-[var(--ui-card-filter-global-container-color-active)] focus-visible:border-[color:var(--ui-card-filter-global-border-color-focused)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[color:var(--ui-card-filter-global-border-color-active)] data-[selected=true]:bg-[var(--ui-card-filter-global-container-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'static',\n    },\n  }\n);\n\n// The value color is the one token that varies by variant rather than by state.\nconst valueColorClass: Record<\n  NonNullable<VariantProps<typeof cardFilterVariants>['variant']>,\n  string\n> = {\n  static: 'text-[var(--ui-card-filter-static-value-color-idle)]',\n  'static-empty': 'text-[var(--ui-card-filter-static-value-color-disabled)]',\n  clickable: 'text-[var(--ui-card-filter-clickable-value-color)]',\n};\n\nexport interface CardFilterProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, 'children'>,\n    VariantProps<typeof cardFilterVariants> {\n  /** Caption shown above the value. */\n  label?: React.ReactNode;\n  /** The large value. Ignored for `variant=\"static-empty\"` (shows an em-dash). */\n  value?: React.ReactNode;\n  /** Optional leading icon (16px) rendered before the value. Hidden for `static-empty`. */\n  icon?: React.ReactNode;\n  /**\n   * `clickable` only — applies the selected (active) styling and exposes the\n   * card as a pressed toggle (`aria-pressed`). Controlled only.\n   */\n  selected?: boolean;\n  /**\n   * Replace the rendered element (`<button>` for `clickable`, otherwise `<div>`)\n   * with another element or component (Base UI composition) — e.g. a router link\n   * for a clickable filter. The component's props and class names are merged onto it.\n   */\n  render?: useRender.RenderProp;\n}\n\n/**\n * A compact stat/filter card: a label, an optional icon, and a prominent value.\n * Use `variant=\"clickable\"` for a filter the user can activate (renders a button);\n * `static` / `static-empty` are presentational.\n */\nconst CardFilter = React.forwardRef<HTMLElement, CardFilterProps>(\n  (\n    {\n      className,\n      variant = 'static',\n      label,\n      value,\n      icon,\n      selected,\n      render,\n      ...props\n    },\n    ref\n  ) => {\n    const isEmpty = variant === 'static-empty';\n    const isClickable = variant === 'clickable';\n    const displayValue = isEmpty ? '–' : value;\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: isClickable ? 'button' : 'div',\n      props: mergeProps<'button'>(\n        {\n          className: cn(cardFilterVariants({ variant }), className),\n          ...(isClickable && !render\n            ? {\n                type: 'button' as const,\n                ...(selected !== undefined ? { 'aria-pressed': selected } : {}),\n              }\n            : {}),\n          ...(isClickable ? { 'data-selected': selected ? 'true' : undefined } : {}),\n          children: (\n            <>\n              <span className=\"text-xs font-normal leading-4 text-[var(--ui-card-filter-global-label-color)]\">\n                {label}\n              </span>\n              <span className=\"flex items-center gap-[var(--ui-card-filter-global-content-gap)] [&_svg]:size-4 [&_svg]:shrink-0\">\n                {!isEmpty && icon}\n                <span\n                  className={cn(\n                    'text-2xl font-semibold leading-8',\n                    valueColorClass[variant ?? 'static']\n                  )}\n                >\n                  {displayValue}\n                </span>\n              </span>\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nCardFilter.displayName = 'CardFilter';\n\nexport { CardFilter, cardFilterVariants };\n"],"names":["cardFilterVariants","cva","valueColorClass","CardFilter","React","className","variant","label","value","icon","selected","render","props","ref","isEmpty","isClickable","displayValue","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AAsBA,MAAMA,IAAqBC;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,WACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAGMC,IAGF;AAAA,EACF,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,WAAW;AACb,GA8BMC,IAAaC,EAAM;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUR,MAAY,gBACtBS,IAAcT,MAAY,aAC1BU,IAAeF,IAAU,MAAMN;AAErC,WAAOS,EAAU;AAAA,MACf,QAAAN;AAAA,MACA,KAAAE;AAAA,MACA,gBAAgBE,IAAc,WAAW;AAAA,MACzC,OAAOG;AAAA,QACL;AAAA,UACE,WAAWC,EAAGnB,EAAmB,EAAE,SAAAM,EAAA,CAAS,GAAGD,CAAS;AAAA,UACxD,GAAIU,KAAe,CAACJ,IAChB;AAAA,YACE,MAAM;AAAA,YACN,GAAID,MAAa,SAAY,EAAE,gBAAgBA,EAAA,IAAa,CAAA;AAAA,UAAC,IAE/D,CAAA;AAAA,UACJ,GAAIK,IAAc,EAAE,iBAAiBL,IAAW,SAAS,OAAA,IAAc,CAAA;AAAA,UACvE,UACE,gBAAAU,EAAAC,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,iFACb,UAAAf,GACH;AAAA,YACA,gBAAAa,EAAC,QAAA,EAAK,WAAU,oGACb,UAAA;AAAA,cAAA,CAACN,KAAWL;AAAA,cACb,gBAAAa;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWH;AAAA,oBACT;AAAA,oBACAjB,EAAgBI,KAAW,QAAQ;AAAA,kBAAA;AAAA,kBAGpC,UAAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,QAGJJ;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAT,EAAW,cAAc;"}

package/dist/components/ui/chart-state/chart-state.js

@@ -0,0 +1,42 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as s from "react";
+import { InboxIcon as m, CircleWarningIcon as c } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as p } from "../../../lib/utils.js";
+import { Spinner as d } from "../spinner/spinner.js";
+const f = {
+  loading: "Data is loading…",
+  empty: "No data found",
+  error: "Something went wrong"
+}, g = s.forwardRef(
+  ({ className: o, state: r, message: i, action: t, ...a }, n) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: n,
+      className: p(
+        "flex size-full min-h-32 flex-col items-center justify-center gap-2 text-center text-sm leading-6 text-foreground",
+        o
+      ),
+      ...a,
+      role: r === "error" ? "alert" : "status",
+      "aria-live": r === "error" ? "assertive" : "polite",
+      children: [
+        r === "loading" && /* @__PURE__ */ e(d, { size: "lg", "aria-hidden": !0 }),
+        r === "empty" && /* @__PURE__ */ e(m, { size: 24, className: "text-[var(--ui-glyph-on-status-info)]" }),
+        r === "error" && /* @__PURE__ */ e(
+          c,
+          {
+            size: 24,
+            className: "text-[var(--ui-glyph-on-status-warning)]"
+          }
+        ),
+        /* @__PURE__ */ e("p", { children: i ?? f[r] }),
+        r === "error" && t
+      ]
+    }
+  )
+);
+g.displayName = "ChartState";
+export {
+  g as ChartState
+};
+//# sourceMappingURL=chart-state.js.map

package/dist/components/ui/chart-state/chart-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-state.js","sources":["../../../../src/components/ui/chart-state/chart-state.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CircleWarningIcon,\n  InboxIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Spinner } from '../spinner';\n\n// A shared loading / empty / error placeholder for the chart types. A chart can\n// only render once recharts' `ResponsiveContainer` has data and real dimensions,\n// so every type needs the same \"there's nothing to plot yet\" surface — this is\n// that surface, dropped in place of the chart inside the same sized slot.\n//\n// Ported from the Figma InputSelect dropdown states (the reference the task\n// points at) and kept visually in step with the shipped `InputSelectStatus`\n// sibling: the empty / error states use the same 24px glyph + `text-sm` label\n// and the same `--ui-glyph-on-status-*` icon tokens. (Loading uses the shared\n// `Spinner` — brand blue, larger — not the sibling's inline gray ring.) No\n// `--ui-chart-*` tier exists yet, so it themes from existing semantic tokens\n// directly:\n//   • label      -> text-foreground (--ui-text-on-surface-primary)\n//   • empty icon  -> --ui-glyph-on-status-info\n//   • error icon  -> --ui-glyph-on-status-warning\n//   • loading      -> the shared Spinner (brand action blue)\n// The generic full-page `Empty` component is the larger, page-level sibling;\n// this one is compact and fills a chart slot.\n\nconst DEFAULT_MESSAGE: Record<ChartStateProps['state'], string> = {\n  loading: 'Data is loading…',\n  empty: 'No data found',\n  error: 'Something went wrong',\n};\n\nexport interface ChartStateProps\n  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {\n  /** Which placeholder to show. Drives the leading glyph and default label. */\n  state: 'loading' | 'empty' | 'error';\n  /** Overrides the default label for the current `state`. */\n  message?: string;\n  /** Trailing action (e.g. a \"Try again\" button) — shown for `error` only. */\n  action?: React.ReactNode;\n}\n\nconst ChartState = React.forwardRef<HTMLDivElement, ChartStateProps>(\n  ({ className, state, message, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex size-full min-h-32 flex-col items-center justify-center gap-2 text-center text-sm leading-6 text-foreground',\n        className\n      )}\n      {...props}\n      // The status/alert live-region contract is intrinsic to the state, so it\n      // wins over any consumer-passed a11y prop (spread above). No `aria-busy`\n      // here: this element IS the live region, and some AT defer announcing a\n      // busy region's content until busy clears — but this placeholder is\n      // unmounted (swapped for the chart) rather than un-busied, so a busy flag\n      // would risk swallowing the \"Data is loading…\" announcement. A consumer\n      // that wants a busy signal sets `aria-busy` on the chart-slot container.\n      role={state === 'error' ? 'alert' : 'status'}\n      aria-live={state === 'error' ? 'assertive' : 'polite'}\n    >\n      {/* aria-hidden: the root is already the loading live region (+ the label),\n          so the Spinner's own role=\"status\"/sr-only would double-announce. */}\n      {state === 'loading' && <Spinner size=\"lg\" aria-hidden />}\n      {state === 'empty' && (\n        <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />\n      )}\n      {state === 'error' && (\n        <CircleWarningIcon\n          size={24}\n          className=\"text-[var(--ui-glyph-on-status-warning)]\"\n        />\n      )}\n      <p>{message ?? DEFAULT_MESSAGE[state]}</p>\n      {state === 'error' && action}\n    </div>\n  )\n);\nChartState.displayName = 'ChartState';\n\nexport { ChartState };\n"],"names":["DEFAULT_MESSAGE","ChartState","React","className","state","message","action","props","ref","jsxs","cn","jsx","Spinner","InboxIcon","CircleWarningIcon"],"mappings":";;;;;AA8BA,MAAMA,IAA4D;AAAA,EAChE,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT,GAYMC,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,SAAAC,GAAS,QAAAC,GAAQ,GAAGC,EAAA,GAASC,MAChD,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACAP;AAAA,MAAA;AAAA,MAED,GAAGI;AAAA,MAQJ,MAAMH,MAAU,UAAU,UAAU;AAAA,MACpC,aAAWA,MAAU,UAAU,cAAc;AAAA,MAI5C,UAAA;AAAA,QAAAA,MAAU,aAAa,gBAAAO,EAACC,GAAA,EAAQ,MAAK,MAAK,eAAW,IAAC;AAAA,QACtDR,MAAU,WACT,gBAAAO,EAACE,KAAU,MAAM,IAAI,WAAU,yCAAwC;AAAA,QAExET,MAAU,WACT,gBAAAO;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,gBAAAH,EAAC,KAAA,EAAG,UAAAN,KAAWL,EAAgBI,CAAK,GAAE;AAAA,QACrCA,MAAU,WAAWE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5B;AACAL,EAAW,cAAc;"}

package/dist/components/ui/chip/chip.js

@@ -4,12 +4,12 @@ import { TimesIcon as h } from "@acronis-platform/icons-react/stroke-mono";
 import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as m } from "../../../lib/utils.js";
 const f = g(
-  "inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chip-global-icon-color)]",
+  "inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]",
   {
     variants: {
       variant: {
         removable: "text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]",
-        selectable: "cursor-pointer text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]"
+        selectable: "text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]"
       }
     },
     defaultVariants: {
@@ -19,23 +19,23 @@ const f = g(
 ), x = d.forwardRef(
   ({
     className: c,
-    variant: i = "removable",
+    variant: e = "removable",
     icon: t,
     selected: a,
     onRemove: b,
     removeLabel: s = "Remove",
-    children: u,
-    onKeyDown: e,
-    ...n
+    children: n,
+    onKeyDown: i,
+    ...u
   }, v) => {
-    const l = i === "selectable";
+    const l = e === "selectable";
     return /* @__PURE__ */ p(
       "div",
       {
         ref: v,
-        className: m(f({ variant: i }), c),
+        className: m(f({ variant: e }), c),
         onKeyDown: (r) => {
-          l && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), e == null || e(r);
+          l && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click()), i == null || i(r);
         },
         ...l ? {
           role: "button",
@@ -43,17 +43,17 @@ const f = g(
           "aria-pressed": !!a,
           "data-selected": a ? "true" : void 0
         } : {},
-        ...n,
+        ...u,
         children: [
           t,
-          /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: u }),
-          i === "removable" && /* @__PURE__ */ o(
+          /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: n }),
+          e === "removable" && /* @__PURE__ */ o(
             "button",
             {
               type: "button",
               "aria-label": s,
               onClick: b,
-              className: "-me-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none",
+              className: "-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none",
               children: /* @__PURE__ */ o(h, {})
             }
           )

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

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. The container fill/border/label/icon all wire to the dedicated\n// `--ui-chip-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n  \"inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:text-[var(--ui-chip-global-icon-color)]\",\n  {\n    variants: {\n      variant: {\n        removable:\n          'text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n        selectable:\n          'cursor-pointer text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'removable',\n    },\n  }\n);\n\nexport interface ChipProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof chipVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n  /**\n   * `selectable` only — applies the selected (active) styling and exposes the\n   * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n   */\n  selected?: boolean;\n  /** `removable` only — called when the trailing remove (×) button is pressed. */\n  onRemove?: () => void;\n  /** Accessible label for the remove button (`removable`). */\n  removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      className,\n      variant = 'removable',\n      icon,\n      selected,\n      onRemove,\n      removeLabel = 'Remove',\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const selectable = variant === 'selectable';\n    return (\n      <div\n        ref={ref}\n        className={cn(chipVariants({ variant }), className)}\n        onKeyDown={(event) => {\n          // The selectable chip is a div with button semantics; mirror native\n          // button activation so Enter/Space fire its click handler.\n          if (selectable && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            event.currentTarget.click();\n          }\n          onKeyDown?.(event);\n        }}\n        {...(selectable\n          ? {\n              role: 'button',\n              tabIndex: 0,\n              'aria-pressed': Boolean(selected),\n              'data-selected': selected ? 'true' : undefined,\n            }\n          : {})}\n        {...props}\n      >\n        {icon}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {variant === 'removable' && (\n          <button\n            type=\"button\"\n            aria-label={removeLabel}\n            onClick={onRemove}\n            className=\"-me-1 flex shrink-0 items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n          >\n            <TimesIcon />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}
+{"version":3,"file":"chip.js","sources":["../../../../src/components/ui/chip/chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact, interactive label. `variant` mirrors the Figma \"Chip\" `type`:\n// `removable` carries a trailing × (remove) button; `selectable` toggles a\n// selected state. The container fill/border/label/icon all wire to the dedicated\n// `--ui-chip-*` tier from @acronis-platform/tokens-pd; geometry (height, gap,\n// padding, min-width, radius, border width, icon size) is tokenized too.\n// The Figma `state` enum (idle / hover / active / focused) maps to interaction\n// states, not props: `hover:` → the hover tokens, `:focus`/`focus-visible` → the\n// 3px `--ui-focus-primary` ring, and the `active` look is the pressed state for\n// `removable` (`active:`) and the selected state for `selectable`\n// (`data-[selected]`, driven by the `selected` prop).\nconst chipVariants = cva(\n  \"inline-flex h-[var(--ui-chip-global-box-height)] min-w-[var(--ui-chip-global-box-width-min)] cursor-pointer items-center justify-center gap-[var(--ui-chip-global-box-gap)] rounded-[var(--ui-chip-global-border-radius)] border-[length:var(--ui-chip-global-border-width)] border-solid border-[var(--ui-chip-global-border-color-idle)] bg-[var(--ui-chip-global-box-color-idle)] px-[var(--ui-chip-global-box-padding-x)] text-sm leading-6 hover:border-[var(--ui-chip-global-border-color-hover)] hover:bg-[var(--ui-chip-global-box-color-hover)] [&_svg]:size-[var(--ui-chip-global-icon-size)] [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:text-[var(--ui-chip-global-icon-color)]\",\n  {\n    variants: {\n      variant: {\n        removable:\n          'text-[var(--ui-chip-removable-label-color)] focus-within:outline-none focus-within:ring-[3px] focus-within:ring-[var(--ui-focus-primary)] active:border-[var(--ui-chip-global-border-color-active)] active:bg-[var(--ui-chip-global-box-color-active)]',\n        selectable:\n          'text-[var(--ui-chip-selectable-label-color)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[selected=true]:border-[var(--ui-chip-global-border-color-active)] data-[selected=true]:bg-[var(--ui-chip-global-box-color-active)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'removable',\n    },\n  }\n);\n\nexport interface ChipProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof chipVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n  /**\n   * `selectable` only — applies the selected (active) styling and exposes the\n   * chip as a pressed toggle (`role=\"button\"` + `aria-pressed`).\n   */\n  selected?: boolean;\n  /** `removable` only — called when the trailing remove (×) button is pressed. */\n  onRemove?: () => void;\n  /** Accessible label for the remove button (`removable`). */\n  removeLabel?: string;\n}\n\nconst Chip = React.forwardRef<HTMLDivElement, ChipProps>(\n  (\n    {\n      className,\n      variant = 'removable',\n      icon,\n      selected,\n      onRemove,\n      removeLabel = 'Remove',\n      children,\n      onKeyDown,\n      ...props\n    },\n    ref\n  ) => {\n    const selectable = variant === 'selectable';\n    return (\n      <div\n        ref={ref}\n        className={cn(chipVariants({ variant }), className)}\n        onKeyDown={(event) => {\n          // The selectable chip is a div with button semantics; mirror native\n          // button activation so Enter/Space fire its click handler.\n          if (selectable && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            event.currentTarget.click();\n          }\n          onKeyDown?.(event);\n        }}\n        {...(selectable\n          ? {\n              role: 'button',\n              tabIndex: 0,\n              'aria-pressed': Boolean(selected),\n              'data-selected': selected ? 'true' : undefined,\n            }\n          : {})}\n        {...props}\n      >\n        {icon}\n        <span className=\"min-w-0 truncate\">{children}</span>\n        {variant === 'removable' && (\n          <button\n            type=\"button\"\n            aria-label={removeLabel}\n            onClick={onRemove}\n            className=\"-me-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none focus-visible:outline-none\"\n          >\n            <TimesIcon />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nChip.displayName = 'Chip';\n\nexport { Chip, chipVariants };\n"],"names":["chipVariants","cva","Chip","React","className","variant","icon","selected","onRemove","removeLabel","children","onKeyDown","props","ref","selectable","jsxs","cn","event","jsx","TimesIcon"],"mappings":";;;;;AAgBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,WACE;AAAA,QACF,YACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAmBMC,IAAOC,EAAM;AAAA,EACjB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAaT,MAAY;AAC/B,WACE,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,WAAWG,EAAGhB,EAAa,EAAE,SAAAK,EAAA,CAAS,GAAGD,CAAS;AAAA,QAClD,WAAW,CAACa,MAAU;AAGpB,UAAIH,MAAeG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACxDA,EAAM,eAAA,GACNA,EAAM,cAAc,MAAA,IAEtBN,KAAA,QAAAA,EAAYM;AAAA,QACd;AAAA,QACC,GAAIH,IACD;AAAA,UACE,MAAM;AAAA,UACN,UAAU;AAAA,UACV,gBAAgB,EAAQP;AAAA,UACxB,iBAAiBA,IAAW,SAAS;AAAA,QAAA,IAEvC,CAAA;AAAA,QACH,GAAGK;AAAA,QAEH,UAAA;AAAA,UAAAN;AAAA,UACD,gBAAAY,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAR,EAAA,CAAS;AAAA,UAC5CL,MAAY,eACX,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAYT;AAAA,cACZ,SAASD;AAAA,cACT,WAAU;AAAA,cAEV,4BAACW,GAAA,CAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAjB,EAAK,cAAc;"}

package/dist/components/ui/composed-chart/composed-chart.js

@@ -0,0 +1,107 @@
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import * as K from "react";
+import { ComposedChart as L, CartesianGrid as T, XAxis as N, YAxis as j, Bar as w, Area as B, Line as $ } from "recharts";
+import { cn as z } from "../../../lib/utils.js";
+import { ChartContainer as G, ChartTooltip as M, ChartTooltipContent as W, ChartLegend as X, ChartLegendContent as Y } from "../chart/chart.js";
+const _ = K.forwardRef(
+  ({
+    className: l,
+    config: s,
+    data: d,
+    series: f,
+    xKey: m,
+    xAxisLabel: o,
+    yAxisLabel: r,
+    yUnit: c,
+    curve: n = "monotone",
+    barRadius: a = 4,
+    fillOpacity: p = 0.3,
+    showGrid: y = !0,
+    showTooltip: h = !0,
+    showLegend: C = !0,
+    tooltipContent: k,
+    ...v
+  }, u) => {
+    const A = o ? { value: o, position: "insideBottom", offset: 0 } : void 0, g = r ? {
+      value: r,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0;
+    return /* @__PURE__ */ e("div", { ref: u, className: z(l), ...v, children: /* @__PURE__ */ e(
+      G,
+      {
+        config: s,
+        className: "size-full [&_.recharts-label]:fill-foreground",
+        children: /* @__PURE__ */ x(L, { data: d, children: [
+          y && /* @__PURE__ */ e(T, { vertical: !1 }),
+          /* @__PURE__ */ e(
+            N,
+            {
+              dataKey: m,
+              type: "category",
+              tickLine: !1,
+              axisLine: !1,
+              tickMargin: 8,
+              height: o ? 48 : void 0,
+              label: A
+            }
+          ),
+          /* @__PURE__ */ e(
+            j,
+            {
+              type: "number",
+              tickLine: !1,
+              axisLine: !1,
+              unit: c,
+              width: r ? 72 : void 0,
+              label: g
+            }
+          ),
+          h && /* @__PURE__ */ e(M, { content: k ?? /* @__PURE__ */ e(W, {}) }),
+          C && /* @__PURE__ */ e(X, { content: /* @__PURE__ */ e(Y, {}) }),
+          f.map((t) => {
+            const i = `var(--color-${t.key})`;
+            return t.type === "bar" ? /* @__PURE__ */ e(
+              w,
+              {
+                dataKey: t.key,
+                fill: i,
+                radius: a > 0 ? [a, a, 0, 0] : void 0,
+                isAnimationActive: !1
+              },
+              t.key
+            ) : t.type === "area" ? /* @__PURE__ */ e(
+              B,
+              {
+                type: n,
+                dataKey: t.key,
+                stroke: i,
+                fill: i,
+                fillOpacity: p,
+                isAnimationActive: !1
+              },
+              t.key
+            ) : /* @__PURE__ */ e(
+              $,
+              {
+                type: n,
+                dataKey: t.key,
+                stroke: i,
+                strokeWidth: 2,
+                dot: !1,
+                isAnimationActive: !1
+              },
+              t.key
+            );
+          })
+        ] })
+      }
+    ) });
+  }
+);
+_.displayName = "ComposedChart";
+export {
+  _ as ComposedChart
+};
+//# sourceMappingURL=composed-chart.js.map

package/dist/components/ui/composed-chart/composed-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"composed-chart.js","sources":["../../../../src/components/ui/composed-chart/composed-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Area,\n  Bar,\n  CartesianGrid,\n  ComposedChart as RechartsComposedChart,\n  Line,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\n\n// A typed recharts composition over the shared `Chart` primitives. A composed\n// chart's defining trait is that each series picks its own render type\n// (bar / line / area) over one shared category axis — so, like ScatterChart,\n// there's no single visual \"mode\" to model as a CVA variant (the skill's\n// \"per-series type\"). The variation lives in the `series[].type` list instead.\nexport type ComposedSeriesType = 'bar' | 'line' | 'area';\n\nexport interface ComposedSeries {\n  /** Column key to plot — must match a `config` entry; drives its `--color-<key>` paint. */\n  key: string;\n  /** How this series renders. */\n  type: ComposedSeriesType;\n}\n\nexport interface ComposedChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Row-per-category data. Each object holds `xKey` + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `color`, keyed by `series[].key` (imported from\n   * the shared `Chart` primitives). Turned into `--color-<key>` custom\n   * properties. Colors are caller-supplied — reference an existing semantic\n   * `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot, each `{ key, type }` — one bar/line/area per entry. Each key must exist in `config` and every data row. */\n  series: ComposedSeries[];\n  /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n  xKey: string;\n  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n  yUnit?: string;\n  /** Interpolation for the line and area series. */\n  curve?: 'linear' | 'monotone' | 'step';\n  /** Corner radius on the growing end of bar series. */\n  barRadius?: number;\n  /** Flat-fill opacity for area series. */\n  fillOpacity?: number;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n   * `indicator` — to customize formatting, per-series rows, or extra fields\n   * without composing recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst ComposedChart = React.forwardRef<HTMLDivElement, ComposedChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      series,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      curve = 'monotone',\n      barRadius = 4,\n      fillOpacity = 0.3,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Axis titles: the X title sits below the ticks; the Y title is rotated in\n    // the left gutter. Passed to recharts' native `label` (themed via the\n    // `.recharts-label` fill selector on the container).\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsComposedChart data={data as readonly unknown[]}>\n            {showGrid && <CartesianGrid vertical={false} />}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {/* Rendered in the caller's `series` order — recharts paints children\n                back-to-front, so later entries sit on top. Order them so thin\n                marks (a line) come after the areas/bars they should overlay. */}\n            {series.map((s) => {\n              const color = `var(--color-${s.key})`;\n              if (s.type === 'bar') {\n                return (\n                  <Bar\n                    key={s.key}\n                    dataKey={s.key}\n                    fill={color}\n                    radius={\n                      barRadius > 0\n                        ? [barRadius, barRadius, 0, 0]\n                        : undefined\n                    }\n                    isAnimationActive={false}\n                  />\n                );\n              }\n              if (s.type === 'area') {\n                return (\n                  <Area\n                    key={s.key}\n                    type={curve}\n                    dataKey={s.key}\n                    stroke={color}\n                    fill={color}\n                    fillOpacity={fillOpacity}\n                    isAnimationActive={false}\n                  />\n                );\n              }\n              return (\n                <Line\n                  key={s.key}\n                  type={curve}\n                  dataKey={s.key}\n                  stroke={color}\n                  strokeWidth={2}\n                  dot={false}\n                  isAnimationActive={false}\n                />\n              );\n            })}\n          </RechartsComposedChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nComposedChart.displayName = 'ComposedChart';\n\nexport { ComposedChart };\n"],"names":["ComposedChart","React","className","config","data","series","xKey","xAxisLabel","yAxisLabel","yUnit","curve","barRadius","fillOpacity","showGrid","showTooltip","showLegend","tooltipContent","props","ref","xAxisTitle","yAxisTitle","jsx","cn","ChartContainer","jsxs","RechartsComposedChart","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","color","Bar","Area","Line"],"mappings":";;;;;AA4EA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAaZ,IACf,EAAE,OAAOA,GAAY,UAAU,gBAAyB,QAAQ,EAAA,IAChE,QACEa,IAAaZ,IACf;AAAA,MACE,OAAOA;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAA;AAAA,IAAkB,IAEzC;AAEJ,WACE,gBAAAa,EAAC,SAAI,KAAAH,GAAU,WAAWI,EAAGpB,CAAS,GAAI,GAAGe,GAC3C,UAAA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAApB;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAqB,EAACC,KAAsB,MAAArB,GACpB,UAAA;AAAA,UAAAS,KAAY,gBAAAQ,EAACK,GAAA,EAAc,UAAU,GAAA,CAAO;AAAA,UAC7C,gBAAAL;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,SAASrB;AAAA,cACT,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,QAAQC,IAAa,KAAK;AAAA,cAC1B,OAAOY;AAAA,YAAA;AAAA,UAAA;AAAA,UAET,gBAAAE;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,UAAU;AAAA,cACV,UAAU;AAAA,cACV,MAAMnB;AAAA,cACN,OAAOD,IAAa,KAAK;AAAA,cACzB,OAAOY;AAAA,YAAA;AAAA,UAAA;AAAA,UAERN,KACC,gBAAAO,EAACQ,GAAA,EAAa,SAASb,KAAkB,gBAAAK,EAACS,KAAoB,GAAI;AAAA,UAEnEf,KAAc,gBAAAM,EAACU,GAAA,EAAY,SAAS,gBAAAV,EAACW,KAAmB,GAAI;AAAA,UAI5D3B,EAAO,IAAI,CAAC4B,MAAM;AACjB,kBAAMC,IAAQ,eAAeD,EAAE,GAAG;AAClC,mBAAIA,EAAE,SAAS,QAEX,gBAAAZ;AAAA,cAACc;AAAA,cAAA;AAAA,gBAEC,SAASF,EAAE;AAAA,gBACX,MAAMC;AAAA,gBACN,QACEvB,IAAY,IACR,CAACA,GAAWA,GAAW,GAAG,CAAC,IAC3B;AAAA,gBAEN,mBAAmB;AAAA,cAAA;AAAA,cARdsB,EAAE;AAAA,YAAA,IAYTA,EAAE,SAAS,SAEX,gBAAAZ;AAAA,cAACe;AAAA,cAAA;AAAA,gBAEC,MAAM1B;AAAA,gBACN,SAASuB,EAAE;AAAA,gBACX,QAAQC;AAAA,gBACR,MAAMA;AAAA,gBACN,aAAAtB;AAAA,gBACA,mBAAmB;AAAA,cAAA;AAAA,cANdqB,EAAE;AAAA,YAAA,IAWX,gBAAAZ;AAAA,cAACgB;AAAA,cAAA;AAAA,gBAEC,MAAM3B;AAAA,gBACN,SAASuB,EAAE;AAAA,gBACX,QAAQC;AAAA,gBACR,aAAa;AAAA,gBACb,KAAK;AAAA,gBACL,mBAAmB;AAAA,cAAA;AAAA,cANdD,EAAE;AAAA,YAAA;AAAA,UASb,CAAC;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AACAjC,EAAc,cAAc;"}

package/dist/components/ui/confidence-cone/confidence-cone.js

@@ -0,0 +1,195 @@
+import { jsx as e, jsxs as M } from "react/jsx-runtime";
+import * as c from "react";
+import { ComposedChart as X, CartesianGrid as Y, XAxis as z, YAxis as G, ReferenceArea as S, ReferenceLine as q, Area as T, Line as F } from "recharts";
+import { cn as H } from "../../../lib/utils.js";
+import { ChartContainer as I, ChartTooltip as b, ChartTooltipContent as J, ChartLegend as P, ChartLegendContent as Q } from "../chart/chart.js";
+const u = "__cone";
+function m(t) {
+  return t == null ? void 0 : t.filter((a) => a.dataKey !== u);
+}
+function U(t) {
+  return function(n) {
+    const r = {
+      ...n,
+      payload: m(n.payload)
+    };
+    return typeof t == "function" ? c.createElement(
+      t,
+      r
+    ) : c.cloneElement(t, r);
+  };
+}
+const V = c.forwardRef(
+  ({
+    className: t,
+    config: a,
+    data: n,
+    xKey: r,
+    actualKey: i,
+    forecastKey: p,
+    lowerKey: x,
+    upperKey: D,
+    xAxisLabel: s,
+    yAxisLabel: f,
+    yUnit: N,
+    strokeWidth: v = 2,
+    showForecastRegion: L = !0,
+    showGrid: O = !0,
+    showTooltip: R = !0,
+    showLegend: _ = !0,
+    tooltipContent: d,
+    ...$
+  }, B) => {
+    var C, g;
+    const y = c.useMemo(
+      () => d ? U(d) : void 0,
+      [d]
+    ), E = s ? { value: s, position: "insideBottom", offset: 0 } : void 0, j = f ? {
+      value: f,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, w = n.map((o) => {
+      const A = o[x], k = o[D];
+      return {
+        ...o,
+        [u]: typeof A == "number" && typeof k == "number" ? [A, k] : void 0
+      };
+    }), l = L ? (C = n.find((o) => typeof o[p] == "number")) == null ? void 0 : C[r] : void 0, h = (g = n[n.length - 1]) == null ? void 0 : g[r];
+    return /* @__PURE__ */ e("div", { ref: B, className: H(t), ...$, children: /* @__PURE__ */ e(
+      I,
+      {
+        config: a,
+        className: "size-full [&_.recharts-label]:fill-foreground",
+        children: /* @__PURE__ */ M(X, { data: w, children: [
+          O && /* @__PURE__ */ e(Y, { vertical: !1 }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              dataKey: r,
+              type: "category",
+              tickLine: !1,
+              axisLine: !1,
+              tickMargin: 8,
+              height: s ? 48 : void 0,
+              label: E
+            }
+          ),
+          /* @__PURE__ */ e(
+            G,
+            {
+              type: "number",
+              tickLine: !1,
+              axisLine: !1,
+              unit: N,
+              width: f ? 72 : void 0,
+              label: j
+            }
+          ),
+          l != null && h != null && /* @__PURE__ */ e(
+            S,
+            {
+              x1: l,
+              x2: h,
+              fill: "var(--ui-background-surface-secondary)",
+              fillOpacity: 0.5,
+              ifOverflow: "extendDomain"
+            }
+          ),
+          l != null && /* @__PURE__ */ e(
+            q,
+            {
+              x: l,
+              stroke: "var(--ui-border-on-surface-border)",
+              strokeDasharray: "4 4"
+            }
+          ),
+          R && (y ? (
+            // Strips the synthetic band before the caller's tooltip sees it
+            // — the `__cone` series feeds the Area, not the tooltip.
+            /* @__PURE__ */ e(b, { content: y })
+          ) : /* @__PURE__ */ e(
+            b,
+            {
+              content: (o) => /* @__PURE__ */ e(
+                J,
+                {
+                  active: o.active,
+                  label: o.label,
+                  payload: m(
+                    o.payload
+                  )
+                }
+              )
+            }
+          )),
+          _ && /* @__PURE__ */ e(
+            P,
+            {
+              content: (o) => /* @__PURE__ */ e(
+                Q,
+                {
+                  verticalAlign: o.verticalAlign,
+                  payload: m(
+                    o.payload
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            T,
+            {
+              dataKey: u,
+              type: "monotone",
+              stroke: "none",
+              fill: `var(--color-${i})`,
+              fillOpacity: 0.15,
+              connectNulls: !1,
+              dot: !1,
+              activeDot: !1,
+              isAnimationActive: !1,
+              legendType: "none",
+              tooltipType: "none"
+            }
+          ),
+          /* @__PURE__ */ e(
+            T,
+            {
+              dataKey: i,
+              type: "monotone",
+              stroke: `var(--color-${i})`,
+              strokeWidth: v,
+              fill: `var(--color-${i})`,
+              fillOpacity: 0.15,
+              dot: !1,
+              activeDot: !1,
+              connectNulls: !0,
+              isAnimationActive: !1
+            }
+          ),
+          /* @__PURE__ */ e(
+            F,
+            {
+              dataKey: p,
+              type: "monotone",
+              stroke: `var(--color-${i})`,
+              strokeWidth: v,
+              strokeDasharray: "5 5",
+              dot: !1,
+              connectNulls: !0,
+              isAnimationActive: !1
+            }
+          )
+        ] })
+      }
+    ) });
+  }
+);
+V.displayName = "ConfidenceCone";
+export {
+  V as ConfidenceCone,
+  U as createConeTooltip,
+  m as dropConeBand
+};
+//# sourceMappingURL=confidence-cone.js.map