import { jsx as e, jsxs as r } from "react/jsx-runtime";
import { useCallback as t } from "react";
import F from "../../Form.js";
import R from "../../hooks/useZodForm.js";
import i from "../../../box/Box.js";
import n from "../../../field/Field.js";
import d from "../../../field/components/field-label/FieldLabel.js";
import c from "../../../field/components/field-control/FieldControl.js";
import m from "../../../simple-input/SimpleInput.js";
import o from "../../../button/Button.js";
import a from "../../../text/Text.js";
import { o as N, c as k, s as w } from "../../../../types-Brp6Qwfh.js";
const E = N({
  email: w().email("Please enter a valid email"),
  age: k.number({ invalid_type_error: "Age must be a number" }).min(18, "Must be 18+").max(100, "Must be 100 or under")
}), _ = () => {
  const l = R({
    schema: E,
    // onChange mode gives immediate validation feedback on each keystroke
    mode: "onChange",
    defaultValues: { email: "", age: 18 }
  }), u = l.watch("email"), { isValid: p, isDirty: h, isSubmitted: g, errors: b } = l.formState, v = t((s) => {
    console.log(s), alert("Form submitted!");
  }, []), f = t(() => {
    alert(`Current email: ${l.getValues("email") || "(empty)"}`);
  }, [l]), y = t(() => {
    l.setValue("email", "sample@example.com", { shouldValidate: !0, shouldDirty: !0, shouldTouch: !0 });
  }, [l]), x = t(() => {
    l.reset();
  }, [l]), V = t(() => {
    l.reset({ email: "new@example.com", age: 30 });
  }, [l]), S = t(async () => {
    const s = await l.trigger();
    alert(s ? "Form is valid!" : "Form has errors!");
  }, [l]), C = t(() => {
    l.clearErrors();
  }, [l]);
  return /* @__PURE__ */ e(F, { form: l, onSubmit: v, children: /* @__PURE__ */ r(i, { className: "flex flex-col gap-[var(--spacing-6)]", children: [
    /* @__PURE__ */ r(i, { className: "flex flex-col gap-[var(--spacing-4)]", children: [
      /* @__PURE__ */ r(n, { name: "email", children: [
        /* @__PURE__ */ e(d, { required: !0, children: "Email" }),
        /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(m, { type: "email", placeholder: "user@example.com" }) })
      ] }),
      /* @__PURE__ */ r(n, { name: "age", children: [
        /* @__PURE__ */ e(d, { required: !0, children: "Age" }),
        /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(m, { type: "number", placeholder: "18" }) })
      ] })
    ] }),
    /* @__PURE__ */ r(i, { className: "flex flex-wrap gap-[var(--spacing-2)]", children: [
      /* @__PURE__ */ e(o, { type: "button", variant: "outline", label: "getValues()", onClick: f }),
      /* @__PURE__ */ e(o, { type: "button", variant: "outline", label: "setValue(email)", onClick: y }),
      /* @__PURE__ */ e(o, { type: "button", variant: "outline", label: "reset()", onClick: x }),
      /* @__PURE__ */ e(o, { type: "button", variant: "outline", label: "reset(values)", onClick: V }),
      /* @__PURE__ */ e(o, { type: "button", variant: "outline", label: "trigger()", onClick: S }),
      /* @__PURE__ */ e(o, { type: "button", variant: "outline", label: "clearErrors()", onClick: C }),
      /* @__PURE__ */ e(o, { type: "submit", variant: "default", label: "Submit" })
    ] }),
    /* @__PURE__ */ r(i, { className: "p-[var(--spacing-4)] rounded-[var(--border-radius-md)] bg-[var(--base-muted)] border border-solid border-[var(--base-border)]", children: [
      /* @__PURE__ */ e(a, { type: "small", children: "Live Form State" }),
      /* @__PURE__ */ r(i, { className: "mt-[var(--spacing-2)] flex flex-col gap-[var(--spacing-1)]", children: [
        /* @__PURE__ */ r(a, { type: "small", children: [
          "email (watched): ",
          u || "—"
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          "isValid: ",
          String(p)
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          "isDirty: ",
          String(h)
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          "isSubmitted: ",
          String(g)
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          "errors: ",
          JSON.stringify(b)
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r(i, { className: "p-[var(--spacing-4)] rounded-[var(--border-radius-md)] border border-solid border-[var(--base-border)]", children: [
      /* @__PURE__ */ e(a, { type: "small", children: "RHF API Reference" }),
      /* @__PURE__ */ r(i, { className: "mt-[var(--spacing-2)] flex flex-col gap-[var(--spacing-1)]", children: [
        /* @__PURE__ */ r(a, { type: "small", children: [
          /* @__PURE__ */ e("code", { children: "getValues(name?)" }),
          " — Returns current value(s). Non-reactive; does not trigger re-renders."
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          /* @__PURE__ */ e("code", { children: "setValue(name, value, options?)" }),
          " — Imperatively sets a field. Use ",
          /* @__PURE__ */ e("code", { children: "shouldValidate" }),
          ", ",
          /* @__PURE__ */ e("code", { children: "shouldDirty" }),
          ",",
          " ",
          /* @__PURE__ */ e("code", { children: "shouldTouch" }),
          " to control side effects."
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          /* @__PURE__ */ e("code", { children: "reset(values?)" }),
          " — Resets to defaultValues (or provided values). Clears errors and dirty/touched state."
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          /* @__PURE__ */ e("code", { children: "trigger(name?)" }),
          " — Manually triggers validation. Returns ",
          /* @__PURE__ */ e("code", { children: "Promise<boolean>" }),
          "."
        ] }),
        /* @__PURE__ */ r(a, { type: "small", children: [
          /* @__PURE__ */ e("code", { children: "clearErrors(name?)" }),
          " — Removes errors without re-running validation rules."
        ] })
      ] })
    ] })
  ] }) });
};
export {
  _ as default
};
//# sourceMappingURL=ReactHookFormAPIWrapper.js.map
