@stachelock/ui 0.3.0 → 0.4.0

package/dist/{CalendarHeader.vue_vue_type_script_setup_true_lang-DRwe4rw8.js → CalendarHeader.vue_vue_type_script_setup_true_lang-P5ypRyGV.js}

@@ -1,9 +1,9 @@
-import { createElementBlock as o, openBlock as i, createElementVNode as t, defineComponent as I, ref as y, computed as D, watch as _, onMounted as K, onUnmounted as P, toDisplayString as c, createVNode as u, unref as C, createCommentVNode as M, renderSlot as S, Fragment as B, withCtx as $, createTextVNode as q, Transition as J, withDirectives as Q, renderList as X, normalizeClass as ee, vShow as te } from "vue";
-import le from "./components/Button.js";
-import { _ as se } from "./SelectInput.vue_vue_type_script_setup_true_lang--yUL7bcx.js";
-import { t as h, p as F, b as ae, g as re, a as U } from "./calendar-DyIP7WGv.js";
-import { r as ne } from "./ChevronRightIcon-DkUqw988.js";
-function oe(n, f) {
+import { createElementBlock as o, openBlock as i, createElementVNode as t, defineComponent as K, ref as y, computed as D, watch as M, onMounted as P, onUnmounted as q, toDisplayString as u, createVNode as m, unref as _, createCommentVNode as C, renderSlot as S, Fragment as A, withCtx as U, createTextVNode as J, Transition as Q, withDirectives as X, renderList as ee, normalizeClass as te, vShow as le } from "vue";
+import se from "./components/Button.js";
+import { _ as ae } from "./SelectInput.vue_vue_type_script_setup_true_lang-DHiZ-7K2.js";
+import { t as h, p as B, b as re, g as ne, a as N } from "./calendar-BlSSD4nO.js";
+import { r as oe } from "./ChevronRightIcon-DkUqw988.js";
+function ie(n, f) {
   return i(), o("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -18,7 +18,7 @@ function oe(n, f) {
     })
   ]);
 }
-function ie(n, f) {
+function de(n, f) {
   return i(), o("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -29,13 +29,13 @@ function ie(n, f) {
     t("path", { d: "M3 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" })
   ]);
 }
-const de = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-pl-6 sl-py-4 lg:sl-flex-none sl-bg-white dark:sl-bg-slate-900" }, ce = { class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-slate-200" }, ue = ["datetime"], ge = { class: "sl-flex sl-items-center" }, me = { class: "sl-relative sl-flex sl-items-center sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-sm md:sl-items-stretch" }, ve = { class: "sl-sr-only" }, ye = { class: "sl-sr-only" }, he = { class: "sl-hidden md:sl-ml-4 md:sl-flex md:sl-items-center" }, fe = { class: "sl-w-36" }, be = { class: "sl-absolute sl-right-0 sl-z-10 sl-mt-3 sl-w-36 sl-origin-top-right sl-divide-y sl-divide-gray-100 dark:sl-divide-slate-700 sl-overflow-hidden sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-lg sl-ring-1 sl-ring-black dark:sl-ring-slate-600 sl-ring-opacity-5 focus:sl-outline-none" }, ke = {
+const ce = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-pl-6 sl-py-4 lg:sl-flex-none sl-bg-white dark:sl-bg-slate-900" }, ue = { class: "sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-slate-200" }, me = ["datetime"], ge = { class: "sl-flex sl-items-center" }, ve = { class: "sl-relative sl-flex sl-items-center sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-sm md:sl-items-stretch" }, ye = { class: "sl-sr-only" }, he = { class: "sl-sr-only" }, fe = { class: "sl-hidden md:sl-ml-4 md:sl-flex md:sl-items-center" }, be = { class: "sl-w-36" }, ke = { class: "sl-absolute sl-right-0 sl-z-10 sl-mt-3 sl-w-36 sl-origin-top-right sl-divide-y sl-divide-gray-100 dark:sl-divide-slate-700 sl-overflow-hidden sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-lg sl-ring-1 sl-ring-black dark:sl-ring-slate-600 sl-ring-opacity-5 focus:sl-outline-none" }, we = {
   key: 0,
   class: "sl-py-1"
-}, we = { class: "sl-py-1" }, xe = ["onClick"], pe = {
+}, xe = { class: "sl-py-1" }, pe = ["onClick"], De = {
   key: 1,
   class: "sl-py-1"
-}, Be = /* @__PURE__ */ I({
+}, Be = /* @__PURE__ */ K({
   __name: "CalendarHeader",
   props: {
     /** Current view mode */
@@ -62,41 +62,41 @@ const de = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-b
   },
   emits: ["changeRange", "changeView", "action"],
   setup(n, { emit: f }) {
-    const r = n, m = f, v = [
+    const r = n, g = f, v = [
       { id: "day", label: "Day view" },
       { id: "week", label: "Week view" },
       { id: "month", label: "Month view" },
       { id: "year", label: "Year view" }
-    ], d = y(!1), b = y(null), L = /* @__PURE__ */ new Date(), N = new Date(L.getFullYear(), L.getMonth(), 1), s = y(r.view === "month" ? N : /* @__PURE__ */ new Date()), z = y([]);
+    ], d = y(!1), b = y(null), F = /* @__PURE__ */ new Date(), z = new Date(F.getFullYear(), F.getMonth(), 1), l = y(r.view === "month" ? z : /* @__PURE__ */ new Date()), E = y([]);
     let k = !1;
-    const E = D(() => v.find((e) => e.id === r.view) || v[2]);
-    function O(e) {
-      e && e.id && m("changeView", e.id);
+    const O = D(() => v.find((e) => e.id === r.view) || v[2]);
+    function V(e) {
+      e && e.id && g("changeView", e.id);
     }
-    const V = D(() => {
+    const Z = D(() => {
       switch (r.view) {
         case "day":
-          return s.value.toDateString();
+          return l.value.toDateString();
         case "week":
         case "month":
-          return s.value.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+          return l.value.toLocaleDateString("en-US", { month: "long", year: "numeric" });
         case "year":
-          return s.value.getFullYear().toString();
+          return l.value.getFullYear().toString();
         default:
-          return s.value.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+          return l.value.toLocaleDateString("en-US", { month: "long", year: "numeric" });
       }
-    }), Z = D(() => h(s.value));
+    }), j = D(() => h(l.value));
     function w(e) {
       if (!e || !Array.isArray(e) || e.length === 0) return null;
-      const l = e, a = l.find((g) => typeof g?.date == "string" && g?.isSelected === !0);
-      if (a) return F(a.date);
-      const x = l.find((g) => typeof g?.date == "string" && g?.isToday === !0);
-      if (x) return F(x.date);
-      const p = l[0];
-      return p && typeof p.date == "string" ? F(p.date) : null;
+      const a = e.length > 0 && "date" in e[0] ? e : e.flatMap((c) => c.days), x = a.find((c) => typeof c?.date == "string" && c?.isSelected === !0);
+      if (x) return B(x.date);
+      const $ = a.find((c) => typeof c?.date == "string" && c?.isToday === !0);
+      if ($) return B($.date);
+      const p = a[0];
+      return p && typeof p.date == "string" ? B(p.date) : null;
     }
-    function j() {
-      let e = new Date(s.value);
+    function H() {
+      let e = new Date(l.value);
       switch (r.view) {
         case "day":
           e.setDate(e.getDate() - 1);
@@ -111,10 +111,10 @@ const de = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-b
           e.setFullYear(e.getFullYear() - 1);
           break;
       }
-      s.value = e;
+      l.value = e;
     }
-    function H() {
-      let e = new Date(s.value);
+    function W() {
+      let e = new Date(l.value);
       switch (r.view) {
         case "day":
           e.setDate(e.getDate() + 1);
@@ -129,136 +129,136 @@ const de = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-b
           e.setFullYear(e.getFullYear() + 1);
           break;
       }
-      s.value = e;
+      l.value = e;
     }
-    function Y() {
+    function L() {
       let e = /* @__PURE__ */ new Date();
-      r.view === "month" && (e = new Date(e.getFullYear(), e.getMonth(), 1)), s.value = e, d.value = !1;
+      r.view === "month" && (e = new Date(e.getFullYear(), e.getMonth(), 1)), l.value = e, d.value = !1;
     }
-    function W(e) {
-      d.value = !1, e && m("changeView", e);
+    function G(e) {
+      d.value = !1, e && g("changeView", e);
     }
-    function R() {
-      d.value = !1, m("action");
+    function Y() {
+      d.value = !1, g("action");
     }
-    function A() {
+    function R() {
       let e = [];
-      const l = h(s.value);
+      const s = h(l.value);
       switch (r.view) {
         case "day":
-          e = U(s.value).filter(
-            (a) => a.date === l
+          e = N(l.value).filter(
+            (a) => a.date === s
           );
           break;
         case "week":
-          e = U(s.value);
+          e = N(l.value);
           break;
         case "month":
-          e = re(s.value, 0);
+          e = ne(l.value, 0);
           break;
         case "year":
-          e = ae(s.value);
+          e = re(l.value);
           break;
       }
-      z.value = e, k = !0, m("changeRange", e), k = !1;
+      E.value = e, k = !0, g("changeRange", e), k = !1;
     }
-    function G() {
+    function I() {
       d.value = !d.value;
     }
     function T(e) {
-      const l = e.target;
-      b.value && !b.value.contains(l) && (d.value = !1);
+      const s = e.target;
+      b.value && !b.value.contains(s) && (d.value = !1);
     }
-    return _(
+    return M(
       () => r.view,
-      (e, l) => {
-        if (l === "month" && (e === "week" || e === "day" || e === "year")) {
+      (e, s) => {
+        if (s === "month" && (e === "week" || e === "day" || e === "year")) {
           const a = w(r.selectedRange);
-          s.value = a ?? /* @__PURE__ */ new Date();
+          l.value = a ?? /* @__PURE__ */ new Date();
         }
-        if (l === "week" && e === "day") {
+        if (s === "week" && e === "day") {
           const a = w(r.selectedRange);
-          a && (s.value = a);
+          a && (l.value = a);
         }
-        (e === "week" || e === "day") && !r.selectedRange && (s.value = /* @__PURE__ */ new Date()), A();
+        (e === "week" || e === "day") && !r.selectedRange && (l.value = /* @__PURE__ */ new Date()), R();
       },
       { immediate: !0 }
-    ), _(s, () => {
-      A();
-    }, { immediate: !0 }), _(() => r.selectedRange, (e) => {
+    ), M(l, () => {
+      R();
+    }, { immediate: !0 }), M(() => r.selectedRange, (e) => {
       if (r.view !== "month" && !k && e && e.length) {
-        const l = w(e);
-        if (!l) return;
-        h(s.value) !== h(l) && (s.value = l);
+        const s = w(e);
+        if (!s) return;
+        h(l.value) !== h(s) && (l.value = s);
       }
-    }, { immediate: !0 }), K(() => {
+    }, { immediate: !0 }), P(() => {
       document.addEventListener("click", T);
-    }), P(() => {
+    }), q(() => {
       document.removeEventListener("click", T);
-    }), (e, l) => (i(), o("header", de, [
-      t("h1", ce, [
-        t("time", { datetime: Z.value }, c(V.value), 9, ue)
+    }), (e, s) => (i(), o("header", ce, [
+      t("h1", ue, [
+        t("time", { datetime: j.value }, u(Z.value), 9, me)
       ]),
       t("div", ge, [
-        t("div", me, [
+        t("div", ve, [
           t("button", {
-            onClick: j,
+            onClick: H,
             type: "button",
             class: "sl-flex sl-h-9 sl-w-12 sl-items-center sl-justify-center sl-rounded-l-md sl-border-y sl-border-l sl-border-gray-300 dark:sl-border-slate-600 sl-pr-1 sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-500 dark:hover:sl-text-slate-300 focus:sl-relative md:sl-w-9 md:sl-pr-0 md:hover:sl-bg-gray-50 dark:md:hover:sl-bg-slate-700"
           }, [
-            t("span", ve, "Previous " + c(n.view), 1),
-            u(C(oe), {
+            t("span", ye, "Previous " + u(n.view), 1),
+            m(_(ie), {
               class: "sl-h-5 sl-w-5",
               "aria-hidden": "true"
             })
           ]),
           t("button", {
-            onClick: Y,
+            onClick: L,
             type: "button",
             class: "sl-hidden sl-border-y sl-border-gray-300 dark:sl-border-slate-600 sl-px-3.5 sl-text-sm sl-font-semibold sl-text-gray-800 dark:sl-text-slate-200 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700 focus:sl-relative md:sl-block"
           }, " Today "),
-          l[0] || (l[0] = t("span", { class: "sl-relative sl--mx-px sl-h-5 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600 md:sl-hidden" }, null, -1)),
+          s[0] || (s[0] = t("span", { class: "sl-relative sl--mx-px sl-h-5 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600 md:sl-hidden" }, null, -1)),
           t("button", {
-            onClick: H,
+            onClick: W,
             type: "button",
             class: "sl-flex sl-h-9 sl-w-12 sl-items-center sl-justify-center sl-rounded-r-md sl-border-y sl-border-r sl-border-gray-300 dark:sl-border-slate-600 sl-pl-1 sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-500 dark:hover:sl-text-slate-300 focus:sl-relative md:sl-w-9 md:sl-pl-0 md:hover:sl-bg-gray-50 dark:md:hover:sl-bg-slate-700"
           }, [
-            t("span", ye, "Next " + c(n.view), 1),
-            u(C(ne), {
+            t("span", he, "Next " + u(n.view), 1),
+            m(_(oe), {
               class: "sl-h-5 sl-w-5",
               "aria-hidden": "true"
             })
           ])
         ]),
-        t("div", he, [
-          t("div", fe, [
-            u(se, {
+        t("div", fe, [
+          t("div", be, [
+            m(ae, {
               name: "calendar-view",
               items: v,
-              "model-value": E.value,
-              "onUpdate:modelValue": O,
+              "model-value": O.value,
+              "onUpdate:modelValue": V,
               "item-key": "id",
               "item-text": "label",
               placeholder: "Select view"
             }, null, 8, ["model-value"])
           ]),
-          e.$slots.actions ? (i(), o(B, { key: 0 }, [
-            l[1] || (l[1] = t("div", { class: "sl-mx-6 sl-h-6 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600" }, null, -1)),
+          e.$slots.actions ? (i(), o(A, { key: 0 }, [
+            s[1] || (s[1] = t("div", { class: "sl-mx-6 sl-h-6 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600" }, null, -1)),
             S(e.$slots, "actions")
-          ], 64)) : n.showActionButton ? (i(), o(B, { key: 1 }, [
-            l[2] || (l[2] = t("div", { class: "sl-mx-6 sl-h-6 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600" }, null, -1)),
-            u(le, {
+          ], 64)) : n.showActionButton ? (i(), o(A, { key: 1 }, [
+            s[2] || (s[2] = t("div", { class: "sl-mx-6 sl-h-6 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600" }, null, -1)),
+            m(se, {
               "center-label": "",
               type: "button",
-              onButtonClick: R,
+              onButtonClick: Y,
               size: "sm"
             }, {
-              default: $(() => [
-                q(c(n.actionLabel), 1)
+              default: U(() => [
+                J(u(n.actionLabel), 1)
               ]),
               _: 1
             })
-          ], 64)) : M("", !0),
+          ], 64)) : C("", !0),
           S(e.$slots, "filters")
         ]),
         t("div", {
@@ -267,16 +267,16 @@ const de = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-b
           ref: b
         }, [
           t("button", {
-            onClick: G,
+            onClick: I,
             class: "sl--mx-2 sl-flex sl-items-center sl-rounded-full sl-border sl-border-transparent sl-p-2 sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-500 dark:hover:sl-text-slate-300"
           }, [
-            l[3] || (l[3] = t("span", { class: "sl-sr-only" }, "Open menu", -1)),
-            u(C(ie), {
+            s[3] || (s[3] = t("span", { class: "sl-sr-only" }, "Open menu", -1)),
+            m(_(de), {
               class: "sl-h-5 sl-w-5",
               "aria-hidden": "true"
             })
           ]),
-          u(J, {
+          m(Q, {
             "enter-active-class": "sl-transition sl-ease-out sl-duration-100",
             "enter-from-class": "sl-transform sl-opacity-0 sl-scale-95",
             "enter-to-class": "sl-transform sl-opacity-100 sl-scale-100",
@@ -284,35 +284,35 @@ const de = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-b
             "leave-from-class": "sl-transform sl-opacity-100 sl-scale-100",
             "leave-to-class": "sl-transform sl-opacity-0 sl-scale-95"
           }, {
-            default: $(() => [
-              Q(t("div", be, [
-                n.showActionButton ? (i(), o("div", ke, [
+            default: U(() => [
+              X(t("div", ke, [
+                n.showActionButton ? (i(), o("div", we, [
                   t("button", {
-                    onClick: R,
+                    onClick: Y,
                     class: "sl-block sl-w-full sl-px-4 sl-py-2 sl-text-left sl-text-sm sl-text-gray-700 dark:sl-text-slate-200 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700"
-                  }, c(n.actionLabel), 1)
-                ])) : M("", !0),
+                  }, u(n.actionLabel), 1)
+                ])) : C("", !0),
                 t("div", { class: "sl-py-1" }, [
                   t("button", {
-                    onClick: Y,
+                    onClick: L,
                     class: "sl-block sl-w-full sl-px-4 sl-py-2 sl-text-left sl-text-sm sl-text-gray-700 dark:sl-text-slate-200 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700"
                   }, " Go to today ")
                 ]),
-                t("div", we, [
-                  (i(), o(B, null, X(v, (a) => t("button", {
+                t("div", xe, [
+                  (i(), o(A, null, ee(v, (a) => t("button", {
                     key: a.id,
-                    onClick: (x) => W(a.id),
-                    class: ee([
+                    onClick: (x) => G(a.id),
+                    class: te([
                       n.view === a.id ? "sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-800 dark:sl-text-slate-100" : "sl-text-gray-700 dark:sl-text-slate-300",
                       "sl-block sl-w-full sl-px-4 sl-py-2 sl-text-left sl-text-sm hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700"
                     ])
-                  }, c(a.label), 11, xe)), 64))
+                  }, u(a.label), 11, pe)), 64))
                 ]),
-                e.$slots["mobile-menu-items"] ? (i(), o("div", pe, [
+                e.$slots["mobile-menu-items"] ? (i(), o("div", De, [
                   S(e.$slots, "mobile-menu-items")
-                ])) : M("", !0)
+                ])) : C("", !0)
               ], 512), [
-                [te, d.value]
+                [le, d.value]
               ])
             ]),
             _: 3
@@ -325,4 +325,4 @@ const de = { class: "sl-flex sl-items-center sl-justify-between sl-border-b sl-b
 export {
   Be as _
 };
-//# sourceMappingURL=CalendarHeader.vue_vue_type_script_setup_true_lang-DRwe4rw8.js.map
+//# sourceMappingURL=CalendarHeader.vue_vue_type_script_setup_true_lang-P5ypRyGV.js.map

package/dist/CalendarHeader.vue_vue_type_script_setup_true_lang-P5ypRyGV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.vue_vue_type_script_setup_true_lang-P5ypRyGV.js","sources":["../node_modules/@heroicons/vue/20/solid/esm/ChevronLeftIcon.js","../node_modules/@heroicons/vue/20/solid/esm/EllipsisHorizontalIcon.js","../src/components/calendars/CalendarHeader.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", {\n      \"fill-rule\": \"evenodd\",\n      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\",\n      \"clip-rule\": \"evenodd\"\n    })\n  ]))\n}","import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", { d: \"M3 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z\" })\n  ]))\n}","<!--\n  @component CalendarHeader\n  @description Calendar navigation header with view selector, navigation controls, and Today button.\n  \n  Features:\n  - Navigation arrows for prev/next period\n  - Today button to jump to current date\n  - View selector dropdown (Day/Week/Month/Year)\n  - Dynamic header display based on current view\n  - Support for action buttons and filters slots\n  \n  @example\n  <CalendarHeader\n    :view=\"'month'\"\n    :selected-range=\"days\"\n    @change-range=\"handleRangeChange\"\n    @change-view=\"handleViewChange\"\n  />\n-->\n<template>\n  <header class=\"sl-flex sl-items-center sl-justify-between sl-border-b sl-border-gray-200 dark:sl-border-slate-700 sl-pl-6 sl-py-4 lg:sl-flex-none sl-bg-white dark:sl-bg-slate-900\">\n    <!-- Header Title -->\n    <h1 class=\"sl-text-base sl-font-semibold sl-leading-6 sl-text-gray-800 dark:sl-text-slate-200\">\n      <time :datetime=\"dateTime\">{{ displayHeader }}</time>\n    </h1>\n    \n    <div class=\"sl-flex sl-items-center\">\n      <!-- Navigation Controls -->\n      <div class=\"sl-relative sl-flex sl-items-center sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-sm md:sl-items-stretch\">\n        <!-- Previous Button -->\n        <button \n          @click=\"previousRange\" \n          type=\"button\"\n          class=\"sl-flex sl-h-9 sl-w-12 sl-items-center sl-justify-center sl-rounded-l-md sl-border-y sl-border-l sl-border-gray-300 dark:sl-border-slate-600 sl-pr-1 sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-500 dark:hover:sl-text-slate-300 focus:sl-relative md:sl-w-9 md:sl-pr-0 md:hover:sl-bg-gray-50 dark:md:hover:sl-bg-slate-700\"\n        >\n          <span class=\"sl-sr-only\">Previous {{ view }}</span>\n          <ChevronLeftIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n        </button>\n        \n        <!-- Today Button -->\n        <button \n          @click=\"goToToday\" \n          type=\"button\"\n          class=\"sl-hidden sl-border-y sl-border-gray-300 dark:sl-border-slate-600 sl-px-3.5 sl-text-sm sl-font-semibold sl-text-gray-800 dark:sl-text-slate-200 hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700 focus:sl-relative md:sl-block\"\n        >\n          Today\n        </button>\n        \n        <span class=\"sl-relative sl--mx-px sl-h-5 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600 md:sl-hidden\" />\n        \n        <!-- Next Button -->\n        <button \n          @click=\"nextRange\" \n          type=\"button\"\n          class=\"sl-flex sl-h-9 sl-w-12 sl-items-center sl-justify-center sl-rounded-r-md sl-border-y sl-border-r sl-border-gray-300 dark:sl-border-slate-600 sl-pl-1 sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-500 dark:hover:sl-text-slate-300 focus:sl-relative md:sl-w-9 md:sl-pl-0 md:hover:sl-bg-gray-50 dark:md:hover:sl-bg-slate-700\"\n        >\n          <span class=\"sl-sr-only\">Next {{ view }}</span>\n          <ChevronRightIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n        </button>\n    </div>\n      \n      <!-- Desktop View Selector and Actions -->\n      <div class=\"sl-hidden md:sl-ml-4 md:sl-flex md:sl-items-center\">\n        <!-- View Selector using SelectInput -->\n        <div class=\"sl-w-36\">\n      <SelectInput\n            name=\"calendar-view\"\n        :items=\"viewOptions\"\n            :model-value=\"selectedViewOption\"\n            @update:model-value=\"handleViewSelection\"\n            item-key=\"id\"\n            item-text=\"label\"\n        placeholder=\"Select view\"\n          />\n        </div>\n        \n        <!-- Action Slot -->\n        <template v-if=\"$slots.actions\">\n          <div class=\"sl-mx-6 sl-h-6 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600\" />\n          <slot name=\"actions\" />\n        </template>\n        <template v-else-if=\"showActionButton\">\n          <div class=\"sl-mx-6 sl-h-6 sl-w-px sl-bg-gray-300 dark:sl-bg-slate-600\" />\n          <UiButton center-label type=\"button\" @button-click=\"handleAction\" size=\"sm\">\n            {{ actionLabel }}\n          </UiButton>\n        </template>\n        \n        <!-- Filters Slot -->\n        <slot name=\"filters\" />\n      </div>\n      \n      <!-- Mobile Menu -->\n      <div class=\"sl-relative sl-ml-6 md:sl-hidden\" ref=\"mobileMenuRef\">\n        <button\n          @click=\"toggleMobileMenu\"\n          class=\"sl--mx-2 sl-flex sl-items-center sl-rounded-full sl-border sl-border-transparent sl-p-2 sl-text-gray-400 dark:sl-text-slate-400 hover:sl-text-gray-500 dark:hover:sl-text-slate-300\"\n        >\n          <span class=\"sl-sr-only\">Open menu</span>\n          <EllipsisHorizontalIcon class=\"sl-h-5 sl-w-5\" aria-hidden=\"true\" />\n        </button>\n        \n        <Transition\n          enter-active-class=\"sl-transition sl-ease-out sl-duration-100\"\n          enter-from-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n          enter-to-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n          leave-active-class=\"sl-transition sl-ease-in sl-duration-75\"\n          leave-from-class=\"sl-transform sl-opacity-100 sl-scale-100\"\n          leave-to-class=\"sl-transform sl-opacity-0 sl-scale-95\"\n        >\n          <div\n            v-show=\"showMobileMenu\"\n            class=\"sl-absolute sl-right-0 sl-z-10 sl-mt-3 sl-w-36 sl-origin-top-right sl-divide-y sl-divide-gray-100 dark:sl-divide-slate-700 sl-overflow-hidden sl-rounded-md sl-bg-white dark:sl-bg-slate-800 sl-shadow-lg sl-ring-1 sl-ring-black dark:sl-ring-slate-600 sl-ring-opacity-5 focus:sl-outline-none\"\n          >\n            <!-- Actions -->\n            <div v-if=\"showActionButton\" class=\"sl-py-1\">\n              <button\n                @click=\"handleAction\"\n                class=\"sl-block sl-w-full sl-px-4 sl-py-2 sl-text-left sl-text-sm sl-text-gray-700 dark:sl-text-slate-200 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700\"\n              >\n                {{ actionLabel }}\n              </button>\n            </div>\n            \n            <!-- Today -->\n            <div class=\"sl-py-1\">\n              <button\n                @click=\"goToToday\"\n                class=\"sl-block sl-w-full sl-px-4 sl-py-2 sl-text-left sl-text-sm sl-text-gray-700 dark:sl-text-slate-200 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700\"\n              >\n                Go to today\n              </button>\n            </div>\n            \n            <!-- View Options -->\n            <div class=\"sl-py-1\">\n              <button\n                v-for=\"option in viewOptions\"\n                :key=\"option.id\"\n                @click=\"changeView(option.id)\"\n                :class=\"[\n                  view === option.id ? 'sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-800 dark:sl-text-slate-100' : 'sl-text-gray-700 dark:sl-text-slate-300',\n                  'sl-block sl-w-full sl-px-4 sl-py-2 sl-text-left sl-text-sm hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700'\n                ]\"\n              >\n                {{ option.label }}\n              </button>\n            </div>\n            \n            <!-- Mobile Menu Items Slot -->\n            <div v-if=\"$slots['mobile-menu-items']\" class=\"sl-py-1\">\n              <slot name=\"mobile-menu-items\" />\n            </div>\n          </div>\n        </Transition>\n      </div>\n    </div>\n  </header>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted, onUnmounted, type PropType } from 'vue';\nimport { ChevronLeftIcon, ChevronRightIcon, EllipsisHorizontalIcon } from '@heroicons/vue/20/solid';\nimport UiButton from '@/components/UiButton.vue';\nimport SelectInput from '@/components/inputs/SelectInput.vue';\nimport type { CalendarDay, Month } from '@/utils/calendar';\nimport { \n  generateMonthDays, \n  generateWeekDays, \n  generateYearDays,\n  toLocalDateKey,\n  parseLocalDate\n} from '@/utils/calendar';\n\ntype CalendarViewType = 'day' | 'week' | 'month' | 'year';\n\nconst props = defineProps({\n  /** Current view mode */\n  view: {\n    type: String as PropType<CalendarViewType>,\n    default: 'month',\n    validator: (value: string) => ['day', 'week', 'month', 'year'].includes(value),\n  },\n  /** Currently displayed date range */\n  selectedRange: {\n    type: Array as PropType<CalendarDay[] | Month[] | null>,\n    default: null,\n  },\n  /** Label for the action button */\n  actionLabel: {\n    type: String,\n    default: 'Add event',\n  },\n  /** Whether to show the action button */\n  showActionButton: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'changeRange', days: CalendarDay[] | Month[]): void;\n  (e: 'changeView', view: CalendarViewType): void;\n  (e: 'action'): void;\n}>();\n\n// View options\nconst viewOptions = [\n  { id: 'day' as CalendarViewType, label: 'Day view' },\n  { id: 'week' as CalendarViewType, label: 'Week view' },\n  { id: 'month' as CalendarViewType, label: 'Month view' },\n  { id: 'year' as CalendarViewType, label: 'Year view' },\n];\n\n// UI State\nconst showMobileMenu = ref(false);\nconst mobileMenuRef = ref<HTMLElement | null>(null);\n\n// Internal date state\nconst systemToday = new Date();\nconst normalizedToday = new Date(systemToday.getFullYear(), systemToday.getMonth(), 1);\nconst currentDate = ref(props.view === 'month' ? normalizedToday : new Date());\nconst internalDays = ref<CalendarDay[] | Month[]>([]);\n\n// Flag to avoid recursive updates\nlet isUpdatingInternally = false;\n\n// Selected view option for SelectInput\nconst selectedViewOption = computed(() => {\n  return viewOptions.find(opt => opt.id === props.view) || viewOptions[2]; // Default to month\n});\n\n// Handle view selection from SelectInput\nfunction handleViewSelection(option: { id: CalendarViewType; label: string }) {\n  if (option && option.id) {\n    emit('changeView', option.id);\n  }\n}\n\nconst displayHeader = computed(() => {\n  switch (props.view) {\n    case 'day':\n      return currentDate.value.toDateString();\n    case 'week':\n    case 'month':\n      return currentDate.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n    case 'year':\n      return currentDate.value.getFullYear().toString();\n    default:\n      return currentDate.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });\n  }\n});\n\nconst dateTime = computed(() => toLocalDateKey(currentDate.value));\n\n// Helper to find best anchor date from range\nfunction getBestAnchorDateFromRange(range: CalendarDay[] | Month[] | null | undefined): Date | null {\n  if (!range || !Array.isArray(range) || range.length === 0) return null;\n  \n  // Check if it's an array of CalendarDay objects\n  const isDaysArray = range.length > 0 && 'date' in range[0];\n  const days = isDaysArray ? (range as CalendarDay[]) : (range as Month[]).flatMap(month => month.days);\n\n  const selected = days.find((d) => typeof d?.date === 'string' && d?.isSelected === true);\n  if (selected) return parseLocalDate(selected.date);\n\n  const today = days.find((d) => typeof d?.date === 'string' && d?.isToday === true);\n  if (today) return parseLocalDate(today.date);\n\n  const first = days[0];\n  if (first && typeof first.date === 'string') return parseLocalDate(first.date);\n\n  return null;\n}\n\n// Navigation methods\nfunction previousRange() {\n  let newDate = new Date(currentDate.value);\n  switch (props.view) {\n    case 'day':\n      newDate.setDate(newDate.getDate() - 1);\n      break;\n    case 'week':\n      newDate.setDate(newDate.getDate() - 7);\n      break;\n    case 'month':\n      newDate = new Date(newDate.getFullYear(), newDate.getMonth() - 1, 1);\n      break;\n    case 'year':\n      newDate.setFullYear(newDate.getFullYear() - 1);\n      break;\n  }\n  currentDate.value = newDate;\n}\n\nfunction nextRange() {\n  let newDate = new Date(currentDate.value);\n  switch (props.view) {\n    case 'day':\n      newDate.setDate(newDate.getDate() + 1);\n      break;\n    case 'week':\n      newDate.setDate(newDate.getDate() + 7);\n      break;\n    case 'month':\n      newDate = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 1);\n      break;\n    case 'year':\n      newDate.setFullYear(newDate.getFullYear() + 1);\n      break;\n  }\n  currentDate.value = newDate;\n}\n\nfunction goToToday() {\n  let today = new Date();\n  if (props.view === 'month') {\n    today = new Date(today.getFullYear(), today.getMonth(), 1);\n  }\n  currentDate.value = today;\n  showMobileMenu.value = false;\n}\n\nfunction changeView(newView: CalendarViewType) {\n  showMobileMenu.value = false;\n  if (newView) {\n    emit('changeView', newView);\n  }\n}\n\nfunction handleAction() {\n  showMobileMenu.value = false;\n  emit('action');\n}\n\n// Update days based on currentDate and view\nfunction updateDays() {\n  let generatedDays: CalendarDay[] | Month[] = [];\n  const todayStr = toLocalDateKey(currentDate.value);\n  switch (props.view) {\n    case 'day':\n      generatedDays = generateWeekDays(currentDate.value).filter(\n        (day) => day.date === todayStr\n      );\n      break;\n    case 'week':\n      generatedDays = generateWeekDays(currentDate.value);\n      break;\n    case 'month':\n      generatedDays = generateMonthDays(currentDate.value, 0);\n      break;\n    case 'year':\n      generatedDays = generateYearDays(currentDate.value);\n      break;\n  }\n  internalDays.value = generatedDays;\n  isUpdatingInternally = true;\n  emit('changeRange', generatedDays);\n  isUpdatingInternally = false;\n}\n\n// Menu toggle functions\nfunction toggleMobileMenu() {\n  showMobileMenu.value = !showMobileMenu.value;\n}\n\n// Click outside handler\nfunction handleClickOutside(event: MouseEvent) {\n  const target = event.target as Node;\n  \n  if (mobileMenuRef.value && !mobileMenuRef.value.contains(target)) {\n    showMobileMenu.value = false;\n  }\n}\n\n// Watchers\nwatch(\n  () => props.view,\n  (newView, oldView) => {\n    if (oldView === 'month' && (newView === 'week' || newView === 'day' || newView === 'year')) {\n      const anchor = getBestAnchorDateFromRange(props.selectedRange);\n      currentDate.value = anchor ?? new Date();\n    }\n\n    if (oldView === 'week' && newView === 'day') {\n      const anchor = getBestAnchorDateFromRange(props.selectedRange);\n      if (anchor) currentDate.value = anchor;\n    }\n\n    if ((newView === 'week' || newView === 'day') && !props.selectedRange) {\n      currentDate.value = new Date();\n    }\n\n    updateDays();\n  },\n  { immediate: true }\n);\n\nwatch(currentDate, () => {\n  updateDays();\n}, { immediate: true });\n\nwatch(() => props.selectedRange, (newRange) => {\n  if (props.view !== 'month' && !isUpdatingInternally && newRange && newRange.length) {\n    const anchor = getBestAnchorDateFromRange(newRange);\n    if (!anchor) return;\n    if (toLocalDateKey(currentDate.value) !== toLocalDateKey(anchor)) {\n      currentDate.value = anchor;\n    }\n  }\n}, { immediate: true });\n\n// Lifecycle\nonMounted(() => {\n  document.addEventListener('click', handleClickOutside);\n});\n\nonUnmounted(() => {\n  document.removeEventListener('click', handleClickOutside);\n});\n</script>\n\n<style scoped>\n</style>\n"],"names":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","props","__props","emit","__emit","viewOptions","showMobileMenu","ref","mobileMenuRef","systemToday","normalizedToday","currentDate","internalDays","isUpdatingInternally","selectedViewOption","computed","opt","handleViewSelection","option","displayHeader","dateTime","toLocalDateKey","getBestAnchorDateFromRange","range","days","month","selected","d","parseLocalDate","today","first","previousRange","newDate","nextRange","goToToday","changeView","newView","handleAction","updateDays","generatedDays","todayStr","generateWeekDays","day","generateMonthDays","generateYearDays","toggleMobileMenu","handleClickOutside","event","target","watch","oldView","anchor","newRange","onMounted","onUnmounted","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_createVNode","_unref","ChevronLeftIcon","_hoisted_7","ChevronRightIcon","_hoisted_8","_hoisted_9","SelectInput","$slots","_Fragment","_renderSlot","UiButton","EllipsisHorizontalIcon","_Transition","_withDirectives","_hoisted_10","_hoisted_11","_hoisted_12","_renderList","$event","_normalizeClass","_toDisplayString","_hoisted_13","_hoisted_14"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/CheckboxInput.vue_vue_type_script_setup_true_lang-BikR9rgi.js

@@ -0,0 +1,187 @@
+import { defineComponent as S, ref as f, watch as k, computed as $, createElementBlock as d, openBlock as n, createVNode as I, unref as o, withCtx as R, createElementVNode as i, withDirectives as T, normalizeClass as y, vModelCheckbox as z, createCommentVNode as v, toDisplayString as p } from "vue";
+import { useField as A } from "vee-validate";
+import { g as U } from "./id-DafBB_QF.js";
+import W from "./forms/FormFieldWrapper.js";
+const q = { class: "sl-w-full" }, G = { class: "sl-flex sl-items-start sl-gap-3" }, J = { class: "sl-flex sl-h-6 sl-shrink-0 sl-items-center" }, K = { class: "sl-group group sl-grid sl-w-4 sl-h-4 sl-grid-cols-1" }, O = ["id", "aria-describedby", "name", "disabled"], P = { class: "sl-flex-1 sl-text-sm sl-leading-6" }, Q = ["for"], X = ["id"], Y = ["innerHTML"], Z = { key: 1 }, te = /* @__PURE__ */ S({
+  __name: "CheckboxInput",
+  props: {
+    name: {},
+    label: {},
+    description: {},
+    disabled: { type: Boolean },
+    rules: {},
+    immediate: { type: Boolean, default: !0 },
+    isDescriptionHtml: { type: Boolean, default: !1 },
+    successMessage: {},
+    modelValue: { type: Boolean },
+    tertiaryLabel: {},
+    showErrors: { type: Boolean, default: !1 },
+    layout: { default: "stacked" },
+    boxShadow: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "blur", "focus"],
+  setup(s, { expose: x, emit: w }) {
+    const l = s, b = w, c = f(), C = f(null), r = U(`sl-${l.name}`), { value: B, errorMessage: m, handleChange: h, handleBlur: V, meta: u } = A(
+      () => l.name,
+      l.rules,
+      {
+        type: "checkbox",
+        initialValue: l.modelValue || !1
+      }
+    ), t = f(l.modelValue || !1);
+    k(
+      () => l.modelValue,
+      (e) => {
+        e !== void 0 && e !== t.value && (t.value = e, B.value = e);
+      },
+      { immediate: !0 }
+    ), k(
+      t,
+      (e) => {
+        b("update:modelValue", e), l.immediate && h(e);
+      }
+    );
+    const M = $(() => {
+      const e = [
+        "sl-h-4",
+        "sl-w-4",
+        "sl-rounded",
+        "sl-border-gray-300",
+        "sl-text-stachelock-600",
+        "focus:sl-ring-stachelock-600",
+        "focus:sl-ring-2",
+        "focus:sl-ring-offset-2",
+        "sl-transition-all",
+        "sl-duration-200"
+      ];
+      return l.disabled ? e.push(
+        "sl-cursor-not-allowed",
+        "sl-opacity-50",
+        "sl-bg-gray-50"
+      ) : e.push(
+        "sl-cursor-pointer",
+        "hover:sl-border-gray-400"
+      ), m.value ? e.push(
+        "sl-border-red-300",
+        "focus:sl-ring-red-600"
+      ) : u.valid && u.touched && e.push(
+        "sl-border-green-300",
+        "focus:sl-ring-green-500"
+      ), e.join(" ");
+    }), H = (e) => {
+      const a = e.target;
+      t.value = a.checked, l.immediate || h(a.checked);
+    }, g = () => {
+      l.disabled || (t.value = !t.value);
+    }, L = () => {
+      c.value?.focus();
+    }, D = () => {
+      c.value?.blur();
+    }, j = (e) => {
+      l.immediate || h(t.value), V(e), b("blur", e);
+    }, E = (e) => {
+      b("focus", e);
+    }, F = (e) => {
+      l.disabled || e.target.tagName === "A" || g();
+    };
+    return x({
+      focus: L,
+      blur: D,
+      toggle: g,
+      checkboxRef: c
+    }), (e, a) => (n(), d("div", q, [
+      I(W, {
+        id: o(r),
+        name: s.name,
+        label: s.layout === "stacked" ? s.label : "",
+        disabled: s.disabled,
+        optional: !s.rules,
+        "tertiary-label": s.tertiaryLabel,
+        "box-shadow": s.boxShadow,
+        "error-message": o(m),
+        "success-message": s.successMessage,
+        "is-valid": o(u).valid,
+        "is-touched": o(u).touched,
+        "show-errors": s.showErrors,
+        "show-valid-check": !1
+      }, {
+        default: R(() => [
+          i("div", G, [
+            i("div", J, [
+              i("div", K, [
+                T(i("input", {
+                  id: o(r),
+                  "aria-describedby": s.description ? `${o(r)}-description` : void 0,
+                  name: s.name,
+                  ref_key: "checkboxRef",
+                  ref: c,
+                  "onUpdate:modelValue": a[0] || (a[0] = (N) => t.value = N),
+                  type: "checkbox",
+                  disabled: s.disabled,
+                  class: y([
+                    "sl-col-start-1 sl-row-start-1 sl-w-full sl-h-full sl-appearance-none sl-rounded sl-border sl-border-gray-300 dark:sl-border-slate-600 sl-bg-white dark:sl-bg-slate-900",
+                    "checked:sl-border-stachelock-600 checked:sl-bg-stachelock-600",
+                    "indeterminate:sl-border-stachelock-600 indeterminate:sl-bg-stachelock-600",
+                    "focus-visible:sl-outline focus-visible:sl-outline-2 focus-visible:sl-outline-offset-2 focus-visible:sl-outline-stachelock-600 dark:focus-visible:sl-outline-offset-slate-900",
+                    "disabled:sl-border-gray-300 dark:disabled:sl-border-slate-700 disabled:sl-bg-gray-100 dark:disabled:sl-bg-slate-800 disabled:checked:sl-bg-gray-100 dark:disabled:checked:sl-bg-slate-700",
+                    M.value
+                  ]),
+                  onChange: H,
+                  onFocus: E,
+                  onBlur: j
+                }, null, 42, O), [
+                  [z, t.value]
+                ]),
+                a[1] || (a[1] = i("svg", {
+                  class: "sl-pointer-events-none sl-col-start-1 sl-row-start-1 sl-w-3.5 sl-h-3.5 sl-self-center sl-justify-self-center sl-stroke-white",
+                  viewBox: "0 0 14 14",
+                  fill: "none"
+                }, [
+                  i("path", {
+                    class: "sl-opacity-0 group-has-[:checked]:sl-opacity-100",
+                    d: "M3 8L6 11L11 3.5",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  }),
+                  i("path", {
+                    class: "sl-opacity-0 group-has-[:indeterminate]:sl-opacity-100",
+                    d: "M3 7H11",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
+                  })
+                ], -1))
+              ])
+            ]),
+            i("div", P, [
+              s.layout === "inline" && s.label ? (n(), d("label", {
+                key: 0,
+                for: o(r),
+                class: "sl-font-medium sl-text-gray-900 dark:sl-text-white sl-cursor-pointer"
+              }, p(s.label), 9, Q)) : v("", !0),
+              s.description ? (n(), d("div", {
+                key: 1,
+                id: `${o(r)}-description`,
+                class: y(["sl-text-gray-600 dark:sl-text-slate-300", [s.layout === "inline" ? "" : "sl-mt-1", { "sl-cursor-pointer": !s.disabled }]]),
+                ref_key: "descriptionHtml",
+                ref: C,
+                onClick: F
+              }, [
+                s.isDescriptionHtml ? (n(), d("div", {
+                  key: 0,
+                  innerHTML: s.description
+                }, null, 8, Y)) : (n(), d("span", Z, p(s.description), 1))
+              ], 10, X)) : v("", !0)
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched", "show-errors"])
+    ]));
+  }
+});
+export {
+  te as _
+};
+//# sourceMappingURL=CheckboxInput.vue_vue_type_script_setup_true_lang-BikR9rgi.js.map