@glyphui/ui 0.3.0 → 0.4.0

package/README.md

@@ -8,8 +8,10 @@ React components on Tailwind CSS v4 that take their whole look from **one typed
 
 ```sh
 npm install @glyphui/ui
-# optional: the form and data-table patterns
-npm install react-hook-form @hookform/resolvers zod @tanstack/react-table
+# optional: forms and data tables (TanStack Table version 8)
+npm install react-hook-form @hookform/resolvers zod @tanstack/react-table@8
+# optional: charts from @glyphui/ui/chart
+npm install recharts
 ```
 
 Requires React 19 and Tailwind CSS 4.1 or later.
@@ -18,22 +20,39 @@ Requires React 19 and Tailwind CSS 4.1 or later.
 
 ```css
 /* index.css */
+@import "@glyphui/ui/fonts.css";      /* Geist, used by the default theme */
 @import "tailwindcss";
 @import "@glyphui/ui/styles.css";
+@import "@glyphui/blocks/styles.css"; /* only with @glyphui/blocks */
 ```
 
 ```tsx
 // main.tsx
 import { GlyphProvider, presets } from '@glyphui/ui'
+import { reactRouter } from '@glyphui/ui/react-router'
 
 createRoot(document.getElementById('root')!).render(
-  <GlyphProvider theme={presets.glyph} defaultMode="system">
-    <App />
-  </GlyphProvider>,
+  <BrowserRouter>
+    <GlyphProvider theme={presets.glyph} defaultMode="system" router={reactRouter} toaster>
+      <App />
+    </GlyphProvider>
+  </BrowserRouter>,
 )
 ```
 
-To avoid a light flash for dark-mode visitors, run `getColorModeScript()` in `<head>`, or render `<ColorModeScript />` with an SSR framework.
+- `router` (optional) makes Glyph's links client-side and marks the current Sidebar, Navbar and NavigationMenu item automatically. For other routers, pass `{ Link, useIsActive }`; the [getting-started guide](https://khalmohak.github.io/glyph/getting-started) has TanStack Router and Next.js versions.
+- `toaster` mounts the toast container, so `toast.success('Saved')` works anywhere. `useConfirm()` needs no setup.
+
+To avoid a light flash for dark-mode visitors, add the Vite plugin:
+
+```ts
+// vite.config.ts
+import { glyphColorMode } from '@glyphui/ui/vite'
+
+export default defineConfig({ plugins: [react(), tailwindcss(), glyphColorMode()] })
+```
+
+With an SSR framework, render `<ColorModeScript />` in the document head instead.
 
 ## Your theme, in one file
 
@@ -57,7 +76,7 @@ export default defineTheme({
 ```
 
 A theme controls:
-- colors, separately for light and dark
+- colors, separately for light and dark, including a five-color chart palette
 - a nine-step type scale (size, line height, tracking, weight)
 - radius, shadows, border width, motion and control height
 - defaults and extra classes for each component
@@ -68,9 +87,20 @@ The same tokens work in your own markup: `bg-primary`, `text-muted-foreground`,
 
 ## Components
 
-`Button` · `IconButton` · `Badge` · `Card` · `Heading` · `Text` · `Eyebrow` · `Kbd` · `Avatar` · `Separator` · `Skeleton` · `Spinner` · `Label` · `Field` · `Input` · `Textarea` · `Checkbox` · `Switch` · `Select` · `SegmentedControl` · `Tabs` · `Tooltip` · `Table` · `Container` · `Section` · `Stack` · `ThemeScope`
-
-Accessible behavior comes from [Radix UI](https://www.radix-ui.com/). Every component accepts `className`, and most accept `asChild`.
+| Category | Components (95) |
+|---|---|
+| Actions | Button · CopyButton · Toggle |
+| Forms | Calendar · Checkbox · Combobox · DatePicker · Field · FileUpload · Input · InputOTP · Label · NumberInput · PasswordInput · RadioGroup · SegmentedControl · Select · Slider · Switch · TagInput · Textarea |
+| Overlays | Alert Dialog · ContextMenu · Dialog · Dropdown Menu · HoverCard · Modal · Popover · Sheet · Tooltip |
+| Navigation | Breadcrumb · CommandMenu · Link · NavigationMenu · Pagination · Stepper · Tabs |
+| Feedback | Alert · Banner · Progress · Skeleton · Spinner · Toast |
+| Data display | Accordion · Avatar · Badge · Carousel · Chart · Collapsible · DescriptionList · Kbd · StatCard · Table · Timeline · TreeView |
+| Typography | Blockquote · Code · Eyebrow · Heading · Prose · Text |
+| Layout | AspectRatio · Card · Container · Grid · Resizable · ScrollArea · Section · Separator · Stack · VisuallyHidden |
+| Patterns | AppShell · Async · DataTable · Form · Navbar · PageHeader · Router integration · Sidebar · Theming · Utilities · Vite plugin |
+| Blocks (`@glyphui/blocks`) | AuthCard · Cta · Faq · FeatureGrid · FeatureSplit · Hero · LogoCloud · Newsletter · Pricing · SectionHeader · SiteFooter · Stats · Testimonials |
+
+Every component has a page with live examples and props in the [docs](https://khalmohak.github.io/glyph/components). Accessible behavior comes from [Radix UI](https://www.radix-ui.com/). Every component accepts `className`, and most accept `asChild`.
 
 ## Patterns
 
@@ -80,13 +110,13 @@ Accessible behavior comes from [Radix UI](https://www.radix-ui.com/). Every comp
 import { AppShell, Sidebar, SidebarContent, SidebarItem, PageHeader } from '@glyphui/ui'
 
 <AppShell sidebar={<Sidebar><SidebarContent>
-  <SidebarItem href="/inbox" icon={<Inbox />} badge={3} active>Inbox</SidebarItem>
+  <SidebarItem href="/inbox" icon={<Inbox />} badge={3}>Inbox</SidebarItem>
 </SidebarContent></Sidebar>}>
   <PageHeader title="Inbox" actions={<Button>New</Button>} />
 </AppShell>
 ```
 
-The sidebar collapses to an icon strip on desktop and opens as a focus-trapped drawer on mobile. `Navbar` builds a responsive site header from `links` data. To use your router's link component, pass it to `GlyphProvider`: `linkComponent={RouterLink}`.
+The sidebar collapses to an icon strip on desktop and opens as a focus-trapped drawer on mobile. `Navbar` builds a responsive site header from `links` data. With `router` on `GlyphProvider`, the item for the current URL is marked active; pass `active` to override.
 
 ### Forms: `@glyphui/ui/form`
 
@@ -108,6 +138,20 @@ const form = useForm({ schema, defaultValues: { email: '' } }) // zod, valibot,
 
 Field names are checked against the schema. Server errors you return appear on their fields. If `onSubmit` throws, the error appears above the form in `<FormError />`.
 
+### Modals and confirmations
+
+```tsx
+<Modal title="New invoice" trigger={<Button>New invoice</Button>}
+  footer={<FormSubmit form={form}>Create</FormSubmit>}>   {/* outside <Form>, so pass form */}
+  <Form form={form} onSubmit={save}>…</Form>
+</Modal>
+
+const confirm = useConfirm()
+if (await confirm({ title: 'Delete invoice?', tone: 'danger' })) remove()
+```
+
+For a plain form, pass `onSubmit` to `Modal` and a `type="submit"` button in the footer.
+
 ### Data tables: `@glyphui/ui/data-table`
 
 ```tsx
@@ -125,6 +169,15 @@ const columns = [
 
 Includes sorting, search, row selection and pages, plus loading, empty, no-results and error states.
 
+### Charts: `@glyphui/ui/chart`
+
+```tsx
+<AreaChart title="Revenue" data={revenue} index="month"
+  series={[{ key: 'recurring', label: 'Recurring' }, { key: 'oneOff', label: 'One-off' }]} />
+```
+
+Series use the theme's `chart-1` to `chart-5` colors. Every chart includes a visually hidden data table for screen readers. Needs `recharts`.
+
 ### Async states
 
 ```tsx

package/dist/chart.d.ts

@@ -3,7 +3,7 @@ import { t as StylesEntry } from "./registry-BGSJoiLq.js";
 import { ReactNode } from "react";
 //#region src/patterns/chart/chart-parts.d.ts
 /** Theme colors a series can use by name. Any CSS color also works. */
-type ChartColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'foreground' | 'muted-foreground';
+type ChartColor = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'foreground' | 'muted-foreground';
 //#endregion
 //#region src/patterns/chart/chart.d.ts
 type Key<T> = Extract<keyof T, string>;

package/dist/chart.js

@@ -1,5 +1,5 @@
 "use client";
-import { a as themedBorder, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
+import { a as themedBorder, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
 import { useId } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as R from "recharts";
@@ -23,16 +23,17 @@ const chartStyles = tv({ slots: {
 } });
 //#endregion
 //#region src/patterns/chart/chart-parts.tsx
+/** Series without a color use the theme's chart palette, in order. */
 const palette = [
-	"primary",
-	"info",
-	"success",
-	"warning",
-	"danger"
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5"
 ];
 function resolveColor(color, index) {
 	const value = color ?? palette[index % palette.length];
-	return /^[a-z-]+$/.test(value) ? `var(--color-${value})` : value;
+	return /^[a-z][a-z\d-]*$/.test(value) ? `var(--color-${value})` : value;
 }
 const defaultFormatter = (value) => typeof value === "number" ? value.toLocaleString() : String(value);
 function useChartParts() {
@@ -212,6 +213,7 @@ function LineChart(props) {
 			width: "100%",
 			height: props.height ?? 240,
 			children: /* @__PURE__ */ jsxs(R.LineChart, {
+				accessibilityLayer: false,
 				data: props.data,
 				margin: {
 					top: 8,
@@ -257,6 +259,7 @@ function AreaChart(props) {
 			width: "100%",
 			height: props.height ?? 240,
 			children: /* @__PURE__ */ jsxs(R.AreaChart, {
+				accessibilityLayer: false,
 				data: props.data,
 				margin: {
 					top: 8,
@@ -315,6 +318,7 @@ function BarChart(props) {
 			width: "100%",
 			height: props.height ?? 240,
 			children: /* @__PURE__ */ jsxs(R.BarChart, {
+				accessibilityLayer: false,
 				data: props.data,
 				margin: {
 					top: 8,
@@ -381,18 +385,22 @@ function DonutChart(props) {
 			children: [/* @__PURE__ */ jsx(R.ResponsiveContainer, {
 				width: "100%",
 				height: "100%",
-				children: /* @__PURE__ */ jsxs(R.PieChart, { children: [tooltip(valueFormatter, false), /* @__PURE__ */ jsx(R.Pie, {
-					data: rows,
-					dataKey: value,
-					nameKey: category,
-					innerRadius: "68%",
-					outerRadius: "100%",
-					paddingAngle: 2,
-					stroke: "var(--color-surface)",
-					strokeWidth: 2,
-					isAnimationActive: false,
-					children: rows.map((_, i) => /* @__PURE__ */ jsx(R.Cell, { fill: colors[i] }, i))
-				})] })
+				children: /* @__PURE__ */ jsxs(R.PieChart, {
+					accessibilityLayer: false,
+					children: [tooltip(valueFormatter, false), /* @__PURE__ */ jsx(R.Pie, {
+						rootTabIndex: -1,
+						data: rows,
+						dataKey: value,
+						nameKey: category,
+						innerRadius: "68%",
+						outerRadius: "100%",
+						paddingAngle: 2,
+						stroke: "var(--color-surface)",
+						strokeWidth: 2,
+						isAnimationActive: false,
+						children: rows.map((_, i) => /* @__PURE__ */ jsx(R.Cell, { fill: colors[i] }, i))
+					})]
+				})
 			}), props.centerLabel && /* @__PURE__ */ jsx("div", {
 				className: s.center({ class: slots.center }),
 				children: props.centerLabel
@@ -418,6 +426,7 @@ function Sparkline({ values, title, color, height = 36, area = true, className }
 			width: "100%",
 			height: "100%",
 			children: /* @__PURE__ */ jsxs(R.AreaChart, {
+				accessibilityLayer: false,
 				data,
 				margin: {
 					top: 2,

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

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

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

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

package/dist/data-table.js

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

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

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

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

@@ -1,5 +1,5 @@
 "use client";
-import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
+import { a as themedBorder, o as transition, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DLbT66dC.js";
 import { Slot } from "radix-ui";
 import { Fragment, createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -157,7 +157,7 @@ const buttonStyles = tv({
 			outline: { base: "border-border bg-surface text-foreground shadow-xs hover:border-border-strong hover:bg-muted" },
 			ghost: { base: "text-muted-foreground hover:bg-muted hover:text-foreground" },
 			danger: { base: "bg-danger text-danger-foreground shadow-sm hover:bg-danger/88" },
-			link: { base: "h-auto px-0 text-primary underline-offset-4 shadow-none hover:underline" }
+			link: { base: "h-auto px-0 text-primary-text underline-offset-4 shadow-none hover:underline" }
 		},
 		size: {
 			sm: {

package/dist/form.d.ts

@@ -1,4 +1,4 @@
-import { i as ButtonProps, n as FieldProps } from "./index-BWK4czIG.js";
+import { i as ButtonProps, n as FieldProps } from "./index-Bi7rZ6ba.js";
 import { ComponentProps, ReactNode } from "react";
 import { Control, ControllerRenderProps, FieldPath, FieldValues, UseFormProps, UseFormReturn } from "react-hook-form";
 import { StandardSchemaV1 } from "@standard-schema/spec";
@@ -28,7 +28,7 @@ interface FormProps<TInput extends FieldValues, TOutput> extends Omit<ComponentP
    */
   onSubmit: (values: TOutput) => SubmitResult<TInput> | Promise<SubmitResult<TInput>>;
 }
-export declare function Form<TInput extends FieldValues, TOutput>({ form, onSubmit, children, ...props }: FormProps<TInput, TOutput>): import("react").JSX.Element;
+export declare function Form<TInput extends FieldValues, TOutput>({ form, onSubmit, children, ref, ...props }: FormProps<TInput, TOutput>): import("react").JSX.Element;
 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. */
@@ -38,8 +38,15 @@ interface FormFieldProps<TInput extends FieldValues, TName extends FieldPath<TIn
 }
 /** 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;
+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(props: Omit<ButtonProps, 'type'>): import("react").JSX.Element;
+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 | {
@@ -76,4 +83,4 @@ export declare function FormError({ className }: {
   className?: string;
 }): import("react").JSX.Element | null;
 //#endregion
-export type { FormErrors, FormFieldProps, FormProps, SubmitResult, UseFormOptions };
+export type { FormErrors, FormFieldProps, FormProps, FormSubmitProps, SubmitResult, UseFormOptions };

package/dist/form.js

@@ -1,10 +1,11 @@
 "use client";
-import { t as tv } from "./tv-DBAGlgXJ.js";
-import { c as AlertIcon, r as Button } from "./field-context-anGPYXbW.js";
-import { t as Field } from "./field-CWZ_FdkD.js";
+import { t as tv } from "./tv-DLbT66dC.js";
+import { c as AlertIcon, r as Button } from "./field-context-7I-cWvvS.js";
+import { t as Field } from "./field-CVbywksE.js";
+import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
-import { Controller, FormProvider, useForm as useForm$1, useFormState } from "react-hook-form";
+import { Controller, FormProvider, useForm as useForm$1, 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
@@ -17,7 +18,16 @@ function useForm({ schema, ...options }) {
 		resolver: standardSchemaResolver(schema)
 	});
 }
-function Form({ form, onSubmit, children, ...props }) {
+/** 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);
@@ -38,6 +48,7 @@ function Form({ form, onSubmit, children, ...props }) {
 		children: /* @__PURE__ */ jsx("form", {
 			noValidate: true,
 			onSubmit: submit,
+			ref: registerElement,
 			...props,
 			children
 		})
@@ -56,16 +67,30 @@ function FormField({ control, name, children, ...fieldProps }) {
 	});
 }
 /** Submit button that shows progress while the form submits. */
-function FormSubmit(props) {
-	const { isSubmitting } = useFormState();
-	return /* @__PURE__ */ jsx(Button, {
+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 = 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",
+	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`). */

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

@@ -0,0 +1,50 @@
+import { 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. */
+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} />`
+ */
+type LinkComponent = ElementType<LinkComponentProps>;
+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.
+ */
+type UseIsActive = (href: string, options?: IsActiveOptions) => boolean;
+/** Connects Glyph's navigation components to your router. */
+interface GlyphRouter {
+  /** Renders links client-side. */
+  Link: LinkComponent;
+  /** Marks Sidebar, Navbar and NavigationMenu items active automatically. */
+  useIsActive?: UseIsActive;
+}
+interface GlyphContextValue {
+  theme: Theme;
+  linkComponent: LinkComponent;
+  useIsActive: UseIsActive;
+}
+/** The active theme and app-level settings. Must be used under `GlyphProvider`. */
+declare function useGlyph(): GlyphContextValue;
+/** The router-aware link component configured on `GlyphProvider`. */
+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.
+ */
+declare function useIsActive(href: string | undefined, options?: IsActiveOptions & {
+  explicit?: boolean | undefined;
+}): boolean;
+//#endregion
+export { LinkComponentProps as a, useIsActive as c, LinkComponent as i, useLinkComponent as l, GlyphRouter as n, UseIsActive as o, IsActiveOptions as r, useGlyph as s, GlyphContextValue as t };

package/dist/{index-BWK4czIG.d.ts → index-Bi7rZ6ba.d.ts}

@@ -156,6 +156,8 @@ declare const fieldStyles: import("tailwind-variants").TVReturnType<{
 }, {
   root: string;
   label: string;
+  labelRow: string;
+  labelAction: string;
   required: string;
   text: string;
   description: string;
@@ -170,6 +172,8 @@ declare const fieldStyles: import("tailwind-variants").TVReturnType<{
 }, {
   root: string;
   label: string;
+  labelRow: string;
+  labelAction: string;
   required: string;
   text: string;
   description: string;
@@ -184,6 +188,8 @@ declare const fieldStyles: import("tailwind-variants").TVReturnType<{
 }, {
   root: string;
   label: string;
+  labelRow: string;
+  labelAction: string;
   required: string;
   text: string;
   description: string;
@@ -212,6 +218,11 @@ declare function IconButton({ icon, variant, ...props }: IconButtonProps): impor
 //#region src/components/field/field.d.ts
 interface FieldProps extends Omit<ComponentProps<'div'>, 'children'>, FieldVariants {
   label?: ReactNode;
+  /**
+   * Shown at the end of the label row, outside the label, so it is not part of the
+   * control's accessible name. For example a "Forgot password?" link.
+   */
+  labelAction?: ReactNode;
   description?: ReactNode;
   /** Error message. Marks the control invalid and is announced to screen readers. */
   error?: ReactNode;