@macrulez/vue-form-schema 0.1.7 → 0.2.0

package/dist/ui-shadcn.js

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