@glyphui/ui 0.2.0 → 0.4.0

package/dist/chart.js

@@ -0,0 +1,466 @@
+"use client";
+import { a as themedBorder, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/chart.styles.ts
+const chartStyles = tv({ slots: {
+	root: "m-0 grid min-w-0 gap-3",
+	caption: "grid gap-0.5",
+	title: "text-small font-medium text-foreground",
+	description: "text-caption text-muted-foreground",
+	plot: "min-w-0 [&_.recharts-surface]:overflow-visible [&_.recharts-text]:fill-muted-foreground",
+	legend: "flex flex-wrap items-center gap-x-4 gap-y-1 text-caption text-muted-foreground",
+	legendItem: "inline-flex items-center gap-1.5",
+	swatch: "size-2.5 shrink-0 rounded-[2px]",
+	tooltip: ["grid min-w-36 gap-1.5 rounded-md border-border bg-raised px-3 py-2 text-caption text-foreground shadow-lg", themedBorder],
+	tooltipLabel: "font-medium text-foreground",
+	tooltipRow: "flex items-center gap-2",
+	tooltipName: "flex-1 text-muted-foreground",
+	tooltipValue: "font-mono font-medium tabular-nums text-foreground",
+	center: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+	srOnly: "sr-only"
+} });
+//#endregion
+//#region src/patterns/chart/chart-parts.tsx
+/** Series without a color use the theme's chart palette, in order. */
+const palette = [
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5"
+];
+function resolveColor(color, index) {
+	const value = color ?? palette[index % palette.length];
+	return /^[a-z][a-z\d-]*$/.test(value) ? `var(--color-${value})` : value;
+}
+const defaultFormatter = (value) => typeof value === "number" ? value.toLocaleString() : String(value);
+function useChartParts() {
+	const [, slots] = useComponentConfig("Chart", {});
+	return {
+		s: chartStyles(),
+		slots
+	};
+}
+function ChartLegend({ items }) {
+	const { s, slots } = useChartParts();
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "chart-legend",
+		className: s.legend({ class: slots.legend }),
+		"aria-hidden": "true",
+		children: items.map((item, i) => /* @__PURE__ */ jsxs("li", {
+			className: s.legendItem({ class: slots.legendItem }),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: s.swatch({ class: slots.swatch }),
+				style: { background: item.color }
+			}), item.label]
+		}, i))
+	});
+}
+function ChartTooltipCard({ active, payload, label, formatter, labelFormatter }) {
+	const { s, slots } = useChartParts();
+	if (!active || !payload?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-tooltip",
+		className: s.tooltip({ class: slots.tooltip }),
+		children: [label !== void 0 && label !== "" && /* @__PURE__ */ jsx("p", {
+			className: s.tooltipLabel({ class: slots.tooltipLabel }),
+			children: labelFormatter ? labelFormatter(label) : label
+		}), payload.map((item, i) => /* @__PURE__ */ jsxs("div", {
+			className: s.tooltipRow({ class: slots.tooltipRow }),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: s.swatch({ class: slots.swatch }),
+					style: { background: item.color ?? item.payload?.fill }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: s.tooltipName({ class: slots.tooltipName }),
+					children: String(item.name ?? "")
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: s.tooltipValue({ class: slots.tooltipValue }),
+					children: formatter(Number(item.value))
+				})
+			]
+		}, i))]
+	});
+}
+/**
+* Wraps every chart in a `<figure>` with a caption and a visually hidden data table,
+* so screen-reader users get the numbers the chart shows.
+*/
+function ChartFrame({ title, description, hideTitle, className, legend, table, children }) {
+	const { s, slots } = useChartParts();
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "chart",
+		"aria-labelledby": titleId,
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			/* @__PURE__ */ jsxs("figcaption", {
+				className: hideTitle ? s.srOnly() : s.caption({ class: slots.caption }),
+				children: [/* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: s.title({ class: slots.title }),
+					children: title
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: s.description({ class: slots.description }),
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: s.plot({ class: slots.plot }),
+				"aria-hidden": "true",
+				children
+			}),
+			legend && legend.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { items: legend }),
+			/* @__PURE__ */ jsxs("table", {
+				className: s.srOnly(),
+				children: [
+					/* @__PURE__ */ jsx("caption", { children: title }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: column
+					}, column)) }) }),
+					/* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, j) => j === 0 ? /* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: cell
+					}, j) : /* @__PURE__ */ jsx("td", { children: cell }, j)) }, i)) })
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/chart/chart.tsx
+const axisTick = {
+	fill: "var(--color-muted-foreground)",
+	fontSize: 12
+};
+function useCartesian(props) {
+	const { data, index, series, title, valueFormatter = defaultFormatter } = props;
+	const resolved = series.map((item, i) => ({
+		...item,
+		label: item.label ?? item.key,
+		stroke: resolveColor(item.color, i)
+	}));
+	return {
+		resolved,
+		table: {
+			columns: [String(index), ...resolved.map((item) => item.label)],
+			rows: data.map((row) => [String(row[index]), ...resolved.map((item) => valueFormatter(Number(row[item.key])))])
+		},
+		legend: props.showLegend ?? series.length > 1 ? resolved.map((item) => ({
+			label: item.label,
+			color: item.stroke
+		})) : void 0,
+		valueFormatter,
+		title
+	};
+}
+function frameProps(props) {
+	return {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className
+	};
+}
+function Axes({ index, showGrid = true, showYAxis = true, valueFormatter }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		showGrid && /* @__PURE__ */ jsx(R.CartesianGrid, {
+			vertical: false,
+			stroke: "var(--color-border)",
+			strokeDasharray: "3 3"
+		}),
+		/* @__PURE__ */ jsx(R.XAxis, {
+			dataKey: index,
+			tick: axisTick,
+			tickLine: false,
+			axisLine: false,
+			tickMargin: 8,
+			minTickGap: 16
+		}),
+		showYAxis && /* @__PURE__ */ jsx(R.YAxis, {
+			tick: axisTick,
+			tickLine: false,
+			axisLine: false,
+			width: 48,
+			tickFormatter: valueFormatter
+		})
+	] });
+}
+function tooltip(valueFormatter, cursor) {
+	return /* @__PURE__ */ jsx(R.Tooltip, {
+		cursor,
+		content: (p) => /* @__PURE__ */ jsx(ChartTooltipCard, {
+			active: p.active,
+			payload: p.payload,
+			label: p.label,
+			formatter: valueFormatter
+		})
+	});
+}
+/** Trends over time, one line per series. */
+function LineChart(props) {
+	const { resolved, table, legend, valueFormatter } = useCartesian(props);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.LineChart, {
+				accessibilityLayer: false,
+				data: props.data,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(Axes, {
+						index: props.index,
+						showGrid: props.showGrid,
+						showYAxis: props.showYAxis,
+						valueFormatter
+					}),
+					tooltip(valueFormatter, { stroke: "var(--color-border-strong)" }),
+					resolved.map((item) => /* @__PURE__ */ jsx(R.Line, {
+						dataKey: item.key,
+						name: item.label,
+						type: props.curve ?? "monotone",
+						stroke: item.stroke,
+						strokeWidth: 2,
+						dot: false,
+						activeDot: {
+							r: 4,
+							strokeWidth: 0
+						},
+						isAnimationActive: false
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Trends with filled areas. `stacked` shows how series add up to a total. */
+function AreaChart(props) {
+	const { resolved, table, legend, valueFormatter } = useCartesian(props);
+	const id = useId().replace(/:/g, "");
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.AreaChart, {
+				accessibilityLayer: false,
+				data: props.data,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: resolved.map((item, i) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `${id}-${i}`,
+						x1: "0",
+						x2: "0",
+						y1: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: item.stroke,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: item.stroke,
+							stopOpacity: 0
+						})]
+					}, item.key)) }),
+					/* @__PURE__ */ jsx(Axes, {
+						index: props.index,
+						showGrid: props.showGrid,
+						showYAxis: props.showYAxis,
+						valueFormatter
+					}),
+					tooltip(valueFormatter, { stroke: "var(--color-border-strong)" }),
+					resolved.map((item, i) => /* @__PURE__ */ jsx(R.Area, {
+						dataKey: item.key,
+						name: item.label,
+						type: "monotone",
+						stroke: item.stroke,
+						strokeWidth: 2,
+						fill: `url(#${id}-${i})`,
+						...props.stacked && { stackId: "stack" },
+						isAnimationActive: false
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Compare values across categories. `stacked` puts series on top of each other. */
+function BarChart(props) {
+	const { resolved, table, legend, valueFormatter } = useCartesian(props);
+	const radius = props.barRadius ?? 3;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.BarChart, {
+				accessibilityLayer: false,
+				data: props.data,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(Axes, {
+						index: props.index,
+						showGrid: props.showGrid,
+						showYAxis: props.showYAxis,
+						valueFormatter
+					}),
+					tooltip(valueFormatter, {
+						fill: "var(--color-muted)",
+						opacity: .6
+					}),
+					resolved.map((item, i) => /* @__PURE__ */ jsx(R.Bar, {
+						dataKey: item.key,
+						name: item.label,
+						fill: item.stroke,
+						radius: props.stacked && i < resolved.length - 1 ? 0 : [
+							radius,
+							radius,
+							0,
+							0
+						],
+						...props.stacked && { stackId: "stack" },
+						isAnimationActive: false
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Parts of a whole. Best with five or fewer slices. */
+function DonutChart(props) {
+	const { data, category, value, valueFormatter = defaultFormatter, size = 200 } = props;
+	const { s, slots } = useChartParts();
+	const rows = data.map((row) => row);
+	const colors = rows.map((_, i) => resolveColor(props.colors?.[i], i));
+	const table = {
+		columns: [String(category), String(value)],
+		rows: rows.map((row) => [String(row[category]), valueFormatter(Number(row[value]))])
+	};
+	const legend = props.showLegend ?? true ? rows.map((row, i) => ({
+		label: String(row[category]),
+		color: colors[i]
+	})) : void 0;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		legend,
+		table,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative mx-auto",
+			style: {
+				width: size,
+				height: size
+			},
+			children: [/* @__PURE__ */ jsx(R.ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(R.PieChart, {
+					accessibilityLayer: false,
+					children: [tooltip(valueFormatter, false), /* @__PURE__ */ jsx(R.Pie, {
+						rootTabIndex: -1,
+						data: rows,
+						dataKey: value,
+						nameKey: category,
+						innerRadius: "68%",
+						outerRadius: "100%",
+						paddingAngle: 2,
+						stroke: "var(--color-surface)",
+						strokeWidth: 2,
+						isAnimationActive: false,
+						children: rows.map((_, i) => /* @__PURE__ */ jsx(R.Cell, { fill: colors[i] }, i))
+					})]
+				})
+			}), props.centerLabel && /* @__PURE__ */ jsx("div", {
+				className: s.center({ class: slots.center }),
+				children: props.centerLabel
+			})]
+		})
+	});
+}
+/** A tiny trend line without axes, for stat cards and table cells. */
+function Sparkline({ values, title, color, height = 36, area = true, className }) {
+	const id = useId().replace(/:/g, "");
+	const stroke = resolveColor(color, 0);
+	const data = values.map((v, i) => ({
+		i,
+		v
+	}));
+	return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": title,
+		"data-slot": "sparkline",
+		className,
+		style: { height },
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(R.AreaChart, {
+				accessibilityLayer: false,
+				data,
+				margin: {
+					top: 2,
+					right: 2,
+					bottom: 2,
+					left: 2
+				},
+				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					id,
+					x1: "0",
+					x2: "0",
+					y1: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: stroke,
+						stopOpacity: area ? .25 : 0
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: stroke,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ jsx(R.Area, {
+					dataKey: "v",
+					type: "monotone",
+					stroke,
+					strokeWidth: 1.75,
+					fill: `url(#${id})`,
+					isAnimationActive: false,
+					dot: false
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { AreaChart, BarChart, DonutChart, LineChart, Sparkline, chartStyles };

package/dist/color-mode-script-Bf7LYkOj.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/provider/color-mode-script.ts
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+const DEFAULT_STORAGE_KEY = "glyph-mode";
+/**
+* A tiny inline script that sets `data-mode` on `<html>` before first paint, so dark-mode
+* visitors never see a light flash. Use the same options as `GlyphProvider`.
+*/
+function getColorModeScript({ defaultMode = "system", storageKey = DEFAULT_STORAGE_KEY } = {}) {
+	return `(function(){try{var d=${JSON.stringify(defaultMode)},m=null;${storageKey ? `m=localStorage.getItem(${JSON.stringify(storageKey)});` : ""}if(m!=='light'&&m!=='dark'&&m!=='system')m=d;if(m==='system')m=matchMedia('${DARK_QUERY}').matches?'dark':'light';var r=document.documentElement;r.dataset.mode=m;r.style.colorScheme=m}catch(e){}})()`;
+}
+//#endregion
+export { DEFAULT_STORAGE_KEY as n, getColorModeScript as r, DARK_QUERY as t };

package/dist/color-mode-script-KdwItKN2.d.ts

@@ -0,0 +1,16 @@
+import { ColorMode } from "@glyphui/tokens";
+//#region src/provider/color-mode-script.d.ts
+type ColorModePreference = ColorMode | 'system';
+interface ColorModeOptions {
+  /** Used when nothing is stored yet. */
+  defaultMode?: ColorModePreference;
+  /** localStorage key. Set to `null` to disable persistence. */
+  storageKey?: string | null;
+}
+/**
+ * A tiny inline script that sets `data-mode` on `<html>` before first paint, so dark-mode
+ * visitors never see a light flash. Use the same options as `GlyphProvider`.
+ */
+declare function getColorModeScript({ defaultMode, storageKey }?: ColorModeOptions): string;
+//#endregion
+export { ColorModePreference as n, getColorModeScript as r, ColorModeOptions as t };

package/dist/data-table.js

@@ -1,6 +1,7 @@
 "use client";
-import { E as SearchIcon, O as useComponentConfig, b as ChevronRightIcon, c as tv, f as themedBorder, g as ArrowUpIcon, h as ArrowDownIcon, i as IconButton, r as Button, u as focusRing, x as ChevronsUpDownIcon, y as ChevronLeftIcon } from "./field-context-B6WOcK5m.js";
-import { a as Table, c as TableCell, d as TableRow, h as Input, l as TableHead, n as ErrorState, o as TableBody, p as Skeleton, t as EmptyState, u as TableHeader, v as Checkbox } from "./states-Rp8wZ_jH.js";
+import { a as themedBorder, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
+import { b as SearchIcon, h as ChevronsUpDownIcon, i as IconButton, l as ArrowDownIcon, m as ChevronRightIcon, p as ChevronLeftIcon, r as Button, u as ArrowUpIcon } from "./field-context-7I-cWvvS.js";
+import { a as Table, c as TableCell, d as TableRow, h as Input, l as TableHead, n as ErrorState, o as TableBody, p as Skeleton, t as EmptyState, u as TableHeader, v as Checkbox } from "./states-IvhjBgna.js";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";

package/dist/{field-CCecIzdq.js → field-CVbywksE.js}

@@ -1,5 +1,6 @@
 "use client";
-import { O as useComponentConfig, c as tv, t as FieldContext } from "./field-context-B6WOcK5m.js";
+import { s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
+import { t as FieldContext } from "./field-context-7I-cWvvS.js";
 import { Label } from "radix-ui";
 import { useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -19,10 +20,12 @@ const fieldStyles = tv({
 	slots: {
 		root: "grid gap-1.5",
 		label: "",
-		required: "text-danger",
+		labelRow: "flex items-center justify-between gap-2",
+		labelAction: "text-small",
+		required: "text-danger-text",
 		text: "grid gap-0.5",
 		description: "text-small text-faint-foreground",
-		error: "text-small font-medium text-danger"
+		error: "text-small font-medium text-danger-text"
 	},
 	variants: { orientation: {
 		vertical: {},
@@ -41,15 +44,17 @@ const fieldStyles = tv({
 */
 function Field(inProps) {
 	const [props, slots] = useComponentConfig("Field", inProps);
-	const { label, description, error, required = false, disabled = false, controlId, orientation, className, children, ...rest } = props;
+	const { label, labelAction, description, error, required = false, disabled = false, controlId, orientation, className, children, ...rest } = props;
 	const generated = useId();
 	const id = controlId ?? generated;
 	const invalid = Boolean(error);
+	const labelId = label ? `${id}-label` : void 0;
 	const descriptionId = description ? `${id}-description` : void 0;
 	const errorId = invalid ? `${id}-error` : void 0;
 	const s = fieldStyles({ orientation });
 	const context = useMemo(() => ({
 		id,
+		labelId,
 		descriptionId,
 		errorId,
 		invalid,
@@ -57,13 +62,15 @@ function Field(inProps) {
 		disabled
 	}), [
 		id,
+		labelId,
 		descriptionId,
 		errorId,
 		invalid,
 		required,
 		disabled
 	]);
-	const labelNode = label ? /* @__PURE__ */ jsxs(Label$1, {
+	const labelElement = label ? /* @__PURE__ */ jsxs(Label$1, {
+		id: labelId,
 		htmlFor: id,
 		className: s.label({ class: slots.label }),
 		children: [label, required && /* @__PURE__ */ jsx("span", {
@@ -72,6 +79,15 @@ function Field(inProps) {
 			children: "*"
 		})]
 	}) : null;
+	const labelNode = labelElement && labelAction ? /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-label-row",
+		className: s.labelRow({ class: slots.labelRow }),
+		children: [labelElement, /* @__PURE__ */ jsx("span", {
+			"data-slot": "field-label-action",
+			className: s.labelAction({ class: slots.labelAction }),
+			children: labelAction
+		})]
+	}) : labelElement;
 	const messages = /* @__PURE__ */ jsxs(Fragment$1, { children: [description && /* @__PURE__ */ jsx("p", {
 		id: descriptionId,
 		"data-slot": "field-description",

package/dist/{field-context-B6WOcK5m.js → field-context-7I-cWvvS.js}

@@ -1,40 +1,8 @@
 "use client";
-import { textTokens } from "@glyphui/tokens";
+import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
 import { Slot } from "radix-ui";
 import { Fragment, createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createTV } from "tailwind-variants";
-//#region src/provider/glyph-context.ts
-const GlyphContext = createContext(null);
-/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
-function useGlyph() {
-	const value = useContext(GlyphContext);
-	if (!value) throw new Error("useGlyph must be used inside <GlyphProvider>.");
-	return value;
-}
-/** The router-aware link component configured on `GlyphProvider`. */
-function useLinkComponent() {
-	return useContext(GlyphContext)?.linkComponent ?? "a";
-}
-//#endregion
-//#region src/hooks/use-component-config.ts
-/**
-* Applies the theme's per-component settings (`theme.components[name]`):
-* fills unset variant props from `defaultVariants` and returns the extra slot classes.
-* Every styled component calls this first.
-*/
-function useComponentConfig(name, props) {
-	const override = (useContext(GlyphContext)?.theme)?.components[name];
-	if (!override) return [props, {}];
-	let merged = props;
-	const defaults = override.defaultVariants;
-	if (defaults) {
-		merged = { ...props };
-		for (const [key, value] of Object.entries(defaults)) if (merged[key] === void 0) merged[key] = value;
-	}
-	return [merged, override.className ?? {}];
-}
-//#endregion
 //#region src/internal/icons.tsx
 function Icon({ children, ...props }) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -123,28 +91,6 @@ const AlertIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
 	}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
 });
 //#endregion
-//#region src/utils/styles.ts
-/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
-const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
-const themedBorder = "border-(length:--glyph-border-width)";
-const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
-/** Popover surfaces: Select, Tooltip-like menus. */
-const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
-//#endregion
-//#region src/utils/tw-merge-config.ts
-/**
-* Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
-* keeps only the last size instead of treating `text-h1` as a color.
-*/
-const twMergeConfig = { extend: { theme: {
-	text: [...textTokens],
-	radius: ["pill"]
-} } };
-//#endregion
-//#region src/utils/tv.ts
-/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
-const tv = createTV({ twMergeConfig });
-//#endregion
 //#region src/components/spinner/spinner.styles.ts
 const spinnerStyles = tv({
 	slots: {
@@ -211,7 +157,7 @@ const buttonStyles = tv({
 			outline: { base: "border-border bg-surface text-foreground shadow-xs hover:border-border-strong hover:bg-muted" },
 			ghost: { base: "text-muted-foreground hover:bg-muted hover:text-foreground" },
 			danger: { base: "bg-danger text-danger-foreground shadow-sm hover:bg-danger/88" },
-			link: { base: "h-auto px-0 text-primary underline-offset-4 shadow-none hover:underline" }
+			link: { base: "h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline" }
 		},
 		size: {
 			sm: {
@@ -318,4 +264,4 @@ function useFieldControl(props) {
 	};
 }
 //#endregion
-export { useGlyph as A, MenuIcon as C, XIcon as D, SearchIcon as E, useComponentConfig as O, InboxIcon as S, PanelLeftIcon as T, CheckIcon as _, buttonStyles as a, ChevronRightIcon as b, tv as c, popover as d, themedBorder as f, ArrowUpIcon as g, ArrowDownIcon as h, IconButton as i, useLinkComponent as j, GlyphContext as k, twMergeConfig as l, AlertIcon as m, useFieldControl as n, Spinner as o, transition as p, Button as r, spinnerStyles as s, FieldContext as t, focusRing as u, ChevronDownIcon as v, MinusIcon as w, ChevronsUpDownIcon as x, ChevronLeftIcon as y };
+export { MenuIcon as _, buttonStyles as a, SearchIcon as b, AlertIcon as c, CheckIcon as d, ChevronDownIcon as f, InboxIcon as g, ChevronsUpDownIcon as h, IconButton as i, ArrowDownIcon as l, ChevronRightIcon as m, useFieldControl as n, Spinner as o, ChevronLeftIcon as p, Button as r, spinnerStyles as s, FieldContext as t, ArrowUpIcon as u, MinusIcon as v, XIcon as x, PanelLeftIcon as y };