@enos5/enos-vue 0.1.3 → 0.2.0

package/README.md

@@ -21,6 +21,33 @@ Build the package:
 npm run build
 ```
 
+## Component Documentation Sandbox
+
+This repository includes a dedicated docs playground for the component library. It renders each component with a live example and generates editable prop controls from the component prop definitions.
+
+Run it locally:
+
+```bash
+npm install
+npm run docs:dev
+```
+
+Build the docs site:
+
+```bash
+npm run docs:build
+```
+
+## Run With Docker
+
+Start the docs app with Docker Compose:
+
+```bash
+docker compose up --build
+```
+
+Then open `http://localhost:4173`.
+
 ## Use In Another Project
 
 Install the published package:

package/dist/index.js

@@ -41,58 +41,58 @@ const Xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     return Oe;
   },
   get ConfirmationModal() {
-    return hl;
+    return bl;
   },
   get CustomSelect() {
     return Be;
   },
   get DangerButton() {
-    return xl;
+    return vl;
   },
   get DateInput() {
     return Ae;
   },
   get DialogModal() {
-    return Cl;
+    return $l;
   },
   get Divider() {
     return fe;
   },
   get Dropdown() {
-    return Vl;
+    return _l;
   },
   get DropdownLink() {
-    return Al;
+    return Tl;
   },
   get EnosVue() {
-    return ea;
+    return Zs;
   },
   get FormSection() {
-    return Ol;
+    return Dl;
   },
   get ImageInput() {
     return je;
   },
   get InputError() {
-    return zl;
+    return Ml;
   },
   get InputGroup() {
     return re;
   },
   get InputLabel() {
-    return El;
+    return Nl;
   },
   get Modal() {
     return me;
   },
   get NavLink() {
-    return Kl;
+    return El;
   },
   get NotationInput() {
     return Ie;
   },
   get PrimaryButton() {
-    return Hl;
+    return Rl;
   },
   get PrimaryLinkButton() {
     return ye;
@@ -104,16 +104,16 @@ const Xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     return De;
   },
   get ResponsiveNavLink() {
-    return ql;
+    return Wl;
   },
   get SecondaryButton() {
-    return Xl;
+    return Gl;
   },
   get SecondaryLinkButton() {
-    return Ql;
+    return Jl;
   },
   get SectionBorder() {
-    return es;
+    return Zl;
   },
   get SectionTitle() {
     return pe;
@@ -122,19 +122,19 @@ const Xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     return Te;
   },
   get SortControls() {
-    return is;
+    return rs;
   },
   get TableList() {
-    return Vs;
+    return _s;
   },
   get TableListForm() {
-    return qs;
+    return Ws;
   },
   get TertiaryButton() {
-    return Xs;
+    return Gs;
   },
   get TertiaryLinkButton() {
-    return Qs;
+    return Js;
   },
   get TextArea() {
     return Ve;
@@ -146,7 +146,7 @@ const Xe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     return be;
   },
   get WarningButton() {
-    return Zs;
+    return Ys;
   }
 }, Symbol.toStringTag, { value: "Module" })), Je = { class: "border-b border-gray-200/80 bg-gray-50/80 p-2" }, Qe = {
   role: "tablist",
@@ -791,7 +791,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       ], 8, Nt)) : O("", !0)
     ]));
   }
-}), Ht = { class: "p-1" }, Pt = ["value", "disabled"], Wt = 1e3, Ve = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}), Ht = ["value", "disabled"], Pt = 1e3, Ve = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "TextArea",
   props: {
     modelValue: String,
@@ -812,7 +812,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
   setup(e, { expose: a, emit: t }) {
     const l = e, o = t, d = P(), i = z(null), u = f(() => {
       const { class: h, ...b } = d;
-      return b.maxlength === void 0 && (b.maxlength = Wt), b;
+      return b.maxlength === void 0 && (b.maxlength = Pt), b;
     }), k = f(() => [
       "w-full min-w-0 max-w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm",
       l.autoResize ? "resize-none overflow-y-auto" : "resize-y",
@@ -830,7 +830,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       de(() => {
         x();
       });
-    }), a({ focus: () => i.value?.focus() }), (h, b) => (s(), n("div", Ht, [
+    }), a({ focus: () => i.value?.focus() }), (h, b) => (s(), n("div", null, [
       r("textarea", M({
         ref_key: "textarea",
         ref: i
@@ -839,10 +839,10 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         value: l.modelValue,
         disabled: l.disabled,
         onInput: T
-      }), null, 16, Pt)
+      }), null, 16, Ht)
     ]));
   }
-}), qt = ["onClick"], Be = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}), Wt = ["onClick"], Be = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "CustomSelect",
   props: {
     modelValue: {
@@ -1034,7 +1034,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                   }
                 ]),
                 onClick: ue((c) => le(N), ["stop"])
-              }, $(b(N)), 11, qt))), 128))
+              }, $(b(N)), 11, Wt))), 128))
             ], 6)) : O("", !0)
           ]))
         ]),
@@ -1153,7 +1153,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       "onUpdate:modelValue": o[0] || (o[0] = (d) => t("update:modelValue", d))
     }, l.$attrs), null, 16, ["model-value", "model-modifiers", "options", "placeholder", "placeholder-disabled", "disabled", "soft-delete-aware", "label-key", "value-key", "deleted-key", "option-label", "base-class", "normal-text-class", "deleted-selected-class", "option-class", "deleted-option-class", "placeholder-class", "dropdown-class", "dropdown-option-class", "dropdown-selected-class"]));
   }
-}, Gt = ["type", "max", "value", "disabled"], Ae = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}, qt = ["type", "max", "value", "disabled"], Ae = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "DateInput",
   props: {
     modelValue: {
@@ -1204,12 +1204,12 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       disabled: l.disabled,
       onInput: C,
       onChange: C
-    }), null, 16, Gt));
+    }), null, 16, qt));
   }
-}), Xt = { class: "relative" }, Jt = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" }, Qt = ["accept"], Yt = {
+}), Gt = { class: "relative" }, Xt = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" }, Jt = ["accept"], Qt = {
   key: 0,
   class: "mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200"
-}, Zt = { class: "flex items-center space-x-4" }, el = ["src"], tl = { class: "text-sm font-medium text-gray-900" }, ll = { class: "text-xs text-gray-500" }, je = {
+}, Yt = { class: "flex items-center space-x-4" }, Zt = ["src"], el = { class: "text-sm font-medium text-gray-900" }, tl = { class: "text-xs text-gray-500" }, je = {
   __name: "ImageInput",
   props: {
     currentImageUrl: {
@@ -1240,8 +1240,8 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       t("update:modelValue", i);
     };
     return (d, i) => (s(), n("div", null, [
-      r("div", Xt, [
-        r("div", Jt, [
+      r("div", Gt, [
+        r("div", Xt, [
           E(V(We), { class: "size-5 text-gray-400" })
         ]),
         r("input", M(e.attrs, {
@@ -1249,24 +1249,24 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
           accept: e.accept,
           class: "block w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg bg-white text-sm file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 cursor-pointer",
           onChange: o
-        }), null, 16, Qt)
+        }), null, 16, Jt)
       ]),
-      l.currentImageUrl ? (s(), n("div", Yt, [
-        r("div", Zt, [
+      l.currentImageUrl ? (s(), n("div", Qt, [
+        r("div", Yt, [
           r("img", {
             src: l.currentImageUrl,
             alt: "Current logo",
             class: "h-16 w-auto max-w-24 object-contain rounded-lg shadow-sm"
-          }, null, 8, el),
+          }, null, 8, Zt),
           r("div", null, [
-            r("p", tl, $(l.currentLabel), 1),
-            r("p", ll, $(l.currentSubtext), 1)
+            r("p", el, $(l.currentLabel), 1),
+            r("p", tl, $(l.currentSubtext), 1)
           ])
         ])
       ])) : O("", !0)
     ]));
   }
-}, sl = { class: "flex h-12 overflow-hidden rounded-lg border border-gray-300 text-sm" }, al = ["disabled", "onClick"], Ie = {
+}, ll = { class: "flex h-12 overflow-hidden rounded-lg border border-gray-300 text-sm" }, sl = ["disabled", "onClick"], Ie = {
   __name: "NotationInput",
   props: {
     modelValue: {
@@ -1285,7 +1285,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = a, l = e, o = f(() => l.options.map((u) => u == null ? "" : String(u).trim()).filter((u) => u !== "")), d = (u) => String(u) === String(l.modelValue ?? ""), i = (u) => t("update:modelValue", u);
-    return (u, k) => (s(), n("div", sl, [
+    return (u, k) => (s(), n("div", ll, [
       (s(!0), n(H, null, W(o.value, (x, T) => (s(), n("button", {
         key: `notation-${T}-${x}`,
         type: "button",
@@ -1297,10 +1297,10 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         ]]),
         disabled: e.disabled,
         onClick: (h) => i(x)
-      }, $(x), 11, al))), 128))
+      }, $(x), 11, sl))), 128))
     ]));
   }
-}, nl = ["name", "value", "checked", "disabled"], Le = {
+}, al = ["name", "value", "checked", "disabled"], Le = {
   __name: "RadioInput",
   props: {
     modelValue: {
@@ -1348,11 +1348,11 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         onChange: k,
         onFocus: i,
         onBlur: u
-      }, null, 40, nl),
+      }, null, 40, al),
       r("span", null, $(o.value ? "✓" : "○") + " " + $(e.label), 1)
     ], 2));
   }
-}, ol = { class: "flex flex-wrap gap-3" }, De = {
+}, nl = { class: "flex flex-wrap gap-3" }, De = {
   __name: "RadioMultipleInput",
   props: {
     modelValue: {
@@ -1375,7 +1375,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
   emits: ["update:modelValue"],
   setup(e, { emit: a }) {
     const t = a, l = e, o = f(() => l.options.map((i) => i == null ? "" : String(i).trim()).filter((i) => i !== "")), d = (i) => t("update:modelValue", i);
-    return (i, u) => (s(), n("div", ol, [
+    return (i, u) => (s(), n("div", nl, [
       (s(!0), n(H, null, W(o.value, (k) => (s(), A(re, {
         key: `radio-${e.name ?? "group"}-${k}`,
         type: "radio-input",
@@ -1388,10 +1388,10 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       }, null, 8, ["model-value", "name", "value", "label", "disabled"]))), 128))
     ]));
   }
-}, rl = ["for"], il = {
+}, ol = ["for"], rl = {
   key: 1,
   class: "text-xs text-gray-500 mb-1 block break-all"
-}, dl = {
+}, il = {
   key: 14,
   class: "flex items-center mt-2 text-sm text-red-600"
 }, ne = "block w-full px-4 py-3 rounded-lg bg-white text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200", re = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
@@ -1604,8 +1604,8 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         key: 0,
         for: k.value,
         class: "text-base font-semibold text-gray-900 mb-1 block"
-      }, $(e.label), 9, rl)) : O("", !0),
-      e.helperText && !u.value ? (s(), n("span", il, $(e.helperText), 1)) : O("", !0),
+      }, $(e.label), 9, ol)) : O("", !0),
+      e.helperText && !u.value ? (s(), n("span", rl, $(e.helperText), 1)) : O("", !0),
       K.value ? (s(), A(Ve, M({ key: 2 }, Q.value, {
         "onUpdate:modelValue": w[0] || (w[0] = (B) => l("update:modelValue", B)),
         onBlur: w[1] || (w[1] = (B) => l("blur", B))
@@ -1649,13 +1649,13 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         updateValue: d,
         attrs: V(o)
       }),
-      i.value ? (s(), n("div", dl, [
+      i.value ? (s(), n("div", il, [
         E(V(qe), { class: "mr-1 h-4 w-4 flex-shrink-0" }),
         r("span", null, $(e.errorMessage), 1)
       ])) : O("", !0)
     ]));
   }
-}), ul = { class: "flex flex-wrap gap-3" }, Oe = {
+}), dl = { class: "flex flex-wrap gap-3" }, Oe = {
   __name: "CheckboxMultipleInput",
   props: {
     modelValue: {
@@ -1677,7 +1677,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       const x = Array.isArray(l.modelValue) ? [...l.modelValue] : [], T = x.indexOf(u);
       k && T === -1 ? x.push(u) : !k && T !== -1 && x.splice(T, 1), t("update:modelValue", x);
     };
-    return (u, k) => (s(), n("div", ul, [
+    return (u, k) => (s(), n("div", dl, [
       (s(!0), n(H, null, W(o.value, (x) => (s(), A(re, {
         key: `checkbox-${x}`,
         type: "checkbox-input",
@@ -1793,7 +1793,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       ], 2)
     ], 512));
   }
-}, cl = { class: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4" }, fl = { class: "sm:flex sm:items-start" }, gl = { class: "mx-auto shrink-0 flex items-center justify-center size-12 rounded-full bg-red-100 sm:mx-0 sm:size-10" }, pl = { class: "mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start" }, ml = { class: "text-lg font-medium text-gray-900" }, yl = { class: "mt-4 text-sm text-gray-600" }, bl = { class: "flex flex-col-reverse lg:flex-row lg:justify-end px-6 py-4 bg-gray-100 text-end gap-4 lg:gap-0" }, hl = {
+}, ul = { class: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4" }, cl = { class: "sm:flex sm:items-start" }, fl = { class: "mx-auto shrink-0 flex items-center justify-center size-12 rounded-full bg-red-100 sm:mx-0 sm:size-10" }, gl = { class: "mt-3 text-center sm:mt-0 sm:ms-4 sm:text-start" }, pl = { class: "text-lg font-medium text-gray-900" }, ml = { class: "mt-4 text-sm text-gray-600" }, yl = { class: "flex flex-col-reverse lg:flex-row lg:justify-end px-6 py-4 bg-gray-100 text-end gap-4 lg:gap-0" }, bl = {
   __name: "ConfirmationModal",
   props: {
     show: {
@@ -1827,29 +1827,29 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       onClose: l
     }, {
       default: F(() => [
-        r("div", cl, [
-          r("div", fl, [
-            r("div", gl, [
+        r("div", ul, [
+          r("div", cl, [
+            r("div", fl, [
               E(V(we), { class: "size-6 text-red-600" })
             ]),
-            r("div", pl, [
-              r("h3", ml, [
+            r("div", gl, [
+              r("h3", pl, [
                 g(o.$slots, "title")
               ]),
-              r("div", yl, [
+              r("div", ml, [
                 g(o.$slots, "content")
               ])
             ])
           ])
         ]),
-        r("div", bl, [
+        r("div", yl, [
           g(o.$slots, "footer")
         ])
       ]),
       _: 3
     }, 8, ["show", "max-width", "closeable", "position"]));
   }
-}, vl = ["type", "disabled"], xl = /* @__PURE__ */ Object.assign({
+}, hl = ["type", "disabled"], vl = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "DangerButton",
@@ -1871,9 +1871,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg border border-red-300 bg-red-50 p-3 py-2 text-sm font-medium text-red-700 transition-all duration-200 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-red-50"
     }), [
       g(t.$slots, "default")
-    ], 16, vl));
+    ], 16, hl));
   }
-}), wl = { class: "px-6 py-4" }, kl = { class: "text-lg font-medium text-gray-900" }, Sl = { class: "mt-4 text-sm text-gray-600" }, $l = { class: "flex flex-row justify-end px-6 py-4 bg-gray-100 text-end" }, Cl = {
+}), xl = { class: "px-6 py-4" }, wl = { class: "text-lg font-medium text-gray-900" }, kl = { class: "mt-4 text-sm text-gray-600" }, Sl = { class: "flex flex-row justify-end px-6 py-4 bg-gray-100 text-end" }, $l = {
   __name: "DialogModal",
   props: {
     show: {
@@ -1901,22 +1901,22 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       onClose: l
     }, {
       default: F(() => [
-        r("div", wl, [
-          r("div", kl, [
+        r("div", xl, [
+          r("div", wl, [
             g(o.$slots, "title")
           ]),
-          r("div", Sl, [
+          r("div", kl, [
             g(o.$slots, "content")
           ])
         ]),
-        r("div", $l, [
+        r("div", Sl, [
           g(o.$slots, "footer")
         ])
       ]),
       _: 3
     }, 8, ["show", "max-width", "closeable"]));
   }
-}, _l = { class: "relative" }, Vl = {
+}, Cl = { class: "relative" }, _l = {
   __name: "Dropdown",
   props: {
     align: {
@@ -1942,7 +1942,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
     const o = f(() => ({
       48: "w-48"
     })[a.width.toString()]), d = f(() => a.align === "left" ? "ltr:origin-top-left rtl:origin-top-right start-0" : a.align === "right" ? "ltr:origin-top-right rtl:origin-top-left end-0" : "origin-top");
-    return (i, u) => (s(), n("div", _l, [
+    return (i, u) => (s(), n("div", Cl, [
       r("div", {
         onClick: u[0] || (u[0] = (k) => ie(t) ? t.value = !V(t) : t = !V(t))
       }, [
@@ -1981,11 +1981,11 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       })
     ]));
   }
-}, Bl = {
+}, Vl = {
   key: 0,
   type: "submit",
   class: "block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
-}, Tl = ["href"], Al = {
+}, Bl = ["href"], Tl = {
   __name: "DropdownLink",
   props: {
     href: String,
@@ -1993,7 +1993,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
   },
   setup(e) {
     return (a, t) => (s(), n("div", null, [
-      e.as == "button" ? (s(), n("button", Bl, [
+      e.as == "button" ? (s(), n("button", Vl, [
         g(a.$slots, "default")
       ])) : e.as == "a" ? (s(), n("a", {
         key: 1,
@@ -2001,7 +2001,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         class: "block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
       }, [
         g(a.$slots, "default")
-      ], 8, Tl)) : (s(), A(V(ee), {
+      ], 8, Bl)) : (s(), A(V(ee), {
         key: 2,
         href: e.href,
         class: "block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
@@ -2013,15 +2013,15 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       }, 8, ["href"]))
     ]));
   }
-}, jl = { class: "md:grid md:grid-cols-3 md:gap-6" }, Il = { class: "mt-5 md:mt-0 md:col-span-2 shadow sm:rounded-lg" }, Ll = { class: "grid grid-cols-6 gap-6" }, Dl = {
+}, Al = { class: "md:grid md:grid-cols-3 md:gap-6" }, jl = { class: "mt-5 md:mt-0 md:col-span-2 shadow sm:rounded-lg" }, Il = { class: "grid grid-cols-6 gap-6" }, Ll = {
   key: 0,
   class: "flex items-center justify-start px-3 pb-6 bg-white text-end sm:rounded-bl-md sm:rounded-br-md"
-}, Ol = {
+}, Dl = {
   __name: "FormSection",
   emits: ["submitted"],
   setup(e) {
     const a = f(() => !!oe().actions);
-    return (t, l) => (s(), n("div", jl, [
+    return (t, l) => (s(), n("div", Al, [
       E(pe, null, {
         title: F(() => [
           g(t.$slots, "title")
@@ -2031,49 +2031,49 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         ]),
         _: 3
       }),
-      r("div", Il, [
+      r("div", jl, [
         r("form", {
           onSubmit: l[0] || (l[0] = ue((o) => t.$emit("submitted"), ["prevent"]))
         }, [
           r("div", {
             class: _(["px-4 py-5 bg-white sm:p-6", a.value ? "sm:rounded-tl-md sm:rounded-tr-md" : "sm:rounded-md"])
           }, [
-            r("div", Ll, [
+            r("div", Il, [
               g(t.$slots, "form")
             ])
           ], 2),
-          a.value ? (s(), n("div", Dl, [
+          a.value ? (s(), n("div", Ll, [
             g(t.$slots, "actions")
           ])) : O("", !0)
         ], 32)
       ])
     ]));
   }
-}, Ml = { class: "text-sm text-red-600" }, zl = {
+}, Ol = { class: "text-sm text-red-600" }, Ml = {
   __name: "InputError",
   props: {
     message: String
   },
   setup(e) {
     return (a, t) => G((s(), n("div", null, [
-      r("p", Ml, $(e.message), 1)
+      r("p", Ol, $(e.message), 1)
     ], 512)), [
       [Z, e.message]
     ]);
   }
-}, Fl = { class: "block font-medium text-sm text-gray-700" }, Ul = { key: 0 }, Nl = { key: 1 }, El = {
+}, zl = { class: "block font-medium text-sm text-gray-700" }, Fl = { key: 0 }, Ul = { key: 1 }, Nl = {
   __name: "InputLabel",
   props: {
     value: String
   },
   setup(e) {
-    return (a, t) => (s(), n("label", Fl, [
-      e.value ? (s(), n("span", Ul, $(e.value), 1)) : (s(), n("span", Nl, [
+    return (a, t) => (s(), n("label", zl, [
+      e.value ? (s(), n("span", Fl, $(e.value), 1)) : (s(), n("span", Ul, [
         g(a.$slots, "default")
       ]))
     ]));
   }
-}, Kl = {
+}, El = {
   __name: "NavLink",
   props: {
     href: String,
@@ -2091,7 +2091,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       _: 3
     }, 8, ["href", "class"]));
   }
-}, Rl = ["type", "disabled"], Hl = /* @__PURE__ */ Object.assign({
+}, Kl = ["type", "disabled"], Rl = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "PrimaryButton",
@@ -2113,9 +2113,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:from-blue-500 disabled:hover:to-blue-600"
     }), [
       g(t.$slots, "default")
-    ], 16, Rl));
+    ], 16, Kl));
   }
-}), Pl = ["href", "title", "target", "rel"], ye = /* @__PURE__ */ Object.assign({
+}), Hl = ["href", "title", "target", "rel"], ye = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "PrimaryLinkButton",
@@ -2151,7 +2151,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
     }), [
       g(t.$slots, "default")
-    ], 16, Pl)) : (s(), A(V(ee), M({ key: 0 }, V(a), {
+    ], 16, Hl)) : (s(), A(V(ee), M({ key: 0 }, V(a), {
       href: e.href,
       title: e.title,
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-blue-600 hover:to-blue-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
@@ -2162,7 +2162,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       _: 3
     }, 16, ["href", "title"]));
   }
-}), Wl = ["href"], ql = {
+}), Pl = ["href"], Wl = {
   __name: "ResponsiveNavLink",
   props: {
     active: Boolean,
@@ -2183,7 +2183,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
         href: e.href
       }, [
         g(l.$slots, "default")
-      ], 10, Wl)) : (s(), A(V(ee), {
+      ], 10, Pl)) : (s(), A(V(ee), {
         key: 2,
         href: e.href,
         class: _(t.value)
@@ -2195,7 +2195,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       }, 8, ["href", "class"]))
     ]));
   }
-}, Gl = ["type", "disabled"], Xl = /* @__PURE__ */ Object.assign({
+}, ql = ["type", "disabled"], Gl = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "SecondaryButton",
@@ -2217,9 +2217,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-green-500 to-green-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-green-600 hover:to-green-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:from-green-500 disabled:hover:to-green-600"
     }), [
       g(t.$slots, "default")
-    ], 16, Gl));
+    ], 16, ql));
   }
-}), Jl = ["href", "title", "target", "rel"], Ql = /* @__PURE__ */ Object.assign({
+}), Xl = ["href", "title", "target", "rel"], Jl = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "SecondaryLinkButton",
@@ -2255,7 +2255,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-green-500 to-green-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-green-600 hover:to-green-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
     }), [
       g(t.$slots, "default")
-    ], 16, Jl)) : (s(), A(V(ee), M({ key: 0 }, V(a), {
+    ], 16, Xl)) : (s(), A(V(ee), M({ key: 0 }, V(a), {
       href: e.href,
       title: e.title,
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-green-500 to-green-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-green-600 hover:to-green-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
@@ -2266,16 +2266,16 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       _: 3
     }, 16, ["href", "title"]));
   }
-}), Yl = { class: "hidden sm:block" }, Zl = { class: "py-8" }, es = {
+}), Ql = { class: "hidden sm:block" }, Yl = { class: "py-8" }, Zl = {
   __name: "SectionBorder",
   setup(e) {
-    return (a, t) => (s(), n("div", Yl, [
-      r("div", Zl, [
+    return (a, t) => (s(), n("div", Ql, [
+      r("div", Yl, [
         E(fe)
       ])
     ]));
   }
-}, ts = { class: "bg-white/80 backdrop-blur-sm border border-gray-200/60 rounded-xl px-6 py-4" }, ls = { class: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4" }, ss = { class: "flex items-center gap-3" }, as = { class: "text-sm font-medium text-gray-700" }, ns = { class: "flex flex-wrap items-center gap-2" }, os = ["onClick"], rs = { class: "text-xs text-gray-500" }, is = {
+}, es = { class: "bg-white/80 backdrop-blur-sm border border-gray-200/60 rounded-xl px-6 py-4" }, ts = { class: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4" }, ls = { class: "flex items-center gap-3" }, ss = { class: "text-sm font-medium text-gray-700" }, as = { class: "flex flex-wrap items-center gap-2" }, ns = ["onClick"], os = { class: "text-xs text-gray-500" }, rs = {
   __name: "SortControls",
   props: {
     fields: {
@@ -2312,11 +2312,11 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
     const t = a, l = (o) => {
       t("sort", o);
     };
-    return (o, d) => (s(), n("div", ts, [
-      r("div", ls, [
-        r("div", ss, [
-          r("label", as, $(e.sortByLabel) + ":", 1),
-          r("div", ns, [
+    return (o, d) => (s(), n("div", es, [
+      r("div", ts, [
+        r("div", ls, [
+          r("label", ss, $(e.sortByLabel) + ":", 1),
+          r("div", as, [
             (s(!0), n(H, null, W(e.fields, (i) => (s(), n("button", {
               key: i.key,
               onClick: (u) => l(i.key),
@@ -2334,14 +2334,14 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                 key: 1,
                 class: "w-3 h-3 ml-1 inline"
               })) : O("", !0)
-            ], 10, os))), 128))
+            ], 10, ns))), 128))
           ])
         ]),
-        r("div", rs, $(e.count) + " " + $(e.countLabel), 1)
+        r("div", os, $(e.count) + " " + $(e.countLabel), 1)
       ])
     ]));
   }
-}, ds = { class: "flex items-center space-x-1" }, us = { class: "flex flex-col" }, be = {
+}, is = { class: "flex items-center space-x-1" }, ds = { class: "flex flex-col" }, be = {
   __name: "ThSortable",
   props: {
     field: {
@@ -2363,11 +2363,11 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors duration-150",
       onClick: d[0] || (d[0] = (i) => o.$emit("sort", e.field))
     }, [
-      r("div", ds, [
+      r("div", is, [
         r("span", null, [
           g(o.$slots, "default")
         ]),
-        r("div", us, [
+        r("div", ds, [
           t.value && e.currentDirection === "asc" ? (s(), A(V(ke), {
             key: 0,
             class: _([l.value, "w-3 h-3"])
@@ -2380,22 +2380,22 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       ])
     ]));
   }
-}, cs = { class: "bg-white border border-gray-200/60 rounded-xl shadow-[0_1px_3px_rgba(0,0,0,0.1)] animate-fadeIn mx-4 md:mx-0" }, fs = { class: "overflow-x-auto rounded-xl" }, gs = { class: "min-w-full divide-y divide-gray-200" }, ps = { class: "bg-gray-50" }, ms = {
+}, us = { class: "bg-white border border-gray-200/60 rounded-xl shadow-[0_1px_3px_rgba(0,0,0,0.1)] animate-fadeIn mx-4 md:mx-0" }, cs = { class: "overflow-x-auto rounded-xl" }, fs = { class: "min-w-full divide-y divide-gray-200" }, gs = { class: "bg-gray-50" }, ps = {
   key: 0,
   class: "px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
-}, ys = { class: "bg-white divide-y divide-gray-200" }, bs = {
+}, ms = { class: "bg-white divide-y divide-gray-200" }, ys = {
   key: 0,
   class: "flex items-center"
-}, hs = ["title"], vs = {
+}, bs = ["title"], hs = {
   key: 0,
   class: "ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800"
-}, xs = ["innerHTML"], ws = { key: 3 }, ks = {
+}, vs = ["innerHTML"], xs = { key: 3 }, ws = {
   key: 0,
   class: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-}, Ss = {
+}, ks = {
   key: 0,
   class: "text-center py-12"
-}, $s = { class: "inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4" }, Cs = { class: "text-lg font-medium text-gray-900 mb-2" }, _s = { class: "text-gray-500 mb-4" }, Vs = {
+}, Ss = { class: "inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4" }, $s = { class: "text-lg font-medium text-gray-900 mb-2" }, Cs = { class: "text-gray-500 mb-4" }, _s = {
   __name: "TableList",
   props: {
     data: {
@@ -2466,10 +2466,10 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       let C = "px-6 py-4 text-sm truncate";
       return b.isSecondary || (C += " font-medium"), b.isSecondary && (C += " text-gray-600"), C;
     }, h = (b) => b.sortable ? "" : "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider";
-    return (b, C) => (s(), n("div", cs, [
-      r("div", fs, [
-        r("table", gs, [
-          r("thead", ps, [
+    return (b, C) => (s(), n("div", us, [
+      r("div", cs, [
+        r("table", fs, [
+          r("thead", gs, [
             r("tr", null, [
               (s(!0), n(H, null, W(e.columns, (p) => (s(), n(H, {
                 key: p.key
@@ -2490,10 +2490,10 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                   class: _([h(p), { "text-right": p.align === "right" }])
                 }, $(p.label), 3))
               ], 64))), 128)),
-              b.$slots.actions ? (s(), n("th", ms, $(e.actionsLabel), 1)) : O("", !0)
+              b.$slots.actions ? (s(), n("th", ps, $(e.actionsLabel), 1)) : O("", !0)
             ])
           ]),
-          r("tbody", ys, [
+          r("tbody", ms, [
             (s(!0), n(H, null, W(e.data, (p, L) => (s(), n("tr", {
               key: p.id,
               class: _(e.rowClasses(p, L))
@@ -2502,12 +2502,12 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                 key: j.key,
                 class: _(T(j))
               }, [
-                j.key === "name" && !j.slot ? (s(), n("div", bs, [
+                j.key === "name" && !j.slot ? (s(), n("div", ys, [
                   r("div", {
                     class: "text-sm font-medium truncate",
                     title: k(p, j)
-                  }, $(k(p, j)), 9, hs),
-                  x(p) ? (s(), n("span", vs, $(e.deletedLabel), 1)) : O("", !0)
+                  }, $(k(p, j)), 9, bs),
+                  x(p) ? (s(), n("span", hs, $(e.deletedLabel), 1)) : O("", !0)
                 ])) : j.slot ? g(b.$slots, j.slot, {
                   key: 1,
                   item: p,
@@ -2516,9 +2516,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                 }) : j.render ? (s(), n("div", {
                   key: 2,
                   innerHTML: j.render(p)
-                }, null, 8, xs)) : (s(), n("div", ws, $(k(p, j)), 1))
+                }, null, 8, vs)) : (s(), n("div", xs, $(k(p, j)), 1))
               ], 2))), 128)),
-              b.$slots.actions ? (s(), n("td", ks, [
+              b.$slots.actions ? (s(), n("td", ws, [
                 g(b.$slots, "actions", {
                   item: p,
                   index: L
@@ -2528,12 +2528,12 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
           ])
         ])
       ]),
-      d.value ? O("", !0) : (s(), n("div", Ss, [
-        r("div", $s, [
+      d.value ? O("", !0) : (s(), n("div", ks, [
+        r("div", Ss, [
           (s(), A(xe(e.emptyState.icon), { class: "w-8 h-8 text-gray-400" }))
         ]),
-        r("h3", Cs, $(e.emptyState.title), 1),
-        r("p", _s, $(e.emptyState.description), 1),
+        r("h3", $s, $(e.emptyState.title), 1),
+        r("p", Cs, $(e.emptyState.description), 1),
         e.emptyState.actionText && e.emptyState.actionUrl ? (s(), A(ye, {
           key: 0,
           href: e.emptyState.actionUrl
@@ -2546,28 +2546,28 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       ]))
     ]));
   }
-}, Bs = {
+}, Vs = {
   key: 0,
   class: "bg-white/80 backdrop-blur-sm px-4 py-3 mx-4 md:mx-0 mb-4"
-}, Ts = { class: "relative p-1" }, As = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" }, js = ["placeholder"], Is = {
+}, Bs = { class: "relative p-1" }, Ts = { class: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" }, As = ["placeholder"], js = {
   key: 1,
   class: "overflow-x-auto rounded-xl"
-}, Ls = { class: "min-w-full divide-y divide-gray-200" }, Ds = { class: "bg-gray-50" }, Os = {
+}, Is = { class: "min-w-full divide-y divide-gray-200" }, Ls = { class: "bg-gray-50" }, Ds = {
   key: 0,
   class: "px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
-}, Ms = { class: "bg-white divide-y divide-gray-200" }, zs = {
+}, Os = { class: "bg-white divide-y divide-gray-200" }, Ms = {
   key: 0,
   class: "flex items-center"
-}, Fs = ["title"], Us = {
+}, zs = ["title"], Fs = {
   key: 0,
   class: "ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800"
-}, Ns = { key: 3 }, Es = { key: 4 }, Ks = {
+}, Us = { key: 3 }, Ns = { key: 4 }, Es = {
   key: 0,
   class: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
-}, Rs = {
+}, Ks = {
   key: 2,
   class: "text-center py-12"
-}, Hs = { class: "inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4" }, Ps = { class: "text-lg font-medium text-gray-900 mb-2" }, Ws = { class: "text-gray-500 mb-4" }, qs = {
+}, Rs = { class: "inline-flex items-center justify-center w-16 h-16 bg-gray-100 rounded-full mb-4" }, Hs = { class: "text-lg font-medium text-gray-900 mb-2" }, Ps = { class: "text-gray-500 mb-4" }, Ws = {
   __name: "TableListForm",
   props: {
     data: {
@@ -2711,9 +2711,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
     return (c, m) => (s(), n("div", {
       class: _("bg-white mx-4 md:mx-0 " + (e.isCard ? "border border-gray-200/60 rounded-xl shadow-[0_1px_3px_rgba(0,0,0,0.1)] animate-fadeIn" : ""))
     }, [
-      e.search ? (s(), n("div", Bs, [
-        r("div", Ts, [
-          r("div", As, [
+      e.search ? (s(), n("div", Vs, [
+        r("div", Bs, [
+          r("div", Ts, [
             E(V(Ge), { class: "h-5 w-5 text-gray-400" })
           ]),
           G(r("input", {
@@ -2721,14 +2721,14 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
             type: "text",
             placeholder: e.searchPlaceholder,
             class: "block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
-          }, null, 8, js), [
+          }, null, 8, As), [
             [Ne, u.value]
           ])
         ])
       ])) : O("", !0),
-      T.value ? (s(), n("div", Is, [
-        r("table", Ls, [
-          r("thead", Ds, [
+      T.value ? (s(), n("div", js, [
+        r("table", Is, [
+          r("thead", Ls, [
             r("tr", null, [
               (s(!0), n(H, null, W(e.columns, (y) => (s(), n(H, {
                 key: y.key
@@ -2749,10 +2749,10 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                   class: _([te(y), { "text-right": y.align === "right" }])
                 }, $(y.label), 3))
               ], 64))), 128)),
-              x.value ? (s(), n("th", Os, $(e.actionsLabel), 1)) : O("", !0)
+              x.value ? (s(), n("th", Ds, $(e.actionsLabel), 1)) : O("", !0)
             ])
           ]),
-          r("tbody", Ms, [
+          r("tbody", Os, [
             (s(!0), n(H, null, W(k.value, (y, D) => (s(), n("tr", {
               key: L(y, D),
               class: _(e.rowClasses(y, D))
@@ -2761,12 +2761,12 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                 key: S.key,
                 class: _(K(S))
               }, [
-                S.key === "name" && !S.slot && !S.input ? (s(), n("div", zs, [
+                S.key === "name" && !S.slot && !S.input ? (s(), n("div", Ms, [
                   r("div", {
                     class: "text-sm font-medium truncate",
                     title: j(y, S)
-                  }, $(j(y, S)), 9, Fs),
-                  U(y) ? (s(), n("span", Us, $(e.deletedLabel), 1)) : O("", !0)
+                  }, $(j(y, S)), 9, zs),
+                  U(y) ? (s(), n("span", Fs, $(e.deletedLabel), 1)) : O("", !0)
                 ])) : S.input ? (s(), A(re, {
                   key: 1,
                   type: le(S),
@@ -2784,9 +2784,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
                   item: y,
                   column: S,
                   index: D
-                }) : S.render ? (s(), n("div", Ns, $(S.render(y)), 1)) : (s(), n("div", Es, $(j(y, S)), 1))
+                }) : S.render ? (s(), n("div", Us, $(S.render(y)), 1)) : (s(), n("div", Ns, $(j(y, S)), 1))
               ], 2))), 128)),
-              x.value ? (s(), n("td", Ks, [
+              x.value ? (s(), n("td", Es, [
                 g(c.$slots, "actions", {
                   item: y,
                   index: D
@@ -2795,12 +2795,12 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
             ], 2))), 128))
           ])
         ])
-      ])) : (s(), n("div", Rs, [
-        r("div", Hs, [
+      ])) : (s(), n("div", Ks, [
+        r("div", Rs, [
           (s(), A(xe(e.emptyState.icon), { class: "w-8 h-8 text-gray-400" }))
         ]),
-        r("h3", Ps, $(e.emptyState.title), 1),
-        r("p", Ws, $(e.emptyState.description), 1),
+        r("h3", Hs, $(e.emptyState.title), 1),
+        r("p", Ps, $(e.emptyState.description), 1),
         e.emptyState.actionText && e.emptyState.actionUrl ? (s(), A(ye, {
           key: 0,
           href: e.emptyState.actionUrl
@@ -2813,7 +2813,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       ]))
     ], 2));
   }
-}, Gs = ["type", "disabled"], Xs = /* @__PURE__ */ Object.assign({
+}, qs = ["type", "disabled"], Gs = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "TertiaryButton",
@@ -2835,9 +2835,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-gray-500 to-gray-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-gray-600 hover:to-gray-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:from-gray-500 disabled:hover:to-gray-600"
     }), [
       g(t.$slots, "default")
-    ], 16, Gs));
+    ], 16, qs));
   }
-}), Js = ["href", "title", "target", "rel"], Qs = /* @__PURE__ */ Object.assign({
+}), Xs = ["href", "title", "target", "rel"], Js = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "TertiaryLinkButton",
@@ -2873,7 +2873,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-gray-500 to-gray-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-gray-600 hover:to-gray-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
     }), [
       g(t.$slots, "default")
-    ], 16, Js)) : (s(), A(V(ee), M({ key: 0 }, V(a), {
+    ], 16, Xs)) : (s(), A(V(ee), M({ key: 0 }, V(a), {
       href: e.href,
       title: e.title,
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg bg-gradient-to-r from-gray-500 to-gray-600 p-3 py-2 text-sm font-medium text-white shadow-[0_1px_3px_rgba(0,0,0,0.1)] transition-all duration-200 hover:from-gray-600 hover:to-gray-700 hover:shadow-[0_2px_6px_rgba(0,0,0,0.15)] focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
@@ -2884,7 +2884,7 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       _: 3
     }, 16, ["href", "title"]));
   }
-}), Ys = ["type", "disabled"], Zs = /* @__PURE__ */ Object.assign({
+}), Qs = ["type", "disabled"], Ys = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "WarningButton",
@@ -2906,9 +2906,9 @@ const St = /* @__PURE__ */ ge(vt, [["render", kt]]), $t = { class: "sr-only" },
       class: "min-w-[40px] min-h-[35px] inline-flex items-center justify-center rounded-lg border border-yellow-300 bg-yellow-50 p-3 py-2 text-sm font-medium text-yellow-700 transition-all duration-200 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-yellow-50"
     }), [
       g(t.$slots, "default")
-    ], 16, Ys));
+    ], 16, Qs));
   }
-}), ea = {
+}), Zs = {
   install(e) {
     for (const [a, t] of Object.entries(Xe))
       a !== "EnosVue" && e.component(a, t);
@@ -2927,40 +2927,40 @@ export {
   Ot as Checkbox,
   Ce as CheckboxInput,
   Oe as CheckboxMultipleInput,
-  hl as ConfirmationModal,
+  bl as ConfirmationModal,
   Be as CustomSelect,
-  xl as DangerButton,
+  vl as DangerButton,
   Ae as DateInput,
-  Cl as DialogModal,
+  $l as DialogModal,
   fe as Divider,
-  Vl as Dropdown,
-  Al as DropdownLink,
-  ea as EnosVue,
-  Ol as FormSection,
+  _l as Dropdown,
+  Tl as DropdownLink,
+  Zs as EnosVue,
+  Dl as FormSection,
   je as ImageInput,
-  zl as InputError,
+  Ml as InputError,
   re as InputGroup,
-  El as InputLabel,
+  Nl as InputLabel,
   me as Modal,
-  Kl as NavLink,
+  El as NavLink,
   Ie as NotationInput,
-  Hl as PrimaryButton,
+  Rl as PrimaryButton,
   ye as PrimaryLinkButton,
   Le as RadioInput,
   De as RadioMultipleInput,
-  ql as ResponsiveNavLink,
-  Xl as SecondaryButton,
-  Ql as SecondaryLinkButton,
-  es as SectionBorder,
+  Wl as ResponsiveNavLink,
+  Gl as SecondaryButton,
+  Jl as SecondaryLinkButton,
+  Zl as SectionBorder,
   pe as SectionTitle,
   Te as SelectInput,
-  is as SortControls,
-  Vs as TableList,
-  qs as TableListForm,
-  Xs as TertiaryButton,
-  Qs as TertiaryLinkButton,
+  rs as SortControls,
+  _s as TableList,
+  Ws as TableListForm,
+  Gs as TertiaryButton,
+  Js as TertiaryLinkButton,
   Ve as TextArea,
   _e as TextInput,
   be as ThSortable,
-  Zs as WarningButton
+  Ys as WarningButton
 };

package/package.json

@@ -1,27 +1,34 @@
 {
   "name": "@enos5/enos-vue",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "exports": {
     ".": "./dist/index.js"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "docs:dev": "vite --config vite.docs.config.ts",
+    "docs:build": "vite build --config vite.docs.config.ts",
+    "docs:preview": "vite preview --config vite.docs.config.ts --host 0.0.0.0 --port 4173"
   },
   "peerDependencies": {
-    "vue": "^3.4.0",
-    "@inertiajs/vue3": "^2.0.0",
     "@heroicons/vue": "^2.0.0",
+    "@inertiajs/vue3": "^2.0.0",
+    "vue": "^3.4.0",
     "vue-i18n": "^11.0.0"
   },
   "devDependencies": {
-    "vite": "^7.0.0",
+    "@tailwindcss/vite": "^4.2.2",
     "@vitejs/plugin-vue": "^6.0.0",
-    "vue": "^3.4.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.0.0",
+    "vite": "^7.0.0",
+    "vue": "^3.4.0",
     "vue-i18n": "^11.1.2"
   }
 }