@macrulez/vue-form-schema 0.1.7 → 0.1.9

package/dist/ui-tailwind.js

@@ -0,0 +1,650 @@
+import { defineComponent as V, computed as $, openBlock as l, createElementBlock as u, createTextVNode as N, toDisplayString as x, createCommentVNode as p, renderSlot as E, normalizeProps as J, guardReactiveProps as O, Fragment as w, renderList as F, ref as I, onMounted as Q, onUnmounted as W, createBlock as k, withCtx as B, createElementVNode as g, mergeProps as C, withModifiers as X, normalizeClass as Y, unref as D, resolveDynamicComponent as z, resolveComponent as Z } from "vue";
+import { b as _, t as U, q as ee, h as M } from "./MaskEngine-mLoXKd4d.js";
+const te = { class: "mb-4" }, re = ["for"], le = {
+  key: 0,
+  class: "text-red-400 ml-0.5",
+  "aria-hidden": "true"
+}, oe = ["id"], T = /* @__PURE__ */ V({
+  __name: "BaseField",
+  props: {
+    field: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  setup(e) {
+    const m = e, r = $(() => {
+      var n;
+      return !!(m.touched && ((n = m.error) != null && n.length));
+    }), c = $(() => `${m.field.name}-error`), a = $(() => ({
+      "aria-required": m.field.required ? "true" : void 0,
+      "aria-invalid": r.value ? "true" : "false",
+      "aria-describedby": r.value ? c.value : void 0
+    }));
+    return (n, d) => (l(), u("div", te, [
+      e.field.label ? (l(), u("label", {
+        key: 0,
+        for: e.field.name,
+        class: "block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1.5"
+      }, [
+        N(x(e.field.label) + " ", 1),
+        e.field.required ? (l(), u("span", le, "*")) : p("", !0)
+      ], 8, re)) : p("", !0),
+      E(n.$slots, "default", J(O(a.value))),
+      r.value ? (l(), u("ul", {
+        key: 1,
+        id: c.value,
+        class: "mt-1 space-y-0.5",
+        role: "alert",
+        "aria-live": "polite"
+      }, [
+        (l(!0), u(w, null, F(e.error, (i, f) => (l(), u("li", {
+          key: f,
+          class: "text-red-400 text-xs"
+        }, x(i), 1))), 128))
+      ], 8, oe)) : p("", !0)
+    ]));
+  }
+}), ae = ["id", "type", "name", "value", "placeholder", "disabled", "required"], A = /* @__PURE__ */ V({
+  __name: "TextField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = e, c = m, a = I(null);
+    let n = null;
+    const d = $(() => {
+      var i;
+      return !!(r.touched && ((i = r.error) != null && i.length));
+    });
+    return Q(() => {
+      a.value && r.field.mask && (n = _(a.value, r.field.mask));
+    }), W(() => n == null ? void 0 : n()), (i, f) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: B((b) => [
+        g("input", C({
+          id: e.field.name,
+          ref_key: "inputRef",
+          ref: a,
+          type: e.field.type === "email" ? "email" : "text",
+          name: e.field.name,
+          value: e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          required: e.field.required
+        }, b, {
+          class: ["w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50", d.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"],
+          onInput: f[0] || (f[0] = (y) => c("update:modelValue", y.target.value)),
+          onBlur: f[1] || (f[1] = (y) => c("blur"))
+        }), null, 16, ae)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ne = ["id", "name", "value", "placeholder", "disabled", "required"], P = /* @__PURE__ */ V({
+  __name: "NumberField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = e, c = m, a = $(() => {
+      var d;
+      return !!(r.touched && ((d = r.error) != null && d.length));
+    });
+    function n(d) {
+      const i = d.target.value;
+      c("update:modelValue", i === "" ? null : Number(i));
+    }
+    return (d, i) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: B((f) => [
+        g("input", C({
+          id: e.field.name,
+          type: "number",
+          name: e.field.name,
+          value: e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          required: e.field.required
+        }, f, {
+          class: ["w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50", a.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"],
+          onInput: n,
+          onBlur: i[0] || (i[0] = (b) => c("blur"))
+        }), null, 16, ne)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), de = ["id", "name", "value", "placeholder", "disabled", "required"], L = /* @__PURE__ */ V({
+  __name: "TextareaField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = e, c = m, a = $(() => {
+      var n;
+      return !!(r.touched && ((n = r.error) != null && n.length));
+    });
+    return (n, d) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: B((i) => [
+        g("textarea", C({
+          id: e.field.name,
+          name: e.field.name,
+          value: e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          required: e.field.required
+        }, i, {
+          class: ["w-full resize-y rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder-gray-500 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50", a.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"],
+          style: { "min-height": "80px" },
+          onInput: d[0] || (d[0] = (f) => c("update:modelValue", f.target.value)),
+          onBlur: d[1] || (d[1] = (f) => c("blur"))
+        }), null, 16, de)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ie = {
+  key: 0,
+  class: "py-2 text-sm text-gray-400"
+}, ue = ["id", "name", "disabled", "required"], se = ["selected"], ce = ["value", "selected"], j = /* @__PURE__ */ V({
+  __name: "SelectField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = e, c = m, a = $(
+      () => Array.isArray(r.field.options) ? r.field.options : []
+    ), n = $(() => {
+      var i;
+      return !!(r.touched && ((i = r.error) != null && i.length));
+    });
+    function d(i) {
+      const f = i.target, b = a.value.find((y) => String(y.value) === f.value);
+      c("update:modelValue", (b == null ? void 0 : b.value) ?? f.value);
+    }
+    return (i, f) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: B((b) => [
+        e.field.optionsLoading ? (l(), u("div", ie, "Loading…")) : (l(), u("select", C({
+          key: 1,
+          id: e.field.name,
+          name: e.field.name,
+          disabled: e.field.disabled === !0 || e.field.optionsLoading,
+          required: e.field.required
+        }, b, {
+          class: ["w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50", n.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"],
+          onChange: d,
+          onBlur: f[0] || (f[0] = (y) => c("blur"))
+        }), [
+          g("option", {
+            value: "",
+            disabled: "",
+            selected: e.modelValue === null || e.modelValue === void 0 || e.modelValue === "",
+            class: "bg-gray-800"
+          }, x(e.field.placeholder ?? "Select an option"), 9, se),
+          (l(!0), u(w, null, F(a.value, (y) => (l(), u("option", {
+            key: String(y.value),
+            value: String(y.value),
+            selected: e.modelValue === y.value,
+            class: "bg-gray-800"
+          }, x(y.label), 9, ce))), 128))
+        ], 16, ue))
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), me = { class: "flex cursor-pointer items-center gap-2.5" }, fe = ["id", "name", "checked", "disabled", "required", "aria-checked"], be = {
+  key: 0,
+  class: "text-sm text-gray-200"
+}, K = /* @__PURE__ */ V({
+  __name: "CheckboxField",
+  props: {
+    field: {},
+    modelValue: { type: [Boolean, null] },
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = m;
+    return (c, a) => (l(), k(T, {
+      field: { ...e.field, label: void 0 },
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: B((n) => [
+        g("label", me, [
+          g("input", C({
+            id: e.field.name,
+            type: "checkbox",
+            name: e.field.name,
+            checked: !!e.modelValue,
+            disabled: e.field.disabled === !0,
+            required: e.field.required,
+            "aria-checked": e.modelValue ? "true" : "false"
+          }, n, {
+            class: "h-4 w-4 cursor-pointer rounded border-gray-600 bg-gray-900 text-indigo-500 accent-indigo-500 disabled:cursor-not-allowed disabled:opacity-50",
+            onChange: a[0] || (a[0] = (d) => r("update:modelValue", d.target.checked)),
+            onBlur: a[1] || (a[1] = (d) => r("blur"))
+          }), null, 16, fe),
+          e.field.label ? (l(), u("span", be, x(e.field.label), 1)) : p("", !0)
+        ])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ge = ["aria-required", "aria-invalid", "aria-describedby"], ye = {
+  key: 0,
+  class: "block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2"
+}, he = {
+  key: 0,
+  class: "text-red-400 ml-0.5",
+  "aria-hidden": "true"
+}, ve = { class: "space-y-2" }, xe = ["name", "value", "checked", "disabled", "onChange"], $e = { class: "text-sm text-gray-200" }, pe = ["id"], G = /* @__PURE__ */ V({
+  __name: "RadioField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = e, c = m, a = $(() => {
+      var i;
+      return !!(r.touched && ((i = r.error) != null && i.length));
+    }), n = $(() => `${r.field.name}-error`), d = $(
+      () => Array.isArray(r.field.options) ? r.field.options : []
+    );
+    return (i, f) => (l(), u("fieldset", {
+      class: "mb-4",
+      "aria-required": e.field.required ? "true" : void 0,
+      "aria-invalid": a.value ? "true" : "false",
+      "aria-describedby": a.value ? n.value : void 0
+    }, [
+      e.field.label ? (l(), u("legend", ye, [
+        N(x(e.field.label) + " ", 1),
+        e.field.required ? (l(), u("span", he, "*")) : p("", !0)
+      ])) : p("", !0),
+      g("div", ve, [
+        (l(!0), u(w, null, F(d.value, (b) => (l(), u("label", {
+          key: String(b.value),
+          class: "flex cursor-pointer items-center gap-2.5"
+        }, [
+          g("input", {
+            type: "radio",
+            name: e.field.name,
+            value: String(b.value),
+            checked: e.modelValue === b.value,
+            disabled: e.field.disabled === !0,
+            class: "h-4 w-4 cursor-pointer border-gray-600 bg-gray-900 text-indigo-500 accent-indigo-500 disabled:cursor-not-allowed disabled:opacity-50",
+            onChange: (y) => c("update:modelValue", b.value),
+            onBlur: f[0] || (f[0] = (y) => c("blur"))
+          }, null, 40, xe),
+          g("span", $e, x(b.label), 1)
+        ]))), 128))
+      ]),
+      a.value ? (l(), u("ul", {
+        key: 1,
+        id: n.value,
+        class: "mt-1 space-y-0.5",
+        role: "alert",
+        "aria-live": "polite"
+      }, [
+        (l(!0), u(w, null, F(e.error, (b, y) => (l(), u("li", {
+          key: y,
+          class: "text-red-400 text-xs"
+        }, x(b), 1))), 128))
+      ], 8, pe)) : p("", !0)
+    ], 8, ge));
+  }
+}), ke = ["id", "name", "value", "disabled", "required"], H = /* @__PURE__ */ V({
+  __name: "DateField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = e, c = m, a = $(() => {
+      var n;
+      return !!(r.touched && ((n = r.error) != null && n.length));
+    });
+    return (n, d) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: B((i) => [
+        g("input", C({
+          id: e.field.name,
+          type: "date",
+          name: e.field.name,
+          value: e.modelValue ?? "",
+          disabled: e.field.disabled === !0,
+          required: e.field.required
+        }, i, {
+          class: ["w-full rounded-lg border bg-gray-900 px-3 py-2 text-sm text-gray-100 outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50", a.value ? "border-red-500 focus:ring-red-500" : "border-gray-700 focus:ring-indigo-500 focus:border-indigo-500"],
+          onInput: d[0] || (d[0] = (f) => c("update:modelValue", f.target.value)),
+          onBlur: d[1] || (d[1] = (f) => c("blur"))
+        }), null, 16, ke)
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), Ve = ["id", "name", "accept", "multiple", "disabled", "required"], we = { class: "pointer-events-none space-y-1" }, Fe = { class: "text-sm text-gray-300" }, qe = {
+  key: 0,
+  class: "text-xs text-gray-500"
+}, Be = {
+  key: 0,
+  class: "mt-2 space-y-1"
+}, Ce = { class: "truncate text-gray-200" }, Te = { class: "ml-2 shrink-0 text-xs text-gray-500" }, Se = ["aria-label", "onClick"], Re = /* @__PURE__ */ V({
+  __name: "FileField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: m }) {
+    const r = e, c = m, a = I(!1), n = I(null), d = $(() => r.modelValue ? Array.isArray(r.modelValue) ? r.modelValue : [r.modelValue] : []), i = $(() => r.field.multiple ?? !1);
+    function f(o) {
+      if (!o || o.length === 0) {
+        c("update:modelValue", null);
+        return;
+      }
+      c("update:modelValue", i.value ? Array.from(o) : o[0]);
+    }
+    function b(o) {
+      f(o.target.files), c("blur");
+    }
+    function y(o) {
+      var t;
+      a.value = !1, o.preventDefault(), f(((t = o.dataTransfer) == null ? void 0 : t.files) ?? null), c("blur");
+    }
+    function S(o) {
+      const t = d.value.filter((h, v) => v !== o);
+      t.length === 0 ? (c("update:modelValue", null), n.value && (n.value.value = "")) : c("update:modelValue", i.value ? t : t[0]);
+    }
+    function R(o) {
+      return o < 1024 ? `${o} B` : o < 1024 * 1024 ? `${(o / 1024).toFixed(1)} KB` : `${(o / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    return (o, t) => (l(), k(T, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: B((h) => {
+        var v;
+        return [
+          g("div", {
+            class: Y(["relative rounded-lg border-2 border-dashed p-6 text-center transition", a.value ? "border-indigo-500 bg-indigo-500/10" : e.touched && ((v = e.error) != null && v.length) ? "border-red-500 bg-red-500/5" : "border-gray-700 bg-gray-900 hover:border-gray-500"]),
+            onDragover: t[0] || (t[0] = X((s) => a.value = !0, ["prevent"])),
+            onDragleave: t[1] || (t[1] = (s) => a.value = !1),
+            onDrop: y
+          }, [
+            g("input", C({
+              id: e.field.name,
+              ref_key: "inputRef",
+              ref: n,
+              type: "file",
+              name: e.field.name,
+              accept: e.field.accept,
+              multiple: i.value,
+              disabled: e.field.disabled === !0,
+              required: e.field.required
+            }, h, {
+              class: "absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+              onChange: b
+            }), null, 16, Ve),
+            g("div", we, [
+              t[2] || (t[2] = g("div", { class: "text-2xl" }, "📁", -1)),
+              g("p", Fe, x(a.value ? "Drop files here" : "Click to upload or drag & drop"), 1),
+              e.field.accept ? (l(), u("p", qe, x(e.field.accept), 1)) : p("", !0)
+            ])
+          ], 34),
+          d.value.length ? (l(), u("ul", Be, [
+            (l(!0), u(w, null, F(d.value, (s, q) => (l(), u("li", {
+              key: `${s.name}-${q}`,
+              class: "flex items-center justify-between rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm"
+            }, [
+              g("span", Ce, x(s.name), 1),
+              g("span", Te, x(R(s.size)), 1),
+              g("button", {
+                type: "button",
+                "aria-label": `Remove ${s.name}`,
+                class: "ml-2 shrink-0 text-gray-500 hover:text-red-400 transition",
+                onClick: (Pe) => S(q)
+              }, " × ", 8, Se)
+            ]))), 128))
+          ])) : p("", !0)
+        ];
+      }),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), Ae = { class: "mb-4" }, De = {
+  key: 0,
+  class: "block text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2"
+}, Ee = { class: "flex-1 space-y-0" }, Ie = ["onClick"], Ne = /* @__PURE__ */ V({
+  __name: "ArrayField",
+  props: {
+    field: {},
+    form: {},
+    components: {}
+  },
+  setup(e) {
+    const m = e, r = U(), c = {
+      text: A,
+      email: A,
+      number: P,
+      textarea: L,
+      select: j,
+      checkbox: K,
+      radio: G,
+      date: H
+    };
+    function a(o) {
+      var t;
+      return o.component ? o.component : ((t = m.components) == null ? void 0 : t[o.type]) ?? r[o.type] ?? c[o.type] ?? null;
+    }
+    const { rows: n, append: d, remove: i } = ee(m.form, m.field.name);
+    function f(o) {
+      return M(m.form.values.value, o.name);
+    }
+    function b(o, t) {
+      m.form.setField(o.name, t);
+    }
+    function y(o) {
+      var h;
+      const t = m.form;
+      (h = t.touchField) == null || h.call(t, o.name);
+    }
+    function S(o) {
+      return m.form.errors.value[o.name] ?? [];
+    }
+    function R(o) {
+      return m.form.touched.value[o.name] ?? !1;
+    }
+    return (o, t) => (l(), u("div", Ae, [
+      e.field.label ? (l(), u("div", De, x(e.field.label), 1)) : p("", !0),
+      (l(!0), u(w, null, F(D(n), (h) => (l(), u("div", {
+        key: h.key,
+        class: "mb-2 flex items-start gap-2 rounded-lg border border-gray-700 bg-gray-900 p-3"
+      }, [
+        g("div", Ee, [
+          (l(!0), u(w, null, F(h.fields, (v) => (l(), u(w, {
+            key: v.name
+          }, [
+            a(v) ? (l(), k(z(a(v)), {
+              key: 0,
+              field: v,
+              "model-value": f(v),
+              error: S(v),
+              touched: R(v),
+              "onUpdate:modelValue": (s) => b(v, s),
+              onBlur: (s) => y(v)
+            }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : p("", !0)
+          ], 64))), 128))
+        ]),
+        g("button", {
+          type: "button",
+          class: "mt-7 shrink-0 rounded px-2 py-1 text-xs text-gray-500 hover:bg-red-500/10 hover:text-red-400 transition",
+          onClick: (v) => D(i)(h.index)
+        }, " Remove ", 8, Ie)
+      ]))), 128)),
+      g("button", {
+        type: "button",
+        class: "mt-1 rounded-lg border border-dashed border-gray-600 px-4 py-2 text-sm text-gray-400 hover:border-indigo-500 hover:text-indigo-400 transition",
+        onClick: t[0] || (t[0] = (h) => D(d)())
+      }, " + Add row ")
+    ]));
+  }
+}), ze = {
+  key: 1,
+  class: "mb-4 rounded-lg border border-gray-700 p-4"
+}, Ue = {
+  key: 0,
+  class: "px-1 text-xs font-semibold uppercase tracking-wider text-gray-400"
+}, Me = ["disabled"], Ke = /* @__PURE__ */ V({
+  __name: "TailwindFormRenderer",
+  props: {
+    form: {},
+    components: {},
+    submitLabel: {}
+  },
+  emits: ["submit"],
+  setup(e, { emit: m }) {
+    const r = e, c = U(), a = m, n = {
+      text: A,
+      email: A,
+      number: P,
+      textarea: L,
+      select: j,
+      checkbox: K,
+      radio: G,
+      date: H,
+      file: Re
+    };
+    function d(t) {
+      var h;
+      return t.component ? t.component : ((h = r.components) == null ? void 0 : h[t.type]) ?? c[t.type] ?? n[t.type] ?? null;
+    }
+    function i(t) {
+      return M(r.form.values.value, t.name);
+    }
+    function f(t, h) {
+      r.form.setField(t.name, h);
+    }
+    function b(t) {
+      var v;
+      const h = r.form;
+      (v = h.touchField) == null || v.call(h, t.name);
+    }
+    function y(t) {
+      return r.form.errors.value[t.name] ?? [];
+    }
+    function S(t) {
+      return r.form.touched.value[t.name] ?? !1;
+    }
+    const R = $(() => r.form.fields.value.filter((t) => t.visible !== !1));
+    async function o(t) {
+      t.preventDefault(), await r.form.submit(), a("submit");
+    }
+    return (t, h) => {
+      const v = Z("TailwindFormRenderer", !0);
+      return l(), u("form", {
+        novalidate: "",
+        onSubmit: o
+      }, [
+        (l(!0), u(w, null, F(R.value, (s) => (l(), u(w, {
+          key: s.name
+        }, [
+          t.$slots[`field-${s.name}`] ? E(t.$slots, `field-${s.name}`, {
+            key: 0,
+            field: s,
+            value: i(s),
+            error: y(s),
+            touched: S(s),
+            setValue: (q) => f(s, q),
+            touch: () => b(s)
+          }) : s.type === "group" ? (l(), u("fieldset", ze, [
+            s.label ? (l(), u("legend", Ue, x(s.label), 1)) : p("", !0),
+            s.fields ? (l(), k(v, {
+              key: 1,
+              form: e.form,
+              components: e.components
+            }, null, 8, ["form", "components"])) : p("", !0)
+          ])) : s.type === "array" ? (l(), k(Ne, {
+            key: 2,
+            field: s,
+            form: e.form,
+            components: e.components
+          }, null, 8, ["field", "form", "components"])) : d(s) ? (l(), k(z(d(s)), {
+            key: 3,
+            field: s,
+            "model-value": i(s),
+            error: y(s),
+            touched: S(s),
+            "onUpdate:modelValue": (q) => f(s, q),
+            onBlur: (q) => b(s)
+          }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : p("", !0)
+        ], 64))), 128)),
+        E(t.$slots, "submit", {
+          isSubmitting: e.form.isSubmitting.value,
+          isValid: e.form.isValid.value
+        }, () => [
+          g("button", {
+            type: "submit",
+            disabled: e.form.isSubmitting.value,
+            class: "mt-2 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
+          }, x(e.submitLabel ?? "Submit"), 9, Me)
+        ])
+      ], 32);
+    };
+  }
+});
+export {
+  Ke as TailwindFormRenderer,
+  Ne as TwArrayField,
+  K as TwCheckboxField,
+  H as TwDateField,
+  Re as TwFileField,
+  P as TwNumberField,
+  G as TwRadioField,
+  j as TwSelectField,
+  A as TwTextField,
+  L as TwTextareaField
+};