@devalok/shilp-sutra 0.38.0 → 0.40.0

package/dist/ui/charts/line-chart.js

@@ -0,0 +1,135 @@
+"use client";
+import { motionProps as e, tweens as t } from "../lib/motion.js";
+import { cn as n } from "../lib/utils.js";
+import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
+import { r as o, t as s } from "../../_chunks/colors.js";
+import { n as c, t as l } from "../../_chunks/grid-lines.js";
+import { t as u } from "../../_chunks/chart-container.js";
+import * as d from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { motion as h } from "framer-motion";
+import { scaleLinear as g, scalePoint as _ } from "d3-scale";
+import { curveLinear as v, curveMonotoneX as y, line as b } from "d3-shape";
+//#region src/ui/charts/line-chart.tsx
+var x = d.forwardRef(({ data: d, xKey: x, series: S, curved: C = !1, showDots: w = !1, dotSize: T = 4, strokeWidth: E = 2, height: D = 300, showGrid: O = !0, showTooltip: k = !0, showLegend: A = !1, animate: j = !0, xLabel: M, yLabel: N, ariaLabel: P, className: F, ...I }, L) => {
+	let { tooltip: R, show: z, hide: B } = r(), V = o(), H = j && !V, U = S.map((e, t) => s(e.color, t));
+	return /* @__PURE__ */ m(h.div, {
+		ref: L,
+		className: n("relative", F),
+		...H ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: t.fade
+		} : {},
+		...e(I),
+		children: [
+			/* @__PURE__ */ p(u, {
+				height: D,
+				ariaLabel: P ?? "Line chart",
+				children: ({ width: e, height: t, margin: n }) => {
+					let r = d.map((e) => e[x]), i = r.every((e) => typeof e == "number"), a, o;
+					if (i) {
+						let t = r, n = Math.min(...t), i = Math.max(...t), s = g().domain([n, i]).range([0, e]);
+						a = s, o = (e) => s(Number(e[x]));
+					} else {
+						let t = r.map(String), n = _().domain(t).range([0, e]).padding(.5);
+						a = n, o = (e) => n(String(e[x])) ?? 0;
+					}
+					let s = d.flatMap((e) => S.map((t) => Number(e[t.key]) || 0)), u = Math.max(...s), h = g().domain([0, u * 1.1]).range([t, 0]).nice(), D = C ? y : v, A = b().curve(D).defined((e) => e != null);
+					return /* @__PURE__ */ m(f, { children: [
+						/* @__PURE__ */ p("desc", { children: d.map((e) => `${String(e[x])} — ${S.map((t) => `${t.label}: ${Number(e[t.key]).toLocaleString()}`).join(", ")}`).join(". ") }),
+						O && /* @__PURE__ */ p(l, {
+							width: e,
+							height: t,
+							yScale: h,
+							horizontal: !0
+						}),
+						S.map((e, t) => /* @__PURE__ */ m("g", { children: [/* @__PURE__ */ p("path", {
+							d: A.x((e) => o(e)).y((t) => h(Number(t[e.key]) || 0))(d) ?? "",
+							fill: "none",
+							stroke: U[t],
+							strokeWidth: E,
+							strokeLinejoin: "round",
+							strokeLinecap: "round"
+						}), w && d.map((n, r) => /* @__PURE__ */ p("circle", {
+							cx: o(n),
+							cy: h(Number(n[e.key]) || 0),
+							r: T,
+							fill: U[t],
+							className: "transition-opacity hover:opacity-80"
+						}, `${e.key}-dot-${r}`))] }, e.key)),
+						k && d.map((n, r) => {
+							let i = o(n), a = e / Math.max(d.length - 1, 1), s = String(n[x]), c = `${s}: ${S.map((e) => `${e.label} ${Number(n[e.key]).toLocaleString()}`).join(", ")}`, l = /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
+								className: "font-medium",
+								children: s
+							}), S.map((e, t) => /* @__PURE__ */ m("div", {
+								className: "flex items-center gap-ds-02",
+								children: [
+									/* @__PURE__ */ p("span", {
+										className: "inline-block h-2 w-2 rounded-pill",
+										style: { backgroundColor: U[t] }
+									}),
+									/* @__PURE__ */ m("span", {
+										className: "text-surface-fg-muted",
+										children: [e.label, ":"]
+									}),
+									" ",
+									Number(n[e.key]).toLocaleString()
+								]
+							}, e.key))] });
+							return /* @__PURE__ */ p("rect", {
+								x: i - a / 2,
+								y: 0,
+								width: a,
+								height: t,
+								fill: "transparent",
+								tabIndex: 0,
+								role: "graphics-symbol",
+								"aria-label": c,
+								className: "focus-visible:outline-hidden",
+								onMouseMove: (e) => {
+									let t = e.currentTarget.closest("div")?.getBoundingClientRect();
+									z(e.clientX - (t?.left ?? 0), e.clientY - (t?.top ?? 0), l);
+								},
+								onMouseLeave: B,
+								onFocus: (e) => {
+									let t = e.currentTarget.closest("div")?.getBoundingClientRect(), n = e.currentTarget.getBoundingClientRect();
+									z(n.left + n.width / 2 - (t?.left ?? 0), n.top + n.height / 2 - (t?.top ?? 0), l);
+								},
+								onBlur: B
+							}, `hover-${r}`);
+						}),
+						/* @__PURE__ */ p(c, {
+							scale: a,
+							orientation: "bottom",
+							transform: `translate(0,${t})`,
+							label: M
+						}),
+						/* @__PURE__ */ p(c, {
+							scale: h,
+							orientation: "left",
+							label: N
+						})
+					] });
+				}
+			}),
+			k && /* @__PURE__ */ p(a, { state: R }),
+			A && S.length > 1 && /* @__PURE__ */ p(i, {
+				items: S.map((e, t) => ({
+					label: e.label,
+					color: U[t]
+				})),
+				className: "mt-ds-04"
+			})
+		]
+	});
+});
+x.displayName = "LineChart";
+//#endregion
+export { x as LineChart };

package/dist/ui/charts/line-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","names":[],"sources":["../../../src/ui/charts/line-chart.tsx"],"sourcesContent":["'use client'\n\nimport type { ScaleLinear, ScalePoint } from 'd3-scale'\nimport { scaleLinear, scalePoint } from 'd3-scale'\nimport { curveLinear,curveMonotoneX, line } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { type AnyScale,Axis } from './_internal/axes'\nimport { resolveColor } from './_internal/colors'\nimport { GridLines } from './_internal/grid-lines'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\nimport type { DataPoint, Series } from './_internal/types'\nimport { ChartContainer } from './chart-container'\n\nexport interface LineChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Data array */\n  data: DataPoint[]\n  /** Key for x-axis */\n  xKey: string\n  /** Series definitions — each becomes a line */\n  series: Series[]\n  /** Use curved (monotone) interpolation */\n  curved?: boolean\n  /** Show dots at data points */\n  showDots?: boolean\n  /** Dot radius */\n  dotSize?: number\n  /** Line stroke width */\n  strokeWidth?: number\n  /** Chart height */\n  height?: number\n  /** Show grid lines */\n  showGrid?: boolean\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend */\n  showLegend?: boolean\n  /** Animate on mount */\n  animate?: boolean\n  /** X-axis label */\n  xLabel?: string\n  /** Y-axis label */\n  yLabel?: string\n  /** Accessible label for the chart */\n  ariaLabel?: string\n  className?: string\n}\n\nexport const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>(\n  (\n    {\n      data,\n      xKey,\n      series,\n      curved = false,\n      showDots = false,\n      dotSize = 4,\n      strokeWidth = 2,\n      height = 300,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = false,\n      animate = true,\n      xLabel,\n      yLabel,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const shouldAnimate = animate && !reducedMotion\n\n  // Resolve colors for each series\n  const colors = series.map((s, i) => resolveColor(s.color, i))\n\n  return (\n    <motion.div\n      ref={ref}\n      className={cn('relative', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      <ChartContainer height={height} ariaLabel={ariaLabel ?? 'Line chart'}>\n        {({ width, height: innerHeight, margin }) => {\n          void margin\n\n          // Determine if x-axis data is numeric or categorical\n          const xValues = data.map((d) => d[xKey])\n          const isNumericX = xValues.every((v) => typeof v === 'number')\n\n          // Build x scale and accessor\n          let xAxisScale: ScaleLinear<number, number> | ScalePoint<string>\n          let getX: (d: DataPoint) => number\n\n          if (isNumericX) {\n            const numericValues = xValues as number[]\n            const xMin = Math.min(...numericValues)\n            const xMax = Math.max(...numericValues)\n            const linearX = scaleLinear<number, number>()\n              .domain([xMin, xMax])\n              .range([0, width])\n            xAxisScale = linearX\n            getX = (d: DataPoint) => linearX(Number(d[xKey]))\n          } else {\n            const categories = xValues.map(String)\n            const pointX = scalePoint<string>()\n              .domain(categories)\n              .range([0, width])\n              .padding(0.5)\n            xAxisScale = pointX\n            getX = (d: DataPoint) => pointX(String(d[xKey])) ?? 0\n          }\n\n          // Build y scale across all series\n          const allValues = data.flatMap((d) =>\n            series.map((s) => Number(d[s.key]) || 0),\n          )\n          const yMax = Math.max(...allValues)\n          const yScale = scaleLinear<number, number>()\n            .domain([0, yMax * 1.1])\n            .range([innerHeight, 0])\n            .nice()\n\n          // Line generator\n          const curveType = curved ? curveMonotoneX : curveLinear\n          const lineGen = line<DataPoint>()\n            .curve(curveType)\n            .defined((d) => d !== undefined && d !== null)\n\n          // Build data summary for screen readers\n          const dataSummary = data.map((d) => {\n            const xVal = String(d[xKey])\n            const vals = series.map((s) =>\n              `${s.label}: ${Number(d[s.key]).toLocaleString()}`\n            ).join(', ')\n            return `${xVal} — ${vals}`\n          }).join('. ')\n\n          return (\n            <>\n              {/* Screen-reader data summary */}\n              <desc>{dataSummary}</desc>\n\n              {/* Grid */}\n              {showGrid && (\n                <GridLines\n                  width={width}\n                  height={innerHeight}\n                  yScale={yScale}\n                  horizontal\n                />\n              )}\n\n              {/* Lines */}\n              {series.map((s, seriesIdx) => {\n                const pathGen = lineGen\n                  .x((d) => getX(d))\n                  .y((d) => yScale(Number(d[s.key]) || 0))\n\n                const pathD = pathGen(data) ?? ''\n\n                return (\n                  <g key={s.key}>\n                    {/* Line path */}\n                    <path\n                      d={pathD}\n                      fill=\"none\"\n                      stroke={colors[seriesIdx]}\n                      strokeWidth={strokeWidth}\n                      strokeLinejoin=\"round\"\n                      strokeLinecap=\"round\"\n                    />\n\n                    {/* Data point dots */}\n                    {showDots &&\n                      data.map((d, i) => {\n                        const cx = getX(d)\n                        const cy = yScale(Number(d[s.key]) || 0)\n                        return (\n                          <circle\n                            key={`${s.key}-dot-${i}`}\n                            cx={cx}\n                            cy={cy}\n                            r={dotSize}\n                            fill={colors[seriesIdx]}\n                            className=\"transition-opacity hover:opacity-80\"\n                          />\n                        )\n                      })}\n                  </g>\n                )\n              })}\n\n              {/* Invisible hover/focus rectangles for tooltip */}\n              {showTooltip &&\n                data.map((d, i) => {\n                  const cx = getX(d)\n                  const sliceWidth = width / Math.max(data.length - 1, 1)\n                  const xVal = String(d[xKey])\n                  const pointAriaLabel = `${xVal}: ${series.map((s) => `${s.label} ${Number(d[s.key]).toLocaleString()}`).join(', ')}`\n\n                  const tooltipContent = (\n                    <div>\n                      <div className=\"font-medium\">{xVal}</div>\n                      {series.map((s, sIdx) => (\n                        <div\n                          key={s.key}\n                          className=\"flex items-center gap-ds-02\"\n                        >\n                          <span\n                            className=\"inline-block h-2 w-2 rounded-pill\"\n                            style={{ backgroundColor: colors[sIdx] }}\n                          />\n                          <span className=\"text-surface-fg-muted\">\n                            {s.label}:\n                          </span>{' '}\n                          {Number(d[s.key]).toLocaleString()}\n                        </div>\n                      ))}\n                    </div>\n                  )\n\n                  return (\n                    <rect\n                      key={`hover-${i}`}\n                      x={cx - sliceWidth / 2}\n                      y={0}\n                      width={sliceWidth}\n                      height={innerHeight}\n                      fill=\"transparent\"\n                      tabIndex={0}\n                      role=\"graphics-symbol\"\n                      aria-label={pointAriaLabel}\n                      className=\"focus-visible:outline-hidden\"\n                      onMouseMove={(e) => {\n                        const rect = e.currentTarget\n                          .closest('div')\n                          ?.getBoundingClientRect()\n                        show(\n                          e.clientX - (rect?.left ?? 0),\n                          e.clientY - (rect?.top ?? 0),\n                          tooltipContent,\n                        )\n                      }}\n                      onMouseLeave={hide}\n                      onFocus={(e) => {\n                        const svgRect = e.currentTarget\n                          .closest('div')\n                          ?.getBoundingClientRect()\n                        const sliceRect = e.currentTarget.getBoundingClientRect()\n                        show(\n                          sliceRect.left + sliceRect.width / 2 - (svgRect?.left ?? 0),\n                          sliceRect.top + sliceRect.height / 2 - (svgRect?.top ?? 0),\n                          tooltipContent,\n                        )\n                      }}\n                      onBlur={hide}\n                    />\n                  )\n                })}\n\n              {/* Axes */}\n              <Axis\n                scale={xAxisScale as AnyScale}\n                orientation=\"bottom\"\n                transform={`translate(0,${innerHeight})`}\n                label={xLabel}\n              />\n              <Axis scale={yScale} orientation=\"left\" label={yLabel} />\n            </>\n          )\n        }}\n      </ChartContainer>\n\n      {/* Tooltip overlay */}\n      {showTooltip && <ChartTooltip state={tooltip} />}\n\n      {/* Legend */}\n      {showLegend && series.length > 1 && (\n        <Legend\n          items={series.map((s, i) => ({\n            label: s.label,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nLineChart.displayName = 'LineChart'\n"],"mappings":"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"}

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

@@ -0,0 +1,111 @@
+"use client";
+import { motionProps as e, tweens as t } from "../lib/motion.js";
+import { cn as n } from "../lib/utils.js";
+import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
+import { r as o, t as s } from "../../_chunks/colors.js";
+import * as c from "react";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { motion as h } from "framer-motion";
+import { arc as g, pie as _ } from "d3-shape";
+//#region src/ui/charts/pie-chart.tsx
+var v = c.forwardRef(({ data: c, variant: v = "pie", innerRadius: y = .6, padAngle: b = 0, cornerRadius: x = 0, height: S = 300, showTooltip: C = !0, showLegend: w = !1, showLabels: T = !1, animate: E = !0, className: D, centerLabel: O, ariaLabel: k, ...A }, j) => {
+	let M = u(null), [N, P] = d(0), [F, I] = d(null), { tooltip: L, show: R, hide: z } = r(), B = o(), V = E && !B;
+	l(() => {
+		if (!M.current) return;
+		let e = new ResizeObserver((e) => {
+			let t = e[0];
+			t && P(t.contentRect.width);
+		});
+		return e.observe(M.current), () => e.disconnect();
+	}, []);
+	let H = (N > 0 ? Math.min(N, S) : S) / 2, U = v === "donut" ? H * y : 0, W = c.map((e, t) => s(e.color, t)), G = c.reduce((e, t) => e + t.value, 0), K = _().value((e) => e.value).padAngle(b).sort(null)(c), q = g().innerRadius(U).outerRadius(H - 2).cornerRadius(x), J = U + (H - 2 - U) * .7, Y = g().innerRadius(J).outerRadius(J);
+	return /* @__PURE__ */ m(h.div, {
+		ref: (e) => {
+			M.current = e, typeof j == "function" ? j(e) : j && (j.current = e);
+		},
+		className: n("relative w-full", D),
+		...V ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: t.fade
+		} : {},
+		...e(A),
+		children: [N > 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("svg", {
+			width: N,
+			height: S,
+			role: "img",
+			"aria-label": k ?? "Pie chart",
+			children: /* @__PURE__ */ m("g", {
+				transform: `translate(${N / 2},${S / 2})`,
+				children: [
+					K.map((e, t) => {
+						let n = q(e);
+						if (!n) return null;
+						let [r, i] = q.centroid(e), a = Math.atan2(i, r), o = Math.cos(a) * 4, s = Math.sin(a) * 4, c = F === t;
+						return /* @__PURE__ */ p("path", {
+							d: n,
+							fill: W[t],
+							className: "cursor-pointer transition-transform",
+							style: { transform: c ? `translate(${o}px, ${s}px)` : void 0 },
+							onMouseEnter: () => I(t),
+							onMouseMove: (t) => {
+								if (C) {
+									let n = t.currentTarget.closest("div")?.getBoundingClientRect(), r = G > 0 ? (e.data.value / G * 100).toFixed(1) : "0";
+									R(t.clientX - (n?.left ?? 0), t.clientY - (n?.top ?? 0), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
+										className: "font-medium",
+										children: e.data.label
+									}), /* @__PURE__ */ m("div", { children: [
+										e.data.value.toLocaleString(),
+										" (",
+										r,
+										"%)"
+									] })] }));
+								}
+							},
+							onMouseLeave: () => {
+								I(null), z();
+							}
+						}, `slice-${e.data.label}-${t}`);
+					}),
+					T && K.map((e, t) => {
+						let [n, r] = Y.centroid(e), i = G > 0 ? (e.data.value / G * 100).toFixed(0) : "0";
+						return G > 0 && e.data.value / G < .03 ? null : /* @__PURE__ */ m("text", {
+							x: n,
+							y: r,
+							textAnchor: "middle",
+							dominantBaseline: "central",
+							className: "pointer-events-none fill-accent-fg text-ds-xs font-medium",
+							children: [i, "%"]
+						}, `label-${e.data.label}-${t}`);
+					}),
+					v === "donut" && O && U > 0 && /* @__PURE__ */ p("foreignObject", {
+						x: -U * .7,
+						y: -U * .7,
+						width: U * 1.4,
+						height: U * 1.4,
+						children: /* @__PURE__ */ p("div", {
+							className: "flex h-full w-full items-center justify-center text-center text-surface-fg",
+							children: O
+						})
+					})
+				]
+			})
+		}), C && /* @__PURE__ */ p(a, { state: L })] }), w && /* @__PURE__ */ p(i, {
+			items: c.map((e, t) => ({
+				label: e.label,
+				color: W[t]
+			})),
+			className: "mt-ds-04"
+		})]
+	});
+});
+v.displayName = "PieChart";
+//#endregion
+export { v as PieChart };

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

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart.js","names":[],"sources":["../../../src/ui/charts/pie-chart.tsx"],"sourcesContent":["'use client'\n\nimport type { PieArcDatum } from 'd3-shape'\nimport { arc as d3Arc,pie as d3Pie } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\nimport { useEffect,useRef, useState } from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { resolveColor } from './_internal/colors'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\n\ninterface PieSlice {\n  label: string\n  value: number\n  color?: string\n}\n\nexport interface PieChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Data with label and value */\n  data: PieSlice[]\n  /** Pie or donut variant */\n  variant?: 'pie' | 'donut'\n  /** Inner radius ratio for donut (0-1, default 0.6) */\n  innerRadius?: number\n  /** Gap angle between slices in radians */\n  padAngle?: number\n  /** Corner radius for slice edges */\n  cornerRadius?: number\n  /** Chart height (and width, since pie is square) */\n  height?: number\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend */\n  showLegend?: boolean\n  /** Show percentage labels on/near slices */\n  showLabels?: boolean\n  /** Animate slices */\n  animate?: boolean\n  className?: string\n  /** Content to show in center of donut */\n  centerLabel?: React.ReactNode\n  /** Accessible label for the chart */\n  ariaLabel?: string\n}\n\nexport const PieChart = React.forwardRef<HTMLDivElement, PieChartProps>(\n  (\n    {\n      data,\n      variant = 'pie',\n      innerRadius: innerRadiusRatio = 0.6,\n      padAngle = 0,\n      cornerRadius = 0,\n      height = 300,\n      showTooltip = true,\n      showLegend = false,\n      showLabels = false,\n      animate = true,\n      className,\n      centerLabel,\n      ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const shouldAnimate = animate && !reducedMotion\n\n  useEffect(() => {\n    if (!containerRef.current) return\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setContainerWidth(entry.contentRect.width)\n    })\n    observer.observe(containerRef.current)\n    return () => observer.disconnect()\n  }, [])\n\n  // Pie chart is square — use the smaller of width/height\n  const size = containerWidth > 0 ? Math.min(containerWidth, height) : height\n  const outerRadius = size / 2\n  const innerR = variant === 'donut' ? outerRadius * innerRadiusRatio : 0\n\n  // Resolve colors for each slice\n  const colors = data.map((d, i) => resolveColor(d.color, i))\n\n  // Compute total for percentages\n  const total = data.reduce((sum, d) => sum + d.value, 0)\n\n  // D3 pie layout\n  const pieLayout = d3Pie<PieSlice>()\n    .value((d) => d.value)\n    .padAngle(padAngle)\n    .sort(null)\n\n  const arcs = pieLayout(data)\n\n  // D3 arc generator\n  const arcGenerator = d3Arc<PieArcDatum<PieSlice>>()\n    .innerRadius(innerR)\n    .outerRadius(outerRadius - 2) // slight inset so hover offset doesn't clip\n    .cornerRadius(cornerRadius)\n\n  // Label arc — position labels at 70% of the way from inner to outer radius\n  const labelRadius = innerR + (outerRadius - 2 - innerR) * 0.7\n  const labelArc = d3Arc<PieArcDatum<PieSlice>>()\n    .innerRadius(labelRadius)\n    .outerRadius(labelRadius)\n\n  return (\n    <motion.div\n      ref={(node) => {\n        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }}\n      className={cn('relative w-full', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      {containerWidth > 0 && (\n        <>\n          <svg\n            width={containerWidth}\n            height={height}\n            role=\"img\"\n            aria-label={ariaLabel ?? 'Pie chart'}\n          >\n            <g transform={`translate(${containerWidth / 2},${height / 2})`}>\n              {arcs.map((d, i) => {\n                const path = arcGenerator(d)\n                if (!path) return null\n\n                // Hover offset: push slice outward along its centroid angle\n                const [cx, cy] = arcGenerator.centroid(d)\n                const angle = Math.atan2(cy, cx)\n                const offsetX = Math.cos(angle) * 4\n                const offsetY = Math.sin(angle) * 4\n                const isHovered = hoveredIndex === i\n\n                return (\n                  <path\n                    key={`slice-${d.data.label}-${i}`}\n                    d={path}\n                    fill={colors[i]}\n                    className=\"cursor-pointer transition-transform\"\n                    style={{\n                      transform: isHovered\n                        ? `translate(${offsetX}px, ${offsetY}px)`\n                        : undefined,\n                    }}\n                    onMouseEnter={() => setHoveredIndex(i)}\n                    onMouseMove={(e) => {\n                      if (showTooltip) {\n                        const rect = e.currentTarget\n                          .closest('div')\n                          ?.getBoundingClientRect()\n                        const pct =\n                          total > 0\n                            ? ((d.data.value / total) * 100).toFixed(1)\n                            : '0'\n                        show(\n                          e.clientX - (rect?.left ?? 0),\n                          e.clientY - (rect?.top ?? 0),\n                          <div>\n                            <div className=\"font-medium\">{d.data.label}</div>\n                            <div>\n                              {d.data.value.toLocaleString()} ({pct}%)\n                            </div>\n                          </div>,\n                        )\n                      }\n                    }}\n                    onMouseLeave={() => {\n                      setHoveredIndex(null)\n                      hide()\n                    }}\n                  />\n                )\n              })}\n\n              {/* Percentage labels */}\n              {showLabels &&\n                arcs.map((d, i) => {\n                  const [lx, ly] = labelArc.centroid(d)\n                  const pct =\n                    total > 0\n                      ? ((d.data.value / total) * 100).toFixed(0)\n                      : '0'\n\n                  // Skip tiny slices (< 3%) to avoid label overlap\n                  if (total > 0 && d.data.value / total < 0.03) return null\n\n                  return (\n                    <text\n                      key={`label-${d.data.label}-${i}`}\n                      x={lx}\n                      y={ly}\n                      textAnchor=\"middle\"\n                      dominantBaseline=\"central\"\n                      className=\"pointer-events-none fill-accent-fg text-ds-xs font-medium\"\n                    >\n                      {pct}%\n                    </text>\n                  )\n                })}\n\n              {/* Center label for donut variant */}\n              {variant === 'donut' && centerLabel && innerR > 0 && (\n                <foreignObject\n                  x={-innerR * 0.7}\n                  y={-innerR * 0.7}\n                  width={innerR * 1.4}\n                  height={innerR * 1.4}\n                >\n                  <div className=\"flex h-full w-full items-center justify-center text-center text-surface-fg\">\n                    {centerLabel}\n                  </div>\n                </foreignObject>\n              )}\n            </g>\n          </svg>\n\n          {/* Tooltip overlay */}\n          {showTooltip && <ChartTooltip state={tooltip} />}\n        </>\n      )}\n\n      {/* Legend */}\n      {showLegend && (\n        <Legend\n          items={data.map((d, i) => ({\n            label: d.label,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nPieChart.displayName = 'PieChart'\n"],"mappings":"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"}

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

@@ -0,0 +1,170 @@
+"use client";
+import { motionProps as e, tweens as t } from "../lib/motion.js";
+import { cn as n } from "../lib/utils.js";
+import { n as r, r as i, t as a } from "../../_chunks/tooltip.js";
+import { r as o, t as s } from "../../_chunks/colors.js";
+import * as c from "react";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { motion as h } from "framer-motion";
+import { curveLinearClosed as g, lineRadial as _ } from "d3-shape";
+//#region src/ui/charts/radar-chart.tsx
+var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5, fillOpacity: S = .25, showDots: C = !1, height: w = 300, showTooltip: T = !0, showLegend: E = !1, animate: D = !0, ariaLabel: O, className: k, ...A }, j) => {
+	let M = u(null), [N, P] = d(0), { tooltip: F, show: I, hide: L } = r(), R = o(), z = D && !R;
+	l(() => {
+		if (!M.current) return;
+		let e = new ResizeObserver((e) => {
+			let t = e[0];
+			t && P(t.contentRect.width);
+		});
+		return e.observe(M.current), () => e.disconnect();
+	}, []);
+	let B = (N > 0 ? Math.min(N, w) : w) / 2 - 40, V = y.map((e, t) => s(e.color, t)), H = b ?? Math.max(...c.flatMap((e) => y.map((t) => Number(e[t.key]) || 0)), 1), U = 2 * Math.PI / v.length, W = _().radius((e) => B * e / H).angle((e, t) => t * U).curve(g), G = (e) => v.map((t, n) => Number(c[n]?.[e]) || 0), K = (e, t) => {
+		let n = U * e - Math.PI / 2, r = B * t / H;
+		return {
+			x: r * Math.cos(n),
+			y: r * Math.sin(n)
+		};
+	};
+	return /* @__PURE__ */ m(h.div, {
+		ref: (e) => {
+			M.current = e, typeof j == "function" ? j(e) : j && (j.current = e);
+		},
+		className: n("relative w-full", k),
+		...z ? {
+			initial: {
+				opacity: 0,
+				scale: .96
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			transition: t.fade
+		} : {},
+		...e(A),
+		children: [N > 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("svg", {
+			width: N,
+			height: w,
+			role: "img",
+			"aria-label": O ?? "Radar chart",
+			children: /* @__PURE__ */ m("g", {
+				transform: `translate(${N / 2},${w / 2})`,
+				children: [
+					Array.from({ length: x }, (e, t) => {
+						let n = B / x * (t + 1);
+						return /* @__PURE__ */ p("polygon", {
+							points: v.map((e, t) => {
+								let r = U * t - Math.PI / 2;
+								return `${n * Math.cos(r)},${n * Math.sin(r)}`;
+							}).join(" "),
+							fill: "none",
+							stroke: "var(--color-surface-border)",
+							strokeDasharray: "3,3",
+							strokeWidth: 1
+						}, `grid-${t}`);
+					}),
+					v.map((e, t) => {
+						let n = U * t - Math.PI / 2;
+						return /* @__PURE__ */ p("line", {
+							x1: 0,
+							y1: 0,
+							x2: B * Math.cos(n),
+							y2: B * Math.sin(n),
+							stroke: "var(--color-surface-border)",
+							strokeWidth: 1
+						}, `axis-${t}`);
+					}),
+					v.map((e, t) => {
+						let n = U * t - Math.PI / 2, r = B + 18, i = r * Math.cos(n), a = r * Math.sin(n), o = "middle";
+						return Math.abs(Math.cos(n)) > .1 && (o = Math.cos(n) > 0 ? "start" : "end"), /* @__PURE__ */ p("text", {
+							x: i,
+							y: a,
+							textAnchor: o,
+							dominantBaseline: "central",
+							className: "fill-surface-fg-muted text-ds-xs",
+							children: e
+						}, `label-${t}`);
+					}),
+					Array.from({ length: x }, (e, t) => {
+						let n = Math.round(H / x * (t + 1)), r = B / x * (t + 1), i = -Math.PI / 2;
+						return /* @__PURE__ */ p("text", {
+							x: r * Math.cos(i) + 4,
+							y: r * Math.sin(i),
+							textAnchor: "start",
+							dominantBaseline: "auto",
+							className: "fill-surface-fg-subtle text-ds-xs",
+							children: n
+						}, `level-label-${t}`);
+					}),
+					y.map((e, t) => {
+						let n = G(e.key), r = W(n);
+						return r ? /* @__PURE__ */ m("g", { children: [/* @__PURE__ */ p("path", {
+							d: r,
+							fill: V[t],
+							fillOpacity: S,
+							stroke: V[t],
+							strokeWidth: 2,
+							strokeLinejoin: "round"
+						}), C && n.map((n, r) => {
+							let { x: i, y: a } = K(r, n);
+							return /* @__PURE__ */ p("circle", {
+								cx: i,
+								cy: a,
+								r: 4,
+								fill: V[t],
+								stroke: "var(--color-surface-base)",
+								strokeWidth: 2,
+								className: "transition-opacity"
+							}, `dot-${e.key}-${r}`);
+						})] }, e.key) : null;
+					}),
+					T && v.map((e, t) => {
+						let n = U * t - Math.PI / 2;
+						return /* @__PURE__ */ p("circle", {
+							cx: B * Math.cos(n),
+							cy: B * Math.sin(n),
+							r: 16,
+							fill: "transparent",
+							className: "cursor-pointer",
+							onMouseMove: (n) => {
+								let r = n.currentTarget.closest("div")?.getBoundingClientRect();
+								I(n.clientX - (r?.left ?? 0), n.clientY - (r?.top ?? 0), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
+									className: "font-medium",
+									children: e
+								}), y.map((e, n) => {
+									let r = Number(c[t]?.[e.key]) || 0;
+									return /* @__PURE__ */ m("div", {
+										className: "flex items-center gap-ds-02",
+										children: [
+											/* @__PURE__ */ p("span", {
+												className: "inline-block h-2 w-2 rounded-pill",
+												style: { backgroundColor: V[n] }
+											}),
+											/* @__PURE__ */ m("span", {
+												className: "text-surface-fg-muted",
+												children: [e.label, ":"]
+											}),
+											" ",
+											r.toLocaleString()
+										]
+									}, e.key);
+								})] }));
+							},
+							onMouseLeave: L
+						}, `hover-${t}`);
+					})
+				]
+			})
+		}), T && /* @__PURE__ */ p(a, { state: F })] }), E && /* @__PURE__ */ p(i, {
+			items: y.map((e, t) => ({
+				label: e.label,
+				color: V[t]
+			})),
+			className: "mt-ds-04"
+		})]
+	});
+});
+v.displayName = "RadarChart";
+//#endregion
+export { v as RadarChart };

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

@@ -0,0 +1 @@
+{"version":3,"file":"radar-chart.js","names":[],"sources":["../../../src/ui/charts/radar-chart.tsx"],"sourcesContent":["'use client'\n\nimport { curveLinearClosed,lineRadial } from 'd3-shape'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\nimport { useEffect,useRef, useState } from 'react'\n\nimport { motionProps,tweens } from '../lib/motion'\nimport { cn } from '../lib/utils'\nimport { useReducedMotion } from './_internal/animation'\nimport { resolveColor } from './_internal/colors'\nimport { Legend } from './_internal/legend'\nimport { ChartTooltip, useChartTooltip } from './_internal/tooltip'\n\nexport interface RadarChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Data array (one entry per data point / axis) */\n  data: Record<string, string | number>[]\n  /** Axis labels (3-8 axes) */\n  axes: string[]\n  /** Series to plot */\n  series: { key: string; label: string; color?: string }[]\n  /** Max value (auto-detect if not set) */\n  maxValue?: number\n  /** Number of concentric grid rings (default: 5) */\n  levels?: number\n  /** Fill opacity for the data polygon (default: 0.25) */\n  fillOpacity?: number\n  /** Show dots at vertices */\n  showDots?: boolean\n  /** Chart height (default: 300) */\n  height?: number\n  /** Show tooltip on hover */\n  showTooltip?: boolean\n  /** Show legend */\n  showLegend?: boolean\n  /** Animate on mount */\n  animate?: boolean\n  /** Accessible label for the chart */\n  ariaLabel?: string\n  className?: string\n}\n\nexport const RadarChart = React.forwardRef<HTMLDivElement, RadarChartProps>(\n  (\n    {\n      data,\n      axes,\n      series,\n      maxValue: maxValueProp,\n      levels = 5,\n      fillOpacity = 0.25,\n      showDots = false,\n      height = 300,\n      showTooltip = true,\n      showLegend = false,\n      animate = true,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [containerWidth, setContainerWidth] = useState(0)\n  const { tooltip, show, hide } = useChartTooltip()\n  const reducedMotion = useReducedMotion()\n  const shouldAnimate = animate && !reducedMotion\n\n  useEffect(() => {\n    if (!containerRef.current) return\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setContainerWidth(entry.contentRect.width)\n    })\n    observer.observe(containerRef.current)\n    return () => observer.disconnect()\n  }, [])\n\n  // Radar chart is square — use the smaller of width/height\n  const svgSize = containerWidth > 0 ? Math.min(containerWidth, height) : height\n  const radius = svgSize / 2 - 40 // leave room for labels\n\n  // Resolve colors for each series\n  const colors = series.map((s, i) => resolveColor(s.color, i))\n\n  // Auto-detect maxValue if not provided\n  const maxValue =\n    maxValueProp ??\n    Math.max(\n      ...data.flatMap((d) => series.map((s) => Number(d[s.key]) || 0)),\n      1,\n    )\n\n  // Angle per axis slice\n  const angleSlice = (2 * Math.PI) / axes.length\n\n  // D3 radial line generator for the data polygon\n  const radarLine = lineRadial<number>()\n    .radius((d) => (radius * d) / maxValue)\n    .angle((_, i) => i * angleSlice)\n    .curve(curveLinearClosed)\n\n  // Convert a data row into an array of values aligned with axes\n  const getSeriesValues = (seriesKey: string): number[] =>\n    axes.map((_, i) => Number(data[i]?.[seriesKey]) || 0)\n\n  // Convert polar to cartesian for a given axis index and value\n  const polarToXY = (axisIndex: number, value: number) => {\n    const angle = angleSlice * axisIndex - Math.PI / 2\n    const r = (radius * value) / maxValue\n    return {\n      x: r * Math.cos(angle),\n      y: r * Math.sin(angle),\n    }\n  }\n\n  return (\n    <motion.div\n      ref={(node) => {\n        (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n      }}\n      className={cn('relative w-full', className)}\n      {...(shouldAnimate\n        ? { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1 }, transition: tweens.fade }\n        : {})}\n      {...motionProps(props)}\n    >\n      {containerWidth > 0 && (\n        <>\n          <svg\n            width={containerWidth}\n            height={height}\n            role=\"img\"\n            aria-label={ariaLabel ?? 'Radar chart'}\n          >\n            <g transform={`translate(${containerWidth / 2},${height / 2})`}>\n              {/* Concentric grid polygons */}\n              {Array.from({ length: levels }, (_, i) => {\n                const levelRadius = (radius / levels) * (i + 1)\n                const points = axes\n                  .map((_, j) => {\n                    const angle = angleSlice * j - Math.PI / 2\n                    return `${levelRadius * Math.cos(angle)},${levelRadius * Math.sin(angle)}`\n                  })\n                  .join(' ')\n                return (\n                  <polygon\n                    key={`grid-${i}`}\n                    points={points}\n                    fill=\"none\"\n                    stroke=\"var(--color-surface-border)\"\n                    strokeDasharray=\"3,3\"\n                    strokeWidth={1}\n                  />\n                )\n              })}\n\n              {/* Axis lines from center to outer edge */}\n              {axes.map((_, i) => {\n                const angle = angleSlice * i - Math.PI / 2\n                const x = radius * Math.cos(angle)\n                const y = radius * Math.sin(angle)\n                return (\n                  <line\n                    key={`axis-${i}`}\n                    x1={0}\n                    y1={0}\n                    x2={x}\n                    y2={y}\n                    stroke=\"var(--color-surface-border)\"\n                    strokeWidth={1}\n                  />\n                )\n              })}\n\n              {/* Axis labels */}\n              {axes.map((label, i) => {\n                const angle = angleSlice * i - Math.PI / 2\n                const labelRadius = radius + 18\n                const x = labelRadius * Math.cos(angle)\n                const y = labelRadius * Math.sin(angle)\n\n                // Determine text-anchor based on position\n                let textAnchor: 'start' | 'middle' | 'end' = 'middle'\n                if (Math.abs(Math.cos(angle)) > 0.1) {\n                  textAnchor = Math.cos(angle) > 0 ? 'start' : 'end'\n                }\n\n                return (\n                  <text\n                    key={`label-${i}`}\n                    x={x}\n                    y={y}\n                    textAnchor={textAnchor}\n                    dominantBaseline=\"central\"\n                    className=\"fill-surface-fg-muted text-ds-xs\"\n                  >\n                    {label}\n                  </text>\n                )\n              })}\n\n              {/* Level value labels on the first axis */}\n              {Array.from({ length: levels }, (_, i) => {\n                const levelValue = Math.round((maxValue / levels) * (i + 1))\n                const levelRadius = (radius / levels) * (i + 1)\n                const angle = -Math.PI / 2 // first axis is at top\n                const x = levelRadius * Math.cos(angle) + 4\n                const y = levelRadius * Math.sin(angle)\n                return (\n                  <text\n                    key={`level-label-${i}`}\n                    x={x}\n                    y={y}\n                    textAnchor=\"start\"\n                    dominantBaseline=\"auto\"\n                    className=\"fill-surface-fg-subtle text-ds-xs\"\n                  >\n                    {levelValue}\n                  </text>\n                )\n              })}\n\n              {/* Data polygons — one per series */}\n              {series.map((s, seriesIdx) => {\n                const values = getSeriesValues(s.key)\n                const pathD = radarLine(values)\n                if (!pathD) return null\n\n                return (\n                  <g key={s.key}>\n                    <path\n                      d={pathD}\n                      fill={colors[seriesIdx]}\n                      fillOpacity={fillOpacity}\n                      stroke={colors[seriesIdx]}\n                      strokeWidth={2}\n                      strokeLinejoin=\"round\"\n                    />\n\n                    {/* Vertex dots */}\n                    {showDots &&\n                      values.map((v, i) => {\n                        const { x, y } = polarToXY(i, v)\n                        return (\n                          <circle\n                            key={`dot-${s.key}-${i}`}\n                            cx={x}\n                            cy={y}\n                            r={4}\n                            fill={colors[seriesIdx]}\n                            stroke=\"var(--color-surface-base)\"\n                            strokeWidth={2}\n                            className=\"transition-opacity\"\n                          />\n                        )\n                      })}\n                  </g>\n                )\n              })}\n\n              {/* Invisible hover areas at each vertex for tooltips */}\n              {showTooltip &&\n                axes.map((axisLabel, i) => {\n                  // Place a transparent circle at the outermost series point\n                  // for hit detection. Use the max value point for the axis.\n                  const angle = angleSlice * i - Math.PI / 2\n                  const hitX = radius * Math.cos(angle)\n                  const hitY = radius * Math.sin(angle)\n\n                  return (\n                    <circle\n                      key={`hover-${i}`}\n                      cx={hitX}\n                      cy={hitY}\n                      r={16}\n                      fill=\"transparent\"\n                      className=\"cursor-pointer\"\n                      onMouseMove={(e) => {\n                        const rect = e.currentTarget\n                          .closest('div')\n                          ?.getBoundingClientRect()\n                        show(\n                          e.clientX - (rect?.left ?? 0),\n                          e.clientY - (rect?.top ?? 0),\n                          <div>\n                            <div className=\"font-medium\">{axisLabel}</div>\n                            {series.map((s, sIdx) => {\n                              const val = Number(data[i]?.[s.key]) || 0\n                              return (\n                                <div\n                                  key={s.key}\n                                  className=\"flex items-center gap-ds-02\"\n                                >\n                                  <span\n                                    className=\"inline-block h-2 w-2 rounded-pill\"\n                                    style={{ backgroundColor: colors[sIdx] }}\n                                  />\n                                  <span className=\"text-surface-fg-muted\">\n                                    {s.label}:\n                                  </span>{' '}\n                                  {val.toLocaleString()}\n                                </div>\n                              )\n                            })}\n                          </div>,\n                        )\n                      }}\n                      onMouseLeave={hide}\n                    />\n                  )\n                })}\n            </g>\n          </svg>\n\n          {/* Tooltip overlay */}\n          {showTooltip && <ChartTooltip state={tooltip} />}\n        </>\n      )}\n\n      {/* Legend */}\n      {showLegend && (\n        <Legend\n          items={series.map((s, i) => ({\n            label: s.label,\n            color: colors[i],\n          }))}\n          className=\"mt-ds-04\"\n        />\n      )}\n    </motion.div>\n  )\n  },\n)\nRadarChart.displayName = 'RadarChart'\n"],"mappings":"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"}

package/dist/ui/charts/sparkline.js

@@ -0,0 +1,119 @@
+"use client";
+import { cn as e } from "../lib/utils.js";
+import { r as t, t as n } from "../../_chunks/colors.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { motion as o } from "framer-motion";
+import { scaleLinear as s } from "d3-scale";
+import { area as c, curveMonotoneX as l, line as u } from "d3-shape";
+//#region src/ui/charts/sparkline.tsx
+var d = {
+	duration: 1,
+	ease: "easeOut"
+}, f = r.forwardRef(({ data: r, variant: f = "line", width: p = 120, height: m = 32, color: h, showLastDot: g = !1, strokeWidth: _ = 1.5, animate: v = !0, className: y, ...b }, x) => {
+	let S = n(h, 0), C = t(), w = v && !C;
+	if (!r.length) return null;
+	let T = f === "bar" ? 1 : _, E = p - T * 2, D = m - T * 2, O = s().domain([0, Math.max(r.length - 1, 1)]).range([T, T + E]), k = Math.min(...r), A = Math.max(...r), j = k === A ? [k - 1, A + 1] : [k, A], M = s().domain(j).range([T + D, T]);
+	if (f === "bar") {
+		let t = Math.max(1, (E - 1 * (r.length - 1)) / r.length), n = T + D;
+		return /* @__PURE__ */ i("svg", {
+			ref: x,
+			width: p,
+			height: m,
+			role: "img",
+			"aria-label": "Sparkline bar chart",
+			className: e("inline-block align-middle", y),
+			...b,
+			children: r.map((e, r) => {
+				let a = T + r * (t + 1), o = M(e);
+				return /* @__PURE__ */ i("rect", {
+					x: a,
+					y: o,
+					width: t,
+					height: Math.max(1, n - o),
+					rx: Math.min(1, t / 2),
+					fill: S
+				}, r);
+			})
+		});
+	}
+	if (f === "area") {
+		let t = c().curve(l).x((e, t) => O(t)).y0(T + D).y1((e) => M(e)), n = u().curve(l).x((e, t) => O(t)).y((e) => M(e)), s = t(r) ?? "", f = n(r) ?? "", h = O(r.length - 1), v = M(r[r.length - 1]);
+		return /* @__PURE__ */ a("svg", {
+			ref: x,
+			width: p,
+			height: m,
+			role: "img",
+			"aria-label": "Sparkline area chart",
+			className: e("inline-block align-middle", y),
+			...b,
+			children: [
+				/* @__PURE__ */ i("path", {
+					d: s,
+					fill: S,
+					opacity: .2
+				}),
+				w ? /* @__PURE__ */ i(o.path, {
+					d: f,
+					fill: "none",
+					stroke: S,
+					strokeWidth: _,
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					initial: { pathLength: 0 },
+					animate: { pathLength: 1 },
+					transition: d
+				}) : /* @__PURE__ */ i("path", {
+					d: f,
+					fill: "none",
+					stroke: S,
+					strokeWidth: _,
+					strokeLinejoin: "round",
+					strokeLinecap: "round"
+				}),
+				g && /* @__PURE__ */ i("circle", {
+					cx: h,
+					cy: v,
+					r: _ + 1,
+					fill: S
+				})
+			]
+		});
+	}
+	let N = u().curve(l).x((e, t) => O(t)).y((e) => M(e))(r) ?? "", P = O(r.length - 1), F = M(r[r.length - 1]);
+	return /* @__PURE__ */ a("svg", {
+		ref: x,
+		width: p,
+		height: m,
+		role: "img",
+		"aria-label": "Sparkline chart",
+		className: e("inline-block align-middle", y),
+		...b,
+		children: [w ? /* @__PURE__ */ i(o.path, {
+			d: N,
+			fill: "none",
+			stroke: S,
+			strokeWidth: _,
+			strokeLinejoin: "round",
+			strokeLinecap: "round",
+			initial: { pathLength: 0 },
+			animate: { pathLength: 1 },
+			transition: d
+		}) : /* @__PURE__ */ i("path", {
+			d: N,
+			fill: "none",
+			stroke: S,
+			strokeWidth: _,
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		}), g && /* @__PURE__ */ i("circle", {
+			cx: P,
+			cy: F,
+			r: _ + 1,
+			fill: S
+		})]
+	});
+});
+f.displayName = "Sparkline";
+//#endregion
+export { f as Sparkline };