@glyphui/ui 0.4.0 → 0.5.0

package/dist/components/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,10 @@
+import { VisuallyHidden } from "radix-ui";
+import { ComponentProps } from "react";
+//#region src/components/visually-hidden/visually-hidden.d.ts
+/**
+ * Hides content visually while keeping it available to screen readers, e.g. a label for an
+ * icon-only control or extra context in a table cell.
+ */
+declare function VisuallyHidden$1(props: ComponentProps<typeof VisuallyHidden.Root>): import("react").JSX.Element;
+//#endregion
+export { VisuallyHidden$1 as VisuallyHidden };

package/dist/components/visually-hidden/visually-hidden.js

@@ -0,0 +1,16 @@
+"use client";
+import { VisuallyHidden } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/visually-hidden/visually-hidden.tsx
+/**
+* Hides content visually while keeping it available to screen readers, e.g. a label for an
+* icon-only control or extra context in a table cell.
+*/
+function VisuallyHidden$1(props) {
+	return /* @__PURE__ */ jsx(VisuallyHidden.Root, {
+		"data-slot": "visually-hidden",
+		...props
+	});
+}
+//#endregion
+export { VisuallyHidden$1 as VisuallyHidden };

package/dist/data-table.d.ts

@@ -1,110 +1,3 @@
-import { t as VariantProps } from "./tv-DuMh7UH2.js";
-import { t as StylesEntry } from "./registry-BGSJoiLq.js";
-import { ReactNode } from "react";
-import { ColumnDef, ColumnDef as ColumnDef$1, RowData, SortingState, SortingState as SortingState$1, createColumnHelper } from "@tanstack/react-table";
-//#region src/patterns/data-table/data-table.d.ts
-declare module '@tanstack/react-table' {
-  interface ColumnMeta<TData extends RowData, TValue> {
-    /** Cell and header alignment. Use `right` for numbers. */
-    align?: 'left' | 'center' | 'right';
-    /** Extra classes for this column's cells. */
-    className?: string;
-  }
-}
-export declare const dataTableStyles: import("tailwind-variants").TVReturnType<{
-  variant: {
-    card: {
-      root: string[];
-      toolbar: string;
-      footer: string;
-    };
-    plain: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  toolbar: string;
-  search: string;
-  actions: string;
-  sortButton: string[];
-  footer: string;
-  pager: string;
-}, undefined, {
-  variant: {
-    card: {
-      root: string[];
-      toolbar: string;
-      footer: string;
-    };
-    plain: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  toolbar: string;
-  search: string;
-  actions: string;
-  sortButton: string[];
-  footer: string;
-  pager: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-  variant: {
-    card: {
-      root: string[];
-      toolbar: string;
-      footer: string;
-    };
-    plain: {
-      root: string;
-    };
-  };
-}, {
-  root: string;
-  toolbar: string;
-  search: string;
-  actions: string;
-  sortButton: string[];
-  footer: string;
-  pager: string;
-}>>;
-declare module '@glyphui/tokens' {
-  interface GlyphComponentRegistry {
-    DataTable: StylesEntry<typeof dataTableStyles>;
-  }
-}
-interface DataTableProps<T> extends VariantProps<typeof dataTableStyles> {
-  data: T[] | undefined;
-  /** Build with `createColumnHelper<T>()` for typed accessors. */
-  columns: ColumnDef$1<T, any>[];
-  /** Shows skeleton rows. */
-  loading?: boolean;
-  /** Shows an error state with a retry button when `onRetry` is set. */
-  error?: unknown;
-  onRetry?: () => unknown;
-  getRowId?: (row: T, index: number) => string;
-  /** Rows per page, or `false` to show every row. Default 10. */
-  pageSize?: number | false;
-  /** Adds a checkbox column. */
-  selectable?: boolean;
-  onSelectionChange?: (rows: T[]) => void;
-  /** Adds a search box that filters across all columns. */
-  search?: boolean | {
-    placeholder?: string;
-  };
-  /** Extra controls at the end of the toolbar (filters, buttons). */
-  toolbar?: ReactNode;
-  /** Shown when there are no rows at all (not when a search matches nothing). */
-  empty?: ReactNode;
-  initialSorting?: SortingState$1;
-  'aria-label'?: string;
-  className?: string;
-}
-/**
- * A table with sorting, search, pagination and row selection, plus built-in loading,
- * empty, no-results and error states. Columns are typed from your row type.
- */
-export declare function DataTable<T>(inProps: DataTableProps<T>): import("react").JSX.Element;
-//#endregion
-export { type ColumnDef, type DataTableProps, type SortingState, createColumnHelper };
+import { DataTable, DataTableProps, dataTableStyles } from "./patterns/data-table/data-table.js";
+import { ColumnDef, SortingState, createColumnHelper } from "@tanstack/react-table";
+export { type ColumnDef, DataTable, type DataTableProps, type SortingState, createColumnHelper, dataTableStyles };

package/dist/data-table.js

@@ -1,226 +1,4 @@
 "use client";
-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";
-//#region src/patterns/data-table/data-table.tsx
-const dataTableStyles = tv({
-	slots: {
-		root: "flex min-w-0 flex-col",
-		toolbar: "flex flex-wrap items-center gap-2",
-		search: "w-full sm:max-w-64",
-		actions: "ml-auto flex items-center gap-2",
-		sortButton: ["-ml-1.5 inline-flex cursor-pointer items-center gap-1 rounded-xs px-1.5 py-1 hover:text-foreground [&>svg]:size-3.5", focusRing],
-		footer: "flex flex-wrap items-center justify-between gap-3 text-small text-muted-foreground tabular-nums",
-		pager: "flex items-center gap-1"
-	},
-	variants: { variant: {
-		card: {
-			root: ["overflow-hidden rounded-lg border-border bg-surface shadow-sm", themedBorder],
-			toolbar: "border-b border-border p-3",
-			footer: "border-t border-border px-4 py-2.5"
-		},
-		plain: { root: "gap-3" }
-	} },
-	defaultVariants: { variant: "card" }
-});
-const alignClass = {
-	left: "text-left",
-	center: "text-center",
-	right: "text-right"
-};
-const NO_ROWS = [];
-function selectColumn() {
-	return {
-		id: "__select",
-		enableSorting: false,
-		enableGlobalFilter: false,
-		header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, {
-			className: "mt-0",
-			"aria-label": "Select all rows on this page",
-			checked: table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false,
-			onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true)
-		}),
-		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
-			className: "mt-0",
-			"aria-label": "Select row",
-			checked: row.getIsSelected(),
-			disabled: !row.getCanSelect(),
-			onCheckedChange: (value) => row.toggleSelected(value === true)
-		})
-	};
-}
-/**
-* A table with sorting, search, pagination and row selection, plus built-in loading,
-* empty, no-results and error states. Columns are typed from your row type.
-*/
-function DataTable(inProps) {
-	const [props, slots] = useComponentConfig("DataTable", inProps);
-	const { data, columns, loading = false, error, onRetry, getRowId, pageSize = 10, selectable = false, onSelectionChange, search = false, toolbar, empty, initialSorting = [], variant, className, "aria-label": ariaLabel } = props;
-	const [sorting, setSorting] = useState(initialSorting);
-	const [rowSelection, setRowSelection] = useState({});
-	const [globalFilter, setGlobalFilter] = useState("");
-	const allColumns = useMemo(() => selectable ? [selectColumn(), ...columns] : columns, [selectable, columns]);
-	const table = useReactTable({
-		data: data ?? NO_ROWS,
-		columns: allColumns,
-		state: {
-			sorting,
-			rowSelection,
-			globalFilter
-		},
-		onSortingChange: setSorting,
-		onRowSelectionChange: setRowSelection,
-		onGlobalFilterChange: setGlobalFilter,
-		enableRowSelection: selectable,
-		sortDescFirst: false,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		...getRowId && { getRowId },
-		...pageSize !== false && {
-			getPaginationRowModel: getPaginationRowModel(),
-			initialState: { pagination: {
-				pageIndex: 0,
-				pageSize
-			} }
-		}
-	});
-	useEffect(() => {
-		onSelectionChange?.(table.getSelectedRowModel().rows.map((row) => row.original));
-	}, [rowSelection]);
-	const s = dataTableStyles({ variant });
-	const columnCount = table.getVisibleLeafColumns().length;
-	const rows = table.getRowModel().rows;
-	const filteredTotal = table.getFilteredRowModel().rows.length;
-	const selectedCount = Object.keys(rowSelection).length;
-	const { pageIndex, pageSize: size } = table.getState().pagination;
-	const showFooter = pageSize !== false && !loading && !error && filteredTotal > 0;
-	const searchPlaceholder = typeof search === "object" ? search.placeholder : void 0;
-	const fullWidthRow = (content) => /* @__PURE__ */ jsx(TableRow, {
-		className: "hover:bg-transparent",
-		children: /* @__PURE__ */ jsx(TableCell, {
-			colSpan: columnCount,
-			className: "p-0",
-			children: content
-		})
-	});
-	let body;
-	if (loading) body = Array.from({ length: pageSize === false ? 5 : Math.min(pageSize, 8) }, (_, i) => /* @__PURE__ */ jsx(TableRow, {
-		className: "hover:bg-transparent",
-		children: table.getVisibleLeafColumns().map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { className: column.id === "__select" ? "size-4" : "h-4 w-[70%]" }) }, column.id))
-	}, i));
-	else if (error) body = fullWidthRow(/* @__PURE__ */ jsx(ErrorState, {
-		error,
-		onRetry
-	}));
-	else if (rows.length === 0) body = fullWidthRow(globalFilter ? /* @__PURE__ */ jsx(EmptyState, {
-		icon: /* @__PURE__ */ jsx(SearchIcon, {}),
-		title: `No results for “${globalFilter}”`,
-		description: "Check the spelling or try a shorter search.",
-		action: /* @__PURE__ */ jsx(Button, {
-			variant: "outline",
-			size: "sm",
-			onClick: () => setGlobalFilter(""),
-			children: "Clear search"
-		})
-	}) : empty ?? /* @__PURE__ */ jsx(EmptyState, { title: "No rows yet" }));
-	else body = rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
-		"data-state": row.getIsSelected() ? "selected" : void 0,
-		children: row.getVisibleCells().map((cell) => {
-			const meta = cell.column.columnDef.meta;
-			return /* @__PURE__ */ jsx(TableCell, {
-				className: [alignClass[meta?.align ?? "left"], meta?.className].join(" "),
-				children: flexRender(cell.column.columnDef.cell, cell.getContext())
-			}, cell.id);
-		})
-	}, row.id));
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "data-table",
-		className: s.root({ class: [slots.root, className] }),
-		children: [
-			(search || toolbar) && /* @__PURE__ */ jsxs("div", {
-				className: s.toolbar({ class: slots.toolbar }),
-				children: [search && /* @__PURE__ */ jsx(Input, {
-					size: "sm",
-					type: "search",
-					"aria-label": "Search rows",
-					placeholder: searchPlaceholder ?? "Search…",
-					prefix: /* @__PURE__ */ jsx(SearchIcon, {}),
-					value: globalFilter,
-					onChange: (event) => {
-						setGlobalFilter(event.target.value);
-						table.setPageIndex(0);
-					},
-					className: s.search({ class: slots.search })
-				}), toolbar && /* @__PURE__ */ jsx("div", {
-					className: s.actions({ class: slots.actions }),
-					children: toolbar
-				})]
-			}),
-			/* @__PURE__ */ jsxs(Table, {
-				"aria-label": ariaLabel,
-				"aria-busy": loading || void 0,
-				children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsx(TableRow, {
-					className: "hover:bg-transparent",
-					children: group.headers.map((header) => {
-						const column = header.column;
-						const sorted = column.getIsSorted();
-						const align = column.columnDef.meta?.align ?? "left";
-						const label = header.isPlaceholder ? null : flexRender(column.columnDef.header, header.getContext());
-						return /* @__PURE__ */ jsx(TableHead, {
-							className: alignClass[align],
-							"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
-							children: column.getCanSort() && !header.isPlaceholder ? /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: column.getToggleSortingHandler(),
-								className: s.sortButton({ class: [slots.sortButton, align === "right" && "flex-row-reverse"] }),
-								children: [label, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "opacity-40" })]
-							}) : label
-						}, header.id);
-					})
-				}, group.id)) }), /* @__PURE__ */ jsx(TableBody, { children: body })]
-			}),
-			showFooter && /* @__PURE__ */ jsxs("div", {
-				className: s.footer({ class: slots.footer }),
-				children: [/* @__PURE__ */ jsxs("p", { children: [
-					pageIndex * size + 1,
-					"–",
-					Math.min((pageIndex + 1) * size, filteredTotal),
-					" of",
-					" ",
-					filteredTotal,
-					selectedCount > 0 && /* @__PURE__ */ jsxs("span", {
-						className: "text-foreground",
-						children: [
-							" · ",
-							selectedCount,
-							" selected"
-						]
-					})
-				] }), /* @__PURE__ */ jsxs("div", {
-					className: s.pager({ class: slots.pager }),
-					children: [/* @__PURE__ */ jsx(IconButton, {
-						variant: "outline",
-						size: "sm",
-						icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
-						"aria-label": "Previous page",
-						disabled: !table.getCanPreviousPage(),
-						onClick: () => table.previousPage()
-					}), /* @__PURE__ */ jsx(IconButton, {
-						variant: "outline",
-						size: "sm",
-						icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
-						"aria-label": "Next page",
-						disabled: !table.getCanNextPage(),
-						onClick: () => table.nextPage()
-					})]
-				})]
-			})
-		]
-	});
-}
-//#endregion
+import { DataTable, dataTableStyles } from "./patterns/data-table/data-table.js";
+import { createColumnHelper } from "@tanstack/react-table";
 export { DataTable, createColumnHelper, dataTableStyles };

package/dist/form.d.ts

@@ -1,86 +1,2 @@
-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";
-//#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>;
-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.
- */
-export declare function useForm<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. */
-type FormErrors<TInput extends FieldValues> = Partial<Record<FieldPath<TInput> | 'root', string>>;
-type SubmitResult<TInput extends FieldValues> = void | {
-  errors: FormErrors<TInput>;
-};
-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;
-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;
-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 type { FormErrors, FormFieldProps, FormProps, FormSubmitProps, SubmitResult, UseFormOptions };
+import { Form, FormError, FormErrors, FormField, FormFieldProps, FormProps, FormSubmit, FormSubmitProps, SubmitResult, UseFormOptions, formErrorStyles, useForm } from "./patterns/form/form.js";
+export { Form, FormError, type FormErrors, FormField, type FormFieldProps, type FormProps, FormSubmit, type FormSubmitProps, type SubmitResult, type UseFormOptions, formErrorStyles, useForm };

package/dist/form.js

@@ -1,110 +1,3 @@
 "use client";
-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, 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({ schema, ...options }) {
-	return useForm$1({
-		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 = 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
+import { Form, FormError, FormField, FormSubmit, formErrorStyles, useForm } from "./patterns/form/form.js";
 export { Form, FormError, FormField, FormSubmit, formErrorStyles, useForm };

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+import { SlotClasses, useComponentConfig } from "./use-component-config.js";
+import { useControllableState } from "./use-controllable-state.js";
+import { useMediaQuery } from "./use-media-query.js";
+import { useScrolled } from "./use-scrolled.js";
+export { type SlotClasses, useComponentConfig, useControllableState, useMediaQuery, useScrolled };

package/dist/hooks/use-component-config.d.ts

@@ -0,0 +1,13 @@
+import { ComponentName, GlyphComponentRegistry } from "@glyphui/tokens";
+//#region src/hooks/use-component-config.d.ts
+type SlotsOf<K extends ComponentName> = GlyphComponentRegistry[K] extends {
+  slots: infer S extends string;
+} ? S : never;
+export type SlotClasses<K extends ComponentName> = Partial<Record<SlotsOf<K>, string>>;
+/**
+ * Applies the theme's per-component settings (`theme.components[name]`):
+ * fills unset variant props from `defaultVariants` and returns the extra slot classes.
+ * Every styled component calls this first.
+ */
+export declare function useComponentConfig<K extends ComponentName, P extends object>(name: K, props: P): [props: P, slotClasses: SlotClasses<K>];
+//#endregion

package/dist/hooks/use-component-config.js

@@ -0,0 +1,22 @@
+"use client";
+import { GlyphContext } from "../provider/glyph-context.js";
+import { useContext } from "react";
+//#region src/hooks/use-component-config.ts
+/**
+* Applies the theme's per-component settings (`theme.components[name]`):
+* fills unset variant props from `defaultVariants` and returns the extra slot classes.
+* Every styled component calls this first.
+*/
+function useComponentConfig(name, props) {
+	const override = (useContext(GlyphContext)?.theme)?.components[name];
+	if (!override) return [props, {}];
+	let merged = props;
+	const defaults = override.defaultVariants;
+	if (defaults) {
+		merged = { ...props };
+		for (const [key, value] of Object.entries(defaults)) if (merged[key] === void 0) merged[key] = value;
+	}
+	return [merged, override.className ?? {}];
+}
+//#endregion
+export { useComponentConfig };

package/dist/hooks/use-controllable-state.d.ts

@@ -0,0 +1,9 @@
+//#region src/hooks/use-controllable-state.d.ts
+interface Options<T> {
+  value?: T | undefined;
+  defaultValue: T;
+  onChange?: ((value: T) => void) | undefined;
+}
+/** State that can be controlled by a parent (`value` + `onChange`) or left uncontrolled. */
+export declare function useControllableState<T>({ value, defaultValue, onChange }: Options<T>): readonly [T, (next: T | ((prev: T) => T)) => void];
+//#endregion

package/dist/hooks/use-controllable-state.js

@@ -0,0 +1,18 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+//#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
+export { useControllableState };

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-media-query.d.ts
+/** Subscribes to a CSS media query. Returns `fallback` during SSR. */
+export declare function useMediaQuery(query: string, fallback?: boolean): boolean;
+//#endregion

package/dist/hooks/use-media-query.js

@@ -0,0 +1,13 @@
+"use client";
+import { useSyncExternalStore } from "react";
+//#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
+export { useMediaQuery };

package/dist/hooks/use-scrolled.d.ts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-scrolled.d.ts
+/** True once the window has scrolled past `threshold` pixels. */
+export declare function useScrolled(threshold?: number, enabled?: boolean): boolean;
+//#endregion