@acronis-platform/ui-react 0.57.1 → 0.58.0

package/dist/components/ui/radial-bar-chart/radial-bar-chart.js

@@ -0,0 +1,69 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import * as x from "react";
+import { RadialBarChart as L, RadialBar as N, Cell as $ } from "recharts";
+import { cn as b } from "../../../lib/utils.js";
+import { ChartContainer as j, ChartTooltip as A, ChartTooltipContent as T, ChartLegend as k, ChartLegendContent as z } from "../chart/chart.js";
+const D = x.forwardRef(
+  ({
+    className: l,
+    config: e,
+    data: n,
+    dataKey: i,
+    nameKey: a,
+    innerRadius: s = 30,
+    outerRadius: c = 110,
+    startAngle: d = 90,
+    endAngle: h = -270,
+    cornerRadius: m = 4,
+    showBackground: C = !0,
+    showTooltip: f = !0,
+    showLegend: p = !0,
+    tooltipContent: u,
+    ...R
+  }, B) => {
+    const o = n.map((t) => ({
+      ...t,
+      fill: `var(--color-${t[a]})`
+    }));
+    return /* @__PURE__ */ r("div", { ref: B, className: b(l), ...R, children: /* @__PURE__ */ r(j, { config: e, className: "size-full", children: /* @__PURE__ */ g(
+      L,
+      {
+        data: o,
+        dataKey: i,
+        innerRadius: s,
+        outerRadius: c,
+        startAngle: d,
+        endAngle: h,
+        children: [
+          f && /* @__PURE__ */ r(
+            A,
+            {
+              content: u ?? /* @__PURE__ */ r(T, { nameKey: a, hideLabel: !0 })
+            }
+          ),
+          /* @__PURE__ */ r(
+            N,
+            {
+              dataKey: i,
+              background: C,
+              cornerRadius: m,
+              isAnimationActive: !1,
+              children: o.map((t, v) => (
+                // Keyed by index, not the name: two arcs could share a nameKey
+                // value, which would collide as a React key. Same-named arcs
+                // intentionally share a color/config entry via `--color-<name>`.
+                /* @__PURE__ */ r($, { fill: `var(--color-${t[a]})` }, v)
+              ))
+            }
+          ),
+          p && /* @__PURE__ */ r(k, { content: /* @__PURE__ */ r(z, { nameKey: a }) })
+        ]
+      }
+    ) }) });
+  }
+);
+D.displayName = "RadialBarChart";
+export {
+  D as RadialBarChart
+};
+//# sourceMappingURL=radial-bar-chart.js.map

package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-bar-chart.js","sources":["../../../../src/components/ui/radial-bar-chart/radial-bar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Cell, RadialBar, RadialBarChart as RechartsRadialBarChart } 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 polar/radial\n// type). Rows become concentric arcs sized by `dataKey`, each colored from its\n// `--color-<name>` var. Like ScatterChart/ComposedChart there's no CVA variant:\n// a radial bar's expressiveness is geometry (angles/radii, plain props) and the\n// data mapping, not a visual \"mode\". The angular sweep is exposed as\n// startAngle/endAngle props so a caller can build a gauge or a full ring.\nexport interface RadialBarChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** Row-per-arc data. Each object holds the arc's `nameKey` label + its `dataKey` numeric value. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-arc map of `label` / `color`, keyed by the arc's `nameKey` value\n   * (imported from the shared `Chart` primitives). Turned into `--color-<name>`\n   * custom properties. Colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Numeric field that sizes each arc. */\n  dataKey: string;\n  /**\n   * Label field that names each arc (drives the legend, tooltip, and\n   * `--color-<name>` lookup). Values should be unique per chart (arcs sharing a\n   * name share one `config`/color entry) and CSS-safe — they become part of a\n   * custom-property name.\n   */\n  nameKey: string;\n  /** Inner radius of the innermost arc. */\n  innerRadius?: number;\n  /** Outer radius of the outermost arc. */\n  outerRadius?: number;\n  /** Angle (degrees) the arcs sweep from. */\n  startAngle?: number;\n  /** Angle (degrees) the arcs sweep to (default is a full clockwise circle). */\n  endAngle?: number;\n  /** Corner radius on each arc's ends. */\n  cornerRadius?: number;\n  /** Render a muted background track behind each arc. */\n  showBackground?: 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   * to customize formatting, per-arc rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst RadialBarChart = React.forwardRef<HTMLDivElement, RadialBarChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKey,\n      nameKey,\n      innerRadius = 30,\n      outerRadius = 110,\n      startAngle = 90,\n      endAngle = -270,\n      cornerRadius = 4,\n      showBackground = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Stamp each row with its `fill` (the shadcn data-driven pattern) so a real\n    // hover resolves the arc color in the tooltip — recharts' RadialBar, like\n    // Funnel, carries no per-arc color on the tooltip payload item.\n    const seriesData: Record<string, string | number>[] = data.map((row) => ({\n      ...row,\n      fill: `var(--color-${row[nameKey]})`,\n    }));\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer config={config} className=\"size-full\">\n          <RechartsRadialBarChart\n            data={seriesData}\n            dataKey={dataKey}\n            innerRadius={innerRadius}\n            outerRadius={outerRadius}\n            startAngle={startAngle}\n            endAngle={endAngle}\n          >\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n            <RadialBar\n              dataKey={dataKey}\n              background={showBackground}\n              cornerRadius={cornerRadius}\n              isAnimationActive={false}\n            >\n              {seriesData.map((entry, index) => (\n                // Keyed by index, not the name: two arcs could share a nameKey\n                // value, which would collide as a React key. Same-named arcs\n                // intentionally share a color/config entry via `--color-<name>`.\n                <Cell key={index} fill={`var(--color-${entry[nameKey]})`} />\n              ))}\n            </RadialBar>\n            {showLegend && (\n              <ChartLegend content={<ChartLegendContent nameKey={nameKey} />} />\n            )}\n          </RechartsRadialBarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nRadialBarChart.displayName = 'RadialBarChart';\n\nexport { RadialBarChart };\n"],"names":["RadialBarChart","React","className","config","data","dataKey","nameKey","innerRadius","outerRadius","startAngle","endAngle","cornerRadius","showBackground","showTooltip","showLegend","tooltipContent","props","ref","seriesData","row","jsx","cn","ChartContainer","jsxs","RechartsRadialBarChart","ChartTooltip","ChartTooltipContent","RadialBar","entry","index","Cell","ChartLegend","ChartLegendContent"],"mappings":";;;;;AAgEA,MAAMA,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,UAAAC,IAAW;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,gBAAAC,IAAiB;AAAA,IACjB,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAgDd,EAAK,IAAI,CAACe,OAAS;AAAA,MACvE,GAAGA;AAAA,MACH,MAAM,eAAeA,EAAIb,CAAO,CAAC;AAAA,IAAA,EACjC;AAEF,WACE,gBAAAc,EAAC,OAAA,EAAI,KAAAH,GAAU,WAAWI,EAAGnB,CAAS,GAAI,GAAGc,GAC3C,UAAA,gBAAAI,EAACE,GAAA,EAAe,QAAAnB,GAAgB,WAAU,aACxC,UAAA,gBAAAoB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,MAAMN;AAAA,QACN,SAAAb;AAAA,QACA,aAAAE;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,QACA,UAAAC;AAAA,QAEC,UAAA;AAAA,UAAAG,KACC,gBAAAO;AAAA,YAACK;AAAA,YAAA;AAAA,cACC,SACEV,KACE,gBAAAK,EAACM,GAAA,EAAoB,SAAApB,GAAkB,WAAS,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAKzD,gBAAAc;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,SAAAtB;AAAA,cACA,YAAYO;AAAA,cACZ,cAAAD;AAAA,cACA,mBAAmB;AAAA,cAElB,UAAAO,EAAW,IAAI,CAACU,GAAOC;AAAA;AAAA;AAAA;AAAA,gBAItB,gBAAAT,EAACU,KAAiB,MAAM,eAAeF,EAAMtB,CAAO,CAAC,OAA1CuB,CAA+C;AAAA,eAC3D;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFf,KACC,gBAAAM,EAACW,GAAA,EAAY,SAAS,gBAAAX,EAACY,GAAA,EAAmB,SAAA1B,GAAkB,EAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGtE,EAAA,CACF;AAAA,EAEJ;AACF;AACAN,EAAe,cAAc;"}

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

@@ -0,0 +1,102 @@
+import { jsx as t, jsxs as S } from "react/jsx-runtime";
+import * as A from "react";
+import { ScatterChart as T, CartesianGrid as b, XAxis as L, YAxis as N, ZAxis as j, Scatter as w } from "recharts";
+import { cn as M } from "../../../lib/utils.js";
+import { ChartContainer as R, ChartTooltip as $, ChartTooltipContent as B, ChartLegend as D, ChartLegendContent as G } from "../chart/chart.js";
+const X = A.forwardRef(
+  ({
+    className: l,
+    config: s,
+    series: c,
+    xKey: n,
+    yKey: o,
+    zKey: a,
+    zRange: m = [60, 400],
+    shape: d = "circle",
+    xAxisLabel: r,
+    yAxisLabel: i,
+    xUnit: f,
+    yUnit: h,
+    showGrid: p = !0,
+    showTooltip: u = !0,
+    showLegend: C = !0,
+    tooltipContent: g,
+    ...v
+  }, k) => {
+    const y = r ? { value: r, position: "insideBottom", offset: -8 } : void 0, x = i ? {
+      value: i,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0;
+    return /* @__PURE__ */ t("div", { ref: k, className: M(l), ...v, children: /* @__PURE__ */ t(
+      R,
+      {
+        config: s,
+        className: "size-full [&_.recharts-label]:fill-foreground",
+        children: /* @__PURE__ */ S(
+          T,
+          {
+            margin: { top: 16, right: 16, bottom: 16, left: 16 },
+            children: [
+              p && /* @__PURE__ */ t(b, {}),
+              /* @__PURE__ */ t(
+                L,
+                {
+                  type: "number",
+                  dataKey: n,
+                  name: n,
+                  unit: f,
+                  tickLine: !1,
+                  axisLine: !1,
+                  tickMargin: 8,
+                  height: r ? 48 : void 0,
+                  label: y
+                }
+              ),
+              /* @__PURE__ */ t(
+                N,
+                {
+                  type: "number",
+                  dataKey: o,
+                  name: o,
+                  unit: h,
+                  tickLine: !1,
+                  axisLine: !1,
+                  tickMargin: 8,
+                  width: i ? 72 : void 0,
+                  label: x
+                }
+              ),
+              a && /* @__PURE__ */ t(j, { type: "number", dataKey: a, range: m, name: a }),
+              u && /* @__PURE__ */ t(
+                $,
+                {
+                  cursor: { strokeDasharray: "3 3" },
+                  content: g ?? /* @__PURE__ */ t(B, {})
+                }
+              ),
+              C && /* @__PURE__ */ t(D, { content: /* @__PURE__ */ t(G, {}) }),
+              c.map((e) => /* @__PURE__ */ t(
+                w,
+                {
+                  name: e.key,
+                  data: e.data,
+                  fill: `var(--color-${e.key})`,
+                  shape: d,
+                  isAnimationActive: !1
+                },
+                e.key
+              ))
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+X.displayName = "ScatterChart";
+export {
+  X as ScatterChart
+};
+//# sourceMappingURL=scatter-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scatter-chart.js","sources":["../../../../src/components/ui/scatter-chart/scatter-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  CartesianGrid,\n  Scatter,\n  ScatterChart as RechartsScatterChart,\n  XAxis,\n  YAxis,\n  ZAxis,\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. Unlike the\n// other chart types, a scatter has no visual \"mode\" to model as a CVA variant —\n// its shape is fixed (x/y points, optionally sized by z) and its expressiveness\n// comes from the data mapping. So there is no `cva` axis here (matches the\n// skill's \"usually none\"); marker `shape` and bubble sizing are plain props.\n// Each series carries its own point array (points aren't columns of a shared\n// row the way bar/line/area series are), so the API takes a `series` list rather\n// than `dataKeys` over one `data` array.\nexport type ScatterMarkerShape =\n  | 'circle'\n  | 'cross'\n  | 'diamond'\n  | 'square'\n  | 'star'\n  | 'triangle'\n  | 'wye';\n\nexport interface ScatterSeries {\n  /** Series key — must match a `config` entry; drives its `--color-<key>` fill and legend label. */\n  key: string;\n  /** This series' points — each row holds at least `xKey` and `yKey` (and `zKey` when used). */\n  data: ReadonlyArray<Record<string, number>>;\n}\n\nexport interface ScatterChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** One `<Scatter>` per entry — each with its own point array. Use a single entry for an ungrouped scatter. */\n  series: ScatterSeries[];\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  /** Numeric field for the horizontal axis. */\n  xKey: string;\n  /** Numeric field for the vertical axis. */\n  yKey: 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 X-axis tick values (recharts `unit`). */\n  xUnit?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`). */\n  yUnit?: string;\n  /** Optional numeric field mapped to point size (a bubble chart), via recharts `ZAxis`. */\n  zKey?: string;\n  /** Point-size range `[min, max]` the `zKey` maps into. Ignored when `zKey` is unset (points use recharts' default size). */\n  zRange?: [number, number];\n  /** Marker shape for every point. */\n  shape?: ScatterMarkerShape;\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 ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>(\n  (\n    {\n      className,\n      config,\n      series,\n      xKey,\n      yKey,\n      zKey,\n      zRange = [60, 400],\n      shape = 'circle',\n      xAxisLabel,\n      yAxisLabel,\n      xUnit,\n      yUnit,\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: -8 }\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          <RechartsScatterChart\n            margin={{ top: 16, right: 16, bottom: 16, left: 16 }}\n          >\n            {showGrid && <CartesianGrid />}\n            <XAxis\n              type=\"number\"\n              dataKey={xKey}\n              name={xKey}\n              unit={xUnit}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              dataKey={yKey}\n              name={yKey}\n              unit={yUnit}\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {zKey && (\n              <ZAxis type=\"number\" dataKey={zKey} range={zRange} name={zKey} />\n            )}\n            {showTooltip && (\n              <ChartTooltip\n                cursor={{ strokeDasharray: '3 3' }}\n                content={tooltipContent ?? <ChartTooltipContent />}\n              />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {series.map((s) => (\n              <Scatter\n                key={s.key}\n                name={s.key}\n                data={s.data as Record<string, number>[]}\n                fill={`var(--color-${s.key})`}\n                shape={shape}\n                isAnimationActive={false}\n              />\n            ))}\n          </RechartsScatterChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nScatterChart.displayName = 'ScatterChart';\n\nexport { ScatterChart };\n"],"names":["ScatterChart","React","className","config","series","xKey","yKey","zKey","zRange","shape","xAxisLabel","yAxisLabel","xUnit","yUnit","showGrid","showTooltip","showLegend","tooltipContent","props","ref","xAxisTitle","yAxisTitle","jsx","cn","ChartContainer","jsxs","RechartsScatterChart","CartesianGrid","XAxis","YAxis","ZAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","s","Scatter"],"mappings":";;;;;AAuFA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,QAAAC,IAAS,CAAC,IAAI,GAAG;AAAA,IACjB,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAaV,IACf,EAAE,OAAOA,GAAY,UAAU,gBAAyB,QAAQ,GAAA,IAChE,QACEW,IAAaV,IACf;AAAA,MACE,OAAOA;AAAA,MACP,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO,EAAE,YAAY,SAAA;AAAA,IAAkB,IAEzC;AAEJ,WACE,gBAAAW,EAAC,SAAI,KAAAH,GAAU,WAAWI,EAAGrB,CAAS,GAAI,GAAGgB,GAC3C,UAAA,gBAAAI;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAArB;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAsB;AAAA,UAACC;AAAAA,UAAA;AAAA,YACC,QAAQ,EAAE,KAAK,IAAI,OAAO,IAAI,QAAQ,IAAI,MAAM,GAAA;AAAA,YAE/C,UAAA;AAAA,cAAAZ,uBAAaa,GAAA,EAAc;AAAA,cAC5B,gBAAAL;AAAA,gBAACM;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAASvB;AAAA,kBACT,MAAMA;AAAA,kBACN,MAAMO;AAAA,kBACN,UAAU;AAAA,kBACV,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,QAAQF,IAAa,KAAK;AAAA,kBAC1B,OAAOU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAET,gBAAAE;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAASvB;AAAA,kBACT,MAAMA;AAAA,kBACN,MAAMO;AAAA,kBACN,UAAU;AAAA,kBACV,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAOF,IAAa,KAAK;AAAA,kBACzB,OAAOU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAERd,KACC,gBAAAe,EAACQ,GAAA,EAAM,MAAK,UAAS,SAASvB,GAAM,OAAOC,GAAQ,MAAMD,EAAA,CAAM;AAAA,cAEhEQ,KACC,gBAAAO;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,QAAQ,EAAE,iBAAiB,MAAA;AAAA,kBAC3B,SAASd,KAAkB,gBAAAK,EAACU,GAAA,CAAA,CAAoB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGnDhB,KAAc,gBAAAM,EAACW,GAAA,EAAY,SAAS,gBAAAX,EAACY,KAAmB,GAAI;AAAA,cAC5D9B,EAAO,IAAI,CAAC+B,MACX,gBAAAb;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBAEC,MAAMD,EAAE;AAAA,kBACR,MAAMA,EAAE;AAAA,kBACR,MAAM,eAAeA,EAAE,GAAG;AAAA,kBAC1B,OAAA1B;AAAA,kBACA,mBAAmB;AAAA,gBAAA;AAAA,gBALd0B,EAAE;AAAA,cAAA,CAOV;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AACAnC,EAAa,cAAc;"}

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

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

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

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

package/dist/components/ui/sheet/sheet-details.js

@@ -1,14 +1,14 @@
-import { jsxs as l, jsx as e, Fragment as S } from "react/jsx-runtime";
-import { Sheet as g, SheetTrigger as D, SheetContent as x, SheetHeader as N, SheetTitle as E, SheetCloseButton as L, SheetBody as T, SheetFooter as b } from "./sheet.js";
-import { Spinner as j } from "../spinner/spinner.js";
+import { jsxs as l, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { Sheet as S, SheetTrigger as D, SheetContent as x, SheetHeader as L, SheetTitle as N, SheetCloseButton as E, SheetBody as T, SheetFooter as b } from "./sheet.js";
+import { Loading as j } from "../loading/loading.js";
 import { Empty as w, EmptyHeader as B, EmptyTitle as v, EmptyDescription as C } from "../empty/empty.js";
 import { DescriptionList as F, DescriptionListItem as H, DescriptionListLabel as I, DescriptionListValue as V } from "../description-list/description-list.js";
 function k({
   contentState: t,
   properties: i,
   children: n,
-  emptyTitle: h,
-  emptyDescription: d,
+  emptyTitle: d,
+  emptyDescription: h,
   errorTitle: m,
   errorDescription: s
 }) {
@@ -17,11 +17,11 @@ function k({
   if (t === "empty" || t === "error") {
     const r = t === "error";
     return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ l(B, { children: [
-      /* @__PURE__ */ e(v, { children: r ? m ?? "Something went wrong" : h ?? "Nothing to show" }),
-      /* @__PURE__ */ e(C, { children: r ? s ?? "The details could not be loaded." : d ?? "There are no details to display yet." })
+      /* @__PURE__ */ e(v, { children: r ? m ?? "Something went wrong" : d ?? "Nothing to show" }),
+      /* @__PURE__ */ e(C, { children: r ? s ?? "The details could not be loaded." : h ?? "There are no details to display yet." })
     ] }) });
   }
-  return n ? /* @__PURE__ */ e(S, { children: n }) : i != null && i.length ? /* @__PURE__ */ e(
+  return n ? /* @__PURE__ */ e(p, { children: n }) : i != null && i.length ? /* @__PURE__ */ e(
     F,
     {
       className: "-mx-6",
@@ -37,8 +37,8 @@ function q({
   open: t,
   defaultOpen: i,
   onOpenChange: n,
-  title: h,
-  side: d = "right",
+  title: d,
+  side: h = "right",
   contentState: m = "content",
   properties: s,
   children: r,
@@ -48,14 +48,14 @@ function q({
   emptyDescription: u,
   errorTitle: f,
   errorDescription: y,
-  portalContainer: p
+  portalContainer: g
 }) {
-  return /* @__PURE__ */ l(g, { open: t, defaultOpen: i, onOpenChange: n, children: [
+  return /* @__PURE__ */ l(S, { open: t, defaultOpen: i, onOpenChange: n, children: [
     c ? /* @__PURE__ */ e(D, { render: c }) : null,
-    /* @__PURE__ */ l(x, { side: d, portalContainer: p, children: [
-      /* @__PURE__ */ l(N, { children: [
-        /* @__PURE__ */ e(E, { children: h }),
-        /* @__PURE__ */ e(L, {})
+    /* @__PURE__ */ l(x, { side: h, portalContainer: g, children: [
+      /* @__PURE__ */ l(L, { children: [
+        /* @__PURE__ */ e(N, { children: d }),
+        /* @__PURE__ */ e(E, {})
       ] }),
       /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(
         k,

package/dist/components/ui/sheet/sheet-details.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-details.js","sources":["../../../../src/components/ui/sheet/sheet-details.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n} from '../description-list';\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from '../empty';\nimport { Spinner } from '../spinner';\nimport {\n  Sheet,\n  SheetBody,\n  SheetCloseButton,\n  type SheetContentProps,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet';\n\n// `SheetDetails` is the preset for the `sheet-detail-panel` usage pattern — the\n// \"easy path that IS the pattern\". It bakes a right-anchored Sheet's header\n// (title + close), a body that switches by `contentState`\n// (loading → Spinner, empty/error → Empty, else a key/value property list or\n// custom children), and an optional footer of actions — so consumers don't\n// re-assemble (or hand-roll) the recipe. For anything outside the recipe, compose\n// the `Sheet*` parts directly. (React composition of the Vue kit's `Details`.)\n\nexport interface SheetDetailsProperty {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type SheetDetailsContentState = 'content' | 'loading' | 'empty' | 'error';\n\nexport interface SheetDetailsProps {\n  /** Controlled open state. Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Fires when the sheet opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Panel title (header). Also the accessible name. */\n  title: React.ReactNode;\n  /** Edge the panel anchors to. Defaults to `right`. */\n  side?: SheetContentProps['side'];\n  /** Which body view to show. Defaults to `content`. */\n  contentState?: SheetDetailsContentState;\n  /** Key/value rows rendered as the body in the `content` state (unless `children`). */\n  properties?: SheetDetailsProperty[];\n  /** Custom body for the `content` state — overrides `properties`. */\n  children?: React.ReactNode;\n  /** Footer action(s). Omit for no footer. */\n  actions?: React.ReactNode;\n  /** Optional trigger element (rendered via the Sheet trigger's `render`). */\n  trigger?: React.ReactElement;\n  /** Empty-state copy (`contentState=\"empty\"`). */\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  /** Error-state copy (`contentState=\"error\"`). */\n  errorTitle?: React.ReactNode;\n  errorDescription?: React.ReactNode;\n  /** Portal container (shadow-root mount for isolated previews). */\n  portalContainer?: SheetContentProps['portalContainer'];\n}\n\nfunction SheetDetailsBody({\n  contentState,\n  properties,\n  children,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n}: Pick<\n  SheetDetailsProps,\n  | 'contentState'\n  | 'properties'\n  | 'children'\n  | 'emptyTitle'\n  | 'emptyDescription'\n  | 'errorTitle'\n  | 'errorDescription'\n>) {\n  if (contentState === 'loading') {\n    return (\n      <div className=\"flex h-40 items-center justify-center\">\n        <Spinner />\n      </div>\n    );\n  }\n  if (contentState === 'empty' || contentState === 'error') {\n    const isError = contentState === 'error';\n    return (\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>\n            {isError\n              ? (errorTitle ?? 'Something went wrong')\n              : (emptyTitle ?? 'Nothing to show')}\n          </EmptyTitle>\n          <EmptyDescription>\n            {isError\n              ? (errorDescription ?? 'The details could not be loaded.')\n              : (emptyDescription ?? 'There are no details to display yet.')}\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n  if (children) return <>{children}</>;\n  if (properties?.length) {\n    // Render through DescriptionList. `-mx-6` cancels the SheetBody padding so\n    // the row dividers go full-bleed while the content stays aligned at the\n    // panel's 24px inset; the label column is tightened for the narrow panel.\n    return (\n      <DescriptionList\n        className=\"-mx-6\"\n        style={{ '--description-list-label': '9rem' } as React.CSSProperties}\n      >\n        {properties.map((p, i) => (\n          <DescriptionListItem key={i}>\n            <DescriptionListLabel className=\"text-muted-foreground\">\n              {p.label}\n            </DescriptionListLabel>\n            <DescriptionListValue className=\"font-medium\">\n              {p.value}\n            </DescriptionListValue>\n          </DescriptionListItem>\n        ))}\n      </DescriptionList>\n    );\n  }\n  return null;\n}\n\nfunction SheetDetails({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  side = 'right',\n  contentState = 'content',\n  properties,\n  children,\n  actions,\n  trigger,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n  portalContainer,\n}: SheetDetailsProps) {\n  return (\n    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger ? <SheetTrigger render={trigger} /> : null}\n      <SheetContent side={side} portalContainer={portalContainer}>\n        <SheetHeader>\n          <SheetTitle>{title}</SheetTitle>\n          <SheetCloseButton />\n        </SheetHeader>\n        <SheetBody>\n          <SheetDetailsBody\n            contentState={contentState}\n            properties={properties}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            errorTitle={errorTitle}\n            errorDescription={errorDescription}\n          >\n            {children}\n          </SheetDetailsBody>\n        </SheetBody>\n        {actions ? <SheetFooter>{actions}</SheetFooter> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\nSheetDetails.displayName = 'SheetDetails';\n\nexport { SheetDetails };\n"],"names":["SheetDetailsBody","contentState","properties","children","emptyTitle","emptyDescription","errorTitle","errorDescription","jsx","Spinner","isError","Empty","jsxs","EmptyHeader","EmptyTitle","EmptyDescription","Fragment","DescriptionList","p","i","DescriptionListItem","DescriptionListLabel","DescriptionListValue","SheetDetails","open","defaultOpen","onOpenChange","title","side","actions","trigger","portalContainer","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetCloseButton","SheetBody","SheetFooter"],"mappings":";;;;;AAyEA,SAASA,EAAiB;AAAA,EACxB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACF,GASG;AACD,MAAIN,MAAiB;AACnB,6BACG,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAO,EAACC,KAAQ,GACX;AAGJ,MAAIR,MAAiB,WAAWA,MAAiB,SAAS;AACxD,UAAMS,IAAUT,MAAiB;AACjC,WACE,gBAAAO,EAACG,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EACE,UAAAJ,IACIJ,KAAc,yBACdF,KAAc,mBACrB;AAAA,wBACCW,GAAA,EACE,UAAAL,IACIH,KAAoB,qCACpBF,KAAoB,uCAAA,CAC3B;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACA,SAAIF,IAAiB,gBAAAK,EAAAQ,GAAA,EAAG,UAAAb,EAAA,CAAS,IAC7BD,KAAA,QAAAA,EAAY,SAKZ,gBAAAM;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,4BAA4B,OAAA;AAAA,MAEpC,YAAW,IAAI,CAACC,GAAGC,wBACjBC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAA,EAAqB,WAAU,yBAC7B,UAAAH,EAAE,OACL;AAAA,QACA,gBAAAV,EAACc,GAAA,EAAqB,WAAU,eAC7B,YAAE,MAAA,CACL;AAAA,MAAA,EAAA,GANwBH,CAO1B,CACD;AAAA,IAAA;AAAA,EAAA,IAIA;AACT;AAEA,SAASI,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAA3B,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAA0B;AAAA,EACA,SAAAC;AAAA,EACA,YAAA1B;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAwB;AACF,GAAsB;AACpB,SACE,gBAAAnB,EAACoB,GAAA,EAAM,MAAAR,GAAY,aAAAC,GAA0B,cAAAC,GAC1C,UAAA;AAAA,IAAAI,IAAU,gBAAAtB,EAACyB,GAAA,EAAa,QAAQH,EAAA,CAAS,IAAK;AAAA,IAC/C,gBAAAlB,EAACsB,GAAA,EAAa,MAAAN,GAAY,iBAAAG,GACxB,UAAA;AAAA,MAAA,gBAAAnB,EAACuB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,KAAY,UAAAT,EAAA,CAAM;AAAA,0BAClBU,GAAA,CAAA,CAAiB;AAAA,MAAA,GACpB;AAAA,wBACCC,GAAA,EACC,UAAA,gBAAA9B;AAAA,QAACR;AAAA,QAAA;AAAA,UACC,cAAAC;AAAA,UACA,YAAAC;AAAA,UACA,YAAAE;AAAA,UACA,kBAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UAEC,UAAAJ;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACC0B,IAAU,gBAAArB,EAAC+B,GAAA,EAAa,UAAAV,EAAA,CAAQ,IAAiB;AAAA,IAAA,EAAA,CACpD;AAAA,EAAA,GACF;AAEJ;AACAN,EAAa,cAAc;"}
+{"version":3,"file":"sheet-details.js","sources":["../../../../src/components/ui/sheet/sheet-details.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  DescriptionList,\n  DescriptionListItem,\n  DescriptionListLabel,\n  DescriptionListValue,\n} from '../description-list';\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from '../empty';\nimport { Loading } from '../loading';\nimport {\n  Sheet,\n  SheetBody,\n  SheetCloseButton,\n  type SheetContentProps,\n  SheetContent,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from './sheet';\n\n// `SheetDetails` is the preset for the `sheet-detail-panel` usage pattern — the\n// \"easy path that IS the pattern\". It bakes a right-anchored Sheet's header\n// (title + close), a body that switches by `contentState`\n// (loading → Loading, empty/error → Empty, else a key/value property list or\n// custom children), and an optional footer of actions — so consumers don't\n// re-assemble (or hand-roll) the recipe. For anything outside the recipe, compose\n// the `Sheet*` parts directly. (React composition of the Vue kit's `Details`.)\n\nexport interface SheetDetailsProperty {\n  label: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport type SheetDetailsContentState = 'content' | 'loading' | 'empty' | 'error';\n\nexport interface SheetDetailsProps {\n  /** Controlled open state. Pair with `onOpenChange`. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Fires when the sheet opens or closes. */\n  onOpenChange?: (open: boolean, eventDetails: unknown) => void;\n  /** Panel title (header). Also the accessible name. */\n  title: React.ReactNode;\n  /** Edge the panel anchors to. Defaults to `right`. */\n  side?: SheetContentProps['side'];\n  /** Which body view to show. Defaults to `content`. */\n  contentState?: SheetDetailsContentState;\n  /** Key/value rows rendered as the body in the `content` state (unless `children`). */\n  properties?: SheetDetailsProperty[];\n  /** Custom body for the `content` state — overrides `properties`. */\n  children?: React.ReactNode;\n  /** Footer action(s). Omit for no footer. */\n  actions?: React.ReactNode;\n  /** Optional trigger element (rendered via the Sheet trigger's `render`). */\n  trigger?: React.ReactElement;\n  /** Empty-state copy (`contentState=\"empty\"`). */\n  emptyTitle?: React.ReactNode;\n  emptyDescription?: React.ReactNode;\n  /** Error-state copy (`contentState=\"error\"`). */\n  errorTitle?: React.ReactNode;\n  errorDescription?: React.ReactNode;\n  /** Portal container (shadow-root mount for isolated previews). */\n  portalContainer?: SheetContentProps['portalContainer'];\n}\n\nfunction SheetDetailsBody({\n  contentState,\n  properties,\n  children,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n}: Pick<\n  SheetDetailsProps,\n  | 'contentState'\n  | 'properties'\n  | 'children'\n  | 'emptyTitle'\n  | 'emptyDescription'\n  | 'errorTitle'\n  | 'errorDescription'\n>) {\n  if (contentState === 'loading') {\n    return (\n      <div className=\"flex h-40 items-center justify-center\">\n        <Loading />\n      </div>\n    );\n  }\n  if (contentState === 'empty' || contentState === 'error') {\n    const isError = contentState === 'error';\n    return (\n      <Empty>\n        <EmptyHeader>\n          <EmptyTitle>\n            {isError\n              ? (errorTitle ?? 'Something went wrong')\n              : (emptyTitle ?? 'Nothing to show')}\n          </EmptyTitle>\n          <EmptyDescription>\n            {isError\n              ? (errorDescription ?? 'The details could not be loaded.')\n              : (emptyDescription ?? 'There are no details to display yet.')}\n          </EmptyDescription>\n        </EmptyHeader>\n      </Empty>\n    );\n  }\n  if (children) return <>{children}</>;\n  if (properties?.length) {\n    // Render through DescriptionList. `-mx-6` cancels the SheetBody padding so\n    // the row dividers go full-bleed while the content stays aligned at the\n    // panel's 24px inset; the label column is tightened for the narrow panel.\n    return (\n      <DescriptionList\n        className=\"-mx-6\"\n        style={{ '--description-list-label': '9rem' } as React.CSSProperties}\n      >\n        {properties.map((p, i) => (\n          <DescriptionListItem key={i}>\n            <DescriptionListLabel className=\"text-muted-foreground\">\n              {p.label}\n            </DescriptionListLabel>\n            <DescriptionListValue className=\"font-medium\">\n              {p.value}\n            </DescriptionListValue>\n          </DescriptionListItem>\n        ))}\n      </DescriptionList>\n    );\n  }\n  return null;\n}\n\nfunction SheetDetails({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  side = 'right',\n  contentState = 'content',\n  properties,\n  children,\n  actions,\n  trigger,\n  emptyTitle,\n  emptyDescription,\n  errorTitle,\n  errorDescription,\n  portalContainer,\n}: SheetDetailsProps) {\n  return (\n    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n      {trigger ? <SheetTrigger render={trigger} /> : null}\n      <SheetContent side={side} portalContainer={portalContainer}>\n        <SheetHeader>\n          <SheetTitle>{title}</SheetTitle>\n          <SheetCloseButton />\n        </SheetHeader>\n        <SheetBody>\n          <SheetDetailsBody\n            contentState={contentState}\n            properties={properties}\n            emptyTitle={emptyTitle}\n            emptyDescription={emptyDescription}\n            errorTitle={errorTitle}\n            errorDescription={errorDescription}\n          >\n            {children}\n          </SheetDetailsBody>\n        </SheetBody>\n        {actions ? <SheetFooter>{actions}</SheetFooter> : null}\n      </SheetContent>\n    </Sheet>\n  );\n}\nSheetDetails.displayName = 'SheetDetails';\n\nexport { SheetDetails };\n"],"names":["SheetDetailsBody","contentState","properties","children","emptyTitle","emptyDescription","errorTitle","errorDescription","jsx","Loading","isError","Empty","jsxs","EmptyHeader","EmptyTitle","EmptyDescription","Fragment","DescriptionList","p","i","DescriptionListItem","DescriptionListLabel","DescriptionListValue","SheetDetails","open","defaultOpen","onOpenChange","title","side","actions","trigger","portalContainer","Sheet","SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetCloseButton","SheetBody","SheetFooter"],"mappings":";;;;;AAyEA,SAASA,EAAiB;AAAA,EACxB,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AACF,GASG;AACD,MAAIN,MAAiB;AACnB,6BACG,OAAA,EAAI,WAAU,yCACb,UAAA,gBAAAO,EAACC,KAAQ,GACX;AAGJ,MAAIR,MAAiB,WAAWA,MAAiB,SAAS;AACxD,UAAMS,IAAUT,MAAiB;AACjC,WACE,gBAAAO,EAACG,GAAA,EACC,UAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EACE,UAAAJ,IACIJ,KAAc,yBACdF,KAAc,mBACrB;AAAA,wBACCW,GAAA,EACE,UAAAL,IACIH,KAAoB,qCACpBF,KAAoB,uCAAA,CAC3B;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACA,SAAIF,IAAiB,gBAAAK,EAAAQ,GAAA,EAAG,UAAAb,EAAA,CAAS,IAC7BD,KAAA,QAAAA,EAAY,SAKZ,gBAAAM;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,4BAA4B,OAAA;AAAA,MAEpC,YAAW,IAAI,CAACC,GAAGC,wBACjBC,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAA,EAAqB,WAAU,yBAC7B,UAAAH,EAAE,OACL;AAAA,QACA,gBAAAV,EAACc,GAAA,EAAqB,WAAU,eAC7B,YAAE,MAAA,CACL;AAAA,MAAA,EAAA,GANwBH,CAO1B,CACD;AAAA,IAAA;AAAA,EAAA,IAIA;AACT;AAEA,SAASI,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAA3B,IAAe;AAAA,EACf,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAA0B;AAAA,EACA,SAAAC;AAAA,EACA,YAAA1B;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAwB;AACF,GAAsB;AACpB,SACE,gBAAAnB,EAACoB,GAAA,EAAM,MAAAR,GAAY,aAAAC,GAA0B,cAAAC,GAC1C,UAAA;AAAA,IAAAI,IAAU,gBAAAtB,EAACyB,GAAA,EAAa,QAAQH,EAAA,CAAS,IAAK;AAAA,IAC/C,gBAAAlB,EAACsB,GAAA,EAAa,MAAAN,GAAY,iBAAAG,GACxB,UAAA;AAAA,MAAA,gBAAAnB,EAACuB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAA3B,EAAC4B,KAAY,UAAAT,EAAA,CAAM;AAAA,0BAClBU,GAAA,CAAA,CAAiB;AAAA,MAAA,GACpB;AAAA,wBACCC,GAAA,EACC,UAAA,gBAAA9B;AAAA,QAACR;AAAA,QAAA;AAAA,UACC,cAAAC;AAAA,UACA,YAAAC;AAAA,UACA,YAAAE;AAAA,UACA,kBAAAC;AAAA,UACA,YAAAC;AAAA,UACA,kBAAAC;AAAA,UAEC,UAAAJ;AAAA,QAAA;AAAA,MAAA,GAEL;AAAA,MACC0B,IAAU,gBAAArB,EAAC+B,GAAA,EAAa,UAAAV,EAAA,CAAQ,IAAiB;AAAA,IAAA,EAAA,CACpD;AAAA,EAAA,GACF;AAEJ;AACAN,EAAa,cAAc;"}

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sources":["../../../../src/components/ui/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `spinner`\n// (packages/ui-legacy/src/components/ui/spinner.tsx). A CSS loading spinner — no\n// Base UI primitive. No `--ui-spinner-*` tier; the ring color defaults to the\n// brand action blue via `text-secondary` (--ui-background-brand-secondary, used\n// through `border-current`), replacing the legacy `--spinner-color` var.\n// Override the color with a `text-*` class. `size` mirrors the legacy scale.\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent text-secondary',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-6',\n        lg: 'size-8',\n        xl: 'size-12',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface SpinnerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof spinnerVariants> {}\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n  ({ className, size, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(spinnerVariants({ size }), className)}\n      {...props}\n    >\n      <span className=\"sr-only\">Loading…</span>\n    </div>\n  )\n);\nSpinner.displayName = 'Spinner';\n\nexport { Spinner, spinnerVariants };\n"],"names":["spinnerVariants","cva","Spinner","React","className","size","props","ref","jsx","cn"],"mappings":";;;;AAWA,MAAMA,IAAkBC;AAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAMMC,IAAUC,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GAASC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAWE,EAAGT,EAAgB,EAAE,MAAAK,EAAA,CAAM,GAAGD,CAAS;AAAA,MACjD,GAAGE;AAAA,MAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,WAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGxC;AACAN,EAAQ,cAAc;"}
+{"version":3,"file":"spinner.js","sources":["../../../../src/components/ui/spinner/spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `spinner`\n// (packages/ui-legacy/src/components/ui/spinner.tsx). A CSS loading spinner — no\n// Base UI primitive. No `--ui-spinner-*` tier; the ring color defaults to the\n// brand action blue via `text-secondary` (--ui-background-brand-secondary, used\n// through `border-current`), replacing the legacy `--spinner-color` var.\n// Override the color with a `text-*` class. `size` mirrors the legacy scale.\n//\n// Internal primitive — deliberately NOT re-exported from `src/index.ts` (mirrors\n// the InputBox/SearchBox pattern). Consumed by `Loading` (its icon), `Toast` (a\n// small inline icon), and `ChartState`. Apps building a standalone loading\n// state should use `Loading`, which wraps this ring with a label and\n// placement-context container tokens.\nconst spinnerVariants = cva(\n  'inline-block animate-spin rounded-full border-2 border-solid border-current border-r-transparent text-secondary',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-6',\n        lg: 'size-8',\n        xl: 'size-12',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n);\n\nexport interface SpinnerProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof spinnerVariants> {}\n\nconst Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(\n  ({ className, size, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(spinnerVariants({ size }), className)}\n      {...props}\n    >\n      <span className=\"sr-only\">Loading…</span>\n    </div>\n  )\n);\nSpinner.displayName = 'Spinner';\n\nexport { Spinner, spinnerVariants };\n"],"names":["spinnerVariants","cva","Spinner","React","className","size","props","ref","jsx","cn"],"mappings":";;;;AAiBA,MAAMA,IAAkBC;AAAA,EACtB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAMMC,IAAUC,EAAM;AAAA,EACpB,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,GAASC,MAC9B,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAWE,EAAGT,EAAgB,EAAE,MAAAK,EAAA,CAAM,GAAGD,CAAS;AAAA,MACjD,GAAGE;AAAA,MAEJ,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,WAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAGxC;AACAN,EAAQ,cAAc;"}

package/dist/components/ui/timeline/timeline.js

@@ -0,0 +1,175 @@
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import * as a from "react";
+import { cva as C } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as e } from "../../../lib/utils.js";
+const b = a.createContext({
+  size: "medium",
+  density: "default"
+}), z = C("flex flex-col", {
+  variants: {
+    size: {
+      small: "text-xs",
+      medium: "text-sm"
+    },
+    density: {
+      compact: "",
+      default: ""
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    density: "default"
+  }
+}), p = a.forwardRef(
+  ({ className: d, size: s, density: n, children: o, ...u }, r) => {
+    const i = a.useMemo(
+      () => ({ size: s ?? "medium", density: n ?? "default" }),
+      [s, n]
+    );
+    return /* @__PURE__ */ t(b.Provider, { value: i, children: /* @__PURE__ */ t(
+      "ol",
+      {
+        ref: r,
+        "data-size": i.size,
+        "data-density": i.density,
+        className: e(
+          z({ size: s, density: n }),
+          // Hide the connector on the last item — nothing follows it.
+          "[&>li:last-child_[data-slot=timeline-connector]]:hidden",
+          d
+        ),
+        ...u,
+        children: o
+      }
+    ) });
+  }
+);
+p.displayName = "Timeline";
+const T = {
+  neutral: {
+    dot: "bg-[var(--ui-text-on-status-neutral)]",
+    ring: "border-[var(--ui-text-on-status-neutral)]",
+    ringColor: "ring-[var(--ui-text-on-status-neutral)]",
+    badge: "bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]"
+  },
+  info: {
+    dot: "bg-[var(--ui-text-on-status-info)]",
+    ring: "border-[var(--ui-text-on-status-info)]",
+    ringColor: "ring-[var(--ui-text-on-status-info)]",
+    badge: "bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]"
+  },
+  success: {
+    dot: "bg-[var(--ui-text-on-status-success)]",
+    ring: "border-[var(--ui-text-on-status-success)]",
+    ringColor: "ring-[var(--ui-text-on-status-success)]",
+    badge: "bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]"
+  },
+  warning: {
+    dot: "bg-[var(--ui-text-on-status-warning)]",
+    ring: "border-[var(--ui-text-on-status-warning)]",
+    ringColor: "ring-[var(--ui-text-on-status-warning)]",
+    badge: "bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]"
+  },
+  danger: {
+    dot: "bg-[var(--ui-text-on-status-danger)]",
+    ring: "border-[var(--ui-text-on-status-danger)]",
+    ringColor: "ring-[var(--ui-text-on-status-danger)]",
+    badge: "bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]"
+  },
+  critical: {
+    dot: "bg-[var(--ui-text-on-status-critical)]",
+    ring: "border-[var(--ui-text-on-status-critical)]",
+    ringColor: "ring-[var(--ui-text-on-status-critical)]",
+    badge: "bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]"
+  }
+}, y = { small: "size-2", medium: "size-2.5" }, E = { small: "size-6", medium: "size-7" }, _ = { small: 14, medium: 16 }, I = { compact: "pb-4", default: "pb-6" }, h = a.forwardRef(
+  ({
+    className: d,
+    timestamp: s,
+    title: n,
+    description: o,
+    status: u = "neutral",
+    icon: r,
+    metadata: i,
+    actions: v,
+    current: c = !1,
+    disabled: g = !1,
+    children: f,
+    ...N
+  }, k) => {
+    const { size: m, density: w } = a.useContext(b), l = T[u];
+    return /* @__PURE__ */ x(
+      "li",
+      {
+        ref: k,
+        "data-status": u,
+        "data-current": c || void 0,
+        "data-disabled": g || void 0,
+        "aria-disabled": g || void 0,
+        className: e(
+          "flex gap-3",
+          g && "opacity-60 pointer-events-none",
+          d
+        ),
+        ...N,
+        children: [
+          /* @__PURE__ */ x("div", { className: "flex flex-col items-center", children: [
+            r != null ? /* @__PURE__ */ t(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: e(
+                  "flex shrink-0 items-center justify-center rounded-full [&_svg]:shrink-0",
+                  E[m],
+                  l.badge,
+                  // Ring the badge for a `current` item (same emphasis as the dot).
+                  c && e(
+                    "ring-2 ring-offset-2 ring-offset-background",
+                    l.ringColor
+                  )
+                ),
+                children: a.isValidElement(r) ? a.cloneElement(
+                  r,
+                  { size: _[m] }
+                ) : r
+              }
+            ) : /* @__PURE__ */ t(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: e(
+                  "mt-1 shrink-0 rounded-full",
+                  y[m],
+                  c ? e("border-2 bg-background", l.ring) : l.dot
+                )
+              }
+            ),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                "data-slot": "timeline-connector",
+                "aria-hidden": !0,
+                className: "mt-1 w-px flex-1 bg-border"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ x("div", { className: e("min-w-0 flex-1", I[w]), children: [
+            s != null && /* @__PURE__ */ t("div", { className: "text-xs leading-tight text-muted-foreground", children: s }),
+            /* @__PURE__ */ t("div", { className: "font-medium leading-snug text-foreground", children: n }),
+            o != null && /* @__PURE__ */ t("div", { className: "mt-0.5 text-muted-foreground", children: o }),
+            i != null && /* @__PURE__ */ t("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: i }),
+            v != null && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: v }),
+            f != null && /* @__PURE__ */ t("div", { className: "mt-2", children: f })
+          ] })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Timeline.Item";
+const S = Object.assign(p, { Item: h });
+export {
+  S as Timeline,
+  h as TimelineItem
+};
+//# sourceMappingURL=timeline.js.map