@stachelock/ui 0.5.4 → 0.6.1

package/dist/{StepperPanels.vue_vue_type_script_setup_true_lang-D6Fv7iz3.js → StepperPanels.vue_vue_type_script_setup_true_lang-DPLQ9mQn.js}

@@ -1,62 +1,48 @@
-import { createElementBlock as t, openBlock as r, createElementVNode as e, defineComponent as b, ref as _, watch as v, Fragment as y, renderList as w, createCommentVNode as C, normalizeClass as a, createVNode as S, unref as j, toDisplayString as n } from "vue";
-function B(d, f) {
-  return r(), t("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon"
-  }, [
-    e("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"
-    })
-  ]);
-}
-const V = { "aria-label": "Progress" }, A = {
+import { defineComponent as p, ref as y, watch as x, createElementBlock as t, openBlock as r, createElementVNode as e, Fragment as _, renderList as w, createCommentVNode as C, normalizeClass as o, createVNode as S, unref as j, toDisplayString as n } from "vue";
+import { CheckIcon as V } from "@heroicons/vue/24/solid";
+const A = { "aria-label": "Progress" }, B = {
   role: "list",
   class: "sl-divide-y sl-divide-gray-300 dark:sl-divide-slate-600 sl-rounded-md sl-border sl-border-gray-300 dark:sl-border-slate-600 md:sl-flex md:sl-divide-y-0"
-}, L = ["onClick", "disabled"], N = { class: "sl-flex sl-items-center sl-px-6 sl-py-4 sl-text-sm sl-font-medium" }, P = { class: "sl-flex sl-h-10 sl-w-10 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-bg-stachelock-600 group-hover:sl-bg-stachelock-800 sl-transition-colors" }, $ = { class: "sl-ml-4 sl-text-sm sl-font-medium sl-text-gray-800 dark:sl-text-white" }, E = ["onClick", "disabled"], M = ["onClick", "disabled"], z = { class: "sl-flex sl-items-center sl-px-6 sl-py-4 sl-text-sm sl-font-medium" }, D = { class: "sl-text-gray-500 dark:sl-text-slate-400 group-hover:sl-text-gray-800 dark:group-hover:sl-text-white" }, F = { class: "sl-ml-4 sl-text-sm sl-font-medium sl-text-gray-500 dark:sl-text-slate-400 group-hover:sl-text-gray-800 dark:group-hover:sl-text-white" }, R = {
+}, L = ["onClick", "disabled"], N = { class: "sl-flex sl-items-center sl-px-6 sl-py-4 sl-text-sm sl-font-medium" }, P = { class: "sl-flex sl-h-10 sl-w-10 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-bg-stachelock-600 group-hover:sl-bg-stachelock-800 sl-transition-colors" }, $ = { class: "sl-ml-4 sl-text-sm sl-font-medium sl-text-gray-800 dark:sl-text-white" }, E = ["onClick", "disabled"], z = ["onClick", "disabled"], D = { class: "sl-flex sl-items-center sl-px-6 sl-py-4 sl-text-sm sl-font-medium" }, F = { class: "sl-text-gray-500 dark:sl-text-slate-400 group-hover:sl-text-gray-800 dark:group-hover:sl-text-white" }, M = { class: "sl-ml-4 sl-text-sm sl-font-medium sl-text-gray-500 dark:sl-text-slate-400 group-hover:sl-text-gray-800 dark:group-hover:sl-text-white" }, R = {
   key: 3,
   class: "sl-absolute sl-right-0 sl-top-0 sl-hidden sl-h-full sl-w-5 md:sl-block",
   "aria-hidden": "true"
-}, U = /* @__PURE__ */ b({
+}, q = /* @__PURE__ */ p({
   __name: "StepperPanels",
   props: {
     steps: {},
     step: {}
   },
   emits: ["update:value"],
-  setup(d, { emit: f }) {
-    const i = d, k = f, o = _(null), g = (l) => l.valid === void 0 ? "sl-border-stachelock-600 sl-text-stachelock-600 dark:sl-border-stachelock-400 dark:sl-text-stachelock-400" : l.valid === !1 ? "sl-border-red-500 sl-text-red-500" : "sl-border-green-500 sl-text-green-500", p = (l) => l.valid === void 0 ? "sl-text-stachelock-600 dark:sl-text-stachelock-400" : l.valid === !1 ? "sl-text-red-500" : "sl-text-green-500", m = (l) => l <= 0 ? !1 : i.steps[l - 1]?.valid === !0, u = (l) => {
-      l.disabled || l !== o.value && (o.value = l);
+  setup(c, { emit: k }) {
+    const d = c, v = k, a = y(null), m = (l) => l.valid === void 0 ? "sl-border-stachelock-600 sl-text-stachelock-600 dark:sl-border-stachelock-400 dark:sl-text-stachelock-400" : l.valid === !1 ? "sl-border-red-500 sl-text-red-500" : "sl-border-green-500 sl-text-green-500", b = (l) => l.valid === void 0 ? "sl-text-stachelock-600 dark:sl-text-stachelock-400" : l.valid === !1 ? "sl-text-red-500" : "sl-text-green-500", g = (l) => l <= 0 ? !1 : d.steps[l - 1]?.valid === !0, u = (l) => {
+      l.disabled || l !== a.value && (a.value = l);
     };
-    return v(() => o.value, (l) => {
-      l && k("update:value", l);
-    }, { deep: !0 }), v(() => i.steps, (l) => {
+    return x(() => a.value, (l) => {
+      l && v("update:value", l);
+    }, { deep: !0 }), x(() => d.steps, (l) => {
       if (Array.isArray(l) && l.length > 0)
-        if (i.step)
-          o.value = i.step;
+        if (d.step)
+          a.value = d.step;
         else {
-          const c = l.find((s) => s.status === "current");
-          o.value = c || l[0];
+          const i = l.find((s) => s.status === "current");
+          a.value = i || l[0];
         }
-    }, { deep: !0, immediate: !0 }), (l, c) => (r(), t("nav", V, [
-      e("ol", A, [
-        (r(!0), t(y, null, w(d.steps, (s, h) => (r(), t("li", {
+    }, { deep: !0, immediate: !0 }), (l, i) => (r(), t("nav", A, [
+      e("ol", B, [
+        (r(!0), t(_, null, w(c.steps, (s, f) => (r(), t("li", {
           key: s.name,
           class: "sl-relative md:sl-flex md:sl-flex-1"
         }, [
           s.status === "complete" ? (r(), t("button", {
             key: 0,
-            class: a(["sl-group sl-flex sl-w-full sl-items-center", s.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer"]),
-            onClick: (x) => u(s),
+            class: o(["sl-group sl-flex sl-w-full sl-items-center", s.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer"]),
+            onClick: (h) => u(s),
             disabled: s.disabled
           }, [
             e("span", N, [
               e("span", P, [
-                S(j(B), {
+                S(j(V), {
                   class: "sl-h-6 sl-w-6 sl-text-white",
                   "aria-hidden": "true"
                 })
@@ -65,35 +51,35 @@ const V = { "aria-label": "Progress" }, A = {
             ])
           ], 10, L)) : s.status === "current" ? (r(), t("button", {
             key: 1,
-            class: a(["sl-flex sl-items-center sl-px-6 sl-py-4 sl-text-sm sl-font-medium", s.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer"]),
+            class: o(["sl-flex sl-items-center sl-px-6 sl-py-4 sl-text-sm sl-font-medium", s.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer"]),
             "aria-current": "step",
-            onClick: (x) => u(s),
+            onClick: (h) => u(s),
             disabled: s.disabled
           }, [
             e("span", {
-              class: a(["sl-flex sl-h-10 sl-w-10 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-border-2", g(s)])
+              class: o(["sl-flex sl-h-10 sl-w-10 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-border-2", m(s)])
             }, [
               e("span", null, n(s.id), 1)
             ], 2),
             e("span", {
-              class: a(["sl-ml-4 sl-text-sm sl-font-medium", p(s)])
+              class: o(["sl-ml-4 sl-text-sm sl-font-medium", b(s)])
             }, n(s.name), 3)
           ], 10, E)) : (r(), t("button", {
             key: 2,
-            class: a(["sl-group sl-flex sl-items-center", s.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer"]),
-            onClick: (x) => u(s),
+            class: o(["sl-group sl-flex sl-items-center", s.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer"]),
+            onClick: (h) => u(s),
             disabled: s.disabled
           }, [
-            e("span", z, [
+            e("span", D, [
               e("span", {
-                class: a(["sl-flex sl-h-10 sl-w-10 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-border-2 sl-border-gray-300 dark:sl-border-slate-500 group-hover:sl-border-gray-400 dark:group-hover:sl-border-slate-400 sl-transition-colors", { "sl-animate-pulse": s.status === "next" && m(h) }])
+                class: o(["sl-flex sl-h-10 sl-w-10 sl-flex-shrink-0 sl-items-center sl-justify-center sl-rounded-full sl-border-2 sl-border-gray-300 dark:sl-border-slate-500 group-hover:sl-border-gray-400 dark:group-hover:sl-border-slate-400 sl-transition-colors", { "sl-animate-pulse": s.status === "next" && g(f) }])
               }, [
-                e("span", D, n(s.id), 1)
+                e("span", F, n(s.id), 1)
               ], 2),
-              e("span", F, n(s.name), 1)
+              e("span", M, n(s.name), 1)
             ])
-          ], 10, M)),
-          h !== d.steps.length - 1 ? (r(), t("div", R, [...c[0] || (c[0] = [
+          ], 10, z)),
+          f !== c.steps.length - 1 ? (r(), t("div", R, [...i[0] || (i[0] = [
             e("svg", {
               class: "sl-h-full sl-w-full sl-text-gray-300 dark:sl-text-slate-600",
               viewBox: "0 0 22 80",
@@ -114,6 +100,5 @@ const V = { "aria-label": "Progress" }, A = {
   }
 });
 export {
-  U as _
+  q as _
 };
-//# sourceMappingURL=StepperPanels.vue_vue_type_script_setup_true_lang-D6Fv7iz3.js.map

package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-D5Es9AjF.js

@@ -0,0 +1,200 @@
+import { defineComponent as D, ref as g, watch as E, computed as K, createElementBlock as a, openBlock as o, createVNode as w, unref as n, withCtx as V, createElementVNode as h, createCommentVNode as d, toDisplayString as r, normalizeClass as b, withKeys as M, withModifiers as B } from "vue";
+import { Switch as N } from "@headlessui/vue";
+import { useField as O } from "vee-validate";
+import { g as I } from "./id-DafBB_QF.js";
+import R from "./forms/FormFieldWrapper.js";
+const z = { class: "sl-w-full" }, U = { class: "sl-flex sl-items-center sl-justify-between sl-gap-4" }, W = {
+  key: 0,
+  class: "sl-flex-1"
+}, q = ["for"], A = ["innerHTML"], G = { key: 1 }, J = { class: "sl-sr-only" }, P = {
+  key: 1,
+  class: "sl-ml-3 sl-text-sm"
+}, Q = {
+  key: 0,
+  class: "sl-font-medium sl-text-gray-800 dark:sl-text-white"
+}, X = {
+  key: 1,
+  class: "sl-text-gray-500 dark:sl-text-slate-300"
+}, Y = {
+  key: 2,
+  class: "sl-flex-1"
+}, Z = {
+  key: 0,
+  class: "sl-mt-1 sl-text-sm sl-text-gray-600 dark:sl-text-slate-300"
+}, p = ["innerHTML"], ae = /* @__PURE__ */ D({
+  __name: "SwitchInput",
+  props: {
+    name: {},
+    modelValue: { type: Boolean },
+    label: {},
+    description: {},
+    disabled: { type: Boolean },
+    immediate: { type: Boolean, default: !1 },
+    boxShadow: { type: Boolean, default: !1 },
+    defaultValue: { type: Boolean, default: !1 },
+    hideMainLabel: { type: Boolean, default: !1 },
+    textTrue: {},
+    textFalse: {},
+    rules: {},
+    validateOnMount: { type: Boolean },
+    successMessage: {},
+    tertiaryLabel: {},
+    isDescriptionHtml: { type: Boolean, default: !1 },
+    showErrors: { type: Boolean, default: !1 },
+    layout: { default: "stacked" }
+  },
+  emits: ["update:modelValue", "blur", "focus"],
+  setup(e, { expose: L, emit: T }) {
+    const s = e, f = T, u = g(), m = I(`sl-${s.name}`), { value: C, errorMessage: F, handleChange: y, handleBlur: H, meta: x } = O(
+      () => s.name,
+      s.rules,
+      {
+        type: "checkbox",
+        validateOnMount: s.validateOnMount,
+        initialValue: s.modelValue ?? s.defaultValue,
+        syncVModel: !0
+      }
+    ), t = g(s.modelValue ?? s.defaultValue);
+    E(
+      () => s.modelValue,
+      (l) => {
+        if (l !== void 0 && l !== t.value) {
+          const i = !!l;
+          t.value = i, C.value = i;
+        }
+      },
+      { immediate: !0 }
+    );
+    const S = K(() => {
+      const l = [
+        "sl-relative",
+        "sl-inline-flex",
+        "sl-items-center",
+        "sl-h-6",
+        "sl-w-11",
+        "sl-flex-shrink-0",
+        "sl-cursor-pointer",
+        "sl-rounded-full",
+        "sl-border-2",
+        "sl-border-transparent",
+        "sl-transition-colors",
+        "sl-duration-200",
+        "sl-ease-in-out",
+        "focus:sl-outline-none",
+        "focus:sl-ring-2",
+        "focus:sl-ring-stachelock-600",
+        "focus:sl-ring-offset-2",
+        "dark:focus:sl-ring-offset-slate-900"
+      ];
+      return s.disabled && l.push(
+        "sl-cursor-not-allowed",
+        "sl-opacity-50"
+      ), t.value ? l.push("sl-bg-stachelock-600") : l.push("sl-bg-gray-200", "dark:sl-bg-slate-600"), l.join(" ");
+    }), v = (l) => {
+      s.disabled || (t.value = l, s.immediate && y(l), f("update:modelValue", l));
+    }, $ = (l) => {
+      s.immediate || y(t.value), H(l), f("blur", l);
+    }, j = (l) => {
+      f("focus", l);
+    }, c = () => {
+      s.disabled || v(!t.value);
+    };
+    return L({
+      toggle: c,
+      value: t,
+      focus: () => {
+        const l = u.value;
+        (l && typeof l == "object" && "$el" in l ? l.$el : l)?.focus?.();
+      },
+      blur: () => {
+        const l = u.value;
+        (l && typeof l == "object" && "$el" in l ? l.$el : l)?.blur?.();
+      },
+      switchRef: u
+    }), (l, i) => (o(), a("div", z, [
+      w(R, {
+        id: n(m),
+        name: e.name,
+        label: e.layout === "stacked" && !e.hideMainLabel ? e.label : "",
+        disabled: e.disabled,
+        optional: !e.rules,
+        "tertiary-label": e.tertiaryLabel,
+        "box-shadow": e.boxShadow,
+        "error-message": n(F),
+        "success-message": e.successMessage,
+        "is-valid": n(x).valid,
+        "is-touched": n(x).touched,
+        "show-errors": e.showErrors,
+        "show-valid-check": !1
+      }, {
+        default: V(() => [
+          h("div", U, [
+            e.layout === "inline" ? (o(), a("div", W, [
+              e.label && !e.hideMainLabel ? (o(), a("label", {
+                key: 0,
+                for: n(m),
+                class: "sl-block sl-text-sm sl-font-medium sl-text-gray-900 dark:sl-text-white sl-cursor-pointer"
+              }, r(e.label), 9, q)) : d("", !0),
+              e.description ? (o(), a("div", {
+                key: 1,
+                class: b(["sl-mt-1 sl-text-sm sl-text-gray-600 dark:sl-text-slate-300", { "sl-cursor-pointer": !e.disabled }]),
+                onClick: i[0] || (i[0] = (k) => !e.disabled && c())
+              }, [
+                e.isDescriptionHtml ? (o(), a("div", {
+                  key: 0,
+                  innerHTML: e.description
+                }, null, 8, A)) : (o(), a("span", G, r(e.description), 1))
+              ], 2)) : d("", !0)
+            ])) : d("", !0),
+            w(n(N), {
+              id: n(m),
+              ref_key: "switchRef",
+              ref: u,
+              modelValue: t.value,
+              "onUpdate:modelValue": [
+                i[1] || (i[1] = (k) => t.value = k),
+                v
+              ],
+              disabled: e.disabled,
+              class: b([
+                S.value,
+                { "sl-shadow-md": e.boxShadow }
+              ]),
+              onFocus: j,
+              onBlur: $,
+              onKeydown: [
+                M(B(c, ["prevent"]), ["space"]),
+                M(B(c, ["prevent"]), ["enter"])
+              ]
+            }, {
+              default: V(() => [
+                h("span", J, r(e.label), 1),
+                h("span", {
+                  class: b([
+                    t.value ? "sl-translate-x-5" : "sl-translate-x-0",
+                    "sl-pointer-events-none sl-inline-block sl-h-5 sl-w-5 sl-transform sl-rounded-full sl-bg-white sl-shadow sl-ring-0 sl-transition sl-duration-200 sl-ease-in-out sl-relative"
+                  ])
+                }, null, 2)
+              ]),
+              _: 1
+            }, 8, ["id", "modelValue", "disabled", "class", "onKeydown"]),
+            e.textTrue || e.textFalse ? (o(), a("span", P, [
+              t.value && e.textTrue ? (o(), a("span", Q, r(e.textTrue), 1)) : !t.value && e.textFalse ? (o(), a("span", X, r(e.textFalse), 1)) : d("", !0)
+            ])) : d("", !0),
+            e.description && e.layout === "stacked" ? (o(), a("div", Y, [
+              e.isDescriptionHtml ? (o(), a("p", {
+                key: 1,
+                class: "sl-mt-1 sl-text-sm sl-text-gray-600 dark:sl-text-slate-300",
+                innerHTML: e.description
+              }, null, 8, p)) : (o(), a("p", Z, r(e.description), 1))
+            ])) : d("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched", "show-errors"])
+    ]));
+  }
+});
+export {
+  ae as _
+};

package/dist/{SwitchInputGroup.vue_vue_type_script_setup_true_lang-CK9JWl4F.js → SwitchInputGroup.vue_vue_type_script_setup_true_lang-DigNYqVZ.js}

@@ -1,5 +1,5 @@
 import { defineComponent as D, ref as U, watch as y, createElementBlock as a, openBlock as t, createElementVNode as C, createCommentVNode as r, toDisplayString as c, normalizeClass as v, Fragment as g, renderList as b, createVNode as p } from "vue";
-import { _ as f } from "./SwitchInput.vue_vue_type_script_setup_true_lang-C88FcxuK.js";
+import { _ as f } from "./SwitchInput.vue_vue_type_script_setup_true_lang-D5Es9AjF.js";
 const L = {
   key: 0,
   class: "sl-bg-white dark:sl-bg-slate-800 sl-shadow sm:sl-rounded-lg sl-w-full",
@@ -180,4 +180,3 @@ const L = {
 export {
   G as _
 };
-//# sourceMappingURL=SwitchInputGroup.vue_vue_type_script_setup_true_lang-CK9JWl4F.js.map

package/dist/{TabGroup.vue_vue_type_script_setup_true_lang-DVVeOgWH.js → TabGroup.vue_vue_type_script_setup_true_lang-BsbiEA4E.js}

@@ -1,11 +1,11 @@
-import { defineComponent as L, computed as v, createElementBlock as a, openBlock as o, createCommentVNode as d, createVNode as u, unref as s, withCtx as c, createElementVNode as m, Fragment as j, renderList as z, createBlock as p, normalizeClass as _, createTextVNode as A, toDisplayString as k, renderSlot as y, KeepAlive as F, resolveDynamicComponent as K, mergeProps as U, toHandlers as q } from "vue";
-import { useTabs as J } from "./composables/useTabs.js";
-import { _ as Q } from "./SelectInput.vue_vue_type_script_setup_true_lang-DHiZ-7K2.js";
-import { m as R, p as W, x as X } from "./tabs-J5phClGv.js";
+import { defineComponent as P, computed as v, createElementBlock as a, openBlock as o, createCommentVNode as d, createVNode as u, unref as s, withCtx as c, createElementVNode as m, Fragment as j, renderList as z, createBlock as p, normalizeClass as _, createTextVNode as A, toDisplayString as k, renderSlot as y, KeepAlive as F, resolveDynamicComponent as K, mergeProps as U, toHandlers as q } from "vue";
+import { TabGroup as J, TabList as Q, Tab as R } from "@headlessui/vue";
+import { useTabs as W } from "./composables/useTabs.js";
+import { _ as X } from "./SelectInput.vue_vue_type_script_setup_true_lang-D4GNv0MY.js";
 const Y = { class: "sl-w-full" }, Z = {
   key: 0,
   class: "sl-block sm:sl-hidden sl-mb-4"
-}, I = ["onMouseenter", "onMouseleave"], ee = { class: "sl-flex sl-items-center sl-justify-center sl-gap-2" }, se = { class: "sl-mt-4" }, ae = /* @__PURE__ */ L({
+}, I = ["onMouseenter", "onMouseleave"], ee = { class: "sl-flex sl-items-center sl-justify-center sl-gap-2" }, se = { class: "sl-mt-4" }, ae = /* @__PURE__ */ P({
   __name: "TabGroup",
   props: {
     tabGroup: {},
@@ -16,8 +16,8 @@ const Y = { class: "sl-w-full" }, Z = {
     fixedHeight: {}
   },
   emits: ["tab-change"],
-  setup(C, { emit: w }) {
-    const t = C, T = w, $ = {
+  setup(T, { emit: C }) {
+    const t = T, w = C, $ = {
       tabGroup: t.tabGroup,
       tab: t.tab,
       tabs: t.tabs,
@@ -26,9 +26,9 @@ const Y = { class: "sl-w-full" }, Z = {
       fixedHeight: t.fixedHeight
     }, {
       selectedTabId: h,
-      selectedTab: M,
+      selectedTab: G,
       filteredTabs: r,
-      hoverStates: G,
+      hoverStates: M,
       themeClasses: b,
       dropdownOnMobile: O,
       selectedComponent: i,
@@ -37,8 +37,8 @@ const Y = { class: "sl-w-full" }, Z = {
       mouseEnter: B,
       mouseLeave: E,
       handleTabGroupTabChange: H
-    } = J($, (e, ...n) => {
-      e === "tab-change" && T("tab-change", n[0]);
+    } = W($, (e, ...n) => {
+      e === "tab-change" && w("tab-change", n[0]);
     }), f = v(
       () => r.value.map((e) => ({
         id: e.id,
@@ -56,7 +56,7 @@ const Y = { class: "sl-w-full" }, Z = {
     };
     return (e, n) => (o(), a("div", Y, [
       s(O) ? (o(), a("div", Z, [
-        u(Q, {
+        u(X, {
           name: `${t.tabGroup}-mobile-tab-select`,
           items: f.value,
           "model-value": N.value,
@@ -66,14 +66,14 @@ const Y = { class: "sl-w-full" }, Z = {
           "onUpdate:modelValue": D
         }, null, 8, ["name", "items", "model-value"])
       ])) : d("", !0),
-      u(s(R), {
-        "selected-index": s(M),
+      u(s(J), {
+        "selected-index": s(G),
         onChange: g
       }, {
         default: c(() => [
-          u(s(W), { class: "sl-hidden sm:sl-flex sl-space-x-1 sl-rounded-xl sl-bg-stachelock-900/20 dark:sl-bg-slate-800 sl-p-1" }, {
+          u(s(Q), { class: "sl-hidden sm:sl-flex sl-space-x-1 sl-rounded-xl sl-bg-stachelock-900/20 dark:sl-bg-slate-800 sl-p-1" }, {
             default: c(() => [
-              (o(!0), a(j, null, z(s(r), (l) => (o(), p(s(X), {
+              (o(!0), a(j, null, z(s(r), (l) => (o(), p(s(R), {
                 key: l.id,
                 as: "template",
                 disabled: l.disabled
@@ -86,8 +86,8 @@ const Y = { class: "sl-w-full" }, Z = {
                       x ? "sl-bg-white dark:sl-bg-slate-700 sl-text-stachelock-700 dark:sl-text-white sl-shadow" : "sl-text-gray-600 dark:sl-text-slate-300 hover:sl-bg-white/[0.12] hover:sl-text-gray-800 dark:hover:sl-text-white",
                       l.disabled ? "sl-opacity-50 sl-cursor-not-allowed" : "sl-cursor-pointer"
                     ]),
-                    onMouseenter: (P) => s(B)(l.id),
-                    onMouseleave: (P) => s(E)(l.id)
+                    onMouseenter: (L) => s(B)(l.id),
+                    onMouseleave: (L) => s(E)(l.id)
                   }, [
                     m("span", ee, [
                       A(k(l.name) + " ", 1),
@@ -95,7 +95,7 @@ const Y = { class: "sl-w-full" }, Z = {
                         key: 0,
                         class: _([
                           "sl-ml-2 sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium sl-tabular-nums",
-                          x || s(G)[l.id] ? `sl-ring-1 ${s(b).ringColor} ${s(b).bgColor} sl-text-gray-800` : "sl-bg-gray-200 dark:sl-bg-slate-600 sl-text-gray-700 dark:sl-text-slate-200"
+                          x || s(M)[l.id] ? `sl-ring-1 ${s(b).ringColor} ${s(b).bgColor} sl-text-gray-800` : "sl-bg-gray-200 dark:sl-bg-slate-600 sl-text-gray-700 dark:sl-text-slate-200"
                         ])
                       }, k(l.count), 3)) : d("", !0)
                     ])
@@ -122,4 +122,3 @@ const Y = { class: "sl-w-full" }, Z = {
 export {
   ae as _
 };
-//# sourceMappingURL=TabGroup.vue_vue_type_script_setup_true_lang-DVVeOgWH.js.map

package/dist/{TabGroupUnderline.vue_vue_type_script_setup_true_lang-_3XtOn3w.js → TabGroupUnderline.vue_vue_type_script_setup_true_lang-CPcp1-Za.js}

@@ -1,7 +1,7 @@
-import { defineComponent as P, computed as x, createElementBlock as n, openBlock as t, createCommentVNode as r, createVNode as v, toDisplayString as b, unref as l, withCtx as F, createElementVNode as c, Fragment as L, renderList as U, normalizeClass as f, createTextVNode as z, renderSlot as g, createBlock as y, KeepAlive as A, resolveDynamicComponent as K, mergeProps as j, toHandlers as q } from "vue";
-import { useTabs as J } from "./composables/useTabs.js";
-import { _ as Q } from "./SelectInput.vue_vue_type_script_setup_true_lang-DHiZ-7K2.js";
-import { m as R } from "./tabs-J5phClGv.js";
+import { defineComponent as P, computed as x, createElementBlock as n, openBlock as t, createCommentVNode as r, createVNode as v, toDisplayString as m, unref as l, withCtx as F, createElementVNode as c, Fragment as L, renderList as U, normalizeClass as f, createTextVNode as z, renderSlot as g, createBlock as y, KeepAlive as A, resolveDynamicComponent as K, mergeProps as j, toHandlers as q } from "vue";
+import { TabGroup as J } from "@headlessui/vue";
+import { useTabs as Q } from "./composables/useTabs.js";
+import { _ as R } from "./SelectInput.vue_vue_type_script_setup_true_lang-D4GNv0MY.js";
 const W = { class: "sl-w-full" }, X = {
   key: 0,
   class: "sl-text-lg sl-font-semibold sl-text-gray-900 dark:sl-text-white sl-mb-4"
@@ -23,8 +23,8 @@ const W = { class: "sl-w-full" }, X = {
     fixedHeight: {}
   },
   emits: ["tab-change"],
-  setup(i, { emit: _ }) {
-    const o = i, T = _, C = {
+  setup(i, { emit: T }) {
+    const o = i, _ = T, C = {
       tabGroup: o.tabGroup,
       tab: o.tab,
       tabs: o.tabs,
@@ -35,17 +35,17 @@ const W = { class: "sl-w-full" }, X = {
       selectedTabId: a,
       selectedTab: w,
       filteredTabs: u,
-      hoverStates: M,
-      dropdownOnMobile: $,
-      selectedComponent: m,
-      selectedProps: G,
+      hoverStates: G,
+      dropdownOnMobile: M,
+      selectedComponent: b,
+      selectedProps: $,
       selectedEvents: S,
       mouseEnter: O,
       mouseLeave: V,
       handleTabGroupTabChange: B,
       syncSelectedTabForDesktop: D
-    } = J(C, (e, ...d) => {
-      e === "tab-change" && T("tab-change", d[0]);
+    } = Q(C, (e, ...d) => {
+      e === "tab-change" && _("tab-change", d[0]);
     }), h = x(
       () => u.value.map((e) => ({
         id: e.id,
@@ -64,9 +64,9 @@ const W = { class: "sl-w-full" }, X = {
       d >= 0 && p(d);
     };
     return (e, d) => (t(), n("div", W, [
-      i.title ? (t(), n("h2", X, b(i.title), 1)) : r("", !0),
-      l($) ? (t(), n("div", Y, [
-        v(Q, {
+      i.title ? (t(), n("h2", X, m(i.title), 1)) : r("", !0),
+      l(M) ? (t(), n("div", Y, [
+        v(R, {
           name: `${i.tabGroup}-mobile-tab-select`,
           items: h.value,
           "model-value": E.value,
@@ -76,7 +76,7 @@ const W = { class: "sl-w-full" }, X = {
           "onUpdate:modelValue": N
         }, null, 8, ["name", "items", "model-value"])
       ])) : r("", !0),
-      v(l(R), {
+      v(l(J), {
         "selected-index": l(w),
         onChange: p
       }, {
@@ -97,15 +97,15 @@ const W = { class: "sl-w-full" }, X = {
                   ]),
                   "aria-current": s.id === l(a) ? "page" : void 0
                 }, [
-                  z(b(s.name) + " ", 1),
+                  z(m(s.name) + " ", 1),
                   s.count !== void 0 && s.count !== null ? (t(), n("span", {
                     key: 0,
                     class: f([
                       "sl-ml-3 sl-hidden sl-rounded-full sl-py-0.5 sl-px-2.5 sl-text-xs sl-font-medium md:sl-inline-block sl-tabular-nums",
                       s.id === l(a) ? "sl-bg-stachelock-100 dark:sl-bg-stachelock-900/30 sl-text-stachelock-600 dark:sl-text-stachelock-400" : "sl-bg-gray-100 dark:sl-bg-slate-700 sl-text-gray-800 dark:sl-text-slate-200",
-                      l(M)[s.id] ? "sl-ring-1 sl-ring-stachelock-600" : ""
+                      l(G)[s.id] ? "sl-ring-1 sl-ring-stachelock-600" : ""
                     ])
-                  }, b(s.count), 3)) : r("", !0)
+                  }, m(s.count), 3)) : r("", !0)
                 ], 42, se))), 128))
               ])
             ])
@@ -113,9 +113,9 @@ const W = { class: "sl-w-full" }, X = {
           c("div", le, [
             g(e.$slots, "component-heading"),
             (t(), y(A, null, [
-              l(m) ? (t(), y(K(l(m)), j({ key: l(a) }, l(G) || {}, q(l(S) || {})), null, 16)) : r("", !0)
+              l(b) ? (t(), y(K(l(b)), j({ key: l(a) }, l($) || {}, q(l(S) || {})), null, 16)) : r("", !0)
             ], 1024)),
-            l(m) ? r("", !0) : g(e.$slots, "default", { key: 0 })
+            l(b) ? r("", !0) : g(e.$slots, "default", { key: 0 })
           ])
         ]),
         _: 3
@@ -126,4 +126,3 @@ const W = { class: "sl-w-full" }, X = {
 export {
   de as _
 };
-//# sourceMappingURL=TabGroupUnderline.vue_vue_type_script_setup_true_lang-_3XtOn3w.js.map

package/dist/{TabsInPills.vue_vue_type_script_setup_true_lang-DY1NkXCQ.js → TabsInPills.vue_vue_type_script_setup_true_lang-U5CdRL7s.js}

@@ -1,5 +1,5 @@
 import { defineComponent as I, createElementBlock as l, openBlock as t, createElementVNode as o, renderSlot as m, createVNode as V, unref as s, Fragment as r, renderList as i, normalizeClass as u, withModifiers as w, createTextVNode as N, createCommentVNode as h, toDisplayString as p } from "vue";
-import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-DHiZ-7K2.js";
+import { _ as S } from "./SelectInput.vue_vue_type_script_setup_true_lang-D4GNv0MY.js";
 import { u as $ } from "./useSimpleTabs-CSgkChEU.js";
 const B = { class: "sl-w-full" }, E = { class: "sm:sl-hidden" }, U = { class: "sl-hidden sm:sl-block sl-overflow-x-auto" }, z = {
   class: "sl-flex sl-flex-nowrap sl-space-x-4",
@@ -82,4 +82,3 @@ const B = { class: "sl-w-full" }, E = { class: "sm:sl-hidden" }, U = { class: "s
 export {
   q as _
 };
-//# sourceMappingURL=TabsInPills.vue_vue_type_script_setup_true_lang-DY1NkXCQ.js.map