asterui 0.12.68 → 0.12.70

package/dist/components/Form.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { UseFormReturn, FieldValues, SubmitHandler, UseFormProps, FieldArrayPath, FieldArray } from 'react-hook-form';
+import { UseFormReturn, FieldValues, SubmitHandler, UseFormProps, FieldArrayPath, FieldArray, useWatch } from 'react-hook-form';
 export interface FormProps<TFieldValues extends FieldValues = FieldValues> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
     form?: UseFormReturn<TFieldValues>;
     onFinish?: SubmitHandler<TFieldValues>;
@@ -94,7 +94,7 @@ export interface FormListProps<TFieldValues extends FieldValues = FieldValues> {
 declare function FormRoot<TFieldValues extends FieldValues = FieldValues>({ form: externalForm, onFinish, onFinishFailed, initialValues, layout, labelWidth, size, disabled, children, className, noValidate, ...props }: FormProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 declare function FormItem({ name, label, floatingLabel, help, required, rules, valuePropName, inline, className, children, tooltip, extra, hasFeedback, dependencies, validateTrigger, initialValue, hidden, addonBefore, addonAfter, 'data-testid': testId, }: FormItemProps): import("react/jsx-runtime").JSX.Element;
 declare function FormList<TFieldValues extends FieldValues = FieldValues>({ name, children, }: FormListProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
-export declare function useFormInstance<TFieldValues extends FieldValues = FieldValues>(): UseFormReturn<TFieldValues, any, TFieldValues> & {
+export declare function useFormInstance<TFieldValues extends FieldValues = FieldValues>(options?: UseFormProps<TFieldValues>): UseFormReturn<TFieldValues, any, TFieldValues> & {
     setFieldValue: import('react-hook-form').UseFormSetValue<TFieldValues>;
     getFieldValue: (name: any) => any;
     getFieldsValue: import('react-hook-form').UseFormGetValues<TFieldValues>;
@@ -118,5 +118,8 @@ export declare const Form: typeof FormRoot & {
     List: typeof FormList;
     ErrorList: typeof FormErrorList;
     useForm: typeof useFormInstance;
+    useWatch: typeof useWatch;
 };
+export declare const useForm: typeof useFormInstance;
+export { useWatch };
 export type { UseFormReturn as FormInstance };

package/dist/components/Form.js

@@ -1,8 +1,9 @@
 import { jsx as t, jsxs as E } from "react/jsx-runtime";
-import { createContext as be, useId as ae, useEffect as ie, useRef as K, isValidElement as U, cloneElement as $e, useContext as Ne } from "react";
-import { useForm as ce, useFieldArray as Fe, useWatch as ke, Controller as Ve } from "react-hook-form";
-import { useConfig as we } from "../providers/ConfigProvider.js";
-const Ce = "input", Le = "input-xs", Ee = "input-sm", Ae = "input-md", Se = "input-lg", je = "input-xl", ze = "floating-label", Me = "loading", Pe = "loading-spinner", Re = "loading-xs", Te = "tooltip", Be = "tooltip-top", le = "validator-hint", G = be(void 0), Y = {
+import { createContext as Fe, useId as ae, useEffect as ie, useRef as O, isValidElement as U, cloneElement as Ne, useContext as ke } from "react";
+import { useWatch as ce, useForm as de, useFieldArray as Ve, Controller as we } from "react-hook-form";
+import { useWatch as et } from "react-hook-form";
+import { useConfig as Ce } from "../providers/ConfigProvider.js";
+const Le = "input", Ee = "input-xs", Ae = "input-sm", Se = "input-md", je = "input-lg", ze = "input-xl", Me = "floating-label", Pe = "loading", Re = "loading-spinner", Te = "loading-xs", We = "tooltip", Be = "tooltip-top", le = "validator-hint", G = Fe(void 0), Y = {
   email: {
     value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
     message: "Please enter a valid email address"
@@ -17,285 +18,293 @@ const Ce = "input", Le = "input-xs", Ee = "input-sm", Ae = "input-md", Se = "inp
   }
 };
 function Q() {
-  const s = Ne(G);
-  if (!s)
+  const i = ke(G);
+  if (!i)
     throw new Error("Form compound components must be used within Form");
-  return s;
+  return i;
 }
 function Ie({
-  form: s,
+  form: i,
   onFinish: a,
-  onFinishFailed: r,
-  initialValues: i,
-  layout: $ = "vertical",
-  labelWidth: g = 60,
+  onFinishFailed: s,
+  initialValues: n,
+  layout: m = "vertical",
+  labelWidth: p = 60,
   size: w,
-  disabled: x = !1,
-  children: c,
+  disabled: y = !1,
+  children: d,
   className: l = "",
-  noValidate: y = !0,
+  noValidate: $ = !0,
   ...b
 }) {
-  const { componentSize: N } = we(), u = w ?? N ?? "md", z = ce({
-    defaultValues: i
-  }), F = s || z, I = async (C) => {
-    if (C.preventDefault(), await F.trigger())
-      a && a(F.getValues());
-    else if (r) {
-      const d = F.formState.errors, k = [], M = (P, W = "") => {
+  const { componentSize: F } = Ce(), f = w ?? F ?? "md", z = de({
+    defaultValues: n
+  }), N = i || z, I = async (C) => {
+    if (C.preventDefault(), await N.trigger())
+      a && a(N.getValues());
+    else if (s) {
+      const u = N.formState.errors, k = [], M = (P, D = "") => {
         for (const R in P) {
-          const T = W ? `${W}.${R}` : R, V = P[R];
+          const T = D ? `${D}.${R}` : R, V = P[R];
           V?.message ? k.push({ name: T, errors: [V.message] }) : typeof V == "object" && V !== null && M(V, T);
         }
       };
-      M(d), r({ values: F.getValues(), errorFields: k });
+      M(u), s({ values: N.getValues(), errorFields: k });
     }
   }, S = (C) => {
-    C.preventDefault(), F.reset(i);
+    C.preventDefault(), N.reset(n);
   };
-  return /* @__PURE__ */ t(G.Provider, { value: { form: F, layout: $, labelWidth: g, size: u, disabled: x }, children: /* @__PURE__ */ t("form", { onSubmit: I, onReset: S, className: l, noValidate: y, ...b, children: c }) });
+  return /* @__PURE__ */ t(G.Provider, { value: { form: N, layout: m, labelWidth: p, size: f, disabled: y }, children: /* @__PURE__ */ t("form", { onSubmit: I, onReset: S, className: l, noValidate: $, ...b, children: d }) });
 }
-function We({
-  name: s,
+function De({
+  name: i,
   label: a,
-  floatingLabel: r,
-  help: i,
-  required: $ = !1,
-  rules: g,
+  floatingLabel: s,
+  help: n,
+  required: m = !1,
+  rules: p,
   valuePropName: w = "value",
-  inline: x = !1,
-  className: c = "",
+  inline: y = !1,
+  className: d = "",
   children: l,
-  tooltip: y,
+  tooltip: $,
   extra: b,
-  hasFeedback: N = !1,
-  dependencies: u,
+  hasFeedback: F = !1,
+  dependencies: f,
   validateTrigger: z = "onChange",
-  initialValue: F,
+  initialValue: N,
   hidden: I = !1,
   addonBefore: S,
   addonAfter: C,
-  "data-testid": f
+  "data-testid": h
 }) {
-  const { form: d, size: k, listName: M, layout: P, labelWidth: W, disabled: R } = Q(), T = ae(), V = ae();
-  if (!s)
-    return /* @__PURE__ */ t("div", { className: `${x ? "w-auto" : "w-full"} ${c}`, style: I ? { display: "none" } : void 0, children: l });
-  let h;
-  Array.isArray(s) ? h = (M ? [M, ...s] : s).join(".") : h = s, ie(() => {
-    F !== void 0 && d.getValues(h) === void 0 && d.setValue(h, F);
+  const { form: u, size: k, listName: M, layout: P, labelWidth: D, disabled: R } = Q(), T = ae(), V = ae();
+  if (!i)
+    return /* @__PURE__ */ t("div", { className: `${y ? "w-auto" : "w-full"} ${d}`, style: I ? { display: "none" } : void 0, children: l });
+  let g;
+  Array.isArray(i) ? g = (M ? [M, ...i] : i).join(".") : g = i, ie(() => {
+    N !== void 0 && u.getValues(g) === void 0 && u.setValue(g, N);
   }, []);
-  const O = ke({
-    control: d.control,
-    name: u,
-    disabled: !u || u.length === 0
-  }), _ = K(d);
-  _.current = d;
-  const D = K(void 0);
+  const X = ce({
+    control: u.control,
+    name: f,
+    disabled: !f || f.length === 0
+  }), H = O(u);
+  H.current = u;
+  const Z = O(void 0);
   ie(() => {
-    if (!u || u.length === 0) return;
-    if (D.current === void 0) {
-      D.current = JSON.stringify(O);
+    if (!f || f.length === 0) return;
+    if (Z.current === void 0) {
+      Z.current = JSON.stringify(X);
       return;
     }
-    const e = JSON.stringify(O);
-    if (D.current !== e) {
-      D.current = e;
-      const n = _.current.formState.touchedFields;
-      h.split(".").reduce((p, H) => p?.[H], n) && _.current.trigger(h);
+    const e = JSON.stringify(X);
+    if (Z.current !== e) {
+      Z.current = e;
+      const r = H.current.formState.touchedFields;
+      g.split(".").reduce((v, K) => v?.[K], r) && H.current.trigger(g);
     }
-  }, [O, u, h]);
-  const B = ((e) => {
-    const n = e.split(".");
-    let o = d.formState.errors;
-    for (const p of n) {
+  }, [X, f, g]);
+  const W = ((e) => {
+    const r = e.split(".");
+    let o = u.formState.errors;
+    for (const v of r) {
       if (!o) break;
-      o = o[p];
+      o = o[v];
     }
     return o;
-  })(h), A = B?.message, de = g ? Array.isArray(g) ? g : [g] : [], X = K(d);
-  X.current = d;
-  const ue = {
-    getFieldValue: (e) => X.current.getValues(e),
-    getFieldsValue: () => X.current.getValues()
-  }, me = de.map(
-    (e) => typeof e == "function" ? e(ue) : e
-  ), j = {}, Z = [], q = [];
-  $ && (j.required = "This field is required");
-  for (const e of me) {
-    if (e.required && (j.required = typeof e.required == "string" ? e.required : e.message || "This field is required"), e.type && Y[e.type] && Z.push({
+  })(g), A = W?.message, me = p ? Array.isArray(p) ? p : [p] : [], J = O(u);
+  J.current = u;
+  const fe = {
+    getFieldValue: (e) => J.current.getValues(e),
+    getFieldsValue: () => J.current.getValues()
+  }, he = me.map(
+    (e) => typeof e == "function" ? e(fe) : e
+  ), j = {}, q = [], _ = [];
+  m && (j.required = "This field is required");
+  for (const e of he) {
+    if (e.required && (j.required = typeof e.required == "string" ? e.required : e.message || "This field is required"), e.type && Y[e.type] && q.push({
       pattern: Y[e.type].value,
       message: e.message || Y[e.type].message
     }), e.min !== void 0) {
-      const n = typeof e.min == "object" ? e.min.value : e.min, o = typeof e.min == "object" ? e.min.message : e.message || `Minimum length is ${n} characters`;
-      j.minLength = { value: n, message: o };
+      const r = typeof e.min == "object" ? e.min.value : e.min, o = typeof e.min == "object" ? e.min.message : e.message || `Minimum length is ${r} characters`;
+      j.minLength = { value: r, message: o };
     }
     if (e.max !== void 0) {
-      const n = typeof e.max == "object" ? e.max.value : e.max, o = typeof e.max == "object" ? e.max.message : e.message || `Maximum length is ${n} characters`;
-      j.maxLength = { value: n, message: o };
+      const r = typeof e.max == "object" ? e.max.value : e.max, o = typeof e.max == "object" ? e.max.message : e.message || `Maximum length is ${r} characters`;
+      j.maxLength = { value: r, message: o };
     }
     if (e.pattern) {
-      const n = e.pattern instanceof RegExp ? e.pattern : e.pattern.value, o = e.pattern instanceof RegExp ? e.message || "Invalid format" : e.pattern.message;
-      Z.push({ pattern: n, message: o });
+      const r = e.pattern instanceof RegExp ? e.pattern : e.pattern.value, o = e.pattern instanceof RegExp ? e.message || "Invalid format" : e.pattern.message;
+      q.push({ pattern: r, message: o });
     }
-    if (e.validate && q.push(e.validate), e.validator) {
-      const n = e.validator;
-      q.push(async (o) => {
+    if (e.validate && _.push(e.validate), e.validator) {
+      const r = e.validator;
+      _.push(async (o) => {
         try {
-          return await n(e, o), !0;
-        } catch (p) {
-          return p instanceof Error ? p.message : String(p);
+          return await r(e, o), !0;
+        } catch (v) {
+          return v instanceof Error ? v.message : String(v);
         }
       });
     }
   }
-  (Z.length > 0 || q.length > 0) && (j.validate = async (e) => {
-    for (const { pattern: n, message: o } of Z)
-      if (e && !n.test(e))
+  (q.length > 0 || _.length > 0) && (j.validate = async (e) => {
+    for (const { pattern: r, message: o } of q)
+      if (e && !r.test(e))
         return o;
-    for (const n of q) {
-      const o = await n(e);
+    for (const r of _) {
+      const o = await r(e);
       if (o !== !0)
         return o;
     }
     return !0;
   });
-  const ee = Array.isArray(z) ? z : [z], te = ee.includes("onChange"), fe = ee.includes("onBlur"), he = ({ hasError: e, isValidating: n }) => n ? /* @__PURE__ */ t("span", { className: `${Me} ${Pe} ${Re} text-base-content/50` }) : e ? /* @__PURE__ */ t("svg", { className: "w-4 h-4 text-error", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ t("svg", { className: "w-4 h-4 text-success", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), ge = () => /* @__PURE__ */ t("div", { className: `${Te} ${Be} ml-1`, "data-tip": y, children: /* @__PURE__ */ t("svg", { className: "w-4 h-4 text-base-content/50 cursor-help", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) });
+  const ee = Array.isArray(z) ? z : [z], te = ee.includes("onChange"), ge = ee.includes("onBlur"), pe = ({ hasError: e, isValidating: r }) => r ? /* @__PURE__ */ t("span", { className: `${Pe} ${Re} ${Te} text-base-content/50` }) : e ? /* @__PURE__ */ t("svg", { className: "w-4 h-4 text-error", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ t("svg", { className: "w-4 h-4 text-success", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }), ve = () => /* @__PURE__ */ t("div", { className: `${We} ${Be} ml-1`, "data-tip": $, children: /* @__PURE__ */ t("svg", { className: "w-4 h-4 text-base-content/50 cursor-help", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) });
   return /* @__PURE__ */ t(
-    Ve,
+    we,
     {
-      name: h,
-      control: d.control,
+      name: g,
+      control: u.control,
       rules: j,
-      render: ({ field: e, fieldState: n }) => {
-        const { value: o, onChange: p, onBlur: H, ref: pe } = e, ve = n.isTouched && d.formState.isValidating, v = {
+      render: ({ field: e, fieldState: r }) => {
+        const { value: o, onChange: v, onBlur: K, ref: xe } = e, ye = r.isTouched && u.formState.isValidating, x = {
           id: T,
-          ref: pe,
-          "aria-invalid": B ? !0 : void 0,
-          "aria-describedby": B ? V : void 0,
-          "data-testid": f ? `${f}-input` : void 0
+          ref: xe,
+          "aria-invalid": W ? !0 : void 0,
+          "aria-describedby": W ? V : void 0,
+          "data-testid": h ? `${h}-input` : void 0
         };
-        v.onBlur = () => {
-          H(), fe && d.trigger(h);
+        x.onBlur = () => {
+          K(), ge && u.trigger(g);
         };
         const se = U(l) ? l.props.onChange : void 0;
-        w === "checked" ? (v.checked = o, v.onChange = (m) => {
-          p(m.target.checked), te && d.trigger(h), se?.(m);
-        }) : (v.value = o || "", v.onChange = (m) => {
-          m && m.target !== void 0 ? p(m.target.value) : p(m), te && d.trigger(h), se?.(m);
-        }), k && U(l) && (l.props.size || (v.size = k)), B && (v.color = "error", v["aria-invalid"] = !0), R && (v.disabled = !0), (S || C) && (v.unstyled = !0);
-        const re = U(l) ? $e(l, v) : l, L = P === "horizontal", ne = P === "inline", oe = {
-          xs: Le,
-          sm: Ee,
-          md: Ae,
-          lg: Se,
-          xl: je
-        }, xe = () => {
-          const m = /* @__PURE__ */ E("div", { className: `${L ? "flex-1" : ""} ${N ? "relative" : ""}`, children: [
+        w === "checked" ? (x.checked = o, x.onChange = (c) => {
+          v(c.target.checked), te && u.trigger(g), se?.(c);
+        }) : (x.value = o ?? "", x.onChange = (c) => {
+          if (c && c.target !== void 0) {
+            const B = c.target.value ?? c.currentTarget?.value;
+            v(B ?? c);
+          } else
+            v(c);
+          te && u.trigger(g), se?.(c);
+        }), k && U(l) && (l.props.size || (x.size = k)), W && (x.color = "error", x["aria-invalid"] = !0), R && (x.disabled = !0), (S || C) && (x.unstyled = !0);
+        const re = U(l) ? Ne(l, x) : l, L = P === "horizontal", ne = P === "inline", oe = {
+          xs: Ee,
+          sm: Ae,
+          md: Se,
+          lg: je,
+          xl: ze
+        }, $e = () => {
+          const c = /* @__PURE__ */ E("div", { className: `${L ? "flex-1" : ""} ${F ? "relative" : ""}`, children: [
             re,
-            N && n.isTouched && /* @__PURE__ */ t("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ t(he, { hasError: !!B, isValidating: ve }) })
+            F && r.isTouched && /* @__PURE__ */ t("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ t(pe, { hasError: !!W, isValidating: ye }) })
           ] });
-          if (r) {
-            const J = [
-              ze,
+          if (s) {
+            const B = [
+              Me,
               k && oe[k]
             ].filter(Boolean).join(" ");
-            return /* @__PURE__ */ E("label", { className: J, children: [
+            return /* @__PURE__ */ E("label", { className: B, children: [
               re,
               /* @__PURE__ */ E("span", { children: [
-                r,
-                $ && /* @__PURE__ */ t("span", { className: "text-error ml-1", children: "*" })
+                s,
+                m && /* @__PURE__ */ t("span", { className: "text-error ml-1", children: "*" })
               ] })
             ] });
           }
-          return m;
-        }, ye = (m) => {
-          if (!S && !C) return m;
-          const J = [
-            Ce,
+          return c;
+        }, be = (c) => {
+          if (!S && !C) return c;
+          const B = [
+            Le,
             "flex",
             "items-center",
             "gap-2",
             k && oe[k]
           ].filter(Boolean).join(" ");
-          return /* @__PURE__ */ E("label", { className: J, children: [
+          return /* @__PURE__ */ E("label", { className: B, children: [
             S && /* @__PURE__ */ t("span", { className: "text-base-content/70", children: S }),
-            m,
+            c,
             C && /* @__PURE__ */ t("span", { className: "text-base-content/70", children: C })
           ] });
         };
-        return /* @__PURE__ */ E("div", { className: `${x ? "w-auto" : "w-full"} ${L ? "mb-4" : ""} ${ne ? "inline-flex mr-4" : ""} ${c}`, style: I ? { display: "none" } : void 0, "data-testid": f, children: [
+        return /* @__PURE__ */ E("div", { className: `${y ? "w-auto" : "w-full"} ${L ? "mb-4" : ""} ${ne ? "inline-flex mr-4" : ""} ${d}`, style: I ? { display: "none" } : void 0, "data-testid": h, children: [
           /* @__PURE__ */ E("div", { className: L ? "flex items-center gap-4" : "", children: [
-            a && !r && /* @__PURE__ */ t(
+            a && !s && /* @__PURE__ */ t(
               "label",
               {
                 htmlFor: T,
                 className: `block text-sm font-medium ${L ? "flex-shrink-0 text-right" : ""} ${!L && !ne ? "mb-1" : ""}`,
-                style: L ? { width: W } : void 0,
-                "data-testid": f ? `${f}-label` : void 0,
+                style: L ? { width: D } : void 0,
+                "data-testid": h ? `${h}-label` : void 0,
                 children: /* @__PURE__ */ E("span", { className: "flex items-center", children: [
                   a,
-                  $ && /* @__PURE__ */ t("span", { className: "text-error ml-1", children: "*" }),
-                  y && /* @__PURE__ */ t(ge, {})
+                  m && /* @__PURE__ */ t("span", { className: "text-error ml-1", children: "*" }),
+                  $ && /* @__PURE__ */ t(ve, {})
                 ] })
               }
             ),
-            ye(xe())
+            be($e())
           ] }),
-          !L && !x && /* @__PURE__ */ t("p", { id: V, className: `${le} ${A ? "!visible text-error" : ""} min-h-[1.25rem]`, role: A ? "alert" : void 0, "data-testid": f ? `${f}-error` : void 0, children: A || i && /* @__PURE__ */ t("span", { className: "text-base-content/70", children: i }) || " " }),
-          L && (A || i) && /* @__PURE__ */ t("p", { id: V, className: `${le} ${A ? "!visible text-error" : ""} min-h-[1.25rem]`, role: A ? "alert" : void 0, "data-testid": f ? `${f}-error` : void 0, children: A || i && /* @__PURE__ */ t("span", { className: "text-base-content/70", children: i }) }),
-          b && /* @__PURE__ */ t("div", { className: "text-sm text-base-content/60 mt-1", "data-testid": f ? `${f}-extra` : void 0, children: b })
+          !L && !y && /* @__PURE__ */ t("p", { id: V, className: `${le} ${A ? "!visible text-error" : ""} min-h-[1.25rem]`, role: A ? "alert" : void 0, "data-testid": h ? `${h}-error` : void 0, children: A || n && /* @__PURE__ */ t("span", { className: "text-base-content/70", children: n }) || " " }),
+          L && (A || n) && /* @__PURE__ */ t("p", { id: V, className: `${le} ${A ? "!visible text-error" : ""} min-h-[1.25rem]`, role: A ? "alert" : void 0, "data-testid": h ? `${h}-error` : void 0, children: A || n && /* @__PURE__ */ t("span", { className: "text-base-content/70", children: n }) }),
+          b && /* @__PURE__ */ t("div", { className: "text-sm text-base-content/60 mt-1", "data-testid": h ? `${h}-extra` : void 0, children: b })
         ] });
       }
     }
   );
 }
-function De({
-  name: s,
+function Ze({
+  name: i,
   children: a
 }) {
-  const { form: r, layout: i, size: $, disabled: g } = Q(), { fields: w, append: x, remove: c, move: l } = Fe({
-    control: r.control,
-    name: s
-  }), y = w.map((b, N) => ({
+  const { form: s, layout: n, size: m, disabled: p } = Q(), { fields: w, append: y, remove: d, move: l } = Ve({
+    control: s.control,
+    name: i
+  }), $ = w.map((b, F) => ({
     ...b,
-    name: N
+    name: F
   }));
-  return /* @__PURE__ */ t(G.Provider, { value: { form: r, layout: i, size: $, listName: s, disabled: g }, children: a(y, {
-    add: x,
-    remove: c,
+  return /* @__PURE__ */ t(G.Provider, { value: { form: s, layout: n, size: m, listName: i, disabled: p }, children: a($, {
+    add: y,
+    remove: d,
     move: l
   }) });
 }
-function Ze() {
-  const s = ce(), a = s;
-  return a.setFieldValue = s.setValue, a.getFieldValue = (r) => s.getValues(r), a.getFieldsValue = s.getValues, a.setFieldsValue = (r) => {
-    Object.keys(r).forEach((i) => {
-      s.setValue(i, r[i]);
+function ue(i) {
+  const a = de(i), s = a;
+  return s.setFieldValue = a.setValue, s.getFieldValue = (n) => a.getValues(n), s.getFieldsValue = a.getValues, s.setFieldsValue = (n) => {
+    Object.keys(n).forEach((m) => {
+      a.setValue(m, n[m]);
     });
-  }, a.validateFields = s.trigger, a.resetFields = s.reset, a.isFieldTouched = (r) => !!s.formState.touchedFields[r], a.getFieldError = (r) => s.formState.errors[r]?.message, a;
+  }, s.validateFields = a.trigger, s.resetFields = a.reset, s.isFieldTouched = (n) => !!a.formState.touchedFields[n], s.getFieldError = (n) => a.formState.errors[n]?.message, s;
 }
-function qe({ fields: s, className: a = "", "data-testid": r }) {
-  const { form: i } = Q(), { errors: $ } = i.formState, g = (c, l = "") => {
-    const y = [];
-    for (const b in c) {
-      const N = l ? `${l}.${b}` : b, u = c[b];
-      u?.message ? y.push({ field: N, message: u.message }) : typeof u == "object" && u !== null && y.push(...g(u, N));
+function qe({ fields: i, className: a = "", "data-testid": s }) {
+  const { form: n } = Q(), { errors: m } = n.formState, p = (d, l = "") => {
+    const $ = [];
+    for (const b in d) {
+      const F = l ? `${l}.${b}` : b, f = d[b];
+      f?.message ? $.push({ field: F, message: f.message }) : typeof f == "object" && f !== null && $.push(...p(f, F));
     }
-    return y;
-  }, w = g($), x = s ? w.filter((c) => s.includes(c.field)) : w;
-  return x.length === 0 ? null : /* @__PURE__ */ t("ul", { className: `text-error text-sm space-y-1 ${a}`, role: "alert", "data-testid": r, children: x.map((c, l) => /* @__PURE__ */ E("li", { className: "flex items-start gap-2", "data-testid": r ? `${r}-${c.field}` : void 0, children: [
+    return $;
+  }, w = p(m), y = i ? w.filter((d) => i.includes(d.field)) : w;
+  return y.length === 0 ? null : /* @__PURE__ */ t("ul", { className: `text-error text-sm space-y-1 ${a}`, role: "alert", "data-testid": s, children: y.map((d, l) => /* @__PURE__ */ E("li", { className: "flex items-start gap-2", "data-testid": s ? `${s}-${d.field}` : void 0, children: [
     /* @__PURE__ */ t("svg", { className: "w-4 h-4 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-    /* @__PURE__ */ t("span", { children: c.message })
-  ] }, `${c.field}-${l}`)) });
+    /* @__PURE__ */ t("span", { children: d.message })
+  ] }, `${d.field}-${l}`)) });
 }
 const Ue = Object.assign(Ie, {
-  Item: We,
-  List: De,
+  Item: De,
+  List: Ze,
   ErrorList: qe,
-  useForm: Ze
-});
+  useForm: ue,
+  useWatch: ce
+}), Ye = ue;
 export {
   Ue as Form,
-  Ze as useFormInstance
+  Ye as useForm,
+  ue as useFormInstance,
+  et as useWatch
 };
 //# sourceMappingURL=Form.js.map