@formatica/react 0.2.1 → 0.2.3

package/dist/formatica-react.es.js

@@ -1,8 +1,18 @@
 import { extractFields as oe, evaluateCondition as le, getRule as ie, isFieldNode as L } from "@formatica/core";
 export * from "@formatica/core";
-import { useRef as A, useState as F, useCallback as D, createContext as B, useContext as ee, useEffect as re } from "react";
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
-function ce(e) {
+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,13 +28,13 @@ function ce(e) {
       return "";
   }
 }
-function ue(e) {
+function de(e) {
   const n = {};
   for (const a of e)
-    n[a.name] = a.defaultValue ?? ce(a);
+    n[a.name] = a.defaultValue ?? ue(a);
   return n;
 }
-function de(e) {
+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 a == "object" && a !== null ? a : { [n]: a }
@@ -45,10 +55,10 @@ function Z(e) {
   }
   return { name: n, params: s };
 }
-function fe(e, n) {
-  const a = oe(e.fields), r = A(ue(a)), s = A(a), [o, l] = F(() => ({
+function me(e, n) {
+  const a = oe(e.fields), r = A(de(a)), s = A(a), [o, l] = F(() => ({
     ...r.current
-  })), [u, i] = F({}), [f, d] = F({}), [g, m] = F({}), [h, v] = F(!1), [b, p] = F(0), S = A(o);
+  })), [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;
@@ -56,26 +66,26 @@ function fe(e, n) {
     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((O) => O.name === x);
+      const N = s.current.find((I) => I.name === x);
       if (!N) return [];
       if (N.condition && !le(N.condition, C))
         return [];
-      const T = de(N.rules);
-      N.required && !T.some((O) => O.name === "required") && T.unshift({ name: "required", params: {} });
+      const T = fe(N.rules);
+      N.required && !T.some((I) => I.name === "required") && T.unshift({ name: "required", params: {} });
       const K = [], se = {
         values: C,
-        getFieldValue: (O) => C[O]
+        getFieldValue: (I) => C[I]
       };
-      for (const O of T) {
-        const G = ie(O.name);
+      for (const I of T) {
+        const G = ie(I.name);
         if (!G) continue;
-        const W = await G(C[x], O.params, se);
+        const W = await G(C[x], I.params, se);
         typeof W == "string" && K.push(W);
       }
       return K;
     },
     []
-  ), I = D(
+  ), 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;
@@ -91,7 +101,7 @@ function fe(e, n) {
     return i(C), N;
   }, [k]), q = D(
     async (x) => {
-      v(!0), p((N) => N + 1);
+      v(!0), b((N) => N + 1);
       const C = {};
       for (const N of s.current)
         C[N.name] = !0;
@@ -130,10 +140,10 @@ function fe(e, n) {
     isValid: j,
     isDirty: E,
     isSubmitting: h,
-    submitCount: b,
+    submitCount: p,
     setFieldValue: R,
     validate: z,
-    validateField: I,
+    validateField: O,
     submit: q,
     reset: _,
     clear: U,
@@ -143,23 +153,13 @@ function fe(e, n) {
     getFieldValue: M
   };
 }
-const te = B(null);
-function Ae() {
-  const e = ee(te);
+const ne = B(null);
+function Ve() {
+  const e = ee(ne);
   if (!e) throw new Error("useFormContext must be used within a FormProvider");
   return e;
 }
-const ne = B({});
-function Me({
-  config: e,
-  children: n
-}) {
-  return /* @__PURE__ */ t(ne.Provider, { value: e, children: n });
-}
-function me() {
-  return ee(ne);
-}
-function be({
+function pe({
   label: e,
   required: n,
   errors: a,
@@ -173,7 +173,7 @@ function be({
   className: d,
   style: g
 }) {
-  const [m, h] = F(!1), v = r && a !== void 0 && a.length > 0, b = i ? `fc-field-${i}` : void 0, p = i ? `fc-error-${i}` : void 0;
+  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",
     {
@@ -181,7 +181,7 @@ function be({
       style: g,
       children: [
         e && /* @__PURE__ */ y("div", { className: "mb-1.5 flex items-center gap-1", children: [
-          /* @__PURE__ */ y("label", { htmlFor: b, className: "block text-sm font-medium text-gray-700", 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: "*" })
           ] }),
@@ -219,11 +219,11 @@ function be({
             }
           )
         ] }),
-        /* @__PURE__ */ t("div", { id: b, children: f }),
+        /* @__PURE__ */ t("div", { id: p, children: f }),
         v && /* @__PURE__ */ t("div", { children: a.map((S, $) => /* @__PURE__ */ t(
           "p",
           {
-            id: $ === 0 ? p : void 0,
+            id: $ === 0 ? b : void 0,
             className: "mt-1 text-xs text-red-500",
             role: "alert",
             children: S
@@ -235,47 +235,71 @@ function be({
     }
   );
 }
-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-text-input";
-function J({
+function be({
   value: e,
   onChange: n,
   onBlur: a,
   disabled: r,
-  placeholder: s,
-  inputType: o = "text",
-  readOnly: l,
-  prefix: u,
-  suffix: i,
-  maxLength: f,
-  className: d
+  label: s,
+  className: o
 }) {
-  const v = `${pe} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${u ? "rounded-l-none" : ""} ${i ? "rounded-r-none" : ""} ${d ?? ""}`.trim(), b = /* @__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: (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,
-      readOnly: l,
-      maxLength: f,
-      "aria-disabled": r || void 0,
-      "aria-readonly": l || 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 || 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 }),
-    b,
-    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 })
-  ] }) : b;
 }
 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({
@@ -293,7 +317,7 @@ function ye({
   suffix: g,
   className: m
 }) {
-  const p = `${ge} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${d ? "rounded-l-none" : ""} ${g ? "rounded-r-none" : ""} ${m ?? ""}`.trim();
+  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 === "") {
@@ -307,7 +331,7 @@ function ye({
     "input",
     {
       type: "number",
-      className: p,
+      className: b,
       value: e ?? "",
       onChange: S,
       onFocus: (j) => {
@@ -332,54 +356,81 @@ function ye({
     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 he = "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 xe({
-  value: e,
-  onChange: n,
-  onBlur: a,
-  disabled: r,
-  placeholder: s,
-  rows: o = 3,
-  readOnly: l,
-  autoResize: u,
-  maxLength: i,
-  className: f
+function he({
+  name: e,
+  value: n,
+  onChange: a,
+  onBlur: r,
+  disabled: s,
+  options: o,
+  inline: l = !1,
+  className: u
 }) {
-  const d = A(null), g = D(() => {
-    if (!u || !d.current) return;
-    const b = d.current;
-    b.style.height = "auto", b.style.height = `${b.scrollHeight}px`;
-  }, [u]);
-  re(() => {
-    g();
-  }, [e, g]);
-  const v = `${he} ${r ? "opacity-50 cursor-not-allowed bg-gray-100" : ""} ${u ? "resize-none overflow-hidden" : ""} ${f ?? ""}`.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: (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,
-      rows: o,
-      readOnly: l,
-      maxLength: i,
-      "aria-disabled": r || void 0,
-      "aria-readonly": l || 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 ve({
+function xe({
   value: e,
   onChange: n,
   onBlur: a,
@@ -391,7 +442,7 @@ function ve({
   clearable: i = !1,
   className: f
 }) {
-  const [d, g] = F(!1), [m, h] = F(""), [v, b] = F(-1), p = A(null), S = A(null), $ = e == null ? [] : Array.isArray(e) ? e : [e], j = (() => {
+  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]);
@@ -404,15 +455,15 @@ function ve({
     return (w == null ? void 0 : w.label) ?? String(c);
   }
   const k = D(() => {
-    g(!0), b(-1), h(""), setTimeout(() => {
+    g(!0), p(-1), h(""), setTimeout(() => {
       var c;
       return (c = S.current) == null ? void 0 : c.focus();
     }, 0);
-  }, []), I = D(() => {
+  }, []), O = D(() => {
     g(!1), h(""), a == null || a();
   }, [a]);
   function z() {
-    r || (d ? I() : k());
+    r || (d ? O() : k());
   }
   function q(c) {
     if (!c.disabled)
@@ -420,7 +471,7 @@ function ve({
         const w = [...$], x = w.indexOf(c.value);
         x >= 0 ? w.splice(x, 1) : w.push(c.value), n(w);
       } else
-        n(c.value), I();
+        n(c.value), O();
   }
   function _(c) {
     if (r) return;
@@ -437,28 +488,28 @@ function ve({
     }
     switch (c.key) {
       case "ArrowDown":
-        c.preventDefault(), b((w) => Math.min(w + 1, E.length - 1));
+        c.preventDefault(), p((w) => Math.min(w + 1, E.length - 1));
         break;
       case "ArrowUp":
-        c.preventDefault(), b((w) => Math.max(w - 1, 0));
+        c.preventDefault(), p((w) => Math.max(w - 1, 0));
         break;
       case "Enter":
         c.preventDefault(), v >= 0 && E[v] && q(E[v]);
         break;
       case "Escape":
-        c.preventDefault(), I();
+        c.preventDefault(), O();
         break;
     }
   }
   return re(() => {
     function c(w) {
-      p.current && !p.current.contains(w.target) && I();
+      b.current && !b.current.contains(w.target) && O();
     }
     return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
-  }, [I]), /* @__PURE__ */ y(
+  }, [O]), /* @__PURE__ */ y(
     "div",
     {
-      ref: p,
+      ref: b,
       className: `relative w-full ${r ? "opacity-50 cursor-not-allowed" : ""} ${f ?? ""}`,
       children: [
         /* @__PURE__ */ y(
@@ -566,7 +617,7 @@ function ve({
                   color: "var(--fc-color-primary, #3b82f6)"
                 } : {},
                 onClick: () => q(c),
-                onMouseEnter: () => b(w),
+                onMouseEnter: () => p(w),
                 children: c.label
               },
               String(c.value)
@@ -578,147 +629,66 @@ function ve({
     }
   );
 }
-function we({
+function ve({
   value: e,
   onChange: n,
   onBlur: a,
   disabled: r,
-  label: s,
-  className: o
+  min: s = 0,
+  max: o = 100,
+  step: l = 1,
+  showTooltip: u = !0,
+  className: i
 }) {
-  function l() {
-    r || n(!e);
-  }
-  function u(i) {
-    (i.key === " " || i.key === "Enter") && (i.preventDefault(), l());
-  }
+  const [f, d] = F(!1), g = e ?? s, m = o - s, h = m === 0 ? 0 : (g - s) / m * 100;
   return /* @__PURE__ */ y(
-    "label",
+    "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: a,
-            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: (i) => {
-              i.preventDefault(), l();
+            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)" }
           }
         ),
-        s && /* @__PURE__ */ t("span", { className: "text-sm text-gray-700", children: s })
+        /* @__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 Ne({
-  name: e,
-  value: n,
-  onChange: a,
-  onBlur: r,
-  disabled: s,
-  options: o,
-  inline: l = !1,
-  className: u
-}) {
-  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(
-    "div",
-    {
-      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 Ce({
+function we({
   value: e,
   onChange: n,
   onBlur: a,
@@ -776,64 +746,94 @@ function Ce({
     }
   );
 }
-function $e({
+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: a,
   disabled: r,
-  min: s = 0,
-  max: o = 100,
-  step: l = 1,
-  showTooltip: u = !0,
-  className: i
+  placeholder: s,
+  rows: o = 3,
+  readOnly: l,
+  autoResize: u,
+  maxLength: i,
+  className: f
 }) {
-  const [f, d] = F(!1), g = e ?? s, m = o - s, h = m === 0 ? 0 : (g - s) / m * 100;
-  return /* @__PURE__ */ y(
-    "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" : ""} ${i ?? ""}`,
-      children: [
-        u && f && /* @__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(${h}% - 16px)` },
-            children: g
-          }
-        ),
-        /* @__PURE__ */ t(
-          "input",
-          {
-            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();
-            },
-            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)" }
-          }
-        ),
-        /* @__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 })
-        ] })
-      ]
+      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
+    }
+  );
+}
+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()}`);
@@ -881,7 +881,10 @@ function X(e, n, a, r, s) {
 function Y(e) {
   return Array.isArray(e) ? e : [];
 }
-function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
+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(
@@ -913,7 +916,7 @@ function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
       );
     case "textarea":
       return /* @__PURE__ */ t(
-        xe,
+        Ce,
         {
           value: String(n ?? ""),
           onChange: a,
@@ -926,7 +929,7 @@ function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
       );
     case "select":
       return /* @__PURE__ */ t(
-        ve,
+        xe,
         {
           value: n,
           onChange: a,
@@ -938,7 +941,7 @@ function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
       );
     case "checkbox":
       return /* @__PURE__ */ t(
-        we,
+        be,
         {
           value: !!n,
           onChange: a,
@@ -948,7 +951,7 @@ function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
       );
     case "radio":
       return /* @__PURE__ */ t(
-        Ne,
+        he,
         {
           name: e.name,
           value: n,
@@ -960,7 +963,7 @@ function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
       );
     case "switch":
       return /* @__PURE__ */ t(
-        Ce,
+        we,
         {
           value: !!n,
           onChange: a,
@@ -970,7 +973,7 @@ function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
       );
     case "slider":
       return /* @__PURE__ */ t(
-        $e,
+        ve,
         {
           value: n,
           onChange: a,
@@ -997,7 +1000,7 @@ function Se({ field: e, value: n, onChange: a, onBlur: r, disabled: s }) {
 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 Fe(e, n, a) {
+function De(e, n, a) {
   const r = n.errors[e.name] ?? [], s = e.disabled === !0 || !1, o = {
     field: e,
     value: n.values[e.name],
@@ -1005,9 +1008,9 @@ function Fe(e, n, a) {
     onBlur: () => n.validateField(e.name),
     errors: r,
     disabled: s
-  }, u = (a == null ? void 0 : a[e.type]) ?? Se;
+  }, u = (a == null ? void 0 : a[e.type]) ?? Fe;
   return /* @__PURE__ */ t(
-    be,
+    pe,
     {
       label: e.label,
       required: e.required,
@@ -1015,8 +1018,8 @@ function Fe(e, n, a) {
       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,
@@ -1025,7 +1028,7 @@ function Fe(e, n, a) {
     e.name
   );
 }
-function De(e, n, a) {
+function Re(e, n, a) {
   const s = {
     start: "items-start",
     center: "items-center",
@@ -1049,7 +1052,7 @@ function De(e, n, a) {
     }
   );
 }
-function Re({
+function je({
   node: e,
   form: n,
   components: a
@@ -1118,41 +1121,41 @@ function Re({
     }
   );
 }
-function je({
+function Ee({
   node: e,
   form: n,
   components: a
 }) {
   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((b) => {
-      const p = new Set(b);
-      return p.add(r), p;
-    }), s((b) => b + 1));
+    d || (l((p) => {
+      const b = new Set(p);
+      return b.add(r), b;
+    }), s((p) => p + 1));
   }
   function m() {
-    f || s((b) => b - 1);
+    f || s((p) => p - 1);
   }
-  function h(b) {
-    e.linear && b > r || s(b);
+  function h(p) {
+    e.linear && p > r || s(p);
   }
   const v = u[r];
   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((b, p) => /* @__PURE__ */ y("li", { className: "flex items-center", 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",
         {
           type: "button",
-          disabled: e.linear === !0 && p > r,
-          "aria-current": p === r ? "step" : void 0,
-          "aria-label": `Step ${p + 1}: ${b.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(p) && p !== r ? "border-green-500 bg-green-500 text-white" : p !== r ? "border-gray-300 bg-white text-gray-500" : "text-white"} ${e.linear === !0 && p > r ? "cursor-not-allowed" : "cursor-pointer hover:shadow-md"}`,
-          style: p === r ? {
+          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: () => h(p),
-          children: o.has(p) && p !== r ? /* @__PURE__ */ t(
+          onClick: () => h(b),
+          children: o.has(b) && b !== r ? /* @__PURE__ */ t(
             "svg",
             {
               className: "h-4 w-4 transition-transform duration-200",
@@ -1169,21 +1172,21 @@ function je({
                 }
               )
             }
-          ) : /* @__PURE__ */ t("span", { children: p + 1 })
+          ) : /* @__PURE__ */ t("span", { children: b + 1 })
         }
       ),
-      p < u.length - 1 && /* @__PURE__ */ t(
+      b < u.length - 1 && /* @__PURE__ */ t(
         "div",
         {
-          className: `mx-1 h-0.5 w-8 transition-colors duration-300 sm:w-12 ${o.has(p) ? "bg-green-500" : "bg-gray-200"}`
+          className: `mx-1 h-0.5 w-8 transition-colors duration-300 sm:w-12 ${o.has(b) ? "bg-green-500" : "bg-gray-200"}`
         }
       )
-    ] }, b.title)) }) }),
+    ] }, p.title)) }) }),
     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((b, p) => /* @__PURE__ */ t("div", { children: P(b, n, a) }, L(b) ? b.name : `step-child-${p}`)) }),
+    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",
@@ -1215,7 +1218,7 @@ function je({
     ] })
   ] });
 }
-function Ee({
+function Oe({
   node: e,
   form: n,
   components: a
@@ -1266,7 +1269,6 @@ function Ee({
         id: u,
         role: "tabpanel",
         "aria-labelledby": `fc-tab-${r}`,
-        tabIndex: 0,
         className: "pt-4",
         children: l.children.map((f, d) => /* @__PURE__ */ t("div", { children: P(f, n, a) }, L(f) ? f.name : `tab-child-${d}`))
       }
@@ -1281,16 +1283,16 @@ function Ie(e) {
 }
 function P(e, n, a) {
   if (L(e))
-    return Fe(e, n, a);
+    return De(e, n, a);
   switch (e.type) {
     case "row":
-      return De(e, n, a);
+      return Re(e, n, a);
     case "group":
-      return /* @__PURE__ */ t(Re, { node: e, form: n, components: a });
-    case "steps":
       return /* @__PURE__ */ t(je, { node: e, form: n, components: a });
-    case "tabs":
+    case "steps":
       return /* @__PURE__ */ t(Ee, { node: e, form: n, components: a });
+    case "tabs":
+      return /* @__PURE__ */ t(Oe, { node: e, form: n, components: a });
     case "divider":
       return Ie(e);
     case "html":
@@ -1305,7 +1307,7 @@ function P(e, n, a) {
       return null;
   }
 }
-function Ve({
+function ze({
   schema: e,
   onSubmit: n,
   onError: a,
@@ -1316,14 +1318,14 @@ function Ve({
   className: u
 }) {
   var R, M;
-  const i = me(), f = r ?? i.locale ?? "en", d = s ?? i.fallbackLocale ?? "en", g = o ?? i.theme, m = l ?? i.components, h = fe(e), v = ke(g), b = Q(e, "title", f, d, ""), p = 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 (I) => {
-      await n(I);
+  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(te.Provider, { value: h, children: /* @__PURE__ */ y(
+  return /* @__PURE__ */ t(ne.Provider, { value: h, children: /* @__PURE__ */ y(
     "form",
     {
       className: `fc-form-builder ${((R = g == null ? void 0 : g.components) == null ? void 0 : R.form) ?? ""} ${u ?? ""}`.trim(),
@@ -1332,17 +1334,17 @@ function Ve({
       onReset: E,
       noValidate: !0,
       children: [
-        (b || p) && /* @__PURE__ */ y("div", { className: "mb-6", children: [
-          b && /* @__PURE__ */ t("h2", { className: "text-lg font-semibold text-gray-900", children: b }),
-          p && /* @__PURE__ */ t("p", { className: "mt-1 text-sm text-gray-500", children: p })
+        (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((k, I) => /* @__PURE__ */ t(
+        e.fields.map((k, O) => /* @__PURE__ */ t(
           "div",
           {
             style: L(k) ? ae(k.span) : void 0,
             children: P(k, h, m)
           },
-          L(k) ? k.name : `node-${I}`
+          L(k) ? k.name : `node-${O}`
         )),
         /* @__PURE__ */ y("div", { className: "mt-6 flex items-center gap-3", children: [
           /* @__PURE__ */ y(
@@ -1381,11 +1383,11 @@ function Ve({
   ) });
 }
 export {
-  Ve as FormBuilder,
-  te as FormContext,
+  ze as FormBuilder,
+  ne as FormContext,
   Me as FormaticaProvider,
-  fe as useForm,
-  Ae as useFormContext,
-  me as useFormaticaConfig
+  me as useForm,
+  Ve as useFormContext,
+  ce as useFormaticaConfig
 };
 //# sourceMappingURL=formatica-react.es.js.map