@acronis-platform/ui-react 0.57.0 → 0.58.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":"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"}

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

@@ -0,0 +1,79 @@
+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 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: e = "bottom",
+    align: t = "center",
+    sideOffset: p = 4,
+    portal: l = !0,
+    portalContainer: s,
+    keepMounted: v,
+    ...c
+  }, f) => {
+    const m = b(), u = s ?? m, n = /* @__PURE__ */ a(
+      o.Positioner,
+      {
+        side: e,
+        align: t,
+        sideOffset: p,
+        className: "z-50",
+        children: /* @__PURE__ */ a(
+          o.Popup,
+          {
+            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
+            ),
+            ...c
+          }
+        )
+      }
+    );
+    return l ? /* @__PURE__ */ a(o.Portal, { container: u, keepMounted: v, children: n }) : n;
+  }
+);
+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 {
+  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

@@ -0,0 +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). 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/progress/progress.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as i from "react";
+import { Progress as r } from "@base-ui/react";
+import { cn as n } from "../../../lib/utils.js";
+const s = i.forwardRef(
+  ({ className: o, value: a, ...l }, t) => /* @__PURE__ */ e(
+    r.Root,
+    {
+      ref: t,
+      value: a ?? null,
+      className: n(
+        "relative h-2 w-full overflow-hidden rounded-full",
+        o
+      ),
+      ...l,
+      children: /* @__PURE__ */ e(r.Track, { className: "relative h-full w-full overflow-hidden bg-input", children: /* @__PURE__ */ e(
+        r.Indicator,
+        {
+          className: "h-full bg-secondary transition-all data-[indeterminate]:animate-indeterminate-progress data-[indeterminate]:transition-none",
+          style: a == null ? { width: "33%" } : void 0
+        }
+      ) })
+    }
+  )
+);
+s.displayName = "Progress";
+export {
+  s as Progress
+};
+//# sourceMappingURL=progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","sources":["../../../../src/components/ui/progress/progress.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitive } from '@base-ui/react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `progress`\n// (packages/ui-legacy/src/components/ui/progress.tsx). Wraps Base UI's Progress\n// primitive (Root → Track → Indicator). No `--ui-progress-*` tier yet: the\n// track uses the shared border token via `bg-input`, and the filled indicator\n// uses the brand action blue via `bg-secondary` (--ui-background-brand-secondary,\n// the same remap Spinner uses — ui-react's `primary` is the dark navy, not the\n// action color legacy's `bg-primary` meant). When `value` is `null` the bar is\n// indeterminate: Base UI sets `data-indeterminate`, which swaps the determinate\n// width transition for the sliding `indeterminate-progress` keyframe (registered\n// in src/styles/index.css).\n// Base UI types `value` as required; we make it optional so `<Progress />`\n// renders an indeterminate bar (the `value ?? null` below normalizes it).\nexport type ProgressProps = Omit<\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n  'value'\n> & {\n  value?: number | null;\n};\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  ({ className, value, ...props }, ref) => (\n    <ProgressPrimitive.Root\n      ref={ref}\n      value={value ?? null}\n      className={cn(\n        'relative h-2 w-full overflow-hidden rounded-full',\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Track className=\"relative h-full w-full overflow-hidden bg-input\">\n        <ProgressPrimitive.Indicator\n          className=\"h-full bg-secondary transition-all data-[indeterminate]:animate-indeterminate-progress data-[indeterminate]:transition-none\"\n          style={value == null ? { width: '33%' } : undefined}\n        />\n      </ProgressPrimitive.Track>\n    </ProgressPrimitive.Root>\n  )\n);\nProgress.displayName = 'Progress';\n\nexport { Progress };\n"],"names":["Progress","React","className","value","props","ref","jsx","ProgressPrimitive","cn"],"mappings":";;;;AA0BA,MAAMA,IAAWC,EAAM;AAAA,EACrB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAC/B,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,KAAAF;AAAA,MACA,OAAOF,KAAS;AAAA,MAChB,WAAWK;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAE,EAACC,EAAkB,OAAlB,EAAwB,WAAU,mDACjC,UAAA,gBAAAD;AAAA,QAACC,EAAkB;AAAA,QAAlB;AAAA,UACC,WAAU;AAAA,UACV,OAAOJ,KAAS,OAAO,EAAE,OAAO,UAAU;AAAA,QAAA;AAAA,MAAA,EAC5C,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AACAH,EAAS,cAAc;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.js","sources":["../../../../src/components/ui/progress-circle/progress-circle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitive } from '@base-ui/react/progress';\nimport {\n  CircleCheckIcon,\n  CircleTimesIcon,\n  TriangleWarningIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A circular (radial) progress indicator — an SVG ring whose arc fills with the\n// value and whose color tracks the level (danger → critical → warning →\n// success). Built from the Cyber-Compliance \"Compliance %\" design (node\n// 2396-186059) and the Vue kit's `AvProgressRadial`. The ring is wrapped in the\n// Base UI Progress primitive so it carries the proper `role=\"progressbar\"` +\n// `aria-valuenow/min/max`; the visuals are a hand-drawn SVG (Base UI's Track/\n// Indicator are linear-only). No `--ui-progress-circle-*` tier — the arc uses the\n// shared status colors (`--ui-text-on-status-*`), the track the border token, and\n// the center label the surface foreground.\n\n// `brand` is the neutral single-color mode (matches the linear Progress accent);\n// the others are score levels. With no `status`, the level is derived from the\n// value (like the Vue ProgressRadial).\nexport type ProgressCircleStatus =\n  | 'brand'\n  | 'danger'\n  | 'critical'\n  | 'warning'\n  | 'success';\n\n// Size → [diameter px, stroke px, center font class]. The table cell uses the\n// smaller sizes; lg suits cards/widgets.\nconst SIZES = {\n  tiny: { d: 16, stroke: 2, font: 'text-[10px] leading-none' },\n  sm: { d: 24, stroke: 3, font: 'text-[10px] leading-none' },\n  md: { d: 40, stroke: 4, font: 'text-xs font-semibold' },\n  lg: { d: 64, stroke: 5, font: 'text-sm font-semibold' },\n} as const;\n\nexport type ProgressCircleSize = keyof typeof SIZES;\n\nconst ARC_COLOR: Record<ProgressCircleStatus, string> = {\n  brand: 'stroke-[var(--ui-background-brand-secondary)]',\n  danger: 'stroke-[var(--ui-text-on-status-danger)]',\n  critical: 'stroke-[var(--ui-text-on-status-critical)]',\n  warning: 'stroke-[var(--ui-text-on-status-warning)]',\n  success: 'stroke-[var(--ui-text-on-status-success)]',\n};\n\n// `brand` has no score icon — only the level statuses do.\nconst ICON_BY_STATUS: Partial<Record<ProgressCircleStatus, React.ReactNode>> = {\n  danger: <CircleTimesIcon className=\"text-[var(--ui-text-on-status-danger)]\" />,\n  critical: (\n    <TriangleWarningIcon className=\"text-[var(--ui-text-on-status-critical)]\" />\n  ),\n  warning: (\n    <TriangleWarningIcon className=\"text-[var(--ui-text-on-status-warning)]\" />\n  ),\n  success: (\n    <CircleCheckIcon className=\"text-[var(--ui-text-on-status-success)]\" />\n  ),\n};\n\n// Default value → status thresholds (confirm exact breakpoints with design — the\n// Figma shows ~25% danger, 50% critical, 75% warning, 80%+ success).\nfunction statusForFraction(fraction: number): ProgressCircleStatus {\n  if (fraction >= 0.8) return 'success';\n  if (fraction >= 0.6) return 'warning';\n  if (fraction >= 0.4) return 'critical';\n  return 'danger';\n}\n\nconst progressCircleVariants = cva(\n  'relative inline-flex shrink-0 items-center justify-center',\n  {\n    variants: {\n      size: { tiny: '', sm: '', md: '', lg: '' },\n    },\n    defaultVariants: { size: 'sm' },\n  }\n);\n\nexport interface ProgressCircleProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n    VariantProps<typeof progressCircleVariants> {\n  /** Current progress; clamped to `[0, max]`. */\n  value?: number;\n  /** Value representing full completion. */\n  max?: number;\n  /** Ring diameter + stroke. Defaults to `sm`. */\n  size?: ProgressCircleSize;\n  /** Color level for the arc. Omit to derive from `value`/`max` by thresholds. */\n  status?: ProgressCircleStatus;\n  /** Show the rounded percentage in the center. */\n  showValue?: boolean;\n  /** Show a status icon in the center (takes priority over `showValue`). */\n  showIcon?: boolean;\n  /** Custom center content (takes priority over icon/value). */\n  children?: React.ReactNode;\n}\n\nconst ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>(\n  (\n    {\n      className,\n      value = 0,\n      max = 100,\n      size = 'sm',\n      status,\n      showValue = false,\n      showIcon = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const { d, stroke, font } = SIZES[size];\n    const safeMax = max > 0 ? max : 100;\n    const fraction = Math.min(1, Math.max(0, value / safeMax));\n    const level = status ?? statusForFraction(fraction);\n    const radius = (d - stroke) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const center = d / 2;\n    const icon = showIcon ? ICON_BY_STATUS[level] : undefined;\n    const centerContent =\n      children ?? icon ?? (showValue ? `${Math.round(fraction * 100)}%` : null);\n\n    return (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={value}\n        max={max}\n        className={cn(progressCircleVariants({ size }), className)}\n        style={{ width: d, height: d }}\n        {...props}\n      >\n        <svg\n          width={d}\n          height={d}\n          viewBox={`0 0 ${d} ${d}`}\n          className=\"-rotate-90\"\n          aria-hidden=\"true\"\n        >\n          <circle\n            className=\"stroke-[var(--ui-border-on-surface-border)]\"\n            fill=\"none\"\n            strokeWidth={stroke}\n            cx={center}\n            cy={center}\n            r={radius}\n          />\n          <circle\n            className={cn(ARC_COLOR[level], 'transition-[stroke-dashoffset]')}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            cx={center}\n            cy={center}\n            r={radius}\n            strokeDasharray={circumference}\n            strokeDashoffset={circumference * (1 - fraction)}\n          />\n        </svg>\n        {centerContent != null && (\n          <span\n            className={cn(\n              'absolute inset-0 flex items-center justify-center text-foreground [&_svg]:size-[60%]',\n              font\n            )}\n          >\n            {centerContent}\n          </span>\n        )}\n      </ProgressPrimitive.Root>\n    );\n  }\n);\nProgressCircle.displayName = 'ProgressCircle';\n\nexport { ProgressCircle, progressCircleVariants };\n"],"names":["SIZES","ARC_COLOR","ICON_BY_STATUS","jsx","CircleTimesIcon","TriangleWarningIcon","CircleCheckIcon","statusForFraction","fraction","progressCircleVariants","cva","ProgressCircle","React","className","value","max","size","status","showValue","showIcon","children","props","ref","d","stroke","font","safeMax","level","radius","circumference","center","icon","centerContent","jsxs","ProgressPrimitive","cn"],"mappings":"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"}

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/radio/radio.js

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