@godxjp/ui 20.0.0 → 20.2.0

package/dist/form/form-context.js

@@ -1,15 +1,50 @@
 "use client";
 import { createContext, useContext } from "react";
-import { useFormContext } from "react-hook-form";
+import {
+  createFormControl,
+  useFormContext,
+  useWatch
+} from "react-hook-form";
 const FormAdapterContext = createContext(null);
 function useFormAdapter() {
   return useContext(FormAdapterContext);
 }
+const FormOptionsContext = createContext({ disabled: false });
+function useFormDisabled() {
+  return useContext(FormOptionsContext).disabled;
+}
 function useFormSubmitting() {
+  const { submitting } = useContext(FormOptionsContext);
+  const adapter = useContext(FormAdapterContext);
+  const rhf = useFormContext();
+  if (adapter) return Boolean(submitting || adapter.isSubmitting);
+  return Boolean(submitting || rhf?.formState?.isSubmitting);
+}
+function useFormInstance() {
+  const rhf = useFormContext();
+  if (!rhf) {
+    throw new Error(
+      "useFormInstance must be rendered inside <FormRoot form={\u2026}> (react-hook-form path). On the adapter path use useFormAdapter()."
+    );
+  }
+  return rhf;
+}
+let fallbackControl;
+function getFallbackFormControl() {
+  fallbackControl ??= createFormControl().control;
+  return fallbackControl;
+}
+function useFormWatch(name) {
   const adapter = useContext(FormAdapterContext);
   const rhf = useFormContext();
-  if (adapter) return adapter.isSubmitting;
-  return rhf?.formState?.isSubmitting ?? false;
+  const control = rhf?.control ?? getFallbackFormControl();
+  const watched = useWatch({
+    control,
+    name,
+    disabled: !rhf
+  });
+  if (adapter) return name === void 0 ? adapter.getValues?.() : adapter.getValue(name);
+  return watched;
 }
 function extractControlValue(arg) {
   if (arg && typeof arg === "object" && "target" in arg) {
@@ -23,7 +58,12 @@ function extractControlValue(arg) {
 }
 export {
   FormAdapterContext,
+  FormOptionsContext,
   extractControlValue,
+  getFallbackFormControl,
   useFormAdapter,
-  useFormSubmitting
+  useFormDisabled,
+  useFormInstance,
+  useFormSubmitting,
+  useFormWatch
 };

package/dist/form/form-field-array.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type FieldArrayPath, type FieldValues } from "react-hook-form";
+import type { FormFieldArrayProp } from "../props/components/form.prop.js";
+export type { FormFieldArrayProp } from "../props/components/form.prop.js";
+/**
+ * FormFieldArray — repeating fields (antd `Form.List`) on react-hook-form's `useFieldArray`, so
+ * rows keep their identity across insert/remove/move instead of being re-keyed by index.
+ *
+ * Each row hands back its dotted path prefix; build the child field name from it, which is what
+ * makes nested validation messages land on the right row:
+ *
+ * ```tsx
+ * <FormFieldArray<Values, "contacts"> name="contacts">
+ *   {({ fields, append, remove }) => (…
+ *     <FormFieldControl name={`${row.name}.email`} label={t("contact.email")}>…
+ *   )}
+ * </FormFieldArray>
+ * ```
+ *
+ * react-hook-form path only — a server-driven `adapter` owns its own collection state.
+ */
+export declare function FormFieldArray<TFieldValues extends FieldValues, TName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, children }: FormFieldArrayProp<TFieldValues, TName>): React.JSX.Element;

package/dist/form/form-field-array.js

@@ -0,0 +1,50 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  get,
+  useFieldArray,
+  useFormContext,
+  useFormState
+} from "react-hook-form";
+import { getFallbackFormControl, useFormDisabled } from "./form-context.js";
+function arrayErrorMessage(errors, name) {
+  const entry = get(errors, name);
+  const message = entry?.root?.message ?? entry?.message;
+  return typeof message === "string" && message ? message : void 0;
+}
+function FormFieldArray({ name, children }) {
+  const rhf = useFormContext();
+  const control = rhf?.control ?? getFallbackFormControl();
+  const { fields, append, prepend, insert, remove, move, swap, replace } = useFieldArray({ control, name });
+  const { errors } = useFormState({ control, name });
+  const disabled = useFormDisabled();
+  const rows = React.useMemo(
+    () => fields.map((row, index) => ({
+      key: row.id,
+      name: `${String(name)}.${index}`,
+      index
+    })),
+    [fields, name]
+  );
+  if (!rhf) {
+    throw new Error(
+      "FormFieldArray must be rendered inside <FormRoot form={\u2026}> (react-hook-form path)."
+    );
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: children({
+    fields: rows,
+    append,
+    prepend,
+    insert,
+    remove,
+    move,
+    swap,
+    replace,
+    error: arrayErrorMessage(errors, String(name)),
+    disabled
+  }) });
+}
+export {
+  FormFieldArray
+};

package/dist/form/form-field-control.d.ts

@@ -1,4 +1,5 @@
+import * as React from "react";
 import { type FieldValues } from "react-hook-form";
 import type { FormFieldControlProp } from "../props/components/form.prop.js";
 export type { FormFieldControlProp } from "../props/components/form.prop.js";
-export declare function FormFieldControl<TFieldValues extends FieldValues>({ name, label, required, helper, className, children, }: FormFieldControlProp<TFieldValues>): import("react").JSX.Element;
+export declare function FormFieldControl<TFieldValues extends FieldValues>({ name, id, field: fieldKey, labelAddon, layout, labelWidth, controlWidth, colSpan, label, required, helper, disabled, dependencies, getValueFromEvent, normalize, help, validateStatus, hasFeedback, feedback, preserve, className, children, }: FormFieldControlProp<TFieldValues>): React.JSX.Element;

package/dist/form/form-field-control.js

@@ -1,70 +1,146 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { Controller, useFormContext } from "react-hook-form";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Controller,
+  useFormContext,
+  useFormState,
+  useWatch
+} from "react-hook-form";
 import { FormField } from "../components/data-entry/form-field.js";
-import { extractControlValue, useFormAdapter } from "./form-context.js";
+import { extractControlValue, useFormAdapter, useFormDisabled } from "./form-context.js";
 const noopRef = () => {
 };
+function bindField(field) {
+  return { ...field, onValueChange: field.onChange };
+}
+function FieldDependencies({
+  control,
+  name,
+  dependencies,
+  trigger
+}) {
+  const values = useWatch({ control, name: dependencies });
+  const { isSubmitted } = useFormState({ control });
+  const signature = JSON.stringify(values ?? null);
+  React.useEffect(() => {
+    if (!isSubmitted) return;
+    void trigger(name);
+  }, [signature, isSubmitted, name, trigger]);
+  return null;
+}
 function FormFieldControl({
   name,
+  id,
+  field: fieldKey,
+  labelAddon,
+  layout,
+  labelWidth,
+  controlWidth,
+  colSpan,
   label,
   required,
   helper,
+  disabled,
+  dependencies,
+  getValueFromEvent,
+  normalize,
+  help,
+  validateStatus,
+  hasFeedback,
+  feedback,
+  preserve,
   className,
   children
 }) {
+  const autoId = React.useId();
+  const resolvedId = id ?? `${autoId}-${String(name)}`;
+  const presentation = { field: fieldKey, labelAddon, layout, labelWidth, controlWidth, colSpan };
   const adapter = useFormAdapter();
   const rhf = useFormContext();
+  const formDisabled = useFormDisabled();
+  const isDisabled = disabled ?? formDisabled;
+  const disabledProp = isDisabled ? { disabled: true } : disabled === false ? { disabled: false } : void 0;
+  const readValue = (args, previousValue) => {
+    const raw = getValueFromEvent ? getValueFromEvent(...args) : extractControlValue(args[0]);
+    return normalize ? normalize(raw, previousValue) : raw;
+  };
   if (adapter) {
     const fieldName = String(name);
     return /* @__PURE__ */ jsx(
       FormField,
       {
-        id: fieldName,
+        ...presentation,
+        id: resolvedId,
         name: fieldName,
         label,
         required,
         helper,
-        error: adapter.getError(fieldName),
+        error: help ?? adapter.getError(fieldName),
+        validateStatus,
+        hasFeedback,
+        feedback,
         className,
-        children: children({
-          id: fieldName,
-          name: fieldName,
-          value: adapter.getValue(fieldName),
-          onChange: (...args) => adapter.setValue(fieldName, extractControlValue(args[0])),
-          onBlur: () => adapter.onBlur?.(fieldName),
-          ref: noopRef
-        })
+        children: children(
+          bindField({
+            id: resolvedId,
+            name: fieldName,
+            value: adapter.getValue(fieldName),
+            onChange: (...args) => adapter.setValue(fieldName, readValue(args, adapter.getValue(fieldName))),
+            onBlur: () => adapter.onBlur?.(fieldName),
+            ref: noopRef,
+            ...disabledProp
+          })
+        )
       }
     );
   }
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control: rhf.control,
-      render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
-        FormField,
-        {
-          id: String(name),
-          name: String(name),
-          label,
-          required,
-          helper,
-          error: fieldState.error?.message,
-          className,
-          children: children({
-            id: String(name),
-            name: field.name,
-            value: field.value,
-            onChange: field.onChange,
-            onBlur: field.onBlur,
-            ref: field.ref
-          })
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    dependencies?.length ? /* @__PURE__ */ jsx(
+      FieldDependencies,
+      {
+        control: rhf.control,
+        name,
+        dependencies,
+        trigger: rhf.trigger
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      Controller,
+      {
+        name,
+        control: rhf.control,
+        shouldUnregister: preserve === false,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(
+          FormField,
+          {
+            ...presentation,
+            id: resolvedId,
+            name: String(name),
+            label,
+            required,
+            helper,
+            error: help ?? fieldState.error?.message,
+            validateStatus,
+            hasFeedback,
+            feedback,
+            className,
+            children: children(
+              bindField({
+                id: resolvedId,
+                name: field.name,
+                value: field.value,
+                onChange: (...args) => field.onChange(readValue(args, field.value)),
+                onBlur: field.onBlur,
+                ref: field.ref,
+                ...disabledProp
+              })
+            )
+          }
+        )
+      }
+    )
+  ] });
 }
 export {
   FormFieldControl

package/dist/form/form-root.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { type FieldValues } from "react-hook-form";
 import type { FormRootProp } from "../props/components/form.prop.js";
 export type { FormRootProp } from "../props/components/form.prop.js";
@@ -6,4 +7,4 @@ export type { FormRootProp } from "../props/components/form.prop.js";
  * validation) OR `adapter` (a framework-agnostic {@link FormStateAdapter} for a server-driven form
  * library — Inertia's `useForm` via `@godxjp/ui/inertia`, formik, TanStack Form).
  */
-export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, children, className, id, }: FormRootProp<TFieldValues>): import("react").JSX.Element;
+export declare function FormRoot<TFieldValues extends FieldValues>({ form, adapter, onSubmit, onSubmitFailed, onSubmitError, onReset, scrollToFirstError, disabled, layout, labelWidth, controlWidth, labelAlign, collapseBelow, density, columns, requiredMark, errors, children, className, id, }: FormRootProp<TFieldValues>): React.JSX.Element;

package/dist/form/form-root.js

@@ -1,46 +1,165 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { FormProvider } from "react-hook-form";
+import { Alert, AlertDescription } from "../components/feedback/alert.js";
+import { ResponsiveGrid } from "../components/layout/responsive-grid.js";
+import { useTranslation } from "../i18n/use-translation.js";
 import { cn } from "../lib/utils.js";
-import { FormAdapterContext } from "./form-context.js";
+import { Form } from "../components/data-entry/form.js";
+import { FormAdapterContext, FormOptionsContext } from "./form-context.js";
+function collectErrorNames(errors, prefix = "", out = []) {
+  if (!errors || typeof errors !== "object") return out;
+  for (const [key, value] of Object.entries(errors)) {
+    if (!value || typeof value !== "object") continue;
+    const path = prefix ? `${prefix}.${key}` : key;
+    if ("message" in value || "type" in value) out.push(path);
+    else collectErrorNames(value, path, out);
+  }
+  return out;
+}
+function scrollFirstErrorIntoView(formEl, errors) {
+  if (!formEl) return;
+  const names = new Set(collectErrorNames(errors));
+  if (names.size === 0) return;
+  const control = Array.from(formEl.querySelectorAll("[data-field]")).find(
+    (el) => names.has(el.dataset.field ?? "")
+  );
+  if (!control) return;
+  const focusTarget = control.matches("input, select, textarea, button, [tabindex]") ? control : control.querySelector("input, select, textarea, button, [tabindex]");
+  focusTarget?.focus({ preventScroll: true });
+  const target = control.closest('[data-slot="form-field"]') ?? control;
+  if (typeof target.scrollIntoView !== "function") return;
+  const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  target.scrollIntoView({ block: "center", behavior: reduceMotion ? "auto" : "smooth" });
+}
+function afterPaint(run) {
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => run());
+  else setTimeout(run, 0);
+}
 function FormRoot({
   form,
   adapter,
   onSubmit,
+  onSubmitFailed,
+  onSubmitError,
+  onReset,
+  scrollToFirstError = true,
+  disabled = false,
+  layout,
+  labelWidth,
+  controlWidth,
+  labelAlign,
+  collapseBelow,
+  density,
+  columns,
+  requiredMark,
+  errors,
   children,
   className,
   id
 }) {
+  const formRef = React.useRef(null);
+  const { t } = useTranslation();
+  const pending = React.useRef(false);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [submitFailed, setSubmitFailed] = React.useState(false);
+  const options = React.useMemo(() => ({ disabled, submitting }), [disabled, submitting]);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    submitFailed && /* @__PURE__ */ jsx(Alert, { tone: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: t("dataEntry.form.submitFailed") }) }),
+    columns ? /* @__PURE__ */ jsx(ResponsiveGrid, { columns, children }) : children
+  ] });
+  const submit = async (work) => {
+    if (disabled || pending.current || adapter?.isSubmitting) return;
+    pending.current = true;
+    setSubmitting(true);
+    setSubmitFailed(false);
+    try {
+      await work();
+    } catch (error) {
+      setSubmitFailed(true);
+      onSubmitError?.(error);
+    } finally {
+      pending.current = false;
+      setSubmitting(false);
+    }
+  };
+  const layoutShell = layout !== void 0 || labelWidth !== void 0 || controlWidth !== void 0 || labelAlign !== void 0 || collapseBelow !== void 0 || density !== void 0 || requiredMark !== void 0 || errors !== void 0;
+  const formClassName = layoutShell ? className : cn("ui-stack-md", className);
+  const withLayout = (node) => layoutShell ? /* @__PURE__ */ jsx(
+    Form,
+    {
+      asChild: true,
+      layout,
+      labelWidth,
+      controlWidth,
+      labelAlign,
+      collapseBelow,
+      density,
+      requiredMark,
+      disabled,
+      errors,
+      children: node
+    }
+  ) : node;
   if (adapter) {
-    return /* @__PURE__ */ jsx(FormAdapterContext.Provider, { value: adapter, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(FormAdapterContext.Provider, { value: adapter, children: /* @__PURE__ */ jsx(FormOptionsContext.Provider, { value: options, children: withLayout(
+      /* @__PURE__ */ jsx(
+        "form",
+        {
+          ref: formRef,
+          id,
+          className: formClassName,
+          onSubmit: (event) => {
+            event.preventDefault();
+            void submit(() => onSubmit(adapter.getValues?.() ?? {}));
+          },
+          onReset: (event) => {
+            event.preventDefault();
+            if (pending.current) return;
+            setSubmitFailed(false);
+            adapter.reset?.();
+            onReset?.();
+          },
+          noValidate: true,
+          children: content
+        }
+      )
+    ) }) });
+  }
+  if (!form) {
+    throw new Error("FormRoot requires either a `form` (react-hook-form) or an `adapter` prop.");
+  }
+  const handleInvalid = (fieldErrors) => {
+    onSubmitFailed?.(fieldErrors);
+    if (scrollToFirstError)
+      afterPaint(() => scrollFirstErrorIntoView(formRef.current, fieldErrors));
+  };
+  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(FormOptionsContext.Provider, { value: options, children: withLayout(
+    /* @__PURE__ */ jsx(
       "form",
       {
+        ref: formRef,
         id,
-        className: cn("ui-stack-md", className),
+        className: formClassName,
         onSubmit: (event) => {
           event.preventDefault();
-          void onSubmit(adapter.getValues?.() ?? {});
+          void submit(
+            () => form.handleSubmit((values) => onSubmit(values), handleInvalid)(event)
+          );
+        },
+        onReset: (event) => {
+          event.preventDefault();
+          if (pending.current) return;
+          setSubmitFailed(false);
+          form.reset();
+          onReset?.();
         },
         noValidate: true,
-        children
+        children: content
       }
-    ) });
-  }
-  if (!form) {
-    throw new Error("FormRoot requires either a `form` (react-hook-form) or an `adapter` prop.");
-  }
-  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
-    "form",
-    {
-      id,
-      className: cn("ui-stack-md", className),
-      onSubmit: (event) => {
-        void form.handleSubmit((values) => onSubmit(values))(event);
-      },
-      noValidate: true,
-      children
-    }
-  ) });
+    )
+  ) }) });
 }
 export {
   FormRoot

package/dist/form/index.d.ts

@@ -4,5 +4,7 @@ export { FormRoot } from "./form-root.js";
 export type { FormRootProp } from "./form-root.js";
 export { FormFieldControl } from "./form-field-control.js";
 export type { FormFieldControlProp } from "./form-field-control.js";
-export { useFormSubmitting, useFormAdapter } from "./form-context.js";
+export { FormFieldArray } from "./form-field-array.js";
+export type { FormFieldArrayProp } from "./form-field-array.js";
+export { useFormSubmitting, useFormAdapter, useFormDisabled, useFormInstance, useFormWatch, } from "./form-context.js";
 export type { ZodSchemaProp, FieldErrorMessageProp, FormStateAdapter, } from "../props/components/form.prop.js";

package/dist/form/index.js

@@ -1,11 +1,22 @@
 import { useZodForm } from "./use-zod-form.js";
 import { FormRoot } from "./form-root.js";
 import { FormFieldControl } from "./form-field-control.js";
-import { useFormSubmitting, useFormAdapter } from "./form-context.js";
+import { FormFieldArray } from "./form-field-array.js";
+import {
+  useFormSubmitting,
+  useFormAdapter,
+  useFormDisabled,
+  useFormInstance,
+  useFormWatch
+} from "./form-context.js";
 export {
+  FormFieldArray,
   FormFieldControl,
   FormRoot,
   useFormAdapter,
+  useFormDisabled,
+  useFormInstance,
   useFormSubmitting,
+  useFormWatch,
   useZodForm
 };

package/dist/i18n/index.d.ts

@@ -1,3 +1,3 @@
-export { translate, translateCurrent, syncI18nLocale, resetI18nLocale, MESSAGE_CATALOG, } from "./translate.js";
+export { translate, translateCurrent, syncI18nLocale, resetI18nLocale, MESSAGE_CATALOG, registerMessages, } from "./translate.js";
 export type { Messages, MessageKey, TranslateParams } from "./translate.js";
 export { useTranslation, usePickerLocales } from "./use-translation.js";

package/dist/i18n/index.js

@@ -3,11 +3,13 @@ import {
   translateCurrent,
   syncI18nLocale,
   resetI18nLocale,
-  MESSAGE_CATALOG
+  MESSAGE_CATALOG,
+  registerMessages
 } from "./translate.js";
 import { useTranslation, usePickerLocales } from "./use-translation.js";
 export {
   MESSAGE_CATALOG,
+  registerMessages,
   resetI18nLocale,
   syncI18nLocale,
   translate,