@sableui/react 0.6.2 → 0.7.1

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

@@ -0,0 +1,161 @@
+"use client";
+
+// src/components/radar-chart/radar-chart.tsx
+import { ChartFrame } from "../../lib/chart/chart-frame.js";
+import { ChartLegend } from "../../lib/chart/chart-legend.js";
+import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
+import { approxTextWidth, categoryText, chartFormatters } from "../../lib/chart/format.js";
+import { polar } from "../../lib/chart/geometry.js";
+import { morphTransition, pathStyle, riseTransition, stagger } from "../../lib/chart/motion.js";
+import { niceTicks } from "../../lib/chart/scale.js";
+import {
+  numberValue,
+  resolveSeries
+} from "../../lib/chart/types.js";
+import { cn } from "../../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RadarChart({
+  data,
+  index,
+  series: rawSeries,
+  label,
+  className,
+  grid = "polygon",
+  gridFill = false,
+  filled = true,
+  dots = false,
+  radiusAxis = false,
+  legend,
+  tooltip = true,
+  valueFormatter,
+  locale,
+  animate = true,
+  activeIndex,
+  defaultActiveIndex,
+  onActiveIndexChange
+}) {
+  const series = resolveSeries(rawSeries);
+  const fmt = chartFormatters(locale, valueFormatter);
+  const n = data.length;
+  const spokes = data.map((d) => categoryText(d[index], locale));
+  const values = series.map((s) => data.map((d) => Math.max(0, numberValue(d[s.key]))));
+  const ticks = niceTicks(0, Math.max(0, ...values.flat()), 4);
+  const max = ticks[ticks.length - 1] || 1;
+  const angleAt = (i) => i / Math.max(1, n) * Math.PI * 2;
+  const tooltipOptions = typeof tooltip === "object" ? tooltip : {};
+  const geometry = (size) => {
+    const labelW = Math.max(0, ...spokes.map(approxTextWidth));
+    const outer = Math.max(8, Math.min(size.width / 2 - labelW - 10, size.height / 2 - 22));
+    return { cx: size.width / 2, cy: size.height / 2, outer };
+  };
+  const ringPoints = (g, r) => spokes.map((_, i) => polar(g.cx, g.cy, r, angleAt(i)));
+  const toPath = (pts) => pts.length ? `M${pts.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`).join("L")}Z` : "";
+  const hitTest = (x, y, size) => {
+    const g = geometry(size);
+    if (Math.hypot(x - g.cx, y - g.cy) > g.outer + 24 || !n) return null;
+    const angle = (Math.atan2(x - g.cx, -(y - g.cy)) + Math.PI * 2) % (Math.PI * 2);
+    return Math.round(angle / (Math.PI * 2 / n)) % n;
+  };
+  const describe = (i) => `${spokes[i]}: ${series.map((s, k) => `${s.label} ${fmt.full(values[k][i])}`).join(", ")}`;
+  const tooltipFor = (i, size) => {
+    const g = geometry(size);
+    const [x, y] = polar(g.cx, g.cy, g.outer, angleAt(i));
+    return {
+      x,
+      y,
+      content: /* @__PURE__ */ jsx(
+        ChartTooltipContent,
+        {
+          indicator: tooltipOptions.indicator,
+          label: tooltipOptions.hideLabel ? void 0 : tooltipOptions.labelFormatter ? tooltipOptions.labelFormatter(spokes[i], data[i]) : spokes[i],
+          rows: series.map((s, k) => ({ key: s.key, label: s.label, value: fmt.full(values[k][i]), color: s.colorValue, icon: s.icon }))
+        }
+      )
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      label,
+      className: cn("h-72", className),
+      count: n,
+      interactive: tooltip !== false,
+      animate,
+      activeIndex,
+      defaultActiveIndex,
+      onActiveIndexChange,
+      hitTest,
+      tooltip: tooltip === false ? void 0 : tooltipFor,
+      describe,
+      table: {
+        headers: [index.charAt(0).toUpperCase() + index.slice(1), ...series.map((s) => s.label)],
+        rows: data.map((_, i) => [spokes[i], ...series.map((_2, k) => fmt.full(values[k][i]))])
+      },
+      legend: legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { items: series.map((s) => ({ key: s.key, label: s.label, color: s.colorValue, icon: s.icon })) }) : null,
+      children: ({ size, activeIndex: active }) => {
+        const g = geometry(size);
+        const rings = ticks.slice(1).map((t) => t / max * g.outer);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          gridFill ? grid === "circle" ? /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.outer, className: "fill-foreground/[0.04]" }) : /* @__PURE__ */ jsx("path", { d: toPath(ringPoints(g, g.outer)), className: "fill-foreground/[0.04]" }) : null,
+          grid !== "none" ? /* @__PURE__ */ jsxs("g", { className: "fill-none stroke-foreground/10", children: [
+            rings.map(
+              (r) => grid === "circle" ? /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r }, r) : /* @__PURE__ */ jsx("path", { d: toPath(ringPoints(g, r)) }, r)
+            ),
+            spokes.map((s, i) => {
+              const [x, y] = polar(g.cx, g.cy, g.outer, angleAt(i));
+              return /* @__PURE__ */ jsx("line", { x1: g.cx, y1: g.cy, x2: x, y2: y }, s);
+            })
+          ] }) : null,
+          series.map((s, k) => {
+            const pts = values[k].map((v, i) => polar(g.cx, g.cy, v / max * g.outer, angleAt(i)));
+            const d = toPath(pts);
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d,
+                  strokeWidth: 2,
+                  strokeLinejoin: "round",
+                  className: "[[data-reveal=out]_&]:scale-0 [[data-reveal=out]_&]:opacity-0",
+                  style: {
+                    ...pathStyle(d),
+                    stroke: s.colorValue,
+                    fill: filled ? s.colorValue : "none",
+                    fillOpacity: filled ? 0.24 : 0,
+                    transformOrigin: `${g.cx}px ${g.cy}px`,
+                    transition: riseTransition(stagger(k, 120))
+                  }
+                }
+              ),
+              dots || active != null ? pts.map(
+                ([x, y], i) => dots || active === i ? /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: x,
+                    cy: y,
+                    r: active === i ? 5 : 4,
+                    strokeWidth: 2,
+                    className: "stroke-(--sable-surface-bg,var(--background)) [[data-reveal=out]_&]:opacity-0",
+                    style: { fill: s.colorValue, transition: morphTransition() }
+                  },
+                  spokes[i]
+                ) : null
+              ) : null
+            ] }, s.key);
+          }),
+          spokes.map((s, i) => {
+            const a = angleAt(i);
+            const [x, y] = polar(g.cx, g.cy, g.outer + 12, a);
+            const anchor = Math.sin(a) > 0.1 ? "start" : Math.sin(a) < -0.1 ? "end" : "middle";
+            return /* @__PURE__ */ jsx("text", { x, y, dy: "0.32em", textAnchor: anchor, className: cn("text-caption", active === i ? "fill-foreground" : "fill-muted-foreground"), children: s }, s);
+          }),
+          radiusAxis ? ticks.slice(1, -1).map((t) => /* @__PURE__ */ jsx("text", { x: g.cx + 4, y: g.cy - t / max * g.outer, dy: "-0.2em", className: "fill-muted-foreground text-caption tabular-nums", children: fmt.axis(t) }, t)) : null
+        ] });
+      }
+    }
+  );
+}
+RadarChart.displayName = "RadarChart";
+export {
+  RadarChart
+};

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

@@ -0,0 +1,204 @@
+// src/components/radar-chart/radar-chart.meta.ts
+var radarChartMeta = {
+  name: "RadarChart",
+  summary: "Several measures compared around a centre: one polygon per series over a polygon or circular web, filled or outline only, with optional dots, a radius scale and a tinted web. Polygons grow from the centre as the chart scrolls into view.",
+  keywords: [
+    "chart",
+    "radar",
+    "spider",
+    "web",
+    "profile",
+    "skills",
+    "comparison",
+    "polar"
+  ],
+  usage: {
+    description: "Use RadarChart to compare the shape of a profile across five to eight dimensions \u2014 skills, product scores, a cycle of months \u2014 for one to three series. The shape is the message; for exact values or more than three series, BarChart is easier to read.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Keep every spoke on the same scale and direction (more is better on all of them)."
+      },
+      {
+        guidance: "do",
+        description: "Use filled={false} when two polygons overlap heavily, so both outlines stay visible."
+      },
+      {
+        guidance: "dont",
+        description: "Use fewer than five spokes \u2014 three or four make a triangle or square that says little; use BarChart."
+      },
+      {
+        guidance: "dont",
+        description: "Use it for data-heavy views \u2014 streaming or real-time data, thousands of points, zoom and brushing, trading charts. Those belong on a charting library (Recharts, visx, ECharts); Sable's charts are for dashboards, landing pages and decks."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "BarChart",
+      "LineChart",
+      "Card"
+    ]
+  },
+  status: "beta",
+  props: [
+    {
+      name: "data",
+      type: "Record<string, unknown>[]",
+      description: "One row per spoke."
+    },
+    {
+      name: "index",
+      type: "string",
+      description: "The datum field naming each spoke."
+    },
+    {
+      name: "series",
+      type: "{ key: string; label: string; tone?: ChartTone; color?: string; icon?: string }[]",
+      description: "The measures to plot: the datum field, its name in the legend/tooltip/table, and its colour (a tone by role, or any CSS colour). Omitted, series take the chart palette in order: --chart-1 \u2026 --chart-8, validated for colour-blind separation in light and dark; a theme may override the set."
+    },
+    {
+      name: "label",
+      type: "string",
+      description: "What the chart shows. Its accessible name and the caption of the data table assistive tech reads."
+    },
+    {
+      name: "className",
+      type: "string",
+      default: '"h-72"',
+      description: "Sizes the chart. Set a height."
+    },
+    {
+      name: "grid",
+      type: '"polygon" | "circle" | "none"',
+      default: '"polygon"',
+      description: "The web behind the polygons."
+    },
+    {
+      name: "gridFill",
+      type: "boolean",
+      default: "false",
+      description: "Tint the web's outer area."
+    },
+    {
+      name: "filled",
+      type: "boolean",
+      default: "true",
+      description: "Fill each polygon; `false` draws outlines only."
+    },
+    {
+      name: "dots",
+      type: "boolean",
+      default: "false",
+      description: "Mark every vertex with a dot."
+    },
+    {
+      name: "radiusAxis",
+      type: "boolean",
+      default: "false",
+      description: "Print the ring values along the top spoke."
+    },
+    {
+      name: "legend",
+      type: "boolean",
+      default: "true when there is more than one series",
+      description: "Show the legend."
+    },
+    {
+      name: "tooltip",
+      type: 'boolean | { indicator?: "dot" | "line" | "dashed" | "none"; hideLabel?: boolean; labelFormatter?: (label, datum) => ReactNode; showTotal?: boolean }',
+      default: "true",
+      description: "Show a tooltip on hover and keyboard focus, or configure it: the row marker, hiding the heading, rewriting it, adding a Total row."
+    },
+    {
+      name: "valueFormatter",
+      type: "(value: number) => string",
+      description: 'Format values everywhere (axis, labels, tooltip, table) \u2014 units like "$12,480". Default: compact on the axis, full elsewhere.'
+    },
+    {
+      name: "locale",
+      type: "string",
+      default: "runtime locale",
+      description: "BCP 47 locale for default number and date formatting."
+    },
+    {
+      name: "animate",
+      type: "boolean",
+      default: "true",
+      description: "Grow the polygons from the centre when the chart scrolls into view."
+    },
+    {
+      name: "activeIndex",
+      type: "number | null",
+      description: "The highlighted row (controlled); `null` for none."
+    },
+    {
+      name: "defaultActiveIndex",
+      type: "number | null",
+      description: "The row highlighted at first \u2014 a tooltip already open before anyone hovers."
+    },
+    {
+      name: "onActiveIndexChange",
+      type: "(index: number | null) => void",
+      description: "Called as the pointer or keyboard moves between rows."
+    }
+  ],
+  tokensUsed: [
+    "tone-edition",
+    "tone-collectible",
+    "tone-standard",
+    "tone-info",
+    "tone-warning",
+    "primary",
+    "muted-foreground",
+    "border",
+    "popover",
+    "popover-foreground",
+    "foreground",
+    "background"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "custom",
+      part: "Polygon",
+      why: "Once on screen each polygon grows from the centre and fades in, series staggered, on the emphasized easing. On the motion tokens; reduced motion shows the finished chart."
+    },
+    {
+      slot: "response",
+      recipe: "none",
+      part: "Active spoke",
+      why: "The hovered spoke's vertices and label highlight at once."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "Polygon",
+      why: "Geometry eases from the old shape to the new one through a CSS `d` transition on the motion tokens (no recipe animates path geometry); browsers without `d` transitions update in place."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "RadarChart",
+      why: "A chart has no indeterminate state; show a Skeleton while the data loads."
+    }
+  ],
+  a11y: [
+    "The drawing is aria-hidden; the same numbers are in a visually hidden data table (captioned by `label`) that the chart is aria-describedby, so assistive tech reads values, not shapes.",
+    'With a tooltip, the chart is one tab stop (role=group, aria-roledescription="chart"): arrow keys, Home and End step through the data, Escape clears, and each step is announced in a polite live region.',
+    "Colour is never the only key: series are named in the legend, tooltip and table."
+  ],
+  examples: [
+    {
+      label: "Two profiles",
+      code: 'const scores = [\n	{ skill: "Speed", a: 86, b: 65 },\n	{ skill: "Quality", a: 72, b: 90 },\n	{ skill: "Support", a: 64, b: 80 },\n	{ skill: "Price", a: 90, b: 55 },\n	{ skill: "Docs", a: 70, b: 85 },\n	{ skill: "Ecosystem", a: 60, b: 75 },\n]\n\n<RadarChart\n	label="Product scores compared"\n	data={scores}\n	index="skill"\n	series={[\n		{ key: "a", label: "Atlas" },\n		{ key: "b", label: "Beacon" },\n	]}\n/>'
+    },
+    {
+      label: "Circular web, outlines only",
+      code: '<RadarChart\n	label="Atlas scores"\n	data={scores}\n	index="skill"\n	series={[{ key: "a", label: "Atlas" }]}\n	grid="circle"\n	gridFill\n	filled={false}\n	dots\n/>'
+    }
+  ]
+};
+export {
+  radarChartMeta
+};

package/dist/components/radial-chart/index.js

@@ -0,0 +1,7 @@
+// src/components/radial-chart/index.ts
+import { RadialChart } from "./radial-chart.js";
+import { radialChartMeta } from "./radial-chart.meta.js";
+export {
+  RadialChart,
+  radialChartMeta
+};

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

@@ -0,0 +1,175 @@
+"use client";
+
+// src/components/radial-chart/radial-chart.tsx
+import { ChartFrame } from "../../lib/chart/chart-frame.js";
+import { ChartLegend } from "../../lib/chart/chart-legend.js";
+import { ChartTooltipContent } from "../../lib/chart/chart-tooltip.js";
+import { categoryText, centerValueText, chartFormatters } from "../../lib/chart/format.js";
+import { polar, strokeArcPath } from "../../lib/chart/geometry.js";
+import { drawTransition, morphTransition, pathStyle, stagger } from "../../lib/chart/motion.js";
+import {
+  categoryStyle,
+  numberValue
+} from "../../lib/chart/types.js";
+import { cn } from "../../lib/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RadialChart({
+  data,
+  index,
+  valueKey,
+  label,
+  categories,
+  className,
+  max,
+  sweep = 360,
+  stacked = false,
+  track = true,
+  labels = false,
+  centerLabel,
+  legend,
+  tooltip = true,
+  valueFormatter,
+  locale,
+  animate = true,
+  activeIndex,
+  defaultActiveIndex,
+  onActiveIndexChange
+}) {
+  const fmt = chartFormatters(locale, valueFormatter);
+  const names = data.map((d) => categoryText(d[index], locale));
+  const styles = names.map((name, i) => categoryStyle(categories, name, i));
+  const values = data.map((d) => Math.max(0, numberValue(d[valueKey])));
+  const total = values.reduce((a, b) => a + b, 0);
+  const full = (max ?? (stacked ? total : Math.max(0, ...values) / (labels ? 0.75 : 1))) || 1;
+  const span = Math.min(360, Math.max(10, sweep)) * Math.PI / 180;
+  const start = -span / 2 + (sweep >= 360 ? span / 2 : 0);
+  const tooltipOptions = typeof tooltip === "object" ? tooltip : {};
+  const gauge = sweep < 360;
+  const geometry = (size) => {
+    const outer = gauge ? Math.min(size.width / 2, size.height * (sweep <= 180 ? 0.92 : 0.6)) - 8 : Math.min(size.width, size.height) / 2 - 8;
+    const cx = size.width / 2;
+    const cy = gauge && sweep <= 180 ? size.height - 8 : size.height / 2;
+    const rings = stacked ? 1 : data.length;
+    const inner = outer * (centerLabel ? 0.62 : 0.4);
+    const pitch = (outer - inner) / Math.max(1, rings);
+    const thickness = stacked ? Math.min(28, outer - inner) : Math.max(4, pitch * 0.72);
+    return { cx, cy, outer, pitch, thickness };
+  };
+  const arcs = (() => {
+    let acc = 0;
+    return values.map((v, i) => {
+      if (stacked) {
+        const a0 = start + acc / full * span;
+        acc += v;
+        return { ring: 0, a0, a1: start + acc / full * span, i };
+      }
+      return { ring: i, a0: start, a1: start + Math.min(v, full) / full * span, i };
+    });
+  })();
+  const radiusOf = (g, ring) => stacked ? g.outer - g.thickness / 2 : g.outer - g.pitch * ring - g.pitch / 2;
+  const hitTest = (x, y, size) => {
+    const g = geometry(size);
+    const r = Math.hypot(x - g.cx, y - g.cy);
+    const angle = Math.atan2(x - g.cx, -(y - g.cy));
+    if (stacked) {
+      if (Math.abs(r - radiusOf(g, 0)) > g.thickness / 2 + 4) return null;
+      const hit2 = arcs.findIndex((a) => angle >= a.a0 && angle <= a.a1);
+      return hit2 < 0 ? null : hit2;
+    }
+    const hit = arcs.findIndex((a) => Math.abs(r - radiusOf(g, a.ring)) <= g.pitch / 2);
+    return hit < 0 ? null : hit;
+  };
+  const describe = (i) => `${styles[i].label}: ${fmt.full(values[i])}`;
+  const tooltipFor = (i, size) => {
+    const g = geometry(size);
+    const [x, y] = polar(g.cx, g.cy, radiusOf(g, arcs[i].ring), arcs[i].a1);
+    return {
+      x,
+      y,
+      content: /* @__PURE__ */ jsx(
+        ChartTooltipContent,
+        {
+          indicator: tooltipOptions.indicator,
+          rows: [{ key: names[i], label: styles[i].label, value: fmt.full(values[i]), color: styles[i].color, icon: styles[i].icon }]
+        }
+      )
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      label,
+      className: cn("h-64", className),
+      count: data.length,
+      interactive: tooltip !== false,
+      animate,
+      activeIndex,
+      defaultActiveIndex,
+      onActiveIndexChange,
+      hitTest,
+      tooltip: tooltip === false ? void 0 : tooltipFor,
+      describe,
+      table: {
+        headers: [index.charAt(0).toUpperCase() + index.slice(1), valueKey.charAt(0).toUpperCase() + valueKey.slice(1)],
+        rows: data.map((_, i) => [styles[i].label, fmt.full(values[i])])
+      },
+      legend: legend ?? !labels ? /* @__PURE__ */ jsx(ChartLegend, { items: names.map((n, i) => ({ key: n, label: styles[i].label, color: styles[i].color, icon: styles[i].icon })) }) : null,
+      children: ({ size, activeIndex: active }) => {
+        const g = geometry(size);
+        const ringCount = stacked ? 1 : data.length;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          track ? Array.from({ length: ringCount }, (_, ring) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: strokeArcPath(g.cx, g.cy, radiusOf(g, ring), start, start + span),
+              fill: "none",
+              strokeWidth: g.thickness,
+              strokeLinecap: stacked ? "butt" : "round",
+              className: "stroke-muted"
+            },
+            `t${ring}`
+          )) : null,
+          arcs.map((a) => {
+            if (values[a.i] === 0) return null;
+            const d = strokeArcPath(g.cx, g.cy, radiusOf(g, a.ring), a.a0, a.a1);
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                d,
+                pathLength: 1,
+                fill: "none",
+                strokeWidth: g.thickness,
+                strokeLinecap: stacked ? "butt" : "round",
+                className: cn("[stroke-dasharray:1] [stroke-dashoffset:0] [[data-reveal=out]_&]:[stroke-dashoffset:1]", active != null && active !== a.i && "opacity-60"),
+                style: { ...pathStyle(d), stroke: styles[a.i].color, transition: drawTransition(stagger(a.i, 90)) }
+              },
+              names[a.i]
+            );
+          }),
+          labels && !stacked ? arcs.map((a) => {
+            const [x, y] = polar(g.cx, g.cy, radiusOf(g, a.ring), start);
+            return /* @__PURE__ */ jsx("text", { x: x - 8, y, dy: "0.32em", textAnchor: "end", className: "fill-muted-foreground text-caption", children: styles[a.i].label }, `l${a.i}`);
+          }) : null,
+          centerLabel ? /* @__PURE__ */ jsxs(
+            "text",
+            {
+              x: g.cx,
+              y: gauge && sweep <= 180 ? g.cy - 6 : g.cy,
+              textAnchor: "middle",
+              className: "[[data-reveal=out]_&]:opacity-0",
+              style: { transition: morphTransition() },
+              children: [
+                /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? centerLabel.label ? "-1.4em" : "0" : "0.35em", className: "fill-foreground text-heading-2 tabular-nums", children: centerValueText(centerLabel.value, locale) }),
+                centerLabel.label ? /* @__PURE__ */ jsx("tspan", { x: g.cx, dy: gauge && sweep <= 180 ? "1.6em" : "1.9em", className: "fill-muted-foreground text-caption", children: centerLabel.label }) : null
+              ]
+            }
+          ) : null
+        ] });
+      }
+    }
+  );
+}
+RadialChart.displayName = "RadialChart";
+export {
+  RadialChart
+};