@acronis-platform/ui-react 0.57.1 → 0.58.0

package/dist/components/ui/metric/metric.js

@@ -0,0 +1,185 @@
+import { jsxs as t, jsx as e, Fragment as k } from "react/jsx-runtime";
+import * as n from "react";
+import { cva as S } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { CircleInfoIcon as I } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as a } from "../../../lib/utils.js";
+import { Card as _ } from "../card/card.js";
+import { Tooltip as z, TooltipTrigger as T, TooltipContent as A } from "../tooltip/tooltip.js";
+import { Skeleton as Z } from "../skeleton/skeleton.js";
+const j = S("flex flex-col", {
+  variants: {
+    size: {
+      small: "gap-1",
+      medium: "gap-1.5",
+      large: "gap-2"
+    },
+    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a
+    // cva axis so the enum is spec-conformant; the tint is applied on the badge.
+    status: {
+      neutral: "",
+      info: "",
+      success: "",
+      warning: "",
+      danger: "",
+      critical: ""
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    status: "neutral"
+  }
+}), y = {
+  small: "text-[10px]",
+  medium: "text-[11px]",
+  large: "text-xs"
+}, B = {
+  small: "text-2xl",
+  medium: "text-3xl",
+  large: "text-4xl"
+}, C = {
+  small: "text-sm",
+  medium: "text-base",
+  large: "text-lg"
+}, G = {
+  small: "text-xs",
+  medium: "text-xs",
+  large: "text-sm"
+}, L = {
+  small: "size-7",
+  medium: "size-8",
+  large: "size-10"
+}, U = {
+  small: 14,
+  medium: 16,
+  large: 20
+}, V = {
+  small: "h-6 w-16",
+  medium: "h-8 w-20",
+  large: "h-10 w-28"
+}, D = {
+  neutral: "bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]",
+  info: "bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]",
+  success: "bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]",
+  warning: "bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]",
+  danger: "bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]",
+  critical: "bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]"
+}, M = n.forwardRef(
+  ({
+    className: f,
+    label: p,
+    value: h,
+    unit: l,
+    caption: i,
+    trend: c,
+    supportingText: m,
+    badge: d,
+    icon: r,
+    tooltip: u,
+    tooltipLabel: v = "More information",
+    loading: N = !1,
+    size: o,
+    status: x,
+    children: b,
+    ...w
+  }, E) => {
+    const s = o ?? "medium", g = x ?? "neutral";
+    return /* @__PURE__ */ t(
+      _,
+      {
+        ref: E,
+        "data-size": s,
+        "data-status": g,
+        className: a("flex flex-col p-4", f),
+        ...w,
+        children: [
+          /* @__PURE__ */ t("div", { className: a(j({ size: o, status: x })), children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      "min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground",
+                      y[s]
+                    ),
+                    children: p
+                  }
+                ),
+                u != null && /* @__PURE__ */ t(z, { children: [
+                  /* @__PURE__ */ e(
+                    T,
+                    {
+                      "aria-label": v,
+                      className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
+                      children: /* @__PURE__ */ e(I, { size: 16, "aria-hidden": !0 })
+                    }
+                  ),
+                  /* @__PURE__ */ e(A, { children: u })
+                ] })
+              ] }),
+              i != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: i })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-2", children: [
+                r != null && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: a(
+                      "flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0",
+                      L[s],
+                      D[g]
+                    ),
+                    children: n.isValidElement(r) ? n.cloneElement(
+                      r,
+                      { size: U[s] }
+                    ) : r
+                  }
+                ),
+                /* @__PURE__ */ t("div", { className: "flex min-w-0 items-baseline gap-1", children: [
+                  N ? /* @__PURE__ */ e(Z, { className: V[s] }) : /* @__PURE__ */ t(k, { children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: a(
+                          "font-bold leading-none tabular-nums text-foreground",
+                          B[s]
+                        ),
+                        children: h
+                      }
+                    ),
+                    l != null && /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: a(
+                          "font-medium text-muted-foreground",
+                          C[s]
+                        ),
+                        children: l
+                      }
+                    )
+                  ] }),
+                  d != null && /* @__PURE__ */ e("span", { className: "ms-1 self-center", children: d })
+                ] })
+              ] }),
+              c != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: c })
+            ] }),
+            m != null && /* @__PURE__ */ e(
+              "div",
+              {
+                className: a("text-muted-foreground", G[s]),
+                children: m
+              }
+            )
+          ] }),
+          b
+        ]
+      }
+    );
+  }
+);
+M.displayName = "Metric";
+export {
+  M as Metric
+};
+//# sourceMappingURL=metric.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metric.js","sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Card } from '../card';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric / statistic, laid out after the Figma MetricCard node:\n// a label row (label + an optional top-right caption) over a value row (an\n// optional status-tinted icon badge + the value + unit on the left, an optional\n// trend on the right), with optional supporting text below. It owns visual\n// hierarchy and layout only — it never computes or formats the value, converts\n// units, or decides whether a value is good or bad; the consumer passes\n// ready-to-render nodes and a resolved `status`, and composes a `TrendIndicator`\n// into the trend slot. `status` tints the icon badge (a subtle cue, not a full\n// color fill). No dedicated token tier — colors are semantic `--ui-*` tokens and\n// geometry uses the Tailwind scale.\nconst metricVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'gap-1',\n      medium: 'gap-1.5',\n      large: 'gap-2',\n    },\n    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a\n    // cva axis so the enum is spec-conformant; the tint is applied on the badge.\n    status: {\n      neutral: '',\n      info: '',\n      success: '',\n      warning: '',\n      danger: '',\n      critical: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    status: 'neutral',\n  },\n});\n\nconst LABEL_SIZE = {\n  small: 'text-[10px]',\n  medium: 'text-[11px]',\n  large: 'text-xs',\n} as const;\n\nconst VALUE_SIZE = {\n  small: 'text-2xl',\n  medium: 'text-3xl',\n  large: 'text-4xl',\n} as const;\n\nconst UNIT_SIZE = {\n  small: 'text-sm',\n  medium: 'text-base',\n  large: 'text-lg',\n} as const;\n\nconst SUPPORTING_SIZE = {\n  small: 'text-xs',\n  medium: 'text-xs',\n  large: 'text-sm',\n} as const;\n\nconst BADGE_SIZE = {\n  small: 'size-7',\n  medium: 'size-8',\n  large: 'size-10',\n} as const;\n\n// icons-react icons size themselves from a `size` prop (which also picks the\n// designed stroke weight) — CSS can't do that reliably — so the badge icon is\n// cloned to the right px for the Metric size.\nconst BADGE_ICON_PX = {\n  small: 14,\n  medium: 16,\n  large: 20,\n} as const;\n\nconst SKELETON_SIZE = {\n  small: 'h-6 w-16',\n  medium: 'h-8 w-20',\n  large: 'h-10 w-28',\n} as const;\n\n// The badge pairs the status \"pressed\" background tint with its matching icon\n// color (the same pairing the design uses for status icon chips).\nconst STATUS_BADGE = {\n  neutral:\n    'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  info: 'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  success:\n    'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  warning:\n    'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  danger:\n    'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  critical:\n    'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n} as const;\n\nexport interface MetricProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof metricVariants> {\n  /** What the value measures — e.g. \"Gross margin\". Rendered as an uppercase note heading. */\n  label: React.ReactNode;\n  /**\n   * The primary value, already formatted (`73`, `\"94%\"`, `\"$72K\"`, `\"2.8\"`).\n   * The kit does not format currency, units, or decimals.\n   */\n  value: React.ReactNode;\n  /** Unit shown next to the value at a smaller, muted size — e.g. `\"%\"`, `\"hours\"`. */\n  unit?: React.ReactNode;\n  /** A top-right caption aligned with the label — e.g. a timeframe `Tag` (\"Last 30 days\"). */\n  caption?: React.ReactNode;\n  /** A trend slot on the right of the value — typically a `TrendIndicator`. */\n  trend?: React.ReactNode;\n  /** Secondary line below the value — e.g. \"Target: 99%\". */\n  supportingText?: React.ReactNode;\n  /** A small badge / metadata slot beside the value — e.g. a `Tag`. */\n  badge?: React.ReactNode;\n  /** Icon rendered in a status-tinted badge before the value. */\n  icon?: React.ReactNode;\n  /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Accessible name for the info affordance that reveals `tooltip`. */\n  tooltipLabel?: string;\n  /** Show a skeleton in place of the value, preserving its space. */\n  loading?: boolean;\n  /** Card body below the header — e.g. a chart, a Separator, an insight line. */\n  children?: React.ReactNode;\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      unit,\n      caption,\n      trend,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      size,\n      status,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSize = size ?? 'medium';\n    const resolvedStatus = status ?? 'neutral';\n\n    return (\n      <Card\n        ref={ref}\n        data-size={resolvedSize}\n        data-status={resolvedStatus}\n        className={cn('flex flex-col p-4', className)}\n        {...props}\n      >\n        <div className={cn(metricVariants({ size, status }))}>\n        {/* Label row: label (+ optional info) on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                'min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground',\n                LABEL_SIZE[resolvedSize]\n              )}\n            >\n              {label}\n            </span>\n            {tooltip != null && (\n              <Tooltip>\n                <TooltipTrigger\n                  aria-label={tooltipLabel}\n                  className=\"inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground\"\n                >\n                  <CircleInfoIcon size={16} aria-hidden />\n                </TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n          {caption != null && <div className=\"shrink-0\">{caption}</div>}\n        </div>\n\n        {/* Value row: badge + value + unit on the left, trend on the right. */}\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            {icon != null && (\n              <span\n                aria-hidden\n                className={cn(\n                  'flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0',\n                  BADGE_SIZE[resolvedSize],\n                  STATUS_BADGE[resolvedStatus]\n                )}\n              >\n                {React.isValidElement(icon)\n                  ? React.cloneElement(\n                      icon as React.ReactElement<{ size?: number }>,\n                      { size: BADGE_ICON_PX[resolvedSize] }\n                    )\n                  : icon}\n              </span>\n            )}\n            <div className=\"flex min-w-0 items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className={SKELETON_SIZE[resolvedSize]} />\n              ) : (\n                <>\n                  <span\n                    className={cn(\n                      'font-bold leading-none tabular-nums text-foreground',\n                      VALUE_SIZE[resolvedSize]\n                    )}\n                  >\n                    {value}\n                  </span>\n                  {unit != null && (\n                    <span\n                      className={cn(\n                        'font-medium text-muted-foreground',\n                        UNIT_SIZE[resolvedSize]\n                      )}\n                    >\n                      {unit}\n                    </span>\n                  )}\n                </>\n              )}\n              {badge != null && <span className=\"ms-1 self-center\">{badge}</span>}\n            </div>\n          </div>\n          {trend != null && <div className=\"shrink-0\">{trend}</div>}\n        </div>\n\n        {supportingText != null && (\n          <div\n            className={cn('text-muted-foreground', SUPPORTING_SIZE[resolvedSize])}\n          >\n            {supportingText}\n          </div>\n        )}\n        </div>\n        {children}\n      </Card>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"names":["metricVariants","cva","LABEL_SIZE","VALUE_SIZE","UNIT_SIZE","SUPPORTING_SIZE","BADGE_SIZE","BADGE_ICON_PX","SKELETON_SIZE","STATUS_BADGE","Metric","React","className","label","value","unit","caption","trend","supportingText","badge","icon","tooltip","tooltipLabel","loading","size","status","children","props","ref","resolvedSize","resolvedStatus","jsxs","Card","cn","jsx","Tooltip","TooltipTrigger","CircleInfoIcon","TooltipContent","Skeleton","Fragment"],"mappings":"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"}

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

@@ -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;"}