@godxjp/ui 20.0.0 → 20.1.0

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/messages/en.json

@@ -23,7 +23,8 @@
     },
     "datePicker": {
       "placeholder": "Select date",
-      "openCalendar": "Open calendar"
+      "openCalendar": "Open calendar",
+      "quarter": "Q{quarter}"
     },
     "dateRangePicker": {
       "placeholder": "Select date range",
@@ -39,7 +40,10 @@
       "openPicker": "Open time picker",
       "meridiem": "AM/PM",
       "am": "AM",
-      "pm": "PM"
+      "pm": "PM",
+      "now": "Now",
+      "confirm": "OK",
+      "second": "Second"
     },
     "searchInput": {
       "placeholder": "Search…"
@@ -55,7 +59,7 @@
     "upload": {
       "dropzoneLabel": "Upload files",
       "dropzoneHint": "Drag and drop files here, or click to browse",
-      "dropzoneMeta": "Uploads go to temp storage — promote on form save",
+      "dropzoneMeta": "Selected files appear here.",
       "buttonLabel": "Choose file",
       "addImage": "Add image",
       "uploading": "Uploading…",
@@ -75,7 +79,17 @@
       "statusFailed": "{count} upload(s) failed",
       "removeImage": "Remove image",
       "removeFile": "Remove {name}",
-      "cropDescription": "Drag the zoom slider, then save to crop your photo to a square."
+      "cropDescription": "Drag the zoom slider, then save to crop your photo to a square.",
+      "preview": "Preview",
+      "download": "Download",
+      "retry": "Retry",
+      "start": "Upload",
+      "cancel": "Cancel",
+      "rejectAccept": "{name}: file type is not allowed.",
+      "rejectSize": "{name}: file is too large.",
+      "rejectCount": "{name}: file limit reached.",
+      "rejectBeforeUpload": "{name}: file validation failed.",
+      "readFailed": "Could not read the selected folder."
     },
     "cascader": {
       "placeholder": "Select…",
@@ -109,6 +123,9 @@
       "empty": "No results",
       "error": "Couldn’t load options"
     },
+    "selection": {
+      "overflow": "+{count}"
+    },
     "monthPicker": {
       "openGrid": "Open month grid",
       "previousYear": "Previous year",
@@ -135,6 +152,14 @@
     },
     "formErrors": {
       "title": "Please review the following errors"
+    },
+    "form": {
+      "optional": "(optional)",
+      "success": "Valid",
+      "warning": "Please review",
+      "error": "Invalid",
+      "validating": "Validating",
+      "submitFailed": "Could not submit the form. Please try again."
     }
   },
   "feedback": {
@@ -290,8 +315,13 @@
     }
   },
   "navigation": {
+    "tabs": {
+      "addTab": "Add tab",
+      "removeTab": "Close tab"
+    },
     "steps": {
       "ariaLabel": "Progress",
+      "percentLabel": "Current step progress",
       "status": {
         "wait": "Waiting",
         "process": "Current step",
@@ -332,6 +362,7 @@
       "page": "Page {page}",
       "pageSize": "Page size",
       "pageSizeTrigger": "{size} / page",
+      "jumpTo": "Go to page",
       "pageSizeOption": "{size} / page",
       "total": {
         "one": "Total {total} item",
@@ -410,7 +441,19 @@
     "error": "Couldn't load this list",
     "errorDescription": "The data could not be retrieved. Try again in a moment.",
     "denied": "You don't have access to this list",
-    "deniedDescription": "Ask an administrator to grant you permission to view these records."
+    "deniedDescription": "Ask an administrator to grant you permission to view these records.",
+    "selectInvert": "Invert selection",
+    "selectNone": "Clear selection",
+    "selectionMenu": "Selection options",
+    "filterColumn": "Filter",
+    "filterReset": "Reset filter",
+    "expandColumn": "Expand",
+    "expandRow": "Expand row",
+    "collapseRow": "Collapse row",
+    "sortAscending": "Sort ascending",
+    "sortDescending": "Sort descending",
+    "sortCancel": "Cancel sort",
+    "selectColumn": "Select"
   },
   "dataGrid": {
     "search": "Search",
@@ -478,5 +521,13 @@
     "summaryPie": "Pie chart with {slices} slices",
     "summaryTrend": "Bar trend with {points} data points",
     "trendCurrent": "current"
+  },
+  "rangeTimeline": {
+    "outsideRange": "Outside the visible range",
+    "schedule": "Schedule"
+  },
+  "textExamples": {
+    "preservedText": "Plain text",
+    "sampleText": "First line\n  Indented line\n\nLast line"
   }
 }