haze-ui 1.28.0 → 1.29.0

package/README.md

@@ -129,30 +129,30 @@ checklist:
 
 ### Dependencies
 
-haze-ui ships two runtime dependencies — `react-use-control`, the engine
-behind `ControlOrValue<T>`, and `react-f0rm` (^1.3), the form engine
-behind `FormItem`/`FormList` (the same author's headless form store).
-Five integrations remain optional peers, installed only when you use the
-components that need them:
-
-```sh
-npm i @tanstack/react-table               # DataTable (peer range ^9.2.4)
-npm i recharts                            # Chart (peer range ^3.10.1)
-npm i @dnd-kit/core @dnd-kit/sortable \
-      @dnd-kit/utilities                  # TagInput/TagGroup sortable
-                                           # (^6.3.1 / ^10.0.0 / ^3.2.2)
-```
-
-Everything else — `Button`, `Input`, `Dialog`, `Select`, … — runs with
-nothing beyond `react` and the two runtime dependencies. The dist is ESM
-with `preserveModules` and side-effect-free JS, so bundlers (Next.js,
-Vite, webpack, Turbopack, Rollup) tree-shake the unused re-export chains
-and never resolve peers you haven't installed: `import { Button } from
-'haze-ui'` works without `@tanstack/react-table`. Only bundler-less
-consumers (bare Node ESM importing the barrel, which links the module
-graph eagerly) must install the optional peers; the
-`haze-ui/components/DataTable` and `haze-ui/components/Chart` subpaths
-bypass the barrel entirely.
+haze-ui declares only the host environment as peers: `react` and
+`react-dom` (^19). Everything else is a regular dependency — one
+`npm i haze-ui` and every component works:
+
+- `react-use-control` — the engine behind `ControlOrValue<T>`
+- `react-f0rm` (^1.3) — the form engine behind `FormItem`/`FormList`
+  (the same author's headless form store)
+- `@tanstack/react-table` — DataTable
+- `recharts` — Chart
+- `@dnd-kit/core` / `@dnd-kit/sortable` / `@dnd-kit/utilities` — the
+  sortable TagInput/TagGroup variants
+- `qrcode` — QRCode
+
+Swapping any of these engines for another library is invisible to your
+code (the one deliberate exception: DataTable's column API exposes
+TanStack's `ColumnDef` types). The dist is ESM with `preserveModules`
+and side-effect-free JS, and engines are imported only by the components
+that need them, so bundlers (Next.js, Vite, webpack, Turbopack, Rollup)
+tree-shake the unused re-export chains: `import { Button } from
+'haze-ui'` never pulls `@tanstack/react-table` into the bundle. Engines
+install as regular dependencies, so even bundler-less consumers (bare
+Node ESM importing the barrel, which links the module graph eagerly)
+work with zero manual installs; the `haze-ui/components/DataTable` and
+`haze-ui/components/Chart` subpaths bypass the barrel entirely.
 
 ### Browser support
 
@@ -393,16 +393,18 @@ user-controllable, SSR/jsdom-safe when the underlying API is missing.
 | `useTitle(title)` | — | Document title while mounted |
 | `useToast()` | toast API | Requires a `ToastContainer` ancestor |
 
-## Sortable tags and chips (optional dnd-kit peers)
+## Sortable tags and chips
 
-`TagInput` and `TagGroup` accept `sortable?: boolean` — opt-in drag
-reordering powered by `@dnd-kit/core` / `@dnd-kit/sortable` /
-`@dnd-kit/utilities` (optional peers, same tree-shaking contract as
-recharts and TanStack Table). `TagInput` writes the new array through
-`onChange`; `TagGroup` reports `onReorder(nextOrder)` (the new
-arrangement of original child indexes) and leaves re-rendering to the
-parent. Sorting is keyboard-complete: focus a tag, `Space` to lift,
-arrows to move, `Space` to drop, `Escape` to cancel.
+Drag reordering is an opt-in variant: `SortableTagInput` /
+`SortableTagInputCore` and `SortableTagGroup` statically import
+`@dnd-kit/core` / `@dnd-kit/sortable` / `@dnd-kit/utilities` (regular
+dependencies — the plain `TagInput`/`TagGroup` never touch them, so they
+stay out of every bundle that doesn't import a Sortable variant).
+`SortableTagInput` writes the new array through `onChange`;
+`SortableTagGroup` reports `onReorder(nextOrder)` (the new arrangement of
+original child indexes) and leaves re-rendering to the parent. Sorting is
+keyboard-complete: focus a tag, `Space` to lift, arrows to move, `Space`
+to drop, `Escape` to cancel.
 
 ## Imperative overlay handles
 
@@ -544,6 +546,52 @@ own css manifest. The same items are also installable straight from this
 GitHub repository — see
 [Install via shadcn CLI (GitHub registry)](#install-via-shadcn-cli-github-registry).
 
+## AI / MCP
+
+**`haze-ui-mcp`** — an [MCP server](https://modelcontextprotocol.io) that puts the
+whole component reference in your AI coding agent's tool belt. It serves the
+same docs the site renders (props tables with types/defaults/descriptions,
+import statements, CSS paths, peer deps, the full token registry), so the
+agent never guesses a prop name or a stylesheet path again:
+
+| Tool | What it returns |
+| --- | --- |
+| `haze_list_components` | Every component with its css family |
+| `haze_get_component` | One component's full reference — props tables, import statement, CSS imports. Name matching is case-insensitive and accepts kebab-case (`data-table`) or PascalCase (`DataTable`) |
+| `haze_get_tokens` | The `--haze-*` token registry with light and dark values, optionally filtered by category (`color`, `typography`, `spacing`, `radius`, `shadow`) |
+| `haze_search_docs` | Top-10 ranked matches across component names, css families, prop names and descriptions |
+
+**Claude Code**:
+
+```sh
+claude mcp add haze-ui -- npx haze-ui-mcp
+```
+
+**Cursor** (`.cursor/mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "haze-ui": {
+      "command": "npx",
+      "args": ["haze-ui-mcp"]
+    }
+  }
+}
+```
+
+The server speaks stdio JSON-RPC and ships its own docs snapshot
+(`dist/mcp-docs.json`, regenerated on every build by
+`scripts/generate-mcp-docs.mjs`) — no project access, no indexing on startup.
+In this repository you can run it directly against the local snapshot:
+
+```sh
+node scripts/generate-mcp-docs.mjs
+node mcp/index.mjs
+```
+
+Point it at a custom snapshot with `HAZE_UI_MCP_DOCS=/path/to/mcp-docs.json`.
+
 ## AI runtime integration (Vercel AI SDK `useChat`)
 
 haze-ui ships the agent chat surface as **presentational** components —

package/dist/components/Chart/chart-elements.js

@@ -1,32 +1,32 @@
 "use client";
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Area as r, AreaChart as i, Bar as a, BarChart as o, CartesianGrid as s, Legend as c, Line as l, LineChart as u, Pie as d, PieChart as f, ResponsiveContainer as p, Tooltip as m, XAxis as h, YAxis as g } from "recharts";
+import { Area as r, AreaChart as i, Bar as a, BarChart as o, CartesianGrid as s, Legend as c, Line as l, LineChart as u, Pie as d, PieChart as f, PolarAngleAxis as p, PolarGrid as m, PolarRadiusAxis as h, Radar as g, RadarChart as _, ResponsiveContainer as v, Scatter as y, ScatterChart as b, Tooltip as x, XAxis as S, YAxis as C } from "recharts";
 //#region src/lib/components/Chart/chart-elements.tsx
-var _ = [
+var w = [
 	"var(--haze-color-primary)",
 	"var(--haze-color-info)",
 	"var(--haze-color-success)",
 	"var(--haze-color-warning)",
 	"var(--haze-color-danger)"
-], v = "var(--haze-color-border)", y = {
+], T = "var(--haze-color-border)", E = {
 	fontSize: "var(--haze-text-sm)",
 	fill: "var(--haze-color-text-secondary)"
-}, b = {
+}, D = {
 	fontSize: "var(--haze-text-sm)",
 	color: "var(--haze-color-text)"
-}, x = { fontSize: "var(--haze-text-sm)" };
-function S(e) {
-	return _[e % _.length];
+}, O = { fontSize: "var(--haze-text-sm)" };
+function k(e) {
+	return w[e % w.length];
 }
-function C(e) {
+function A(e) {
 	return e.map((e) => ({
 		key: e.key,
 		label: e.label ?? e.key,
 		color: e.color
 	}));
 }
-function w(e, n, i = 0) {
-	let { key: o, label: s } = n, c = n.color ?? S(i);
+function j(e, n, i = 0) {
+	let { key: o, label: s } = n, c = n.color ?? k(i);
 	switch (e) {
 		case "area": return /* @__PURE__ */ t(r, {
 			dataKey: o,
@@ -44,9 +44,21 @@ function w(e, n, i = 0) {
 			name: s,
 			stroke: c
 		}, o);
+		case "radar": return /* @__PURE__ */ t(g, {
+			dataKey: o,
+			name: s,
+			stroke: c,
+			fill: c,
+			fillOpacity: .3
+		}, o);
+		case "scatter": return /* @__PURE__ */ t(y, {
+			dataKey: o,
+			name: s,
+			fill: c
+		}, o);
 	}
 }
-function T(e, t, n) {
+function M(e, t, n) {
 	if (t <= 1) return {
 		innerRadius: n,
 		outerRadius: "80%"
@@ -57,10 +69,10 @@ function T(e, t, n) {
 		outerRadius: `${i + (e + 1) * a}%`
 	};
 }
-function E(e) {
-	let { entry: n, data: r, nameKey: i, ringIndex: a, ringCount: o, innerRadius: s } = e, c = T(a, o, s), l = r.map((e, t) => ({
+function N(e) {
+	let { entry: n, data: r, nameKey: i, ringIndex: a, ringCount: o, innerRadius: s } = e, c = M(a, o, s), l = r.map((e, t) => ({
 		...e,
-		fill: n.color ?? S(t)
+		fill: n.color ?? k(t)
 	}));
 	return /* @__PURE__ */ t(d, {
 		data: l,
@@ -71,7 +83,7 @@ function E(e) {
 		stroke: "var(--haze-color-bg)"
 	}, n.key);
 }
-function D(e, n, r, a = "horizontal") {
+function P(e, n, r, a = "horizontal") {
 	switch (e) {
 		case "area": return /* @__PURE__ */ t(i, {
 			data: n,
@@ -92,9 +104,17 @@ function D(e, n, r, a = "horizontal") {
 			data: n,
 			children: r
 		});
+		case "radar": return /* @__PURE__ */ t(_, {
+			data: n,
+			children: r
+		});
+		case "scatter": return /* @__PURE__ */ t(b, {
+			data: n,
+			children: r
+		});
 	}
 }
-function O(e) {
+function F(e) {
 	return (t) => {
 		let { payload: n, label: r } = t;
 		return e({
@@ -108,57 +128,98 @@ function O(e) {
 		});
 	};
 }
-function k(r) {
-	let { type: i, data: a, xKey: o, showGrid: l, showTooltip: u, showLegend: d, series: f, layout: _ = "horizontal", innerRadius: S = 0, renderTooltip: C } = r, T = C ? O(C) : void 0;
-	return i === "pie" ? /* @__PURE__ */ t(p, {
+function I(r) {
+	let { type: i, data: a, xKey: o, showGrid: l, showTooltip: u, showLegend: d, series: f, layout: g = "horizontal", innerRadius: _ = 0, renderTooltip: y } = r, b = y ? F(y) : void 0;
+	return i === "pie" ? /* @__PURE__ */ t(v, {
 		width: "100%",
 		height: "100%",
-		children: D(i, a, /* @__PURE__ */ n(e, { children: [
-			u && /* @__PURE__ */ t(m, {
-				contentStyle: b,
-				content: T
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
+			u && /* @__PURE__ */ t(x, {
+				contentStyle: D,
+				content: b
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: x }),
-			f.map((e, t) => E({
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => N({
 				entry: e,
 				data: a,
 				nameKey: o,
 				ringIndex: t,
 				ringCount: f.length,
-				innerRadius: S
+				innerRadius: _
 			}))
 		] }))
-	}) : /* @__PURE__ */ t(p, {
+	}) : i === "radar" ? /* @__PURE__ */ t(v, {
+		width: "100%",
+		height: "100%",
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
+			l && /* @__PURE__ */ t(m, { stroke: "var(--haze-color-border)" }),
+			/* @__PURE__ */ t(p, {
+				dataKey: o,
+				tick: E
+			}),
+			/* @__PURE__ */ t(h, { tick: E }),
+			u && /* @__PURE__ */ t(x, {
+				contentStyle: D,
+				content: b
+			}),
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => j("radar", e, t))
+		] }))
+	}) : i === "scatter" ? /* @__PURE__ */ t(v, {
+		width: "100%",
+		height: "100%",
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
+			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
+			/* @__PURE__ */ t(S, {
+				type: "number",
+				dataKey: o,
+				stroke: T,
+				tick: E
+			}),
+			/* @__PURE__ */ t(C, {
+				type: "number",
+				stroke: T,
+				tick: E
+			}),
+			u && /* @__PURE__ */ t(x, {
+				cursor: { stroke: "var(--haze-color-border)" },
+				contentStyle: D,
+				content: b
+			}),
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => j("scatter", e, t))
+		] }))
+	}) : /* @__PURE__ */ t(v, {
 		width: "100%",
 		height: "100%",
-		children: D(i, a, /* @__PURE__ */ n(e, { children: [
+		children: P(i, a, /* @__PURE__ */ n(e, { children: [
 			l && /* @__PURE__ */ t(s, { stroke: "var(--haze-color-border)" }),
-			_ === "vertical" ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(h, {
+			g === "vertical" ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(S, {
 				type: "number",
-				stroke: v,
-				tick: y
-			}), /* @__PURE__ */ t(g, {
+				stroke: T,
+				tick: E
+			}), /* @__PURE__ */ t(C, {
 				type: "category",
 				dataKey: o,
-				stroke: v,
-				tick: y
-			})] }) : /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(h, {
+				stroke: T,
+				tick: E
+			})] }) : /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t(S, {
 				dataKey: o,
-				stroke: v,
-				tick: y
-			}), /* @__PURE__ */ t(g, {
-				stroke: v,
-				tick: y
+				stroke: T,
+				tick: E
+			}), /* @__PURE__ */ t(C, {
+				stroke: T,
+				tick: E
 			})] }),
-			u && /* @__PURE__ */ t(m, {
+			u && /* @__PURE__ */ t(x, {
 				cursor: { stroke: "var(--haze-color-border)" },
-				contentStyle: b,
-				content: T
+				contentStyle: D,
+				content: b
 			}),
-			d && /* @__PURE__ */ t(c, { wrapperStyle: x }),
-			f.map((e, t) => w(i, e, t))
-		] }), _)
+			d && /* @__PURE__ */ t(c, { wrapperStyle: O }),
+			f.map((e, t) => j(i, e, t))
+		] }), g)
 	});
 }
 //#endregion
-export { v as AXIS_STROKE, y as AXIS_TICK, x as LEGEND_STYLE, b as TOOLTIP_STYLE, O as buildTooltipContent, D as chartElement, k as chartTree, E as pieElement, T as pieRingRadii, C as resolveChartSeries, w as seriesElement };
+export { T as AXIS_STROKE, E as AXIS_TICK, O as LEGEND_STYLE, D as TOOLTIP_STYLE, F as buildTooltipContent, P as chartElement, I as chartTree, N as pieElement, M as pieRingRadii, A as resolveChartSeries, j as seriesElement };

package/dist/components/CountUp/CountUp.js

@@ -0,0 +1,45 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { usePrefersReducedMotion as t } from "../../hooks/usePrefersReducedMotion.js";
+/* empty css                  */
+import { jsx as n } from "react/jsx-runtime";
+import { useEffect as r, useRef as i, useState as a } from "react";
+//#region src/lib/components/CountUp/CountUp.tsx
+var o = "haze-CountUp__base", s = /* @__PURE__ */ new Map();
+function c(e, t) {
+	let n = s.get(t);
+	return n || (n = new Intl.NumberFormat(void 0, {
+		minimumFractionDigits: t,
+		maximumFractionDigits: t
+	}), s.set(t, n)), n.format(e);
+}
+function l({ to: s, from: l = 0, duration: u = 1200, decimals: d = 0, format: f, autostart: p = !0, className: m, ...h }) {
+	let g = t(), [_, v] = a(l), y = i(l), b = i(0), x = i(!0);
+	return r(() => {
+		let e = x.current;
+		if (x.current = !1, e && !p) return;
+		let t = y.current;
+		if (g || u <= 0 || t === s) {
+			y.current = s, v(s);
+			return;
+		}
+		let n = performance.now(), r = (e) => {
+			let i = Math.min(Math.max((e - n) / u, 0), 1), a = 1 - (1 - i) ** 3, o = t + (s - t) * a;
+			y.current = o, v(o), i < 1 && (b.current = window.requestAnimationFrame(r));
+		};
+		return b.current = window.requestAnimationFrame(r), () => window.cancelAnimationFrame(b.current);
+	}, [
+		s,
+		l,
+		u,
+		g,
+		p
+	]), /* @__PURE__ */ n("span", {
+		...h,
+		className: e([o, m]),
+		children: f ? f(_) : c(_, d)
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/CountUp/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./CountUp.js";
+export { e as CountUp };

package/dist/components/Ellipsis/Ellipsis.js

@@ -0,0 +1,53 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import n from "../Tooltip/Tooltip.js";
+/* empty css                   */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useEffect as a, useRef as o, useState as s } from "react";
+import { useControl as c } from "react-use-control";
+//#region src/lib/components/Ellipsis/Ellipsis.tsx
+var l = "haze-Ellipsis__root", u = "haze-Ellipsis__clampBase", d = "haze-Ellipsis__expandBtn";
+function f({ children: f, lines: p = 1, tooltip: m = !1, expandable: h = !1, expanded: g, onExpandChange: _, className: v, ...y }) {
+	let b = t("ellipsis"), [x, S] = s(!1), [C, w] = c(g, !1), T = o(null);
+	a(() => {
+		if (C) return;
+		let e = T.current;
+		e && S(e.scrollHeight > e.clientHeight);
+	}, [
+		f,
+		p,
+		C
+	]);
+	let E = () => {
+		let e = !C;
+		w(e), _?.(e);
+	}, D = x && !C, O = /* @__PURE__ */ r("span", {
+		ref: T,
+		style: D ? {
+			display: "-webkit-box",
+			WebkitBoxOrient: "vertical",
+			WebkitLineClamp: p,
+			overflow: "hidden"
+		} : void 0,
+		className: e([u]),
+		children: f
+	});
+	return /* @__PURE__ */ i("span", {
+		...y,
+		className: e([l, v]),
+		children: [m && D ? /* @__PURE__ */ r(n, {
+			content: f,
+			children: O
+		}) : O, h && x && /* @__PURE__ */ r("button", {
+			type: "button",
+			"aria-expanded": C,
+			onClick: E,
+			className: e([d]),
+			children: C ? b.collapse : b.expand
+		})]
+	});
+}
+//#endregion
+export { f as default };

package/dist/components/Ellipsis/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Ellipsis.js";
+export { e as Ellipsis };