@formatica/react 0.1.2 → 0.2.3

package/dist/formatica-react.es.js

@@ -1,8 +1,18 @@
-import { extractFields as ne, evaluateCondition as se, getRule as ae, isFieldNode as O } from "@formatica/core";
+import { extractFields as oe, evaluateCondition as le, getRule as ie, isFieldNode as L } 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) {
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import { createContext as B, useContext as ee, useRef as A, useState as F, useCallback as D, useEffect as re } from "react";
+const te = B({});
+function Me({
+  config: e,
+  children: n
+}) {
+  return /* @__PURE__ */ t(te.Provider, { value: e, children: n });
+}
+function ce() {
+  return ee(te);
+}
+function ue(e) {
   switch (e.type) {
     case "tags":
     case "checkbox-group":
@@ -18,171 +28,171 @@ function ie(e) {
       return "";
   }
 }
-function ce(e) {
+function de(e) {
   const n = {};
-  for (const s of e)
-    n[s.name] = s.defaultValue ?? ie(s);
+  for (const a of e)
+    n[a.name] = a.defaultValue ?? ue(a);
   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]) => ({
+function fe(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, a]) => ({
     name: n,
-    params: typeof s == "object" && s !== null ? s : { [n]: s }
+    params: typeof a == "object" && a !== null ? a : { [n]: a }
   })) : [];
 }
 function Z(e) {
-  const [n = "", ...s] = e.split(":"), r = s.join(":"), a = {};
+  const [n = "", ...a] = e.split(":"), r = a.join(":"), s = {};
   if (r) {
     const o = r.split(",");
     if (n === "between" && o.length === 2)
-      a.min = Number(o[0]), a.max = Number(o[1]);
+      s.min = Number(o[0]), s.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));
+      s.pattern = r;
+    else if (s[n] = o.length === 1 ? o[0] : o, o.length === 1) {
+      const l = Number(o[0]);
+      Number.isNaN(l) || (s[n] = l, n === "minLength" && (s.min = l), n === "maxLength" && (s.max = l));
     }
   }
-  return { name: n, params: a };
+  return { name: n, params: s };
 }
-function de(e, n) {
-  const s = ne(e.fields), r = L(ce(s)), a = L(s), [o, i] = S(() => ({
+function me(e, n) {
+  const a = oe(e.fields), r = A(de(a)), s = A(a), [o, l] = F(() => ({
     ...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);
+  })), [u, i] = F({}), [f, d] = F({}), [g, m] = F({}), [h, v] = F(!1), [p, b] = F(0), S = A(o);
+  S.current = o;
+  const $ = A(u);
+  $.current = u;
+  const j = Object.values(u).every((x) => x.length === 0), E = Object.values(g).some(Boolean), R = D((x, C) => {
+    l((N) => ({ ...N, [x]: C })), m((N) => ({ ...N, [x]: !0 }));
+  }, []), M = D((x) => S.current[x], []), k = D(
+    async (x, C) => {
+      const N = s.current.find((I) => I.name === x);
       if (!N) return [];
-      if (N.condition && !se(N.condition, $))
+      if (N.condition && !le(N.condition, C))
         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]
+      const T = fe(N.rules);
+      N.required && !T.some((I) => I.name === "required") && T.unshift({ name: "required", params: {} });
+      const K = [], se = {
+        values: C,
+        getFieldValue: (I) => C[I]
       };
-      for (const E of I) {
-        const G = ae(E.name);
+      for (const I of T) {
+        const G = ie(I.name);
         if (!G) continue;
-        const W = await G($[y], E.params, te);
-        typeof W == "string" && z.push(W);
+        const W = await G(C[x], I.params, se);
+        typeof W == "string" && K.push(W);
       }
-      return z;
+      return K;
     },
     []
-  ), A = D(
-    async (y) => {
-      const $ = await T(y, k.current);
-      return l((N) => ({ ...N, [y]: $ })), d((N) => ({ ...N, [y]: !0 })), $.length === 0;
+  ), O = D(
+    async (x) => {
+      const C = await k(x, S.current);
+      return i((N) => ({ ...N, [x]: C })), d((N) => ({ ...N, [x]: !0 })), C.length === 0;
     },
-    [T]
-  ), V = D(async () => {
-    const y = k.current, $ = {};
+    [k]
+  ), z = D(async () => {
+    const x = S.current, C = {};
     let N = !0;
-    for (const I of a.current) {
-      const z = await T(I.name, y);
-      $[I.name] = z, z.length > 0 && (N = !1);
+    for (const T of s.current) {
+      const K = await k(T.name, x);
+      C[T.name] = K, K.length > 0 && (N = !1);
     }
-    return l($), N;
-  }, [T]), P = D(
-    async (y) => {
+    return i(C), N;
+  }, [k]), q = D(
+    async (x) => {
       v(!0), b((N) => N + 1);
-      const $ = {};
-      for (const N of a.current)
-        $[N.name] = !0;
-      d($);
+      const C = {};
+      for (const N of s.current)
+        C[N.name] = !0;
+      d(C);
       try {
-        if (!await V()) return;
-        await y({ ...k.current });
+        if (!await z()) return;
+        await x({ ...S.current });
       } finally {
         v(!1);
       }
     },
-    [V]
+    [z]
   ), _ = D(() => {
-    i({ ...r.current }), l({}), d({}), f({});
+    l({ ...r.current }), i({}), d({}), m({});
   }, []), 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;
+    const x = {};
+    for (const C of s.current)
+      x[C.name] = null;
+    l(x), i({});
+  }, []), H = D((x, C) => {
+    const N = Array.isArray(C) ? C : [C];
+    i((T) => ({ ...T, [x]: N }));
+  }, []), c = D((x) => {
+    i((C) => {
+      const N = { ...C };
+      return delete N[x], N;
     });
   }, []), w = D(() => {
-    l({});
+    i({});
   }, []);
   return {
     values: o,
     errors: u,
-    touched: m,
-    dirty: h,
-    isValid: F,
-    isDirty: R,
-    isSubmitting: C,
+    touched: f,
+    dirty: g,
+    isValid: j,
+    isDirty: E,
+    isSubmitting: h,
     submitCount: p,
-    setFieldValue: j,
-    validate: V,
-    validateField: A,
-    submit: P,
+    setFieldValue: R,
+    validate: z,
+    validateField: O,
+    submit: q,
     reset: _,
     clear: U,
-    setError: q,
+    setError: H,
     clearError: c,
     clearErrors: w,
-    getFieldValue: H
+    getFieldValue: M
   };
 }
-const ee = oe(null);
-function Te() {
-  const e = le(ee);
+const ne = B(null);
+function Ve() {
+  const e = ee(ne);
   if (!e) throw new Error("useFormContext must be used within a FormProvider");
   return e;
 }
-function fe({
+function pe({
   label: e,
   required: n,
-  errors: s,
+  errors: a,
   touched: r = !0,
-  helpText: a,
+  helpText: s,
   tooltip: o,
-  disabled: i,
+  disabled: l,
   readOnly: u,
-  fieldName: l,
-  children: m,
+  fieldName: i,
+  children: f,
   className: d,
-  style: h
+  style: g
 }) {
-  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(
+  const [m, h] = F(!1), v = r && a !== void 0 && a.length > 0, p = i ? `fc-field-${i}` : void 0, b = i ? `fc-error-${i}` : void 0;
+  return /* @__PURE__ */ y(
     "div",
     {
-      className: `relative mb-4 ${i ? "opacity-50 cursor-not-allowed" : ""} ${u ? "fc-readonly" : ""} ${d ?? ""}`,
-      style: h,
+      className: `relative mb-4 ${l ? "opacity-50 cursor-not-allowed" : ""} ${u ? "fc-readonly" : ""} ${d ?? ""}`,
+      style: g,
       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 && /* @__PURE__ */ y("div", { className: "mb-1.5 flex items-center gap-1", children: [
+          /* @__PURE__ */ y("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(
+          o && /* @__PURE__ */ y(
             "span",
             {
               className: "relative inline-flex",
-              onMouseEnter: () => C(!0),
-              onMouseLeave: () => C(!1),
-              onFocus: () => C(!0),
-              onBlur: () => C(!1),
+              onMouseEnter: () => h(!0),
+              onMouseLeave: () => h(!1),
+              onFocus: () => h(!0),
+              onBlur: () => h(!1),
               children: [
                 /* @__PURE__ */ t(
                   "button",
@@ -194,7 +204,7 @@ function fe({
                     children: "i"
                   }
                 ),
-                f && /* @__PURE__ */ g(
+                m && /* @__PURE__ */ y(
                   "div",
                   {
                     role: "tooltip",
@@ -209,249 +219,300 @@ function fe({
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { id: p, children: m }),
-        v && /* @__PURE__ */ t("div", { children: s.map((k, x) => /* @__PURE__ */ t(
+        /* @__PURE__ */ t("div", { id: p, children: f }),
+        v && /* @__PURE__ */ t("div", { children: a.map((S, $) => /* @__PURE__ */ t(
           "p",
           {
-            id: x === 0 ? b : void 0,
+            id: $ === 0 ? b : void 0,
             className: "mt-1 text-xs text-red-500",
             role: "alert",
-            children: k
+            children: S
           },
-          `${k}-${x}`
+          `${S}-${$}`
         )) }),
-        a && !v && /* @__PURE__ */ t("p", { className: "mt-1 text-xs text-gray-400", children: a })
+        s && !v && /* @__PURE__ */ t("p", { className: "mt-1 text-xs text-gray-400", children: s })
       ]
     }
   );
 }
-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({
+function be({
   value: e,
   onChange: n,
-  onBlur: s,
+  onBlur: a,
   disabled: r,
-  placeholder: a,
-  inputType: o = "text",
-  readOnly: i,
-  prefix: u,
-  suffix: l,
-  maxLength: m,
-  className: d
+  label: s,
+  className: o
 }) {
-  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",
+  function l() {
+    r || n(!e);
+  }
+  function u(i) {
+    (i.key === " " || i.key === "Enter") && (i.preventDefault(), l());
+  }
+  return /* @__PURE__ */ y(
+    "label",
     {
-      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
+      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: a,
+            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: (i) => {
+              i.preventDefault(), l();
+            },
+            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" })
+              }
+            )
+          }
+        ),
+        s && /* @__PURE__ */ t("span", { className: "text-sm text-gray-700", children: s })
+      ]
     }
   );
-  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({
+const ge = "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 ye({
   value: e,
   onChange: n,
-  onBlur: s,
+  onBlur: a,
   disabled: r,
-  placeholder: a,
+  placeholder: s,
   min: o,
-  max: i,
+  max: l,
   step: u = 1,
-  precision: l,
-  readOnly: m,
+  precision: i,
+  readOnly: f,
   prefix: d,
-  suffix: h,
-  className: f
+  suffix: g,
+  className: m
 }) {
-  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 === "") {
+  const b = `${ge} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${d ? "rounded-l-none" : ""} ${g ? "rounded-r-none" : ""} ${m ?? ""}`.trim();
+  function S(j) {
+    const E = j.target.value;
+    if (E === "") {
       n(null);
       return;
     }
-    let j = Number.parseFloat(R);
-    Number.isNaN(j) || (l !== void 0 && (j = Number.parseFloat(j.toFixed(l))), n(j));
+    let R = Number.parseFloat(E);
+    Number.isNaN(R) || (i !== void 0 && (R = Number.parseFloat(R.toFixed(i))), n(R));
   }
-  const x = /* @__PURE__ */ t(
+  const $ = /* @__PURE__ */ t(
     "input",
     {
       type: "number",
       className: b,
       value: e ?? "",
-      onChange: k,
-      onFocus: (F) => {
-        F.target.style.borderColor = "var(--fc-color-primary, #3b82f6)";
+      onChange: S,
+      onFocus: (j) => {
+        j.target.style.borderColor = "var(--fc-color-primary, #3b82f6)";
       },
-      onBlur: (F) => {
-        F.target.style.borderColor = "", s == null || s();
+      onBlur: (j) => {
+        j.target.style.borderColor = "", a == null || a();
       },
       disabled: r,
-      placeholder: a,
+      placeholder: s,
       min: o,
-      max: i,
+      max: l,
       step: u,
-      readOnly: m,
+      readOnly: f,
       "aria-disabled": r || void 0,
-      "aria-readonly": m || void 0
+      "aria-readonly": f || void 0
     }
   );
-  return d || h ? /* @__PURE__ */ g("div", { className: "flex items-stretch", children: [
+  return d || g ? /* @__PURE__ */ y("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;
+    $,
+    g && /* @__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: g })
+  ] }) : $;
 }
-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
+function he({
+  name: e,
+  value: n,
+  onChange: a,
+  onBlur: r,
+  disabled: s,
+  options: o,
+  inline: l = !1,
+  className: u
 }) {
-  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();
+  function i(m) {
+    return n === m;
+  }
+  function f(m) {
+    return s === !0 || !!m.disabled;
+  }
+  function d(m) {
+    f(m) || a(m.value);
+  }
+  function g(m, h) {
+    (m.key === " " || m.key === "Enter") && (m.preventDefault(), d(h));
+  }
   return /* @__PURE__ */ t(
-    "textarea",
+    "div",
     {
-      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
+      role: "radiogroup",
+      className: `${l ? "flex flex-wrap gap-4" : "flex flex-col gap-2"} ${u ?? ""}`,
+      children: o.map((m) => /* @__PURE__ */ y(
+        "label",
+        {
+          className: `inline-flex items-center gap-2 select-none ${f(m) ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+          children: [
+            /* @__PURE__ */ t(
+              "input",
+              {
+                type: "radio",
+                checked: i(m.value),
+                disabled: f(m),
+                className: "sr-only",
+                name: e,
+                onChange: () => d(m),
+                onBlur: r
+              }
+            ),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                role: "radio",
+                "aria-checked": i(m.value),
+                "aria-disabled": f(m) || void 0,
+                tabIndex: 0,
+                className: `flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-200 ${i(m.value) ? "" : "border-gray-300"}`,
+                style: i(m.value) ? { borderColor: "var(--fc-color-primary, #3b82f6)" } : {},
+                onClick: () => d(m),
+                onKeyDown: (h) => g(h, m),
+                children: i(m.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: m.label })
+          ]
+        },
+        String(m.value)
+      ))
     }
   );
 }
-function he({
+function xe({
   value: e,
   onChange: n,
-  onBlur: s,
+  onBlur: a,
   disabled: r,
-  placeholder: a = "Select...",
+  placeholder: s = "Select...",
   options: o,
-  multiple: i = !1,
+  multiple: l = !1,
   searchable: u = !1,
-  clearable: l = !1,
-  className: m
+  clearable: i = !1,
+  className: f
 }) {
-  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);
+  const [d, g] = F(!1), [m, h] = F(""), [v, p] = F(-1), b = A(null), S = A(null), $ = e == null ? [] : Array.isArray(e) ? e : [e], j = (() => {
+    if ($.length === 0 || l) return "";
+    const c = o.find((w) => w.value === $[0]);
+    return (c == null ? void 0 : c.label) ?? String($[0]);
+  })(), E = m ? o.filter((c) => c.label.toLowerCase().includes(m.toLowerCase())) : o;
+  function R(c) {
+    return $.includes(c);
   }
-  function H(c) {
-    const w = o.find((y) => y.value === c);
+  function M(c) {
+    const w = o.find((x) => x.value === c);
     return (w == null ? void 0 : w.label) ?? String(c);
   }
-  const T = D(() => {
-    h(!0), p(-1), C(""), setTimeout(() => {
+  const k = D(() => {
+    g(!0), p(-1), h(""), setTimeout(() => {
       var c;
-      return (c = k.current) == null ? void 0 : c.focus();
+      return (c = S.current) == null ? void 0 : c.focus();
     }, 0);
-  }, []), A = D(() => {
-    h(!1), C(""), s == null || s();
-  }, [s]);
-  function V() {
-    r || (d ? A() : T());
+  }, []), O = D(() => {
+    g(!1), h(""), a == null || a();
+  }, [a]);
+  function z() {
+    r || (d ? O() : k());
   }
-  function P(c) {
+  function q(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);
+      if (l) {
+        const w = [...$], x = w.indexOf(c.value);
+        x >= 0 ? w.splice(x, 1) : w.push(c.value), n(w);
       } else
-        n(c.value), A();
+        n(c.value), O();
   }
   function _(c) {
     if (r) return;
-    const w = x.filter((y) => y !== c);
-    n(w.length ? w : i ? [] : null);
+    const w = $.filter((x) => x !== c);
+    n(w.length ? w : l ? [] : null);
   }
   function U(c) {
-    c.stopPropagation(), n(i ? [] : null);
+    c.stopPropagation(), n(l ? [] : null);
   }
-  function q(c) {
+  function H(c) {
     if (!d) {
-      (c.key === "Enter" || c.key === " " || c.key === "ArrowDown") && (c.preventDefault(), T());
+      (c.key === "Enter" || c.key === " " || c.key === "ArrowDown") && (c.preventDefault(), k());
       return;
     }
     switch (c.key) {
       case "ArrowDown":
-        c.preventDefault(), p((w) => Math.min(w + 1, R.length - 1));
+        c.preventDefault(), p((w) => Math.min(w + 1, E.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]);
+        c.preventDefault(), v >= 0 && E[v] && q(E[v]);
         break;
       case "Escape":
-        c.preventDefault(), A();
+        c.preventDefault(), O();
         break;
     }
   }
-  return B(() => {
+  return re(() => {
     function c(w) {
-      b.current && !b.current.contains(w.target) && A();
+      b.current && !b.current.contains(w.target) && O();
     }
     return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
-  }, [A]), /* @__PURE__ */ g(
+  }, [O]), /* @__PURE__ */ y(
     "div",
     {
       ref: b,
-      className: `relative w-full ${r ? "opacity-50 cursor-not-allowed" : ""} ${m ?? ""}`,
+      className: `relative w-full ${r ? "opacity-50 cursor-not-allowed" : ""} ${f ?? ""}`,
       children: [
-        /* @__PURE__ */ g(
+        /* @__PURE__ */ y(
           "div",
           {
             role: "combobox",
@@ -460,11 +521,11 @@ function he({
             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,
+            onClick: z,
+            onKeyDown: H,
             children: [
-              /* @__PURE__ */ g("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: [
-                i && x.map((c) => /* @__PURE__ */ g(
+              /* @__PURE__ */ y("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: [
+                l && $.map((c) => /* @__PURE__ */ y(
                   "span",
                   {
                     className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs",
@@ -473,7 +534,7 @@ function he({
                       color: "var(--fc-color-primary, #3b82f6)"
                     },
                     children: [
-                      H(c),
+                      M(c),
                       /* @__PURE__ */ t(
                         "button",
                         {
@@ -491,11 +552,11 @@ function he({
                   },
                   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 && j && /* @__PURE__ */ t("span", { className: "truncate", children: j }),
+                $.length === 0 && !l && /* @__PURE__ */ t("span", { className: "text-gray-400", children: s }),
+                l && $.length === 0 && /* @__PURE__ */ t("span", { className: "text-gray-400", children: s })
               ] }),
-              l && x.length > 0 && !r && /* @__PURE__ */ t(
+              i && $.length > 0 && !r && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
@@ -525,17 +586,17 @@ function he({
             ]
           }
         ),
-        d && /* @__PURE__ */ g("div", { className: "absolute z-50 mt-1 w-full rounded-md border border-gray-200 bg-white shadow-lg", children: [
+        d && /* @__PURE__ */ y("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,
+              ref: S,
               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,
+              value: m,
+              onChange: (c) => h(c.target.value),
+              onKeyDown: H,
               onFocus: (c) => {
                 c.target.style.borderColor = "var(--fc-color-primary, #3b82f6)";
               },
@@ -544,189 +605,108 @@ function he({
               }
             }
           ) }),
-          /* @__PURE__ */ g("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: [
-            R.map((c, w) => /* @__PURE__ */ t(
+          /* @__PURE__ */ y("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: [
+            E.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) ? {
+                "aria-selected": R(c.value),
+                className: `cursor-pointer px-3 py-2 text-sm transition-colors duration-200 ${R(c.value) ? "" : "text-gray-900"} ${v === w ? "bg-gray-100" : ""} ${c.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50"}`,
+                style: R(c.value) ? {
                   backgroundColor: "color-mix(in srgb, var(--fc-color-primary, #3b82f6) 8%, white)",
                   color: "var(--fc-color-primary, #3b82f6)"
                 } : {},
-                onClick: () => P(c),
+                onClick: () => q(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" })
+            E.length === 0 && /* @__PURE__ */ t("li", { className: "px-3 py-2 text-sm text-gray-400", children: "No options found" })
           ] })
         ] })
       ]
     }
   );
 }
-function xe({
+function ve({
   value: e,
   onChange: n,
-  onBlur: s,
+  onBlur: a,
   disabled: r,
-  label: a,
-  className: o
+  min: s = 0,
+  max: o = 100,
+  step: l = 1,
+  showTooltip: u = !0,
+  className: i
 }) {
-  function i() {
-    r || n(!e);
-  }
-  function u(l) {
-    (l.key === " " || l.key === "Enter") && (l.preventDefault(), i());
-  }
-  return /* @__PURE__ */ g(
-    "label",
+  const [f, d] = F(!1), g = e ?? s, m = o - s, h = m === 0 ? 0 : (g - s) / m * 100;
+  return /* @__PURE__ */ y(
+    "div",
     {
-      className: `inline-flex items-center gap-2 select-none ${r ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${o ?? ""}`,
+      className: `relative w-full py-2 ${r ? "opacity-50 cursor-not-allowed" : ""} ${i ?? ""}`,
       children: [
-        /* @__PURE__ */ t(
-          "input",
+        u && f && /* @__PURE__ */ t(
+          "div",
           {
-            type: "checkbox",
-            checked: e ?? !1,
-            onChange: () => {
-            },
-            onBlur: s,
-            disabled: r,
-            className: "sr-only"
+            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(${h}% - 16px)` },
+            children: g
           }
         ),
         /* @__PURE__ */ t(
-          "div",
+          "input",
           {
-            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();
+            type: "range",
+            value: g,
+            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), a == null || a();
             },
-            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" })
-              }
-            )
+            disabled: r,
+            min: s,
+            max: o,
+            step: l,
+            "aria-valuenow": g,
+            "aria-valuemin": s,
+            "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)" }
           }
         ),
-        a && /* @__PURE__ */ t("span", { className: "text-sm text-gray-700", children: a })
+        /* @__PURE__ */ y("div", { className: "mt-1 flex justify-between text-xs text-gray-400", children: [
+          /* @__PURE__ */ t("span", { children: s }),
+          /* @__PURE__ */ t("span", { children: o })
+        ] })
       ]
     }
   );
 }
-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,
+  onBlur: a,
   disabled: r,
-  activeLabel: a,
+  activeLabel: s,
   inactiveLabel: o,
-  className: i
+  className: l
 }) {
   function u() {
     r || n(!e);
   }
-  function l(m) {
-    (m.key === " " || m.key === "Enter") && (m.preventDefault(), u());
+  function i(f) {
+    (f.key === " " || f.key === "Enter") && (f.preventDefault(), u());
   }
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ y(
     "label",
     {
-      className: `inline-flex items-center gap-2 select-none ${r ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${i ?? ""}`,
+      className: `inline-flex items-center gap-2 select-none ${r ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${l ?? ""}`,
       children: [
         o && /* @__PURE__ */ t("span", { className: "text-sm text-gray-600", children: o }),
         /* @__PURE__ */ t(
@@ -735,7 +715,7 @@ function we({
             type: "checkbox",
             checked: e ?? !1,
             onChange: u,
-            onBlur: s,
+            onBlur: a,
             disabled: r,
             className: "sr-only"
           }
@@ -751,7 +731,7 @@ function we({
             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,
+            onKeyDown: i,
             children: /* @__PURE__ */ t(
               "span",
               {
@@ -761,126 +741,159 @@ function we({
             )
           }
         ),
-        a && /* @__PURE__ */ t("span", { className: "text-sm text-gray-600", children: a })
+        s && /* @__PURE__ */ t("span", { className: "text-sm text-gray-600", children: s })
       ]
     }
   );
 }
-function Ne({
+const Ne = "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 Ce({
   value: e,
   onChange: n,
-  onBlur: s,
+  onBlur: a,
   disabled: r,
-  min: a = 0,
-  max: o = 100,
-  step: i = 1,
-  showTooltip: u = !0,
-  className: l
+  placeholder: s,
+  rows: o = 3,
+  readOnly: l,
+  autoResize: u,
+  maxLength: i,
+  className: f
 }) {
-  const [m, d] = S(!1), h = e ?? a, f = o - a, C = f === 0 ? 0 : (h - a) / f * 100;
-  return /* @__PURE__ */ g(
-    "div",
+  const d = A(null), g = D(() => {
+    if (!u || !d.current) return;
+    const p = d.current;
+    p.style.height = "auto", p.style.height = `${p.scrollHeight}px`;
+  }, [u]);
+  re(() => {
+    g();
+  }, [g]);
+  const v = `${Ne} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${u ? "resize-none overflow-hidden" : ""} ${f ?? ""}`.trim();
+  return /* @__PURE__ */ t(
+    "textarea",
     {
-      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 })
-        ] })
-      ]
+      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 = "", a == null || a();
+      },
+      disabled: r,
+      placeholder: s,
+      rows: o,
+      readOnly: l,
+      maxLength: i,
+      "aria-disabled": r || void 0,
+      "aria-readonly": l || void 0
     }
   );
 }
-function M(e) {
+const $e = "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: a,
+  disabled: r,
+  placeholder: s,
+  inputType: o = "text",
+  readOnly: l,
+  prefix: u,
+  suffix: i,
+  maxLength: f,
+  className: d
+}) {
+  const v = `${$e} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${u ? "rounded-l-none" : ""} ${i ? "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 = "", a == null || a();
+      },
+      disabled: r,
+      placeholder: s,
+      readOnly: l,
+      maxLength: f,
+      "aria-disabled": r || void 0,
+      "aria-readonly": l || void 0
+    }
+  );
+  return u || i ? /* @__PURE__ */ y("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,
+    i && /* @__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: i })
+  ] }) : p;
+}
+function V(e) {
   return e.replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`);
 }
-function Ce(e) {
+function ke(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);
+    for (const [a, r] of Object.entries(e.colors))
+      r && (n[`--fc-color-${V(a)}`] = r);
   if (e.typography)
-    for (const [s, r] of Object.entries(e.typography))
-      r && (n[`--fc-${M(s)}`] = r);
+    for (const [a, r] of Object.entries(e.typography))
+      r && (n[`--fc-${V(a)}`] = r);
   if (e.spacing)
-    for (const [s, r] of Object.entries(e.spacing))
-      r && (n[`--fc-${M(s)}`] = r);
+    for (const [a, r] of Object.entries(e.spacing))
+      r && (n[`--fc-${V(a)}`] = r);
   if (e.borders)
-    for (const [s, r] of Object.entries(e.borders))
-      r && (n[`--fc-border-${M(s)}`] = r);
+    for (const [a, r] of Object.entries(e.borders))
+      r && (n[`--fc-border-${V(a)}`] = r);
   if (e.shadows)
-    for (const [s, r] of Object.entries(e.shadows))
-      r && (n[`--fc-shadow-${M(s)}`] = r);
+    for (const [a, r] of Object.entries(e.shadows))
+      r && (n[`--fc-shadow-${V(a)}`] = r);
   if (e.transitions)
-    for (const [s, r] of Object.entries(e.transitions))
-      r && (n[`--fc-transition-${M(s)}`] = r);
+    for (const [a, r] of Object.entries(e.transitions))
+      r && (n[`--fc-transition-${V(a)}`] = r);
   return e.cssVars && Object.assign(n, e.cssVars), n;
 }
-function Q(e, n, s, r, a) {
-  var l, m;
+function Q(e, n, a, r, s) {
+  var i, f;
   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];
+  if (!o) return s;
+  const l = o[a];
+  if ((i = l == null ? void 0 : l.messages) != null && i[n]) return l.messages[n];
   const u = o[r];
-  return ((m = u == null ? void 0 : u.messages) == null ? void 0 : m[n]) ?? a;
+  return ((f = u == null ? void 0 : u.messages) == null ? void 0 : f[n]) ?? s;
 }
-function X(e, n, s, r, a) {
+function X(e, n, a, r, s) {
   const o = e.translations;
-  if (!o) return a;
-  const i = o[s];
-  if (i != null && i[n]) return i[n];
+  if (!o) return s;
+  const l = o[a];
+  if (l != null && l[n]) return l[n];
   const u = o[r];
-  return (u == null ? void 0 : u[n]) ?? a;
+  return (u == null ? void 0 : u[n]) ?? s;
 }
 function Y(e) {
   return Array.isArray(e) ? e : [];
 }
-function $e({ field: e, value: n, onChange: s, onBlur: r, disabled: a }) {
+function Se(e) {
+  return typeof e == "function" ? !1 : e ?? !1;
+}
+function Fe({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
   switch (e.type) {
     case "text":
       return /* @__PURE__ */ t(
         J,
         {
           value: String(n ?? ""),
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a,
+          disabled: s,
           placeholder: e.placeholder,
           inputType: e.inputType,
           readOnly: e.readOnly
@@ -888,12 +901,12 @@ function $e({ field: e, value: n, onChange: s, onBlur: r, disabled: a }) {
       );
     case "number":
       return /* @__PURE__ */ t(
-        be,
+        ye,
         {
           value: n,
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a,
+          disabled: s,
           placeholder: e.placeholder,
           min: e.min,
           max: e.max,
@@ -903,12 +916,12 @@ function $e({ field: e, value: n, onChange: s, onBlur: r, disabled: a }) {
       );
     case "textarea":
       return /* @__PURE__ */ t(
-        ye,
+        Ce,
         {
           value: String(n ?? ""),
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a,
+          disabled: s,
           placeholder: e.placeholder,
           rows: e.rows,
           readOnly: e.readOnly
@@ -916,35 +929,35 @@ function $e({ field: e, value: n, onChange: s, onBlur: r, disabled: a }) {
       );
     case "select":
       return /* @__PURE__ */ t(
-        he,
+        xe,
         {
           value: n,
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a,
+          disabled: s,
           placeholder: e.placeholder,
           options: Y(e.options)
         }
       );
     case "checkbox":
       return /* @__PURE__ */ t(
-        xe,
+        be,
         {
           value: !!n,
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a
+          disabled: s
         }
       );
     case "radio":
       return /* @__PURE__ */ t(
-        ve,
+        he,
         {
           name: e.name,
           value: n,
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a,
+          disabled: s,
           options: Y(e.options)
         }
       );
@@ -953,19 +966,19 @@ function $e({ field: e, value: n, onChange: s, onBlur: r, disabled: a }) {
         we,
         {
           value: !!n,
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a
+          disabled: s
         }
       );
     case "slider":
       return /* @__PURE__ */ t(
-        Ne,
+        ve,
         {
           value: n,
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a,
+          disabled: s,
           min: e.min,
           max: e.max,
           step: e.step
@@ -976,28 +989,28 @@ function $e({ field: e, value: n, onChange: s, onBlur: r, disabled: a }) {
         J,
         {
           value: String(n ?? ""),
-          onChange: s,
+          onChange: a,
           onBlur: r,
-          disabled: a,
+          disabled: s,
           placeholder: e.placeholder
         }
       );
   }
 }
-function re(e) {
+function ae(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 = {
+function De(e, n, a) {
+  const r = n.errors[e.name] ?? [], s = e.disabled === !0 || !1, o = {
     field: e,
     value: n.values[e.name],
-    onChange: (l) => n.setFieldValue(e.name, l),
+    onChange: (i) => n.setFieldValue(e.name, i),
     onBlur: () => n.validateField(e.name),
     errors: r,
-    disabled: a
-  }, u = (s == null ? void 0 : s[e.type]) ?? $e;
+    disabled: s
+  }, u = (a == null ? void 0 : a[e.type]) ?? Fe;
   return /* @__PURE__ */ t(
-    fe,
+    pe,
     {
       label: e.label,
       required: e.required,
@@ -1005,8 +1018,8 @@ function ke(e, n, s) {
       touched: n.touched[e.name],
       helpText: e.helpText,
       tooltip: e.tooltip,
-      disabled: e.disabled,
-      readOnly: e.readOnly,
+      disabled: Se(e.disabled),
+      readOnly: e.readOnly === !0,
       fieldName: e.name,
       className: e.className,
       style: e.style,
@@ -1015,8 +1028,8 @@ function ke(e, n, s) {
     e.name
   );
 }
-function Se(e, n, s) {
-  const a = {
+function Re(e, n, a) {
+  const s = {
     start: "items-start",
     center: "items-center",
     end: "items-end",
@@ -1025,46 +1038,46 @@ function Se(e, n, s) {
   return /* @__PURE__ */ t(
     "div",
     {
-      className: `grid grid-cols-12 ${a} ${e.className ?? ""}`,
+      className: `grid grid-cols-12 ${s} ${e.className ?? ""}`,
       style: { gap: o },
       role: "group",
-      children: e.children.map((i, u) => /* @__PURE__ */ t(
+      children: e.children.map((l, u) => /* @__PURE__ */ t(
         "div",
         {
-          style: re(O(i) ? i.span : void 0),
-          children: K(i, n, s)
+          style: ae(L(l) ? l.span : void 0),
+          children: P(l, n, a)
         },
-        O(i) ? i.name : `row-child-${u}`
+        L(l) ? l.name : `row-child-${u}`
       ))
     }
   );
 }
-function Fe({
+function je({
   node: e,
   form: n,
-  components: s
+  components: a
 }) {
-  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 [r, s] = F(e.collapsed ?? !1), o = e.title ? `fc-group-${e.title.toLowerCase().replace(/\s+/g, "-")}` : void 0;
+  function l() {
+    e.collapsible && s(!r);
   }
   const u = e.collapsible ? "button" : "div";
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ y(
     "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(
+        (e.title || e.description) && /* @__PURE__ */ t("div", { className: "border-b border-gray-100 px-4 py-3", children: /* @__PURE__ */ y(
           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,
+            onClick: l,
             children: [
-              /* @__PURE__ */ g("div", { children: [
+              /* @__PURE__ */ y("div", { children: [
                 e.title && /* @__PURE__ */ t(
                   "legend",
                   {
@@ -1101,34 +1114,34 @@ function Fe({
           {
             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}`))
+            children: e.children.map((i, f) => /* @__PURE__ */ t("div", { children: P(i, n, a) }, L(i) ? i.name : `group-child-${f}`))
           }
         )
       ]
     }
   );
 }
-function De({
+function Ee({
   node: e,
   form: n,
-  components: s
+  components: a
 }) {
-  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 [r, s] = F(0), [o, l] = F(/* @__PURE__ */ new Set()), u = e.steps, i = u.length, f = r === 0, d = r === i - 1;
+  function g() {
+    d || (l((p) => {
       const b = new Set(p);
       return b.add(r), b;
-    }), a((p) => p + 1));
+    }), s((p) => p + 1));
   }
-  function f() {
-    m || a((p) => p - 1);
+  function m() {
+    f || s((p) => p - 1);
   }
-  function C(p) {
-    e.linear && p > r || a(p);
+  function h(p) {
+    e.linear && p > r || s(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: [
+  return /* @__PURE__ */ y("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__ */ y("li", { className: "flex items-center", children: [
       /* @__PURE__ */ t(
         "button",
         {
@@ -1141,7 +1154,7 @@ function De({
             borderColor: "var(--fc-color-primary, #3b82f6)",
             backgroundColor: "var(--fc-color-primary, #3b82f6)"
           } : {},
-          onClick: () => C(b),
+          onClick: () => h(b),
           children: o.has(b) && b !== r ? /* @__PURE__ */ t(
             "svg",
             {
@@ -1169,26 +1182,26 @@ function De({
         }
       )
     ] }, p.title)) }) }),
-    v && /* @__PURE__ */ g("div", { className: "text-center", children: [
+    v && /* @__PURE__ */ y("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: [
+    v && /* @__PURE__ */ t("div", { children: v.children.map((p, b) => /* @__PURE__ */ t("div", { children: P(p, n, a) }, L(p) ? p.name : `step-child-${b}`)) }),
+    /* @__PURE__ */ y("div", { className: "flex items-center justify-between border-t border-gray-100 pt-4", children: [
       /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          disabled: m,
+          disabled: f,
           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,
+          onClick: m,
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ g("span", { className: "text-xs text-gray-400", children: [
+      /* @__PURE__ */ y("span", { className: "text-xs text-gray-400", children: [
         r + 1,
         " / ",
-        l
+        i
       ] }),
       d ? /* @__PURE__ */ t("div", { className: "w-[72px]" }) : /* @__PURE__ */ t(
         "button",
@@ -1198,30 +1211,30 @@ function De({
           style: {
             backgroundColor: "var(--fc-color-primary, #3b82f6)"
           },
-          onClick: h,
+          onClick: g,
           children: "Next"
         }
       )
     ] })
   ] });
 }
-function Re({
+function Oe({
   node: e,
   form: n,
-  components: s
+  components: a
 }) {
-  const [r, a] = S(0), o = e.tabs, i = o[r], u = `fc-tabpanel-${r}`;
-  function l(m) {
-    a(m);
+  const [r, s] = F(0), o = e.tabs, l = o[r], u = `fc-tabpanel-${r}`;
+  function i(f) {
+    s(f);
   }
-  return /* @__PURE__ */ g("div", { className: e.className ?? "", children: [
+  return /* @__PURE__ */ y("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(
+        children: o.map((f, d) => /* @__PURE__ */ y(
           "button",
           {
             id: `fc-tab-${d}`,
@@ -1232,9 +1245,9 @@ function Re({
             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),
+            onClick: () => i(d),
             children: [
-              m.title,
+              f.title,
               d === r && /* @__PURE__ */ t(
                 "span",
                 {
@@ -1246,43 +1259,42 @@ function Re({
               )
             ]
           },
-          m.title
+          f.title
         ))
       }
     ),
-    i && /* @__PURE__ */ t(
+    l && /* @__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}`))
+        children: l.children.map((f, d) => /* @__PURE__ */ t("div", { children: P(f, n, a) }, L(f) ? f.name : `tab-child-${d}`))
       }
     )
   ] });
 }
-function je(e) {
-  return e.label ? /* @__PURE__ */ g("div", { className: `relative my-4 ${e.className ?? ""}`, children: [
+function Ie(e) {
+  return e.label ? /* @__PURE__ */ y("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);
+function P(e, n, a) {
+  if (L(e))
+    return De(e, n, a);
   switch (e.type) {
     case "row":
-      return Se(e, n, s);
+      return Re(e, n, a);
     case "group":
-      return /* @__PURE__ */ t(Fe, { node: e, form: n, components: s });
+      return /* @__PURE__ */ t(je, { node: e, form: n, components: a });
     case "steps":
-      return /* @__PURE__ */ t(De, { node: e, form: n, components: s });
+      return /* @__PURE__ */ t(Ee, { node: e, form: n, components: a });
     case "tabs":
-      return /* @__PURE__ */ t(Re, { node: e, form: n, components: s });
+      return /* @__PURE__ */ t(Oe, { node: e, form: n, components: a });
     case "divider":
-      return je(e);
+      return Ie(e);
     case "html":
       return /* @__PURE__ */ t(
         "div",
@@ -1295,64 +1307,64 @@ function K(e, n, s) {
       return null;
   }
 }
-function Ae({
+function ze({
   schema: e,
   onSubmit: n,
-  onError: s,
-  locale: r = "en",
-  fallbackLocale: a = "en",
+  onError: a,
+  locale: r,
+  fallbackLocale: s,
   theme: o,
-  components: i,
+  components: l,
   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();
+  var R, M;
+  const i = ce(), f = r ?? i.locale ?? "en", d = s ?? i.fallbackLocale ?? "en", g = o ?? i.theme, m = l ?? i.components, h = me(e), v = ke(g), p = Q(e, "title", f, d, ""), b = Q(e, "description", f, d, ""), S = X(e, "submit", f, d, "Submit"), $ = X(e, "reset", f, d, "Reset"), j = async (k) => {
+    k.preventDefault(), n ? await h.submit(async (O) => {
+      await n(O);
+    }) : await h.validate(), !h.isValid && a && a(h.errors);
+  }, E = (k) => {
+    k.preventDefault(), h.reset();
   };
-  return /* @__PURE__ */ t(ee.Provider, { value: l, children: /* @__PURE__ */ g(
+  return /* @__PURE__ */ t(ne.Provider, { value: h, children: /* @__PURE__ */ y(
     "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,
+      className: `fc-form-builder ${((R = g == null ? void 0 : g.components) == null ? void 0 : R.form) ?? ""} ${u ?? ""}`.trim(),
+      style: v,
+      onSubmit: j,
+      onReset: E,
       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 })
+        (p || b) && /* @__PURE__ */ y("div", { className: "mb-6", children: [
+          p && /* @__PURE__ */ t("h2", { className: "text-lg font-semibold text-gray-900", children: p }),
+          b && /* @__PURE__ */ t("p", { className: "mt-1 text-sm text-gray-500", children: b })
         ] }),
-        e.fields.map((x, F) => /* @__PURE__ */ t(
+        e.fields.map((k, O) => /* @__PURE__ */ t(
           "div",
           {
-            style: O(x) ? re(x.span) : void 0,
-            children: K(x, l, i)
+            style: L(k) ? ae(k.span) : void 0,
+            children: P(k, h, m)
           },
-          O(x) ? x.name : `node-${F}`
+          L(k) ? k.name : `node-${O}`
         )),
-        /* @__PURE__ */ g("div", { className: "mt-6 flex items-center gap-3", children: [
-          /* @__PURE__ */ g(
+        /* @__PURE__ */ y("div", { className: "mt-6 flex items-center gap-3", children: [
+          /* @__PURE__ */ y(
             "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) ?? ""}`,
+              disabled: h.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 ${((M = g == null ? void 0 : g.components) == null ? void 0 : M.button) ?? ""}`,
               style: {
                 backgroundColor: "var(--fc-color-primary, #3b82f6)"
               },
               children: [
-                l.isSubmitting && /* @__PURE__ */ t(
+                h.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
+                S
               ]
             }
           ),
@@ -1360,9 +1372,9 @@ function Ae({
             "button",
             {
               type: "reset",
-              disabled: l.isSubmitting,
+              disabled: h.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
+              children: $
             }
           )
         ] })
@@ -1371,9 +1383,11 @@ function Ae({
   ) });
 }
 export {
-  Ae as FormBuilder,
-  ee as FormContext,
-  de as useForm,
-  Te as useFormContext
+  ze as FormBuilder,
+  ne as FormContext,
+  Me as FormaticaProvider,
+  me as useForm,
+  Ve as useFormContext,
+  ce as useFormaticaConfig
 };
 //# sourceMappingURL=formatica-react.es.js.map