@stachelock/ui 0.5.5 → 0.6.1

package/dist/{SelectTextInput.vue_vue_type_script_setup_true_lang-DYrXW14A.js → SelectTextInput.vue_vue_type_script_setup_true_lang-BVaViHPl.js}

@@ -1,15 +1,13 @@
-import { defineComponent as X, ref as B, onMounted as P, onBeforeUnmount as Z, reactive as _, toRefs as ee, computed as v, watch as te, createElementBlock as o, openBlock as r, createCommentVNode as f, createElementVNode as d, createVNode as y, createBlock as R, resolveDynamicComponent as le, toDisplayString as m, unref as x, normalizeClass as h, withCtx as b, Teleport as se, Transition as D, normalizeStyle as ae, Fragment as ne, renderList as re } from "vue";
-import { r as ie, a as oe } from "./ExclamationCircleIcon-DmL8Wwjo.js";
-import { r as de } from "./ChevronUpDownIcon-Bq_fsgrb.js";
-import { r as ce } from "./CheckIcon-BGlsmVwT.js";
-import { I as ue, j as fe, A as ve, F as ye } from "./listbox-YaWWZiiG.js";
-const xe = {
+import { defineComponent as X, ref as B, onMounted as N, onBeforeUnmount as Z, reactive as _, toRefs as ee, computed as x, watch as te, createElementBlock as o, openBlock as r, createCommentVNode as f, createElementVNode as d, createVNode as v, createBlock as O, resolveDynamicComponent as le, toDisplayString as g, unref as y, normalizeClass as h, withCtx as b, Teleport as se, Transition as P, normalizeStyle as ae, Fragment as ne, renderList as re } from "vue";
+import { ExclamationCircleIcon as ie, CheckCircleIcon as oe, ChevronUpDownIcon as de, CheckIcon as ce } from "@heroicons/vue/20/solid";
+import { Listbox as ue, ListboxButton as fe, ListboxOptions as xe, ListboxOption as ve } from "@headlessui/vue";
+const ye = {
   class: "sl-space-y-1",
   "data-testid": "select-text-input"
-}, me = {
+}, ge = {
   key: 0,
   class: "sl-grid sl-grid-cols-3 sl-items-center"
-}, ge = { class: "sl-col-span-2 sl-flex sl-items-center" }, pe = {
+}, me = { class: "sl-col-span-2 sl-flex sl-items-center" }, pe = {
   key: 1,
   class: "sl-text-sm sl-font-medium",
   style: { color: "var(--sl-text-primary)" }
@@ -31,16 +29,16 @@ const xe = {
 }, Ce = {
   key: 1,
   class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-z-20 sl-pointer-events-none"
-}, Ee = { class: "sl-relative" }, Be = { class: "sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, Re = {
+}, Ee = { class: "sl-relative" }, Be = { class: "sl-pointer-events-none sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-2" }, Oe = {
   key: 0,
   class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-4"
-}, je = { class: "sl-flex-1 sl-relative" }, Me = ["aria-invalid", "name", "placeholder", "inputmode", "maxlength", "value", "disabled"], Oe = {
+}, Re = { class: "sl-flex-1 sl-relative" }, Me = ["aria-invalid", "name", "placeholder", "inputmode", "maxlength", "value", "disabled"], Ve = {
   key: 0,
   class: "sl-mt-2 sl-text-sm sl-text-red-600 dark:sl-text-red-400 sl-bg-red-50 dark:sl-bg-red-900/20 sl-ring-1 sl-ring-red-100 dark:sl-ring-red-800 sl-rounded-md sl-p-2"
-}, Ve = {
+}, ze = {
   key: 1,
   class: "sl-text-xs sl-text-gray-500 dark:sl-text-slate-400"
-}, Ne = /* @__PURE__ */ X({
+}, $e = /* @__PURE__ */ X({
   __name: "SelectTextInput",
   props: {
     name: { type: String, required: !0 },
@@ -73,14 +71,14 @@ const xe = {
     showValidCheck: { type: Boolean, default: !0 }
   },
   emits: ["update:value", "update:validity"],
-  setup(s, { emit: F }) {
-    const j = B(null), M = B({
+  setup(s, { emit: q }) {
+    const R = B(null), M = B({
       top: "0px",
       left: "0px",
       width: "120px"
     }), k = B(!1);
-    function O() {
-      const e = j.value?.$el;
+    function V() {
+      const e = R.value?.$el;
       if (!e) return;
       const t = e.getBoundingClientRect();
       M.value = {
@@ -89,13 +87,13 @@ const xe = {
         width: `${Math.max(t.width, 120)}px`
       };
     }
-    function q() {
-      k.value = !k.value, k.value && O();
+    function F() {
+      k.value = !k.value, k.value && V();
     }
     function w() {
-      k.value && O();
+      k.value && V();
     }
-    P(() => {
+    N(() => {
       window.addEventListener("scroll", w, !0), window.addEventListener("resize", w);
     }), Z(() => {
       window.removeEventListener("scroll", w, !0), window.removeEventListener("resize", w);
@@ -111,7 +109,7 @@ const xe = {
         return t.length ? t : void 0;
       }
     }
-    function V(e) {
+    function z(e) {
       return !!e && typeof e == "object" && !Array.isArray(e) && ("select" in e || "text" in e || "display" in e);
     }
     function Y(e) {
@@ -120,7 +118,7 @@ const xe = {
     function C(e, t, l) {
       return l || (e && t ? `${e} ${t}`.trim() : e || t || void 0);
     }
-    function $(e) {
+    function I(e) {
       const t = {};
       if (e == null) return t;
       if (typeof e == "string" || typeof e == "number") {
@@ -134,7 +132,7 @@ const xe = {
           t.text = l, t.display = l;
         return t;
       }
-      if (V(e)) {
+      if (z(e)) {
         const l = e, u = i(l.select), c = i(l.text), p = i(l.display);
         return u && (t.select = u), c && (t.text = c), t.display = C(t.select, t.text, p), t;
       }
@@ -144,20 +142,20 @@ const xe = {
       }
       return t;
     }
-    const a = s, z = F, T = $(a.value), A = _({
+    const a = s, j = q, T = I(a.value), $ = _({
       localValue: T
-    }), { localValue: n } = ee(A), G = v(
-      () => Y(T) && !V(a.value)
-    ), I = v(() => a.select?.options || []), E = v(() => n.value.select && I.value.find((e) => e.value === n.value.select) || null), H = v(() => {
+    }), { localValue: n } = ee($), G = x(
+      () => Y(T) && !z(a.value)
+    ), A = x(() => a.select?.options || []), E = x(() => n.value.select && A.value.find((e) => e.value === n.value.select) || null), H = x(() => {
       const e = n.value.text;
       return a.textValidationRegex ? !e || String(e).trim() === "" ? a.requiredText === !0 : !a.textValidationRegex.test(String(e)) : !1;
-    }), g = v(() => a.showErrors && (a.hasError || H.value)), N = v(
-      () => a.showValidCheck && !g.value && !!S.value
-    ), J = v(() => a.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-700" : a.colorfulValidation ? g.value ? "sl-ring-red-300 dark:sl-ring-red-500 focus-within:sl-ring-stachelock-600" : N.value ? "sl-ring-green-300 dark:sl-ring-green-500 focus-within:sl-ring-stachelock-600" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600"), S = v(() => {
+    }), m = x(() => a.showErrors && (a.hasError || H.value)), D = x(
+      () => a.showValidCheck && !m.value && !!S.value
+    ), J = x(() => a.disabled ? "sl-ring-gray-200 dark:sl-ring-slate-700" : a.colorfulValidation ? m.value ? "sl-ring-red-300 dark:sl-ring-red-500 focus-within:sl-ring-stachelock-600" : D.value ? "sl-ring-green-300 dark:sl-ring-green-500 focus-within:sl-ring-stachelock-600" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600" : "sl-ring-gray-300 dark:sl-ring-slate-600 focus-within:sl-ring-stachelock-600"), S = x(() => {
       const e = { select: n.value.select, text: n.value.text }, t = a.formatter ? a.formatter(e) : void 0;
       return t !== void 0 ? t : [e.select, e.text].filter(Boolean).join(a.delimiter).trim();
-    }), K = v(() => {
-      if (!g.value) return "";
+    }), K = x(() => {
+      if (!m.value) return "";
       const e = !!n.value.select, t = !!n.value.text && String(n.value.text).trim() !== "", l = !!n.value.text && /^\d{4}$/.test(String(n.value.text));
       return !e && !t ? "Please select an option and enter a value." : e ? t ? !l && a.textValidationRegex ? "Please enter a valid value." : "Please complete both fields." : "Please enter a value." : "Please select an option.";
     });
@@ -167,9 +165,9 @@ const xe = {
         text: n.value.text,
         display: e
       };
-      z("update:value", t);
+      j("update:value", t);
       const l = !!(t.select && t.text && String(t.text).length > 0);
-      z("update:validity", l);
+      j("update:validity", l);
     }
     function Q(e) {
       n.value.select = e?.value || void 0, k.value = !1, L();
@@ -180,34 +178,34 @@ const xe = {
     return te(
       () => a.value,
       (e) => {
-        A.localValue = $(e);
+        $.localValue = I(e);
       },
       { deep: !0 }
-    ), P(() => {
+    ), N(() => {
       G.value && L();
-    }), a.validateOnMount && L(), (e, t) => (r(), o("div", xe, [
-      s.label || s.secondaryLabel || s.tertiaryLabel || s.disabled && s.disabledMessage ? (r(), o("div", me, [
-        d("div", ge, [
-          s.labelIconLeft ? (r(), R(le(s.labelIconLeft), {
+    }), a.validateOnMount && L(), (e, t) => (r(), o("div", ye, [
+      s.label || s.secondaryLabel || s.tertiaryLabel || s.disabled && s.disabledMessage ? (r(), o("div", ge, [
+        d("div", me, [
+          s.labelIconLeft ? (r(), O(le(s.labelIconLeft), {
             key: 0,
             class: "sl-mr-2 sl-h-4 sl-w-4 sl-text-yellow-300"
           })) : f("", !0),
-          s.label ? (r(), o("label", pe, m(s.label), 1)) : f("", !0)
+          s.label ? (r(), o("label", pe, g(s.label), 1)) : f("", !0)
         ]),
         d("div", he, [
-          s.disabled && s.disabledMessage ? (r(), o("p", be, m(s.disabledMessage), 1)) : f("", !0),
-          s.secondaryLabel ? (r(), o("span", ke, m(s.secondaryLabel), 1)) : f("", !0),
-          s.tertiaryLabel ? (r(), o("span", we, m(s.tertiaryLabel), 1)) : f("", !0)
+          s.disabled && s.disabledMessage ? (r(), o("p", be, g(s.disabledMessage), 1)) : f("", !0),
+          s.secondaryLabel ? (r(), o("span", ke, g(s.secondaryLabel), 1)) : f("", !0),
+          s.tertiaryLabel ? (r(), o("span", we, g(s.tertiaryLabel), 1)) : f("", !0)
         ])
       ])) : f("", !0),
       d("div", Se, [
-        g.value ? (r(), o("div", Le, [
-          y(x(ie), {
+        m.value ? (r(), o("div", Le, [
+          v(y(ie), {
             class: "sl-h-5 sl-w-5 sl-text-red-500",
             "aria-hidden": "true"
           })
-        ])) : N.value ? (r(), o("div", Ce, [
-          y(x(oe), {
+        ])) : D.value ? (r(), o("div", Ce, [
+          v(y(oe), {
             class: "sl-h-5 sl-w-5 sl-text-green-500",
             "aria-hidden": "true"
           })
@@ -215,16 +213,16 @@ const xe = {
         d("div", {
           class: h(["sl-flex sl-rounded-md sl-shadow-sm sl-ring-1 sl-ring-inset focus-within:sl-ring-2 focus-within:sl-ring-inset", J.value])
         }, [
-          y(x(ue), {
+          v(y(ue), {
             "model-value": E.value,
             "onUpdate:modelValue": Q,
             disabled: s.disabled
           }, {
             default: b(() => [
               d("div", Ee, [
-                y(x(fe), {
+                v(y(fe), {
                   ref_key: "listboxButtonRef",
-                  ref: j,
+                  ref: R,
                   class: h([
                     "sl-relative sl-cursor-default sl-rounded-l-md sl-border-0 sl-py-2 sl-pl-3 sl-pr-10 sl-text-left sl-text-sm",
                     "sl-bg-white dark:sl-bg-slate-900 sl-text-gray-900 dark:sl-text-slate-100",
@@ -232,14 +230,14 @@ const xe = {
                     s.disabled ? "sl-cursor-not-allowed sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400" : ""
                   ]),
                   "data-testid": "select-dropdown",
-                  onClick: q
+                  onClick: F
                 }, {
                   default: b(() => [
                     d("span", {
                       class: h(["sl-block sl-truncate sl-min-w-[80px]", E.value ? "" : "sl-text-gray-500 dark:sl-text-slate-400"])
-                    }, m(E.value?.label || s.select?.placeholder || "Select…"), 3),
+                    }, g(E.value?.label || s.select?.placeholder || "Select…"), 3),
                     d("span", Be, [
-                      y(x(de), {
+                      v(y(de), {
                         class: "sl-h-5 sl-w-5 sl-text-gray-400 dark:sl-text-slate-300",
                         "aria-hidden": "true"
                       })
@@ -247,19 +245,19 @@ const xe = {
                   ]),
                   _: 1
                 }, 8, ["class"]),
-                (r(), R(se, { to: "body" }, [
-                  y(D, {
+                (r(), O(se, { to: "body" }, [
+                  v(P, {
                     "leave-active-class": "sl-transition sl-duration-100 sl-ease-in",
                     "leave-from-class": "sl-opacity-100",
                     "leave-to-class": "sl-opacity-0"
                   }, {
                     default: b(() => [
-                      y(x(ve), {
+                      v(y(xe), {
                         class: "sl-fixed sl-z-[9999] sl-max-h-56 sl-overflow-auto sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-py-1 sl-text-base sl-shadow-lg dark:sl-shadow-slate-900/50 sl-ring-1 sl-ring-black sl-ring-opacity-5 dark:sl-ring-slate-700 focus:sl-outline-none sm:sl-text-sm",
                         style: ae(M.value)
                       }, {
                         default: b(() => [
-                          (r(!0), o(ne, null, re(I.value, (l) => (r(), R(x(ye), {
+                          (r(!0), o(ne, null, re(A.value, (l) => (r(), O(y(ve), {
                             key: l.value,
                             value: l,
                             as: "template"
@@ -273,9 +271,9 @@ const xe = {
                               }, [
                                 d("span", {
                                   class: h(["sl-block sl-truncate", c ? "sl-font-medium" : "sl-font-normal"])
-                                }, m(l.label), 3),
-                                c ? (r(), o("span", Re, [
-                                  y(x(ce), {
+                                }, g(l.label), 3),
+                                c ? (r(), o("span", Oe, [
+                                  v(y(ce), {
                                     class: "sl-h-5 sl-w-5",
                                     "aria-hidden": "true"
                                   })
@@ -296,19 +294,19 @@ const xe = {
             _: 1
           }, 8, ["model-value", "disabled"]),
           t[1] || (t[1] = d("div", { class: "sl-w-px sl-bg-gray-200 dark:sl-bg-slate-700 sl-self-stretch" }, null, -1)),
-          d("div", je, [
+          d("div", Re, [
             d("input", {
               class: h([
                 "sl-block sl-w-full sl-text-sm focus:sl-outline-none focus:sl-ring-0 sl-border-0 sl-py-2 sl-pl-3 sl-pr-10 sl-rounded-r-md",
                 "sl-placeholder:text-gray-400 dark:sl-placeholder:text-slate-500",
                 s.disabled ? "sl-bg-gray-50 dark:sl-bg-slate-800 sl-text-gray-500 dark:sl-text-slate-400 sl-cursor-not-allowed" : "sl-bg-white dark:sl-bg-slate-900 sl-text-gray-900 dark:sl-text-slate-100"
               ]),
-              "aria-invalid": g.value || void 0,
+              "aria-invalid": m.value || void 0,
               name: `${s.name}__text`,
               placeholder: s.text?.placeholder || "",
               inputmode: s.text?.inputMode ?? "text",
               maxlength: s.text?.maxLength || void 0,
-              value: x(n).text || "",
+              value: y(n).text || "",
               onInput: t[0] || (t[0] = (l) => W(l.target.value)),
               disabled: s.disabled,
               "data-testid": "text-input"
@@ -316,7 +314,7 @@ const xe = {
           ])
         ], 2)
       ]),
-      y(D, {
+      v(P, {
         "enter-active-class": "sl-transition sl-ease-out sl-duration-300",
         "enter-from-class": "sl-opacity-0 sl-transform sl-scale-95",
         "enter-to-class": "sl-opacity-100 sl-transform sl-scale-100",
@@ -325,15 +323,14 @@ const xe = {
         "leave-to-class": "sl-opacity-0 sl-transform sl-scale-95"
       }, {
         default: b(() => [
-          g.value ? (r(), o("p", Oe, m(K.value), 1)) : f("", !0)
+          m.value ? (r(), o("p", Ve, g(K.value), 1)) : f("", !0)
         ]),
         _: 1
       }),
-      !g.value && S.value ? (r(), o("p", Ve, m(S.value), 1)) : f("", !0)
+      !m.value && S.value ? (r(), o("p", ze, g(S.value), 1)) : f("", !0)
     ]));
   }
 });
 export {
-  Ne as _
+  $e as _
 };
-//# sourceMappingURL=SelectTextInput.vue_vue_type_script_setup_true_lang-DYrXW14A.js.map

package/dist/{SidebarLayout.vue_vue_type_script_setup_true_lang-BJ5jadgZ.js → SidebarLayout.vue_vue_type_script_setup_true_lang-CZ21EVcZ.js}

@@ -1,15 +1,13 @@
-import { defineComponent as x, ref as g, createElementBlock as u, openBlock as v, createVNode as o, createElementVNode as s, unref as a, withCtx as i, renderSlot as t, normalizeClass as d } from "vue";
-import { r as b } from "./XMarkIcon-Cwy3T6p8.js";
-import { r as y } from "./Bars3Icon-BdOqcGcY.js";
-import { S as h, h as f } from "./transition-_rPfnoET.js";
-import { Y as k, G as w } from "./dialog-BJ2Ld8l3.js";
-const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }, S = { class: "sl-absolute sl-left-full sl-top-0 sl-flex sl-w-16 sl-justify-center sl-pt-5" }, C = {
+import { defineComponent as x, ref as u, createElementBlock as m, openBlock as v, createVNode as o, createElementVNode as s, unref as a, withCtx as i, renderSlot as t, normalizeClass as d } from "vue";
+import { TransitionRoot as b, Dialog as y, TransitionChild as f, DialogPanel as h } from "@headlessui/vue";
+import { XMarkIcon as k, Bars3Icon as w } from "@heroicons/vue/24/outline";
+const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }, C = { class: "sl-absolute sl-left-full sl-top-0 sl-flex sl-w-16 sl-justify-center sl-pt-5" }, S = {
   class: "sl-flex sl-grow sl-flex-col sl-gap-y-5 sl-px-6 sl-pb-2 sl-ring-1 sl-ring-white/10",
   style: { "background-color": "#dc2626" }
-}, z = { class: "sl-flex sl-h-16 sl-shrink-0 sl-items-center" }, W = { class: "sl-flex sl-flex-1 sl-flex-col" }, B = {
+}, z = { class: "sl-flex sl-h-16 sl-shrink-0 sl-items-center" }, B = { class: "sl-flex sl-flex-1 sl-flex-col" }, W = {
   role: "list",
   class: "-sl-mx-2 sl-flex-1 sl-space-y-1"
-}, L = { class: "sl-mt-auto" }, j = { class: "sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-px-6" }, E = { class: "sl-mt-8 sl-flex sl-flex-col sl-justify-between sl-h-full" }, G = { class: "sl-absolute sl-bottom-4 sl-left-0 sl-right-0 sl-px-6" }, N = { class: "sl-sticky sl-top-0 sl-z-40 sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-gap-x-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-bg-white dark:sl-bg-slate-800 sl-px-4 sl-shadow-sm sm:sl-gap-x-6 sm:sl-px-6 lg:sl-px-8" }, O = { class: "sl-flex sl-flex-1 sl-gap-x-4 sm:sl-self-stretch lg:sl-gap-x-6" }, V = { class: "sl-relative sl-flex sl-flex-1" }, Y = { class: "sl-flex sl-items-center sl-gap-x-4 lg:sl-gap-x-6" }, q = { class: "sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6" }, J = /* @__PURE__ */ x({
+}, L = { class: "sl-mt-auto" }, j = { class: "sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-px-6" }, D = { class: "sl-mt-8 sl-flex sl-flex-col sl-justify-between sl-h-full" }, E = { class: "sl-absolute sl-bottom-4 sl-left-0 sl-right-0 sl-px-6" }, I = { class: "sl-sticky sl-top-0 sl-z-40 sl-flex sl-h-16 sl-shrink-0 sl-items-center sl-gap-x-4 sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-bg-white dark:sl-bg-slate-800 sl-px-4 sl-shadow-sm sm:sl-gap-x-6 sm:sl-px-6 lg:sl-px-8" }, N = { class: "sl-flex sl-flex-1 sl-gap-x-4 sm:sl-self-stretch lg:sl-gap-x-6" }, O = { class: "sl-relative sl-flex sl-flex-1" }, T = { class: "sl-flex sl-items-center sl-gap-x-4 lg:sl-gap-x-6" }, V = { class: "sl-px-4 sm:sl-px-6 lg:sl-px-8 sl-py-6" }, X = /* @__PURE__ */ x({
   __name: "SidebarLayout",
   props: {
     isWideSidebar: {
@@ -17,22 +15,22 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
       default: !1
     }
   },
-  setup(r) {
-    const n = g(!1), p = () => {
-      n.value = !1;
-    }, c = () => {
-      n.value = !0;
+  setup(n) {
+    const r = u(!1), c = () => {
+      r.value = !1;
+    }, p = () => {
+      r.value = !0;
     };
-    return (e, l) => (v(), u("div", _, [
-      o(a(h), {
+    return (e, l) => (v(), m("div", _, [
+      o(a(b), {
         as: "template",
-        show: n.value
+        show: r.value
       }, {
         default: i(() => [
-          o(a(k), {
+          o(a(y), {
             as: "div",
             class: "sl-relative sl-z-50 lg:sl-hidden",
-            onClose: p
+            onClose: c
           }, {
             default: i(() => [
               o(a(f), {
@@ -60,7 +58,7 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
                   "leave-to": "-sl-translate-x-full"
                 }, {
                   default: i(() => [
-                    o(a(w), { class: "sl-relative sl-mr-16 sl-flex sl-w-full sl-max-w-xs sl-flex-1" }, {
+                    o(a(h), { class: "sl-relative sl-mr-16 sl-flex sl-w-full sl-max-w-xs sl-flex-1" }, {
                       default: i(() => [
                         o(a(f), {
                           as: "template",
@@ -72,14 +70,14 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
                           "leave-to": "sl-opacity-0"
                         }, {
                           default: i(() => [
-                            s("div", S, [
+                            s("div", C, [
                               s("button", {
                                 type: "button",
                                 class: "-sl-m-2.5 sl-p-2.5",
-                                onClick: l[0] || (l[0] = (m) => p())
+                                onClick: l[0] || (l[0] = (g) => c())
                               }, [
                                 l[3] || (l[3] = s("span", { class: "sl-sr-only" }, "Close sidebar", -1)),
-                                o(a(b), {
+                                o(a(k), {
                                   class: "sl-h-6 sl-w-6 sl-text-stachelock-050",
                                   "aria-hidden": "true"
                                 })
@@ -88,7 +86,7 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
                           ]),
                           _: 1
                         }),
-                        s("div", C, [
+                        s("div", S, [
                           s("div", z, [
                             t(e.$slots, "logo", {}, () => [
                               l[4] || (l[4] = s("div", {
@@ -97,8 +95,8 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
                               }, "Logo", -1))
                             ])
                           ]),
-                          s("nav", W, [
-                            s("ul", B, [
+                          s("nav", B, [
+                            s("ul", W, [
                               t(e.$slots, "navigation")
                             ])
                           ]),
@@ -120,7 +118,7 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
         _: 3
       }, 8, ["show"]),
       s("div", {
-        class: d(["sl-hidden lg:sl-fixed lg:sl-inset-y-0 lg:sl-left-0 lg:sl-z-50 lg:sl-block lg:sl-pb-4 sl-pt-4", r.isWideSidebar ? "lg:sl-w-72" : "lg:sl-w-20"]),
+        class: d(["sl-hidden lg:sl-fixed lg:sl-inset-y-0 lg:sl-left-0 lg:sl-z-50 lg:sl-block lg:sl-pb-4 sl-pt-4", n.isWideSidebar ? "lg:sl-w-72" : "lg:sl-w-20"]),
         style: { "background-color": "#dc2626" }
       }, [
         s("div", j, [
@@ -131,29 +129,29 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
             }, "Logo", -1))
           ])
         ]),
-        s("nav", E, [
+        s("nav", D, [
           s("ul", {
             role: "list",
-            class: d(r.isWideSidebar ? "sl-flex sl-flex-col sl-items-start sl-mx-4 sl-space-y-1" : "sl-flex sl-flex-col sl-items-center sl-space-y-1")
+            class: d(n.isWideSidebar ? "sl-flex sl-flex-col sl-items-start sl-mx-4 sl-space-y-1" : "sl-flex sl-flex-col sl-items-center sl-space-y-1")
           }, [
             t(e.$slots, "navigation")
           ], 2),
-          s("div", G, [
+          s("div", E, [
             t(e.$slots, "sidebar-footer")
           ])
         ])
       ], 2),
       s("div", {
-        class: d(["lg:sl-pl-20", r.isWideSidebar ? "lg:sl-pl-72" : "lg:sl-pl-20"])
+        class: d(["lg:sl-pl-20", n.isWideSidebar ? "lg:sl-pl-72" : "lg:sl-pl-20"])
       }, [
-        s("div", N, [
+        s("div", I, [
           s("button", {
             type: "button",
             class: "-sl-m-2.5 sl-p-2.5 sl-text-gray-700 dark:sl-text-slate-300 lg:sl-hidden",
-            onClick: l[1] || (l[1] = (m) => c())
+            onClick: l[1] || (l[1] = (g) => p())
           }, [
             l[6] || (l[6] = s("span", { class: "sl-sr-only" }, "Open sidebar", -1)),
-            o(a(y), {
+            o(a(w), {
               class: "sl-h-6 sl-w-6",
               "aria-hidden": "true"
             })
@@ -162,16 +160,16 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
             class: "sl-h-6 sl-w-px sl-bg-gray-900/10 dark:sl-bg-slate-700 lg:sl-hidden",
             "aria-hidden": "true"
           }, null, -1)),
-          s("div", O, [
-            s("div", V, [
+          s("div", N, [
+            s("div", O, [
               t(e.$slots, "header-content")
             ]),
-            s("div", Y, [
+            s("div", T, [
               t(e.$slots, "header-right")
             ])
           ])
         ]),
-        s("main", q, [
+        s("main", V, [
           t(e.$slots, "main")
         ])
       ], 2)
@@ -179,6 +177,5 @@ const _ = { class: "sl-relative" }, $ = { class: "sl-fixed sl-inset-0 sl-flex" }
   }
 });
 export {
-  J as _
+  X as _
 };
-//# sourceMappingURL=SidebarLayout.vue_vue_type_script_setup_true_lang-BJ5jadgZ.js.map

package/dist/SparklineChart.vue_vue_type_script_setup_true_lang-BlNk5ZqM.js

@@ -75,4 +75,3 @@ const M = /* @__PURE__ */ d({
 export {
   M as _
 };
-//# sourceMappingURL=SparklineChart.vue_vue_type_script_setup_true_lang-BlNk5ZqM.js.map

package/dist/StatCard.vue_vue_type_script_setup_true_lang-B5SuaSXL.js

@@ -0,0 +1,66 @@
+import { defineComponent as x, computed as l, createElementBlock as t, openBlock as s, createElementVNode as a, createCommentVNode as r, createBlock as u, resolveDynamicComponent as g, toDisplayString as c, normalizeClass as v, createVNode as f } from "vue";
+import { ArrowUpIcon as y, ArrowDownIcon as b, MinusIcon as w } from "@heroicons/vue/20/solid";
+import { _ as p } from "./SparklineChart.vue_vue_type_script_setup_true_lang-BlNk5ZqM.js";
+import { chartColors as d } from "./charts/chartTheme.js";
+const C = { class: "sl-bg-white dark:sl-bg-slate-800 sl-rounded-xl sl-shadow-sm sl-ring-1 sl-ring-gray-900/5 dark:sl-ring-slate-700 sl-p-6" }, D = { class: "sl-flex sl-items-center sl-justify-between" }, _ = { class: "sl-flex sl-items-center sl-gap-3" }, B = {
+  key: 0,
+  class: "sl-flex sl-items-center sl-justify-center sl-w-10 sl-h-10 sl-rounded-lg sl-bg-stachelock-50 dark:sl-bg-stachelock-900/30"
+}, I = { class: "sl-text-sm sl-font-medium sl-text-gray-500 dark:sl-text-slate-400" }, N = { class: "sl-mt-4" }, L = {
+  key: 0,
+  class: "sl-text-3xl sl-font-semibold sl-text-gray-900 dark:sl-text-white sl-tabular-nums"
+}, V = {
+  key: 1,
+  class: "sl-h-9 sl-w-24 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded sl-animate-pulse"
+}, j = {
+  key: 0,
+  class: "sl-mt-4"
+}, A = {
+  key: 1,
+  class: "sl-mt-2 sl-text-xs sl-text-gray-500 dark:sl-text-slate-400"
+}, $ = /* @__PURE__ */ x({
+  __name: "StatCard",
+  props: {
+    title: {},
+    value: {},
+    change: {},
+    changeLabel: {},
+    sparklineData: {},
+    icon: {},
+    loading: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const n = e, o = l(() => n.change !== void 0 && n.change > 0), i = l(() => n.change !== void 0 && n.change < 0), h = l(() => o.value ? "sl-text-green-600 dark:sl-text-green-400" : i.value ? "sl-text-red-600 dark:sl-text-red-400" : "sl-text-gray-500 dark:sl-text-slate-400"), m = l(() => o.value ? y : i.value ? b : w), k = l(() => o.value ? d.success : i.value ? d.danger : d.primary[0]);
+    return (E, M) => (s(), t("div", C, [
+      a("div", D, [
+        a("div", _, [
+          e.icon ? (s(), t("div", B, [
+            (s(), u(g(e.icon), { class: "sl-h-5 sl-w-5 sl-text-stachelock-600 dark:sl-text-stachelock-400" }))
+          ])) : r("", !0),
+          a("p", I, c(e.title), 1)
+        ]),
+        e.change !== void 0 ? (s(), t("div", {
+          key: 0,
+          class: v(["sl-flex sl-items-center sl-gap-1 sl-text-sm sl-font-medium", h.value])
+        }, [
+          (s(), u(g(m.value), { class: "sl-h-4 sl-w-4" })),
+          a("span", null, c(Math.abs(e.change)) + "%", 1)
+        ], 2)) : r("", !0)
+      ]),
+      a("div", N, [
+        e.loading ? (s(), t("div", V)) : (s(), t("p", L, c(e.value), 1))
+      ]),
+      e.sparklineData && e.sparklineData.length > 0 ? (s(), t("div", j, [
+        f(p, {
+          data: e.sparklineData,
+          type: "area",
+          height: 40,
+          color: k.value
+        }, null, 8, ["data", "color"])
+      ])) : r("", !0),
+      e.changeLabel ? (s(), t("p", A, c(e.changeLabel), 1)) : r("", !0)
+    ]));
+  }
+});
+export {
+  $ as _
+};