@glyphui/ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1529 @@
+"use client";
+import { A as useGlyph, C as popover, D as twMergeConfig, E as tv, O as useComponentConfig, S as focusRing, T as transition, _ as Button, b as Spinner, f as MenuIcon, g as XIcon, j as useLinkComponent, k as GlyphContext, m as PanelLeftIcon, n as useFieldControl, o as CheckIcon, s as ChevronDownIcon, t as FieldContext, v as IconButton, w as themedBorder, x as spinnerStyles, y as buttonStyles } from "./field-context-B8cYheXz.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-BxPjCUxz.js";
+import { i as labelStyles, n as fieldStyles, r as Label, t as Field } from "./field-DXZD0l8w.js";
+import { defineTheme, defineTheme as defineTheme$1, presets as presets$1, scopeSelector, themeToCss, themeToCss as themeToCss$1, tokenVar } from "@glyphui/tokens";
+import { Avatar as Avatar$1, Dialog, Select as Select$1, Separator as Separator$1, Slot, Switch as Switch$1, Tabs as Tabs$1, ToggleGroup, Tooltip as Tooltip$1 } from "radix-ui";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/components/avatar/avatar.styles.ts
+const avatarStyles = tv({
+	slots: {
+		root: "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-muted align-middle",
+		image: "size-full object-cover",
+		fallback: "flex size-full items-center justify-center font-medium text-muted-foreground",
+		group: "flex items-center -space-x-2 [&>[data-slot=avatar]]:ring-2 [&>[data-slot=avatar]]:ring-background"
+	},
+	variants: { size: {
+		xs: {
+			root: "size-5",
+			fallback: "text-[0.5625rem]"
+		},
+		sm: {
+			root: "size-6",
+			fallback: "text-[0.625rem]"
+		},
+		md: {
+			root: "size-8",
+			fallback: "text-caption"
+		},
+		lg: {
+			root: "size-11",
+			fallback: "text-small"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/avatar/avatar.tsx
+function initials(name) {
+	const parts = name.trim().split(/\s+/);
+	return ((parts[0]?.[0] ?? "") + (parts.length > 1 ? parts.at(-1)?.[0] ?? "" : "")).toUpperCase();
+}
+/** A stable hue per name, so fallback avatars are distinguishable but not random. */
+function hue(name) {
+	let h = 0;
+	for (const char of name) h = (h * 31 + char.charCodeAt(0)) % 360;
+	return h;
+}
+function Avatar(inProps) {
+	const [props, slots] = useComponentConfig("Avatar", inProps);
+	const { name, src, size, className, style, ...rest } = props;
+	const s = avatarStyles({ size });
+	const tint = {
+		"--avatar-hue": hue(name),
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Avatar$1.Root, {
+		"data-slot": "avatar",
+		className: s.root({ class: [slots.root, className] }),
+		style: tint,
+		...rest,
+		children: [src && /* @__PURE__ */ jsx(Avatar$1.Image, {
+			src,
+			alt: name,
+			className: s.image({ class: slots.image })
+		}), /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+			className: s.fallback({ class: ["bg-[oklch(68%_0.11_var(--avatar-hue)/0.22)] text-foreground", slots.fallback] }),
+			"aria-label": src ? void 0 : name,
+			children: initials(name)
+		})]
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	const [, slots] = useComponentConfig("Avatar", {});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: avatarStyles().group({ class: [slots.group, className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/badge/badge.styles.ts
+const tones = {
+	neutral: {
+		soft: "bg-muted text-muted-foreground",
+		solid: "bg-secondary text-secondary-foreground",
+		outline: "border-border-strong text-foreground"
+	},
+	primary: {
+		soft: "bg-primary/14 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]",
+		solid: "bg-primary text-primary-foreground",
+		outline: "border-primary/50 text-[color-mix(in_oklab,var(--color-primary)_62%,var(--color-foreground))]"
+	},
+	success: {
+		soft: "bg-success/14 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]",
+		solid: "bg-success text-success-foreground",
+		outline: "border-success/50 text-[color-mix(in_oklab,var(--color-success)_62%,var(--color-foreground))]"
+	},
+	warning: {
+		soft: "bg-warning/16 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]",
+		solid: "bg-warning text-warning-foreground",
+		outline: "border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_62%,var(--color-foreground))]"
+	},
+	danger: {
+		soft: "bg-danger/14 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]",
+		solid: "bg-danger text-danger-foreground",
+		outline: "border-danger/50 text-[color-mix(in_oklab,var(--color-danger)_62%,var(--color-foreground))]"
+	},
+	info: {
+		soft: "bg-info/14 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]",
+		solid: "bg-info text-info-foreground",
+		outline: "border-info/50 text-[color-mix(in_oklab,var(--color-info)_62%,var(--color-foreground))]"
+	}
+};
+const badgeStyles = tv({
+	slots: {
+		base: [
+			"inline-flex h-5.5 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-pill border-transparent px-2",
+			"text-caption tabular-nums",
+			themedBorder
+		],
+		dot: "size-1.5 shrink-0 rounded-pill bg-current"
+	},
+	variants: {
+		tone: {
+			neutral: {},
+			primary: {},
+			success: {},
+			warning: {},
+			danger: {},
+			info: {}
+		},
+		variant: {
+			soft: {},
+			solid: {},
+			outline: { base: "bg-transparent" }
+		}
+	},
+	compoundVariants: Object.keys(tones).flatMap((tone) => Object.keys(tones[tone]).map((variant) => ({
+		tone,
+		variant,
+		class: { base: tones[tone][variant] }
+	}))),
+	defaultVariants: {
+		tone: "neutral",
+		variant: "soft"
+	}
+});
+//#endregion
+//#region src/components/badge/badge.tsx
+function Badge(inProps) {
+	const [props, slots] = useComponentConfig("Badge", inProps);
+	const { tone, variant, dot, asChild, className, children, ...rest } = props;
+	const s = badgeStyles({
+		tone,
+		variant
+	});
+	const Comp = asChild ? Slot.Root : "span";
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "badge",
+		"data-tone": tone ?? "neutral",
+		className: s.base({ class: [slots.base, className] }),
+		...rest,
+		children: [dot && /* @__PURE__ */ jsx("span", {
+			"data-slot": "badge-dot",
+			className: s.dot({ class: slots.dot }),
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx(Slot.Slottable, { children })]
+	});
+}
+//#endregion
+//#region src/components/card/card.styles.ts
+const cardStyles = tv({
+	slots: {
+		root: [
+			"flex flex-col rounded-lg text-foreground",
+			themedBorder,
+			transition
+		],
+		header: "flex flex-col gap-1",
+		title: "font-display text-h4 text-foreground",
+		description: "text-small text-muted-foreground",
+		body: "min-w-0",
+		footer: "mt-auto flex items-center gap-2 pt-1"
+	},
+	variants: {
+		variant: {
+			outline: { root: "border-border bg-surface" },
+			elevated: { root: "border-border bg-surface shadow-md" },
+			ghost: { root: "border-transparent bg-subtle" },
+			interactive: { root: "cursor-pointer border-border bg-surface shadow-sm hover:-translate-y-0.5 hover:border-border-strong hover:shadow-lg" }
+		},
+		padding: {
+			none: { root: "gap-0 p-0" },
+			sm: { root: "gap-3 p-4" },
+			md: { root: "gap-4 p-6" },
+			lg: { root: "gap-5 p-8" }
+		}
+	},
+	defaultVariants: {
+		variant: "elevated",
+		padding: "md"
+	}
+});
+//#endregion
+//#region src/components/card/card.tsx
+const CardContext = createContext(null);
+function useCardParts() {
+	return useContext(CardContext) ?? {
+		s: cardStyles(),
+		slots: {}
+	};
+}
+/** A surface that groups related content. Compose with CardHeader, CardTitle, CardBody, CardFooter. */
+function Card(inProps) {
+	const [props, slots] = useComponentConfig("Card", inProps);
+	const { variant, padding, asChild, className, ...rest } = props;
+	const s = cardStyles({
+		variant,
+		padding
+	});
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(CardContext.Provider, {
+		value: {
+			s,
+			slots
+		},
+		children: /* @__PURE__ */ jsx(Comp, {
+			"data-slot": "card",
+			"data-variant": variant,
+			className: s.root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function CardHeader({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function CardTitle({ asChild, className, ...props }) {
+	const { s, slots } = useCardParts();
+	const Comp = asChild ? Slot.Root : "h3";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "card-title",
+		className: s.title({ class: [slots.title, className] }),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "card-description",
+		className: s.description({ class: [slots.description, className] }),
+		...props
+	});
+}
+function CardBody({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-body",
+		className: s.body({ class: [slots.body, className] }),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	const { s, slots } = useCardParts();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/container/container.tsx
+const containerStyles = tv({
+	base: "mx-auto w-full px-4 sm:px-6",
+	variants: { size: {
+		sm: "max-w-2xl",
+		md: "max-w-3xl",
+		lg: "max-w-5xl",
+		xl: "max-w-7xl",
+		full: "max-w-none"
+	} },
+	defaultVariants: { size: "xl" }
+});
+/** Centers content at a readable max width with consistent side gutters. */
+function Container({ size, asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "container",
+		className: containerStyles({
+			size,
+			class: className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/eyebrow/eyebrow.styles.ts
+const eyebrowStyles = tv({
+	slots: { base: "font-mono text-caption uppercase tracking-[0.12em]" },
+	variants: { tone: {
+		muted: { base: "text-muted-foreground" },
+		primary: { base: "text-primary" }
+	} },
+	defaultVariants: { tone: "muted" }
+});
+//#endregion
+//#region src/components/eyebrow/eyebrow.tsx
+/** Small uppercase label that sits above a heading. */
+function Eyebrow(inProps) {
+	const [props, slots] = useComponentConfig("Eyebrow", inProps);
+	const { tone, asChild, className, ...rest } = props;
+	const s = eyebrowStyles({ tone });
+	const Comp = asChild ? Slot.Root : "p";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "eyebrow",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/heading/heading.styles.ts
+const headingStyles = tv({
+	slots: { base: "font-display text-balance text-foreground" },
+	variants: { size: {
+		display: { base: "text-display" },
+		h1: { base: "text-h1" },
+		h2: { base: "text-h2" },
+		h3: { base: "text-h3" },
+		h4: { base: "text-h4" }
+	} }
+});
+//#endregion
+//#region src/components/heading/heading.tsx
+const sizeForLevel = {
+	1: "h1",
+	2: "h2",
+	3: "h3",
+	4: "h4",
+	5: "h4",
+	6: "h4"
+};
+/** A heading whose semantic level and visual size are set independently. */
+function Heading(inProps) {
+	const [props, slots] = useComponentConfig("Heading", inProps);
+	const { level = 2, size, asChild, className, ...rest } = props;
+	const s = headingStyles({ size: size ?? sizeForLevel[level] });
+	const Comp = asChild ? Slot.Root : `h${level}`;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "heading",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/kbd/kbd.tsx
+const kbdStyles = tv({ slots: { base: "inline-flex h-5 min-w-5 items-center justify-center rounded-xs border border-border bg-muted px-1 font-mono text-[0.6875rem] font-medium text-muted-foreground shadow-xs" } });
+/** A keyboard key, e.g. `<Kbd>⌘K</Kbd>`. */
+function Kbd(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Kbd", inProps);
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: kbdStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/section/section.tsx
+const sectionStyles = tv({
+	base: "w-full",
+	variants: {
+		spacing: {
+			none: "py-0",
+			sm: "py-10 sm:py-12",
+			md: "py-16 sm:py-20",
+			lg: "py-20 sm:py-28"
+		},
+		tone: {
+			default: "",
+			subtle: "bg-subtle"
+		},
+		divided: { true: "border-t-(length:--glyph-border-width) border-border" }
+	},
+	defaultVariants: {
+		spacing: "md",
+		tone: "default"
+	}
+});
+/** A full-width page band with consistent vertical rhythm. Put a Container inside. */
+function Section({ spacing, tone, divided, asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "section";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "section",
+		className: sectionStyles({
+			spacing,
+			tone,
+			divided,
+			class: className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/segmented-control/segmented-control.tsx
+const segmentedControlStyles = tv({
+	slots: {
+		root: ["inline-flex items-center gap-0.5 rounded-md border-border bg-muted p-0.5", themedBorder],
+		item: [
+			"inline-flex h-full cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[calc(var(--radius-md)-2px)] px-3 font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-xs",
+			"disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4"
+		]
+	},
+	variants: {
+		size: {
+			sm: {
+				root: "h-(--glyph-control-sm)",
+				item: "px-2.5 text-caption"
+			},
+			md: {
+				root: "h-(--glyph-control-md)",
+				item: "text-small"
+			}
+		},
+		fullWidth: { true: {
+			root: "flex w-full",
+			item: "flex-1"
+		} }
+	},
+	defaultVariants: { size: "md" }
+});
+/**
+* Pick exactly one of a few options. `T` is inferred from `options`, so `onValueChange`
+* receives your union type, not `string`.
+*/
+function SegmentedControl(inProps) {
+	const [props, slots] = useComponentConfig("SegmentedControl", inProps);
+	const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props;
+	const s = segmentedControlStyles({
+		size,
+		fullWidth
+	});
+	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
+		type: "single",
+		"data-slot": "segmented-control",
+		...value !== void 0 && { value },
+		...defaultValue !== void 0 && { defaultValue },
+		onValueChange: (next) => next && onValueChange?.(next),
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: options.map((option) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
+			value: option.value,
+			disabled: option.disabled,
+			className: s.item({ class: slots.item }),
+			children: option.label
+		}, option.value))
+	});
+}
+//#endregion
+//#region src/components/select/select.tsx
+const selectStyles = tv({
+	slots: {
+		trigger: [
+			...fieldControl,
+			"flex cursor-pointer items-center justify-between gap-2 px-3 text-left outline-none",
+			"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20",
+			"data-placeholder:text-faint-foreground disabled:cursor-not-allowed disabled:opacity-50",
+			"[&>span]:truncate"
+		],
+		icon: "size-4 shrink-0 text-faint-foreground",
+		content: [popover, "max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width)"],
+		viewport: "p-1",
+		item: ["relative flex h-8 cursor-pointer select-none items-center gap-2 rounded-sm pr-8 pl-2 text-small outline-none", "data-highlighted:bg-muted data-disabled:pointer-events-none data-disabled:opacity-50"],
+		indicator: "absolute right-2 flex items-center text-primary [&>svg]:size-4"
+	},
+	variants: { size: {
+		sm: { trigger: "h-(--glyph-control-sm) text-small" },
+		md: { trigger: "h-(--glyph-control-md) text-small" },
+		lg: { trigger: "h-(--glyph-control-lg) text-body" }
+	} },
+	defaultVariants: { size: "md" }
+});
+/**
+* A dropdown select. `value` is typed by the `T` you use:
+* `<Select<Plan> value={plan} onValueChange={setPlan}>` only accepts `Plan` values.
+*/
+function Select(inProps) {
+	const [props, slots] = useComponentConfig("Select", useFieldControl(inProps));
+	const { size, placeholder, id, className, contentClassName, children, onValueChange, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps } = props;
+	const s = selectStyles({ size });
+	return /* @__PURE__ */ jsxs(Select$1.Root, {
+		...rootProps,
+		...onValueChange && { onValueChange: (v) => onValueChange(v) },
+		children: [/* @__PURE__ */ jsxs(Select$1.Trigger, {
+			id,
+			"data-slot": "select-trigger",
+			"aria-label": ariaLabel,
+			"aria-describedby": ariaDescribedBy,
+			"aria-invalid": ariaInvalid,
+			className: s.trigger({ class: [slots.trigger, className] }),
+			children: [/* @__PURE__ */ jsx(Select$1.Value, { placeholder }), /* @__PURE__ */ jsx(Select$1.Icon, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: s.icon({ class: slots.icon }) })
+			})]
+		}), /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Content, {
+			position: "popper",
+			sideOffset: 4,
+			"data-slot": "select-content",
+			className: s.content({ class: [slots.content, contentClassName] }),
+			children: /* @__PURE__ */ jsx(Select$1.Viewport, {
+				className: s.viewport({ class: slots.viewport }),
+				children
+			})
+		}) })]
+	});
+}
+function SelectItem({ className, children, ...props }) {
+	const [, slots] = useComponentConfig("Select", {});
+	const s = selectStyles();
+	return /* @__PURE__ */ jsxs(Select$1.Item, {
+		"data-slot": "select-item",
+		className: s.item({ class: [slots.item, className] }),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
+			className: s.indicator({ class: slots.indicator }),
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})]
+	});
+}
+//#endregion
+//#region src/components/separator/separator.tsx
+const separatorStyles = tv({
+	slots: { base: "shrink-0 bg-border" },
+	variants: { orientation: {
+		horizontal: { base: "h-px w-full" },
+		vertical: { base: "h-full w-px self-stretch" }
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+function Separator(inProps) {
+	const [props, slots] = useComponentConfig("Separator", inProps);
+	const { orientation = "horizontal", decorative = true, className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Separator$1.Root, {
+		"data-slot": "separator",
+		orientation,
+		decorative,
+		className: separatorStyles({ orientation }).base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/stack/stack.tsx
+const stackStyles = tv({
+	base: "flex",
+	variants: {
+		direction: {
+			column: "flex-col",
+			row: "flex-row"
+		},
+		gap: {
+			0: "gap-0",
+			1: "gap-1",
+			2: "gap-2",
+			3: "gap-3",
+			4: "gap-4",
+			5: "gap-5",
+			6: "gap-6",
+			8: "gap-8",
+			10: "gap-10",
+			12: "gap-12"
+		},
+		align: {
+			start: "items-start",
+			center: "items-center",
+			end: "items-end",
+			stretch: "items-stretch",
+			baseline: "items-baseline"
+		},
+		justify: {
+			start: "justify-start",
+			center: "justify-center",
+			end: "justify-end",
+			between: "justify-between"
+		},
+		wrap: { true: "flex-wrap" }
+	},
+	defaultVariants: {
+		direction: "column",
+		gap: 4
+	}
+});
+/** Flex layout with spacing from the scale. `direction="row"` for horizontal. */
+function Stack({ direction, gap, align, justify, wrap, asChild, className, ...props }) {
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "stack",
+		className: stackStyles({
+			direction,
+			gap,
+			align,
+			justify,
+			wrap,
+			class: className
+		}),
+		...props
+	});
+}
+//#endregion
+//#region src/components/switch/switch.tsx
+const switchStyles = tv({
+	slots: {
+		root: [
+			"peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-transparent bg-input p-px",
+			themedBorder,
+			transition,
+			focusRing,
+			"data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50"
+		],
+		thumb: "pointer-events-none block rounded-pill bg-white shadow-sm transition-transform duration-(--glyph-duration-base) ease-emphasized data-[state=unchecked]:translate-x-0"
+	},
+	variants: { size: {
+		sm: {
+			root: "h-4 w-7",
+			thumb: "size-3 data-[state=checked]:translate-x-3"
+		},
+		md: {
+			root: "h-5 w-9",
+			thumb: "size-4 data-[state=checked]:translate-x-4"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+function Switch(inProps) {
+	const [{ size, className, ...rest }, slots] = useComponentConfig("Switch", useFieldControl(inProps));
+	const s = switchStyles({ size });
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-slot": "switch",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: s.thumb({ class: slots.thumb }) })
+	});
+}
+//#endregion
+//#region src/components/tabs/tabs.tsx
+const tabsStyles = tv({
+	slots: {
+		root: "flex flex-col gap-4",
+		list: "flex items-center",
+		trigger: [
+			"relative inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-small font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50",
+			"[&>svg]:size-4"
+		],
+		content: "outline-none"
+	},
+	variants: { variant: {
+		underline: {
+			list: "gap-5 border-b border-border",
+			trigger: "h-9 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-pill after:bg-transparent data-[state=active]:after:bg-foreground"
+		},
+		pill: {
+			list: ["inline-flex w-fit gap-0.5 rounded-md border-border bg-muted p-0.5", themedBorder],
+			trigger: "h-7 rounded-[calc(var(--radius-md)-2px)] px-3 data-[state=active]:bg-raised data-[state=active]:shadow-xs"
+		}
+	} },
+	defaultVariants: { variant: "underline" }
+});
+const TabsContext = createContext({});
+function Tabs(inProps) {
+	const [{ variant, className, ...rest }, slots] = useComponentConfig("Tabs", inProps);
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: { variant },
+		children: /* @__PURE__ */ jsx(Tabs$1.Root, {
+			"data-slot": "tabs",
+			className: tabsStyles({ variant }).root({ class: [slots.root, className] }),
+			...rest
+		})
+	});
+}
+function useTabsParts() {
+	const { variant } = useContext(TabsContext);
+	const [, slots] = useComponentConfig("Tabs", {});
+	return {
+		s: tabsStyles({ variant }),
+		slots
+	};
+}
+function TabsList({ className, ...props }) {
+	const { s, slots } = useTabsParts();
+	return /* @__PURE__ */ jsx(Tabs$1.List, {
+		"data-slot": "tabs-list",
+		className: s.list({ class: [slots.list, className] }),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	const { s, slots } = useTabsParts();
+	return /* @__PURE__ */ jsx(Tabs$1.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: s.trigger({ class: [slots.trigger, className] }),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	const { s, slots } = useTabsParts();
+	return /* @__PURE__ */ jsx(Tabs$1.Content, {
+		"data-slot": "tabs-content",
+		className: s.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+//#endregion
+//#region src/components/text/text.styles.ts
+const textStyles = tv({
+	slots: { base: "" },
+	variants: {
+		size: {
+			lead: { base: "text-lead" },
+			body: { base: "text-body" },
+			small: { base: "text-small" },
+			caption: { base: "text-caption" }
+		},
+		tone: {
+			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" }
+		},
+		weight: {
+			regular: { base: "font-normal" },
+			medium: { base: "font-medium" },
+			semibold: { base: "font-semibold" }
+		},
+		mono: { true: { base: "font-mono" } },
+		truncate: { true: { base: "truncate" } }
+	},
+	defaultVariants: {
+		size: "body",
+		tone: "default"
+	}
+});
+//#endregion
+//#region src/components/text/text.tsx
+function Text(inProps) {
+	const [props, slots] = useComponentConfig("Text", inProps);
+	const { size, tone, weight, mono, truncate, asChild, className, ...rest } = props;
+	const s = textStyles({
+		size,
+		tone,
+		weight,
+		mono,
+		truncate
+	});
+	const Comp = asChild ? Slot.Root : "p";
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "text",
+		className: s.base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/textarea/textarea.tsx
+const textareaStyles = tv({ slots: { base: [
+	...fieldControl,
+	"field-sizing-content min-h-20 resize-y rounded-[min(var(--radius-md),var(--radius-lg))] px-3 py-2 text-small",
+	"outline-none placeholder:text-faint-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20",
+	"disabled:cursor-not-allowed disabled:opacity-50"
+] } });
+function Textarea(inProps) {
+	const [{ className, ...rest }, slots] = useComponentConfig("Textarea", useFieldControl(inProps));
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: textareaStyles().base({ class: [slots.base, className] }),
+		...rest
+	});
+}
+//#endregion
+//#region src/components/tooltip/tooltip.tsx
+const tooltipStyles = tv({ slots: { content: "z-50 max-w-xs animate-pop-in rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md" } });
+/** A short hint on hover or focus. The child must be focusable (a button or link). */
+function Tooltip(inProps) {
+	const [props, slots] = useComponentConfig("Tooltip", inProps);
+	const { content, children, disabled, delayDuration, className, sideOffset = 6, ...rest } = props;
+	if (disabled) return children;
+	return /* @__PURE__ */ jsxs(Tooltip$1.Root, {
+		...delayDuration !== void 0 && { delayDuration },
+		children: [/* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Content, {
+			"data-slot": "tooltip",
+			sideOffset,
+			className: tooltipStyles().content({ class: [slots.content, className] }),
+			...rest,
+			children: content
+		}) })]
+	});
+}
+//#endregion
+//#region src/hooks/use-controllable-state.ts
+/** State that can be controlled by a parent (`value` + `onChange`) or left uncontrolled. */
+function useControllableState({ value, defaultValue, onChange }) {
+	const [internal, setInternal] = useState(defaultValue);
+	const isControlled = value !== void 0;
+	const current = isControlled ? value : internal;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	return [current, useCallback((next) => {
+		const resolved = typeof next === "function" ? next(current) : next;
+		if (!isControlled) setInternal(resolved);
+		onChangeRef.current?.(resolved);
+	}, [current, isControlled])];
+}
+//#endregion
+//#region src/hooks/use-media-query.ts
+/** Subscribes to a CSS media query. Returns `fallback` during SSR. */
+function useMediaQuery(query, fallback = false) {
+	return useSyncExternalStore((onChange) => {
+		const list = window.matchMedia(query);
+		list.addEventListener("change", onChange);
+		return () => list.removeEventListener("change", onChange);
+	}, () => window.matchMedia(query).matches, () => fallback);
+}
+//#endregion
+//#region src/hooks/use-scrolled.ts
+/** True once the window has scrolled past `threshold` pixels. */
+function useScrolled(threshold = 8, enabled = true) {
+	const [scrolled, setScrolled] = useState(false);
+	useEffect(() => {
+		if (!enabled) return;
+		const update = () => setScrolled(window.scrollY > threshold);
+		update();
+		window.addEventListener("scroll", update, { passive: true });
+		return () => window.removeEventListener("scroll", update);
+	}, [threshold, enabled]);
+	return scrolled;
+}
+//#endregion
+//#region src/patterns/app-shell/app-shell.styles.ts
+const appShellStyles = tv({
+	slots: {
+		root: "flex w-full bg-background",
+		sidebar: "hidden shrink-0 md:flex",
+		main: "flex min-w-0 flex-1 flex-col",
+		mobileBar: ["flex h-14 shrink-0 items-center gap-2 border-b-border px-3 md:hidden", "border-b-(length:--glyph-border-width)"],
+		overlay: "fixed inset-0 z-50 animate-fade-in bg-overlay",
+		drawer: "fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] animate-slide-in-left shadow-lg outline-none [&>[data-slot=sidebar]]:w-full"
+	},
+	variants: { layout: {
+		page: {
+			root: "min-h-dvh",
+			sidebar: "sticky top-0 h-dvh",
+			mobileBar: "sticky top-0 z-30 bg-background/80 backdrop-blur-xl"
+		},
+		embedded: {
+			root: "h-full min-h-0 overflow-hidden",
+			sidebar: "h-full",
+			main: "overflow-y-auto"
+		}
+	} },
+	defaultVariants: { layout: "page" }
+});
+const sidebarStyles = tv({ slots: {
+	root: [
+		"group/sidebar flex h-full w-60 flex-col overflow-hidden border-r-border bg-subtle",
+		"border-r-(length:--glyph-border-width)",
+		"transition-[width] duration-(--glyph-duration-base) ease-standard data-[collapsed=true]:w-15"
+	],
+	header: "flex h-14 shrink-0 items-center gap-2 px-3",
+	content: "flex flex-1 flex-col gap-5 overflow-y-auto overflow-x-hidden px-3 py-3",
+	section: "flex flex-col gap-0.5",
+	sectionLabel: "mb-1 truncate px-2 font-mono text-caption uppercase tracking-[0.1em] text-faint-foreground group-data-[collapsed=true]/sidebar:sr-only",
+	item: [
+		"relative flex h-8 w-full shrink-0 cursor-pointer items-center gap-2.5 rounded-sm px-2 text-small font-medium text-muted-foreground",
+		transition,
+		focusRing,
+		"hover:bg-muted hover:text-foreground",
+		"aria-[current=page]:bg-muted aria-[current=page]:text-foreground",
+		"before:absolute before:inset-y-1.5 before:-left-3 before:w-0.5 before:rounded-r-pill before:bg-transparent aria-[current=page]:before:bg-primary",
+		"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",
+	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)"]
+} });
+const navbarStyles = tv({
+	slots: {
+		root: [
+			"top-0 z-40 w-full border-b-transparent",
+			"border-b-(length:--glyph-border-width)",
+			"transition-[background-color,border-color,backdrop-filter] duration-(--glyph-duration-base) ease-standard"
+		],
+		inner: "flex h-16 items-center gap-6",
+		brand: "flex shrink-0 items-center gap-2 font-display text-h4 text-foreground",
+		links: "hidden items-center gap-1 md:flex",
+		link: [
+			"rounded-sm px-3 py-1.5 text-small font-medium text-muted-foreground",
+			transition,
+			focusRing,
+			"hover:text-foreground aria-[current=page]:text-foreground"
+		],
+		actions: "ml-auto hidden items-center gap-2 md:flex",
+		menuButton: "ml-auto md:hidden",
+		overlay: "fixed inset-0 z-50 animate-fade-in bg-overlay",
+		panel: ["fixed inset-x-0 top-0 z-50 max-h-dvh overflow-y-auto border-b-border bg-background px-4 pb-6 shadow-lg outline-none animate-slide-in-top", "border-b-(length:--glyph-border-width)"],
+		panelHeader: "flex h-16 items-center justify-between",
+		panelLinks: "flex flex-col gap-1",
+		panelLink: [
+			"rounded-md px-3 py-2.5 text-body font-medium text-muted-foreground",
+			focusRing,
+			"hover:bg-muted hover:text-foreground aria-[current=page]:bg-muted aria-[current=page]:text-foreground"
+		],
+		panelActions: ["mt-4 flex flex-col gap-2 border-t-border pt-4", "border-t-(length:--glyph-border-width)"]
+	},
+	variants: {
+		sticky: {
+			true: { root: "sticky" },
+			false: { root: "relative" }
+		},
+		blur: {
+			true: { root: "data-[scrolled=true]:border-b-border data-[scrolled=true]:bg-background/72 data-[scrolled=true]:backdrop-blur-xl data-[scrolled=true]:backdrop-saturate-150" },
+			false: { root: "border-b-border bg-background" }
+		}
+	},
+	defaultVariants: {
+		sticky: true,
+		blur: true
+	}
+});
+const pageHeaderStyles = tv({ slots: {
+	root: ["flex flex-col gap-4 border-b-border pb-5 sm:flex-row sm:items-end sm:justify-between", "border-b-(length:--glyph-border-width)"],
+	text: "grid min-w-0 gap-1",
+	eyebrow: "font-mono text-caption uppercase tracking-[0.12em] text-faint-foreground",
+	title: "font-display text-h3 text-foreground",
+	description: "max-w-2xl text-small text-muted-foreground",
+	actions: "flex shrink-0 flex-wrap items-center gap-2"
+} });
+//#endregion
+//#region src/patterns/app-shell/app-shell-context.ts
+const AppShellContext = createContext(null);
+/** Sidebar state. Works outside an AppShell too (always expanded). */
+function useAppShell() {
+	return useContext(AppShellContext) ?? {
+		collapsed: false,
+		setCollapsed: () => {},
+		mobileOpen: false,
+		setMobileOpen: () => {},
+		inDrawer: false
+	};
+}
+//#endregion
+//#region src/patterns/app-shell/sidebar.tsx
+const s = sidebarStyles();
+function useSlots() {
+	return useComponentConfig("Sidebar", {})[1];
+}
+/** Navigation sidebar. Place inside `AppShell`'s `sidebar` prop. */
+function Sidebar({ className, ...props }) {
+	const { collapsed } = useAppShell();
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("aside", {
+		"data-slot": "sidebar",
+		"data-collapsed": collapsed,
+		className: s.root({ class: [slots.root, className] }),
+		...props
+	});
+}
+function SidebarHeader({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		className: s.header({ class: [slots.header, className] }),
+		...props
+	});
+}
+function SidebarContent({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "sidebar-content",
+		"aria-label": "Main",
+		className: s.content({ class: [slots.content, className] }),
+		...props
+	});
+}
+function SidebarSection({ label, className, children, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-section",
+		className: s.section({ class: [slots.section, className] }),
+		...props,
+		children: [label && /* @__PURE__ */ jsx("p", {
+			className: s.sectionLabel({ class: slots.sectionLabel }),
+			children: label
+		}), children]
+	});
+}
+function SidebarItem({ href, icon, badge, active, onClick, className, children }) {
+	const { collapsed, inDrawer, setMobileOpen } = useAppShell();
+	const Link = useLinkComponent();
+	const slots = useSlots();
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (inDrawer) setMobileOpen(false);
+	};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		icon && /* @__PURE__ */ jsx("span", {
+			className: s.itemIcon({ class: slots.itemIcon }),
+			"aria-hidden": "true",
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: s.itemLabel({ class: slots.itemLabel }),
+			children
+		}),
+		badge !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: s.itemBadge({ class: slots.itemBadge }),
+			children: badge
+		})
+	] });
+	const shared = {
+		"data-slot": "sidebar-item",
+		"aria-current": active ? "page" : void 0,
+		className: s.item({ class: [slots.item, className] })
+	};
+	const element = href ? /* @__PURE__ */ jsx(Link, {
+		href,
+		onClick: handleClick,
+		...shared,
+		children: content
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: handleClick,
+		...shared,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: children,
+		side: "right",
+		disabled: !collapsed,
+		children: element
+	});
+}
+function SidebarFooter({ className, ...props }) {
+	const slots = useSlots();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		className: s.footer({ class: [slots.footer, className] }),
+		...props
+	});
+}
+/** Collapses the sidebar on desktop; opens the navigation drawer on mobile. */
+function SidebarTrigger(props) {
+	const { collapsed, setCollapsed, setMobileOpen, inDrawer } = useAppShell();
+	const desktop = useMediaQuery("(min-width: 48rem)");
+	if (inDrawer) return null;
+	return /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(PanelLeftIcon, {}),
+		"aria-label": desktop ? collapsed ? "Expand sidebar" : "Collapse sidebar" : "Open navigation",
+		size: "sm",
+		onClick: () => desktop ? setCollapsed(!collapsed) : setMobileOpen(true),
+		...props
+	});
+}
+//#endregion
+//#region src/patterns/app-shell/app-shell.tsx
+/**
+* App layout: sidebar plus main content. Handles desktop collapse to an icon rail,
+* the mobile drawer (focus-trapped, closes on navigation), and the mobile top bar.
+*
+* `layout="page"` fills the viewport; `layout="embedded"` fills its parent.
+*/
+function AppShell(inProps) {
+	const [props, slots] = useComponentConfig("AppShell", inProps);
+	const { sidebar, children, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, mobileBrand, layout, className, ...rest } = props;
+	const [collapsed, setCollapsed] = useControllableState({
+		value: collapsedProp,
+		defaultValue: defaultCollapsed,
+		onChange: onCollapsedChange
+	});
+	const [mobileOpen, setMobileOpen] = useState(false);
+	const s = appShellStyles({ layout });
+	const desktop = useMemo(() => ({
+		collapsed,
+		setCollapsed,
+		mobileOpen,
+		setMobileOpen,
+		inDrawer: false
+	}), [
+		collapsed,
+		setCollapsed,
+		mobileOpen
+	]);
+	const drawer = useMemo(() => ({
+		...desktop,
+		collapsed: false,
+		inDrawer: true
+	}), [desktop]);
+	return /* @__PURE__ */ jsx(AppShellContext.Provider, {
+		value: desktop,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "app-shell",
+			className: s.root({ class: [slots.root, className] }),
+			...rest,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: s.sidebar({ class: slots.sidebar }),
+					children: sidebar
+				}),
+				/* @__PURE__ */ jsx(Dialog.Root, {
+					open: mobileOpen,
+					onOpenChange: setMobileOpen,
+					children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog.Content, {
+						className: s.drawer({ class: slots.drawer }),
+						"aria-describedby": void 0,
+						children: [/* @__PURE__ */ jsx(Dialog.Title, {
+							className: "sr-only",
+							children: "Navigation"
+						}), /* @__PURE__ */ jsx(AppShellContext.Provider, {
+							value: drawer,
+							children: sidebar
+						})]
+					})] })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					"data-slot": "app-shell-main",
+					className: s.main({ class: slots.main }),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: s.mobileBar({ class: slots.mobileBar }),
+						children: [/* @__PURE__ */ jsx(SidebarTrigger, {}), mobileBrand]
+					}), children]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/patterns/app-shell/navbar.tsx
+/**
+* Site header from data: brand, links, actions. Responsive out of the box: links collapse
+* into a focus-trapped menu panel on small screens.
+*/
+function Navbar(inProps) {
+	const [props, slots] = useComponentConfig("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
+	});
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "navbar",
+		"data-scrolled": scrolled,
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: /* @__PURE__ */ jsxs(Container, {
+			size: containerSize,
+			className: s.inner({ class: slots.inner }),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: s.brand({ class: slots.brand }),
+					children: brand
+				}),
+				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
+					}, link.href))
+				}),
+				actions && /* @__PURE__ */ jsx("div", {
+					className: s.actions({ class: slots.actions }),
+					children: actions
+				}),
+				/* @__PURE__ */ jsxs(Dialog.Root, {
+					open,
+					onOpenChange: setOpen,
+					children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: /* @__PURE__ */ jsx(MenuIcon, {}),
+							"aria-label": "Open menu",
+							className: s.menuButton({ class: slots.menuButton })
+						})
+					}), /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: s.overlay({ class: slots.overlay }) }), /* @__PURE__ */ jsxs(Dialog.Content, {
+						className: s.panel({ class: slots.panel }),
+						"aria-describedby": void 0,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: s.panelHeader({ class: slots.panelHeader }),
+								children: [/* @__PURE__ */ jsx(Dialog.Title, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx("div", {
+										className: s.brand({ class: slots.brand }),
+										children: brand
+									})
+								}), /* @__PURE__ */ jsx(Dialog.Close, {
+									asChild: true,
+									children: /* @__PURE__ */ jsx(IconButton, {
+										icon: /* @__PURE__ */ jsx(XIcon, {}),
+										"aria-label": "Close menu"
+									})
+								})]
+							}),
+							/* @__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,
+									className: s.panelLink({ class: slots.panelLink }),
+									onClick: () => setOpen(false),
+									children: link.label
+								}, link.href))
+							}),
+							actions && /* @__PURE__ */ jsx("div", {
+								className: s.panelActions({ class: slots.panelActions }),
+								children: actions
+							})
+						]
+					})] })]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/patterns/app-shell/page-header.tsx
+/** Title block at the top of a page: optional eyebrow, title, description, actions. */
+function PageHeader(inProps) {
+	const [props, slots] = useComponentConfig("PageHeader", inProps);
+	const { title, description, eyebrow, actions, className, ...rest } = props;
+	const s = pageHeaderStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "page-header",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: s.text({ class: slots.text }),
+			children: [
+				eyebrow && /* @__PURE__ */ jsx("p", {
+					className: s.eyebrow({ class: slots.eyebrow }),
+					children: eyebrow
+				}),
+				/* @__PURE__ */ jsx("h1", {
+					className: s.title({ class: slots.title }),
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: s.description({ class: slots.description }),
+					children: description
+				})
+			]
+		}), actions && /* @__PURE__ */ jsx("div", {
+			className: s.actions({ class: slots.actions }),
+			children: actions
+		})]
+	});
+}
+//#endregion
+//#region src/patterns/async/async.tsx
+const defaultIsEmpty = (data) => Array.isArray(data) && data.length === 0;
+/**
+* Renders the right UI for every state of an async result: loading, error (with retry),
+* empty, or your content. One convention for every data-driven screen.
+*
+* ```tsx
+* <Async result={useQuery(...)} empty={<EmptyState title="No invoices yet" />}>
+*   {(invoices) => <InvoiceList invoices={invoices} />}
+* </Async>
+* ```
+*/
+function Async({ result, children, isEmpty = defaultIsEmpty, loading, empty, error }) {
+	if (result.status === "pending") return loading ?? /* @__PURE__ */ jsx(LoadingState, {});
+	if (result.status === "error") {
+		if (typeof error === "function") return error(result.error, result.refetch);
+		return error ?? /* @__PURE__ */ jsx(ErrorState, {
+			error: result.error,
+			onRetry: result.refetch
+		});
+	}
+	const data = result.data;
+	if (data === void 0 || data === null || isEmpty(data)) return empty ?? /* @__PURE__ */ jsx(EmptyState, { title: "Nothing here yet" });
+	return children(data);
+}
+/**
+* Runs an async function and tracks its state as an `AsyncResult`. Re-runs when `deps`
+* change; stale responses are ignored. For caching and deduping, use TanStack Query.
+*/
+function useAsync(fn, deps) {
+	const [state, setState] = useState({ status: "pending" });
+	const [run, setRun] = useState(0);
+	useEffect(() => {
+		let active = true;
+		setState((prev) => ({
+			...prev,
+			status: "pending"
+		}));
+		fn().then((data) => active && setState({
+			status: "success",
+			data
+		}), (error) => active && setState({
+			status: "error",
+			error
+		}));
+		return () => {
+			active = false;
+		};
+	}, [...deps, run]);
+	const refetch = useCallback(() => setRun((n) => n + 1), []);
+	return {
+		...state,
+		refetch
+	};
+}
+//#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;
+	try {
+		const value = window.localStorage.getItem(storageKey);
+		return value === "light" || value === "dark" || value === "system" ? value : null;
+	} catch {
+		return null;
+	}
+}
+function systemMode() {
+	return isBrowser && window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+}
+/** Disables transitions for one frame so a mode switch doesn't animate every color. */
+function suppressTransitions() {
+	const style = document.createElement("style");
+	style.textContent = "*,*::before,*::after{transition:none!important}";
+	document.head.appendChild(style);
+	return () => {
+		window.getComputedStyle(document.body);
+		requestAnimationFrame(() => style.remove());
+	};
+}
+function ColorModeProvider({ children, defaultMode = "system", storageKey = "glyph-mode" }) {
+	const [mode, setModeState] = useState(() => readStoredMode(storageKey) ?? defaultMode);
+	const [system, setSystem] = useState(systemMode);
+	useEffect(() => {
+		const query = window.matchMedia(DARK_QUERY);
+		const onChange = () => setSystem(query.matches ? "dark" : "light");
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}, []);
+	const resolvedMode = mode === "system" ? system : mode;
+	useEffect(() => {
+		const root = document.documentElement;
+		if (root.dataset.mode === resolvedMode) return;
+		const restore = suppressTransitions();
+		root.dataset.mode = resolvedMode;
+		root.style.colorScheme = resolvedMode;
+		restore();
+	}, [resolvedMode]);
+	const setMode = useCallback((next) => {
+		setModeState(next);
+		if (!storageKey) return;
+		try {
+			window.localStorage.setItem(storageKey, next);
+		} catch {}
+	}, [storageKey]);
+	const value = useMemo(() => ({
+		mode,
+		resolvedMode,
+		setMode
+	}), [
+		mode,
+		resolvedMode,
+		setMode
+	]);
+	return /* @__PURE__ */ jsx(ColorModeContext.Provider, {
+		value,
+		children
+	});
+}
+/** Read and change the color mode. */
+function useColorMode() {
+	const value = useContext(ColorModeContext);
+	if (!value) throw new Error("useColorMode must be used inside <GlyphProvider>.");
+	return value;
+}
+/**
+* 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", {
+		dangerouslySetInnerHTML: { __html: getColorModeScript(props) },
+		suppressHydrationWarning: true
+	});
+}
+//#endregion
+//#region src/themes.ts
+/**
+* Built-in themes: the token presets from @glyphui/tokens plus per-component recipes.
+* Extend any of them in your theme file: `defineTheme({ name: 'acme', extends: presets.glyph, ... })`.
+*/
+/** Precise, dark-first, one electric-blue accent, layered soft shadows, Geist. */
+const glyph = presets$1.glyph;
+/** Zero radius, heavy borders, hard offset shadows, loud color. */
+const brutalist = defineTheme$1({
+	name: "brutalist",
+	extends: presets$1.brutalist,
+	components: {
+		Button: { className: { base: "font-bold uppercase tracking-wide shadow-sm hover:-translate-x-px hover:-translate-y-px hover:shadow-md active:translate-x-[3px] active:translate-y-[3px] active:shadow-none" } },
+		Badge: { className: { base: "font-bold uppercase" } },
+		Card: { defaultVariants: { variant: "elevated" } },
+		Heading: { className: { base: "uppercase" } },
+		Input: { className: { root: "shadow-sm focus-within:ring-0 focus-within:shadow-md" } }
+	}
+});
+/** Serif display type, warm paper neutrals, deep green ink, hairlines instead of shadows. */
+const editorial = defineTheme$1({
+	name: "editorial",
+	extends: presets$1.editorial,
+	components: {
+		Card: { defaultVariants: { variant: "outline" } },
+		Eyebrow: { className: { base: "font-sans tracking-[0.18em]" } },
+		Button: { className: { base: "tracking-wide" } }
+	}
+});
+/** Pill shapes, lavender and mint, chunky rounded type, springy motion. */
+const playful = defineTheme$1({
+	name: "playful",
+	extends: presets$1.playful,
+	components: {
+		Button: { className: { base: "font-bold hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.97]" } },
+		Card: { defaultVariants: { variant: "elevated" } },
+		Badge: { className: { base: "font-semibold" } }
+	}
+});
+const presets = {
+	glyph,
+	brutalist,
+	editorial,
+	playful
+};
+//#endregion
+//#region src/provider/theme-style.tsx
+/** Renders a theme's CSS variables. Re-renders replace the previous rules in place. */
+function ThemeStyle({ theme, selector }) {
+	const css = useMemo(() => themeToCss$1(theme, selector ? { selector } : {}), [theme, selector]);
+	return /* @__PURE__ */ jsx("style", {
+		"data-glyph-theme-style": theme.name,
+		dangerouslySetInnerHTML: { __html: css }
+	});
+}
+//#endregion
+//#region src/provider/glyph-provider.tsx
+/** Provides the theme, color mode and app settings. Render once at the root. */
+function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, linkComponent = "a" }) {
+	const value = useMemo(() => ({
+		theme,
+		linkComponent
+	}), [theme, linkComponent]);
+	return /* @__PURE__ */ jsx(ColorModeProvider, {
+		...defaultMode !== void 0 && { defaultMode },
+		...storageKey !== void 0 && { storageKey },
+		children: /* @__PURE__ */ jsxs(GlyphContext.Provider, {
+			value,
+			children: [/* @__PURE__ */ jsx(ThemeStyle, { theme }), /* @__PURE__ */ jsx(Tooltip$1.Provider, {
+				delayDuration: 300,
+				children
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/utils/cn.ts
+const twMerge = extendTailwindMerge(twMergeConfig);
+/** Joins class names and resolves Tailwind conflicts (last one wins). */
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+//#region src/provider/theme-scope.tsx
+/** Renders a subtree with a different theme, e.g. to compare themes side by side. */
+function ThemeScope({ theme, mode, asChild, children, ...props }) {
+	const parent = useContext(GlyphContext);
+	const value = useMemo(() => ({
+		theme,
+		linkComponent: parent?.linkComponent ?? "a"
+	}), [theme, parent?.linkComponent]);
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsxs(GlyphContext.Provider, {
+		value,
+		children: [/* @__PURE__ */ jsx(ThemeStyle, {
+			theme,
+			selector: scopeSelector(theme)
+		}), /* @__PURE__ */ jsx(Comp, {
+			"data-glyph-theme": theme.name,
+			"data-mode": mode,
+			...props,
+			className: cn("bg-background font-sans text-foreground", props.className),
+			children
+		})]
+	});
+}
+//#endregion
+export { AppShell, Async, Avatar, AvatarGroup, Badge, Button, Card, CardBody, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorModeProvider, ColorModeScript, Container, EmptyState, ErrorState, Eyebrow, Field, FieldContext, GlyphProvider, Heading, IconButton, Input, Kbd, Label, LoadingState, Navbar, PageHeader, Section, SegmentedControl, Select, SelectItem, Separator, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, SidebarTrigger, Skeleton, Spinner, Stack, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemeScope, Tooltip, appShellStyles, avatarStyles, badgeStyles, brutalist, buttonStyles, cardStyles, checkboxStyles, cn, containerStyles, defineTheme, editorial, eyebrowStyles, fieldControl, fieldStyles, getColorModeScript, glyph, headingStyles, inputStyles, kbdStyles, labelStyles, navbarStyles, pageHeaderStyles, playful, presets, sectionStyles, segmentedControlStyles, selectStyles, separatorStyles, sidebarStyles, skeletonStyles, spinnerStyles, stackStyles, stateStyles, switchStyles, tableStyles, tabsStyles, textStyles, textareaStyles, themeToCss, tokenVar, tooltipStyles, tv, useAppShell, useAsync, useColorMode, useComponentConfig, useControllableState, useFieldControl, useGlyph, useLinkComponent, useMediaQuery, useScrolled };