@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/ui/toggle.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
@@ -29,6 +28,19 @@ type ToggleCountFields = {
      */
     countLabel?: string;
 };
+/**
+ * The repo's two-state vocabulary, kept VERBATIM from the Radix era. React Aria spells the same
+ * four things `isSelected` / `defaultSelected` / `onChange` / `isDisabled`; the translation lives
+ * inside this file so no consumer ever has to learn RAC's names.
+ */
+type TogglePressedFields = {
+    /** Controlled pressed state — RAC `isSelected`. */
+    pressed?: boolean;
+    /** Uncontrolled initial pressed state — RAC `defaultSelected`. */
+    defaultPressed?: boolean;
+    /** Fired with the NEW pressed state — RAC `onChange`. */
+    onPressedChange?: (pressed: boolean) => void;
+};
 /** Counter pill shared by `Toggle` and `ToggleGroupItem`. ACCESSIBLE NAME. */
 declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, }: ToggleCountFields & {
     ariaLabel?: string;
@@ -39,11 +51,25 @@ declare function useCounterPill({ count, overflowCount, showZero, countLabel, ar
     pill: React.JSX.Element;
     resolvedAriaLabel: string | undefined;
 };
-export type ToggleProp = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleCountFields;
+/**
+ * RAC's `filterDOMProps` forwards only `id`, `data-*`, the four labelling `aria-*` and the global
+ * mouse/pointer events; `title`, `tabIndex` and the rarer DOM props are dropped silently, and
+ * Radix forwarded ALL of them. `render` is RAC's own escape hatch: the raw props go on first, RAC's
+ * merged ones second so its `type`/`disabled`/`aria-pressed`/handlers always win.
+ *
+ * Two exceptions, both of which Radix owned: `tabIndex` stays the caller's, and so does `id` —
+ * inside a ToggleButtonGroup RAC spends `id` as the selection KEY and blanks the DOM attribute,
+ * which would otherwise silently drop the id off every grouped item.
+ */
+declare function restoreDomProps<P extends {
+    id?: string;
+    tabIndex?: number;
+}>(raw: P, domProps: React.JSX.IntrinsicElements["button"]): React.JSX.Element;
+export type ToggleProp = React.ComponentPropsWithoutRef<"button"> & TogglePressedFields & VariantProps<typeof toggleVariants> & ToggleCountFields;
 export type ToggleProps = ToggleProp;
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & TogglePressedFields & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & ToggleCountFields & React.RefAttributes<HTMLButtonElement>>;
-export { toggleVariants, useCounterPill };
-export type { ToggleCountFields };
+export { toggleVariants, useCounterPill, restoreDomProps };
+export type { ToggleCountFields, TogglePressedFields };

package/dist/components/ui/toggle.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { ToggleButton } from "react-aria-components";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
@@ -48,6 +48,30 @@ function useCounterPill({
     resolvedAriaLabel: ariaLabel == null ? ariaLabel : `${ariaLabel}, ${spoken}`
   };
 }
+function usePressedState({ pressed, defaultPressed, onPressedChange }) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultPressed ?? false);
+  const isPressed = pressed ?? uncontrolled;
+  return {
+    isPressed,
+    onSelectionChange: (next) => {
+      if (pressed == null) {
+        setUncontrolled(next);
+      }
+      onPressedChange?.(next);
+    }
+  };
+}
+function restoreDomProps(raw, domProps) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...raw,
+      ...domProps,
+      id: raw.id ?? domProps.id,
+      tabIndex: raw.tabIndex ?? domProps.tabIndex
+    }
+  );
+}
 const Toggle = React.forwardRef(
   ({
     className,
@@ -59,6 +83,10 @@ const Toggle = React.forwardRef(
     countLabel,
     children,
     "aria-label": ariaLabel,
+    pressed,
+    defaultPressed,
+    onPressedChange,
+    disabled,
     ...props
   }, ref) => {
     const { pill, resolvedAriaLabel } = useCounterPill({
@@ -68,14 +96,24 @@ const Toggle = React.forwardRef(
       countLabel,
       ariaLabel
     });
+    const { isPressed, onSelectionChange } = usePressedState({
+      pressed,
+      defaultPressed,
+      onPressedChange
+    });
     return /* @__PURE__ */ jsxs(
-      TogglePrimitive.Root,
+      ToggleButton,
       {
         ref,
         "data-slot": "toggle",
+        "data-state": isPressed ? "on" : "off",
         "aria-label": resolvedAriaLabel,
         className: cn(toggleVariants({ variant, size }), className),
         ...props,
+        isSelected: isPressed,
+        onChange: onSelectionChange,
+        isDisabled: disabled,
+        render: (domProps) => restoreDomProps(props, domProps),
         children: [
           children,
           pill
@@ -84,9 +122,10 @@ const Toggle = React.forwardRef(
     );
   }
 );
-Toggle.displayName = TogglePrimitive.Root.displayName;
+Toggle.displayName = "Toggle";
 export {
   Toggle,
+  restoreDomProps,
   toggleVariants,
   useCounterPill
 };

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

@@ -1,3 +1,4 @@
+import { type Control, type FieldPath, type FieldValues, type UseFormReturn } from "react-hook-form";
 import type { FormStateAdapter } from "../props/components/form.prop.js";
 /**
  * Context carrying a framework-agnostic {@link FormStateAdapter}. `FormRoot` provides it on the
@@ -7,11 +8,39 @@ import type { FormStateAdapter } from "../props/components/form.prop.js";
 export declare const FormAdapterContext: import("react").Context<FormStateAdapter | null>;
 /** Read the active form-state adapter, or `null` when `FormRoot` runs the react-hook-form path. */
 export declare function useFormAdapter(): FormStateAdapter | null;
+/** Form-wide options shared by BOTH paths — currently the antd-style form-level `disabled`. */
+export interface FormOptionsContextValue {
+    disabled: boolean;
+    submitting?: boolean;
+}
+/** Defaults to enabled so a `FormField`/`FormFieldControl` outside a `FormRoot` keeps working. */
+export declare const FormOptionsContext: import("react").Context<FormOptionsContextValue>;
+/**
+ * Whether the surrounding `FormRoot` disables its fields (`FormRoot disabled`). Read it for the
+ * action buttons, which are NOT fields and so are never disabled automatically.
+ */
+export declare function useFormDisabled(): boolean;
 /**
  * Whether the surrounding `FormRoot` is currently submitting — works for BOTH paths: the adapter's
  * `isSubmitting` (e.g. Inertia's `processing`) or react-hook-form's `formState.isSubmitting`.
  */
 export declare function useFormSubmitting(): boolean;
+/**
+ * The react-hook-form instance of the surrounding `FormRoot` (antd `Form.useFormInstance`) — for
+ * `setValue`/`trigger`/`getValues` deep inside a form without prop-drilling `form`. Throws on the
+ * adapter path, which has no RHF instance; use {@link useFormAdapter} there.
+ */
+export declare function useFormInstance<TFieldValues extends FieldValues = FieldValues>(): UseFormReturn<TFieldValues>;
+export declare function getFallbackFormControl(): Control<FieldValues>;
+/**
+ * Subscribe to a field's value (antd `Form.useWatch`) — the "show this section only when `plan`
+ * is `enterprise`" case, WITHOUT re-rendering the whole form. Omit `name` for every value.
+ * Works on both paths: react-hook-form's `useWatch`, or the adapter's `getValue`/`getValues`.
+ *
+ * Returns `unknown` — the same contract as `FormFieldControl`'s render-prop `value`. Narrow at the
+ * call site (`String(v ?? "")`, a Zod parse, a type guard).
+ */
+export declare function useFormWatch<TFieldValues extends FieldValues = FieldValues>(name?: FieldPath<TFieldValues>): unknown;
 /**
  * Normalise a control's change payload to a bare value. The `FormFieldControl` render-prop spreads
  * `onChange` onto a control that may call it with a DOM `ChangeEvent` (native `<Input>`) OR a raw

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;