@robuust-digital/vue-components 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/core/index.js

@@ -1,42 +1,42 @@
-import { createElementBlock as l, openBlock as t, createElementVNode as o, Fragment as k, renderList as S, renderSlot as v, createTextVNode as A, toDisplayString as m, createVNode as V, unref as h, normalizeClass as p, createBlock as x, resolveDynamicComponent as B, withCtx as L, createCommentVNode as $, computed as C, useAttrs as F, withDirectives as M, mergeProps as b, vModelDynamic as N, normalizeProps as P, guardReactiveProps as H, vModelSelect as E, ref as q, vModelText as R } from "vue";
+import { createElementBlock as l, openBlock as n, createElementVNode as c, Fragment as S, renderList as V, renderSlot as g, createTextVNode as A, toDisplayString as f, createVNode as B, unref as $, normalizeClass as p, createBlock as w, resolveDynamicComponent as C, withCtx as M, createCommentVNode as h, computed as x, useAttrs as N, withDirectives as O, mergeProps as b, vModelDynamic as q, normalizeProps as P, guardReactiveProps as z, vModelSelect as E, ref as D, vModelText as R } from "vue";
 import { r as U } from "../_shared/XMarkIcon-90mcPzBs.js";
 import { r as Z } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
-import { _ as Ze } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
-import { _ as Ge } from "../_shared/ButtonBase-CQjlJ85F.js";
-import { u as j } from "../_shared/FormInput-abFMz_J4.js";
-import { _ as Qe } from "../_shared/FormInput-abFMz_J4.js";
+import { _ as Ee } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
+import { _ as Ue } from "../_shared/ButtonBase-DfkwHIhN.js";
+import { u as I } from "../_shared/FormInput-abFMz_J4.js";
+import { _ as Ke } from "../_shared/FormInput-abFMz_J4.js";
 import { S as K } from "../_shared/icon-spinner-CmxIOqaK.js";
-function G(e, r) {
-  return t(), l("svg", {
+function G(e, o) {
+  return n(), l("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    o("path", {
+    c("path", {
       "fill-rule": "evenodd",
       d: "M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-function J(e, r) {
-  return t(), l("svg", {
+function J(e, o) {
+  return n(), l("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    o("path", {
+    c("path", {
       "fill-rule": "evenodd",
       d: "M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], Ie = {
+const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], Me = {
   __name: "Accordion",
   props: {
     items: {
@@ -58,37 +58,36 @@ const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], I
     }
   },
   setup(e) {
-    return (r, i) => (t(), l("div", Q, [
-      (t(!0), l(k, null, S(e.items, (c, s) => (t(), l("details", {
+    return (o, i) => (n(), l("div", Q, [
+      (n(!0), l(S, null, V(e.items, (u, s) => (n(), l("details", {
         key: s,
         open: e.defaultOpenIndex === s,
-        name: e.name,
-        class: "group/accordion"
+        name: e.name
       }, [
-        o("summary", null, [
-          v(r.$slots, "summary", {
-            item: c,
+        c("summary", null, [
+          g(o.$slots, "summary", {
+            item: u,
             active: e.defaultOpenIndex === s
           }, () => [
-            A(m(c.title) + " ", 1),
-            v(r.$slots, "icon", { classList: "size-5 group-open/accordion:rotate-45 transition-transform" }, () => [
-              V(h(J), { class: "size-5 group-open/accordion:rotate-45 transition-transform" })
+            A(f(u.title) + " ", 1),
+            g(o.$slots, "icon", { classList: "rvc-accordion-icon" }, () => [
+              B($(J), { class: "rvc-accordion-icon" })
             ])
           ])
         ]),
-        o("div", {
+        c("div", {
           class: p(["rvc-accordion-content", e.contentClass])
         }, [
-          v(r.$slots, "content", { item: c }, () => [
-            o("div", {
-              innerHTML: c.content
+          g(o.$slots, "content", { item: u }, () => [
+            c("div", {
+              innerHTML: u.content
             }, null, 8, X)
           ])
         ], 2)
       ], 8, W))), 128))
     ]));
   }
-}, Y = { class: "rvc-alert-title" }, ze = {
+}, Y = { class: "rvc-alert-title" }, Oe = {
   __name: "Alert",
   props: {
     as: {
@@ -115,37 +114,37 @@ const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], I
   },
   emits: ["alert:close"],
   setup(e) {
-    return (r, i) => (t(), x(B(e.as), {
+    return (o, i) => (n(), w(C(e.as), {
       class: p(["rvc-alert", `rvc-alert-${e.type}`])
     }, {
-      default: L(() => [
-        v(r.$slots, "icon", {}, () => [
-          e.icon ? (t(), x(B(e.icon), {
+      default: M(() => [
+        g(o.$slots, "icon", {}, () => [
+          e.icon ? (n(), w(C(e.icon), {
             key: 0,
             class: "rvc-alert-icon"
-          })) : $("", !0)
+          })) : h("", !0)
         ]),
-        o("div", null, [
-          v(r.$slots, "title", {}, () => [
-            o("span", Y, m(e.title), 1)
+        c("div", null, [
+          g(o.$slots, "title", {}, () => [
+            c("span", Y, f(e.title), 1)
           ]),
-          v(r.$slots, "default")
+          g(o.$slots, "default")
         ]),
-        v(r.$slots, "close", {}, () => [
-          e.close ? (t(), l("button", {
+        g(o.$slots, "close", {}, () => [
+          e.close ? (n(), l("button", {
             key: 0,
             type: "button",
-            class: "rvc-alert-close transition-colors",
-            onClick: i[0] || (i[0] = (c) => r.$emit("alert:close"))
+            class: "rvc-alert-close",
+            onClick: i[0] || (i[0] = (u) => o.$emit("alert:close"))
           }, [
-            V(h(U), { class: "size-5" })
-          ])) : $("", !0)
+            B($(U))
+          ])) : h("", !0)
         ])
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}, _ = { class: "rvc-checkbox-input peer-focus/checkbox:rvc-focus" }, ee = ["for"], Fe = /* @__PURE__ */ Object.assign({
+}, _ = { class: "rvc-checkbox-input" }, ee = ["for"], Ie = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "Checkbox",
@@ -168,81 +167,81 @@ const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], I
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: r }) {
-    const i = e, c = r, s = C({
+  setup(e, { emit: o }) {
+    const i = e, u = o, s = x({
       get: () => i.modelValue,
-      set: (a) => c("update:modelValue", a)
-    }), { hasModelBinding: g } = j(), u = {
-      ...F(),
+      set: (t) => u("update:modelValue", t)
+    }), { hasModelBinding: v } = I(), r = {
+      ...N(),
       id: i.id,
       type: "checkbox",
       class: "absolute opacity-0 inset-0 cursor-pointer peer/checkbox"
     };
-    return (a, n) => (t(), l("div", {
+    return (t, a) => (n(), l("div", {
       class: p(["rvc-checkbox", e.rootClass])
     }, [
-      h(g) ? M((t(), l("input", b({ key: 0 }, u, {
-        "onUpdate:modelValue": n[0] || (n[0] = (d) => s.value = d)
+      $(v) ? O((n(), l("input", b({ key: 0 }, r, {
+        "onUpdate:modelValue": a[0] || (a[0] = (d) => s.value = d)
       }), null, 16)), [
-        [N, s.value]
-      ]) : (t(), l("input", P(b({ key: 1 }, u)), null, 16)),
-      o("span", _, [
-        V(h(G))
+        [q, s.value]
+      ]) : (n(), l("input", P(b({ key: 1 }, r)), null, 16)),
+      c("span", _, [
+        B($(G))
       ]),
-      o("div", null, [
-        a.$slots.default || e.label ? v(a.$slots, "default", { key: 0 }, () => [
-          o("label", { for: e.id }, m(e.label), 9, ee)
-        ]) : $("", !0)
+      c("div", null, [
+        t.$slots.default || e.label ? g(t.$slots, "default", { key: 0 }, () => [
+          c("label", { for: e.id }, f(e.label), 9, ee)
+        ]) : h("", !0)
       ])
     ], 2));
   }
 });
-function te(e, r) {
-  return t(), l("svg", {
+function te(e, o) {
+  return n(), l("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
     fill: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    o("path", {
+    c("path", {
       "fill-rule": "evenodd",
       d: "M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-function ae(e, r) {
-  return t(), l("svg", {
+function ae(e, o) {
+  return n(), l("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    o("path", {
+    c("path", {
       "fill-rule": "evenodd",
       d: "M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-function ne(e, r) {
-  return t(), l("svg", {
+function ne(e, o) {
+  return n(), l("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    o("path", {
+    c("path", {
       "fill-rule": "evenodd",
       d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-const D = /* @__PURE__ */ Object.assign({
+const H = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "FormSelect",
@@ -270,44 +269,44 @@ const D = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: r }) {
-    const i = e, c = r, s = C({
+  setup(e, { emit: o }) {
+    const i = e, u = o, s = x({
       get: () => i.modelValue,
-      set: (f) => c("update:modelValue", f)
-    }), { hasModelBinding: g } = j();
-    return (f, u) => (t(), l("div", {
+      set: (m) => u("update:modelValue", m)
+    }), { hasModelBinding: v } = I();
+    return (m, r) => (n(), l("div", {
       class: p([
         "rvc-select",
         `rvc-select-${e.size}`,
         e.rootClass
       ])
     }, [
-      e.prefixIcon ? v(f.$slots, "prefixIcon", {
+      e.prefixIcon ? g(m.$slots, "prefixIcon", {
         key: 0,
         icon: e.prefixIcon
       }, () => [
-        (t(), x(B(e.prefixIcon), { "aria-hidden": "true" }))
-      ]) : $("", !0),
-      v(f.$slots, "select", P(H(f.$attrs)), () => [
-        h(g) ? M((t(), l("select", b({ key: 0 }, f.$attrs, {
-          "onUpdate:modelValue": u[0] || (u[0] = (a) => s.value = a)
+        (n(), w(C(e.prefixIcon), { "aria-hidden": "true" }))
+      ]) : h("", !0),
+      g(m.$slots, "select", P(z(m.$attrs)), () => [
+        $(v) ? O((n(), l("select", b({ key: 0 }, m.$attrs, {
+          "onUpdate:modelValue": r[0] || (r[0] = (t) => s.value = t)
         }), [
-          v(f.$slots, "default")
+          g(m.$slots, "default")
         ], 16)), [
           [E, s.value]
-        ]) : (t(), l("select", P(b({ key: 1 }, f.$attrs)), [
-          v(f.$slots, "default")
+        ]) : (n(), l("select", P(b({ key: 1 }, m.$attrs)), [
+          g(m.$slots, "default")
         ], 16))
       ]),
-      v(f.$slots, "icon", { icon: e.icon }, () => [
-        (t(), x(B(e.icon ?? h(Z)), { "aria-hidden": "true" }))
+      g(m.$slots, "icon", { icon: e.icon }, () => [
+        (n(), w(C(e.icon ?? $(Z)), { "aria-hidden": "true" }))
       ])
     ], 2));
   }
 }), le = {
   key: 0,
-  class: "rvc-pagination grid grid-cols-2 md:grid-cols-3 items-center justify-between"
-}, se = ["value"], ie = { class: "md:flex justify-center hidden" }, oe = { class: "rvc-pagination-info" }, re = { class: "flex justify-end" }, ue = { class: "flex items-center md:gap-0.5 xl:gap-1" }, ce = ["disabled", "onClick"], de = { key: 2 }, ge = { key: 3 }, fe = {
+  class: "rvc-pagination"
+}, se = ["value"], ie = { class: "rvc-pagination-info" }, oe = { class: "rvc-pagination-nav-list" }, re = ["disabled", "onClick"], ce = { key: 2 }, ue = { key: 3 }, de = {
   __name: "Pagination",
   props: {
     pagination: {
@@ -332,83 +331,79 @@ const D = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["pagination:change", "pagination:perPage"],
-  setup(e, { emit: r }) {
-    const i = e, c = r, s = q(i.perPage);
-    return (g, f) => {
-      var u;
-      return (u = e.pagination) != null && u.total ? (t(), l("div", le, [
-        v(g.$slots, "perPage", b(e.pagination, { perPage: s.value }), () => [
-          V(D, {
+  setup(e, { emit: o }) {
+    const i = e, u = o, s = D(i.perPage);
+    return (v, m) => {
+      var r;
+      return (r = e.pagination) != null && r.total ? (n(), l("div", le, [
+        g(v.$slots, "perPage", b(e.pagination, { perPage: s.value }), () => [
+          B(H, {
             modelValue: s.value,
             "onUpdate:modelValue": [
-              f[0] || (f[0] = (a) => s.value = a),
-              f[1] || (f[1] = (a) => c("pagination:perPage", a))
+              m[0] || (m[0] = (t) => s.value = t),
+              m[1] || (m[1] = (t) => u("pagination:perPage", t))
             ],
             size: "sm",
-            "root-class": "w-fit"
+            "root-class": "rvc-pagination-per-page"
           }, {
-            default: L(() => [
-              (t(!0), l(k, null, S(e.perPageOptions, (a) => (t(), l("option", {
-                key: `pagination-items-per-page-option-${a}`,
-                value: a
-              }, m(a) + " " + m(e.perPageLabel), 9, se))), 128))
+            default: M(() => [
+              (n(!0), l(S, null, V(e.perPageOptions, (t) => (n(), l("option", {
+                key: `pagination-items-per-page-option-${t}`,
+                value: t
+              }, f(t) + " " + f(e.perPageLabel), 9, se))), 128))
             ]),
             _: 1
           }, 8, ["modelValue"])
         ]),
-        v(g.$slots, "info", b(e.pagination, { fromLabel: e.fromLabel }), () => [
-          o("div", ie, [
-            o("div", oe, m(e.pagination.from) + " - " + m(e.pagination.to) + " " + m(e.fromLabel) + " " + m(e.pagination.total), 1)
-          ])
+        g(v.$slots, "info", b(e.pagination, { fromLabel: e.fromLabel }), () => [
+          c("div", ie, f(e.pagination.from) + " - " + f(e.pagination.to) + " " + f(e.fromLabel) + " " + f(e.pagination.total), 1)
         ]),
-        o("div", re, [
-          o("nav", null, [
-            o("ol", ue, [
-              (t(!0), l(k, null, S(e.pagination.links, (a, n) => (t(), l("li", {
-                key: `pagination-link-${a.label}-${n}`,
-                class: "hidden md:block first:block last:block"
+        c("nav", null, [
+          c("ol", oe, [
+            (n(!0), l(S, null, V(e.pagination.links, (t, a) => (n(), l("li", {
+              key: `pagination-link-${t.label}-${a}`,
+              class: "rvc-pagination-nav-list-item"
+            }, [
+              c("button", {
+                type: "button",
+                disabled: t.label === "..." || !t.url,
+                class: p([
+                  "rvc-pagination-button",
+                  { "rvc-pagination-button-active": t.active }
+                ]),
+                onClick: (d) => t.url && u("pagination:change", t.url)
               }, [
-                o("button", {
-                  type: "button",
-                  disabled: a.label === "..." || !a.url,
+                t.url !== "..." && a === 0 ? (n(), w($(ae), {
+                  key: 0,
+                  "aria-hidden": "true",
                   class: p([
-                    "rvc-pagination-button",
-                    { "rvc-pagination-button-active": a.active }
-                  ]),
-                  onClick: (d) => a.url && c("pagination:change", a.url)
-                }, [
-                  a.url !== "..." && n === 0 ? (t(), x(h(ae), {
-                    key: 0,
-                    "aria-hidden": "true",
-                    class: p([
-                      "size-5 text-slate-80",
-                      { "opacity-50": !a.url }
-                    ])
-                  }, null, 8, ["class"])) : a.label !== "..." && n === e.pagination.links.length - 1 ? (t(), x(h(ne), {
-                    key: 1,
-                    "aria-hidden": "true",
-                    class: p([
-                      "size-5 text-slate-80",
-                      { "opacity-50": !a.url }
-                    ])
-                  }, null, 8, ["class"])) : a.label === "..." ? (t(), l("span", de, " ... ")) : (t(), l("span", ge, m(a.label), 1))
-                ], 10, ce)
-              ]))), 128))
-            ])
+                    "rvc-pagination-button-icon",
+                    { "rvc-pagination-button-icon-disabled": !t.url }
+                  ])
+                }, null, 8, ["class"])) : t.label !== "..." && a === e.pagination.links.length - 1 ? (n(), w($(ne), {
+                  key: 1,
+                  "aria-hidden": "true",
+                  class: p([
+                    "rvc-pagination-button-icon",
+                    { "rvc-pagination-button-icon-disabled": !t.url }
+                  ])
+                }, null, 8, ["class"])) : t.label === "..." ? (n(), l("span", ce, " ... ")) : (n(), l("span", ue, f(t.label), 1))
+              ], 10, re)
+            ]))), 128))
           ])
         ])
-      ])) : $("", !0);
+      ])) : h("", !0);
     };
   }
-}, ve = { key: 0 }, me = ["aria-label", "onClick"], pe = ["innerHTML"], ye = { key: 1 }, be = ["colspan"], he = { key: 2 }, $e = ["colspan"], ke = { class: "flex gap-x-2 items-center" }, Ne = {
+}, ve = { key: 0 }, ge = ["aria-label", "onClick"], me = ["innerHTML"], fe = { key: 1 }, pe = ["colspan"], be = { key: 2 }, ye = ["colspan"], $e = { class: "rvc-table-spinner-wrapper" }, je = {
   __name: "DataTable",
   props: {
     headers: {
       type: Array,
       default: () => [],
       validator: (e) => e.every((i) => {
-        const c = !i.align || ["left", "center", "right"].includes(i.align), g = !(i.sortable === !0) || typeof i.key == "string" && i.key.length > 0;
-        return g || console.warn("[DataTable] Header item with sortable=true is missing required 'key' property:", i), !c && i.align && console.warn("[DataTable] Header item has invalid 'align' value. Must be 'left', 'center' or 'right':", i), c && g;
+        const u = !i.align || ["left", "center", "right"].includes(i.align), v = !(i.sortable === !0) || typeof i.key == "string" && i.key.length > 0;
+        return v || console.warn("[DataTable] Header item with sortable=true is missing required 'key' property:", i), !u && i.align && console.warn("[DataTable] Header item has invalid 'align' value. Must be 'left', 'center' or 'right':", i), u && v;
       })
     },
     items: {
@@ -439,143 +434,153 @@ const D = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["table:sortBy", "pagination:change", "pagination:perPage"],
-  setup(e, { emit: r }) {
-    const i = e, c = r, s = q(null), g = (u) => i.headers.find((a) => a.key === u), f = (u) => {
-      !s.value || s.value.key !== u.key ? s.value = {
-        key: u.key,
+  setup(e, { emit: o }) {
+    const i = e, u = o, s = D(null), v = (r) => i.headers.find((t) => t.key === r), m = (r) => {
+      !s.value || s.value.key !== r.key ? s.value = {
+        key: r.key,
         direction: "asc"
       } : s.value.direction === "asc" ? s.value = {
-        key: u.key,
+        key: r.key,
         direction: "desc"
-      } : s.value = null, c("table:sortBy", s.value);
+      } : s.value = null, u("table:sortBy", s.value);
     };
-    return (u, a) => (t(), l("div", null, [
-      o("div", {
+    return (r, t) => (n(), l("div", null, [
+      c("div", {
         class: p(["rvc-table-wrapper", e.wrapperClass])
       }, [
-        o("table", {
-          class: p([{ "rvc-table-striped": e.striped }, "w-full rvc-table"])
+        c("table", {
+          class: p([{ "rvc-table-striped": e.striped }, "rvc-table"])
         }, [
-          e.headers.length ? (t(), l("thead", ve, [
-            o("tr", null, [
-              v(u.$slots, "headers", { headers: e.headers }, () => [
-                (t(!0), l(k, null, S(e.headers, (n) => {
-                  var d, y;
-                  return t(), l("th", b({ ref_for: !0 }, n, {
-                    key: `rvc-table-header-${n.id}`,
-                    class: {
-                      "text-left": n.align === "left" || !n.align,
-                      "text-center": n.align === "center",
-                      "text-right": n.align === "right"
-                    }
-                  }), [
-                    n.sortable && n.key ? (t(), l("button", {
-                      key: 0,
-                      type: "button",
-                      "aria-label": `Sort on ${n.label}`,
-                      class: p([
-                        "flex w-full gap-x-1.5 hover:underline group/table",
-                        {
-                          "justify-center": n.align === "center",
-                          "justify-start flex-row-reverse": n.align === "right"
-                        }
-                      ]),
-                      onClick: (w) => f(n)
-                    }, [
-                      v(u.$slots, "header-label", {
-                        sortBy: s.value,
-                        header: n
-                      }, () => [
-                        A(m(n.label), 1)
-                      ]),
-                      V(h(te), {
+          e.headers.length ? (n(), l("thead", ve, [
+            g(r.$slots, "headers", { headers: e.headers }, () => [
+              c("tr", null, [
+                (n(!0), l(S, null, V(e.headers, (a, d) => g(r.$slots, "header", {
+                  header: a,
+                  index: d
+                }, () => {
+                  var y, k;
+                  return [
+                    (n(), l("th", b({ ref_for: !0 }, a, {
+                      key: `rvc-table-header-${a.id}`,
+                      class: {
+                        "rvc-table-text-left": a.align === "left" || !a.align,
+                        "rvc-table-text-center": a.align === "center",
+                        "rvc-table-text-right": a.align === "right"
+                      }
+                    }), [
+                      a.sortable && a.key ? (n(), l("button", {
+                        key: 0,
+                        type: "button",
+                        "aria-label": `Sort on ${a.label}`,
                         class: p([
-                          "size-4 shrink-0 transition",
+                          "rvc-table-sort-button",
                           {
-                            "opacity-100": ((d = s.value) == null ? void 0 : d.key) === n.key,
-                            "opacity-0 group-hover/table:opacity-30": !s.value || s.value.key !== n.key,
-                            "rotate-180": ((y = s.value) == null ? void 0 : y.key) === n.key && s.value.direction === "desc"
+                            "rvc-table-sort-button-center": a.align === "center",
+                            "rvc-table-sort-button-right": a.align === "right"
                           }
-                        ])
-                      }, null, 8, ["class"])
-                    ], 10, me)) : v(u.$slots, "header-label", {
-                      key: 1,
-                      sortBy: s.value,
-                      header: n
-                    }, () => [
-                      A(m(n.label), 1)
-                    ])
-                  ], 16);
-                }), 128))
+                        ]),
+                        onClick: (T) => m(a)
+                      }, [
+                        g(r.$slots, "header-label", {
+                          sortBy: s.value,
+                          header: a
+                        }, () => [
+                          A(f(a.label), 1)
+                        ]),
+                        B($(te), {
+                          class: p([
+                            "rvc-table-sort-icon",
+                            {
+                              "rvc-table-sort-icon-visible": ((y = s.value) == null ? void 0 : y.key) === a.key,
+                              "rvc-table-sort-icon-invisible": !s.value || s.value.key !== a.key,
+                              "rvc-table-sort-icon-rotated": ((k = s.value) == null ? void 0 : k.key) === a.key && s.value.direction === "desc"
+                            }
+                          ])
+                        }, null, 8, ["class"])
+                      ], 10, ge)) : g(r.$slots, "header-label", {
+                        key: 1,
+                        sortBy: s.value,
+                        header: a
+                      }, () => [
+                        A(f(a.label), 1)
+                      ])
+                    ], 16))
+                  ];
+                })), 256))
               ])
             ])
-          ])) : $("", !0),
-          o("tbody", null, [
-            e.items.length && !e.spinning ? (t(!0), l(k, { key: 0 }, S(e.items, (n, d) => (t(), l("tr", {
-              key: `rvc-table-row-${d}-${n.id}`
-            }, [
-              v(u.$slots, "items", {
-                item: n,
-                index: d
-              }, () => [
-                (t(!0), l(k, null, S(n, (y, w) => {
-                  var O, T, I, z;
-                  return t(), l("td", b({
-                    key: `rvc-table-row-${d}-column-${w}-${n.id}`,
-                    ref_for: !0
-                  }, n.attrs, {
-                    class: {
-                      "text-left": ((O = g(w)) == null ? void 0 : O.align) === "left" || !((T = g(w)) != null && T.align),
-                      "text-center": ((I = g(w)) == null ? void 0 : I.align) === "center",
-                      "text-right": ((z = g(w)) == null ? void 0 : z.align) === "right"
-                    },
-                    innerHTML: y
-                  }), null, 16, pe);
-                }), 128))
-              ])
-            ]))), 128)) : !e.items.length && !e.spinning ? (t(), l("tr", ye, [
-              o("td", {
+          ])) : h("", !0),
+          c("tbody", null, [
+            e.items.length && !e.spinning ? (n(!0), l(S, { key: 0 }, V(e.items, (a, d) => g(r.$slots, "items", {
+              item: a,
+              index: d
+            }, () => [
+              (n(), l("tr", {
+                key: `rvc-table-row-${d}-${a.id}`
+              }, [
+                g(r.$slots, "item", {
+                  item: a,
+                  index: d
+                }, () => [
+                  (n(!0), l(S, null, V(a, (y, k) => {
+                    var T, L, j, F;
+                    return n(), l("td", b({
+                      key: `rvc-table-row-${d}-column-${k}-${a.id}`,
+                      ref_for: !0
+                    }, a.attrs, {
+                      class: {
+                        "rvc-table-text-left": ((T = v(k)) == null ? void 0 : T.align) === "left" || !((L = v(k)) != null && L.align),
+                        "rvc-table-text-center": ((j = v(k)) == null ? void 0 : j.align) === "center",
+                        "rvc-table-text-right": ((F = v(k)) == null ? void 0 : F.align) === "right"
+                      },
+                      innerHTML: y
+                    }), null, 16, me);
+                  }), 128))
+                ])
+              ]))
+            ])), 256)) : !e.items.length && !e.spinning ? (n(), l("tr", fe, [
+              c("td", {
                 colspan: e.headers.length,
                 class: "rvc-table-state"
               }, [
-                o("p", null, m(e.noResultsText), 1)
-              ], 8, be)
-            ])) : (t(), l("tr", he, [
-              o("td", {
+                c("p", null, f(e.noResultsText), 1)
+              ], 8, pe)
+            ])) : (n(), l("tr", be, [
+              c("td", {
                 colspan: e.headers.length,
                 class: "rvc-table-state"
               }, [
-                v(u.$slots, "spinner", {
+                g(r.$slots, "spinner", {
                   spinning: e.spinning,
                   label: e.loadingText
                 }, () => [
-                  o("div", ke, [
-                    e.spinning ? (t(), x(h(K), {
+                  c("div", $e, [
+                    e.spinning ? (n(), w($(K), {
                       key: 0,
                       "aria-hidden": "true",
                       class: "rvc-table-spinner"
-                    })) : $("", !0),
-                    A(" " + m(e.loadingText), 1)
+                    })) : h("", !0),
+                    A(" " + f(e.loadingText), 1)
                   ])
                 ])
-              ], 8, $e)
+              ], 8, ye)
             ]))
           ])
         ], 2)
       ], 2),
-      e.pagination ? v(u.$slots, "pagination", P(b({ key: 0 }, e.pagination)), () => [
-        V(fe, {
+      e.pagination ? g(r.$slots, "pagination", P(b({ key: 0 }, e.pagination)), () => [
+        B(de, {
           pagination: e.pagination,
-          "onPagination:change": a[0] || (a[0] = (n) => c("pagination:change", n)),
-          "onPagination:perPage": a[1] || (a[1] = (n) => c("pagination:perPage", n))
+          "onPagination:change": t[0] || (t[0] = (a) => u("pagination:change", a)),
+          "onPagination:perPage": t[1] || (t[1] = (a) => u("pagination:perPage", a))
         }, null, 8, ["pagination"])
-      ]) : $("", !0)
+      ]) : h("", !0)
     ]));
   }
-}, xe = {
+}, he = {
   key: 1,
   class: "rvc-empty-state-title"
-}, qe = {
+}, Fe = {
   __name: "EmptyState",
   props: {
     title: {
@@ -593,18 +598,18 @@ const D = /* @__PURE__ */ Object.assign({
     }
   },
   setup(e) {
-    return (r, i) => (t(), l("div", {
+    return (o, i) => (n(), l("div", {
       class: p(["rvc-empty-state", { "rvc-empty-state-bg": e.background }])
     }, [
-      e.icon ? (t(), x(B(e.icon), {
+      e.icon ? (n(), w(C(e.icon), {
         key: 0,
         class: "rvc-empty-state-icon"
-      })) : $("", !0),
-      e.title ? (t(), l("p", xe, m(e.title), 1)) : $("", !0),
-      v(r.$slots, "default")
+      })) : h("", !0),
+      e.title ? (n(), l("p", he, f(e.title), 1)) : h("", !0),
+      g(o.$slots, "default")
     ], 2));
   }
-}, De = {
+}, Ne = {
   __name: "FormTextarea",
   props: {
     modelValue: {
@@ -618,26 +623,26 @@ const D = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: r }) {
-    const i = e, c = r, { hasModelBinding: s } = j(), g = C({
+  setup(e, { emit: o }) {
+    const i = e, u = o, { hasModelBinding: s } = I(), v = x({
       get: () => i.modelValue,
-      set: (u) => c("update:modelValue", u)
-    }), f = C(() => [
+      set: (r) => u("update:modelValue", r)
+    }), m = x(() => [
       "rvc-textarea",
       `rvc-textarea-${i.size}`
     ]);
-    return (u, a) => h(s) ? M((t(), l("textarea", {
+    return (r, t) => $(s) ? O((n(), l("textarea", {
       key: 0,
-      "onUpdate:modelValue": a[0] || (a[0] = (n) => g.value = n),
-      class: p(f.value)
+      "onUpdate:modelValue": t[0] || (t[0] = (a) => v.value = a),
+      class: p(m.value)
     }, null, 2)), [
-      [R, g.value]
-    ]) : (t(), l("textarea", {
+      [R, v.value]
+    ]) : (n(), l("textarea", {
       key: 1,
-      class: p(f.value)
+      class: p(m.value)
     }, null, 2));
   }
-}, we = { class: "rvc-radio" }, Se = ["id"], Ve = { key: 2 }, Be = ["for"], He = /* @__PURE__ */ Object.assign({
+}, ke = { class: "rvc-radio" }, Se = ["id"], we = { key: 2 }, Ve = ["for"], qe = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "Radio",
@@ -656,32 +661,34 @@ const D = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: r }) {
-    const i = e, c = r, s = C({
+  setup(e, { emit: o }) {
+    const i = e, u = o, s = x({
       get: () => i.modelValue,
-      set: (a) => c("update:modelValue", a)
-    }), { hasModelBinding: g } = j(), u = {
-      ...F(),
+      set: (t) => u("update:modelValue", t)
+    }), { hasModelBinding: v } = I(), r = {
+      ...N(),
       id: i.id,
       type: "radio",
       class: "absolute opacity-0 inset-0 cursor-pointer peer/radio"
     };
-    return (a, n) => (t(), l("div", we, [
-      h(g) ? M((t(), l("input", b({ key: 0 }, u, {
+    return (t, a) => (n(), l("div", ke, [
+      $(v) ? O((n(), l("input", b({ key: 0 }, r, {
         id: e.id,
-        "onUpdate:modelValue": n[0] || (n[0] = (d) => s.value = d)
+        "onUpdate:modelValue": a[0] || (a[0] = (d) => s.value = d)
       }), null, 16, Se)), [
-        [N, s.value]
-      ]) : (t(), l("input", P(b({ key: 1 }, u)), null, 16)),
-      n[1] || (n[1] = o("span", { class: "rvc-radio-input peer-focus/radio:rvc-focus" }, null, -1)),
-      a.$slots.default || e.label ? (t(), l("span", Ve, [
-        v(a.$slots, "default", {}, () => [
-          o("label", { for: e.id }, m(e.label), 9, Be)
+        [q, s.value]
+      ]) : (n(), l("input", P(b({ key: 1 }, r)), null, 16)),
+      a[1] || (a[1] = c("span", { class: "rvc-radio-input" }, null, -1)),
+      t.$slots.default || e.label ? (n(), l("span", we, [
+        g(t.$slots, "default", {}, () => [
+          c("label", { for: e.id }, f(e.label), 9, Ve)
         ])
-      ])) : $("", !0)
+      ])) : h("", !0)
     ]));
   }
-}), Ce = { class: "rvc-tabs-nav" }, Ae = { class: "md:hidden" }, Pe = ["value", "selected"], Ee = {
+}), Be = { class: "rvc-tabs-nav" }, Ce = ["value", "selected"], De = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
   __name: "Tabs",
   props: {
     modelValue: {
@@ -700,80 +707,79 @@ const D = /* @__PURE__ */ Object.assign({
     }
   },
   emits: ["update:modelValue", "tabs:change"],
-  setup(e, { emit: r }) {
-    const i = e, c = r, s = () => {
-      const a = i.tabs.findIndex((n) => n.active);
-      return a >= 0 ? a : 0;
-    }, g = C({
+  setup(e, { emit: o }) {
+    const i = e, u = o, s = () => {
+      const t = i.tabs.findIndex((a) => a.active);
+      return t >= 0 ? t : 0;
+    }, v = x({
       get: () => i.modelValue ?? s(),
-      set: (a) => {
-        const n = i.tabs[a];
-        c("update:modelValue", a), c("tabs:change", n);
+      set: (t) => {
+        const a = i.tabs[t];
+        u("update:modelValue", t), u("tabs:change", a);
       }
-    }), f = (a) => {
-      const n = +a.target.value;
-      g.value = n;
-      const d = i.tabs[n];
+    }), m = (t) => {
+      const a = +t.target.value;
+      v.value = a;
+      const d = i.tabs[a];
       d != null && d.selectEvent && d.selectEvent();
-    }, u = (a) => {
+    }, r = (t) => {
       const {
-        active: n,
+        active: a,
         as: d,
         bindAs: y,
-        selectEvent: w,
-        name: O,
-        ...T
-      } = a;
-      return T;
+        selectEvent: k,
+        name: T,
+        ...L
+      } = t;
+      return L;
     };
-    return (a, n) => (t(), l(k, null, [
-      o("div", {
-        class: p(["rvc-tabs hidden md:flex", { "rvc-tabs-buttons": e.tabStyle === "buttons" }])
-      }, [
-        o("nav", Ce, [
-          (t(!0), l(k, null, S(e.tabs, (d, y) => (t(), x(B(d.as ? d.as : "button"), b({ ref_for: !0 }, u(d), {
+    return (t, a) => (n(), l(S, null, [
+      c("div", b(t.$attrs, {
+        class: ["rvc-tabs", { "rvc-tabs-buttons": e.tabStyle === "buttons" }]
+      }), [
+        c("nav", Be, [
+          (n(!0), l(S, null, V(e.tabs, (d, y) => (n(), w(C(d.as ? d.as : "button"), b({ ref_for: !0 }, r(d), {
             key: `${y}-tab-item`,
             as: d.bindAs ? d.bindAs : void 0,
-            class: ["rvc-tab", { "rvc-tab-active": g.value === y }],
-            onClick: (w) => g.value = y
+            class: ["rvc-tab", { "rvc-tab-active": v.value === y }],
+            onClick: (k) => v.value = y
           }), {
-            default: L(() => [
-              A(m(d.name), 1)
+            default: M(() => [
+              A(f(d.name), 1)
             ]),
             _: 2
           }, 1040, ["as", "class", "onClick"]))), 128))
         ])
-      ], 2),
-      o("div", Ae, [
-        V(D, {
-          value: g.value,
-          onChange: f
-        }, {
-          default: L(() => [
-            (t(!0), l(k, null, S(e.tabs, (d, y) => (t(), l("option", {
-              key: `${y}-tab-item-select-option`,
-              value: y,
-              selected: g.value === y
-            }, m(d.name), 9, Pe))), 128))
-          ]),
-          _: 1
-        }, 8, ["value"])
-      ])
+      ], 16),
+      B(H, b(t.$attrs, {
+        "root-class": "rvc-tabs-select",
+        value: v.value,
+        onChange: m
+      }), {
+        default: M(() => [
+          (n(!0), l(S, null, V(e.tabs, (d, y) => (n(), l("option", {
+            key: `${y}-tab-item-select-option`,
+            value: y,
+            selected: v.value === y
+          }, f(d.name), 9, Ce))), 128))
+        ]),
+        _: 1
+      }, 16, ["value"])
     ], 64));
   }
-};
+});
 export {
-  Ie as Accordion,
-  ze as Alert,
-  Ze as Badge,
-  Ge as ButtonBase,
-  Fe as Checkbox,
-  Ne as DataTable,
-  qe as EmptyState,
-  Qe as FormInput,
-  D as FormSelect,
-  De as FormTextarea,
-  fe as Pagination,
-  He as Radio,
-  Ee as Tabs
+  Me as Accordion,
+  Oe as Alert,
+  Ee as Badge,
+  Ue as ButtonBase,
+  Ie as Checkbox,
+  je as DataTable,
+  Fe as EmptyState,
+  Ke as FormInput,
+  H as FormSelect,
+  Ne as FormTextarea,
+  de as Pagination,
+  qe as Radio,
+  De as Tabs
 };