@devalok/shilp-sutra 0.49.5 → 0.50.0

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

@@ -9,18 +9,18 @@ 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 } = a(), R = s(), z = D && !R;
+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: ee = !1, animate: te = !0, labelMode: E = "auto", maxLabelChars: ne, target: D, onAxisClick: O, axisDescriptions: k, ariaLabel: A, className: j, ...M }, N) => {
+	let P = u(null), [F, I] = d(0), { tooltip: L, show: R, hide: z } = a(), B = s(), V = te && !B;
 	l(() => {
-		if (!M.current) return;
+		if (!P.current) return;
 		let e = new ResizeObserver((e) => {
 			let t = e[0];
-			t && P(t.contentRect.width);
+			t && I(t.contentRect.width);
 		});
-		return e.observe(M.current), () => e.disconnect();
+		return e.observe(P.current), () => e.disconnect();
 	}, []);
-	let B = (N > 0 ? Math.min(N, w) : w) / 2 - 40, V = y.map((e, t) => o(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;
+	let H = F > 0 ? Math.min(F, w) : w, U = E === "auto" ? v.length > 10 ? "radial" : "horizontal" : E, W = ne ?? (U === "radial" ? 16 : void 0), G = (e) => W && e.length > W ? `${e.slice(0, W - 1)}…` : e, K = Math.max(1, ...v.map((e) => G(e).length)) * 11 * .58, re = U === "horizontal" ? Math.min(K + 14, H * .36) : Math.min(K * .7 + 18, H * .3), q = Math.max(H / 2 - re, 48), J = y.map((e, t) => o(e.color, t)), Y = b ?? Math.max(...c.flatMap((e) => y.map((t) => Number(e[t.key]) || 0)), 1), X = 2 * Math.PI / v.length, Z = _().radius((e) => q * e / Y).angle((e, t) => t * X).curve(g), ie = (e) => v.map((t, n) => Number(c[n]?.[e]) || 0), Q = D == null ? null : v.map((e, t) => Array.isArray(D) ? Number(D[t]) || 0 : D), $ = Q ? Z(Q) : null, ae = (e, t) => {
+		let n = X * e - Math.PI / 2, r = q * t / Y;
 		return {
 			x: r * Math.cos(n),
 			y: r * Math.sin(n)
@@ -28,10 +28,10 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 	};
 	return /* @__PURE__ */ m(h.div, {
 		ref: (e) => {
-			M.current = e, typeof j == "function" ? j(e) : j && (j.current = e);
+			P.current = e, typeof N == "function" ? N(e) : N && (N.current = e);
 		},
-		className: n("relative w-full", k),
-		...z ? {
+		className: n("relative w-full", j),
+		...V ? {
 			initial: {
 				opacity: 0,
 				scale: .96
@@ -42,20 +42,20 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 			},
 			transition: t.fade
 		} : {},
-		...e(A),
-		children: [N > 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("svg", {
-			width: N,
+		...e(M),
+		children: [F > 0 && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("svg", {
+			width: F,
 			height: w,
 			role: "img",
-			"aria-label": O ?? "Radar chart",
+			"aria-label": A ?? "Radar chart",
 			children: /* @__PURE__ */ m("g", {
-				transform: `translate(${N / 2},${w / 2})`,
+				transform: `translate(${F / 2},${w / 2})`,
 				children: [
 					Array.from({ length: x }, (e, t) => {
-						let n = B / x * (t + 1);
+						let n = q / x * (t + 1);
 						return /* @__PURE__ */ p("polygon", {
 							points: v.map((e, t) => {
-								let r = U * t - Math.PI / 2;
+								let r = X * t - Math.PI / 2;
 								return `${n * Math.cos(r)},${n * Math.sin(r)}`;
 							}).join(" "),
 							fill: "none",
@@ -65,54 +65,91 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 						}, `grid-${t}`);
 					}),
 					v.map((e, t) => {
-						let n = U * t - Math.PI / 2;
+						let n = X * t - Math.PI / 2;
 						return /* @__PURE__ */ p("line", {
 							x1: 0,
 							y1: 0,
-							x2: B * Math.cos(n),
-							y2: B * Math.sin(n),
+							x2: q * Math.cos(n),
+							y2: q * 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,
+						let r = X * t - Math.PI / 2, i = G(e), a = !!O, o = k?.[t], s = {
+							className: n("fill-surface-fg-muted text-body-xs", a && "cursor-pointer hover:fill-surface-fg", !a && o && "cursor-help hover:fill-surface-fg"),
+							onClick: a ? () => O(e, t) : void 0,
+							role: a ? "button" : void 0,
+							tabIndex: a ? 0 : void 0,
+							onMouseMove: o ? (t) => {
+								let n = t.currentTarget.closest("div")?.getBoundingClientRect();
+								R(t.clientX - (n?.left ?? 0), t.clientY - (n?.top ?? 0), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
+									className: "font-medium",
+									children: e
+								}), /* @__PURE__ */ p("div", {
+									className: "max-w-[220px] text-surface-fg-muted",
+									children: o
+								})] }));
+							} : void 0,
+							onMouseLeave: o ? z : void 0
+						}, c = i === e ? null : /* @__PURE__ */ p("title", { children: e });
+						if (U === "radial") {
+							let e = q + 10, n = e * Math.cos(r), a = e * Math.sin(r), o = r * 180 / Math.PI, l = "start";
+							return (o > 90 || o < -90) && (o += 180, l = "end"), /* @__PURE__ */ m("text", {
+								x: n,
+								y: a,
+								textAnchor: l,
+								dominantBaseline: "central",
+								transform: `rotate(${o} ${n} ${a})`,
+								...s,
+								children: [c, i]
+							}, `label-${t}`);
+						}
+						let l = q + 18, u = l * Math.cos(r), d = l * Math.sin(r), f = "middle";
+						return Math.abs(Math.cos(r)) > .1 && (f = Math.cos(r) > 0 ? "start" : "end"), /* @__PURE__ */ m("text", {
+							x: u,
+							y: d,
+							textAnchor: f,
 							dominantBaseline: "central",
-							className: "fill-surface-fg-muted text-ds-xs",
-							children: e
+							...s,
+							children: [c, i]
 						}, `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;
+						let n = Math.round(Y / x * (t + 1)), r = q / 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",
+							className: "fill-surface-fg-subtle text-body-xs",
 							children: n
 						}, `level-label-${t}`);
 					}),
+					$ && /* @__PURE__ */ p("path", {
+						d: $,
+						fill: "none",
+						stroke: "var(--color-accent-9)",
+						strokeWidth: 1.5,
+						strokeDasharray: "4,3",
+						opacity: .75
+					}),
 					y.map((e, t) => {
-						let n = G(e.key), r = W(n);
+						let n = ie(e.key), r = Z(n);
 						return r ? /* @__PURE__ */ m("g", { children: [/* @__PURE__ */ p("path", {
 							d: r,
-							fill: V[t],
+							fill: J[t],
 							fillOpacity: S,
-							stroke: V[t],
+							stroke: J[t],
 							strokeWidth: 2,
 							strokeLinejoin: "round"
 						}), C && n.map((n, r) => {
-							let { x: i, y: a } = K(r, n);
+							let { x: i, y: a } = ae(r, n);
 							return /* @__PURE__ */ p("circle", {
 								cx: i,
 								cy: a,
 								r: 4,
-								fill: V[t],
+								fill: J[t],
 								stroke: "var(--color-surface-base)",
 								strokeWidth: 2,
 								className: "transition-opacity"
@@ -120,16 +157,17 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 						})] }, e.key) : null;
 					}),
 					T && v.map((e, t) => {
-						let n = U * t - Math.PI / 2;
+						let n = X * t - Math.PI / 2;
 						return /* @__PURE__ */ p("circle", {
-							cx: B * Math.cos(n),
-							cy: B * Math.sin(n),
+							cx: q * Math.cos(n),
+							cy: q * Math.sin(n),
 							r: 16,
 							fill: "transparent",
 							className: "cursor-pointer",
+							onClick: O ? () => O(e, t) : void 0,
 							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", {
+								R(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) => {
@@ -139,7 +177,7 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 										children: [
 											/* @__PURE__ */ p("span", {
 												className: "inline-block h-2 w-2 rounded-pill",
-												style: { backgroundColor: V[n] }
+												style: { backgroundColor: J[n] }
 											}),
 											/* @__PURE__ */ m("span", {
 												className: "text-surface-fg-muted",
@@ -151,15 +189,15 @@ var v = c.forwardRef(({ data: c, axes: v, series: y, maxValue: b, levels: x = 5,
 									}, e.key);
 								})] }));
 							},
-							onMouseLeave: L
+							onMouseLeave: z
 						}, `hover-${t}`);
 					})
 				]
 			})
-		}), T && /* @__PURE__ */ p(r, { state: F })] }), E && /* @__PURE__ */ p(i, {
+		}), (T || k) && /* @__PURE__ */ p(r, { state: L })] }), ee && /* @__PURE__ */ p(i, {
 			items: y.map((e, t) => ({
 				label: e.label,
-				color: V[t]
+				color: J[t]
 			})),
 			className: "mt-ds-04"
 		})]

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

@@ -1 +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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"}
+{"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  /**\n   * Axis labels. Reads best at 3–8; supported up to ~16 — past ~10 labels\n   * auto-switch to radial (rotated) orientation and truncate. For very high\n   * counts a horizontal bar list is clearer than a radar.\n   */\n  axes: string[]\n  /** Series to plot */\n  series: { key: string; label: string; color?: string }[]\n  /**\n   * Axis-label orientation. `horizontal` (anchored, best ≤8 axes), `radial`\n   * (rotated along each spoke, best for many axes), or `auto` (radial past 10).\n   * @default 'auto'\n   */\n  labelMode?: 'auto' | 'horizontal' | 'radial'\n  /** Truncate axis labels to N characters (full text stays in the tooltip). Defaults to 16 in radial mode, off otherwise. */\n  maxLabelChars?: number\n  /** Draw a dashed benchmark/target ring — one value for a uniform target, or one per axis. */\n  target?: number | number[]\n  /** Called when an axis label or vertex is clicked (drill-down into that dimension). */\n  onAxisClick?: (axis: string, index: number) => void\n  /** Per-axis descriptions (aligned to `axes`). When set, hovering a label shows the description in a tooltip. */\n  axisDescriptions?: 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      labelMode = 'auto',\n      maxLabelChars,\n      target,\n      onAxisClick,\n      axisDescriptions,\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\n  // Label layout: past ~10 axes, horizontal labels collide, so switch to\n  // radial (rotated along each spoke) and truncate. Margin is derived from the\n  // longest displayed label instead of a fixed 40px, so labels never clip.\n  const effectiveLabelMode = labelMode === 'auto' ? (axes.length > 10 ? 'radial' : 'horizontal') : labelMode\n  const truncLen = maxLabelChars ?? (effectiveLabelMode === 'radial' ? 16 : undefined)\n  const displayLabel = (s: string) => (truncLen && s.length > truncLen ? `${s.slice(0, truncLen - 1)}…` : s)\n  const longestChars = Math.max(1, ...axes.map((a) => displayLabel(a).length))\n  const LABEL_FONT = 11 // ≈ text-body-xs\n  const labelPx = longestChars * LABEL_FONT * 0.58\n  const labelMargin =\n    effectiveLabelMode === 'horizontal'\n      ? Math.min(labelPx + 14, svgSize * 0.36)\n      : Math.min(labelPx * 0.7 + 18, svgSize * 0.3)\n  const radius = Math.max(svgSize / 2 - labelMargin, 48) // 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  // Optional benchmark/target ring — uniform value or per-axis array.\n  const targetValues =\n    target == null ? null : axes.map((_, i) => (Array.isArray(target) ? Number(target[i]) || 0 : target))\n  const targetPath = targetValues ? radarLine(targetValues) : null\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 display = displayLabel(label)\n                const clickable = !!onAxisClick\n                const desc = axisDescriptions?.[i]\n                const common = {\n                  className: cn(\n                    'fill-surface-fg-muted text-body-xs',\n                    clickable && 'cursor-pointer hover:fill-surface-fg',\n                    !clickable && desc && 'cursor-help hover:fill-surface-fg',\n                  ),\n                  onClick: clickable ? () => onAxisClick(label, i) : undefined,\n                  role: clickable ? 'button' : undefined,\n                  tabIndex: clickable ? 0 : undefined,\n                  onMouseMove: desc\n                    ? (e: React.MouseEvent<SVGTextElement>) => {\n                        const rect = e.currentTarget.closest('div')?.getBoundingClientRect()\n                        show(\n                          e.clientX - (rect?.left ?? 0),\n                          e.clientY - (rect?.top ?? 0),\n                          <div>\n                            <div className=\"font-medium\">{label}</div>\n                            <div className=\"max-w-[220px] text-surface-fg-muted\">{desc}</div>\n                          </div>,\n                        )\n                      }\n                    : undefined,\n                  onMouseLeave: desc ? hide : undefined,\n                }\n                const titleEl = display !== label ? <title>{label}</title> : null\n\n                if (effectiveLabelMode === 'radial') {\n                  const labelRadius = radius + 10\n                  const x = labelRadius * Math.cos(angle)\n                  const y = labelRadius * Math.sin(angle)\n                  let deg = (angle * 180) / Math.PI\n                  let anchor: 'start' | 'end' = 'start'\n                  // Flip labels on the left half so they read upright.\n                  if (deg > 90 || deg < -90) {\n                    deg += 180\n                    anchor = 'end'\n                  }\n                  return (\n                    <text\n                      key={`label-${i}`}\n                      x={x}\n                      y={y}\n                      textAnchor={anchor}\n                      dominantBaseline=\"central\"\n                      transform={`rotate(${deg} ${x} ${y})`}\n                      {...common}\n                    >\n                      {titleEl}\n                      {display}\n                    </text>\n                  )\n                }\n\n                const labelRadius = radius + 18\n                const x = labelRadius * Math.cos(angle)\n                const y = labelRadius * Math.sin(angle)\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                return (\n                  <text key={`label-${i}`} x={x} y={y} textAnchor={textAnchor} dominantBaseline=\"central\" {...common}>\n                    {titleEl}\n                    {display}\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-body-xs\"\n                  >\n                    {levelValue}\n                  </text>\n                )\n              })}\n\n              {/* Target / benchmark ring */}\n              {targetPath && (\n                <path\n                  d={targetPath}\n                  fill=\"none\"\n                  stroke=\"var(--color-accent-9)\"\n                  strokeWidth={1.5}\n                  strokeDasharray=\"4,3\"\n                  opacity={0.75}\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                      onClick={onAxisClick ? () => onAxisClick(axisLabel, i) : undefined}\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 — for vertex values and/or axis descriptions */}\n          {(showTooltip || axisDescriptions) && <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/code.js

@@ -4,12 +4,12 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/ui/code.tsx
 var r = t.forwardRef(({ className: t, variant: r = "inline", children: i, ...a }, o) => r === "block" ? /* @__PURE__ */ n("pre", {
 	ref: o,
-	className: e("overflow-x-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg", t),
+	className: e("overflow-x-auto rounded-surface border border-card-strong bg-surface-raised p-ds-05 font-mono text-body-sm leading-ds-relaxed text-surface-fg", t),
 	...a,
 	children: /* @__PURE__ */ n("code", { children: i })
 }) : /* @__PURE__ */ n("code", {
 	ref: o,
-	className: e("rounded-control-inner bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg", t),
+	className: e("rounded-control-inner bg-surface-raised-hover border border-card px-ds-02 py-ds-01 font-mono text-body-sm text-surface-fg", t),
 	...a,
 	children: i
 }));

package/dist/ui/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n *   short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n *   multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n  ({ className, variant = 'inline', children, ...props }, ref) => {\n    if (variant === 'block') {\n      return (\n        <pre\n          ref={ref as React.Ref<HTMLPreElement>}\n          className={cn(\n            'overflow-x-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg',\n            className,\n          )}\n          {...props}\n        >\n          <code>{children}</code>\n        </pre>\n      )\n    }\n\n    return (\n      <code\n        ref={ref}\n        className={cn(\n          'rounded-control-inner bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </code>\n    )\n  },\n)\nCode.displayName = 'Code'\n\nexport { Code }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,UAAU,aAAU,GAAG,KAAS,MAClD,MAAY,UAEZ,kBAAC,OAAD;CACO;CACL,WAAW,EACT,yJACA,CACF;CACA,GAAI;WAEJ,kBAAC,QAAD,EAAO,YAAe,CAAA;AACnB,CAAA,IAKP,kBAAC,QAAD;CACO;CACL,WAAW,EACT,qIACA,CACF;CACA,GAAI;CAEH;AACG,CAAA,CAGZ;AACA,EAAK,cAAc"}
+{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n *   short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n *   multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n  ({ className, variant = 'inline', children, ...props }, ref) => {\n    if (variant === 'block') {\n      return (\n        <pre\n          ref={ref as React.Ref<HTMLPreElement>}\n          className={cn(\n            'overflow-x-auto rounded-surface border border-card-strong bg-surface-raised p-ds-05 font-mono text-body-sm leading-ds-relaxed text-surface-fg',\n            className,\n          )}\n          {...props}\n        >\n          <code>{children}</code>\n        </pre>\n      )\n    }\n\n    return (\n      <code\n        ref={ref}\n        className={cn(\n          'rounded-control-inner bg-surface-raised-hover border border-card px-ds-02 py-ds-01 font-mono text-body-sm text-surface-fg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </code>\n    )\n  },\n)\nCode.displayName = 'Code'\n\nexport { Code }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,UAAU,aAAU,GAAG,KAAS,MAClD,MAAY,UAEZ,kBAAC,OAAD;CACO;CACL,WAAW,EACT,iJACA,CACF;CACA,GAAI;WAEJ,kBAAC,QAAD,EAAO,YAAe,CAAA;AACnB,CAAA,IAKP,kBAAC,QAAD;CACO;CACL,WAAW,EACT,6HACA,CACF;CACA,GAAI;CAEH;AACG,CAAA,CAGZ;AACA,EAAK,cAAc"}

package/dist/ui/color-input.js

@@ -108,12 +108,12 @@ function y({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength:
 		className: n("flex flex-col gap-ds-01", c),
 		children: [/* @__PURE__ */ l("label", {
 			htmlFor: d,
-			className: "text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted",
+			className: "text-label-xs font-medium uppercase tracking-wider text-surface-fg-muted",
 			children: e
 		}), /* @__PURE__ */ u("div", {
 			className: "flex items-center",
 			children: [s && /* @__PURE__ */ l("span", {
-				className: "text-ds-sm text-surface-fg-muted",
+				className: "text-body-sm text-surface-fg-muted",
 				children: s
 			}), /* @__PURE__ */ l("input", {
 				id: d,
@@ -123,7 +123,7 @@ function y({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength:
 				onChange: (e) => r(e.target.value),
 				onBlur: i,
 				maxLength: o,
-				className: n("h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors", "focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
+				className: n("h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-body-sm text-surface-fg transition-colors", "focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
 			})]
 		})]
 	});
@@ -183,7 +183,7 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 				children: D === "inline" ? /* @__PURE__ */ l(f.button, {
 					type: "button",
 					disabled: C,
-					className: n("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-ds-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", C && "cursor-not-allowed opacity-50"),
+					className: n("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", C && "cursor-not-allowed opacity-50"),
 					animate: {
 						backgroundColor: I,
 						color: v(I) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
@@ -224,7 +224,7 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 							}
 						}),
 						/* @__PURE__ */ l("span", {
-							className: "relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg",
+							className: "relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-body-sm text-surface-fg",
 							children: I.toUpperCase()
 						})
 					]
@@ -256,7 +256,7 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 								children: re.map((e) => /* @__PURE__ */ u("button", {
 									type: "button",
 									onClick: () => ne(e),
-									className: n("relative min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors", A === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
+									className: n("relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors", A === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
 									children: [A === e && /* @__PURE__ */ l(f.span, {
 										layoutId: `color-input-format-pill-${N}`,
 										className: "absolute inset-0 rounded-control-inner bg-accent-3",
@@ -441,20 +441,20 @@ var b = c.forwardRef(({ value: b = "#000000", onChange: x, presets: S, disabled:
 									title: `Original: ${R}`
 								}),
 								/* @__PURE__ */ l("span", {
-									className: "text-ds-xs text-surface-fg-muted",
+									className: "text-caption text-surface-fg-muted",
 									children: R.toUpperCase()
 								}),
 								/* @__PURE__ */ l("span", { className: "flex-1" }),
 								B.length > 0 && /* @__PURE__ */ l("button", {
 									type: "button",
 									onClick: q,
-									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
+									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
 									children: "Undo"
 								}),
 								I !== R && /* @__PURE__ */ l("button", {
 									type: "button",
 									onClick: J,
-									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11",
+									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-error-11",
 									children: "Reset"
 								})
 							]

package/dist/ui/color-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { useFormField } from './form'\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n  if (!m) return null\n  const n = parseInt(m[1], 16)\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return null\n  const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n  let h = 0\n  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n  else if (max === g) h = ((b - r) / d + 2) / 6\n  else h = ((r - g) / d + 4) / 6\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sn = s / 100, ln = l / 100\n  const a = sn * Math.min(ln, 1 - ln)\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12\n    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n    return Math.round(255 * c)\n  }\n  return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets ──\n// Brand spectrum derived from our OKLCH scales (step-9), spanning the wheel —\n// intentional and on-brand, NOT the raw framework palette. Led by red, not indigo.\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#C53637', label: 'Red' },\n  { hex: '#BE5A0A', label: 'Orange' },\n  { hex: '#DF911A', label: 'Amber' },\n  { hex: '#308639', label: 'Green' },\n  { hex: '#118659', label: 'Emerald' },\n  { hex: '#11846E', label: 'Teal' },\n  { hex: '#028A9B', label: 'Cyan' },\n  { hex: '#1479B0', label: 'Blue' },\n  { hex: '#7D5FAD', label: 'Purple' },\n  { hex: '#C22D6D', label: 'Pink' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return false\n  // Relative luminance (sRGB)\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n  })\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current color value (hex string, e.g. \"#d33163\") */\n  value?: string\n  /** Called when the color changes */\n  onChange?: (value: string) => void\n  /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n  presets?: { hex: string; label: string }[] | string[] | false\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Show the interactive color picker. Default: true. */\n  showPicker?: boolean\n  /** Default format for the input fields. Default: 'hex'. */\n  defaultFormat?: ColorFormat\n  /** Popover alignment. Default: 'start'. */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Trigger style variant.\n   * - `default`: Swatch bleeds to left edge + hex text\n   * - `inline`: Entire trigger is the selected color with hex text overlaid\n   */\n  variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n  label,\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength = 3,\n  prefix,\n  className,\n  id,\n}: {\n  label: string\n  value: string\n  onChange: (v: string) => void\n  onBlur?: () => void\n  disabled?: boolean\n  maxLength?: number\n  prefix?: string\n  className?: string\n  id: string\n}) {\n  return (\n    <div className={cn('flex flex-col gap-ds-01', className)}>\n      <label htmlFor={id} className=\"text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n        {label}\n      </label>\n      <div className=\"flex items-center\">\n        {prefix && (\n          <span className=\"text-ds-sm text-surface-fg-muted\">{prefix}</span>\n        )}\n        <input\n          id={id}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          onBlur={onBlur}\n          maxLength={maxLength}\n          className={cn(\n            'h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors',\n            'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n            disabled && 'cursor-not-allowed opacity-50',\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  ({\n    value = '#000000',\n    onChange,\n    presets,\n    disabled = false,\n    showPicker = true,\n    defaultFormat = 'hex',\n    align = 'start',\n    variant = 'default',\n    className,\n    id: externalId,\n    ...props\n  }, ref) => {\n    const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n    const [open, setOpen] = React.useState(false)\n    const instanceId = React.useId()\n    const fieldCtx = useFormField()\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves\n    // onto the (labelable) trigger button. The root is a <div>, which can't be a label target.\n    const triggerId = externalId ?? fieldCtx.inputId\n\n    // Internal color state — syncs with prop, allows uncontrolled use\n    const [internalColor, setInternalColor] = React.useState(value)\n    React.useEffect(() => { setInternalColor(value) }, [value])\n\n    // Track color when popover opened (for reset) + undo history\n    const [openColor, setOpenColor] = React.useState(value)\n    const [undoStack, setUndoStack] = React.useState<string[]>([])\n    // Track whether current change is from continuous drag (skip undo push)\n    const isDragging = React.useRef(false)\n\n    const handleOpenChange = (isOpen: boolean) => {\n      if (disabled) return\n      if (isOpen) {\n        setOpenColor(internalColor)\n        setUndoStack([])\n      }\n      setOpen(isOpen)\n    }\n\n    // Discrete change (preset click, field commit) — pushes to undo\n    const handleDiscreteChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      setUndoStack((prev) => {\n        if (prev[prev.length - 1] === internalColor) return prev\n        return [...prev.slice(-19), internalColor]\n      })\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Continuous change (picker drag) — updates color but only pushes undo on drag start\n    const handleChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      if (!isDragging.current) {\n        // First change in a drag sequence — push current color to undo\n        isDragging.current = true\n        setUndoStack((prev) => {\n          if (prev[prev.length - 1] === internalColor) return prev\n          return [...prev.slice(-19), internalColor]\n        })\n      }\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Called when picker drag ends\n    const handlePickerChangeComplete = () => {\n      isDragging.current = false\n    }\n\n    const handleUndo = () => {\n      if (undoStack.length === 0) return\n      const prev = undoStack[undoStack.length - 1]\n      setUndoStack((s) => s.slice(0, -1))\n      setInternalColor(prev)\n      onChange?.(prev)\n    }\n\n    const handleReset = () => {\n      setInternalColor(openColor)\n      onChange?.(openColor)\n      setUndoStack([])\n    }\n\n    // Resolve presets\n    const resolvedPresets = presets === false\n      ? []\n      : presets\n        ? presets.map((p) =>\n            typeof p === 'string' ? { hex: p, label: p } : p\n          )\n        : NAMED_PRESETS\n\n    // Parsed color values — use internal state\n    const rgb = hexToRgb(internalColor)\n    const hsl = hexToHsl(internalColor)\n\n    // RGB field handlers (clamped 0-255)\n    const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n      if (!rgb) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const clamped = Math.max(0, Math.min(255, num))\n      handleDiscreteChange(rgbToHex(\n        channel === 'r' ? clamped : rgb.r,\n        channel === 'g' ? clamped : rgb.g,\n        channel === 'b' ? clamped : rgb.b,\n      ))\n    }\n\n    // HSL field handlers (H: 0-360, S/L: 0-100)\n    const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n      if (!hsl) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const max = channel === 'h' ? 360 : 100\n      const clamped = Math.max(0, Math.min(max, num))\n      handleDiscreteChange(hslToHex(\n        channel === 'h' ? clamped : hsl.h,\n        channel === 's' ? clamped : hsl.s,\n        channel === 'l' ? clamped : hsl.l,\n      ))\n    }\n\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n    return (\n      <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {variant === 'inline' ? (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-ds-sm font-medium',\n                  'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                animate={{\n                  backgroundColor: internalColor,\n                  color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n                }}\n                whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n                whileTap={{ scale: 0.97 }}\n                transition={springs.smooth}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {internalColor.toUpperCase()}\n              </motion.button>\n            ) : (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong',\n                  'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n                transition={springs.snappy}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {/* Gradient background: color → surface */}\n                <motion.span\n                  className=\"absolute inset-0\"\n                  animate={{\n                    background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n                  }}\n                  /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n                  transition={{ duration: 0.3 }}\n                />\n                <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n                  maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                }} />\n                {/* Hex value */}\n                <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg\">\n                  {internalColor.toUpperCase()}\n                </span>\n              </motion.button>\n            )}\n          </PopoverTrigger>\n\n          <PopoverContent\n            role=\"dialog\"\n            aria-label=\"Color picker\"\n            align={align}\n            sideOffset={8}\n            className=\"w-[272px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating\"\n          >\n            <div className=\"flex flex-col\">\n              {/* Interactive picker */}\n              {showPicker && (\n                <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n                  <HexColorPicker\n                    color={internalColor}\n                    onChange={handleChange}\n                    className=\"w-full!\"\n                    style={{ height: 160 }}\n                  />\n                </div>\n              )}\n\n              {/* Format inputs */}\n              <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                {/* Format switcher */}\n                <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n                  {formats.map((f) => (\n                    <button\n                      key={f}\n                      type=\"button\"\n                      onClick={() => setFormat(f)}\n                      className={cn(\n                        'relative min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors',\n                        format === f\n                          ? 'text-accent-11'\n                          : 'text-surface-fg-muted hover:text-surface-fg',\n                      )}\n                    >\n                      {format === f && (\n                        <motion.span\n                          layoutId={`color-input-format-pill-${instanceId}`}\n                          className=\"absolute inset-0 rounded-control-inner bg-accent-3\"\n                          transition={springs.snappy}\n                        />\n                      )}\n                      <span className=\"relative z-10\">{f}</span>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Format fields — animated swap */}\n                <AnimatePresence mode=\"wait\">\n                  {format === 'hex' && (\n                    <motion.div\n                      key=\"hex\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput\n                        id={`${instanceId}-hex`}\n                        label=\"Hex\"\n                        value={internalColor.replace('#', '').toUpperCase()}\n                        onChange={(v) => {\n                          const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n                          if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n                        }}\n                        onBlur={() => {\n                          // Revert display to current color if input is incomplete\n                          const display = internalColor.replace('#', '').toUpperCase()\n                          if (display.length !== 6) setInternalColor(internalColor)\n                        }}\n                        disabled={disabled}\n                        maxLength={6}\n                        prefix=\"#\"\n                        className=\"flex-1\"\n                      />\n                    </motion.div>\n                  )}\n\n                  {format === 'rgb' && rgb && (\n                    <motion.div\n                      key=\"rgb\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n\n                  {format === 'hsl' && hsl && (\n                    <motion.div\n                      key=\"hsl\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              {/* Preset swatches */}\n              {resolvedPresets.length > 0 && (\n                <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                  <div className=\"flex flex-wrap gap-ds-02\">\n                    {resolvedPresets.map((preset, i) => {\n                      const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n                      return (\n                        <motion.button\n                          key={preset.hex}\n                          type=\"button\"\n                          disabled={disabled}\n                          onClick={() => handleDiscreteChange(preset.hex)}\n                          initial={{ opacity: 0, scale: 0.8 }}\n                          animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n                          whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n                          whileTap={{ scale: 0.9 }}\n                          transition={{ ...springs.bouncy, delay: i * 0.02 }}\n                          className={cn(\n                            'h-6 w-6 rounded-control-inner border',\n                            isSelected\n                              ? 'border-accent-7 ring-2 ring-accent-9/30'\n                              : 'border-surface-border hover:border-surface-border-strong',\n                            disabled && 'cursor-not-allowed opacity-50',\n                          )}\n                          style={{ backgroundColor: preset.hex }}\n                          title={preset.label}\n                          aria-label={`${preset.label}: ${preset.hex}`}\n                        />\n                      )\n                    })}\n                  </div>\n                </div>\n              )}\n\n              {/* Reset / Undo footer */}\n              {(undoStack.length > 0 || internalColor !== openColor) && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: 'auto' }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n                >\n                  {/* Original color preview */}\n                  <span\n                    className=\"h-4 w-4 shrink-0 rounded-pill border border-surface-border\"\n                    style={{ backgroundColor: openColor }}\n                    title={`Original: ${openColor}`}\n                  />\n                  <span className=\"text-ds-xs text-surface-fg-muted\">\n                    {openColor.toUpperCase()}\n                  </span>\n                  <span className=\"flex-1\" />\n                  {undoStack.length > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={handleUndo}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n                    >\n                      Undo\n                    </button>\n                  )}\n                  {internalColor !== openColor && (\n                    <button\n                      type=\"button\"\n                      onClick={handleReset}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n                    >\n                      Reset\n                    </button>\n                  )}\n                </motion.div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}
+{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { useFormField } from './form'\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n  if (!m) return null\n  const n = parseInt(m[1], 16)\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return null\n  const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n  let h = 0\n  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n  else if (max === g) h = ((b - r) / d + 2) / 6\n  else h = ((r - g) / d + 4) / 6\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sn = s / 100, ln = l / 100\n  const a = sn * Math.min(ln, 1 - ln)\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12\n    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n    return Math.round(255 * c)\n  }\n  return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets ──\n// Brand spectrum derived from our OKLCH scales (step-9), spanning the wheel —\n// intentional and on-brand, NOT the raw framework palette. Led by red, not indigo.\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#C53637', label: 'Red' },\n  { hex: '#BE5A0A', label: 'Orange' },\n  { hex: '#DF911A', label: 'Amber' },\n  { hex: '#308639', label: 'Green' },\n  { hex: '#118659', label: 'Emerald' },\n  { hex: '#11846E', label: 'Teal' },\n  { hex: '#028A9B', label: 'Cyan' },\n  { hex: '#1479B0', label: 'Blue' },\n  { hex: '#7D5FAD', label: 'Purple' },\n  { hex: '#C22D6D', label: 'Pink' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return false\n  // Relative luminance (sRGB)\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n  })\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current color value (hex string, e.g. \"#d33163\") */\n  value?: string\n  /** Called when the color changes */\n  onChange?: (value: string) => void\n  /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n  presets?: { hex: string; label: string }[] | string[] | false\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Show the interactive color picker. Default: true. */\n  showPicker?: boolean\n  /** Default format for the input fields. Default: 'hex'. */\n  defaultFormat?: ColorFormat\n  /** Popover alignment. Default: 'start'. */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Trigger style variant.\n   * - `default`: Swatch bleeds to left edge + hex text\n   * - `inline`: Entire trigger is the selected color with hex text overlaid\n   */\n  variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n  label,\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength = 3,\n  prefix,\n  className,\n  id,\n}: {\n  label: string\n  value: string\n  onChange: (v: string) => void\n  onBlur?: () => void\n  disabled?: boolean\n  maxLength?: number\n  prefix?: string\n  className?: string\n  id: string\n}) {\n  return (\n    <div className={cn('flex flex-col gap-ds-01', className)}>\n      <label htmlFor={id} className=\"text-label-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n        {label}\n      </label>\n      <div className=\"flex items-center\">\n        {prefix && (\n          <span className=\"text-body-sm text-surface-fg-muted\">{prefix}</span>\n        )}\n        <input\n          id={id}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          onBlur={onBlur}\n          maxLength={maxLength}\n          className={cn(\n            'h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-body-sm text-surface-fg transition-colors',\n            'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n            disabled && 'cursor-not-allowed opacity-50',\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  ({\n    value = '#000000',\n    onChange,\n    presets,\n    disabled = false,\n    showPicker = true,\n    defaultFormat = 'hex',\n    align = 'start',\n    variant = 'default',\n    className,\n    id: externalId,\n    ...props\n  }, ref) => {\n    const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n    const [open, setOpen] = React.useState(false)\n    const instanceId = React.useId()\n    const fieldCtx = useFormField()\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves\n    // onto the (labelable) trigger button. The root is a <div>, which can't be a label target.\n    const triggerId = externalId ?? fieldCtx.inputId\n\n    // Internal color state — syncs with prop, allows uncontrolled use\n    const [internalColor, setInternalColor] = React.useState(value)\n    React.useEffect(() => { setInternalColor(value) }, [value])\n\n    // Track color when popover opened (for reset) + undo history\n    const [openColor, setOpenColor] = React.useState(value)\n    const [undoStack, setUndoStack] = React.useState<string[]>([])\n    // Track whether current change is from continuous drag (skip undo push)\n    const isDragging = React.useRef(false)\n\n    const handleOpenChange = (isOpen: boolean) => {\n      if (disabled) return\n      if (isOpen) {\n        setOpenColor(internalColor)\n        setUndoStack([])\n      }\n      setOpen(isOpen)\n    }\n\n    // Discrete change (preset click, field commit) — pushes to undo\n    const handleDiscreteChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      setUndoStack((prev) => {\n        if (prev[prev.length - 1] === internalColor) return prev\n        return [...prev.slice(-19), internalColor]\n      })\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Continuous change (picker drag) — updates color but only pushes undo on drag start\n    const handleChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      if (!isDragging.current) {\n        // First change in a drag sequence — push current color to undo\n        isDragging.current = true\n        setUndoStack((prev) => {\n          if (prev[prev.length - 1] === internalColor) return prev\n          return [...prev.slice(-19), internalColor]\n        })\n      }\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Called when picker drag ends\n    const handlePickerChangeComplete = () => {\n      isDragging.current = false\n    }\n\n    const handleUndo = () => {\n      if (undoStack.length === 0) return\n      const prev = undoStack[undoStack.length - 1]\n      setUndoStack((s) => s.slice(0, -1))\n      setInternalColor(prev)\n      onChange?.(prev)\n    }\n\n    const handleReset = () => {\n      setInternalColor(openColor)\n      onChange?.(openColor)\n      setUndoStack([])\n    }\n\n    // Resolve presets\n    const resolvedPresets = presets === false\n      ? []\n      : presets\n        ? presets.map((p) =>\n            typeof p === 'string' ? { hex: p, label: p } : p\n          )\n        : NAMED_PRESETS\n\n    // Parsed color values — use internal state\n    const rgb = hexToRgb(internalColor)\n    const hsl = hexToHsl(internalColor)\n\n    // RGB field handlers (clamped 0-255)\n    const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n      if (!rgb) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const clamped = Math.max(0, Math.min(255, num))\n      handleDiscreteChange(rgbToHex(\n        channel === 'r' ? clamped : rgb.r,\n        channel === 'g' ? clamped : rgb.g,\n        channel === 'b' ? clamped : rgb.b,\n      ))\n    }\n\n    // HSL field handlers (H: 0-360, S/L: 0-100)\n    const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n      if (!hsl) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const max = channel === 'h' ? 360 : 100\n      const clamped = Math.max(0, Math.min(max, num))\n      handleDiscreteChange(hslToHex(\n        channel === 'h' ? clamped : hsl.h,\n        channel === 's' ? clamped : hsl.s,\n        channel === 'l' ? clamped : hsl.l,\n      ))\n    }\n\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n    return (\n      <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {variant === 'inline' ? (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-body-sm font-medium',\n                  'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                animate={{\n                  backgroundColor: internalColor,\n                  color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n                }}\n                whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n                whileTap={{ scale: 0.97 }}\n                transition={springs.smooth}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {internalColor.toUpperCase()}\n              </motion.button>\n            ) : (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong',\n                  'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n                transition={springs.snappy}\n                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `Color picker: ${internalColor}`}\n              >\n                {/* Gradient background: color → surface */}\n                <motion.span\n                  className=\"absolute inset-0\"\n                  animate={{\n                    background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n                  }}\n                  /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n                  transition={{ duration: 0.3 }}\n                />\n                <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n                  maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                }} />\n                {/* Hex value */}\n                <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-body-sm text-surface-fg\">\n                  {internalColor.toUpperCase()}\n                </span>\n              </motion.button>\n            )}\n          </PopoverTrigger>\n\n          <PopoverContent\n            role=\"dialog\"\n            aria-label=\"Color picker\"\n            align={align}\n            sideOffset={8}\n            className=\"w-[272px] rounded-overlay-lg bg-surface-overlay p-0 shadow-floating\"\n          >\n            <div className=\"flex flex-col\">\n              {/* Interactive picker */}\n              {showPicker && (\n                <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n                  <HexColorPicker\n                    color={internalColor}\n                    onChange={handleChange}\n                    className=\"w-full!\"\n                    style={{ height: 160 }}\n                  />\n                </div>\n              )}\n\n              {/* Format inputs */}\n              <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                {/* Format switcher */}\n                <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n                  {formats.map((f) => (\n                    <button\n                      key={f}\n                      type=\"button\"\n                      onClick={() => setFormat(f)}\n                      className={cn(\n                        'relative min-h-6 rounded-control-inner px-ds-02 py-px text-label-xs font-semibold uppercase tracking-wider transition-colors',\n                        format === f\n                          ? 'text-accent-11'\n                          : 'text-surface-fg-muted hover:text-surface-fg',\n                      )}\n                    >\n                      {format === f && (\n                        <motion.span\n                          layoutId={`color-input-format-pill-${instanceId}`}\n                          className=\"absolute inset-0 rounded-control-inner bg-accent-3\"\n                          transition={springs.snappy}\n                        />\n                      )}\n                      <span className=\"relative z-10\">{f}</span>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Format fields — animated swap */}\n                <AnimatePresence mode=\"wait\">\n                  {format === 'hex' && (\n                    <motion.div\n                      key=\"hex\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput\n                        id={`${instanceId}-hex`}\n                        label=\"Hex\"\n                        value={internalColor.replace('#', '').toUpperCase()}\n                        onChange={(v) => {\n                          const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n                          if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n                        }}\n                        onBlur={() => {\n                          // Revert display to current color if input is incomplete\n                          const display = internalColor.replace('#', '').toUpperCase()\n                          if (display.length !== 6) setInternalColor(internalColor)\n                        }}\n                        disabled={disabled}\n                        maxLength={6}\n                        prefix=\"#\"\n                        className=\"flex-1\"\n                      />\n                    </motion.div>\n                  )}\n\n                  {format === 'rgb' && rgb && (\n                    <motion.div\n                      key=\"rgb\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n\n                  {format === 'hsl' && hsl && (\n                    <motion.div\n                      key=\"hsl\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              {/* Preset swatches */}\n              {resolvedPresets.length > 0 && (\n                <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                  <div className=\"flex flex-wrap gap-ds-02\">\n                    {resolvedPresets.map((preset, i) => {\n                      const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n                      return (\n                        <motion.button\n                          key={preset.hex}\n                          type=\"button\"\n                          disabled={disabled}\n                          onClick={() => handleDiscreteChange(preset.hex)}\n                          initial={{ opacity: 0, scale: 0.8 }}\n                          animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n                          whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n                          whileTap={{ scale: 0.9 }}\n                          transition={{ ...springs.bouncy, delay: i * 0.02 }}\n                          className={cn(\n                            'h-6 w-6 rounded-control-inner border',\n                            isSelected\n                              ? 'border-accent-7 ring-2 ring-accent-9/30'\n                              : 'border-surface-border hover:border-surface-border-strong',\n                            disabled && 'cursor-not-allowed opacity-50',\n                          )}\n                          style={{ backgroundColor: preset.hex }}\n                          title={preset.label}\n                          aria-label={`${preset.label}: ${preset.hex}`}\n                        />\n                      )\n                    })}\n                  </div>\n                </div>\n              )}\n\n              {/* Reset / Undo footer */}\n              {(undoStack.length > 0 || internalColor !== openColor) && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: 'auto' }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n                >\n                  {/* Original color preview */}\n                  <span\n                    className=\"h-4 w-4 shrink-0 rounded-pill border border-surface-border\"\n                    style={{ backgroundColor: openColor }}\n                    title={`Original: ${openColor}`}\n                  />\n                  <span className=\"text-caption text-surface-fg-muted\">\n                    {openColor.toUpperCase()}\n                  </span>\n                  <span className=\"flex-1\" />\n                  {undoStack.length > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={handleUndo}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n                    >\n                      Undo\n                    </button>\n                  )}\n                  {internalColor !== openColor && (\n                    <button\n                      type=\"button\"\n                      onClick={handleReset}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-caption font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n                    >\n                      Reset\n                    </button>\n                  )}\n                </motion.div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}