@acronis-platform/ui-react 0.57.1 → 0.60.0

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

@@ -0,0 +1,113 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import * as V from "react";
+import { cva as b } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { PieChart as j, Pie as T, Cell as _, Label as $ } from "recharts";
+import { cn as y } from "../../../lib/utils.js";
+import { ChartContainer as z, ChartTooltip as D, ChartTooltipContent as G, ChartLegend as I, ChartLegendContent as L } from "../chart/chart.js";
+const O = b("", {
+  variants: {
+    shape: {
+      pie: "",
+      donut: ""
+    }
+  },
+  defaultVariants: {
+    shape: "pie"
+  }
+}), S = 28, W = V.forwardRef(
+  ({
+    className: u,
+    config: f,
+    data: s,
+    dataKey: p,
+    nameKey: r,
+    shape: i = "pie",
+    centerLabel: e,
+    innerRadius: C = 60,
+    outerRadius: x,
+    paddingAngle: R = 0,
+    showTooltip: v = !0,
+    showLegend: c = !0,
+    tooltipContent: N,
+    ...E
+  }, P) => {
+    const g = i === "donut" ? C : 0;
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: P,
+        "data-shape": i,
+        className: y(O({ shape: i }), u),
+        ...E,
+        children: /* @__PURE__ */ t(z, { config: f, className: "size-full", children: /* @__PURE__ */ o(j, { children: [
+          v && /* @__PURE__ */ t(
+            D,
+            {
+              content: N ?? /* @__PURE__ */ t(G, { nameKey: r, hideLabel: !0 })
+            }
+          ),
+          /* @__PURE__ */ o(
+            T,
+            {
+              data: s,
+              dataKey: p,
+              nameKey: r,
+              innerRadius: g,
+              outerRadius: x,
+              paddingAngle: R,
+              isAnimationActive: !1,
+              children: [
+                s.map((n, a) => (
+                  // Keyed by index, not the name: two rows may share a nameKey
+                  // value, which would collide as a React key. Same-named rows
+                  // intentionally share a color/config entry via `--color-<name>`.
+                  /* @__PURE__ */ t(_, { fill: `var(--color-${n[r]})` }, a)
+                )),
+                i === "donut" && e && /* @__PURE__ */ t(
+                  $,
+                  {
+                    content: ({ viewBox: n }) => {
+                      if (!n || !("cx" in n)) return null;
+                      const { cx: a = 0, cy: A = 0 } = n, l = A - (c ? S / 2 : 0), d = e.value != null, m = e.label != null, h = d && m;
+                      return /* @__PURE__ */ o("g", { children: [
+                        d && /* @__PURE__ */ t(
+                          "text",
+                          {
+                            x: a,
+                            y: h ? l - 10 : l,
+                            textAnchor: "middle",
+                            dominantBaseline: "central",
+                            className: "fill-foreground text-2xl font-semibold",
+                            children: e.value
+                          }
+                        ),
+                        m && /* @__PURE__ */ t(
+                          "text",
+                          {
+                            x: a,
+                            y: h ? l + 13 : l,
+                            textAnchor: "middle",
+                            dominantBaseline: "central",
+                            className: "fill-muted-foreground text-sm",
+                            children: e.label
+                          }
+                        )
+                      ] });
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          c && /* @__PURE__ */ t(I, { content: /* @__PURE__ */ t(L, { nameKey: r }) })
+        ] }) })
+      }
+    );
+  }
+);
+W.displayName = "PieChart";
+export {
+  W as PieChart,
+  O as pieChartVariants
+};
+//# sourceMappingURL=pie-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.js","sources":["../../../../src/components/ui/pie-chart/pie-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Cell, Label, Pie, PieChart as RechartsPieChart } 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. The single\n// CVA axis is the design's Pie-chart variant set: `shape` (a filled pie vs a\n// hollow-centre donut). The class stays empty because recharts' SVG — not CSS —\n// draws the arc: `shape` drives the `<Pie>`'s `innerRadius` (0 for a pie, the\n// `innerRadius` prop for a donut). CVA is kept so the variant set is a\n// first-class, spec-conformant part of the API (matched against ui-spec's\n// api.yaml enums) and exposed via `VariantProps`; the resolved value is also\n// mirrored onto `data-shape`.\nconst pieChartVariants = cva('', {\n  variants: {\n    shape: {\n      pie: '',\n      donut: '',\n    },\n  },\n  defaultVariants: {\n    shape: 'pie',\n  },\n});\n\nexport interface PieChartCenterLabel {\n  // Rendered as SVG <text>, which only lays out text — hence string | number,\n  // not ReactNode.\n  /** Headline metric rendered large in the donut hole (e.g. a total). */\n  value?: string | number;\n  /** Caption rendered under the value. */\n  label?: string | number;\n}\n\nexport interface PieChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof pieChartVariants> {\n  /** Row-per-slice data. Each object holds the slice's `nameKey` label + its `dataKey` numeric value. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-slice map of `label` / `color`, keyed by the slice'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 slice. */\n  dataKey: string;\n  /**\n   * Label field that names each slice (drives the legend, tooltip, and\n   * `--color-<name>` lookup). Values should be unique per chart — rows sharing a\n   * name share one `config`/color entry.\n   */\n  nameKey: string;\n  /** Inner radius of the arc when `shape=\"donut\"` (ignored for `shape=\"pie\"`). */\n  innerRadius?: number;\n  /**\n   * Custom content for the donut hole — a headline `value` and/or a `label`\n   * caption, stacked and centered. Rendered only for `shape=\"donut\"` (a filled\n   * pie has no hole).\n   */\n  centerLabel?: PieChartCenterLabel;\n  /** Outer radius of the arc. Omit to use recharts' responsive default. */\n  outerRadius?: number;\n  /** Gap between slices, in degrees. */\n  paddingAngle?: number;\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-slice rows, or extra fields without composing\n   * recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\n// Reserved height (px) of the shared single-row `ChartLegendContent` at the\n// bottom of the chart surface. recharts shifts the donut centre up by half of\n// this to make room for the legend, but a Pie <Label>'s viewBox does not\n// reflect it — so the centre label is nudged up by the same amount. VR\n// baselines guard this value if the legend's height ever changes.\nconst LEGEND_ROW_RESERVE = 28;\n\nconst PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKey,\n      nameKey,\n      shape = 'pie',\n      centerLabel,\n      innerRadius = 60,\n      outerRadius,\n      paddingAngle = 0,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedInnerRadius = shape === 'donut' ? innerRadius : 0;\n\n    return (\n      <div\n        ref={ref}\n        data-shape={shape}\n        className={cn(pieChartVariants({ shape }), className)}\n        {...props}\n      >\n        <ChartContainer config={config} className=\"size-full\">\n          <RechartsPieChart>\n            {showTooltip && (\n              <ChartTooltip\n                content={\n                  tooltipContent ?? (\n                    <ChartTooltipContent nameKey={nameKey} hideLabel />\n                  )\n                }\n              />\n            )}\n            <Pie\n              data={data as unknown[]}\n              dataKey={dataKey}\n              nameKey={nameKey}\n              innerRadius={resolvedInnerRadius}\n              outerRadius={outerRadius}\n              paddingAngle={paddingAngle}\n              isAnimationActive={false}\n            >\n              {data.map((entry, index) => (\n                // Keyed by index, not the name: two rows may share a nameKey\n                // value, which would collide as a React key. Same-named rows\n                // intentionally share a color/config entry via `--color-<name>`.\n                <Cell key={index} fill={`var(--color-${entry[nameKey]})`} />\n              ))}\n              {shape === 'donut' && centerLabel && (\n                <Label\n                  content={({ viewBox }) => {\n                    if (!viewBox || !('cx' in viewBox)) return null;\n                    const { cx = 0, cy = 0 } = viewBox as {\n                      cx?: number;\n                      cy?: number;\n                    };\n                    // recharts centres the pie in the plot area (surface minus\n                    // the legend), but a Pie <Label>'s viewBox reports the full\n                    // surface centre — so a bottom legend leaves cy half a legend\n                    // row too low. Nudge up onto the real donut centre.\n                    const centerY =\n                      cy - (showLegend ? LEGEND_ROW_RESERVE / 2 : 0);\n                    const hasValue = centerLabel.value != null;\n                    const hasLabel = centerLabel.label != null;\n                    // Straddle centerY when both lines show, so the value + label\n                    // block is centered as a whole (not just the value).\n                    const both = hasValue && hasLabel;\n                    return (\n                      <g>\n                        {hasValue && (\n                          <text\n                            x={cx}\n                            y={both ? centerY - 10 : centerY}\n                            textAnchor=\"middle\"\n                            dominantBaseline=\"central\"\n                            className=\"fill-foreground text-2xl font-semibold\"\n                          >\n                            {centerLabel.value}\n                          </text>\n                        )}\n                        {hasLabel && (\n                          <text\n                            x={cx}\n                            y={both ? centerY + 13 : centerY}\n                            textAnchor=\"middle\"\n                            dominantBaseline=\"central\"\n                            className=\"fill-muted-foreground text-sm\"\n                          >\n                            {centerLabel.label}\n                          </text>\n                        )}\n                      </g>\n                    );\n                  }}\n                />\n              )}\n            </Pie>\n            {showLegend && (\n              <ChartLegend content={<ChartLegendContent nameKey={nameKey} />} />\n            )}\n          </RechartsPieChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nPieChart.displayName = 'PieChart';\n\nexport { PieChart, pieChartVariants };\n"],"names":["pieChartVariants","cva","LEGEND_ROW_RESERVE","PieChart","React","className","config","data","dataKey","nameKey","shape","centerLabel","innerRadius","outerRadius","paddingAngle","showTooltip","showLegend","tooltipContent","props","ref","resolvedInnerRadius","jsx","cn","ChartContainer","RechartsPieChart","ChartTooltip","ChartTooltipContent","jsxs","Pie","entry","index","Cell","Label","viewBox","cx","cy","centerY","hasValue","hasLabel","both","ChartLegend","ChartLegendContent"],"mappings":";;;;;;AAwBA,MAAMA,IAAmBC,EAAI,IAAI;AAAA,EAC/B,UAAU;AAAA,IACR,OAAO;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC,GA2DKC,IAAqB,IAErBC,IAAWC,EAAM;AAAA,EACrB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,aAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,aAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAsBV,MAAU,UAAUE,IAAc;AAE9D,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAF;AAAA,QACA,cAAYT;AAAA,QACZ,WAAWY,EAAGtB,EAAiB,EAAE,OAAAU,EAAA,CAAO,GAAGL,CAAS;AAAA,QACnD,GAAGa;AAAA,QAEJ,4BAACK,GAAA,EAAe,QAAAjB,GAAgB,WAAU,aACxC,4BAACkB,GAAA,EACE,UAAA;AAAA,UAAAT,KACC,gBAAAM;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,SACER,KACE,gBAAAI,EAACK,GAAA,EAAoB,SAAAjB,GAAkB,WAAS,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,UAKzD,gBAAAkB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,MAAArB;AAAA,cACA,SAAAC;AAAA,cACA,SAAAC;AAAA,cACA,aAAaW;AAAA,cACb,aAAAP;AAAA,cACA,cAAAC;AAAA,cACA,mBAAmB;AAAA,cAElB,UAAA;AAAA,gBAAAP,EAAK,IAAI,CAACsB,GAAOC;AAAA;AAAA;AAAA;AAAA,kBAIhB,gBAAAT,EAACU,KAAiB,MAAM,eAAeF,EAAMpB,CAAO,CAAC,OAA1CqB,CAA+C;AAAA,iBAC3D;AAAA,gBACApB,MAAU,WAAWC,KACpB,gBAAAU;AAAA,kBAACW;AAAA,kBAAA;AAAA,oBACC,SAAS,CAAC,EAAE,SAAAC,QAAc;AACxB,0BAAI,CAACA,KAAW,EAAE,QAAQA,GAAU,QAAO;AAC3C,4BAAM,EAAE,IAAAC,IAAK,GAAG,IAAAC,IAAK,MAAMF,GAQrBG,IACJD,KAAMnB,IAAad,IAAqB,IAAI,IACxCmC,IAAW1B,EAAY,SAAS,MAChC2B,IAAW3B,EAAY,SAAS,MAGhC4B,IAAOF,KAAYC;AACzB,+CACG,KAAA,EACE,UAAA;AAAA,wBAAAD,KACC,gBAAAhB;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,GAAGa;AAAA,4BACH,GAAGK,IAAOH,IAAU,KAAKA;AAAA,4BACzB,YAAW;AAAA,4BACX,kBAAiB;AAAA,4BACjB,WAAU;AAAA,4BAET,UAAAzB,EAAY;AAAA,0BAAA;AAAA,wBAAA;AAAA,wBAGhB2B,KACC,gBAAAjB;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BACC,GAAGa;AAAA,4BACH,GAAGK,IAAOH,IAAU,KAAKA;AAAA,4BACzB,YAAW;AAAA,4BACX,kBAAiB;AAAA,4BACjB,WAAU;AAAA,4BAET,UAAAzB,EAAY;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBACf,GAEJ;AAAA,oBAEJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAGHK,KACC,gBAAAK,EAACmB,GAAA,EAAY,SAAS,gBAAAnB,EAACoB,GAAA,EAAmB,SAAAhC,GAAkB,EAAA,CAAI;AAAA,QAAA,EAAA,CAEpE,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACAN,EAAS,cAAc;"}

package/dist/components/ui/popover/popover.js

@@ -1,49 +1,79 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as P from "react";
+import { jsx as a } from "react/jsx-runtime";
+import * as i from "react";
 import { Popover as o } from "@base-ui/react/popover";
-import { cn as u } from "../../../lib/utils.js";
-import { usePortalContainer as g } from "../../../lib/portal-container.js";
-const w = o.Root, z = o.Trigger, N = o.Portal, b = P.forwardRef(
+import { cn as d } from "../../../lib/utils.js";
+import { usePortalContainer as b } from "../../../lib/portal-container.js";
+const C = o.Root, R = o.Trigger, z = o.Portal, g = i.forwardRef(
   ({
     className: r,
-    side: a = "bottom",
-    align: n = "center",
-    sideOffset: d = 4,
-    portal: i = !0,
+    side: e = "bottom",
+    align: t = "center",
+    sideOffset: p = 4,
+    portal: l = !0,
     portalContainer: s,
-    keepMounted: m,
-    ...p
-  }, c) => {
-    const l = g(), f = s ?? l, e = /* @__PURE__ */ t(
+    keepMounted: v,
+    ...c
+  }, f) => {
+    const m = b(), u = s ?? m, n = /* @__PURE__ */ a(
       o.Positioner,
       {
-        side: a,
-        align: n,
-        sideOffset: d,
+        side: e,
+        align: t,
+        sideOffset: p,
         className: "z-50",
-        children: /* @__PURE__ */ t(
+        children: /* @__PURE__ */ a(
           o.Popup,
           {
-            ref: c,
-            className: u(
-              "w-72 rounded-md border border-border bg-background p-4 text-foreground shadow-md outline-none",
+            ref: f,
+            className: d(
+              "min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none",
               "duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95",
               "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
               r
             ),
-            ...p
+            ...c
           }
         )
       }
     );
-    return i ? /* @__PURE__ */ t(o.Portal, { container: f, keepMounted: m, children: e }) : e;
+    return l ? /* @__PURE__ */ a(o.Portal, { container: u, keepMounted: v, children: n }) : n;
   }
 );
-b.displayName = "PopoverContent";
+g.displayName = "PopoverContent";
+const P = i.forwardRef(
+  ({ className: r, ...e }, t) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      className: d(
+        "flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]",
+        r
+      ),
+      ...e
+    }
+  )
+);
+P.displayName = "PopoverBody";
+const h = i.forwardRef(
+  ({ className: r, ...e }, t) => /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      className: d(
+        "flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]",
+        r
+      ),
+      ...e
+    }
+  )
+);
+h.displayName = "PopoverFooter";
 export {
-  w as Popover,
-  b as PopoverContent,
-  N as PopoverPortal,
-  z as PopoverTrigger
+  C as Popover,
+  P as PopoverBody,
+  g as PopoverContent,
+  h as PopoverFooter,
+  z as PopoverPortal,
+  R as PopoverTrigger
 };
 //# sourceMappingURL=popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../../src/components/ui/popover/popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `popover`\n// (packages/ui-legacy/src/components/ui/popover.tsx). A floating panel anchored\n// to a trigger, built on the Base UI Popover primitive (positioning, focus\n// management, outside-press / Esc dismissal, ARIA come from Base UI). No\n// `--ui-popover-*` token tier exists yet, so this design-pending v1 themes from\n// the shared semantic tokens:\n//   • surface -> bg-background (--ui-background-surface-primary)  (legacy `bg-popover`)\n//   • text    -> text-foreground (--ui-text-on-surface-primary)  (legacy `text-popover-foreground`)\n//   • border  -> border-border (--ui-border-on-surface-border)   (legacy bare `border`)\n// Enter/exit animations use `tw-animate-css` keyed to Base UI's data-[open] /\n// data-[closed] / data-[side] attributes. Reconcile (and a possible\n// `--ui-popover-*` tier) with `/figma-component Popover <url> --update`.\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> {\n  /** Which side of the trigger to render on. */\n  side?: PopoverPrimitive.Positioner.Props['side'];\n  /** Alignment along the chosen side. */\n  align?: PopoverPrimitive.Positioner.Props['align'];\n  /** Distance in px from the trigger. */\n  sideOffset?: number;\n  /**\n   * Render inside a portal (default `true`). Set `false` for inline usage\n   * (e.g. when supplying your own `PopoverPortal`).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: PopoverPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Popup>,\n  PopoverContentProps\n>(\n  (\n    {\n      className,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 4,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    const positioner = (\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className=\"z-50\"\n      >\n        <PopoverPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'w-72 rounded-md border border-border bg-background p-4 text-foreground shadow-md outline-none',\n            'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    );\n\n    return portal ? (\n      <PopoverPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {positioner}\n      </PopoverPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nPopoverContent.displayName = 'PopoverContent';\n\nexport { Popover, PopoverTrigger, PopoverPortal, PopoverContent };\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverPortal","PopoverContent","React","className","side","align","sideOffset","portal","portalContainer","keepMounted","props","ref","ctxContainer","usePortalContainer","resolvedContainer","positioner","jsx","cn"],"mappings":";;;;;AAmBA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB,QAwBjCG,IAAiBC,EAAM;AAAA,EAI3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBN,KAAmBI,GAEvCG,IACJ,gBAAAC;AAAA,MAAClB,EAAiB;AAAA,MAAjB;AAAA,QACC,MAAAM;AAAA,QACA,OAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAU;AAAA,UAAClB,EAAiB;AAAA,UAAjB;AAAA,YACC,KAAAa;AAAA,YACA,WAAWM;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAd;AAAA,YAAA;AAAA,YAED,GAAGO;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAIJ,WAAOH,sBACJT,EAAiB,QAAjB,EAAwB,WAAWgB,GAAmB,aAAAL,GACpD,UAAAM,EAAA,CACH,IAEAA;AAAA,EAEJ;AACF;AACAd,EAAe,cAAc;"}
+{"version":3,"file":"popover.js","sources":["../../../../src/components/ui/popover/popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `popover`\n// (packages/ui-legacy/src/components/ui/popover.tsx). A floating panel anchored\n// to a trigger, built on the Base UI Popover primitive (positioning, focus\n// management, outside-press / Esc dismissal, ARIA come from Base UI). Themed by\n// the `--ui-popover-*` tier (container chrome: color, border, radius, min/max\n// width) per Figma node 6364:17907. The optional `PopoverBody`/`PopoverFooter`\n// parts mirror that node's `Body` slot and `FooterDefault` recipe — `PopoverBody`\n// from `--ui-popover-body-*`, `PopoverFooter` from the shared `--ui-footer-*`\n// tier (also used by other components' default action-row footer). Text color\n// stays on the bridged semantic token (--ui-text-on-surface-primary), which the\n// design references directly rather than a Popover-specific token.\n// Enter/exit animations use `tw-animate-css` keyed to Base UI's data-[open] /\n// data-[closed] / data-[side] attributes.\n\nconst Popover = PopoverPrimitive.Root;\n\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nconst PopoverPortal = PopoverPrimitive.Portal;\n\nexport interface PopoverContentProps\n  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Popup> {\n  /** Which side of the trigger to render on. */\n  side?: PopoverPrimitive.Positioner.Props['side'];\n  /** Alignment along the chosen side. */\n  align?: PopoverPrimitive.Positioner.Props['align'];\n  /** Distance in px from the trigger. */\n  sideOffset?: number;\n  /**\n   * Render inside a portal (default `true`). Set `false` for inline usage\n   * (e.g. when supplying your own `PopoverPortal`).\n   */\n  portal?: boolean;\n  /**\n   * Portal container. Pass a shadow-root mount for isolated-style previews\n   * (the docs demos do this via `useShadowMount`).\n   */\n  portalContainer?: PopoverPrimitive.Portal.Props['container'];\n  /** Keep the content mounted while closed (Base UI `Portal` prop). */\n  keepMounted?: PopoverPrimitive.Portal.Props['keepMounted'];\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Popup>,\n  PopoverContentProps\n>(\n  (\n    {\n      className,\n      side = 'bottom',\n      align = 'center',\n      sideOffset = 4,\n      portal = true,\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    const positioner = (\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        className=\"z-50\"\n      >\n        <PopoverPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'min-w-[var(--ui-popover-container-min-width)] max-w-[var(--ui-popover-container-max-width)] rounded-[var(--ui-popover-container-border-radius)] border-[length:var(--ui-popover-container-border-width)] border-solid border-[var(--ui-popover-container-border-color)] bg-[var(--ui-popover-container-color)] text-foreground outline-none',\n            'duration-200 data-[open]:animate-in data-[closed]:animate-out data-[open]:fade-in-0 data-[closed]:fade-out-0 data-[open]:zoom-in-95 data-[closed]:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    );\n\n    return portal ? (\n      <PopoverPrimitive.Portal container={resolvedContainer} keepMounted={keepMounted}>\n        {positioner}\n      </PopoverPrimitive.Portal>\n    ) : (\n      positioner\n    );\n  }\n);\nPopoverContent.displayName = 'PopoverContent';\n\n/**\n * Vertical-rhythm wrapper for a `PopoverContent`'s main content — the `Body`\n * slot in the Figma node. Themed from `--ui-popover-body-*` (gap, padding-y);\n * horizontal inset is a plain utility since the design has no dedicated\n * component token for it.\n */\nconst PopoverBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex w-full flex-col gap-[var(--ui-popover-body-gap)] px-4 py-[var(--ui-popover-body-padding-y)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nPopoverBody.displayName = 'PopoverBody';\n\n/**\n * Default action-row footer — the `FooterDefault` (`variant=default`) recipe\n * from the Figma node. Themed from the shared `--ui-footer-*` tier.\n */\nconst PopoverFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex h-[var(--ui-footer-global-height)] w-full shrink-0 items-center justify-end gap-[var(--ui-footer-global-gap)] border-t-[length:var(--ui-footer-default-border-width)] border-solid border-[var(--ui-footer-default-border-color)] bg-[var(--ui-footer-default-color)] px-[var(--ui-footer-global-padding-x)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nPopoverFooter.displayName = 'PopoverFooter';\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverPortal,\n  PopoverContent,\n  PopoverBody,\n  PopoverFooter,\n};\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverPortal","PopoverContent","React","className","side","align","sideOffset","portal","portalContainer","keepMounted","props","ref","ctxContainer","usePortalContainer","resolvedContainer","positioner","jsx","cn","PopoverBody","PopoverFooter"],"mappings":";;;;;AAoBA,MAAMA,IAAUC,EAAiB,MAE3BC,IAAiBD,EAAiB,SAElCE,IAAgBF,EAAiB,QAwBjCG,IAAiBC,EAAM;AAAA,EAI3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAS;AAAA,IACT,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAeC,EAAA,GACfC,IAAoBN,KAAmBI,GAEvCG,IACJ,gBAAAC;AAAA,MAAClB,EAAiB;AAAA,MAAjB;AAAA,QACC,MAAAM;AAAA,QACA,OAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAU;AAAA,UAAClB,EAAiB;AAAA,UAAjB;AAAA,YACC,KAAAa;AAAA,YACA,WAAWM;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAd;AAAA,YAAA;AAAA,YAED,GAAGO;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAIJ,WAAOH,sBACJT,EAAiB,QAAjB,EAAwB,WAAWgB,GAAmB,aAAAL,GACpD,UAAAM,EAAA,CACH,IAEAA;AAAA,EAEJ;AACF;AACAd,EAAe,cAAc;AAQ7B,MAAMiB,IAAchB,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGO,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,MAED,GAAGO;AAAA,IAAA;AAAA,EAAA;AAGV;AACAQ,EAAY,cAAc;AAM1B,MAAMC,IAAgBjB,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,GAAGO,EAAA,GAASC,MACxB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWM;AAAA,QACT;AAAA,QACAd;AAAA,MAAA;AAAA,MAED,GAAGO;AAAA,IAAA;AAAA,EAAA;AAGV;AACAS,EAAc,cAAc;"}

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

@@ -0,0 +1,74 @@
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import * as R from "react";
+import { cva as v } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { RadarChart as x, PolarGrid as y, PolarAngleAxis as A, Radar as N } from "recharts";
+import { cn as T } from "../../../lib/utils.js";
+import { ChartContainer as $, ChartTooltip as j, ChartTooltipContent as K, ChartLegend as L, ChartLegendContent as P } from "../chart/chart.js";
+const V = v("", {
+  variants: {
+    gridType: {
+      polygon: "",
+      circle: ""
+    }
+  },
+  defaultVariants: {
+    gridType: "polygon"
+  }
+}), _ = R.forwardRef(
+  ({
+    className: o,
+    config: e,
+    data: i,
+    dataKeys: n,
+    angleKey: l,
+    gridType: t = "polygon",
+    fillOpacity: d = 0.3,
+    strokeWidth: s = 2,
+    showDots: c = !1,
+    showGrid: m = !0,
+    showTooltip: p = !0,
+    showLegend: f = !0,
+    tooltipContent: h,
+    ...C
+  }, g) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: g,
+      "data-grid-type": t,
+      className: T(V({ gridType: t }), o),
+      ...C,
+      children: /* @__PURE__ */ r(
+        $,
+        {
+          config: e,
+          className: "size-full [&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground",
+          children: /* @__PURE__ */ u(x, { data: i, children: [
+            p && /* @__PURE__ */ r(j, { content: h ?? /* @__PURE__ */ r(K, {}) }),
+            m && /* @__PURE__ */ r(y, { gridType: t ?? "polygon" }),
+            /* @__PURE__ */ r(A, { dataKey: l }),
+            f && /* @__PURE__ */ r(L, { content: /* @__PURE__ */ r(P, {}) }),
+            n.map((a) => /* @__PURE__ */ r(
+              N,
+              {
+                dataKey: a,
+                stroke: `var(--color-${a})`,
+                fill: `var(--color-${a})`,
+                fillOpacity: d,
+                strokeWidth: s,
+                dot: c ? { r: 3 } : !1,
+                isAnimationActive: !1
+              },
+              a
+            ))
+          ] })
+        }
+      )
+    }
+  )
+);
+_.displayName = "RadarChart";
+export {
+  _ as RadarChart,
+  V as radarChartVariants
+};
+//# sourceMappingURL=radar-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-chart.js","sources":["../../../../src/components/ui/radar-chart/radar-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  Radar,\n  RadarChart as RechartsRadarChart,\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 — the first\n// polar chart type. The single CVA axis is the design's Radar-chart variant set:\n// `gridType` (the polar web is drawn as straight-edged `polygon` rings or smooth\n// `circle` rings). The class stays empty because recharts' SVG — not CSS — draws\n// the web: `gridType` drives `<PolarGrid gridType>`. CVA is kept so the variant\n// set is a first-class, spec-conformant part of the API (matched against\n// ui-spec's api.yaml enums) and exposed via `VariantProps`; the resolved value is\n// also mirrored onto `data-grid-type`.\nconst radarChartVariants = cva('', {\n  variants: {\n    gridType: {\n      polygon: '',\n      circle: '',\n    },\n  },\n  defaultVariants: {\n    gridType: 'polygon',\n  },\n});\n\nexport interface RadarChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof radarChartVariants> {\n  /** Row-per-axis data. Each object holds the `angleKey` label + one numeric field per series. */\n  data: ReadonlyArray<Record<string, string | number>>;\n  /**\n   * Per-series map of `label` / `color` (imported from the shared `Chart`\n   * primitives). Turned into `--color-<key>` custom properties. Series colors\n   * are caller-supplied — reference an existing semantic `--ui-*` token; there is\n   * no chart palette tier yet.\n   */\n  config: ChartConfig;\n  /** Series to plot — one `<Radar>` per key. Each must exist in `config` and in every data row. */\n  dataKeys: string[];\n  /** The categorical axis key placed around the web (e.g. `\"subject\"`). */\n  angleKey: string;\n  /** Fill opacity of each radar area. */\n  fillOpacity?: number;\n  /** Stroke width of each radar outline. */\n  strokeWidth?: number;\n  /** Render a dot at each axis point. */\n  showDots?: boolean;\n  /** Render the polar grid (the web). */\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 RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      angleKey,\n      gridType = 'polygon',\n      fillOpacity = 0.3,\n      strokeWidth = 2,\n      showDots = false,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        data-grid-type={gridType}\n        className={cn(radarChartVariants({ gridType }), className)}\n        {...props}\n      >\n        <ChartContainer\n          config={config}\n          // The shared container themes cartesian axis ticks but not polar ones,\n          // so scope the angle-axis (spoke) labels to the muted-foreground token\n          // here — otherwise they render near-black and vanish in dark mode. This\n          // is a shared-primitives gap (a Chart task); worked around locally, not\n          // by editing chart.tsx.\n          className=\"size-full [&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground\"\n        >\n          <RechartsRadarChart data={data as readonly unknown[]}>\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showGrid && <PolarGrid gridType={gridType ?? 'polygon'} />}\n            <PolarAngleAxis dataKey={angleKey} />\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key) => (\n              <Radar\n                key={key}\n                dataKey={key}\n                stroke={`var(--color-${key})`}\n                fill={`var(--color-${key})`}\n                fillOpacity={fillOpacity}\n                strokeWidth={strokeWidth}\n                dot={showDots ? { r: 3 } : false}\n                isAnimationActive={false}\n              />\n            ))}\n          </RechartsRadarChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nRadarChart.displayName = 'RadarChart';\n\nexport { RadarChart, radarChartVariants };\n"],"names":["radarChartVariants","cva","RadarChart","React","className","config","data","dataKeys","angleKey","gridType","fillOpacity","strokeWidth","showDots","showGrid","showTooltip","showLegend","tooltipContent","props","ref","jsx","cn","ChartContainer","jsxs","RechartsRadarChart","ChartTooltip","ChartTooltipContent","PolarGrid","PolarAngleAxis","ChartLegend","ChartLegendContent","key","Radar"],"mappings":";;;;;;AA6BA,MAAMA,IAAqBC,EAAI,IAAI;AAAA,EACjC,UAAU;AAAA,IACR,UAAU;AAAA,MACR,SAAS;AAAA,MACT,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,UAAU;AAAA,EAAA;AAEd,CAAC,GAqCKC,IAAaC,EAAM;AAAA,EACvB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,YAAAC,IAAa;AAAA,IACb,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAGE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,kBAAgBT;AAAA,MAChB,WAAWW,EAAGpB,EAAmB,EAAE,UAAAS,EAAA,CAAU,GAAGL,CAAS;AAAA,MACxD,GAAGa;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,QAAAhB;AAAA,UAMA,WAAU;AAAA,UAEV,UAAA,gBAAAiB,EAACC,KAAmB,MAAAjB,GACjB,UAAA;AAAA,YAAAQ,uBACEU,GAAA,EAAa,SAASR,KAAkB,gBAAAG,EAACM,KAAoB,GAAI;AAAA,YAEnEZ,KAAY,gBAAAM,EAACO,GAAA,EAAU,UAAUjB,KAAY,WAAW;AAAA,YACzD,gBAAAU,EAACQ,GAAA,EAAe,SAASnB,EAAA,CAAU;AAAA,YAClCO,KAAc,gBAAAI,EAACS,GAAA,EAAY,SAAS,gBAAAT,EAACU,KAAmB,GAAI;AAAA,YAC5DtB,EAAS,IAAI,CAACuB,MACb,gBAAAX;AAAA,cAACY;AAAA,cAAA;AAAA,gBAEC,SAASD;AAAA,gBACT,QAAQ,eAAeA,CAAG;AAAA,gBAC1B,MAAM,eAAeA,CAAG;AAAA,gBACxB,aAAApB;AAAA,gBACA,aAAAC;AAAA,gBACA,KAAKC,IAAW,EAAE,GAAG,MAAM;AAAA,gBAC3B,mBAAmB;AAAA,cAAA;AAAA,cAPdkB;AAAA,YAAA,CASR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AACA5B,EAAW,cAAc;"}

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/sankey-chart/sankey-chart.js

@@ -0,0 +1,192 @@
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import * as f from "react";
+import { Sankey as R, Rectangle as T } from "recharts";
+import { cn as j } from "../../../lib/utils.js";
+import { ChartStyle as A, ChartContainer as q, ChartTooltip as B } from "../chart/chart.js";
+function F(s, n, e) {
+  return function({
+    x: l,
+    y: m,
+    width: d,
+    height: t,
+    index: c,
+    payload: a
+  }) {
+    var i;
+    const r = String(a.name), h = ((i = s[r]) == null ? void 0 : i.label) ?? r, x = n.has(c);
+    return /* @__PURE__ */ b("g", { children: [
+      /* @__PURE__ */ o(
+        T,
+        {
+          x: l,
+          y: m,
+          width: d,
+          height: t,
+          fill: `var(--color-${r})`,
+          radius: 2
+        }
+      ),
+      e && /* @__PURE__ */ o(
+        "text",
+        {
+          x: x ? l + d + 6 : l - 6,
+          y: m + t / 2,
+          textAnchor: x ? "start" : "end",
+          dominantBaseline: "middle",
+          className: "fill-foreground text-xs",
+          children: h
+        }
+      )
+    ] });
+  };
+}
+function L({
+  sourceX: s,
+  targetX: n,
+  sourceY: e,
+  targetY: g,
+  sourceControlX: l,
+  targetControlX: m,
+  linkWidth: d,
+  payload: t
+}) {
+  const c = String(t.target.name), a = t.color ?? `var(--color-${c})`;
+  return /* @__PURE__ */ o(
+    "path",
+    {
+      d: `M${s},${e}C${l},${e} ${m},${g} ${n},${g}`,
+      fill: "none",
+      stroke: a,
+      strokeWidth: Math.max(1, d),
+      strokeOpacity: t.color ? 1 : 0.35
+    }
+  );
+}
+function O(s, n, e) {
+  var m, d;
+  const g = (t) => {
+    var c;
+    return ((c = s[t]) == null ? void 0 : c.label) ?? t;
+  }, l = /* @__PURE__ */ new Map();
+  for (const t of n) {
+    const c = ((m = e[t.source]) == null ? void 0 : m.name) ?? "", a = ((d = e[t.target]) == null ? void 0 : d.name) ?? "";
+    l.set(c + " - " + a, {
+      color: t.color ?? `var(--color-${a})`,
+      opacity: t.color ? 1 : 0.35
+    });
+  }
+  return function({
+    active: c,
+    payload: a
+  }) {
+    if (!c || !(a != null && a.length)) return null;
+    const r = a[0], h = String((r == null ? void 0 : r.name) ?? "").split(" - "), x = h[h.length - 1], i = l.get(String((r == null ? void 0 : r.name) ?? "")), v = (i == null ? void 0 : i.color) ?? `var(--color-${x})`, y = (i == null ? void 0 : i.opacity) ?? 1, C = r == null ? void 0 : r.value;
+    return /* @__PURE__ */ b("div", { className: "flex items-center gap-2 rounded-[var(--ui-tooltip-container-border-radius)] border border-border bg-background px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs text-foreground shadow-md", children: [
+      /* @__PURE__ */ o(
+        "span",
+        {
+          className: "h-2.5 w-2.5 shrink-0 rounded-[2px]",
+          style: { backgroundColor: v, opacity: y }
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: h.map((M, w) => /* @__PURE__ */ b(f.Fragment, { children: [
+        w > 0 && " → ",
+        g(M)
+      ] }, `${M}-${w}`)) }),
+      C != null && /* @__PURE__ */ o("span", { className: "ms-2 font-medium tabular-nums", children: I(C) })
+    ] });
+  };
+}
+function I(s) {
+  return Array.isArray(s) ? s.map((n) => I(n)).join(" – ") : typeof s == "number" ? s.toLocaleString() : String(s);
+}
+const z = f.forwardRef(
+  ({
+    className: s,
+    config: n,
+    data: e,
+    nodePadding: g = 24,
+    nodeWidth: l = 12,
+    linkCurvature: m = 0.5,
+    sort: d = !1,
+    showLabels: t = !0,
+    showLegend: c = !1,
+    showTooltip: a = !0,
+    tooltipContent: r,
+    ...h
+  }, x) => {
+    const v = `chart-${f.useId().replace(/:/g, "")}`, y = f.useMemo(
+      () => new Set(e.links.map((u) => u.source)),
+      [e.links]
+    ), C = f.useMemo(
+      () => F(n, y, t),
+      [n, y, t]
+    ), M = f.useMemo(
+      () => O(n, e.links, e.nodes),
+      [n, e.links, e.nodes]
+    ), w = f.useMemo(() => {
+      const u = /* @__PURE__ */ new Map(), N = /* @__PURE__ */ new Map();
+      for (const p of e.links)
+        N.set(p.source, (N.get(p.source) ?? 0) + p.value), u.set(p.target, (u.get(p.target) ?? 0) + p.value);
+      const k = e.nodes.map(
+        (p, $) => u.get($) ?? N.get($) ?? 0
+      ), S = k.length ? Math.max(...k) : 0;
+      return e.nodes.map((p, $) => ({
+        name: p.name,
+        value: k[$],
+        pct: S > 0 ? Math.round(k[$] / S * 100) : 0
+      }));
+    }, [e]);
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        ref: x,
+        "data-chart": v,
+        className: j("flex flex-col", s),
+        ...h,
+        children: [
+          /* @__PURE__ */ o(A, { id: v, config: n }),
+          /* @__PURE__ */ o(q, { config: n, className: "min-h-0 flex-1", children: /* @__PURE__ */ o(
+            R,
+            {
+              data: e,
+              node: C,
+              link: L,
+              nodePadding: g,
+              nodeWidth: l,
+              linkCurvature: m,
+              sort: d,
+              align: "left",
+              margin: { top: 8, right: 24, bottom: 8, left: 24 },
+              children: a && /* @__PURE__ */ o(B, { content: r ?? M })
+            }
+          ) }),
+          c && /* @__PURE__ */ o("div", { className: "mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs", children: w.map(({ name: u, value: N, pct: k }) => {
+            var S;
+            return /* @__PURE__ */ b("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "size-2.5 shrink-0 rounded-full",
+                  style: { backgroundColor: `var(--color-${u})` }
+                }
+              ),
+              /* @__PURE__ */ o("span", { className: "truncate text-muted-foreground", children: ((S = n[u]) == null ? void 0 : S.label) ?? u }),
+              /* @__PURE__ */ o("span", { className: "ms-auto font-semibold tabular-nums", children: N.toLocaleString() }),
+              /* @__PURE__ */ b("span", { className: "w-9 shrink-0 text-end tabular-nums text-muted-foreground", children: [
+                k,
+                "%"
+              ] })
+            ] }, u);
+          }) })
+        ]
+      }
+    );
+  }
+);
+z.displayName = "SankeyChart";
+export {
+  z as SankeyChart,
+  O as makeSankeyTooltip
+};
+//# sourceMappingURL=sankey-chart.js.map