@glyphui/ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,8 +1,9 @@
 "use client";
-import { a as themedBorder, c as GlyphContext, i as popover, l as useGlyph, n as twMergeConfig, o as transition, r as focusRing, s as useComponentConfig, t as tv, u as useLinkComponent } from "./tv-DBAGlgXJ.js";
-import { _ as MenuIcon, a as buttonStyles, b as SearchIcon, d as CheckIcon$4, f as ChevronDownIcon$1, h as ChevronsUpDownIcon, i as IconButton, m as ChevronRightIcon$2, n as useFieldControl, o as Spinner, p as ChevronLeftIcon, r as Button, s as spinnerStyles, t as FieldContext, x as XIcon$2, y as PanelLeftIcon } from "./field-context-anGPYXbW.js";
-import { _ as inputStyles, a as Table, c as TableCell, d as TableRow, f as tableStyles, g as fieldControl, h as Input, i as stateStyles, l as TableHead, m as skeletonStyles, n as ErrorState, o as TableBody, p as Skeleton, r as LoadingState, s as TableCaption, t as EmptyState, u as TableHeader, v as Checkbox, y as checkboxStyles } from "./states-DR-OoDT-.js";
-import { i as labelStyles, n as fieldStyles, r as Label, t as Field } from "./field-CWZ_FdkD.js";
+import { a as themedBorder, c as GlyphContext, d as useIsActive, f as useLinkComponent, i as popover, l as neverActive, n as twMergeConfig, o as transition, r as focusRing, s as useComponentConfig, t as tv, u as useGlyph } from "./tv-DLbT66dC.js";
+import { _ as MenuIcon, a as buttonStyles, b as SearchIcon, d as CheckIcon$4, f as ChevronDownIcon$1, h as ChevronsUpDownIcon, i as IconButton, m as ChevronRightIcon$2, n as useFieldControl, o as Spinner, p as ChevronLeftIcon, r as Button, s as spinnerStyles, t as FieldContext, x as XIcon$2, y as PanelLeftIcon } from "./field-context-7I-cWvvS.js";
+import { _ as inputStyles, a as Table, c as TableCell, d as TableRow, f as tableStyles, g as fieldControl, h as Input, i as stateStyles, l as TableHead, m as skeletonStyles, n as ErrorState, o as TableBody, p as Skeleton, r as LoadingState, s as TableCaption, t as EmptyState, u as TableHeader, v as Checkbox, y as checkboxStyles } from "./states-IvhjBgna.js";
+import { i as labelStyles, n as fieldStyles, r as Label, t as Field } from "./field-CVbywksE.js";
+import { n as DEFAULT_STORAGE_KEY, r as getColorModeScript, t as DARK_QUERY } from "./color-mode-script-Bf7LYkOj.js";
 import { defineTheme, defineTheme as defineTheme$1, presets as presets$1, scopeSelector, themeToCss, themeToCss as themeToCss$1, tokenVar } from "@glyphui/tokens";
 import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Collapsible as Collapsible$1, ContextMenu as ContextMenu$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, NavigationMenu as NavigationMenu$1, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Separator as Separator$1, Slider as Slider$1, Slot, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip as Tooltip$1, VisuallyHidden as VisuallyHidden$1 } from "radix-ui";
 import { Children, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -561,29 +562,29 @@ const tones = {
 		outline: "border-border-strong text-foreground"
 	},
 	primary: {
-		soft: "bg-primary/14 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]",
+		soft: "bg-primary/14 text-primary-text",
 		solid: "bg-primary text-primary-foreground",
-		outline: "border-primary/50 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]"
+		outline: "border-primary/50 text-primary-text"
 	},
 	success: {
-		soft: "bg-success/14 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]",
+		soft: "bg-success/14 text-success-text",
 		solid: "bg-success text-success-foreground",
-		outline: "border-success/50 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]"
+		outline: "border-success/50 text-success-text"
 	},
 	warning: {
-		soft: "bg-warning/16 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]",
+		soft: "bg-warning/14 text-warning-text",
 		solid: "bg-warning text-warning-foreground",
-		outline: "border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]"
+		outline: "border-warning/50 text-warning-text"
 	},
 	danger: {
-		soft: "bg-danger/14 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]",
+		soft: "bg-danger/14 text-danger-text",
 		solid: "bg-danger text-danger-foreground",
-		outline: "border-danger/50 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]"
+		outline: "border-danger/50 text-danger-text"
 	},
 	info: {
-		soft: "bg-info/14 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]",
+		soft: "bg-info/14 text-info-text",
 		solid: "bg-info text-info-foreground",
-		outline: "border-info/50 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]"
+		outline: "border-info/50 text-info-text"
 	}
 };
 const badgeStyles = tv({
@@ -659,10 +660,10 @@ const bannerStyles = tv({
 			icon: "text-muted-foreground"
 		},
 		primary: { root: "border-primary bg-primary text-primary-foreground" },
-		info: { root: "border-info/25 bg-info/10 text-[color-mix(in_oklab,var(--color-info)_55%,var(--color-foreground))]" },
-		success: { root: "border-success/25 bg-success/10 text-[color-mix(in_oklab,var(--color-success)_55%,var(--color-foreground))]" },
-		warning: { root: "border-warning/30 bg-warning/14 text-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-foreground))]" },
-		danger: { root: "border-danger/25 bg-danger/10 text-[color-mix(in_oklab,var(--color-danger)_55%,var(--color-foreground))]" }
+		info: { root: "border-info/25 bg-info/10 text-info-text" },
+		success: { root: "border-success/25 bg-success/10 text-success-text" },
+		warning: { root: "border-warning/30 bg-warning/14 text-warning-text" },
+		danger: { root: "border-danger/25 bg-danger/10 text-danger-text" }
 	} },
 	defaultVariants: { tone: "neutral" }
 });
@@ -889,9 +890,9 @@ const calendarStyles = tv({ slots: {
 		transition,
 		focusRing
 	],
-	today: "[&>button]:font-semibold [&>button]:text-primary",
+	today: "[&>button]:font-semibold [&:not([data-selected])>button]:text-primary-text",
 	selected: "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary/90",
-	outside: "[&>button]:text-faint-foreground [&>button]:opacity-60",
+	outside: "[&:not([data-selected])>button]:text-faint-foreground",
 	disabled: "[&>button]:pointer-events-none [&>button]:opacity-35 [&>button]:line-through",
 	rangeStart: "rounded-l-md bg-primary/14",
 	rangeMiddle: "bg-primary/14 [&>button]:rounded-none [&>button]:bg-transparent! [&>button]:text-foreground! [&>button]:hover:bg-primary/10!",
@@ -1812,8 +1813,8 @@ const dropdownMenuStyles = tv({
 		tone: {
 			default: {},
 			danger: {
-				item: "text-danger data-highlighted:bg-danger/10",
-				icon: "text-danger"
+				item: "text-danger-text data-highlighted:bg-danger/10",
+				icon: "text-danger-text"
 			}
 		},
 		inset: { true: {
@@ -2688,7 +2689,7 @@ const eyebrowStyles = tv({
 	slots: { base: "font-mono text-caption uppercase tracking-[0.12em]" },
 	variants: { tone: {
 		muted: { base: "text-muted-foreground" },
-		primary: { base: "text-primary" }
+		primary: { base: "text-primary-text" }
 	} },
 	defaultVariants: { tone: "muted" }
 });
@@ -2721,16 +2722,16 @@ const fileUploadStyles = tv({ slots: {
 	],
 	icon: "flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5",
 	title: "text-small font-medium text-foreground",
-	highlight: "text-primary",
+	highlight: "text-primary-text",
 	hint: "text-caption text-faint-foreground",
-	rejections: "grid gap-1 text-small font-medium text-danger",
+	rejections: "grid gap-1 text-small font-medium text-danger-text",
 	list: "grid gap-2",
 	item: ["grid grid-cols-[auto_1fr_auto] items-center gap-3 rounded-md border-border bg-surface px-3 py-2.5", themedBorder],
 	fileIcon: "flex size-8 items-center justify-center rounded-sm bg-muted text-muted-foreground [&>svg]:size-4",
 	fileText: "grid min-w-0 gap-1",
 	fileName: "truncate text-small font-medium text-foreground",
 	fileMeta: "text-caption tabular-nums text-faint-foreground",
-	fileError: "text-caption font-medium text-danger",
+	fileError: "text-caption font-medium text-danger-text",
 	progress: "h-1 overflow-hidden rounded-pill bg-muted",
 	progressBar: "h-full rounded-pill bg-primary transition-[width] duration-(--glyph-duration-base)"
 } });
@@ -3284,7 +3285,7 @@ const linkStyles = tv({
 		tone: {
 			default: { base: "text-foreground" },
 			muted: { base: "text-muted-foreground hover:text-foreground" },
-			primary: { base: "text-primary" }
+			primary: { base: "text-primary-text" }
 		},
 		underline: {
 			hover: { base: "bg-[length:0%_1px] hover:bg-[length:100%_1px] focus-visible:bg-[length:100%_1px]" },
@@ -3355,7 +3356,9 @@ const modalStyles = tv({ slots: {
 	content: "",
 	header: "",
 	body: "grid gap-4",
-	footer: ""
+	footer: "",
+	/** Wraps body and footer when `onSubmit` is set; `contents` keeps the dialog layout. */
+	form: "contents"
 } });
 //#endregion
 //#region src/components/modal/modal.tsx
@@ -3365,8 +3368,15 @@ const modalStyles = tv({ slots: {
 */
 function Modal(inProps) {
 	const [props, slots] = useComponentConfig("Modal", inProps);
-	const { open, defaultOpen, onOpenChange, title, description, trigger, footer, closeOnOverlayClick = true, onPointerDownOutside, className, children, ...rest } = props;
+	const { open, defaultOpen, onOpenChange, title, description, trigger, footer, closeOnOverlayClick = true, onSubmit, onPointerDownOutside, className, children, ...rest } = props;
 	const s = modalStyles();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [children && /* @__PURE__ */ jsx(DialogBody, {
+		className: s.body({ class: slots.body }),
+		children
+	}), footer && /* @__PURE__ */ jsx(DialogFooter, {
+		className: s.footer({ class: slots.footer }),
+		children: footer
+	})] });
 	return /* @__PURE__ */ jsxs(Dialog, {
 		...open !== void 0 && { open },
 		...defaultOpen !== void 0 && { defaultOpen },
@@ -3383,20 +3393,18 @@ function Modal(inProps) {
 			},
 			...!description && { "aria-describedby": void 0 },
 			...rest,
-			children: [
-				/* @__PURE__ */ jsxs(DialogHeader, {
-					className: s.header({ class: slots.header }),
-					children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })]
-				}),
-				children && /* @__PURE__ */ jsx(DialogBody, {
-					className: s.body({ class: slots.body }),
-					children
-				}),
-				footer && /* @__PURE__ */ jsx(DialogFooter, {
-					className: s.footer({ class: slots.footer }),
-					children: footer
-				})
-			]
+			children: [/* @__PURE__ */ jsxs(DialogHeader, {
+				className: s.header({ class: slots.header }),
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })]
+			}), onSubmit ? /* @__PURE__ */ jsx("form", {
+				"data-slot": "modal-form",
+				className: s.form({ class: slots.form }),
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(event);
+				},
+				children: content
+			}) : content]
 		})]
 	});
 }
@@ -3513,20 +3521,26 @@ function NavigationMenuViewport({ className, ...props }) {
 		})
 	});
 }
-/** A top-level link (no panel). Set `active` for the current page. */
-function NavigationMenuLink({ href, className, children, ...props }) {
+/**
+* A top-level link (no panel). Marked active automatically from the provider's `router`;
+* set `active` to override.
+*/
+function NavigationMenuLink({ href, active: activeProp, className, children, ...props }) {
 	const slots = useSlots$2();
 	const Link = useLinkComponent();
+	const active = useIsActive(href, { explicit: activeProp });
 	const cls = s$2.link({ class: [slots.link, className] });
 	if (href === void 0) return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
 		"data-slot": "navigation-menu-link",
 		className: cls,
+		active,
 		...props,
 		children
 	});
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
 		"data-slot": "navigation-menu-link",
 		asChild: true,
+		active,
 		...props,
 		children: /* @__PURE__ */ jsx(Link, {
 			href,
@@ -3895,9 +3909,9 @@ const passwordInputStyles = tv({
 		label: "w-14 text-right text-caption text-muted-foreground"
 	},
 	variants: { strength: {
-		weak: { label: "text-danger" },
-		fair: { label: "text-warning" },
-		strong: { label: "text-success" }
+		weak: { label: "text-danger-text" },
+		fair: { label: "text-warning-text" },
+		strong: { label: "text-success-text" }
 	} }
 });
 //#endregion
@@ -4181,7 +4195,7 @@ const proseStyles = tv({
 		"[&_h4]:mt-[1.4em] [&_h4]:mb-[0.4em] [&_h4]:font-display [&_h4]:text-h4",
 		"[&_p]:my-[1em] [&_p]:text-pretty",
 		"[&_strong]:font-semibold [&_strong]:text-foreground",
-		"[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary",
+		"[&_a]:font-medium [&_a]:text-primary-text [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary",
 		"[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]",
 		"[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground",
 		"[&_blockquote]:my-[1.5em] [&_blockquote]:border-l-2 [&_blockquote]:border-primary [&_blockquote]:pl-[1em] [&_blockquote]:font-display [&_blockquote]:text-muted-foreground",
@@ -4477,6 +4491,22 @@ const scrollAreaStyles = tv({ slots: {
 	thumb: "relative flex-1 rounded-pill bg-border-strong hover:bg-faint-foreground",
 	corner: "bg-transparent"
 } });
+/** True while the element's content overflows it, so keyboard users need to reach it. */
+function useOverflowing() {
+	const ref = useRef(null);
+	const [overflowing, setOverflowing] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const measure = () => setOverflowing(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		if (el.firstElementChild) observer.observe(el.firstElementChild);
+		return () => observer.disconnect();
+	}, []);
+	return [ref, overflowing];
+}
 /**
 * A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
 * with `className`, e.g. `h-72`.
@@ -4485,6 +4515,7 @@ function ScrollArea(inProps) {
 	const [props, slots] = useComponentConfig("ScrollArea", inProps);
 	const { orientation = "vertical", viewportClassName, className, children, ...rest } = props;
 	const s = scrollAreaStyles();
+	const [viewportRef, overflowing] = useOverflowing();
 	const bar = (o) => /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
 		"data-slot": "scroll-area-scrollbar",
 		orientation: o,
@@ -4497,7 +4528,9 @@ function ScrollArea(inProps) {
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				ref: viewportRef,
 				"data-slot": "scroll-area-viewport",
+				tabIndex: overflowing ? 0 : void 0,
 				className: s.viewport({ class: [slots.viewport, viewportClassName] }),
 				children
 			}),
@@ -4544,6 +4577,16 @@ function Section({ spacing, tone, divided, asChild, className, ...props }) {
 	});
 }
 //#endregion
+//#region src/internal/dev.ts
+const warned = /* @__PURE__ */ new Set();
+/** Logs a console warning once per key, in development only. */
+function warnOnce(key, message) {
+	if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
+	if (warned.has(key)) return;
+	warned.add(key);
+	console.warn(`[glyph] ${message}`);
+}
+//#endregion
 //#region src/components/segmented-control/segmented-control.tsx
 const segmentedControlStyles = tv({
 	slots: {
@@ -4581,10 +4624,14 @@ const segmentedControlStyles = tv({
 function SegmentedControl(inProps) {
 	const [props, slots] = useComponentConfig("SegmentedControl", inProps);
 	const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props;
+	const field = useContext(FieldContext);
 	const s = segmentedControlStyles({
 		size,
 		fullWidth
 	});
+	const labelledBy = rest["aria-labelledby"] ?? (rest["aria-label"] ? void 0 : field?.labelId);
+	if (!rest["aria-label"] && !labelledBy) warnOnce("segmented-control-label", "SegmentedControl needs a label: pass aria-label, or place it in a <Field label=\"…\">.");
+	const describedBy = [field?.descriptionId, field?.errorId].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ToggleGroup$1.Root, {
 		type: "single",
 		"data-slot": "segmented-control",
@@ -4592,6 +4639,8 @@ function SegmentedControl(inProps) {
 		...defaultValue !== void 0 && { defaultValue },
 		onValueChange: (next) => next && onValueChange?.(next),
 		className: s.root({ class: [slots.root, className] }),
+		"aria-labelledby": labelledBy,
+		"aria-describedby": describedBy || void 0,
 		...rest,
 		children: options.map((option) => /* @__PURE__ */ jsx(ToggleGroup$1.Item, {
 			value: option.value,
@@ -4853,7 +4902,9 @@ const toArray = (value) => value === void 0 ? void 0 : typeof value === "number"
 /** Choose a number, or a range with two thumbs, by dragging or with arrow keys. */
 function Slider(inProps) {
 	const [props, slots] = useComponentConfig("Slider", useFieldControl(inProps));
-	const { value, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, minStepsBetweenThumbs, marks, showValue = false, disabled, name, id, className, thumbLabels = ["Minimum", "Maximum"], "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const { value, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, minStepsBetweenThumbs, marks, showValue = false, disabled, name, id, className, thumbLabels = ["Minimum", "Maximum"], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid } = props;
+	const field = useContext(FieldContext);
+	const labelledBy = ariaLabelledBy ?? (ariaLabel ? void 0 : field?.labelId);
 	const isRange = Array.isArray(value ?? defaultValue);
 	const fromArray = (next) => isRange ? [next[0], next[1]] : next[0];
 	const current = toArray(value) ?? toArray(defaultValue) ?? [min];
@@ -4880,6 +4931,7 @@ function Slider(inProps) {
 			}), current.map((thumbValue, index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 				id: index === 0 ? id : void 0,
 				"aria-label": isRange ? thumbLabels[index] : ariaLabel,
+				"aria-labelledby": isRange ? void 0 : labelledBy,
 				"aria-describedby": ariaDescribedBy,
 				"aria-invalid": ariaInvalid,
 				className: s.thumb({ class: slots.thumb }),
@@ -5090,7 +5142,7 @@ const stepperStyles = tv({
 				title: "text-foreground"
 			},
 			current: {
-				indicator: "border-primary bg-surface text-primary ring-4 ring-primary/15",
+				indicator: "border-primary bg-surface text-primary-text ring-4 ring-primary/15",
 				connector: "bg-border",
 				title: "text-foreground"
 			},
@@ -5102,7 +5154,7 @@ const stepperStyles = tv({
 			error: {
 				indicator: "border-danger bg-danger text-danger-foreground",
 				connector: "bg-border",
-				title: "text-danger"
+				title: "text-danger-text"
 			}
 		},
 		clickable: { true: { trigger: "cursor-pointer hover:[&_[data-slot=stepper-title]]:underline underline-offset-4" } }
@@ -5329,7 +5381,7 @@ const tagInputStyles = tv({
 		tagLabel: "truncate",
 		remove: "inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted-foreground hover:bg-border-strong/40 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring [&>svg]:size-3",
 		input: "h-7 min-w-24 flex-1 bg-transparent px-1 text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed",
-		message: "text-small font-medium text-danger"
+		message: "text-small font-medium text-danger-text"
 	},
 	variants: { size: {
 		sm: { frame: "min-h-(--glyph-control-sm) text-small" },
@@ -5492,10 +5544,10 @@ const textStyles = tv({
 			default: { base: "text-foreground" },
 			muted: { base: "text-muted-foreground" },
 			faint: { base: "text-faint-foreground" },
-			primary: { base: "text-primary" },
-			success: { base: "text-success" },
-			warning: { base: "text-warning" },
-			danger: { base: "text-danger" }
+			primary: { base: "text-primary-text" },
+			success: { base: "text-success-text" },
+			warning: { base: "text-warning-text" },
+			danger: { base: "text-danger-text" }
 		},
 		weight: {
 			regular: { base: "font-normal" },
@@ -6091,7 +6143,7 @@ const sidebarStyles = tv({ slots: {
 		"group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0"
 	],
 	itemIcon: "flex size-4 shrink-0 items-center justify-center [&>svg]:size-4",
-	itemLabel: "min-w-0 flex-1 truncate text-left group-data-[collapsed=true]/sidebar:hidden",
+	itemLabel: "min-w-0 flex-1 truncate text-left group-data-[collapsed=true]/sidebar:sr-only",
 	itemBadge: "ml-auto font-mono text-caption text-faint-foreground tabular-nums group-data-[collapsed=true]/sidebar:hidden",
 	footer: ["mt-auto flex shrink-0 items-center gap-2 border-t-border px-3 py-3 group-data-[collapsed=true]/sidebar:justify-center", "border-t-(length:--glyph-border-width)"]
 } });
@@ -6206,7 +6258,11 @@ function SidebarSection({ label, className, children, ...props }) {
 		}), children]
 	});
 }
-function SidebarItem({ href, icon, badge, active, onClick, className, children }) {
+function SidebarItem({ href, icon, badge, active: activeProp, end, onClick, className, children }) {
+	const active = useIsActive(href, {
+		explicit: activeProp,
+		...end !== void 0 && { end }
+	});
 	const { collapsed, inDrawer, setMobileOpen } = useAppShell();
 	const Link = useLinkComponent();
 	const slots = useSlots();
@@ -6347,6 +6403,20 @@ function AppShell(inProps) {
 }
 //#endregion
 //#region src/patterns/app-shell/navbar.tsx
+function NavbarLink({ link, className, onClick }) {
+	const Link = useLinkComponent();
+	const active = useIsActive(link.href, {
+		explicit: link.active,
+		...link.end !== void 0 && { end: link.end }
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		href: link.href,
+		"aria-current": active ? "page" : void 0,
+		className,
+		...onClick && { onClick },
+		children: link.label
+	});
+}
 /**
 * Site header from data: brand, links, actions. Responsive out of the box: links collapse
 * into a focus-trapped menu panel on small screens.
@@ -6356,7 +6426,6 @@ function Navbar(inProps) {
 	const { brand, links = [], actions, sticky = true, blurOnScroll = true, containerSize, className, ...rest } = props;
 	const [open, setOpen] = useState(false);
 	const scrolled = useScrolled(8, blurOnScroll);
-	const Link = useLinkComponent();
 	const s = navbarStyles({
 		sticky,
 		blur: blurOnScroll
@@ -6377,11 +6446,9 @@ function Navbar(inProps) {
 				links.length > 0 && /* @__PURE__ */ jsx("nav", {
 					"aria-label": "Main",
 					className: s.links({ class: slots.links }),
-					children: links.map((link) => /* @__PURE__ */ jsx(Link, {
-						href: link.href,
-						"aria-current": link.active ? "page" : void 0,
-						className: s.link({ class: slots.link }),
-						children: link.label
+					children: links.map((link) => /* @__PURE__ */ jsx(NavbarLink, {
+						link,
+						className: s.link({ class: slots.link })
 					}, link.href))
 				}),
 				actions && /* @__PURE__ */ jsx("div", {
@@ -6421,12 +6488,10 @@ function Navbar(inProps) {
 							/* @__PURE__ */ jsx("nav", {
 								"aria-label": "Main",
 								className: s.panelLinks({ class: slots.panelLinks }),
-								children: links.map((link) => /* @__PURE__ */ jsx(Link, {
-									href: link.href,
-									"aria-current": link.active ? "page" : void 0,
+								children: links.map((link) => /* @__PURE__ */ jsx(NavbarLink, {
+									link,
 									className: s.panelLink({ class: slots.panelLink }),
-									onClick: () => setOpen(false),
-									children: link.label
+									onClick: () => setOpen(false)
 								}, link.href))
 							}),
 							actions && /* @__PURE__ */ jsx("div", {
@@ -6532,7 +6597,6 @@ function useAsync(fn, deps) {
 //#endregion
 //#region src/provider/color-mode.tsx
 const ColorModeContext = createContext(null);
-const DARK_QUERY = "(prefers-color-scheme: dark)";
 const isBrowser = typeof window !== "undefined";
 function readStoredMode(storageKey) {
 	if (!isBrowser || !storageKey) return null;
@@ -6544,7 +6608,7 @@ function readStoredMode(storageKey) {
 	}
 }
 function systemMode() {
-	return isBrowser && window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+	return isBrowser && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 /** Disables transitions for one frame so a mode switch doesn't animate every color. */
 function suppressTransitions() {
@@ -6556,7 +6620,7 @@ function suppressTransitions() {
 		requestAnimationFrame(() => style.remove());
 	};
 }
-function ColorModeProvider({ children, defaultMode = "system", storageKey = "glyph-mode" }) {
+function ColorModeProvider({ children, defaultMode = "system", storageKey = DEFAULT_STORAGE_KEY }) {
 	const [mode, setModeState] = useState(() => readStoredMode(storageKey) ?? defaultMode);
 	const [system, setSystem] = useState(systemMode);
 	useEffect(() => {
@@ -6605,9 +6669,6 @@ function useColorMode() {
 * Inline script that sets `data-mode` on `<html>` before first paint, so a dark-mode
 * visitor never sees a light flash. Put it in `<head>`.
 */
-function getColorModeScript({ defaultMode = "system", storageKey = "glyph-mode" } = {}) {
-	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){}})()`;
-}
 /** `<script>` element version of `getColorModeScript` for SSR frameworks. */
 function ColorModeScript(props) {
 	return /* @__PURE__ */ jsx("script", {
@@ -6674,11 +6735,18 @@ function ThemeStyle({ theme, selector }) {
 //#endregion
 //#region src/provider/glyph-provider.tsx
 /** Provides the theme, color mode, tooltips, `useConfirm()` and (optionally) toasts. Render once at the root. */
-function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, linkComponent = "a", toaster = false }) {
+function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, router, linkComponent, toaster = false }) {
+	const Link = router?.Link ?? linkComponent ?? "a";
+	const useIsActive = router?.useIsActive ?? neverActive;
 	const value = useMemo(() => ({
 		theme,
-		linkComponent
-	}), [theme, linkComponent]);
+		linkComponent: Link,
+		useIsActive
+	}), [
+		theme,
+		Link,
+		useIsActive
+	]);
 	return /* @__PURE__ */ jsx(ColorModeProvider, {
 		...defaultMode !== void 0 && { defaultMode },
 		...storageKey !== void 0 && { storageKey },
@@ -6698,8 +6766,13 @@ function ThemeScope({ theme, mode, asChild, children, ...props }) {
 	const parent = useContext(GlyphContext);
 	const value = useMemo(() => ({
 		theme,
-		linkComponent: parent?.linkComponent ?? "a"
-	}), [theme, parent?.linkComponent]);
+		linkComponent: parent?.linkComponent ?? "a",
+		useIsActive: parent?.useIsActive ?? neverActive
+	}), [
+		theme,
+		parent?.linkComponent,
+		parent?.useIsActive
+	]);
 	const Comp = asChild ? Slot.Root : "div";
 	return /* @__PURE__ */ jsxs(GlyphContext.Provider, {
 		value,
@@ -6716,4 +6789,4 @@ function ThemeScope({ theme, mode, asChild, children, ...props }) {
 	});
 }
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AppShell, AspectRatio, Async, Avatar, AvatarGroup, Badge, Banner, Blockquote, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Code, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorModeProvider, ColorModeScript, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator, ConfirmProvider, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, DateRangePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, Eyebrow, Field, FieldContext, FileUpload, GlyphProvider, Grid, Heading, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, Link, LoadingState, Modal, ModalClose, Navbar, NavigationMenu, NavigationMenuCard, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, PageHeader, Pagination, PasswordInput, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, ProgressCircle, Prose, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Section, SegmentedControl, Select, SelectItem, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarTrigger, Skeleton, Slider, Spinner, Stack, StatCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, Text, Textarea, ThemeScope, Timeline, TimelineItem, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VisuallyHidden, accordionStyles, alertDialogStyles, alertStyles, appShellStyles, aspectRatioStyles, avatarStyles, badgeStyles, bannerStyles, blockquoteStyles, breadcrumbStyles, brutalist, buttonStyles, calendarStyles, cardStyles, carouselStyles, checkboxStyles, cn, codeBlockStyles, codeStyles, collapsibleStyles, comboboxStyles, commandMenuStyles, containerStyles, contextMenuStyles, copyButtonStyles, datePickerStyles, defineTheme, descriptionListStyles, dialogStyles, dropdownMenuStyles, editorial, eyebrowStyles, fieldControl, fieldStyles, fileUploadStyles, formatBytes, getColorModeScript, glyph, gridStyles, headingStyles, hoverCardStyles, inputOtpStyles, inputStyles, kbdStyles, labelStyles, linkStyles, matchesAccept, modalStyles, navbarStyles, navigationMenuStyles, numberInputStyles, pageHeaderStyles, paginationRange, paginationStyles, passwordInputStyles, passwordStrength, playful, popoverStyles, presets, progressCircleStyles, progressStyles, proseStyles, radioGroupStyles, resizableStyles, scrollAreaStyles, sectionStyles, segmentedControlStyles, selectStyles, separatorStyles, sheetStyles, sidebarStyles, skeletonStyles, sliderStyles, spinnerStyles, stackStyles, statCardStyles, stateStyles, stepperStyles, switchStyles, tableStyles, tabsStyles, tagInputStyles, textStyles, textareaStyles, themeToCss, timelineStyles, toast, toastStyles, toggleStyles, tokenVar, tooltipStyles, treeViewStyles, tv, useAppShell, useAsync, useColorMode, useCommandMenuShortcut, useComponentConfig, useConfirm, useControllableState, useFieldControl, useGlyph, useLinkComponent, useMediaQuery, useScrolled };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AppShell, AspectRatio, Async, Avatar, AvatarGroup, Badge, Banner, Blockquote, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Code, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorModeProvider, ColorModeScript, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandMenu, CommandSeparator, ConfirmProvider, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, DatePicker, DateRangePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, Eyebrow, Field, FieldContext, FileUpload, GlyphProvider, Grid, Heading, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, Link, LoadingState, Modal, ModalClose, Navbar, NavigationMenu, NavigationMenuCard, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, PageHeader, Pagination, PasswordInput, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, ProgressCircle, Prose, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Section, SegmentedControl, Select, SelectItem, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarTrigger, Skeleton, Slider, Spinner, Stack, StatCard, Stepper, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, Text, Textarea, ThemeScope, Timeline, TimelineItem, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TreeView, VisuallyHidden, accordionStyles, alertDialogStyles, alertStyles, appShellStyles, aspectRatioStyles, avatarStyles, badgeStyles, bannerStyles, blockquoteStyles, breadcrumbStyles, brutalist, buttonStyles, calendarStyles, cardStyles, carouselStyles, checkboxStyles, cn, codeBlockStyles, codeStyles, collapsibleStyles, comboboxStyles, commandMenuStyles, containerStyles, contextMenuStyles, copyButtonStyles, datePickerStyles, defineTheme, descriptionListStyles, dialogStyles, dropdownMenuStyles, editorial, eyebrowStyles, fieldControl, fieldStyles, fileUploadStyles, formatBytes, getColorModeScript, glyph, gridStyles, headingStyles, hoverCardStyles, inputOtpStyles, inputStyles, kbdStyles, labelStyles, linkStyles, matchesAccept, modalStyles, navbarStyles, navigationMenuStyles, numberInputStyles, pageHeaderStyles, paginationRange, paginationStyles, passwordInputStyles, passwordStrength, playful, popoverStyles, presets, progressCircleStyles, progressStyles, proseStyles, radioGroupStyles, resizableStyles, scrollAreaStyles, sectionStyles, segmentedControlStyles, selectStyles, separatorStyles, sheetStyles, sidebarStyles, skeletonStyles, sliderStyles, spinnerStyles, stackStyles, statCardStyles, stateStyles, stepperStyles, switchStyles, tableStyles, tabsStyles, tagInputStyles, textStyles, textareaStyles, themeToCss, timelineStyles, toast, toastStyles, toggleStyles, tokenVar, tooltipStyles, treeViewStyles, tv, useAppShell, useAsync, useColorMode, useCommandMenuShortcut, useComponentConfig, useConfirm, useControllableState, useFieldControl, useGlyph, useIsActive, useLinkComponent, useMediaQuery, useScrolled };

package/dist/react-router.d.ts

@@ -0,0 +1,18 @@
+import { a as LinkComponentProps, n as GlyphRouter, r as IsActiveOptions } from "./glyph-context-DxGJrdvr.js";
+//#region src/integrations/react-router.d.ts
+/**
+ * React Router's `Link`, taking Glyph's `href` prop. Hash links, external URLs and `mailto:`
+ * stay plain anchors, so in-page anchors scroll and external links leave the app.
+ */
+export declare function RouterLink({ href, ...props }: LinkComponentProps): import("react").JSX.Element;
+/** Whether an in-app `href` matches a pathname, with React Router's `NavLink` semantics. */
+export declare function matchPath(href: string, pathname: string, { end }?: IsActiveOptions): boolean;
+/** Marks a link active when the current location matches it, like React Router's `NavLink`. */
+export declare function useRouterIsActive(href: string, options?: IsActiveOptions): boolean;
+/**
+ * Connects Glyph's navigation to React Router (v7 or later):
+ * `<GlyphProvider router={reactRouter}>`. Links render client-side, and Sidebar, Navbar
+ * and NavigationMenu items mark the current page automatically. Must render inside a router.
+ */
+export declare const reactRouter: GlyphRouter;
+//#endregion

package/dist/react-router.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Link, useLocation } from "react-router";
+//#region src/integrations/react-router.tsx
+const isOutsideApp = (href) => href.startsWith("#") || href.startsWith("//") || /^[a-z][a-z\d+.-]*:/i.test(href);
+/**
+* React Router's `Link`, taking Glyph's `href` prop. Hash links, external URLs and `mailto:`
+* stay plain anchors, so in-page anchors scroll and external links leave the app.
+*/
+function RouterLink({ href, ...props }) {
+	if (isOutsideApp(href)) return /* @__PURE__ */ jsx("a", {
+		href,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Link, {
+		to: href,
+		...props
+	});
+}
+const trimSlash = (path) => path.length > 1 ? path.replace(/\/+$/, "") : path;
+/** Whether an in-app `href` matches a pathname, with React Router's `NavLink` semantics. */
+function matchPath(href, pathname, { end = false } = {}) {
+	if (!href || isOutsideApp(href)) return false;
+	const target = trimSlash(new URL(href, "http://glyph.local").pathname);
+	const current = trimSlash(pathname);
+	if (end || target === "/") return current === target;
+	return current === target || current.startsWith(`${target}/`);
+}
+/** Marks a link active when the current location matches it, like React Router's `NavLink`. */
+function useRouterIsActive(href, options) {
+	const { pathname } = useLocation();
+	return matchPath(href, pathname, options);
+}
+/**
+* Connects Glyph's navigation to React Router (v7 or later):
+* `<GlyphProvider router={reactRouter}>`. Links render client-side, and Sidebar, Navbar
+* and NavigationMenu items mark the current page automatically. Must render inside a router.
+*/
+const reactRouter = {
+	Link: RouterLink,
+	useIsActive: useRouterIsActive
+};
+//#endregion
+export { RouterLink, matchPath, reactRouter, useRouterIsActive };

package/dist/{states-DR-OoDT-.js → states-IvhjBgna.js}

@@ -1,6 +1,6 @@
 "use client";
-import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
-import { c as AlertIcon, d as CheckIcon, g as InboxIcon, n as useFieldControl, o as Spinner, r as Button, v as MinusIcon } from "./field-context-anGPYXbW.js";
+import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
+import { c as AlertIcon, d as CheckIcon, g as InboxIcon, n as useFieldControl, o as Spinner, r as Button, v as MinusIcon } from "./field-context-7I-cWvvS.js";
 import { Checkbox } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/checkbox/checkbox.tsx