@tachui/forms 0.7.0-alpha1 → 0.7.1-alpha

package/dist/TextField-CGBM3x7K.js

@@ -0,0 +1,1799 @@
+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
+};