@formatica/react 0.1.0

package/dist/formatica-react.es.js

@@ -0,0 +1,1379 @@
+import { extractFields as ne, evaluateCondition as se, getRule as ae, isFieldNode as O } from "@formatica/core";
+export * from "@formatica/core";
+import { useRef as L, useState as S, useCallback as D, createContext as oe, useContext as le, useEffect as B } from "react";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+function ie(e) {
+  switch (e.type) {
+    case "tags":
+    case "checkbox-group":
+      return [];
+    case "checkbox":
+    case "switch":
+      return !1;
+    case "number":
+    case "slider":
+    case "file":
+      return null;
+    default:
+      return "";
+  }
+}
+function ce(e) {
+  const n = {};
+  for (const s of e)
+    n[s.name] = s.defaultValue ?? ie(s);
+  return n;
+}
+function ue(e) {
+  return e ? typeof e == "string" ? e.split("|").map(Z) : Array.isArray(e) ? e.map(Z) : Object.entries(e).filter(([, n]) => n !== !1 && n !== void 0).map(([n, s]) => ({
+    name: n,
+    params: typeof s == "object" && s !== null ? s : { [n]: s }
+  })) : [];
+}
+function Z(e) {
+  const [n = "", ...s] = e.split(":"), r = s.join(":"), a = {};
+  if (r) {
+    const o = r.split(",");
+    if (n === "between" && o.length === 2)
+      a.min = Number(o[0]), a.max = Number(o[1]);
+    else if (n === "pattern")
+      a.pattern = r;
+    else if (a[n] = o.length === 1 ? o[0] : o, o.length === 1) {
+      const i = Number(o[0]);
+      Number.isNaN(i) || (a[n] = i, n === "minLength" && (a.min = i), n === "maxLength" && (a.max = i));
+    }
+  }
+  return { name: n, params: a };
+}
+function de(e, n) {
+  const s = ne(e.fields), r = L(ce(s)), a = L(s), [o, i] = S(() => ({
+    ...r.current
+  })), [u, l] = S({}), [m, d] = S({}), [h, f] = S({}), [C, v] = S(!1), [p, b] = S(0), k = L(o);
+  k.current = o;
+  const x = L(u);
+  x.current = u;
+  const F = Object.values(u).every((y) => y.length === 0), R = Object.values(h).some(Boolean), j = D((y, $) => {
+    i((N) => ({ ...N, [y]: $ })), f((N) => ({ ...N, [y]: !0 }));
+  }, []), H = D((y) => k.current[y], []), T = D(
+    async (y, $) => {
+      const N = a.current.find((E) => E.name === y);
+      if (!N) return [];
+      if (N.condition && !se(N.condition, $))
+        return [];
+      const I = ue(N.rules);
+      N.required && !I.some((E) => E.name === "required") && I.unshift({ name: "required", params: {} });
+      const z = [], te = {
+        values: $,
+        getFieldValue: (E) => $[E]
+      };
+      for (const E of I) {
+        const G = ae(E.name);
+        if (!G) continue;
+        const W = await G($[y], E.params, te);
+        typeof W == "string" && z.push(W);
+      }
+      return z;
+    },
+    []
+  ), A = D(
+    async (y) => {
+      const $ = await T(y, k.current);
+      return l((N) => ({ ...N, [y]: $ })), d((N) => ({ ...N, [y]: !0 })), $.length === 0;
+    },
+    [T]
+  ), V = D(async () => {
+    const y = k.current, $ = {};
+    let N = !0;
+    for (const I of a.current) {
+      const z = await T(I.name, y);
+      $[I.name] = z, z.length > 0 && (N = !1);
+    }
+    return l($), N;
+  }, [T]), P = D(
+    async (y) => {
+      v(!0), b((N) => N + 1);
+      const $ = {};
+      for (const N of a.current)
+        $[N.name] = !0;
+      d($);
+      try {
+        if (!await V()) return;
+        await y({ ...k.current });
+      } finally {
+        v(!1);
+      }
+    },
+    [V]
+  ), _ = D(() => {
+    i({ ...r.current }), l({}), d({}), f({});
+  }, []), U = D(() => {
+    const y = {};
+    for (const $ of a.current)
+      y[$.name] = null;
+    i(y), l({});
+  }, []), q = D((y, $) => {
+    const N = Array.isArray($) ? $ : [$];
+    l((I) => ({ ...I, [y]: N }));
+  }, []), c = D((y) => {
+    l(($) => {
+      const N = { ...$ };
+      return delete N[y], N;
+    });
+  }, []), w = D(() => {
+    l({});
+  }, []);
+  return {
+    values: o,
+    errors: u,
+    touched: m,
+    dirty: h,
+    isValid: F,
+    isDirty: R,
+    isSubmitting: C,
+    submitCount: p,
+    setFieldValue: j,
+    validate: V,
+    validateField: A,
+    submit: P,
+    reset: _,
+    clear: U,
+    setError: q,
+    clearError: c,
+    clearErrors: w,
+    getFieldValue: H
+  };
+}
+const ee = oe(null);
+function Te() {
+  const e = le(ee);
+  if (!e) throw new Error("useFormContext must be used within a FormProvider");
+  return e;
+}
+function fe({
+  label: e,
+  required: n,
+  errors: s,
+  touched: r = !0,
+  helpText: a,
+  tooltip: o,
+  disabled: i,
+  readOnly: u,
+  fieldName: l,
+  children: m,
+  className: d,
+  style: h
+}) {
+  const [f, C] = S(!1), v = r && s !== void 0 && s.length > 0, p = l ? `fc-field-${l}` : void 0, b = l ? `fc-error-${l}` : void 0;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: `relative mb-4 ${i ? "opacity-50 cursor-not-allowed" : ""} ${u ? "fc-readonly" : ""} ${d ?? ""}`,
+      style: h,
+      children: [
+        e && /* @__PURE__ */ g("div", { className: "mb-1.5 flex items-center gap-1", children: [
+          /* @__PURE__ */ g("label", { htmlFor: p, className: "block text-sm font-medium text-gray-700", children: [
+            e,
+            n && /* @__PURE__ */ t("span", { className: "text-red-500 ml-0.5", "aria-hidden": "true", children: "*" })
+          ] }),
+          o && /* @__PURE__ */ g(
+            "span",
+            {
+              className: "relative inline-flex",
+              onMouseEnter: () => C(!0),
+              onMouseLeave: () => C(!1),
+              onFocus: () => C(!0),
+              onBlur: () => C(!1),
+              children: [
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-200 text-gray-500 text-xs hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500/40",
+                    "aria-label": `Info: ${o}`,
+                    tabIndex: 0,
+                    children: "i"
+                  }
+                ),
+                f && /* @__PURE__ */ g(
+                  "div",
+                  {
+                    role: "tooltip",
+                    className: "absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white shadow-lg whitespace-nowrap",
+                    children: [
+                      o,
+                      /* @__PURE__ */ t("div", { className: "absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-900" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { id: p, children: m }),
+        v && /* @__PURE__ */ t("div", { children: s.map((k, x) => /* @__PURE__ */ t(
+          "p",
+          {
+            id: x === 0 ? b : void 0,
+            className: "mt-1 text-xs text-red-500",
+            role: "alert",
+            children: k
+          },
+          `${k}-${x}`
+        )) }),
+        a && !v && /* @__PURE__ */ t("p", { className: "mt-1 text-xs text-gray-400", children: a })
+      ]
+    }
+  );
+}
+const me = "w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-colors duration-200 fc-text-input";
+function J({
+  value: e,
+  onChange: n,
+  onBlur: s,
+  disabled: r,
+  placeholder: a,
+  inputType: o = "text",
+  readOnly: i,
+  prefix: u,
+  suffix: l,
+  maxLength: m,
+  className: d
+}) {
+  const v = `${me} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${u ? "rounded-l-none" : ""} ${l ? "rounded-r-none" : ""} ${d ?? ""}`.trim(), p = /* @__PURE__ */ t(
+    "input",
+    {
+      type: o,
+      className: v,
+      style: { borderColor: void 0 },
+      value: e ?? "",
+      onChange: (b) => n(b.target.value),
+      onFocus: (b) => {
+        b.target.style.borderColor = "var(--fc-color-primary, #3b82f6)";
+      },
+      onBlur: (b) => {
+        b.target.style.borderColor = "", s == null || s();
+      },
+      disabled: r,
+      placeholder: a,
+      readOnly: i,
+      maxLength: m,
+      "aria-disabled": r || void 0,
+      "aria-readonly": i || void 0
+    }
+  );
+  return u || l ? /* @__PURE__ */ g("div", { className: "flex items-stretch", children: [
+    u && /* @__PURE__ */ t("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500", children: u }),
+    p,
+    l && /* @__PURE__ */ t("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500", children: l })
+  ] }) : p;
+}
+const pe = "w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-colors duration-200 fc-number-input";
+function be({
+  value: e,
+  onChange: n,
+  onBlur: s,
+  disabled: r,
+  placeholder: a,
+  min: o,
+  max: i,
+  step: u = 1,
+  precision: l,
+  readOnly: m,
+  prefix: d,
+  suffix: h,
+  className: f
+}) {
+  const b = `${pe} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${d ? "rounded-l-none" : ""} ${h ? "rounded-r-none" : ""} ${f ?? ""}`.trim();
+  function k(F) {
+    const R = F.target.value;
+    if (R === "") {
+      n(null);
+      return;
+    }
+    let j = Number.parseFloat(R);
+    Number.isNaN(j) || (l !== void 0 && (j = Number.parseFloat(j.toFixed(l))), n(j));
+  }
+  const x = /* @__PURE__ */ t(
+    "input",
+    {
+      type: "number",
+      className: b,
+      value: e ?? "",
+      onChange: k,
+      onFocus: (F) => {
+        F.target.style.borderColor = "var(--fc-color-primary, #3b82f6)";
+      },
+      onBlur: (F) => {
+        F.target.style.borderColor = "", s == null || s();
+      },
+      disabled: r,
+      placeholder: a,
+      min: o,
+      max: i,
+      step: u,
+      readOnly: m,
+      "aria-disabled": r || void 0,
+      "aria-readonly": m || void 0
+    }
+  );
+  return d || h ? /* @__PURE__ */ g("div", { className: "flex items-stretch", children: [
+    d && /* @__PURE__ */ t("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500", children: d }),
+    x,
+    h && /* @__PURE__ */ t("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500", children: h })
+  ] }) : x;
+}
+const ge = "w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 resize-y focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-colors duration-200 fc-textarea-input";
+function ye({
+  value: e,
+  onChange: n,
+  onBlur: s,
+  disabled: r,
+  placeholder: a,
+  rows: o = 3,
+  readOnly: i,
+  autoResize: u,
+  maxLength: l,
+  className: m
+}) {
+  const d = L(null), h = D(() => {
+    if (!u || !d.current) return;
+    const p = d.current;
+    p.style.height = "auto", p.style.height = `${p.scrollHeight}px`;
+  }, [u]);
+  B(() => {
+    h();
+  }, [e, h]);
+  const v = `${ge} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${u ? "resize-none overflow-hidden" : ""} ${m ?? ""}`.trim();
+  return /* @__PURE__ */ t(
+    "textarea",
+    {
+      ref: d,
+      className: v,
+      value: e ?? "",
+      onChange: (p) => {
+        n(p.target.value);
+      },
+      onFocus: (p) => {
+        p.target.style.borderColor = "var(--fc-color-primary, #3b82f6)";
+      },
+      onBlur: (p) => {
+        p.target.style.borderColor = "", s == null || s();
+      },
+      disabled: r,
+      placeholder: a,
+      rows: o,
+      readOnly: i,
+      maxLength: l,
+      "aria-disabled": r || void 0,
+      "aria-readonly": i || void 0
+    }
+  );
+}
+function he({
+  value: e,
+  onChange: n,
+  onBlur: s,
+  disabled: r,
+  placeholder: a = "Select...",
+  options: o,
+  multiple: i = !1,
+  searchable: u = !1,
+  clearable: l = !1,
+  className: m
+}) {
+  const [d, h] = S(!1), [f, C] = S(""), [v, p] = S(-1), b = L(null), k = L(null), x = e == null ? [] : Array.isArray(e) ? e : [e], F = (() => {
+    if (x.length === 0 || i) return "";
+    const c = o.find((w) => w.value === x[0]);
+    return (c == null ? void 0 : c.label) ?? String(x[0]);
+  })(), R = f ? o.filter((c) => c.label.toLowerCase().includes(f.toLowerCase())) : o;
+  function j(c) {
+    return x.includes(c);
+  }
+  function H(c) {
+    const w = o.find((y) => y.value === c);
+    return (w == null ? void 0 : w.label) ?? String(c);
+  }
+  const T = D(() => {
+    h(!0), p(-1), C(""), setTimeout(() => {
+      var c;
+      return (c = k.current) == null ? void 0 : c.focus();
+    }, 0);
+  }, []), A = D(() => {
+    h(!1), C(""), s == null || s();
+  }, [s]);
+  function V() {
+    r || (d ? A() : T());
+  }
+  function P(c) {
+    if (!c.disabled)
+      if (i) {
+        const w = [...x], y = w.indexOf(c.value);
+        y >= 0 ? w.splice(y, 1) : w.push(c.value), n(w);
+      } else
+        n(c.value), A();
+  }
+  function _(c) {
+    if (r) return;
+    const w = x.filter((y) => y !== c);
+    n(w.length ? w : i ? [] : null);
+  }
+  function U(c) {
+    c.stopPropagation(), n(i ? [] : null);
+  }
+  function q(c) {
+    if (!d) {
+      (c.key === "Enter" || c.key === " " || c.key === "ArrowDown") && (c.preventDefault(), T());
+      return;
+    }
+    switch (c.key) {
+      case "ArrowDown":
+        c.preventDefault(), p((w) => Math.min(w + 1, R.length - 1));
+        break;
+      case "ArrowUp":
+        c.preventDefault(), p((w) => Math.max(w - 1, 0));
+        break;
+      case "Enter":
+        c.preventDefault(), v >= 0 && R[v] && P(R[v]);
+        break;
+      case "Escape":
+        c.preventDefault(), A();
+        break;
+    }
+  }
+  return B(() => {
+    function c(w) {
+      b.current && !b.current.contains(w.target) && A();
+    }
+    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
+  }, [A]), /* @__PURE__ */ g(
+    "div",
+    {
+      ref: b,
+      className: `relative w-full ${r ? "opacity-50 cursor-not-allowed" : ""} ${m ?? ""}`,
+      children: [
+        /* @__PURE__ */ g(
+          "div",
+          {
+            role: "combobox",
+            "aria-expanded": d,
+            "aria-haspopup": "listbox",
+            tabIndex: 0,
+            className: `flex min-h-[38px] w-full cursor-pointer items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors duration-200 ${d ? "ring-2 ring-blue-500/20" : ""} ${r ? "pointer-events-none bg-gray-100" : ""}`,
+            style: d ? { borderColor: "var(--fc-color-primary, #3b82f6)" } : {},
+            onClick: V,
+            onKeyDown: q,
+            children: [
+              /* @__PURE__ */ g("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: [
+                i && x.map((c) => /* @__PURE__ */ g(
+                  "span",
+                  {
+                    className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs",
+                    style: {
+                      backgroundColor: "color-mix(in srgb, var(--fc-color-primary, #3b82f6) 15%, white)",
+                      color: "var(--fc-color-primary, #3b82f6)"
+                    },
+                    children: [
+                      H(c),
+                      /* @__PURE__ */ t(
+                        "button",
+                        {
+                          type: "button",
+                          className: "ml-0.5",
+                          style: { color: "var(--fc-color-primary, #3b82f6)" },
+                          "aria-label": "Remove",
+                          onClick: (w) => {
+                            w.stopPropagation(), _(c);
+                          },
+                          children: "×"
+                        }
+                      )
+                    ]
+                  },
+                  String(c)
+                )),
+                !i && F && /* @__PURE__ */ t("span", { className: "truncate", children: F }),
+                x.length === 0 && !i && /* @__PURE__ */ t("span", { className: "text-gray-400", children: a }),
+                i && x.length === 0 && /* @__PURE__ */ t("span", { className: "text-gray-400", children: a })
+              ] }),
+              l && x.length > 0 && !r && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  className: "ml-1 shrink-0 text-gray-400 hover:text-gray-600 transition-colors duration-200",
+                  "aria-label": "Clear selection",
+                  onClick: U,
+                  children: "×"
+                }
+              ),
+              /* @__PURE__ */ t(
+                "svg",
+                {
+                  className: `ml-1 h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200 ${d ? "rotate-180" : ""}`,
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ t(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        d && /* @__PURE__ */ g("div", { className: "absolute z-50 mt-1 w-full rounded-md border border-gray-200 bg-white shadow-lg", children: [
+          u && /* @__PURE__ */ t("div", { className: "border-b border-gray-200 p-2", children: /* @__PURE__ */ t(
+            "input",
+            {
+              ref: k,
+              type: "text",
+              className: "w-full rounded border border-gray-300 px-2 py-1 text-sm focus:outline-none fc-select-search",
+              placeholder: "Search...",
+              value: f,
+              onChange: (c) => C(c.target.value),
+              onKeyDown: q,
+              onFocus: (c) => {
+                c.target.style.borderColor = "var(--fc-color-primary, #3b82f6)";
+              },
+              onBlur: (c) => {
+                c.target.style.borderColor = "";
+              }
+            }
+          ) }),
+          /* @__PURE__ */ g("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: [
+            R.map((c, w) => /* @__PURE__ */ t(
+              "li",
+              {
+                role: "option",
+                "aria-selected": j(c.value),
+                className: `cursor-pointer px-3 py-2 text-sm transition-colors duration-200 ${j(c.value) ? "" : "text-gray-900"} ${v === w ? "bg-gray-100" : ""} ${c.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50"}`,
+                style: j(c.value) ? {
+                  backgroundColor: "color-mix(in srgb, var(--fc-color-primary, #3b82f6) 8%, white)",
+                  color: "var(--fc-color-primary, #3b82f6)"
+                } : {},
+                onClick: () => P(c),
+                onMouseEnter: () => p(w),
+                children: c.label
+              },
+              String(c.value)
+            )),
+            R.length === 0 && /* @__PURE__ */ t("li", { className: "px-3 py-2 text-sm text-gray-400", children: "No options found" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function xe({
+  value: e,
+  onChange: n,
+  onBlur: s,
+  disabled: r,
+  label: a,
+  className: o
+}) {
+  function i() {
+    r || n(!e);
+  }
+  function u(l) {
+    (l.key === " " || l.key === "Enter") && (l.preventDefault(), i());
+  }
+  return /* @__PURE__ */ g(
+    "label",
+    {
+      className: `inline-flex items-center gap-2 select-none ${r ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${o ?? ""}`,
+      children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            checked: e ?? !1,
+            onChange: () => {
+            },
+            onBlur: s,
+            disabled: r,
+            className: "sr-only"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            role: "checkbox",
+            "aria-checked": e,
+            "aria-disabled": r || void 0,
+            tabIndex: 0,
+            className: `flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 transition-colors duration-200 ${e ? "text-white" : "border-gray-300 bg-white"}`,
+            style: e ? {
+              borderColor: "var(--fc-color-primary, #3b82f6)",
+              backgroundColor: "var(--fc-color-primary, #3b82f6)"
+            } : {},
+            onClick: (l) => {
+              l.preventDefault(), i();
+            },
+            onKeyDown: u,
+            children: e && /* @__PURE__ */ t(
+              "svg",
+              {
+                className: "h-3 w-3",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ t("path", { d: "M2 6l3 3 5-5", strokeLinecap: "round", strokeLinejoin: "round" })
+              }
+            )
+          }
+        ),
+        a && /* @__PURE__ */ t("span", { className: "text-sm text-gray-700", children: a })
+      ]
+    }
+  );
+}
+function ve({
+  name: e,
+  value: n,
+  onChange: s,
+  onBlur: r,
+  disabled: a,
+  options: o,
+  inline: i = !1,
+  className: u
+}) {
+  function l(f) {
+    return n === f;
+  }
+  function m(f) {
+    return a === !0 || !!f.disabled;
+  }
+  function d(f) {
+    m(f) || s(f.value);
+  }
+  function h(f, C) {
+    (f.key === " " || f.key === "Enter") && (f.preventDefault(), d(C));
+  }
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      role: "radiogroup",
+      className: `${i ? "flex flex-wrap gap-4" : "flex flex-col gap-2"} ${u ?? ""}`,
+      children: o.map((f) => /* @__PURE__ */ g(
+        "label",
+        {
+          className: `inline-flex items-center gap-2 select-none ${m(f) ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+          children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "radio",
+                checked: l(f.value),
+                disabled: m(f),
+                className: "sr-only",
+                name: e,
+                onChange: () => d(f),
+                onBlur: r
+              }
+            ),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                role: "radio",
+                "aria-checked": l(f.value),
+                "aria-disabled": m(f) || void 0,
+                tabIndex: 0,
+                className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-200 ${l(f.value) ? "" : "border-gray-300"}`,
+                style: l(f.value) ? { borderColor: "var(--fc-color-primary, #3b82f6)" } : {},
+                onClick: () => d(f),
+                onKeyDown: (C) => h(C, f),
+                children: l(f.value) && /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: "h-2.5 w-2.5 rounded-full",
+                    style: {
+                      backgroundColor: "var(--fc-color-primary, #3b82f6)"
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: "text-sm text-gray-700", children: f.label })
+          ]
+        },
+        String(f.value)
+      ))
+    }
+  );
+}
+function we({
+  value: e,
+  onChange: n,
+  onBlur: s,
+  disabled: r,
+  activeLabel: a,
+  inactiveLabel: o,
+  className: i
+}) {
+  function u() {
+    r || n(!e);
+  }
+  function l(m) {
+    (m.key === " " || m.key === "Enter") && (m.preventDefault(), u());
+  }
+  return /* @__PURE__ */ g(
+    "label",
+    {
+      className: `inline-flex items-center gap-2 select-none ${r ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${i ?? ""}`,
+      children: [
+        o && /* @__PURE__ */ t("span", { className: "text-sm text-gray-600", children: o }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            checked: e ?? !1,
+            onChange: u,
+            onBlur: s,
+            disabled: r,
+            className: "sr-only"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": e,
+            "aria-disabled": r || void 0,
+            tabIndex: 0,
+            className: `relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] ${e ? "" : "bg-gray-300"} ${r ? "pointer-events-none" : "focus:outline-none focus:ring-2 focus:ring-blue-500/20"}`,
+            style: e ? { backgroundColor: "var(--fc-color-primary, #3b82f6)" } : {},
+            onClick: u,
+            onKeyDown: l,
+            children: /* @__PURE__ */ t(
+              "span",
+              {
+                className: `pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] ${e ? "translate-x-5" : "translate-x-0"}`,
+                "aria-hidden": "true"
+              }
+            )
+          }
+        ),
+        a && /* @__PURE__ */ t("span", { className: "text-sm text-gray-600", children: a })
+      ]
+    }
+  );
+}
+function Ne({
+  value: e,
+  onChange: n,
+  onBlur: s,
+  disabled: r,
+  min: a = 0,
+  max: o = 100,
+  step: i = 1,
+  showTooltip: u = !0,
+  className: l
+}) {
+  const [m, d] = S(!1), h = e ?? a, f = o - a, C = f === 0 ? 0 : (h - a) / f * 100;
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: `relative w-full py-2 ${r ? "opacity-50 cursor-not-allowed" : ""} ${l ?? ""}`,
+      children: [
+        u && m && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "absolute -top-8 rounded bg-gray-800 px-2 py-1 text-xs text-white shadow-sm transition-opacity duration-200",
+            style: { left: `calc(${C}% - 16px)` },
+            children: h
+          }
+        ),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "range",
+            value: h,
+            onChange: (v) => n(Number.parseFloat(v.target.value)),
+            onMouseDown: () => d(!0),
+            onMouseUp: () => d(!1),
+            onTouchStart: () => d(!0),
+            onTouchEnd: () => d(!1),
+            onFocus: () => d(!0),
+            onBlur: (v) => {
+              d(!1), s == null || s();
+            },
+            disabled: r,
+            min: a,
+            max: o,
+            step: i,
+            "aria-valuenow": h,
+            "aria-valuemin": a,
+            "aria-valuemax": o,
+            "aria-disabled": r || void 0,
+            className: "h-2 w-full cursor-pointer appearance-none rounded-full bg-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 disabled:pointer-events-none",
+            style: { accentColor: "var(--fc-color-primary, #3b82f6)" }
+          }
+        ),
+        /* @__PURE__ */ g("div", { className: "mt-1 flex justify-between text-xs text-gray-400", children: [
+          /* @__PURE__ */ t("span", { children: a }),
+          /* @__PURE__ */ t("span", { children: o })
+        ] })
+      ]
+    }
+  );
+}
+function M(e) {
+  return e.replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`);
+}
+function Ce(e) {
+  if (!e) return {};
+  const n = {};
+  if (e.colors)
+    for (const [s, r] of Object.entries(e.colors))
+      r && (n[`--fc-color-${M(s)}`] = r);
+  if (e.typography)
+    for (const [s, r] of Object.entries(e.typography))
+      r && (n[`--fc-${M(s)}`] = r);
+  if (e.spacing)
+    for (const [s, r] of Object.entries(e.spacing))
+      r && (n[`--fc-${M(s)}`] = r);
+  if (e.borders)
+    for (const [s, r] of Object.entries(e.borders))
+      r && (n[`--fc-border-${M(s)}`] = r);
+  if (e.shadows)
+    for (const [s, r] of Object.entries(e.shadows))
+      r && (n[`--fc-shadow-${M(s)}`] = r);
+  if (e.transitions)
+    for (const [s, r] of Object.entries(e.transitions))
+      r && (n[`--fc-transition-${M(s)}`] = r);
+  return e.cssVars && Object.assign(n, e.cssVars), n;
+}
+function Q(e, n, s, r, a) {
+  var l, m;
+  const o = e.translations;
+  if (!o) return a;
+  const i = o[s];
+  if ((l = i == null ? void 0 : i.messages) != null && l[n]) return i.messages[n];
+  const u = o[r];
+  return ((m = u == null ? void 0 : u.messages) == null ? void 0 : m[n]) ?? a;
+}
+function X(e, n, s, r, a) {
+  const o = e.translations;
+  if (!o) return a;
+  const i = o[s];
+  if (i != null && i[n]) return i[n];
+  const u = o[r];
+  return (u == null ? void 0 : u[n]) ?? a;
+}
+function Y(e) {
+  return Array.isArray(e) ? e : [];
+}
+function $e({ field: e, value: n, onChange: s, onBlur: r, disabled: a }) {
+  switch (e.type) {
+    case "text":
+      return /* @__PURE__ */ t(
+        J,
+        {
+          value: String(n ?? ""),
+          onChange: s,
+          onBlur: r,
+          disabled: a,
+          placeholder: e.placeholder,
+          inputType: e.inputType,
+          readOnly: e.readOnly
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ t(
+        be,
+        {
+          value: n,
+          onChange: s,
+          onBlur: r,
+          disabled: a,
+          placeholder: e.placeholder,
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          readOnly: e.readOnly
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ t(
+        ye,
+        {
+          value: String(n ?? ""),
+          onChange: s,
+          onBlur: r,
+          disabled: a,
+          placeholder: e.placeholder,
+          rows: e.rows,
+          readOnly: e.readOnly
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ t(
+        he,
+        {
+          value: n,
+          onChange: s,
+          onBlur: r,
+          disabled: a,
+          placeholder: e.placeholder,
+          options: Y(e.options)
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ t(
+        xe,
+        {
+          value: !!n,
+          onChange: s,
+          onBlur: r,
+          disabled: a
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ t(
+        ve,
+        {
+          name: e.name,
+          value: n,
+          onChange: s,
+          onBlur: r,
+          disabled: a,
+          options: Y(e.options)
+        }
+      );
+    case "switch":
+      return /* @__PURE__ */ t(
+        we,
+        {
+          value: !!n,
+          onChange: s,
+          onBlur: r,
+          disabled: a
+        }
+      );
+    case "slider":
+      return /* @__PURE__ */ t(
+        Ne,
+        {
+          value: n,
+          onChange: s,
+          onBlur: r,
+          disabled: a,
+          min: e.min,
+          max: e.max,
+          step: e.step
+        }
+      );
+    default:
+      return /* @__PURE__ */ t(
+        J,
+        {
+          value: String(n ?? ""),
+          onChange: s,
+          onBlur: r,
+          disabled: a,
+          placeholder: e.placeholder
+        }
+      );
+  }
+}
+function re(e) {
+  return e === "full" ? { gridColumn: "1 / -1" } : e === "auto" ? { gridColumn: "auto" } : typeof e == "number" ? { gridColumn: `span ${e} / span ${e}` } : { gridColumn: "span 12 / span 12" };
+}
+function ke(e, n, s) {
+  const r = n.errors[e.name] ?? [], a = e.disabled === !0 || !1, o = {
+    field: e,
+    value: n.values[e.name],
+    onChange: (l) => n.setFieldValue(e.name, l),
+    onBlur: () => n.validateField(e.name),
+    errors: r,
+    disabled: a
+  }, u = (s == null ? void 0 : s[e.type]) ?? $e;
+  return /* @__PURE__ */ t(
+    fe,
+    {
+      label: e.label,
+      required: e.required,
+      errors: r,
+      touched: n.touched[e.name],
+      helpText: e.helpText,
+      tooltip: e.tooltip,
+      disabled: e.disabled,
+      readOnly: e.readOnly,
+      fieldName: e.name,
+      className: e.className,
+      style: e.style,
+      children: /* @__PURE__ */ t(u, { ...o })
+    },
+    e.name
+  );
+}
+function Se(e, n, s) {
+  const a = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  }[e.align ?? "stretch"] ?? "items-stretch", o = e.gap !== void 0 ? typeof e.gap == "number" ? `${e.gap}px` : e.gap : "1rem";
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: `grid grid-cols-12 ${a} ${e.className ?? ""}`,
+      style: { gap: o },
+      role: "group",
+      children: e.children.map((i, u) => /* @__PURE__ */ t(
+        "div",
+        {
+          style: re(O(i) ? i.span : void 0),
+          children: K(i, n, s)
+        },
+        O(i) ? i.name : `row-child-${u}`
+      ))
+    }
+  );
+}
+function Fe({
+  node: e,
+  form: n,
+  components: s
+}) {
+  const [r, a] = S(e.collapsed ?? !1), o = e.title ? `fc-group-${e.title.toLowerCase().replace(/\s+/g, "-")}` : void 0;
+  function i() {
+    e.collapsible && a(!r);
+  }
+  const u = e.collapsible ? "button" : "div";
+  return /* @__PURE__ */ g(
+    "fieldset",
+    {
+      className: `rounded-lg border border-gray-200 bg-white ${e.className ?? ""}`,
+      "aria-labelledby": o,
+      children: [
+        (e.title || e.description) && /* @__PURE__ */ t("div", { className: "border-b border-gray-100 px-4 py-3", children: /* @__PURE__ */ g(
+          u,
+          {
+            type: e.collapsible ? "button" : void 0,
+            className: `flex w-full items-center justify-between text-left ${e.collapsible ? "cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500/40 rounded" : ""}`,
+            "aria-expanded": e.collapsible ? !r : void 0,
+            "aria-controls": e.collapsible ? `fc-group-body-${o}` : void 0,
+            onClick: i,
+            children: [
+              /* @__PURE__ */ g("div", { children: [
+                e.title && /* @__PURE__ */ t(
+                  "legend",
+                  {
+                    id: o,
+                    className: "text-sm font-semibold text-gray-800",
+                    children: e.title
+                  }
+                ),
+                e.description && /* @__PURE__ */ t("p", { className: "mt-0.5 text-xs text-gray-500", children: e.description })
+              ] }),
+              e.collapsible && /* @__PURE__ */ t(
+                "svg",
+                {
+                  className: `h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200 ${r ? "" : "rotate-180"}`,
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ t(
+                    "path",
+                    {
+                      fillRule: "evenodd",
+                      d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        !r && /* @__PURE__ */ t(
+          "div",
+          {
+            id: e.collapsible ? `fc-group-body-${o}` : void 0,
+            className: "p-4",
+            children: e.children.map((l, m) => /* @__PURE__ */ t("div", { children: K(l, n, s) }, O(l) ? l.name : `group-child-${m}`))
+          }
+        )
+      ]
+    }
+  );
+}
+function De({
+  node: e,
+  form: n,
+  components: s
+}) {
+  const [r, a] = S(0), [o, i] = S(/* @__PURE__ */ new Set()), u = e.steps, l = u.length, m = r === 0, d = r === l - 1;
+  function h() {
+    d || (i((p) => {
+      const b = new Set(p);
+      return b.add(r), b;
+    }), a((p) => p + 1));
+  }
+  function f() {
+    m || a((p) => p - 1);
+  }
+  function C(p) {
+    e.linear && p > r || a(p);
+  }
+  const v = u[r];
+  return /* @__PURE__ */ g("div", { className: `space-y-6 ${e.className ?? ""}`, children: [
+    /* @__PURE__ */ t("nav", { "aria-label": "Form steps", className: "flex items-center justify-center", children: /* @__PURE__ */ t("ol", { className: "flex items-center gap-0", children: u.map((p, b) => /* @__PURE__ */ g("li", { className: "flex items-center", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          disabled: e.linear === !0 && b > r,
+          "aria-current": b === r ? "step" : void 0,
+          "aria-label": `Step ${b + 1}: ${p.title}`,
+          className: `relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500/40 ${o.has(b) && b !== r ? "border-green-500 bg-green-500 text-white" : b !== r ? "border-gray-300 bg-white text-gray-500" : "text-white"} ${e.linear === !0 && b > r ? "cursor-not-allowed" : "cursor-pointer hover:shadow-md"}`,
+          style: b === r ? {
+            borderColor: "var(--fc-color-primary, #3b82f6)",
+            backgroundColor: "var(--fc-color-primary, #3b82f6)"
+          } : {},
+          onClick: () => C(b),
+          children: o.has(b) && b !== r ? /* @__PURE__ */ t(
+            "svg",
+            {
+              className: "h-4 w-4 transition-transform duration-200",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ t(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ) : /* @__PURE__ */ t("span", { children: b + 1 })
+        }
+      ),
+      b < u.length - 1 && /* @__PURE__ */ t(
+        "div",
+        {
+          className: `mx-1 h-0.5 w-8 transition-colors duration-300 sm:w-12 ${o.has(b) ? "bg-green-500" : "bg-gray-200"}`
+        }
+      )
+    ] }, p.title)) }) }),
+    v && /* @__PURE__ */ g("div", { className: "text-center", children: [
+      /* @__PURE__ */ t("h3", { className: "text-base font-semibold text-gray-800", children: v.title }),
+      v.description && /* @__PURE__ */ t("p", { className: "mt-1 text-sm text-gray-500", children: v.description })
+    ] }),
+    v && /* @__PURE__ */ t("div", { children: v.children.map((p, b) => /* @__PURE__ */ t("div", { children: K(p, n, s) }, O(p) ? p.name : `step-child-${b}`)) }),
+    /* @__PURE__ */ g("div", { className: "flex items-center justify-between border-t border-gray-100 pt-4", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          disabled: m,
+          className: "rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-150 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50",
+          onClick: f,
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ g("span", { className: "text-xs text-gray-400", children: [
+        r + 1,
+        " / ",
+        l
+      ] }),
+      d ? /* @__PURE__ */ t("div", { className: "w-[72px]" }) : /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: "rounded-md px-4 py-2 text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500/40",
+          style: {
+            backgroundColor: "var(--fc-color-primary, #3b82f6)"
+          },
+          onClick: h,
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function Re({
+  node: e,
+  form: n,
+  components: s
+}) {
+  const [r, a] = S(0), o = e.tabs, i = o[r], u = `fc-tabpanel-${r}`;
+  function l(m) {
+    a(m);
+  }
+  return /* @__PURE__ */ g("div", { className: e.className ?? "", children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: "relative flex border-b border-gray-200",
+        role: "tablist",
+        "aria-orientation": "horizontal",
+        children: o.map((m, d) => /* @__PURE__ */ g(
+          "button",
+          {
+            id: `fc-tab-${d}`,
+            type: "button",
+            role: "tab",
+            "aria-selected": d === r,
+            "aria-controls": u,
+            tabIndex: d === r ? 0 : -1,
+            className: `relative px-4 py-2.5 text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500/40 ${d !== r ? "text-gray-500 hover:text-gray-700" : ""}`,
+            style: d === r ? { color: "var(--fc-color-primary, #3b82f6)" } : {},
+            onClick: () => l(d),
+            children: [
+              m.title,
+              d === r && /* @__PURE__ */ t(
+                "span",
+                {
+                  className: "absolute inset-x-0 -bottom-px h-0.5 transition-all duration-200",
+                  style: {
+                    backgroundColor: "var(--fc-color-primary, #3b82f6)"
+                  }
+                }
+              )
+            ]
+          },
+          m.title
+        ))
+      }
+    ),
+    i && /* @__PURE__ */ t(
+      "div",
+      {
+        id: u,
+        role: "tabpanel",
+        "aria-labelledby": `fc-tab-${r}`,
+        tabIndex: 0,
+        className: "pt-4",
+        children: i.children.map((m, d) => /* @__PURE__ */ t("div", { children: K(m, n, s) }, O(m) ? m.name : `tab-child-${d}`))
+      }
+    )
+  ] });
+}
+function je(e) {
+  return e.label ? /* @__PURE__ */ g("div", { className: `relative my-4 ${e.className ?? ""}`, children: [
+    /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ t("div", { className: "w-full border-t border-gray-200" }) }),
+    /* @__PURE__ */ t("div", { className: "relative flex justify-center", children: /* @__PURE__ */ t("span", { className: "bg-white px-3 text-sm text-gray-500", children: e.label }) })
+  ] }) : /* @__PURE__ */ t("hr", { className: `my-4 border-gray-200 ${e.className ?? ""}` });
+}
+function K(e, n, s) {
+  if (O(e))
+    return ke(e, n, s);
+  switch (e.type) {
+    case "row":
+      return Se(e, n, s);
+    case "group":
+      return /* @__PURE__ */ t(Fe, { node: e, form: n, components: s });
+    case "steps":
+      return /* @__PURE__ */ t(De, { node: e, form: n, components: s });
+    case "tabs":
+      return /* @__PURE__ */ t(Re, { node: e, form: n, components: s });
+    case "divider":
+      return je(e);
+    case "html":
+      return /* @__PURE__ */ t(
+        "div",
+        {
+          className: e.className ?? "",
+          dangerouslySetInnerHTML: { __html: e.content }
+        }
+      );
+    default:
+      return null;
+  }
+}
+function Ae({
+  schema: e,
+  onSubmit: n,
+  onError: s,
+  locale: r = "en",
+  fallbackLocale: a = "en",
+  theme: o,
+  components: i,
+  className: u
+}) {
+  var b, k;
+  const l = de(e), m = Ce(o), d = Q(e, "title", r, a, ""), h = Q(e, "description", r, a, ""), f = X(e, "submit", r, a, "Submit"), C = X(e, "reset", r, a, "Reset"), v = async (x) => {
+    x.preventDefault(), n ? await l.submit(async (F) => {
+      await n(F);
+    }) : await l.validate(), !l.isValid && s && s(l.errors);
+  }, p = (x) => {
+    x.preventDefault(), l.reset();
+  };
+  return /* @__PURE__ */ t(ee.Provider, { value: l, children: /* @__PURE__ */ g(
+    "form",
+    {
+      className: `fc-form-builder ${((b = o == null ? void 0 : o.components) == null ? void 0 : b.form) ?? ""} ${u ?? ""}`.trim(),
+      style: m,
+      onSubmit: v,
+      onReset: p,
+      noValidate: !0,
+      children: [
+        (d || h) && /* @__PURE__ */ g("div", { className: "mb-6", children: [
+          d && /* @__PURE__ */ t("h2", { className: "text-lg font-semibold text-gray-900", children: d }),
+          h && /* @__PURE__ */ t("p", { className: "mt-1 text-sm text-gray-500", children: h })
+        ] }),
+        e.fields.map((x, F) => /* @__PURE__ */ t(
+          "div",
+          {
+            style: O(x) ? re(x.span) : void 0,
+            children: K(x, l, i)
+          },
+          O(x) ? x.name : `node-${F}`
+        )),
+        /* @__PURE__ */ g("div", { className: "mt-6 flex items-center gap-3", children: [
+          /* @__PURE__ */ g(
+            "button",
+            {
+              type: "submit",
+              disabled: l.isSubmitting,
+              className: `fc-submit-btn rounded-md px-4 py-2 text-sm font-medium text-white transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50 ${((k = o == null ? void 0 : o.components) == null ? void 0 : k.button) ?? ""}`,
+              style: {
+                backgroundColor: "var(--fc-color-primary, #3b82f6)"
+              },
+              children: [
+                l.isSubmitting && /* @__PURE__ */ t(
+                  "span",
+                  {
+                    className: "mr-2 inline-block h-3.5 w-3.5 animate-spin rounded-full border-2 border-white border-t-transparent",
+                    "aria-hidden": "true"
+                  }
+                ),
+                f
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "reset",
+              disabled: l.isSubmitting,
+              className: "rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-150 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-50",
+              children: C
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  Ae as FormBuilder,
+  ee as FormContext,
+  de as useForm,
+  Te as useFormContext
+};
+//# sourceMappingURL=formatica-react.es.js.map