@glyphui/ui 0.3.0 → 0.5.0

package/dist/patterns/form/form.d.ts

@@ -0,0 +1,89 @@
+import { ButtonProps } from "../../components/button/button.js";
+import "../../components/button/index.js";
+import { FieldProps } from "../../components/field/field.js";
+import "../../components/field/index.js";
+import { ComponentProps, ReactNode } from "react";
+import { Control, ControllerRenderProps, FieldPath, FieldValues, UseFormProps, UseFormReturn } from "react-hook-form";
+import { StandardSchemaV1 } from "@standard-schema/spec";
+//#region src/patterns/form/form.d.ts
+type AnySchema = StandardSchemaV1<FieldValues, FieldValues>;
+type InputOf<S extends AnySchema> = StandardSchemaV1.InferInput<S>;
+type OutputOf<S extends AnySchema> = StandardSchemaV1.InferOutput<S>;
+export interface UseFormOptions<S extends AnySchema> extends Omit<UseFormProps<InputOf<S>, unknown, OutputOf<S>>, 'resolver'> {
+  /** Any Standard Schema validator: zod, valibot, arktype, ... */
+  schema: S;
+}
+/**
+ * react-hook-form's `useForm`, validated by a schema. Field names and submitted values are
+ * typed from the schema.
+ */
+declare function useForm$1<S extends AnySchema>({ schema, ...options }: UseFormOptions<S>): UseFormReturn<InputOf<S>, unknown, OutputOf<S>>;
+/** Field-level errors from the server, keyed by field name. `root` shows above the form. */
+export type FormErrors<TInput extends FieldValues> = Partial<Record<FieldPath<TInput> | 'root', string>>;
+export type SubmitResult<TInput extends FieldValues> = void | {
+  errors: FormErrors<TInput>;
+};
+export interface FormProps<TInput extends FieldValues, TOutput> extends Omit<ComponentProps<'form'>, 'onSubmit'> {
+  form: UseFormReturn<TInput, unknown, TOutput>;
+  /**
+   * Receives validated values. Return `{ errors }` to show server-side field errors, or throw
+   * to show a form-level error. The submit button shows a spinner until this settles.
+   */
+  onSubmit: (values: TOutput) => SubmitResult<TInput> | Promise<SubmitResult<TInput>>;
+}
+export declare function Form<TInput extends FieldValues, TOutput>({ form, onSubmit, children, ref, ...props }: FormProps<TInput, TOutput>): import("react").JSX.Element;
+export interface FormFieldProps<TInput extends FieldValues, TName extends FieldPath<TInput>> extends Omit<FieldProps, 'children' | 'error'> {
+  control: Control<TInput, unknown, any>;
+  /** Typed from the schema: a misspelled name is a compile error. */
+  name: TName;
+  /** Render the control and spread `field` onto it: `{(field) => <Input {...field} />}`. */
+  children: (field: ControllerRenderProps<TInput, TName>) => ReactNode;
+}
+/** One schema field: label, control, description and validation message, all wired. */
+export declare function FormField<TInput extends FieldValues, TName extends FieldPath<TInput>>({ control, name, children, ...fieldProps }: FormFieldProps<TInput, TName>): import("react").JSX.Element;
+export interface FormSubmitProps extends Omit<ButtonProps, 'type' | 'form'> {
+  /**
+   * The form to submit, for a button outside `<Form>` such as a Modal footer:
+   * `<FormSubmit form={form}>`. Not needed inside `<Form>`.
+   */
+  form?: UseFormReturn<any, any, any>;
+}
+/** Submit button that shows progress while the form submits. */
+export declare function FormSubmit({ form, onClick, ...props }: FormSubmitProps): import("react").JSX.Element;
+export declare const formErrorStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+  icon: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      base?: import("tailwind-variants").ClassValue;
+      icon?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  base: string;
+  icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  base: string;
+  icon: string;
+}>>;
+/** Form-level error (thrown from `onSubmit` or returned as `errors.root`). */
+export declare function FormError({ className }: {
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion
+export { useForm$1 as useForm };

package/dist/patterns/form/form.js

@@ -0,0 +1,111 @@
+"use client";
+import { AlertIcon } from "../../internal/icons.js";
+import { tv } from "../../utils/tv.js";
+import { Button } from "../../components/button/button.js";
+import { Field } from "../../components/field/field.js";
+import { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { Controller, FormProvider, useForm, useFormContext, useFormState } from "react-hook-form";
+//#region src/patterns/form/form.tsx
+/**
+* react-hook-form's `useForm`, validated by a schema. Field names and submitted values are
+* typed from the schema.
+*/
+function useForm$1({ schema, ...options }) {
+	return useForm({
+		mode: "onTouched",
+		...options,
+		resolver: standardSchemaResolver(schema)
+	});
+}
+/** The rendered `<form>` of each form, so a FormSubmit outside it can submit it. */
+const formElements = /* @__PURE__ */ new WeakMap();
+function Form({ form, onSubmit, children, ref, ...props }) {
+	const control = form.control;
+	const registerElement = useCallback((element) => {
+		if (element) formElements.set(control, element);
+		else formElements.delete(control);
+		if (typeof ref === "function") ref(element);
+		else if (ref) ref.current = element;
+	}, [control, ref]);
+	const submit = form.handleSubmit(async (values) => {
+		try {
+			const result = await onSubmit(values);
+			if (!result?.errors) return;
+			for (const [name, message] of Object.entries(result.errors)) if (message) form.setError(name, {
+				type: "server",
+				message
+			});
+		} catch (error) {
+			form.setError("root", {
+				type: "server",
+				message: error instanceof Error ? error.message : "Something went wrong. Try again."
+			});
+		}
+	});
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx("form", {
+			noValidate: true,
+			onSubmit: submit,
+			ref: registerElement,
+			...props,
+			children
+		})
+	});
+}
+/** One schema field: label, control, description and validation message, all wired. */
+function FormField({ control, name, children, ...fieldProps }) {
+	return /* @__PURE__ */ jsx(Controller, {
+		control,
+		name,
+		render: ({ field, fieldState }) => /* @__PURE__ */ jsx(Field, {
+			...fieldProps,
+			error: fieldState.error?.message,
+			children: children(field)
+		})
+	});
+}
+/** Submit button that shows progress while the form submits. */
+function FormSubmit({ form, onClick, ...props }) {
+	const context = useFormContext();
+	const control = (form ?? context)?.control;
+	if (!control) throw new Error("FormSubmit must be inside <Form> or receive form={form}, e.g. <FormSubmit form={form}> in a Modal footer.");
+	const { isSubmitting } = useFormState({ control });
+	if (!form) return /* @__PURE__ */ jsx(Button, {
+		type: "submit",
+		loading: isSubmitting,
+		onClick,
+		...props
+	});
+	const submitOutside = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) formElements.get(control)?.requestSubmit();
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		loading: isSubmitting,
+		onClick: submitOutside,
+		...props
+	});
+}
+const formErrorStyles = /* @__PURE__ */ tv({ slots: {
+	base: "flex items-start gap-2 rounded-md border border-danger/30 bg-danger/8 px-3 py-2.5 text-small text-danger-text",
+	icon: "mt-0.5 size-4 shrink-0"
+} });
+/** Form-level error (thrown from `onSubmit` or returned as `errors.root`). */
+function FormError({ className }) {
+	const { errors } = useFormState();
+	const message = errors.root?.message;
+	if (!message) return null;
+	const s = formErrorStyles();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		"data-slot": "form-error",
+		className: s.base({ class: className }),
+		children: [/* @__PURE__ */ jsx(AlertIcon, { className: s.icon() }), /* @__PURE__ */ jsx("span", { children: message })]
+	});
+}
+//#endregion
+export { Form, FormError, FormField, FormSubmit, formErrorStyles, useForm$1 as useForm };

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

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

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

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

package/dist/provider/color-mode.d.ts

@@ -0,0 +1,24 @@
+import { ColorModeOptions, ColorModePreference, getColorModeScript } from "./color-mode-script.js";
+import { ColorMode } from "@glyphui/tokens";
+import { ReactNode } from "react";
+//#region src/provider/color-mode.d.ts
+export interface ColorModeContextValue {
+  /** What the user chose. */
+  mode: ColorModePreference;
+  /** What is shown: `system` resolved against the OS setting. */
+  resolvedMode: ColorMode;
+  setMode: (mode: ColorModePreference) => void;
+}
+export declare function ColorModeProvider({ children, defaultMode, storageKey }: ColorModeOptions & {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Read and change the color mode. */
+export declare function useColorMode(): ColorModeContextValue;
+/**
+ * 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>`.
+ */
+/** `<script>` element version of `getColorModeScript` for SSR frameworks. */
+export declare function ColorModeScript(props: ColorModeOptions): import("react").JSX.Element;
+//#endregion
+export { type ColorModeOptions, type ColorModePreference, getColorModeScript };

package/dist/provider/color-mode.js

@@ -0,0 +1,87 @@
+"use client";
+import { DARK_QUERY, DEFAULT_STORAGE_KEY, getColorModeScript } from "./color-mode-script.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/provider/color-mode.tsx
+const ColorModeContext = createContext(null);
+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("(prefers-color-scheme: dark)").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 = DEFAULT_STORAGE_KEY }) {
+	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>`.
+*/
+/** `<script>` element version of `getColorModeScript` for SSR frameworks. */
+function ColorModeScript(props) {
+	return /* @__PURE__ */ jsx("script", {
+		dangerouslySetInnerHTML: { __html: getColorModeScript(props) },
+		suppressHydrationWarning: true
+	});
+}
+//#endregion
+export { ColorModeProvider, ColorModeScript, getColorModeScript, useColorMode };

package/dist/provider/glyph-context.d.ts

@@ -0,0 +1,51 @@
+import { MotionLevel, Theme } from "@glyphui/tokens";
+import { ElementType, MouseEventHandler, ReactNode } from "react";
+//#region src/provider/glyph-context.d.ts
+/** Props Glyph passes to your router's link component. */
+export interface LinkComponentProps {
+  href: string;
+  className?: string;
+  children?: ReactNode;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  'aria-current'?: 'page' | undefined;
+}
+/**
+ * Any component that renders a link from these props. Plain `'a'` by default.
+ * React Router: `({ href, ...props }) => <Link to={href} {...props} />`
+ */
+export type LinkComponent = ElementType<LinkComponentProps>;
+export interface IsActiveOptions {
+  /** Match only this exact path, not its children. Default false. */
+  end?: boolean;
+}
+/**
+ * A hook that reports whether `href` is the current location. Glyph calls it once per
+ * navigation item on every render, so it must follow the rules of hooks.
+ */
+export type UseIsActive = (href: string, options?: IsActiveOptions) => boolean;
+/** Connects Glyph's navigation components to your router. */
+export interface GlyphRouter {
+  /** Renders links client-side. */
+  Link: LinkComponent;
+  /** Marks Sidebar, Navbar and NavigationMenu items active automatically. */
+  useIsActive?: UseIsActive;
+}
+export interface GlyphContextValue {
+  theme: Theme;
+  linkComponent: LinkComponent;
+  useIsActive: UseIsActive;
+  /** Overrides the theme's motion level for the whole app. */
+  motion?: MotionLevel | undefined;
+}
+/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
+export declare function useGlyph(): GlyphContextValue;
+/** The router-aware link component configured on `GlyphProvider`. */
+export declare function useLinkComponent(): LinkComponent;
+/**
+ * Whether `href` is the current page, using the router passed to `GlyphProvider`.
+ * Returns `explicit` when it is set, so an `active` prop always wins.
+ */
+export declare function useIsActive(href: string | undefined, options?: IsActiveOptions & {
+  explicit?: boolean | undefined;
+}): boolean;
+//#endregion

package/dist/provider/glyph-context.js

@@ -0,0 +1,28 @@
+"use client";
+import { createContext, useContext } from "react";
+//#region src/provider/glyph-context.ts
+const GlyphContext = createContext(null);
+/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
+function useGlyph() {
+	const value = useContext(GlyphContext);
+	if (!value) throw new Error("useGlyph must be used inside <GlyphProvider>.");
+	return value;
+}
+/** The router-aware link component configured on `GlyphProvider`. */
+function useLinkComponent() {
+	return useContext(GlyphContext)?.linkComponent ?? "a";
+}
+const neverActive = () => false;
+/**
+* Whether `href` is the current page, using the router passed to `GlyphProvider`.
+* Returns `explicit` when it is set, so an `active` prop always wins.
+*/
+function useIsActive(href, options) {
+	const isActive = useContext(GlyphContext)?.useIsActive ?? neverActive;
+	const { explicit, ...matchOptions } = options ?? {};
+	const matched = isActive(href ?? "", matchOptions);
+	if (explicit !== void 0) return explicit;
+	return href ? matched : false;
+}
+//#endregion
+export { GlyphContext, neverActive, useGlyph, useIsActive, useLinkComponent };

package/dist/provider/glyph-provider.d.ts

@@ -0,0 +1,37 @@
+import { ToasterProps } from "../components/toast/toast.js";
+import { ColorModePreference } from "./color-mode-script.js";
+import "./color-mode.js";
+import { GlyphRouter, LinkComponent } from "./glyph-context.js";
+import { MotionLevel, Theme } from "@glyphui/tokens";
+import { ReactNode } from "react";
+//#region src/provider/glyph-provider.d.ts
+export interface GlyphProviderProps {
+  children: ReactNode;
+  /** The theme for the whole app. Defaults to the `glyph` preset. */
+  theme?: Theme;
+  /** Color mode used until the user picks one. */
+  defaultMode?: ColorModePreference;
+  /** localStorage key for the user's color mode. `null` disables persistence. */
+  storageKey?: string | null;
+  /**
+   * Your router: its link component, plus an optional `useIsActive` hook that marks the
+   * current page in Sidebar, Navbar and NavigationMenu. React Router:
+   * `import { reactRouter } from '@glyphui/ui/react-router'`.
+   */
+  router?: GlyphRouter;
+  /** Your router's link only. Prefer `router`, which also handles active items. */
+  linkComponent?: LinkComponent;
+  /**
+   * Mounts a themed `<Toaster />` so `toast()` works anywhere. `true` for defaults, or pass
+   * Toaster props (e.g. `{ position: 'top-center' }`). Off by default.
+   */
+  toaster?: boolean | ToasterProps;
+  /**
+   * Overrides the theme's motion level everywhere, e.g. `"none"` in tests or for a user
+   * setting. Visitors who ask for reduced motion never get animation either way.
+   */
+  motion?: MotionLevel;
+}
+/** Provides the theme, color mode, tooltips, `useConfirm()` and (optionally) toasts. Render once at the root. */
+export declare function GlyphProvider({ children, theme, defaultMode, storageKey, router, linkComponent, toaster, motion }: GlyphProviderProps): import("react").JSX.Element;
+//#endregion

package/dist/provider/glyph-provider.js

@@ -0,0 +1,48 @@
+"use client";
+import { GlyphContext, neverActive } from "./glyph-context.js";
+import { ConfirmProvider } from "../components/alert-dialog/confirm.js";
+import { ColorModeProvider } from "./color-mode.js";
+import { MotionRootAttribute, MotionScope } from "../motion/motion-root.js";
+import { glyph } from "../themes.js";
+import { ThemeStyle } from "./theme-style.js";
+import { Tooltip } from "radix-ui";
+import { Suspense, lazy, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/provider/glyph-provider.tsx
+const Toaster = lazy(() => import("../components/toast/toast.js").then((m) => ({ default: m.Toaster })));
+/** Provides the theme, color mode, tooltips, `useConfirm()` and (optionally) toasts. Render once at the root. */
+function GlyphProvider({ children, theme = glyph, defaultMode, storageKey, router, linkComponent, toaster = false, motion }) {
+	const Link = router?.Link ?? linkComponent ?? "a";
+	const useIsActive = router?.useIsActive ?? neverActive;
+	const value = useMemo(() => ({
+		theme,
+		linkComponent: Link,
+		useIsActive,
+		motion
+	}), [
+		theme,
+		Link,
+		useIsActive,
+		motion
+	]);
+	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(MotionRootAttribute, {}),
+				/* @__PURE__ */ jsx(MotionScope, { children: /* @__PURE__ */ jsx(Tooltip.Provider, {
+					delayDuration: 300,
+					children: /* @__PURE__ */ jsxs(ConfirmProvider, { children: [children, toaster && /* @__PURE__ */ jsx(Suspense, {
+						fallback: null,
+						children: /* @__PURE__ */ jsx(Toaster, { ...toaster === true ? {} : toaster })
+					})] })
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+export { GlyphProvider };

package/dist/provider/index.d.ts

@@ -0,0 +1,6 @@
+import { ColorModeOptions, ColorModePreference, getColorModeScript } from "./color-mode-script.js";
+import { ColorModeContextValue, ColorModeProvider, ColorModeScript, useColorMode } from "./color-mode.js";
+import { GlyphContextValue, GlyphRouter, IsActiveOptions, LinkComponent, LinkComponentProps, UseIsActive, useGlyph, useIsActive, useLinkComponent } from "./glyph-context.js";
+import { GlyphProvider, GlyphProviderProps } from "./glyph-provider.js";
+import { ThemeScope, ThemeScopeProps } from "./theme-scope.js";
+export { type ColorModeContextValue, type ColorModeOptions, type ColorModePreference, ColorModeProvider, ColorModeScript, type GlyphContextValue, GlyphProvider, type GlyphProviderProps, type GlyphRouter, type IsActiveOptions, type LinkComponent, type LinkComponentProps, ThemeScope, type ThemeScopeProps, type UseIsActive, getColorModeScript, useColorMode, useGlyph, useIsActive, useLinkComponent };

package/dist/provider/theme-scope.d.ts

@@ -0,0 +1,12 @@
+import { ColorMode, Theme } from "@glyphui/tokens";
+import { ComponentProps } from "react";
+//#region src/provider/theme-scope.d.ts
+export interface ThemeScopeProps extends ComponentProps<'div'> {
+  theme: Theme;
+  /** Force a color mode for this subtree. Follows the page by default. */
+  mode?: ColorMode;
+  asChild?: boolean;
+}
+/** Renders a subtree with a different theme, e.g. to compare themes side by side. */
+export declare function ThemeScope({ theme, mode, asChild, children, ...props }: ThemeScopeProps): import("react").JSX.Element;
+//#endregion

package/dist/provider/theme-scope.js

@@ -0,0 +1,42 @@
+"use client";
+import { GlyphContext, neverActive } from "./glyph-context.js";
+import { cn } from "../utils/cn.js";
+import { ScopedMotionConfig } from "../motion/motion-root.js";
+import { ThemeStyle } from "./theme-style.js";
+import { scopeSelector } from "@glyphui/tokens";
+import { Slot } from "radix-ui";
+import { useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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",
+		useIsActive: parent?.useIsActive ?? neverActive,
+		motion: parent?.motion
+	}), [
+		theme,
+		parent?.linkComponent,
+		parent?.useIsActive,
+		parent?.motion
+	]);
+	const Comp = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsxs(GlyphContext.Provider, {
+		value,
+		children: [/* @__PURE__ */ jsx(ThemeStyle, {
+			theme,
+			selector: scopeSelector(theme)
+		}), /* @__PURE__ */ jsx(ScopedMotionConfig, { children: /* @__PURE__ */ jsx(Comp, {
+			"data-glyph-theme": theme.name,
+			"data-mode": mode,
+			"data-motion": parent?.motion ?? theme.motion.level ?? "subtle",
+			...props,
+			className: cn("bg-background font-sans text-foreground", props.className),
+			children
+		}) })]
+	});
+}
+//#endregion
+export { ThemeScope };

package/dist/provider/theme-style.js

@@ -0,0 +1,15 @@
+"use client";
+import { themeToCss } from "@glyphui/tokens";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#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(theme, selector ? { selector } : {}), [theme, selector]);
+	return /* @__PURE__ */ jsx("style", {
+		"data-glyph-theme-style": theme.name,
+		dangerouslySetInnerHTML: { __html: css }
+	});
+}
+//#endregion
+export { ThemeStyle };

package/dist/react-router.d.ts

@@ -0,0 +1,18 @@
+import { GlyphRouter, IsActiveOptions, LinkComponentProps } from "./provider/glyph-context.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 };