@a4ui/core 0.37.0 → 0.38.0

package/README.md

@@ -182,20 +182,21 @@ mode switch — a theme recolors underneath either mode.
 
 ## Components
 
-75+ components across nine categories (this is a sample — see the
+75+ components across ten categories (this is a sample — see the
 **[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
 full list):
 
 | Category       | Representative components                                                                                                                                                                                                                                                                                                                         |
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch`                                                                                                                                                                                                       |
-| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`, `SlashMenu`                                                                                                                                                                                                                                                   |
-| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CodeTabs`, `DataView`, `BalanceCard`, `TransactionFeed`, `KpiBlock`, `BlockEditor`, `CalendarHeatmap`                                                                               |
-| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`, `Spaces`, `SideRail`                                                                                                                                                                                                                     |
+| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`, `PillSearch`, `Field`, `InputGroup`, `NativeSelect`, `Questionnaire`                                                                                                                                               |
+| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`, `SlashMenu`, `Menubar`                                                                                                                                                                                                                                        |
+| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Attachment`, `Citation`, `CodeTabs`, `DataView`, `BalanceCard`, `TransactionFeed`, `KpiBlock`, `BlockEditor`, `CalendarHeatmap`                                                                 |
+| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`, `CategoryStrip`, `Spaces`, `SideRail`, `Sidebar`, `NavigationMenu`                                                                                                                                                                                        |
 | Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                                                                              |
-| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail`                                                                                                                                                                                                       |
+| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`, `MasterDetail`, `ScrollArea`, `Item`, `Prose`                                                                                                                                                                        |
 | Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                                                                                             |
-| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                                                                                  |
+| Charts         | `Sparkline`, `BarChart`, `AreaChart`, `PieChart`, `DonutChart`, `RadialBarChart` (native SVG, theme-tinted)                                                                                                                                                                                                                                       |
+| Sections       | `SiteNav`, `Hero`, `FeatureGrid`, `Testimonials`, `Faq`, `CtaBanner`, `ContactSection`, `SiteFooter`, `TeamGrid` (data-driven page blocks: plain props, no JSX required)                                                                                                                                                                          |
 | Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `StreamingText`, `PageTransition`, `ScrollScene`, `StickyReveal`, `flyToCart` |
 
 Domain-specific sets ship as **subpath entries** so the base package stays lean —

package/dist/Collapse-Cr5cDqAl.js

@@ -0,0 +1,375 @@
+import { a as e, g as t } from "./motion-CTIBwMCA.js";
+import { For as n, Show as r, createSignal as i, onCleanup as a, onMount as o, splitProps as s } from "solid-js";
+import { className as c, createComponent as l, delegateEvents as u, effect as d, insert as f, mergeProps as p, setAttribute as m, spread as h, template as g, use as _ } from "solid-js/web";
+import { ChevronDown as v, Star as y } from "lucide-solid";
+import { NumberField as b } from "@kobalte/core/number-field";
+// src/ui/Badge.tsx
+var x = /*#__PURE__*/ g("<span class=\"relative flex h-1.5 w-1.5\"aria-hidden=true><span class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75\"></span><span class=\"relative inline-flex h-1.5 w-1.5 rounded-full bg-current\">"), S = /*#__PURE__*/ g("<span>"), C = {
+	neutral: "bg-muted text-muted-foreground ring-border",
+	success: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/30 light:text-emerald-700",
+	warning: "bg-amber-500/15 text-amber-300 ring-amber-500/30 light:text-amber-700",
+	danger: "bg-rose-500/15 text-rose-300 ring-rose-500/30 light:text-rose-700",
+	info: "bg-sky-500/15 text-sky-300 ring-sky-500/30 light:text-sky-700"
+}, w = "badge inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset whitespace-nowrap";
+function T(e) {
+	let [n, i] = s(e, [
+		"tone",
+		"class",
+		"children",
+		"pulse"
+	]);
+	return (() => {
+		var e = S();
+		return h(e, p({ get class() {
+			return t(w, C[n.tone ?? "neutral"], n.class);
+		} }, i), !1, !0), f(e, l(r, {
+			get when() {
+				return n.pulse;
+			},
+			get children() {
+				return x();
+			}
+		}), null), f(e, () => n.children, null), e;
+	})();
+}
+// src/ui/Ripple.tsx
+var E = /*#__PURE__*/ g("<span>");
+function D(t, n, r = {}) {
+	if (e()) return;
+	let i = t.getBoundingClientRect(), a = n.clientX - i.left, o = n.clientY - i.top, s = 2 * Math.max(Math.hypot(a, o), Math.hypot(i.width - a, o), Math.hypot(a, i.height - o), Math.hypot(i.width - a, i.height - o)), c = document.createElement("span");
+	c.setAttribute("aria-hidden", "true"), Object.assign(c.style, {
+		position: "absolute",
+		left: `${a}px`,
+		top: `${o}px`,
+		width: `${s}px`,
+		height: `${s}px`,
+		borderRadius: "9999px",
+		background: r.color ?? "currentColor",
+		pointerEvents: "none",
+		transform: "translate(-50%,-50%) scale(0)"
+	}), t.appendChild(c);
+	let l = c.animate([{
+		transform: "translate(-50%,-50%) scale(0)",
+		opacity: String(r.opacity ?? .3)
+	}, {
+		transform: "translate(-50%,-50%) scale(1)",
+		opacity: "0"
+	}], {
+		duration: 600,
+		easing: "ease-out"
+	}), u = () => c.remove();
+	l.finished.then(u).catch(u);
+}
+function O(e) {
+	let n, r = (t) => {
+		n && D(n, t, {
+			color: e.color,
+			opacity: e.opacity
+		});
+	};
+	return (() => {
+		var i = E();
+		i.$$pointerdown = r;
+		var a = n;
+		return typeof a == "function" ? _(a, i) : n = i, f(i, () => e.children), d(() => c(i, t("relative inline-block overflow-hidden", e.class))), i;
+	})();
+}
+u(["pointerdown"]);
+// src/ui/Button.tsx
+var k = /*#__PURE__*/ g("<a>"), A = /*#__PURE__*/ g("<button>"), j = {
+	primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+	secondary: "bg-muted text-foreground hover:bg-muted/70",
+	outline: "border border-border bg-transparent text-foreground hover:bg-muted",
+	ghost: "bg-transparent text-foreground hover:bg-muted"
+}, M = "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-[color,background-color,transform] duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50";
+function N(e) {
+	let [n, i] = s(e, [
+		"variant",
+		"class",
+		"type",
+		"children",
+		"ripple",
+		"onPointerDown",
+		"href",
+		"target",
+		"rel"
+	]), a = () => t(M, j[n.variant ?? "primary"], n.ripple && "relative overflow-hidden", n.class), o = (e) => {
+		n.ripple && D(e.currentTarget, e, { opacity: .35 });
+		let t = n.onPointerDown;
+		typeof t == "function" ? t(e) : t && t[0](t[1], e);
+	};
+	return l(r, {
+		get when() {
+			return n.href !== void 0;
+		},
+		get fallback() {
+			return (() => {
+				var e = A();
+				return e.$$pointerdown = o, h(e, p({
+					get type() {
+						return n.type ?? "button";
+					},
+					get class() {
+						return a();
+					}
+				}, i), !1, !0), f(e, () => n.children), e;
+			})();
+		},
+		get children() {
+			var e = k();
+			return e.$$pointerdown = o, h(e, p({
+				get href() {
+					return n.href;
+				},
+				get target() {
+					return n.target;
+				},
+				get rel() {
+					return n.rel;
+				},
+				get class() {
+					return a();
+				}
+			}, i), !1, !0), f(e, () => n.children), e;
+		}
+	});
+}
+u(["pointerdown"]);
+// src/ui/Spotlight.tsx
+var P = /*#__PURE__*/ g("<div>");
+function F(t, n = {}) {
+	if (e()) return () => {};
+	let r = document.createElement("span");
+	r.setAttribute("aria-hidden", "true"), r.className = "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300", t.appendChild(r);
+	let i = n.size ?? 180, a = n.color ?? "hsl(var(--primary))", o = (e, t) => {
+		r.style.background = `radial-gradient(${i}px circle at ${e}px ${t}px, color-mix(in srgb, ${a} 30%, transparent), transparent 70%)`;
+	}, s = (e) => {
+		let n = t.getBoundingClientRect();
+		o(e.clientX - n.left, e.clientY - n.top);
+	}, c = () => {
+		r.style.opacity = "1";
+	}, l = () => {
+		r.style.opacity = "0";
+	};
+	return t.addEventListener("pointermove", s), t.addEventListener("pointerenter", c), t.addEventListener("pointerleave", l), () => {
+		t.removeEventListener("pointermove", s), t.removeEventListener("pointerenter", c), t.removeEventListener("pointerleave", l), r.remove();
+	};
+}
+function I(e) {
+	let n;
+	return o(() => {
+		let t = F(n, {
+			color: e.color,
+			size: e.size
+		});
+		a(t);
+	}), (() => {
+		var r = P(), i = n;
+		return typeof i == "function" ? _(i, r) : n = r, f(r, () => e.children), d(() => c(r, t("relative overflow-hidden", e.class))), r;
+	})();
+}
+// src/ui/TiltCard.tsx
+var L = /*#__PURE__*/ g("<div style=perspective:800px><div style=transform-style:preserve-3d>");
+function R(t, n, r = {}) {
+	if (e()) return () => {};
+	n.style.willChange = "transform";
+	let i = (e) => {
+		let i = t.getBoundingClientRect(), a = (e.clientX - i.left) / i.width - .5, o = (e.clientY - i.top) / i.height - .5, s = r.max ?? 10;
+		n.style.transition = "transform 0.15s ease-out", n.style.transform = `perspective(800px) rotateX(${(o * -2 * s).toFixed(2)}deg) rotateY(${(a * 2 * s).toFixed(2)}deg) scale(1.02)`;
+	}, a = () => {
+		n.style.transition = "transform 0.4s ease", n.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)";
+	};
+	return t.addEventListener("pointermove", i), t.addEventListener("pointerleave", a), () => {
+		t.removeEventListener("pointermove", i), t.removeEventListener("pointerleave", a), n.style.transform = "", n.style.transition = "", n.style.willChange = "";
+	};
+}
+function z(e) {
+	let n, r;
+	return o(() => {
+		let t = R(n, r, { max: e.max });
+		a(t);
+	}), (() => {
+		var i = L(), a = i.firstChild, o = n;
+		typeof o == "function" ? _(o, i) : n = i;
+		var s = r;
+		return typeof s == "function" ? _(s, a) : r = a, f(a, () => e.children), d(() => c(i, t("inline-block", e.class))), i;
+	})();
+}
+// src/ui/Card.tsx
+var B = /*#__PURE__*/ g("<div>"), V = /*#__PURE__*/ g("<h2>");
+function H(e) {
+	let [n, r] = s(e, [
+		"class",
+		"children",
+		"glass",
+		"glow",
+		"tilt",
+		"spotlight"
+	]), i = () => (n.glow ?? n.glass) === !0, c;
+	return o(() => {
+		let e = [n.tilt && c ? R(c, c) : null, n.spotlight && c ? F(c) : null].filter((e) => e !== null);
+		a(() => e.forEach((e) => e()));
+	}), (() => {
+		var e = B(), a = c;
+		return typeof a == "function" ? _(a, e) : c = e, h(e, p({ get class() {
+			return t(n.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", i() && "glow-edge", n.spotlight && "relative overflow-hidden", n.tilt && "will-change-transform", n.class);
+		} }, r), !1, !0), f(e, () => n.children), e;
+	})();
+}
+function U(e) {
+	let [n, r] = s(e, ["class", "children"]);
+	return (() => {
+		var e = B();
+		return h(e, p({ get class() {
+			return t("flex flex-col space-y-1.5 p-6", n.class);
+		} }, r), !1, !0), f(e, () => n.children), e;
+	})();
+}
+function W(e) {
+	let [n, r] = s(e, ["class", "children"]);
+	return (() => {
+		var e = V();
+		return h(e, p({ get class() {
+			return t("text-lg font-semibold leading-none tracking-tight", n.class);
+		} }, r), !1, !0), f(e, () => n.children), e;
+	})();
+}
+function G(e) {
+	let [n, r] = s(e, ["class", "children"]);
+	return (() => {
+		var e = B();
+		return h(e, p({ get class() {
+			return t("p-6 pt-0", n.class);
+		} }, r), !1, !0), f(e, () => n.children), e;
+	})();
+}
+// src/ui/Checkbox.tsx
+var K = /*#__PURE__*/ g("<label><input type=checkbox class=\"h-4 w-4 rounded border-input accent-primary\">");
+function q(e) {
+	return (() => {
+		var n = K(), r = n.firstChild;
+		return r.addEventListener("change", (t) => e.onChange(t.currentTarget.checked)), f(n, () => e.label, null), d(() => c(n, t("inline-flex items-center gap-2 text-sm text-foreground", e.class))), d(() => r.checked = e.checked), n;
+	})();
+}
+// src/ui/NumberInput.tsx
+var J = "grid h-9 w-9 shrink-0 place-items-center border border-input bg-background text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50";
+function Y(e) {
+	return l(b, {
+		get rawValue() {
+			return e.value;
+		},
+		onRawValueChange: (t) => e.onChange(t),
+		get minValue() {
+			return e.min;
+		},
+		get maxValue() {
+			return e.max;
+		},
+		get class() {
+			return t("inline-flex items-stretch", e.class);
+		},
+		get children() {
+			return [
+				l(b.DecrementTrigger, {
+					get class() {
+						return t(J, "rounded-l-md");
+					},
+					"aria-label": "Decrement",
+					children: "−"
+				}),
+				l(b.Input, {
+					get "aria-label"() {
+						return e["aria-label"];
+					},
+					class: "w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field"
+				}),
+				l(b.IncrementTrigger, {
+					get class() {
+						return t(J, "rounded-r-md");
+					},
+					"aria-label": "Increment",
+					children: "+"
+				})
+			];
+		}
+	});
+}
+// src/ui/Rating.tsx
+var X = /*#__PURE__*/ g("<div role=radiogroup>"), Z = /*#__PURE__*/ g("<div role=img>"), Q = /*#__PURE__*/ g("<button type=button role=radio class=\"rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40\">");
+function $(e) {
+	let [a, o] = i(0), s = () => e.max ?? 5, u = () => Array.from({ length: s() }, (e, t) => t + 1), p = () => a() > 0 ? a() : e.value, h = (t) => {
+		e.readonly || e.onChange?.(t);
+	}, g = (e) => t("h-5 w-5 transition-colors", e <= p() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
+	return l(r, {
+		get when() {
+			return !e.readonly;
+		},
+		get fallback() {
+			return (() => {
+				var r = Z();
+				return f(r, l(n, {
+					get each() {
+						return u();
+					},
+					children: (e) => l(y, {
+						get class() {
+							return g(e);
+						},
+						"aria-hidden": "true"
+					})
+				})), d((n) => {
+					var i = t("inline-flex items-center gap-1", e.class), a = `Rating ${e.value} of ${s()}`;
+					return i !== n.e && c(r, n.e = i), a !== n.t && m(r, "aria-label", n.t = a), n;
+				}, {
+					e: void 0,
+					t: void 0
+				}), r;
+			})();
+		},
+		get children() {
+			var r = X();
+			return r.addEventListener("mouseleave", () => o(0)), f(r, l(n, {
+				get each() {
+					return u();
+				},
+				children: (t) => (() => {
+					var n = Q();
+					return n.$$keydown = (t) => {
+						t.key === "ArrowRight" || t.key === "ArrowUp" ? (t.preventDefault(), h(Math.min(e.value + 1, s()))) : (t.key === "ArrowLeft" || t.key === "ArrowDown") && (t.preventDefault(), h(Math.max(e.value - 1, 0)));
+					}, n.$$click = () => h(t), n.addEventListener("blur", () => o(0)), n.addEventListener("focus", () => o(t)), n.addEventListener("mouseenter", () => o(t)), f(n, l(y, {
+						get class() {
+							return g(t);
+						},
+						"aria-hidden": "true"
+					})), d((r) => {
+						var i = e.value === t, a = `Rate ${t} of ${s()}`;
+						return i !== r.e && m(n, "aria-checked", r.e = i), a !== r.t && m(n, "aria-label", r.t = a), r;
+					}, {
+						e: void 0,
+						t: void 0
+					}), n;
+				})()
+			})), d(() => c(r, t("inline-flex items-center gap-1", e.class))), r;
+		}
+	});
+}
+u(["click", "keydown"]);
+// src/ui/Collapse.tsx
+var ee = /*#__PURE__*/ g("<div><button type=button class=\"flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted\"></button><div><div class=overflow-hidden><div class=\"px-3 py-2 text-sm text-muted-foreground\">");
+function te(e) {
+	return (() => {
+		var n = ee(), r = n.firstChild, i = r.nextSibling, a = i.firstChild.firstChild;
+		return r.$$click = () => e.onOpenChange(!e.open), f(r, () => e.title, null), f(r, l(v, { get class() {
+			return t("h-4 w-4 shrink-0 transition-transform duration-200", e.open && "rotate-180");
+		} }), null), f(a, () => e.children), d((a) => {
+			var o = t(e.class), s = e.open, l = t("grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none", e.open ? "grid-rows-[1fr]" : "grid-rows-[0fr]");
+			return o !== a.e && c(n, a.e = o), s !== a.t && m(r, "aria-expanded", a.t = s), l !== a.a && c(i, a.a = l), a;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		}), n;
+	})();
+}
+u(["click"]);
+export { H as a, W as c, I as d, F as f, T as g, D as h, q as i, z as l, O as m, $ as n, G as o, N as p, Y as r, U as s, te as t, R as u };

package/dist/charts/AreaChart.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+import { ChartSeries } from './shared';
+export interface AreaDatum {
+    label: string;
+    /** Per-series values keyed by `ChartSeries.key`. */
+    values: Record<string, number>;
+}
+export interface AreaChartProps {
+    data: AreaDatum[];
+    series: ChartSeries[];
+    /** `overlap` (default) draws each series from the baseline; `stacked` accumulates them. */
+    mode?: 'overlap' | 'stacked';
+    /** Height of the plot area in px. Default 200. */
+    height?: number;
+    /** Hover / keyboard tooltip. Default true. */
+    showTooltip?: boolean;
+    /** Toggleable legend. Default true. */
+    showLegend?: boolean;
+    class?: string;
+}
+/**
+ * Multi-series area chart with gradient fills. Each series is tinted by a
+ * theme token (`color`), overlapping or stacked. The chart is focusable:
+ * Left / Right arrows (Home / End) move between points and show the tooltip.
+ *
+ * @example
+ * ```tsx
+ * <AreaChart
+ *   mode="stacked"
+ *   series={[{ key: 'web', label: 'Web' }, { key: 'app', label: 'App', color: 'accent' }]}
+ *   data={[
+ *     { label: 'Jan', values: { web: 4, app: 2 } },
+ *     { label: 'Feb', values: { web: 6, app: 3 } },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function AreaChart(props: AreaChartProps): JSX.Element;

package/dist/charts/BarChart.d.ts

@@ -1,14 +1,30 @@
 import { JSX } from 'solid-js';
+import { ChartSeries } from './shared';
 export interface BarDatum {
     label: string;
-    value: number;
+    /** Value for `mode="single"` (required there). */
+    value?: number;
+    /** Per-series values keyed by `ChartSeries.key`, for `stacked` / `grouped`. */
+    values?: Record<string, number>;
 }
+export type BarChartMode = 'single' | 'stacked' | 'grouped';
 export interface BarChartProps {
     data: BarDatum[];
     /** Height of the plot area in px. Default 160. */
     height?: number;
     /** Fill color token. Default 'primary'. */
     tone?: 'primary' | 'accent';
+    /**
+     * `single` (default) draws one bar per datum from `value`; `stacked` and
+     * `grouped` draw one segment / bar per entry of `series` from `values`.
+     */
+    mode?: BarChartMode;
+    /** Series definitions, required for `stacked` / `grouped`. */
+    series?: ChartSeries[];
+    /** Hover / keyboard tooltip in the multi-series modes. Default true. */
+    showTooltip?: boolean;
+    /** Show a toggleable legend in the multi-series modes. Default true. */
+    showLegend?: boolean;
     class?: string;
 }
 /**

package/dist/charts/PieChart.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+import { ChartColor } from './shared';
+export interface PieDatum {
+    label: string;
+    value: number;
+    /** Token name; defaults to cycling `chart-1..5`. */
+    color?: ChartColor;
+}
+export interface PieChartProps {
+    data: PieDatum[];
+    /** SVG width/height in px. Default 200. */
+    size?: number;
+    /** Hover / keyboard tooltip. Default true. */
+    showTooltip?: boolean;
+    /** Toggleable legend. Default true. */
+    showLegend?: boolean;
+    class?: string;
+}
+/**
+ * Pie chart whose wedge angles are proportional to the values. Left / Right
+ * arrows move between wedges and show the tooltip; legend entries toggle
+ * wedges (the rest re-share the circle).
+ *
+ * @example
+ * ```tsx
+ * <PieChart data={[{ label: 'Direct', value: 42 }, { label: 'Social', value: 28, color: 'accent' }]} />
+ * ```
+ */
+export declare function PieChart(props: PieChartProps): JSX.Element;

package/dist/charts/RadialBarChart.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+import { ChartColor } from './shared';
+export interface RadialBarDatum {
+    label: string;
+    value: number;
+    /** Token name; defaults to cycling `chart-1..5`. */
+    color?: ChartColor;
+}
+export interface RadialBarChartProps {
+    data: RadialBarDatum[];
+    /** Value that fills a whole ring. Default: the largest value. */
+    max?: number;
+    /** SVG width/height in px. Default 220. */
+    size?: number;
+    /** Ring thickness in px. Default 14. */
+    thickness?: number;
+    /** Hover / keyboard tooltip. Default true. */
+    showTooltip?: boolean;
+    /** Toggleable legend. Default true. */
+    showLegend?: boolean;
+    class?: string;
+}
+/**
+ * Radial bar chart: one concentric ring per datum, each filled to `value /
+ * max`. Arrow keys move between rings and show the tooltip; legend entries
+ * toggle rings.
+ *
+ * @example
+ * ```tsx
+ * <RadialBarChart max={100} data={[{ label: 'Move', value: 72 }, { label: 'Stand', value: 40, color: 'accent' }]} />
+ * ```
+ */
+export declare function RadialBarChart(props: RadialBarChartProps): JSX.Element;

package/dist/charts/index.d.ts

@@ -7,3 +7,8 @@ export { RadarChart, type RadarSeries, type RadarChartProps } from './RadarChart
 export { BarList, type BarListDatum, type BarListProps } from './BarList';
 export { StatusTracker, type StatusSegment, type StatusTrackerProps } from './StatusTracker';
 export { CategoryBar, type CategoryBarTone, type CategoryBarProps } from './CategoryBar';
+export { AreaChart, type AreaDatum, type AreaChartProps } from './AreaChart';
+export { PieChart, type PieDatum, type PieChartProps } from './PieChart';
+export { RadialBarChart, type RadialBarDatum, type RadialBarChartProps } from './RadialBarChart';
+export { ChartTooltip, ChartLegend, type ChartSeries, type ChartColor, type ChartTooltipProps, type ChartTooltipRow, type ChartLegendProps, type ChartLegendItem, } from './shared';
+export type { BarChartMode } from './BarChart';

package/dist/charts/shared.d.ts

@@ -0,0 +1,111 @@
+import { JSX } from 'solid-js';
+/** Token names a series can be tinted with. `chart-1..5` cycle the theme's data hues. */
+export type ChartColor = 'primary' | 'accent' | 'destructive' | 'muted' | 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
+/** Describes one series of a multi-series chart. */
+export interface ChartSeries {
+    /** Key of the series' value inside each datum's `values` record. */
+    key: string;
+    /** Human label shown in the legend and tooltip. */
+    label: string;
+    /** Token name; defaults to cycling `chart-1..5` by index. */
+    color?: ChartColor;
+}
+/** The CSS custom property (e.g. `--primary`) for a series color or index. */
+export declare function colorVar(color: ChartColor | undefined, index: number): string;
+/** `hsl(var(--token) / alpha)` for a series color. */
+export declare function seriesColor(color: ChartColor | undefined, index: number, alpha?: number): string;
+/** Value lookup that fails loudly when a datum lacks a declared series key. */
+export declare function seriesValue(values: Record<string, number> | undefined, key: string, label: string): number;
+export interface ChartTooltipRow {
+    label: string;
+    value: string | number;
+    color: string;
+}
+export interface ChartTooltipProps {
+    title?: string;
+    rows: ChartTooltipRow[];
+    /** CSS `left` inside the (relative) chart wrapper, e.g. `42%`. */
+    left: string;
+    /** CSS `top` inside the wrapper. Default `0`. */
+    top?: string;
+    /** Horizontal anchor 0..1 used to keep the tooltip inside the chart. Default 0.5. */
+    anchor?: number;
+}
+/**
+ * Floating tooltip listing every series value at the active x. Position it
+ * inside a `relative` wrapper; it ignores pointer events and is announced
+ * politely to assistive tech.
+ *
+ * @example
+ * ```tsx
+ * <ChartTooltip title="Mon" left="20%" rows={[{ label: 'Sales', value: 12, color: 'hsl(var(--primary))' }]} />
+ * ```
+ */
+export declare function ChartTooltip(props: ChartTooltipProps): JSX.Element;
+export interface ChartLegendItem {
+    key: string;
+    label: string;
+    color: string;
+}
+export interface ChartLegendProps {
+    items: ChartLegendItem[];
+    /** Keys currently hidden. */
+    hidden?: ReadonlySet<string>;
+    /** When set, items become toggle buttons. */
+    onToggle?: (key: string) => void;
+    class?: string;
+}
+/**
+ * Legend with colored swatches. With `onToggle` each entry is a toggle button
+ * (`aria-pressed`) that hides / shows its series.
+ *
+ * @example
+ * ```tsx
+ * <ChartLegend items={[{ key: 'a', label: 'Sales', color: 'hsl(var(--primary))' }]} onToggle={toggle} />
+ * ```
+ */
+export declare function ChartLegend(props: ChartLegendProps): JSX.Element;
+/** Signal-backed set of hidden series keys with a toggle. */
+export declare function createHiddenSet(): {
+    hidden: import('solid-js').Accessor<ReadonlySet<string>>;
+    toggle: (key: string) => Set<string>;
+};
+/**
+ * Pointer + keyboard navigation over `count` categories. Arrow keys / Home /
+ * End move the active index, Escape clears it; keyboard focus (focus-visible)
+ * activates the first one.
+ */
+export declare function createChartNav(count: () => number): {
+    active: import('solid-js').Accessor<number | null>;
+    setActive: import('solid-js').Setter<number | null>;
+    onKeyDown: (e: KeyboardEvent) => void;
+    onFocus: (e: FocusEvent) => void;
+    onBlur: () => null;
+};
+/** Common focusable-wrapper classes (visible focus ring). */
+export declare const FOCUS_CLASS = "rounded outline-none focus-visible:ring-2 focus-visible:ring-ring";
+export interface SliceAngle {
+    index: number;
+    value: number;
+    /** Start angle in degrees, clockwise from 12 o'clock. */
+    start: number;
+    /** Sweep in degrees; always `value / total * 360`. */
+    angle: number;
+}
+/** Proportional angles (degrees) for a list of values; shared by Donut, Pie and RadialBar. */
+export declare function sliceAngles(values: number[]): SliceAngle[];
+/** Point on a circle, angle in degrees clockwise from 12 o'clock. */
+export declare function polar(cx: number, cy: number, r: number, deg: number): {
+    x: number;
+    y: number;
+};
+/** SVG path for a pie wedge (`inner` = 0) or ring segment; handles full circles. */
+export declare function arcPath(cx: number, cy: number, outer: number, inner: number, start: number, angle: number): string;
+/**
+ * X-axis label row aligned with points placed edge to edge (`i / (n - 1)` of the
+ * width). Each label sits on its point; the first and last are anchored to the
+ * edges so they are not clipped.
+ */
+export declare function ChartXLabels(props: {
+    labels: string[];
+}): JSX.Element;