@glyphui/ui 0.0.0-stage → 0.1.1

package/dist/field-context-B8cYheXz.js

@@ -0,0 +1,321 @@
+"use client";
+import { textTokens } from "@glyphui/tokens";
+import { Slot } from "radix-ui";
+import { Fragment, createContext, useContext } from "react";
+import { createTV } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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";
+}
+//#endregion
+//#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
+//#region src/utils/tw-merge-config.ts
+/**
+* Teaches tailwind-merge about Glyph's custom utilities so `cn('text-h1', 'text-small')`
+* keeps only the last size instead of treating `text-h1` as a color.
+*/
+const twMergeConfig = { extend: { theme: {
+	text: [...textTokens],
+	radius: ["pill"]
+} } };
+//#endregion
+//#region src/utils/tv.ts
+/** `tailwind-variants` preconfigured with Glyph's merge rules. All component styles use this. */
+const tv = createTV({ twMergeConfig });
+//#endregion
+//#region src/utils/styles.ts
+/** Shared class fragments. Kept as literals so Tailwind's scanner picks them up. */
+const focusRing = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+const themedBorder = "border-(length:--glyph-border-width)";
+const transition = "transition-[color,background-color,border-color,box-shadow,transform,opacity] duration-(--glyph-duration-base) ease-standard";
+/** Popover surfaces: Select, Tooltip-like menus. */
+const popover = "z-50 overflow-hidden rounded-[min(var(--radius-md),var(--radius-lg))] border-(length:--glyph-border-width) border-border bg-raised text-foreground shadow-lg animate-pop-in";
+//#endregion
+//#region src/components/spinner/spinner.styles.ts
+const spinnerStyles = tv({
+	slots: {
+		base: "inline-block shrink-0 animate-spin",
+		track: "opacity-20",
+		arc: ""
+	},
+	variants: { size: {
+		sm: { base: "size-3.5" },
+		md: { base: "size-4" },
+		lg: { base: "size-6" }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+//#region src/components/spinner/spinner.tsx
+function Spinner(inProps) {
+	const [props, slots] = useComponentConfig("Spinner", inProps);
+	const { size, label, className, ...rest } = props;
+	const s = spinnerStyles({ size });
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "spinner",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		role: label ? "status" : void 0,
+		"aria-label": label,
+		"aria-hidden": label ? void 0 : true,
+		className: s.base({ class: [slots.base, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: s.track({ class: slots.track }),
+			cx: "12",
+			cy: "12",
+			r: "9",
+			stroke: "currentColor",
+			strokeWidth: "3"
+		}), /* @__PURE__ */ jsx("path", {
+			className: s.arc({ class: slots.arc }),
+			d: "M21 12a9 9 0 0 0-9-9",
+			stroke: "currentColor",
+			strokeWidth: "3",
+			strokeLinecap: "round"
+		})]
+	});
+}
+//#endregion
+//#region src/components/button/button.styles.ts
+const buttonStyles = tv({
+	slots: {
+		base: [
+			"relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap",
+			"rounded-md border-transparent font-medium",
+			themedBorder,
+			transition,
+			focusRing,
+			"disabled:pointer-events-none disabled:opacity-50 aria-busy:cursor-progress"
+		],
+		icon: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-full"
+	},
+	variants: {
+		variant: {
+			primary: { base: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/88" },
+			secondary: { base: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/88" },
+			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" }
+		},
+		size: {
+			sm: {
+				base: "h-(--glyph-control-sm) px-3 text-small",
+				icon: "size-3.5"
+			},
+			md: { base: "h-(--glyph-control-md) px-4 text-small" },
+			lg: {
+				base: "h-(--glyph-control-lg) px-5 text-body",
+				icon: "size-[1.125rem]"
+			}
+		},
+		iconOnly: { true: { base: "px-0" } },
+		fullWidth: { true: { base: "w-full" } }
+	},
+	compoundVariants: [
+		{
+			iconOnly: true,
+			size: "sm",
+			class: { base: "w-(--glyph-control-sm)" }
+		},
+		{
+			iconOnly: true,
+			size: "md",
+			class: { base: "w-(--glyph-control-md)" }
+		},
+		{
+			iconOnly: true,
+			size: "lg",
+			class: { base: "w-(--glyph-control-lg)" }
+		}
+	],
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+//#endregion
+//#region src/components/button/button.tsx
+function Button(inProps) {
+	const [props, slots] = useComponentConfig("Button", inProps);
+	const { variant, size, iconOnly, fullWidth, asChild = false, loading = false, leftIcon, rightIcon, disabled, type, className, children, ...rest } = props;
+	const s = buttonStyles({
+		variant,
+		size,
+		iconOnly,
+		fullWidth
+	});
+	const Comp = asChild ? Slot.Root : "button";
+	const icon = (node) => node ? /* @__PURE__ */ jsx("span", {
+		"data-slot": "button-icon",
+		className: s.icon({ class: slots.icon }),
+		"aria-hidden": "true",
+		children: node
+	}) : null;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "button",
+		"data-variant": variant ?? "primary",
+		className: s.base({ class: [slots.base, className] }),
+		"aria-busy": loading || void 0,
+		...!asChild && {
+			type: type ?? "button",
+			disabled: disabled || loading
+		},
+		...rest,
+		children: iconOnly ? icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: size === "lg" ? "md" : "sm" }) : children) : [
+			/* @__PURE__ */ jsx(Fragment, { children: icon(loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : leftIcon) }, "start"),
+			/* @__PURE__ */ jsx(Slot.Slottable, { children }, "content"),
+			/* @__PURE__ */ jsx(Fragment, { children: icon(rightIcon) }, "end")
+		]
+	});
+}
+/** A square button holding one icon. Shares Button's variants and theme overrides. */
+function IconButton({ icon, variant = "ghost", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		...props,
+		iconOnly: true,
+		children: icon
+	});
+}
+//#endregion
+//#region src/internal/icons.tsx
+function Icon({ children, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		...props,
+		children
+	});
+}
+const CheckIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+});
+const MinusIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
+});
+const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+});
+const ChevronLeftIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+});
+const ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const ArrowUpIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7M12 19V5" })
+});
+const ArrowDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M19 12l-7 7-7-7" })
+});
+const ChevronsUpDownIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })
+});
+const XIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+});
+const MenuIcon = (p) => /* @__PURE__ */ jsx(Icon, {
+	...p,
+	children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
+});
+const PanelLeftIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "18",
+		height: "18",
+		x: "3",
+		y: "3",
+		rx: "2"
+	}), /* @__PURE__ */ jsx("path", { d: "M9 3v18" })]
+});
+const SearchIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "11",
+		cy: "11",
+		r: "7"
+	}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
+});
+const InboxIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("path", { d: "M22 12h-6l-2 3h-4l-2-3H2" }), /* @__PURE__ */ jsx("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })]
+});
+const AlertIcon = (p) => /* @__PURE__ */ jsxs(Icon, {
+	...p,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}), /* @__PURE__ */ jsx("path", { d: "M12 8v4M12 16h.01" })]
+});
+//#endregion
+//#region src/components/field/field-context.ts
+const FieldContext = createContext(null);
+/**
+* Connects a form control to the surrounding `Field`: id for the label, `aria-describedby`
+* for description and error, `aria-invalid`, `required`, `disabled`. Props passed directly win.
+*/
+function useFieldControl(props) {
+	const field = useContext(FieldContext);
+	if (!field) return props;
+	const describedBy = [
+		field.descriptionId,
+		field.errorId,
+		props["aria-describedby"]
+	].filter(Boolean).join(" ");
+	return {
+		...props,
+		id: props.id ?? field.id,
+		disabled: props.disabled ?? (field.disabled || void 0),
+		required: props.required ?? (field.required || void 0),
+		"aria-describedby": describedBy || void 0,
+		"aria-invalid": props["aria-invalid"] ?? (field.invalid || void 0)
+	};
+}
+//#endregion
+export { useGlyph as A, popover as C, twMergeConfig as D, tv as E, useComponentConfig as O, focusRing as S, transition as T, Button as _, ArrowUpIcon as a, Spinner as b, ChevronLeftIcon as c, InboxIcon as d, MenuIcon as f, XIcon as g, SearchIcon as h, ArrowDownIcon as i, useLinkComponent as j, GlyphContext as k, ChevronRightIcon as l, PanelLeftIcon as m, useFieldControl as n, CheckIcon as o, MinusIcon as p, AlertIcon as r, ChevronDownIcon as s, FieldContext as t, ChevronsUpDownIcon as u, IconButton as v, themedBorder as w, spinnerStyles as x, buttonStyles as y };

package/dist/form.d.ts

@@ -0,0 +1,79 @@
+import { i as ButtonProps, n as FieldProps } from "./index-BWK4czIG.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, ...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;
+/** Submit button that shows progress while the form submits. */
+export declare function FormSubmit(props: Omit<ButtonProps, 'type'>): 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, SubmitResult, UseFormOptions };

package/dist/form.js

@@ -0,0 +1,84 @@
+"use client";
+import { E as tv, _ as Button, r as AlertIcon } from "./field-context-B8cYheXz.js";
+import { t as Field } from "./field-DXZD0l8w.js";
+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";
+//#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)
+	});
+}
+function Form({ form, onSubmit, children, ...props }) {
+	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,
+			...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(props) {
+	const { isSubmitting } = useFormState();
+	return /* @__PURE__ */ jsx(Button, {
+		type: "submit",
+		loading: isSubmitting,
+		...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",
+	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 };