@glyphui/ui 0.2.0 → 0.4.0

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,9 +1,11 @@
 "use client";
-import { c as tv, m as AlertIcon, r as Button } from "./field-context-B6WOcK5m.js";
-import { t as Field } from "./field-CCecIzdq.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
@@ -16,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);
@@ -37,6 +48,7 @@ function Form({ form, onSubmit, children, ...props }) {
 		children: /* @__PURE__ */ jsx("form", {
 			noValidate: true,
 			onSubmit: submit,
+			ref: registerElement,
 			...props,
 			children
 		})
@@ -55,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;