@tachui/forms 0.7.1-alpha → 0.8.1-alpha

package/dist/TextField-CGBM3x7K.js

@@ -1,1799 +0,0 @@
-import { createSignal as E, createEffect as j, h as s, text as b, defaultChildrenRenderer as Le, useLifecycle as Ve, setupOutsideClickDetection as Te, isSignal as Ae } from "@tachui/core";
-import { createFormState as Oe, createField as ee } from "./state/index.js";
-function he(e, t) {
-  return Array.isArray(e) ? e.flatMap((n) => pe(n, t)) : pe(e, t);
-}
-function pe(e, t) {
-  if (e == null)
-    return [];
-  if (typeof e == "object" && "type" in e && e.type === "component") {
-    const n = {
-      ...e,
-      props: {
-        ...e.props,
-        _formContext: t
-      }
-    }, l = e.render.bind(n)();
-    return Array.isArray(l) ? l : [l];
-  }
-  return Le(e);
-}
-const Pe = (e) => {
-  const {
-    onSubmit: t,
-    onChange: n,
-    validation: r = {
-      validateOn: "blur",
-      stopOnFirstError: !1,
-      debounceMs: 300
-    },
-    initialValues: l = {},
-    resetOnSubmit: d = !1,
-    preserveValues: v = !1,
-    children: w,
-    ...F
-  } = e, g = Oe(l), [T, S] = E("idle"), A = async (h) => {
-    if (h && h.preventDefault(), !!t)
-      try {
-        if (S("idle"), await g.validateForm()) {
-          const u = g.watch();
-          await t(u, g.state), S("success"), d && g.resetForm();
-        } else
-          S("error");
-      } catch (o) {
-        S("error"), console.error("Form submission error:", o);
-      }
-  };
-  j(() => {
-    if (n) {
-      const h = g.state, o = Object.keys(h.fields).filter((u) => h.fields[u].dirty);
-      if (o.length > 0) {
-        const u = o[o.length - 1], k = h.fields[u];
-        n(u, k.value, k);
-      }
-    }
-  });
-  const C = {
-    register: g.register,
-    unregister: g.unregister,
-    setValue: g.setValue,
-    getValue: g.getValue,
-    getError: g.getError,
-    validateField: g.validateField,
-    validation: r,
-    onChange: n
-  };
-  return {
-    type: "component",
-    id: F.id || "form",
-    render: () => s(
-      "form",
-      {
-        ...F,
-        onsubmit: A,
-        novalidate: !0,
-        // We handle validation ourselves
-        "data-tachui-form": !0,
-        "data-form-state": g.state.valid ? "valid" : "invalid",
-        "data-form-submitting": g.state.submitting,
-        "data-submission-result": T()
-      },
-      ...he(w, C)
-    ),
-    props: e,
-    cleanup: [
-      () => {
-        v || g.resetForm();
-      }
-    ]
-  };
-}, Re = (e) => {
-  const {
-    title: t,
-    description: n,
-    header: r,
-    footer: l,
-    style: d = "automatic",
-    spacing: v = 12,
-    collapsible: w = !1,
-    collapsed: F = !1,
-    onToggle: g,
-    accessibilityLabel: T,
-    accessibilityRole: S = "group",
-    children: A,
-    ...C
-  } = e, [m, h] = E(F), o = () => {
-    const a = !m();
-    h(a), g && g(a);
-  }, u = (a) => a ? typeof a == "string" ? a : typeof a == "function" ? a() : a : null, k = () => {
-    const a = {
-      marginBottom: "20px",
-      border: "none",
-      // Remove default fieldset border
-      padding: "0",
-      // Remove default fieldset padding
-      margin: "0 0 20px 0"
-      // Override default fieldset margin
-    };
-    switch (d) {
-      case "grouped":
-        return {
-          ...a,
-          backgroundColor: "#ffffff",
-          border: "1px solid #e0e0e0",
-          borderRadius: "12px",
-          overflow: "hidden"
-        };
-      case "inset":
-        return {
-          ...a,
-          backgroundColor: "#f8f9fa",
-          border: "1px solid #e9ecef",
-          borderRadius: "8px",
-          margin: "0 16px 20px 16px"
-        };
-      case "sidebar":
-        return {
-          ...a,
-          borderLeft: "3px solid #007AFF",
-          paddingLeft: "16px",
-          backgroundColor: "#f8f9fa",
-          borderRadius: "0 8px 8px 0"
-        };
-      case "plain":
-        return a;
-      default:
-        return {
-          ...a,
-          backgroundColor: "#ffffff",
-          border: "1px solid #f0f0f0",
-          borderRadius: "8px"
-        };
-    }
-  }, O = () => {
-    const a = {
-      fontSize: "16px",
-      fontWeight: "600",
-      color: "#1a1a1a",
-      margin: "0 0 12px 0"
-    };
-    switch (d) {
-      case "grouped":
-      case "inset":
-        return {
-          ...a,
-          padding: "12px 16px 0 16px",
-          backgroundColor: "#f8f9fa",
-          borderBottom: "1px solid #e9ecef"
-        };
-      case "sidebar":
-        return {
-          ...a,
-          fontSize: "14px",
-          textTransform: "uppercase",
-          letterSpacing: "0.5px",
-          color: "#666",
-          marginBottom: "8px"
-        };
-      default:
-        return {
-          ...a,
-          padding: "0 0 8px 0"
-        };
-    }
-  }, f = () => {
-    const a = {
-      display: "flex",
-      flexDirection: "column",
-      gap: `${v}px`
-    };
-    switch (d) {
-      case "grouped":
-      case "inset":
-        return {
-          ...a,
-          padding: "16px"
-        };
-      case "sidebar":
-        return {
-          ...a,
-          padding: "8px 0"
-        };
-      default:
-        return {
-          ...a,
-          padding: "12px"
-        };
-    }
-  }, x = () => {
-    const a = {
-      fontSize: "14px",
-      color: "#666",
-      margin: "8px 0 0 0"
-    };
-    switch (d) {
-      case "grouped":
-      case "inset":
-        return {
-          ...a,
-          padding: "0 16px 12px 16px",
-          backgroundColor: "#f8f9fa",
-          borderTop: "1px solid #e9ecef"
-        };
-      default:
-        return {
-          ...a,
-          padding: "0 0 4px 0"
-        };
-    }
-  }, c = () => {
-    const a = t || u(r);
-    if (!a) return [];
-    const z = O();
-    if (w) {
-      const R = m() ? "▶" : "▼";
-      return [
-        s(
-          "legend",
-          {
-            style: {
-              ...z,
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              gap: "8px"
-            },
-            onclick: o
-          },
-          s(
-            "span",
-            {
-              style: {
-                fontSize: "12px",
-                color: "#666"
-              }
-            },
-            b(R)
-          ),
-          ...typeof a == "string" ? [b(a)] : [a.render()].flat()
-        )
-      ];
-    }
-    return [
-      s(
-        "legend",
-        { style: z },
-        ...typeof a == "string" ? [b(a)] : [a.render()].flat()
-      )
-    ];
-  }, p = () => !n || m() ? [] : [
-    s(
-      "div",
-      {
-        style: {
-          fontSize: "14px",
-          color: "#666",
-          marginBottom: "12px",
-          padding: d === "grouped" || d === "inset" ? "0 16px" : "0"
-        }
-      },
-      b(n)
-    )
-  ], $ = () => w && m() ? [] : [
-    s(
-      "div",
-      {
-        style: f()
-      },
-      ...he(A, e._formContext)
-    )
-  ], L = () => {
-    const a = u(l);
-    return !a || m() ? [] : [
-      s(
-        "div",
-        {
-          style: x()
-        },
-        ...typeof a == "string" ? [b(a)] : [a.render()].flat()
-      )
-    ];
-  };
-  return {
-    type: "component",
-    id: C.id || "form-section",
-    render: () => s(
-      "fieldset",
-      {
-        ...C,
-        style: k(),
-        "aria-label": T,
-        role: S,
-        "data-tachui-form-section": !0,
-        "data-collapsible": w,
-        "data-collapsed": m(),
-        "data-style": d
-      },
-      ...c(),
-      ...p(),
-      ...$(),
-      ...L()
-    ),
-    props: e
-  };
-}, Ne = {
-  /**
-   * Create a form with automatic field registration
-   */
-  createAutoForm: (e) => (console.log("Auto form creation:", e), Pe),
-  /**
-   * Form validation utilities
-   */
-  validation: {
-    /**
-     * Create a validation schema from field definitions
-     */
-    createSchema: (e) => ({
-      fields: e,
-      validate: async (t) => ({ valid: !0, errors: {} })
-    })
-  },
-  /**
-   * Form serialization utilities
-   */
-  serialize: {
-    /**
-     * Convert form values to FormData
-     */
-    toFormData: (e) => {
-      const t = new FormData();
-      return Object.entries(e).forEach(([n, r]) => {
-        r != null && (r instanceof File || r instanceof Blob ? t.append(n, r) : Array.isArray(r) ? r.forEach((l, d) => {
-          t.append(`${n}[${d}]`, String(l));
-        }) : t.append(n, String(r)));
-      }), t;
-    },
-    /**
-     * Convert form values to URL search params
-     */
-    toURLSearchParams: (e) => {
-      const t = new URLSearchParams();
-      return Object.entries(e).forEach(([n, r]) => {
-        r != null && (Array.isArray(r) ? r.forEach((l) => t.append(n, String(l))) : t.append(n, String(r)));
-      }), t;
-    },
-    /**
-     * Convert form values to JSON
-     */
-    toJSON: (e) => JSON.stringify(e, null, 2)
-  }
-}, be = (e) => {
-  const {
-    name: t,
-    label: n,
-    disabled: r = !1,
-    required: l = !1,
-    checked: d,
-    defaultChecked: v = !1,
-    indeterminate: w = !1,
-    validation: F,
-    onChange: g,
-    onBlur: T,
-    onFocus: S,
-    error: A,
-    helperText: C,
-    ...m
-  } = e, h = e._formContext, o = ee(t, d ?? v, F);
-  h && h.register(t, F);
-  const [u, k] = E(!1);
-  d !== void 0 && j(() => {
-    o.value() !== d && o.setValue(d);
-  });
-  const O = (L) => {
-    const a = L.target.checked;
-    o.setValue(a), h && h.setValue(t, a), g && g(t, a, o);
-  }, f = (L) => {
-    k(!0), o.onFocus(), S && S(t, o.value());
-  }, x = (L) => {
-    k(!1), o.onBlur(), T && T(t, o.value());
-  }, c = A || o.error() || h?.getError(t), p = (L) => {
-    if (L.key === " " || L.key === "Enter") {
-      L.preventDefault();
-      const _ = L.target;
-      _.checked = !_.checked, O(L);
-    }
-  };
-  return {
-    type: "component",
-    id: m.id || `checkbox-${t}`,
-    render: () => s(
-      "div",
-      {
-        ...m,
-        class: `tachui-checkbox ${m.class || ""}`.trim(),
-        "data-tachui-checkbox-container": !0,
-        "data-field-state": c ? "error" : o.validating() ? "validating" : "valid",
-        "data-checked": o.value(),
-        "data-indeterminate": w,
-        "data-disabled": r
-      },
-      // Checkbox input and label wrapper
-      s(
-        "label",
-        {
-          "data-tachui-checkbox-label": !0,
-          "data-focused": u(),
-          "data-disabled": r
-        },
-        // Hidden native checkbox for accessibility
-        s("input", {
-          type: "checkbox",
-          id: m.id || t,
-          name: t,
-          checked: o.value(),
-          disabled: r,
-          required: l,
-          onchange: O,
-          onfocus: f,
-          onblur: x,
-          onkeydown: p,
-          "aria-invalid": !!c,
-          "aria-describedby": [c ? `${t}-error` : null, C ? `${t}-helper` : null].filter(Boolean).join(" ") || void 0,
-          "data-tachui-checkbox-input": !0,
-          style: {
-            position: "absolute",
-            opacity: "0",
-            width: "1px",
-            height: "1px",
-            margin: "-1px",
-            padding: "0",
-            border: "0",
-            clip: "rect(0,0,0,0)"
-          }
-        }),
-        // Custom checkbox visual
-        s(
-          "div",
-          {
-            "data-tachui-checkbox-visual": !0,
-            "data-checked": o.value(),
-            "data-indeterminate": w,
-            "data-focused": u(),
-            "data-disabled": r,
-            "data-error": !!c,
-            "aria-hidden": "true",
-            role: "presentation"
-          },
-          ...o.value() || w ? [
-            s(
-              "div",
-              {
-                "data-tachui-checkbox-indicator": !0,
-                "data-type": w ? "indeterminate" : "checked"
-              },
-              b(w ? "−" : "✓")
-            )
-          ] : []
-        ),
-        ...n ? [
-          s(
-            "span",
-            {
-              "data-tachui-checkbox-text": !0,
-              "data-disabled": r
-            },
-            b(n),
-            ...l ? [
-              s(
-                "span",
-                {
-                  "aria-label": "required",
-                  "data-required-indicator": !0
-                },
-                b(" *")
-              )
-            ] : []
-          )
-        ] : []
-      ),
-      ...c ? [
-        s(
-          "div",
-          {
-            id: `${t}-error`,
-            role: "alert",
-            "aria-live": "polite",
-            "data-tachui-error": !0
-          },
-          b(c)
-        )
-      ] : [],
-      ...C && !c ? [
-        s(
-          "div",
-          {
-            id: `${t}-helper`,
-            "data-tachui-helper": !0
-          },
-          b(C)
-        )
-      ] : [],
-      ...o.validating() ? [
-        s(
-          "div",
-          {
-            "data-tachui-validation-spinner": !0,
-            "aria-label": "Validating..."
-          },
-          b("⏳")
-        )
-      ] : []
-    ),
-    props: e,
-    cleanup: [
-      () => {
-        h && h.unregister(t);
-      }
-    ]
-  };
-}, Me = (e) => {
-  const { size: t = "medium", ...n } = e, r = {
-    ...n,
-    class: `tachui-switch tachui-switch-${t} ${n.class || ""}`.trim()
-  }, l = be(r);
-  return {
-    ...l,
-    render: () => {
-      const d = l.render();
-      return Array.isArray(d) ? d.map((v) => ({
-        ...v,
-        props: {
-          ...v.props,
-          "data-tachui-switch": !0,
-          "data-switch-size": t
-        }
-      })) : {
-        ...d,
-        props: {
-          ...d.props,
-          "data-tachui-switch": !0,
-          "data-switch-size": t
-        }
-      };
-    }
-  };
-}, _e = (e) => {
-  const {
-    name: t,
-    label: n,
-    options: r,
-    value: l,
-    defaultValue: d = [],
-    onChange: v,
-    validation: w,
-    error: F,
-    helperText: g,
-    disabled: T = !1,
-    required: S = !1,
-    direction: A = "vertical",
-    ...C
-  } = e, m = ee(t, l ?? d, w), h = (u, k) => {
-    const O = m.value() || [];
-    let f;
-    k ? f = [...O, u] : f = O.filter((x) => x !== u), m.setValue(f), v && v(t, f, u);
-  };
-  return {
-    type: "component",
-    id: C.id || `checkbox-group-${t}`,
-    render: () => s(
-      "fieldset",
-      {
-        ...C,
-        "data-tachui-checkbox-group": !0,
-        "data-direction": A,
-        "data-disabled": T
-      },
-      ...n ? [
-        s(
-          "legend",
-          {
-            "data-tachui-group-label": !0
-          },
-          b(n),
-          ...S ? [
-            s(
-              "span",
-              {
-                "aria-label": "required",
-                "data-required-indicator": !0
-              },
-              b(" *")
-            )
-          ] : []
-        )
-      ] : [],
-      // Checkbox options
-      s(
-        "div",
-        {
-          "data-tachui-checkbox-options": !0,
-          "data-direction": A
-        },
-        ...r.flatMap((u, k) => {
-          const f = be({
-            name: `${t}-${k}`,
-            label: u.label,
-            checked: (m.value() || []).includes(u.value),
-            disabled: T || u.disabled,
-            onChange: (x, c) => h(u.value, c)
-          }).render();
-          return Array.isArray(f) ? f : [f];
-        })
-      ),
-      ...F ? [
-        s(
-          "div",
-          {
-            id: `${t}-error`,
-            role: "alert",
-            "aria-live": "polite",
-            "data-tachui-error": !0
-          },
-          b(F)
-        )
-      ] : [],
-      ...g && !F ? [
-        s(
-          "div",
-          {
-            id: `${t}-helper`,
-            "data-tachui-helper": !0
-          },
-          b(g)
-        )
-      ] : []
-    ),
-    props: e
-  };
-}, Ie = (e) => {
-  const {
-    name: t,
-    value: n,
-    label: r,
-    checked: l,
-    groupName: d,
-    disabled: v = !1,
-    required: w = !1,
-    validation: F,
-    onChange: g,
-    onBlur: T,
-    onFocus: S,
-    error: A,
-    helperText: C,
-    ...m
-  } = e, h = e._formContext, o = d || t, u = ee(o, l ? n : void 0, F);
-  h && h.register(o, F);
-  const [k, O] = E(!1), f = () => u.value() === n, x = (a) => {
-    a.target.checked && (u.setValue(n), h && h.setValue(o, n), g && g(o, n, u));
-  }, c = (a) => {
-    O(!0), u.onFocus(), S && S(o, u.value());
-  }, p = (a) => {
-    O(!1), u.onBlur(), T && T(o, u.value());
-  }, $ = A || u.error() || h?.getError(o), L = (a) => {
-    (a.key === " " || a.key === "Enter") && (a.preventDefault(), x(a));
-  };
-  return {
-    type: "component",
-    id: m.id || `radio-${o}-${n}`,
-    render: () => s(
-      "div",
-      {
-        ...m,
-        class: `tachui-radio ${m.class || ""}`.trim(),
-        "data-tachui-radio-container": !0,
-        "data-field-state": $ ? "error" : u.validating() ? "validating" : "valid",
-        "data-checked": f(),
-        "data-disabled": v
-      },
-      // Radio input and label wrapper
-      s(
-        "label",
-        {
-          "data-tachui-radio-label": !0,
-          "data-focused": k(),
-          "data-disabled": v
-        },
-        // Hidden native radio for accessibility
-        s("input", {
-          type: "radio",
-          id: m.id || `${o}-${n}`,
-          name: o,
-          value: n,
-          checked: f(),
-          disabled: v,
-          required: w,
-          onchange: x,
-          onfocus: c,
-          onblur: p,
-          onkeydown: L,
-          "aria-invalid": !!$,
-          "aria-describedby": [
-            $ ? `${o}-error` : null,
-            C ? `${o}-helper` : null
-          ].filter(Boolean).join(" ") || void 0,
-          "data-tachui-radio-input": !0,
-          style: {
-            position: "absolute",
-            opacity: "0",
-            width: "1px",
-            height: "1px",
-            margin: "-1px",
-            padding: "0",
-            border: "0",
-            clip: "rect(0,0,0,0)"
-          }
-        }),
-        // Custom radio visual
-        s(
-          "div",
-          {
-            "data-tachui-radio-visual": !0,
-            "data-checked": f(),
-            "data-focused": k(),
-            "data-disabled": v,
-            "data-error": !!$,
-            "aria-hidden": "true",
-            role: "presentation"
-          },
-          ...f() ? [
-            s("div", {
-              "data-tachui-radio-dot": !0
-            })
-          ] : []
-        ),
-        ...r ? [
-          s(
-            "span",
-            {
-              "data-tachui-radio-text": !0,
-              "data-disabled": v
-            },
-            b(r),
-            ...w ? [
-              s(
-                "span",
-                {
-                  "aria-label": "required",
-                  "data-required-indicator": !0
-                },
-                b(" *")
-              )
-            ] : []
-          )
-        ] : []
-      )
-    ),
-    props: e,
-    cleanup: [
-      () => {
-      }
-    ]
-  };
-}, ze = (e) => {
-  const {
-    name: t,
-    label: n,
-    options: r,
-    value: l,
-    defaultValue: d,
-    onChange: v,
-    validation: w,
-    error: F,
-    helperText: g,
-    disabled: T = !1,
-    required: S = !1,
-    direction: A = "vertical",
-    ...C
-  } = e, m = e._formContext, h = ee(t, l ?? d, w);
-  m && m.register(t, w), l !== void 0 && j(() => {
-    h.value() !== l && h.setValue(l);
-  });
-  const o = (f) => {
-    h.setValue(f), m && m.setValue(t, f), v && v(t, f);
-  }, u = (f) => {
-    const x = r.findIndex((p) => p.value === h.value());
-    let c = x;
-    switch (f.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-        f.preventDefault(), c = (x + 1) % r.length;
-        break;
-      case "ArrowUp":
-      case "ArrowLeft":
-        f.preventDefault(), c = x === 0 ? r.length - 1 : x - 1;
-        break;
-      case "Home":
-        f.preventDefault(), c = 0;
-        break;
-      case "End":
-        f.preventDefault(), c = r.length - 1;
-        break;
-      default:
-        return;
-    }
-    for (; r[c]?.disabled && (f.key === "ArrowDown" || f.key === "ArrowRight" ? c = (c + 1) % r.length : c = c === 0 ? r.length - 1 : c - 1, c !== x); )
-      ;
-    r[c]?.disabled || (o(r[c].value), setTimeout(() => {
-      const p = document.querySelector(
-        `input[name="${t}"][value="${r[c].value}"]`
-      );
-      p && p.focus();
-    }, 0));
-  }, k = F || h.error();
-  return {
-    type: "component",
-    id: C.id || `radio-group-${t}`,
-    render: () => s(
-      "fieldset",
-      {
-        ...C,
-        "data-tachui-radio-group": !0,
-        "data-direction": A,
-        "data-disabled": T,
-        role: "radiogroup",
-        "aria-invalid": !!k,
-        "aria-describedby": [k ? `${t}-error` : null, g ? `${t}-helper` : null].filter(Boolean).join(" ") || void 0,
-        onkeydown: u
-      },
-      ...n ? [
-        s(
-          "legend",
-          {
-            "data-tachui-group-label": !0
-          },
-          b(n),
-          ...S ? [
-            s(
-              "span",
-              {
-                "aria-label": "required",
-                "data-required-indicator": !0
-              },
-              b(" *")
-            )
-          ] : []
-        )
-      ] : [],
-      // Radio options
-      s(
-        "div",
-        {
-          "data-tachui-radio-options": !0,
-          "data-direction": A
-        },
-        ...r.flatMap((f, x) => {
-          const p = Ie({
-            name: `${t}-${x}`,
-            groupName: t,
-            value: f.value,
-            label: f.label,
-            checked: h.value() === f.value,
-            disabled: T || f.disabled,
-            required: S,
-            onChange: () => o(f.value),
-            _formContext: m
-          }).render();
-          return Array.isArray(p) ? p : [p];
-        })
-      ),
-      ...k ? [
-        s(
-          "div",
-          {
-            id: `${t}-error`,
-            role: "alert",
-            "aria-live": "polite",
-            "data-tachui-error": !0
-          },
-          b(k)
-        )
-      ] : [],
-      ...g && !k ? [
-        s(
-          "div",
-          {
-            id: `${t}-helper`,
-            "data-tachui-helper": !0
-          },
-          b(g)
-        )
-      ] : []
-    ),
-    props: e,
-    cleanup: [
-      () => {
-        m && m.unregister(t);
-      }
-    ]
-  };
-}, ge = (e) => {
-  const {
-    name: t,
-    label: n,
-    options: r,
-    multiple: l = !1,
-    searchable: d = !1,
-    clearable: v = !1,
-    placeholder: w = l ? "Select options..." : "Select an option...",
-    noOptionsMessage: F = "No options available",
-    loadingMessage: g = "Loading...",
-    maxMenuHeight: T = 200,
-    disabled: S = !1,
-    required: A = !1,
-    value: C,
-    defaultValue: m,
-    validation: h,
-    onChange: o,
-    onBlur: u,
-    onFocus: k,
-    error: O,
-    helperText: f,
-    ...x
-  } = e, c = e._formContext, p = ee(t, C ?? m, h);
-  c && c.register(t, h);
-  const [$, L] = E(!1), [_, a] = E(!1), [z, R] = E(""), [N, H] = E(-1), [ne] = E(!1);
-  C !== void 0 && j(() => {
-    p.value() !== C && p.setValue(C);
-  });
-  const I = () => {
-    if (!d || !z())
-      return r;
-    const i = z().toLowerCase();
-    return r.filter(
-      (y) => y.label.toLowerCase().includes(i) || String(y.value).toLowerCase().includes(i)
-    );
-  }, ae = () => {
-    const i = p.value();
-    if (l)
-      return !i || !Array.isArray(i) || i.length === 0 ? w : r.filter((P) => i.includes(P.value)).map((P) => P.label).join(", ");
-    {
-      if (i == null || i === "")
-        return w;
-      const y = r.find((P) => P.value === i);
-      return y ? y.label : String(i);
-    }
-  }, Q = (i) => {
-    if (i.disabled) return;
-    let y;
-    if (l) {
-      const P = p.value() || [];
-      P.includes(i.value) ? y = P.filter((le) => le !== i.value) : y = [...P, i.value];
-    } else
-      y = i.value, L(!1), R("");
-    p.setValue(y), c && c.setValue(t, y), o && o(t, y, p);
-  }, K = () => {
-    if (S) return;
-    const i = !$();
-    L(i), i && (H(-1), d && R(""));
-  }, te = (i) => {
-    const y = i.target;
-    R(y.value), H(-1);
-  }, X = (i) => {
-    const y = I();
-    switch (i.key) {
-      case "Enter":
-        i.preventDefault(), $() ? N() >= 0 && y[N()] && Q(y[N()]) : K();
-        break;
-      case " ":
-        (!d || !$()) && (i.preventDefault(), K());
-        break;
-      case "Escape":
-        i.preventDefault(), L(!1), R("");
-        break;
-      case "ArrowDown":
-        if (i.preventDefault(), !$())
-          K();
-        else {
-          const P = Math.min(N() + 1, y.length - 1);
-          H(P);
-        }
-        break;
-      case "ArrowUp":
-        if (i.preventDefault(), $()) {
-          const P = Math.max(N() - 1, -1);
-          H(P);
-        }
-        break;
-      case "Home":
-        $() && (i.preventDefault(), H(0));
-        break;
-      case "End":
-        $() && (i.preventDefault(), H(y.length - 1));
-        break;
-      case "Backspace":
-        v && !d && p.value() !== null && (i.preventDefault(), re());
-        break;
-    }
-  }, B = () => {
-    a(!0), p.onFocus(), k && k(t, p.value());
-  }, D = (i) => {
-    requestAnimationFrame(() => {
-      const y = i.relatedTarget;
-      i.target.closest("[data-tachui-select-container]")?.contains(y) || (a(!1), L(!1), p.onBlur(), u && u(t, p.value()));
-    });
-  }, re = () => {
-    const i = l ? [] : null;
-    p.setValue(i), c && c.setValue(t, i), o && o(t, i, p);
-  }, G = (i) => {
-    const y = p.value();
-    return l ? Array.isArray(y) && y.includes(i.value) : y === i.value;
-  }, M = O || p.error() || c?.getError(t), W = {
-    type: "component",
-    id: x.id || `select-${t}`,
-    cleanup: [],
-    render: () => ({
-      type: "element",
-      tag: "div",
-      props: {
-        ...x,
-        class: `tachui-select ${x.class || ""}`.trim(),
-        "data-tachui-select-container": !0,
-        "data-field-state": M ? "error" : p.validating() ? "validating" : "valid",
-        "data-open": $(),
-        "data-disabled": S,
-        "data-multiple": l,
-        "data-searchable": d
-      },
-      children: [
-        // Label
-        ...n ? [
-          s(
-            "label",
-            {
-              for: x.id || t,
-              "data-tachui-label": !0,
-              "data-required": A
-            },
-            b(n),
-            ...A ? [
-              s(
-                "span",
-                {
-                  "aria-label": "required",
-                  "data-required-indicator": !0
-                },
-                b(" *")
-              )
-            ] : []
-          )
-        ] : [],
-        // Select trigger
-        {
-          type: "element",
-          tag: "div",
-          props: {
-            id: x.id || t,
-            tabindex: S ? -1 : 0,
-            role: "combobox",
-            "aria-expanded": $(),
-            "aria-haspopup": "listbox",
-            "aria-invalid": !!M,
-            "aria-describedby": [M ? `${t}-error` : null, f ? `${t}-helper` : null].filter(Boolean).join(" ") || void 0,
-            onclick: K,
-            onkeydown: X,
-            onfocus: B,
-            onblur: D,
-            "data-tachui-select-trigger": !0,
-            "data-focused": _(),
-            "data-disabled": S,
-            "data-error": !!M
-          },
-          children: [
-            // Display value
-            {
-              type: "element",
-              tag: "div",
-              props: {
-                "data-tachui-select-value": !0,
-                "data-placeholder": !p.value() || l && (!p.value() || p.value().length === 0)
-              },
-              children: [b(ae())]
-            },
-            // Actions (clear, dropdown arrow)
-            {
-              type: "element",
-              tag: "div",
-              props: {
-                "data-tachui-select-actions": !0
-              },
-              children: [
-                // Clear button
-                ...v && p.value() && (!l || Array.isArray(p.value()) && p.value().length > 0) ? [
-                  {
-                    type: "element",
-                    tag: "button",
-                    props: {
-                      type: "button",
-                      onclick: (i) => {
-                        i.stopPropagation(), re();
-                      },
-                      "aria-label": "Clear selection",
-                      "data-tachui-select-clear": !0
-                    },
-                    children: [b("×")]
-                  }
-                ] : [],
-                // Dropdown arrow
-                {
-                  type: "element",
-                  tag: "div",
-                  props: {
-                    "data-tachui-select-arrow": !0,
-                    "data-open": $()
-                  },
-                  children: [b("▼")]
-                }
-              ]
-            }
-          ]
-        },
-        // Dropdown menu
-        ...$() ? [
-          {
-            type: "element",
-            tag: "div",
-            props: {
-              "data-tachui-select-dropdown": !0,
-              style: {
-                maxHeight: `${T}px`
-              }
-            },
-            children: [
-              // Search input
-              ...d ? [
-                {
-                  type: "element",
-                  tag: "div",
-                  props: {
-                    "data-tachui-select-search": !0
-                  },
-                  children: [
-                    {
-                      type: "element",
-                      tag: "input",
-                      props: {
-                        type: "text",
-                        placeholder: "Search...",
-                        value: z(),
-                        oninput: te,
-                        "data-tachui-select-search-input": !0
-                      }
-                    }
-                  ]
-                }
-              ] : [],
-              // Options list
-              {
-                type: "element",
-                tag: "div",
-                props: {
-                  role: "listbox",
-                  "aria-multiselectable": l,
-                  "data-tachui-select-options": !0
-                },
-                children: I().length > 0 ? I().map((i, y) => ({
-                  type: "element",
-                  tag: "div",
-                  props: {
-                    role: "option",
-                    "aria-selected": G(i),
-                    "aria-disabled": i.disabled,
-                    onclick: () => Q(i),
-                    "data-tachui-select-option": !0,
-                    "data-selected": G(i),
-                    "data-highlighted": N() === y,
-                    "data-disabled": i.disabled,
-                    "data-group": i.group
-                  },
-                  children: [
-                    // Selection indicator for multiple
-                    ...l ? [
-                      {
-                        type: "element",
-                        tag: "div",
-                        props: {
-                          "data-tachui-select-checkbox": !0,
-                          "data-checked": G(i)
-                        },
-                        children: [b(G(i) ? "✓" : "")]
-                      }
-                    ] : [],
-                    // Option label
-                    b(i.label)
-                  ]
-                })) : [
-                  {
-                    type: "element",
-                    tag: "div",
-                    props: {
-                      "data-tachui-select-no-options": !0
-                    },
-                    children: [b(ne() ? g : F)]
-                  }
-                ]
-              }
-            ]
-          }
-        ] : [],
-        // Error message
-        ...M ? [
-          {
-            type: "element",
-            tag: "div",
-            props: {
-              id: `${t}-error`,
-              role: "alert",
-              "aria-live": "polite",
-              "data-tachui-error": !0
-            },
-            children: [b(M)]
-          }
-        ] : [],
-        // Helper text
-        ...f && !M ? [
-          {
-            type: "element",
-            tag: "div",
-            props: {
-              id: `${t}-helper`,
-              "data-tachui-helper": !0
-            },
-            children: [b(f)]
-          }
-        ] : []
-      ]
-    }),
-    props: e
-  };
-  return W.cleanup || (W.cleanup = []), W.cleanup.push(() => {
-    c && c.unregister(t);
-  }), Ve(W, {
-    onDOMReady: (i, y) => {
-      y && Te(
-        W,
-        () => {
-          $() && (L(!1), a(!1), p.onBlur(), u && u(t, p.value()));
-        },
-        "[data-tachui-select-container]"
-      );
-    }
-  }), W;
-}, Ue = (e) => ge({ ...e, multiple: !0 }), je = (e) => ge({ ...e, searchable: !0 }), Y = {
-  /**
-   * Phone number formatter (US format)
-   */
-  phone: (e) => {
-    const t = e.replace(/\D/g, "");
-    return t.length <= 3 ? t : t.length <= 6 ? `(${t.slice(0, 3)}) ${t.slice(3)}` : `(${t.slice(0, 3)}) ${t.slice(3, 6)}-${t.slice(6, 10)}`;
-  },
-  /**
-   * Credit card formatter
-   */
-  creditCard: (e) => e.replace(/\D/g, "").replace(/(\d{4})(?=\d)/g, "$1 "),
-  /**
-   * Currency formatter
-   */
-  currency: (e) => {
-    const t = parseFloat(e.replace(/[^\d.]/g, ""));
-    return Number.isNaN(t) ? "" : new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD"
-    }).format(t);
-  },
-  /**
-   * Uppercase formatter
-   */
-  uppercase: (e) => e.toUpperCase(),
-  /**
-   * Lowercase formatter
-   */
-  lowercase: (e) => e.toLowerCase(),
-  /**
-   * Title case formatter
-   */
-  titleCase: (e) => e.replace(
-    /\w\S*/g,
-    (t) => t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
-  ),
-  /**
-   * Social Security Number formatter
-   */
-  ssn: (e) => {
-    const t = e.replace(/\D/g, "");
-    return t.length <= 3 ? t : t.length <= 5 ? `${t.slice(0, 3)}-${t.slice(3)}` : `${t.slice(0, 3)}-${t.slice(3, 5)}-${t.slice(5, 9)}`;
-  },
-  /**
-   * Postal code formatter (US ZIP)
-   */
-  postalCode: (e) => {
-    const t = e.replace(/\D/g, "");
-    return t.length <= 5 ? t : `${t.slice(0, 5)}-${t.slice(5, 9)}`;
-  },
-  /**
-   * Decimal number formatter
-   */
-  decimal: (e = 2) => (t) => {
-    const n = parseFloat(t.replace(/[^\d.-]/g, ""));
-    return Number.isNaN(n) ? "" : n.toFixed(e);
-  },
-  /**
-   * Percentage formatter
-   */
-  percentage: (e) => {
-    const t = parseFloat(e.replace(/[^\d.-]/g, ""));
-    return Number.isNaN(t) ? "" : `${t}%`;
-  },
-  /**
-   * Custom formatter factory
-   */
-  custom: (e) => e
-}, Z = {
-  /**
-   * Phone number parser - extracts digits only
-   */
-  phone: (e) => e.replace(/\D/g, ""),
-  /**
-   * Credit card parser - extracts digits only
-   */
-  creditCard: (e) => e.replace(/\D/g, ""),
-  /**
-   * Currency parser - extracts numeric value
-   */
-  currency: (e) => {
-    const t = e.match(/[\d.-]+/);
-    return t ? t[0] : "";
-  },
-  /**
-   * SSN parser - extracts digits only
-   */
-  ssn: (e) => e.replace(/\D/g, ""),
-  /**
-   * Postal code parser - extracts digits only
-   */
-  postalCode: (e) => e.replace(/\D/g, ""),
-  /**
-   * Decimal parser - extracts number
-   */
-  decimal: (e) => {
-    const t = e.match(/^-?\d*\.?\d*/);
-    return t ? t[0] : "";
-  },
-  /**
-   * Percentage parser - extracts number without %
-   */
-  percentage: (e) => e.replace(/[^\d.-]/g, ""),
-  /**
-   * No-op parser (returns value unchanged)
-   */
-  none: (e) => e,
-  /**
-   * Custom parser factory
-   */
-  custom: (e) => e
-}, se = (e, t) => e === void 0 ? t : typeof e == "function" || Ae(e) ? e() : e, q = (e) => {
-  const {
-    name: t,
-    label: n,
-    placeholder: r,
-    type: l = "text",
-    multiline: d = !1,
-    rows: v = 3,
-    minLength: w,
-    maxLength: F,
-    pattern: g,
-    autocomplete: T,
-    spellcheck: S = !0,
-    disabled: A = !1,
-    required: C = !1,
-    validation: m,
-    value: h,
-    defaultValue: o = "",
-    onChange: u,
-    onBlur: k,
-    onFocus: O,
-    error: f,
-    helperText: x,
-    // New enhanced features
-    keyboardType: c = "default",
-    returnKeyType: p,
-    autoCapitalize: $,
-    autoFocus: L = !1,
-    accessibilityLabel: _,
-    accessibilityHint: a,
-    accessibilityRole: z = "textbox",
-    formatter: R,
-    parser: N,
-    validateOnChange: H = !1,
-    validateOnBlur: ne = !0,
-    font: I,
-    textAlign: ae,
-    text: Q,
-    placeholderSignal: K,
-    disabledSignal: te,
-    ...X
-  } = e, B = e._formContext, D = ee(t, h ?? o, m);
-  B && B.register(t, m);
-  const [re, G] = E(!1), [M, W] = E(0), [i, y] = E(""), [P, le] = E(""), [me, ye] = E(!1);
-  j(() => {
-    if (Q) {
-      const V = se(Q, "");
-      y(V), V !== D.value() && D.setValue(V);
-    }
-  }), j(() => {
-    K && le(se(K, ""));
-  }), j(() => {
-    te && ye(se(te, !1));
-  }), h !== void 0 && j(() => {
-    D.value() !== h && D.setValue(h);
-  }), j(() => {
-    const V = D.value() || "";
-    W(String(V).length);
-  });
-  const de = (V) => {
-    if (R)
-      try {
-        return R(V);
-      } catch (U) {
-        return console.warn("TextField formatter error:", U), V;
-      }
-    return V;
-  }, ve = (V) => {
-    if (N)
-      try {
-        return N(V);
-      } catch (U) {
-        return console.warn("TextField parser error:", U), V;
-      }
-    return V;
-  }, xe = (V) => {
-    const U = V.target, ce = U.value, ie = ve(ce), ue = de(ie);
-    if (D.setValue(ie), ue !== ce && U) {
-      const fe = U.selectionStart || 0;
-      U.value = ue, U.setSelectionRange(fe, fe);
-    }
-    B && B.setValue(t, ie), H && D.validate(), u && u(t, ie, D);
-  }, ke = (V) => {
-    G(!0), D.onFocus(), O && O(t, D.value());
-  }, Ce = (V) => {
-    G(!1), D.onBlur(), ne && D.validate(), k && k(t, D.value());
-  }, we = (V) => {
-    V.key === "Enter" && !d && (V.preventDefault(), B?.submitForm && B.submitForm());
-  }, J = f || D.error() || B?.getError(t), Fe = K ? P() : r, Se = te ? me() : A, $e = Q ? i() : D.value() || "", De = de($e), oe = {
-    id: X.id || t,
-    name: t,
-    value: De,
-    placeholder: Fe,
-    disabled: Se,
-    required: C,
-    minlength: w,
-    maxlength: F,
-    pattern: g,
-    autocomplete: T,
-    spellcheck: S,
-    oninput: xe,
-    onfocus: ke,
-    onblur: Ce,
-    onkeydown: we,
-    // Enhanced accessibility
-    "aria-invalid": !!J,
-    "aria-describedby": [
-      J ? `${t}-error` : null,
-      x ? `${t}-helper` : null,
-      F ? `${t}-counter` : null,
-      a ? `${t}-hint` : null
-    ].filter(Boolean).join(" ") || void 0,
-    "aria-label": _,
-    role: z,
-    // Mobile features
-    inputMode: c !== "default" ? c : void 0,
-    enterKeyHint: p,
-    autoCapitalize: $,
-    autoFocus: L,
-    // Data attributes for styling and debugging
-    "data-tachui-textfield": !0,
-    "data-field-name": t,
-    "data-field-type": l,
-    "data-field-valid": !J,
-    "data-field-touched": D.touched(),
-    "data-field-dirty": D.dirty(),
-    "data-field-focused": re(),
-    "data-field-validating": D.validating(),
-    "data-field-has-formatter": !!R,
-    "data-field-has-parser": !!N,
-    // Typography styling
-    style: {
-      ...I?.family && { fontFamily: I.family },
-      ...I?.size && { fontSize: typeof I.size == "number" ? `${I.size}px` : I.size },
-      ...I?.weight && { fontWeight: I.weight },
-      ...I?.style && { fontStyle: I.style },
-      ...ae && { textAlign: ae }
-      // Additional styling can be applied via modifiers
-    }
-  };
-  return l && !d && (oe.type = l), {
-    type: "component",
-    id: X.id || `textfield-${t}`,
-    render: () => s(
-      "div",
-      {
-        ...X,
-        class: `tachui-textfield ${X.class || ""}`.trim(),
-        "data-tachui-textfield-container": !0,
-        "data-field-state": J ? "error" : D.validating() ? "validating" : "valid"
-      },
-      ...n ? [
-        s(
-          "label",
-          {
-            for: oe.id,
-            "data-tachui-label": !0,
-            "data-required": C
-          },
-          b(n),
-          ...C ? [
-            s(
-              "span",
-              {
-                "aria-label": "required",
-                "data-required-indicator": !0
-              },
-              b(" *")
-            )
-          ] : []
-        )
-      ] : [],
-      // Input field
-      s(d ? "textarea" : "input", {
-        ...oe,
-        ...d ? { rows: v } : {}
-      }),
-      ...F ? [
-        s(
-          "div",
-          {
-            id: `${t}-counter`,
-            "data-tachui-character-counter": !0,
-            "data-over-limit": M() > F
-          },
-          b(`${M()}/${F}`)
-        )
-      ] : [],
-      ...J ? [
-        s(
-          "div",
-          {
-            id: `${t}-error`,
-            role: "alert",
-            "aria-live": "polite",
-            "data-tachui-error": !0
-          },
-          b(J)
-        )
-      ] : [],
-      ...x && !J ? [
-        s(
-          "div",
-          {
-            id: `${t}-helper`,
-            "data-tachui-helper": !0
-          },
-          b(x)
-        )
-      ] : [],
-      ...a ? [
-        s(
-          "div",
-          {
-            id: `${t}-hint`,
-            "data-tachui-accessibility-hint": !0,
-            "aria-hidden": "true"
-          },
-          b(a)
-        )
-      ] : [],
-      ...D.validating() ? [
-        s(
-          "div",
-          {
-            "data-tachui-validation-spinner": !0,
-            "aria-label": "Validating...",
-            "aria-live": "polite"
-          },
-          b("⏳")
-        )
-      ] : []
-    ),
-    props: e,
-    cleanup: [
-      () => {
-        B && B.unregister(t);
-      }
-    ]
-  };
-}, He = (e) => q({
-  ...e,
-  type: "email",
-  keyboardType: "email",
-  validation: {
-    rules: ["required", "email"],
-    validateOn: "blur",
-    ...e.validation
-  },
-  accessibilityRole: "textbox",
-  accessibilityLabel: e.accessibilityLabel || "Email address"
-}), Ke = (e) => {
-  const {
-    showStrengthIndicator: t = !1,
-    strongValidation: n = !1,
-    minLength: r,
-    ...l
-  } = e, d = ["required"];
-  return n ? d.push("strongPassword") : (d.push("minLength"), d.push({ name: "minLength", options: { minLength: r || 6 } })), q({
-    ...l,
-    type: "password",
-    validation: {
-      rules: d,
-      validateOn: "change",
-      ...e.validation
-    },
-    accessibilityLabel: e.accessibilityLabel || "Password"
-  });
-}, We = (e) => q({
-  ...e,
-  type: "search",
-  keyboardType: "search",
-  placeholder: e.placeholder || "Search...",
-  accessibilityRole: "searchbox",
-  accessibilityLabel: e.accessibilityLabel || "Search"
-}), Ge = (e) => q({
-  ...e,
-  type: "url",
-  keyboardType: "url",
-  validation: {
-    rules: ["url"],
-    validateOn: "blur",
-    ...e.validation
-  },
-  accessibilityLabel: e.accessibilityLabel || "Website URL"
-}), Je = (e) => {
-  const { format: t = "us", ...n } = e;
-  return q({
-    ...n,
-    type: "tel",
-    keyboardType: "phone",
-    formatter: Y.phone,
-    parser: Z.phone,
-    validation: {
-      rules: ["phone"],
-      validateOn: "blur",
-      ...e.validation
-    },
-    accessibilityLabel: e.accessibilityLabel || "Phone number"
-  });
-}, Qe = (e) => {
-  const { min: t, max: n, precision: r = 0, currency: l = !1, ...d } = e, v = ["numeric"];
-  return t !== void 0 && (v.push("min"), v.push({ name: "min", options: { min: t } })), n !== void 0 && (v.push("max"), v.push({ name: "max", options: { max: n } })), q({
-    ...d,
-    type: "number",
-    keyboardType: "numeric",
-    formatter: l ? Y.currency : r > 0 ? Y.decimal(r) : void 0,
-    parser: l ? Z.currency : Z.decimal,
-    validation: {
-      rules: v,
-      validateOn: "blur",
-      ...e.validation
-    },
-    accessibilityLabel: e.accessibilityLabel || "Number"
-  });
-}, Xe = (e) => q({
-  ...e,
-  type: "text",
-  keyboardType: "numeric",
-  formatter: Y.creditCard,
-  parser: Z.creditCard,
-  maxLength: 19,
-  // 16 digits + 3 spaces
-  validation: {
-    rules: ["creditCard"],
-    validateOn: "blur",
-    ...e.validation
-  },
-  accessibilityLabel: e.accessibilityLabel || "Credit card number"
-}), Ye = (e) => q({
-  ...e,
-  type: "text",
-  keyboardType: "numeric",
-  formatter: Y.ssn,
-  parser: Z.ssn,
-  maxLength: 11,
-  // 9 digits + 2 hyphens
-  validation: {
-    rules: ["ssn"],
-    validateOn: "blur",
-    ...e.validation
-  },
-  accessibilityLabel: e.accessibilityLabel || "Social Security Number"
-}), Ze = (e) => q({
-  ...e,
-  type: "text",
-  keyboardType: "numeric",
-  formatter: Y.postalCode,
-  parser: Z.postalCode,
-  maxLength: 10,
-  // 5 or 9 digits + hyphen
-  validation: {
-    rules: ["zipCode"],
-    // Use zipCode to match test expectation
-    validateOn: "blur",
-    ...e.validation
-  },
-  accessibilityLabel: e.accessibilityLabel || "Postal code"
-}), et = (e) => q({
-  ...e,
-  multiline: !0,
-  accessibilityLabel: e.accessibilityLabel || "Text area"
-}), tt = (e) => {
-  const { min: t, max: n, ...r } = e, l = ["date"];
-  return t && l.push({ name: "min", options: { min: new Date(t) } }), n && l.push({ name: "max", options: { max: new Date(n) } }), q({
-    ...r,
-    type: "date",
-    validation: {
-      rules: l,
-      validateOn: "blur",
-      ...e.validation
-    },
-    accessibilityLabel: e.accessibilityLabel || "Date"
-  });
-}, at = (e) => q({
-  ...e,
-  type: "time",
-  validation: {
-    rules: ["time"],
-    validateOn: "blur",
-    ...e.validation
-  },
-  accessibilityLabel: e.accessibilityLabel || "Time"
-}), rt = (e) => q({
-  ...e,
-  type: "color",
-  accessibilityLabel: e.accessibilityLabel || "Color picker"
-});
-export {
-  be as C,
-  tt as D,
-  He as E,
-  Pe as F,
-  Ue as M,
-  Qe as N,
-  Ke as P,
-  Ie as R,
-  Me as S,
-  et as T,
-  Ge as U,
-  Re as a,
-  Ne as b,
-  _e as c,
-  ze as d,
-  je as e,
-  ge as f,
-  rt as g,
-  Xe as h,
-  Je as i,
-  Ze as j,
-  We as k,
-  Ye as l,
-  q as m,
-  at as n,
-  Y as o,
-  Z as p
-};