@stachelock/ui 0.2.14 → 0.3.1

package/dist/components/Button.js

@@ -1,9 +1,9 @@
-import { defineComponent as R, defineAsyncComponent as q, computed as o, ref as k, onMounted as D, nextTick as B, watch as U, createElementBlock as t, openBlock as r, normalizeStyle as G, normalizeClass as n, createCommentVNode as u, createElementVNode as H, renderSlot as f, Fragment as J, createVNode as h, unref as d, toDisplayString as K } from "vue";
-import { _ as Q } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const X = ["disabled", "data-theme"], Y = { class: "sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2" }, Z = {
-  key: 6,
-  class: "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-bg-opacity-75 sl-bg-white dark:sl-bg-opacity-75 dark:sl-bg-gray-700 sl-rounded sl-z-10"
-}, ee = { key: 0 }, se = "sl-ml-auto sl-flex sl-items-center", L = "sl-absolute sl-right-0 sl-top-1/2 -sl-translate-y-1/2 sl-pr-0 sl-flex sl-items-center", le = /* @__PURE__ */ R({
+import { defineComponent as G, defineAsyncComponent as H, computed as l, ref as B, onMounted as J, nextTick as L, watch as K, createElementBlock as o, openBlock as t, normalizeStyle as Q, normalizeClass as n, createCommentVNode as d, createElementVNode as X, renderSlot as u, Fragment as Y, createVNode as m, unref as c, toDisplayString as Z } from "vue";
+import { _ as ee } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const se = ["disabled", "data-theme", "data-outlined"], le = { class: "sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2" }, re = {
+  key: 0,
+  class: "sl-ml-2"
+}, oe = "sl-flex sl-items-center sl-flex-shrink-0", I = "sl-absolute sl-right-2 sl-top-1/2 -sl-translate-y-1/2 sl-flex sl-items-center sl-flex-shrink-0", te = /* @__PURE__ */ G({
   __name: "UiButton",
   props: {
     replaceLeadingIconWithLoading: { type: Boolean, default: !1 },
@@ -30,173 +30,200 @@ const X = ["disabled", "data-theme"], Y = { class: "sl-absolute sl-top-0 sl-righ
     inlineFlex: { type: Boolean, default: !1 }
   },
   emits: ["button-click", "hover-enter", "hover-leave"],
-  setup(I, { emit: z }) {
-    const y = q(() => import("./Loading.js")), e = I, m = z, c = o(() => !!e.loading), b = o(() => e.replaceLeadingIconWithLoading || !1), v = k(null), g = k(e.theme ?? "primary"), _ = (s) => {
+  setup(z, { emit: _ }) {
+    const b = H(() => import("./Loading.js")), e = z, h = _, g = l(() => !!e.loading), y = l(() => e.replaceLeadingIconWithLoading || !1), p = B(null), f = B(e.theme ?? "primary"), S = (s) => {
       for (; s && s !== document.documentElement; ) {
-        const l = window.getComputedStyle(s).backgroundColor;
-        if (l && l !== "rgba(0, 0, 0, 0)" && l !== "transparent")
-          return l;
+        const r = window.getComputedStyle(s).backgroundColor;
+        if (r && r !== "rgba(0, 0, 0, 0)" && r !== "transparent")
+          return r;
         s = s.parentElement;
       }
       return null;
     }, x = () => {
       if (!e.autoContrast) return;
-      const s = v.value;
+      const s = p.value;
       if (!s) return;
-      const l = _(s.parentElement);
-      if (!l) return;
-      window.getComputedStyle(s).backgroundColor === l && (g.value = g.value === "light" ? "primary" : "light");
+      const r = S(s.parentElement);
+      if (!r) return;
+      window.getComputedStyle(s).backgroundColor === r && (f.value = f.value === "light" ? "primary" : "light");
     };
-    D(() => {
-      B(x);
-    }), U(
+    J(() => {
+      L(x);
+    }), K(
       () => e.theme,
       (s) => {
-        g.value = s || "primary", B(x);
+        f.value = s || "primary", L(x);
       },
       { immediate: !1 }
     );
-    const i = o(() => g.value), w = o(() => e.loadingSize || e.size || "md"), S = o(() => {
+    const i = l(() => f.value), w = l(() => e.loadingSize || e.size || "md"), v = l(() => {
+      const s = ["primary", "dark", "danger", "success", "warning"];
+      return !e.outlined && s.includes(i.value) ? "light" : i.value;
+    }), M = l(() => {
+      const s = ["primary", "dark", "danger", "success", "warning"];
+      return !e.outlined && s.includes(i.value) ? "sl-bg-black/20" : "sl-bg-white/75 dark:sl-bg-slate-900/75";
+    }), j = l(() => {
       const s = {
-        primary: "sl-text-stachelock-600 sl-border sl-border-stachelock-600 hover:sl-bg-stachelock-50 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        dark: "sl-text-gray-700 sl-border sl-border-gray-700 hover:sl-bg-gray-50 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        secondary: "sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        light: "sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        warning: "sl-text-yellow-500 sl-border sl-border-yellow-500 hover:sl-bg-yellow-50 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        danger: "sl-text-red-500 sl-border sl-border-red-500 hover:sl-bg-red-50 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        success: "sl-text-green-500 sl-border sl-border-green-500 hover:sl-bg-green-50 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        ghost: "sl-text-gray-800 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none"
-      }, l = {
-        primary: "sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        dark: "sl-border sl-border-transparent sl-bg-gray-700 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        secondary: "sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300",
-        light: "sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300",
-        warning: "sl-border sl-border-transparent sl-bg-yellow-400 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        danger: "sl-border sl-border-transparent sl-bg-red-500 sl-text-white sl-shadow-sm hover:sl-bg-red-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        success: "sl-border sl-border-transparent sl-bg-green-500 sl-text-white sl-shadow-sm hover:sl-bg-green-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50",
-        ghost: "sl-border sl-border-transparent sl-text-gray-800 sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none"
+        primary: "sl-text-stachelock-600 dark:sl-text-stachelock-400 sl-border sl-border-stachelock-600 dark:sl-border-stachelock-500 hover:sl-bg-stachelock-50 dark:hover:sl-bg-stachelock-900/30 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 dark:focus:sl-ring-stachelock-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        dark: "sl-text-gray-700 dark:sl-text-gray-300 sl-border sl-border-gray-700 dark:sl-border-gray-500 hover:sl-bg-gray-50 dark:hover:sl-bg-gray-800 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        secondary: "sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        light: "sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        warning: "sl-text-yellow-500 dark:sl-text-yellow-400 sl-border sl-border-yellow-500 dark:sl-border-yellow-500 hover:sl-bg-yellow-50 dark:hover:sl-bg-yellow-900/20 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 dark:focus:sl-ring-yellow-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        danger: "sl-text-red-500 dark:sl-text-red-400 sl-border sl-border-red-500 dark:sl-border-red-500 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 dark:focus:sl-ring-red-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        success: "sl-text-green-500 dark:sl-text-green-400 sl-border sl-border-green-500 dark:sl-border-green-500 hover:sl-bg-green-50 dark:hover:sl-bg-green-900/20 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 dark:focus:sl-ring-green-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        ghost: "sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none"
+      }, r = {
+        primary: "sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        dark: "sl-border sl-border-transparent sl-bg-gray-700 dark:sl-bg-gray-600 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 dark:hover:sl-bg-gray-500 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        secondary: "sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600",
+        light: "sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600",
+        warning: "sl-border sl-border-transparent sl-bg-yellow-400 dark:sl-bg-yellow-500 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 dark:hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        danger: "sl-border sl-border-transparent sl-bg-red-500 dark:sl-bg-red-600 sl-text-white sl-shadow-sm hover:sl-bg-red-600 dark:hover:sl-bg-red-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        success: "sl-border sl-border-transparent sl-bg-green-500 dark:sl-bg-green-600 sl-text-white sl-shadow-sm hover:sl-bg-green-600 dark:hover:sl-bg-green-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900",
+        ghost: "sl-border sl-border-transparent sl-text-gray-800 dark:sl-text-gray-200 sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none"
       };
-      return e.outlined ? `${s[i.value] || ""} sl-bg-transparent` : l[i.value] || "";
-    }), M = {
+      return e.outlined ? `${s[i.value] || ""} sl-bg-transparent dark:sl-bg-transparent` : r[i.value] || "";
+    }), T = {
       square: "",
       rounded: "sl-rounded",
       "rounded-md": "sl-rounded-md",
       "rounded-lg": "sl-rounded-lg",
       "rounded-full": "sl-rounded-full"
-    }, C = o(() => M[e.rounded || "rounded-md"]), j = o(() => ({
-      xs: "sl-p-0.5",
-      sm: "sl-p-1",
-      md: "sl-p-2",
-      lg: "sl-p-3",
-      xl: "sl-p-4",
-      "2xl": "sl-p-5"
-    })[e.size || "md"]), $ = o(() => ({
+    }, O = l(() => T[e.rounded || "rounded-md"]), $ = l(() => ({
+      xs: "sl-px-2 sl-py-1",
+      sm: "sl-px-2.5 sl-py-1.5",
+      md: "sl-px-3 sl-py-1.5",
+      lg: "sl-px-4 sl-py-2",
+      xl: "sl-px-5 sl-py-2.5",
+      "2xl": "sl-px-6 sl-py-3"
+    })[e.size || "md"]), E = l(() => ({
       xs: "sl-text-xs sl-font-regular",
       sm: "sl-text-sm sl-font-regular",
       md: "sl-text-base sl-font-medium",
       lg: "sl-text-lg sl-font-medium",
       xl: "sl-text-xl sl-font-medium",
       "2xl": "sl-text-2xl sl-font-medium"
-    })[e.size || "sm"]), E = o(() => e.expanded ? "sl-w-full" : ""), a = o(() => !!e.label && e.label.length > 0), T = o(() => {
+    })[e.size || "sm"]), F = l(() => e.expanded ? "sl-w-full" : ""), a = l(() => !!e.label && e.label.length > 0), N = l(() => !a.value && (e.leadingIcon || e.trailingIcon)), P = l(() => {
       if (e.customClass)
         return e.customClass;
-      const l = [...[
-        C.value,
-        j.value,
+      const r = [...[
+        O.value,
         $.value,
         E.value,
-        S.value,
+        F.value,
+        j.value,
         e.disabled ? "sl-cursor-not-allowed" : "sl-cursor-pointer",
         "focus:sl-ring-0",
         "sl-relative",
         "sl-flex",
         "sl-items-center",
-        "sl-justify-center"
+        "sl-justify-center",
+        "sl-gap-2"
+        // Consistent spacing between icon and text
       ]];
-      return C.value === "sl-rounded-full" ? l.push("sl-px-1", "sl-py-1") : l.push("sl-px-2.5", "sl-py-2"), e.centerLeadingIcon && !a.value ? l.push("sl-w-full", "sl-h-full") : (e.leadingIcon || e.inlineFlex || e.trailingIcon) && l.push("sl-inline-flex"), l.filter(Boolean);
-    }), O = o(() => e.theme === "primary" ? {
-      backgroundColor: "var(--sl-color-primary-600, #6b8a5e)",
-      "--tw-ring-color": "var(--sl-color-primary-500, #7a966e)"
-    } : {}), F = o(() => e.trailingOverlay ? L : se), N = o(() => e.trailingOverlay ? `${L} sl-h-5 sl-w-5` : "sl-ml-2 sl-h-5 sl-w-5 sl-flex sl-items-center"), p = o(() => e.centerLeadingIcon && !a.value ? "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full" : e.centerLeadingIcon ? "sl-h-full sl-flex sl-items-center sl-justify-center" : a.value ? "-sl-ml-0.5 sl-h-5 sl-w-5 sl-flex sl-items-center sl-justify-center" : "sl-flex sl-items-center sl-justify-center"), V = () => {
-      m("button-click");
-    }, W = () => {
-      m("hover-enter");
-    }, A = () => {
-      m("hover-leave");
-    }, P = e.showLoadingTitle || !1;
-    return (s, l) => (r(), t("button", {
+      if (!a.value && (e.leadingIcon || e.trailingIcon)) {
+        const C = {
+          xs: "!sl-p-1.5",
+          sm: "!sl-p-2",
+          md: "!sl-p-2.5",
+          lg: "!sl-p-3",
+          xl: "!sl-p-3.5",
+          "2xl": "!sl-p-4"
+        };
+        r.push(C[e.size || "md"] || "!sl-p-2.5");
+      }
+      return e.centerLeadingIcon && !a.value ? r.push("sl-w-full", "sl-h-full") : (e.leadingIcon || e.inlineFlex || e.trailingIcon) && r.push("sl-inline-flex"), r.filter(Boolean);
+    }), V = l(() => e.theme === "primary" ? e.outlined ? {
+      color: "var(--sl-color-primary-600, #3e4b9a)",
+      borderColor: "var(--sl-color-primary-600, #3e4b9a)",
+      "--tw-ring-color": "var(--sl-color-primary-500, #4d5ec0)"
+    } : {
+      backgroundColor: "var(--sl-color-primary-600, #3e4b9a)",
+      "--tw-ring-color": "var(--sl-color-primary-500, #4d5ec0)"
+    } : {}), W = l(() => e.trailingOverlay ? I : oe), A = l(() => e.trailingOverlay ? `${I}` : "sl-flex sl-items-center sl-flex-shrink-0"), k = l(() => e.centerLeadingIcon && !a.value ? "sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full" : e.centerLeadingIcon ? "sl-h-full sl-flex sl-items-center sl-justify-center" : a.value ? "sl-flex sl-items-center sl-justify-center sl-flex-shrink-0" : "sl-flex sl-items-center sl-justify-center"), R = () => {
+      h("button-click");
+    }, U = () => {
+      h("hover-enter");
+    }, q = () => {
+      h("hover-leave");
+    }, D = e.showLoadingTitle || !1;
+    return (s, r) => (t(), o("button", {
       ref_key: "buttonRef",
-      ref: v,
+      ref: p,
       type: "button",
       disabled: e.disabled,
-      class: n(T.value),
-      style: G(O.value),
+      class: n(P.value),
+      style: Q(V.value),
       "data-theme": e.theme,
-      onClick: V,
-      onMouseenter: W,
-      onMouseleave: A
+      "data-outlined": e.outlined || void 0,
+      onClick: R,
+      onMouseenter: U,
+      onMouseleave: q
     }, [
-      e.centerLeadingIcon && !a.value ? (r(), t("div", {
+      e.centerLeadingIcon && !a.value ? (t(), o("div", {
         key: 0,
-        class: n(p.value)
+        class: n(k.value)
       }, [
-        f(s.$slots, "leading-icon", {}, void 0, !0)
-      ], 2)) : (r(), t(J, { key: 1 }, [
-        b.value && c.value ? (r(), t("div", {
+        u(s.$slots, "leading-icon", {}, void 0, !0)
+      ], 2)) : (t(), o(Y, { key: 1 }, [
+        y.value && g.value ? (t(), o("div", {
           key: 0,
-          class: n(["sl-flex sl-items-center sl-justify-center", [p.value, a.value ? "" : "sl-h-full sl-w-full"]])
+          class: n(["sl-flex sl-items-center sl-justify-center", [k.value, a.value ? "" : "sl-h-full sl-w-full"]])
         }, [
-          h(d(y), {
-            theme: i.value,
+          m(c(b), {
+            theme: v.value,
             size: w.value
           }, null, 8, ["theme", "size"])
-        ], 2)) : e.leadingIcon ? (r(), t("div", {
+        ], 2)) : e.leadingIcon ? (t(), o("div", {
           key: 1,
-          class: n(p.value)
+          class: n(k.value)
         }, [
-          f(s.$slots, "leading-icon", {}, void 0, !0)
-        ], 2)) : u("", !0)
+          u(s.$slots, "leading-icon", {}, void 0, !0)
+        ], 2)) : d("", !0)
       ], 64)),
-      a.value ? (r(), t("span", {
+      a.value ? (t(), o("span", {
         key: 2,
         class: n(["sl-flex-1 sl-text-center", [
           { "sl-truncate sl-max-w-[150px]": s.truncateLabel },
           { "sl-mx-auto": !e.leadingIcon && !e.trailingIcon }
         ]])
-      }, K(e.label), 3)) : (!b.value || !c.value) && !e.centerLeadingIcon ? (r(), t("span", {
+      }, Z(e.label), 3)) : !N.value && (!y.value || !g.value) && !e.centerLeadingIcon ? (t(), o("span", {
         key: 3,
         class: n(["sl-flex", e.centerLabel || !e.leadingIcon && !e.trailingIcon ? "sl-justify-center sl-items-center sl-flex-1" : "sl-flex-1"])
       }, [
-        f(s.$slots, "default", {}, void 0, !0)
-      ], 2)) : u("", !0),
-      e.trailingLoading && c.value ? (r(), t("div", {
+        u(s.$slots, "default", {}, void 0, !0)
+      ], 2)) : d("", !0),
+      e.trailingLoading && g.value ? (t(), o("div", {
         key: 4,
-        class: n(F.value)
+        class: n(W.value)
       }, [
-        h(d(y), {
-          theme: i.value,
+        m(c(b), {
+          theme: v.value,
           size: e.trailingLoadingSize || "sm"
         }, null, 8, ["theme", "size"])
-      ], 2)) : e.trailingIcon ? (r(), t("div", {
+      ], 2)) : e.trailingIcon ? (t(), o("div", {
         key: 5,
-        class: n(N.value)
+        class: n(A.value)
       }, [
-        f(s.$slots, "trailing-icon", {}, void 0, !0)
-      ], 2)) : u("", !0),
-      H("div", Y, [
-        f(s.$slots, "badge", {}, void 0, !0)
+        u(s.$slots, "trailing-icon", {}, void 0, !0)
+      ], 2)) : d("", !0),
+      X("div", le, [
+        u(s.$slots, "badge", {}, void 0, !0)
       ]),
-      c.value && !b.value && !e.trailingLoading ? (r(), t("div", Z, [
-        h(d(y), {
-          theme: i.value,
+      g.value && !y.value && !e.trailingLoading ? (t(), o("div", {
+        key: 6,
+        class: n(["sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-rounded sl-z-10", M.value])
+      }, [
+        m(c(b), {
+          theme: v.value,
           size: w.value
         }, null, 8, ["theme", "size"]),
-        d(P) ? (r(), t("p", ee, "Loading...")) : u("", !0)
-      ])) : u("", !0)
-    ], 46, X));
+        c(D) ? (t(), o("p", re, "Loading...")) : d("", !0)
+      ], 2)) : d("", !0)
+    ], 46, se));
   }
-}), ne = /* @__PURE__ */ Q(le, [["__scopeId", "data-v-1fe16850"]]);
+}), ie = /* @__PURE__ */ ee(te, [["__scopeId", "data-v-13d7b5df"]]);
 export {
-  ne as default
+  ie as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/components/UiButton.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonRef\"\n    type=\"button\"\n    :disabled=\"props.disabled\"\n    :class=\"buttonClasses\"\n    :style=\"buttonStyles\"\n    :data-theme=\"props.theme\"\n    @click=\"onClick\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Leading Icon Area (or Loading Replacement) -->\n    <template v-if=\"props.centerLeadingIcon && !isLabelPresent\">\n      <div :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n    <template v-else>\n      <div\n        v-if=\"replaceLeadingIconWithLoading && loading\"\n        class=\"sl-flex sl-items-center sl-justify-center\"\n        :class=\"[leadingIconClasses, !isLabelPresent ? 'sl-h-full sl-w-full' : '']\"\n      >\n        <Loading :theme=\"theme\" :size=\"loadingSize\" />\n      </div>\n      <div v-else-if=\"props.leadingIcon\" :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n\n    <!-- Button Content -->\n    <span\n      v-if=\"isLabelPresent\"\n      class=\"sl-flex-1 sl-text-center\"\n      :class=\"[\n        { 'sl-truncate sl-max-w-[150px]': truncateLabel },\n        { 'sl-mx-auto': !props.leadingIcon && !props.trailingIcon }\n      ]\"\n    >\n      {{ props.label }}\n    </span>\n    <span\n      v-else-if=\"(!replaceLeadingIconWithLoading || !loading) && !props.centerLeadingIcon\"\n      class=\"sl-flex\"\n      :class=\"props.centerLabel || (!props.leadingIcon && !props.trailingIcon) ? 'sl-justify-center sl-items-center sl-flex-1' : 'sl-flex-1'\"\n    >\n      <slot />\n    </span>\n\n    <!-- Trailing Icon or Loading -->\n    <div v-if=\"props.trailingLoading && loading\" :class=\"trailingLoadingClasses\">\n      <Loading :theme=\"theme\" :size=\"props.trailingLoadingSize || 'sm'\" />\n    </div>\n    <div v-else-if=\"props.trailingIcon\" :class=\"trailingIconClasses\">\n      <slot name=\"trailing-icon\" />\n    </div>\n\n    <!-- Badge Slot -->\n    <div class=\"sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2\">\n      <slot name=\"badge\" />\n    </div>\n\n    <!-- Overlay Loading (if not replacing the leading icon and not using trailing loading) -->\n    <div\n      v-if=\"loading && !replaceLeadingIconWithLoading && !props.trailingLoading\"\n      class=\"sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-bg-opacity-75 sl-bg-white dark:sl-bg-opacity-75 dark:sl-bg-gray-700 sl-rounded sl-z-10\"\n    >\n      <Loading :theme=\"theme\" :size=\"loadingSize\" />\n      <p v-if=\"showLoadingTitle\">Loading...</p>\n    </div>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, defineAsyncComponent, ref, onMounted, watch, nextTick } from 'vue';\nimport type { ButtonType, RoundedType, Theme } from '../types/ui';\n\n// Asynchronously load the Loading component\nconst Loading = defineAsyncComponent(() => import('./UiLoading.vue'));\n\n// Define props using the ButtonType interface\ninterface ButtonProps extends ButtonType {\n  replaceLeadingIconWithLoading?: boolean;\n  centerLeadingIcon?: boolean;\n  /**\n   * When enabled, shows loading indicator in trailing position instead of overlay\n   */\n  trailingLoading?: boolean;\n  /**\n   * Size of the loading indicator when using trailingLoading\n   */\n  trailingLoadingSize?: import('../types/ui').Size;\n  /**\n   * Positions trailing loading/icon absolutely at the far right, centered vertically.\n   */\n  trailingOverlay?: boolean;\n  /**\n   * When enabled the button will attempt to automatically choose a contrasting\n   * colour theme if its background matches that of its closest non-transparent\n   * ancestor.\n   */\n  autoContrast?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  theme: 'primary',\n  size: 'md',\n  rounded: 'rounded-md',\n  disabled: false,\n  expanded: false,\n  outlined: false,\n  loading: false,\n  leadingIcon: false,\n  trailingIcon: false,\n  showLoadingTitle: false,\n  truncateLabel: false,\n  centerLabel: false,\n  inlineFlex: false,\n  replaceLeadingIconWithLoading: false,\n  centerLeadingIcon: false,\n  trailingLoading: false,\n  trailingOverlay: false,\n  autoContrast: false,\n});\n\n// Define the emits\nconst emit = defineEmits<{\n  'button-click': []\n  'hover-enter': []\n  'hover-leave': []\n}>();\n\n// Reactive computed properties\nconst loading = computed(() => Boolean(props.loading));\nconst replaceLeadingIconWithLoading = computed(() => props.replaceLeadingIconWithLoading || false);\n\n// Reference to the underlying button element\nconst buttonRef = ref<HTMLElement | null>(null);\n\n// Internal reactive theme value that may be overridden for auto-contrast\nconst resolvedTheme = ref<Theme>(props.theme ?? 'primary');\n\nconst findParentBackground = (node: HTMLElement | null): string | null => {\n  while (node && node !== document.documentElement) {\n    const bg = window.getComputedStyle(node).backgroundColor;\n    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n      return bg;\n    }\n    node = node.parentElement as HTMLElement | null;\n  }\n  return null;\n};\n\nconst adjustThemeBasedOnBackground = (): void => {\n  if (!props.autoContrast) return;\n  const el = buttonRef.value;\n  if (!el) return;\n\n  const parentBg = findParentBackground(el.parentElement as HTMLElement | null);\n  if (!parentBg) return;\n\n  const buttonBg = window.getComputedStyle(el).backgroundColor;\n\n  if (buttonBg === parentBg) {\n    resolvedTheme.value = resolvedTheme.value === 'light' ? 'primary' : 'light';\n  }\n};\n\nonMounted(() => {\n  nextTick(adjustThemeBasedOnBackground);\n});\n\nwatch(\n  () => props.theme,\n  (newTheme) => {\n    resolvedTheme.value = newTheme || 'primary';\n    nextTick(adjustThemeBasedOnBackground);\n  },\n  { immediate: false }\n);\n\n// Public computed theme\nconst theme = computed(() => resolvedTheme.value);\n\n// Compute loading size with fallback\nconst loadingSize = computed(() => props.loadingSize || props.size || 'md');\n\n// Styling computed properties\nconst colorClass = computed(() => {\n  const outlineBaseClasses: Record<string, string> = {\n    primary: 'sl-text-stachelock-600 sl-border sl-border-stachelock-600 hover:sl-bg-stachelock-50 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    dark: 'sl-text-gray-700 sl-border sl-border-gray-700 hover:sl-bg-gray-50 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    secondary: 'sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    light: 'sl-text-gray-800 sl-border sl-border-gray-300 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    warning: 'sl-text-yellow-500 sl-border sl-border-yellow-500 hover:sl-bg-yellow-50 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    danger: 'sl-text-red-500 sl-border sl-border-red-500 hover:sl-bg-red-50 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    success: 'sl-text-green-500 sl-border sl-border-green-500 hover:sl-bg-green-50 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    ghost: 'sl-text-gray-800 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none',\n  };\n\n  const filledBaseClasses: Record<string, string> = {\n    primary: 'sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    dark: 'sl-border sl-border-transparent sl-bg-gray-700 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    secondary: 'sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300',\n    light: 'sl-text-gray-800 sl-bg-gray-200 hover:sl-bg-gray-100 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50 sl-border sl-border-gray-300',\n    warning: 'sl-border sl-border-transparent sl-bg-yellow-400 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    danger: 'sl-border sl-border-transparent sl-bg-red-500 sl-text-white sl-shadow-sm hover:sl-bg-red-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    success: 'sl-border sl-border-transparent sl-bg-green-500 sl-text-white sl-shadow-sm hover:sl-bg-green-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-gray-50',\n    ghost: 'sl-border sl-border-transparent sl-text-gray-800 sl-bg-transparent hover:sl-text-gray-700 focus:sl-outline-none',\n  };\n\n  if (props.outlined) {\n    return `${outlineBaseClasses[theme.value] || ''} sl-bg-transparent`;\n  } else {\n    return filledBaseClasses[theme.value] || '';\n  }\n});\n\nconst roundedClassMap: Record<RoundedType, string> = {\n  square: '',\n  rounded: 'sl-rounded',\n  'rounded-md': 'sl-rounded-md',\n  'rounded-lg': 'sl-rounded-lg',\n  'rounded-full': 'sl-rounded-full',\n};\n\nconst roundedClass = computed(() => roundedClassMap[props.rounded || 'rounded-md']);\n\nconst sizeClass = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-p-0.5',\n    sm: 'sl-p-1',\n    md: 'sl-p-2',\n    lg: 'sl-p-3',\n    xl: 'sl-p-4',\n    '2xl': 'sl-p-5',\n  };\n  return sizeMapping[props.size || 'md'];\n});\n\nconst textClass = computed(() => {\n  const textMapping: Record<string, string> = {\n    xs: 'sl-text-xs sl-font-regular',\n    sm: 'sl-text-sm sl-font-regular',\n    md: 'sl-text-base sl-font-medium',\n    lg: 'sl-text-lg sl-font-medium',\n    xl: 'sl-text-xl sl-font-medium',\n    '2xl': 'sl-text-2xl sl-font-medium',\n  };\n  return textMapping[props.size || 'sm'];\n});\n\nconst expandedClass = computed(() => (props.expanded ? 'sl-w-full' : ''));\n\nconst isLabelPresent = computed(() => !!props.label && props.label.length > 0);\n\nconst buttonClasses = computed(() => {\n  if (props.customClass) {\n    return props.customClass;\n  }\n\n  const coreClasses = [\n    roundedClass.value,\n    sizeClass.value,\n    textClass.value,\n    expandedClass.value,\n    colorClass.value,\n    props.disabled ? 'sl-cursor-not-allowed' : 'sl-cursor-pointer',\n    'focus:sl-ring-0',\n    'sl-relative',\n    'sl-flex',\n    'sl-items-center',\n    'sl-justify-center',\n  ];\n\n  const finalClasses = [...coreClasses];\n\n  if (roundedClass.value === 'sl-rounded-full') {\n    finalClasses.push('sl-px-1', 'sl-py-1');\n  } else {\n    finalClasses.push('sl-px-2.5', 'sl-py-2');\n  }\n\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    finalClasses.push('sl-w-full', 'sl-h-full');\n  } else {\n    if (props.leadingIcon || props.inlineFlex || props.trailingIcon) {\n      finalClasses.push('sl-inline-flex');\n    }\n  }\n\n  return finalClasses.filter(Boolean);\n});\n\nconst buttonStyles = computed(() => {\n  if (props.theme === 'primary') {\n    return {\n      backgroundColor: 'var(--sl-color-primary-600, #6b8a5e)',\n      '--tw-ring-color': 'var(--sl-color-primary-500, #7a966e)',\n    };\n  }\n  return {};\n});\n\nconst trailingBaseClasses = 'sl-ml-auto sl-flex sl-items-center';\nconst trailingAbsoluteClasses = 'sl-absolute sl-right-0 sl-top-1/2 -sl-translate-y-1/2 sl-pr-0 sl-flex sl-items-center';\nconst trailingLoadingClasses = computed(() => props.trailingOverlay ? trailingAbsoluteClasses : trailingBaseClasses);\nconst trailingIconClasses = computed(() => props.trailingOverlay ? `${trailingAbsoluteClasses} sl-h-5 sl-w-5` : 'sl-ml-2 sl-h-5 sl-w-5 sl-flex sl-items-center');\n\nconst leadingIconClasses = computed(() => {\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    return 'sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full';\n  }\n  if (props.centerLeadingIcon) {\n    return 'sl-h-full sl-flex sl-items-center sl-justify-center';\n  }\n  if (!isLabelPresent.value) {\n    return 'sl-flex sl-items-center sl-justify-center';\n  }\n  return '-sl-ml-0.5 sl-h-5 sl-w-5 sl-flex sl-items-center sl-justify-center';\n});\n\nconst onClick = (): void => {\n  emit('button-click');\n};\n\nconst onMouseEnter = (): void => {\n  emit('hover-enter');\n};\n\nconst onMouseLeave = (): void => {\n  emit('hover-leave');\n};\n\nconst showLoadingTitle = props.showLoadingTitle || false;\n</script>\n\n<style scoped>\n/* Component-specific styles if needed */\nbutton[data-theme=\"primary\"]:hover {\n  background-color: var(--sl-color-primary-700, #566e4b) !important;\n}\n</style>\n\n\n"],"names":["trailingBaseClasses","trailingAbsoluteClasses","Loading","defineAsyncComponent","props","__props","emit","__emit","loading","computed","replaceLeadingIconWithLoading","buttonRef","ref","resolvedTheme","findParentBackground","node","bg","adjustThemeBasedOnBackground","el","parentBg","onMounted","nextTick","watch","newTheme","theme","loadingSize","colorClass","outlineBaseClasses","filledBaseClasses","roundedClassMap","roundedClass","sizeClass","textClass","expandedClass","isLabelPresent","buttonClasses","finalClasses","buttonStyles","trailingLoadingClasses","trailingIconClasses","leadingIconClasses","onClick","onMouseEnter","onMouseLeave","showLoadingTitle","_createElementBlock","_renderSlot","_ctx","_Fragment","_normalizeClass","_createVNode","_unref","truncateLabel","_toDisplayString","_createElementVNode","_hoisted_2","_openBlock","_hoisted_3"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../src/components/UiButton.vue"],"sourcesContent":["<!--\n  @component UiButton\n  @description Versatile button component with theme, size, and loading support.\n  \n  @props\n  - theme (Theme, optional): Color theme variant - 'primary', 'secondary', 'success', 'warning', 'danger', 'dark', 'light', 'ghost'\n  - size (Size, optional): Button size - 'xs', 'sm', 'md', 'lg', 'xl', '2xl'\n  - label (string, optional): Text label (alternative to default slot)\n  - disabled (boolean, optional): Disabled state\n  - expanded (boolean, optional): Full width mode\n  - outlined (boolean, optional): Outlined variant\n  - loading (boolean, optional): Loading state with spinner\n  - leadingIcon (boolean, optional): Enable leading icon slot\n  - trailingIcon (boolean, optional): Enable trailing icon slot\n  - rounded (RoundedType, optional): Border radius style\n  \n  @emits\n  - button-click: Emitted when button is clicked\n  - hover-enter: Emitted on mouse enter\n  - hover-leave: Emitted on mouse leave\n  \n  @slots\n  - default: Button content/text\n  - leading-icon: Icon displayed before content\n  - trailing-icon: Icon displayed after content\n  - badge: Badge overlay positioned top-right\n  \n  @example\n  <UiButton theme=\"primary\" @button-click=\"handleClick\">\n    Click Me\n  </UiButton>\n  \n  @example\n  <UiButton leading-icon theme=\"success\">\n    <template #leading-icon><PlusIcon class=\"h-5 w-5\" /></template>\n    Add Item\n  </UiButton>\n-->\n<template>\n  <button\n    ref=\"buttonRef\"\n    type=\"button\"\n    :disabled=\"props.disabled\"\n    :class=\"buttonClasses\"\n    :style=\"buttonStyles\"\n    :data-theme=\"props.theme\"\n    :data-outlined=\"props.outlined || undefined\"\n    @click=\"onClick\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <!-- Leading Icon Area (or Loading Replacement) -->\n    <template v-if=\"props.centerLeadingIcon && !isLabelPresent\">\n      <div :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n    <template v-else>\n      <div\n        v-if=\"replaceLeadingIconWithLoading && loading\"\n        class=\"sl-flex sl-items-center sl-justify-center\"\n        :class=\"[leadingIconClasses, !isLabelPresent ? 'sl-h-full sl-w-full' : '']\"\n      >\n        <Loading :theme=\"loadingTheme\" :size=\"loadingSize\" />\n      </div>\n      <div v-else-if=\"props.leadingIcon\" :class=\"leadingIconClasses\">\n        <slot name=\"leading-icon\" />\n      </div>\n    </template>\n\n    <!-- Button Content (skip for icon-only buttons) -->\n    <span\n      v-if=\"isLabelPresent\"\n      class=\"sl-flex-1 sl-text-center\"\n      :class=\"[\n        { 'sl-truncate sl-max-w-[150px]': truncateLabel },\n        { 'sl-mx-auto': !props.leadingIcon && !props.trailingIcon }\n      ]\"\n    >\n      {{ props.label }}\n    </span>\n    <span\n      v-else-if=\"!isIconOnly && (!replaceLeadingIconWithLoading || !loading) && !props.centerLeadingIcon\"\n      class=\"sl-flex\"\n      :class=\"props.centerLabel || (!props.leadingIcon && !props.trailingIcon) ? 'sl-justify-center sl-items-center sl-flex-1' : 'sl-flex-1'\"\n    >\n      <slot />\n    </span>\n\n    <!-- Trailing Icon or Loading -->\n    <div v-if=\"props.trailingLoading && loading\" :class=\"trailingLoadingClasses\">\n      <Loading :theme=\"loadingTheme\" :size=\"props.trailingLoadingSize || 'sm'\" />\n    </div>\n    <div v-else-if=\"props.trailingIcon\" :class=\"trailingIconClasses\">\n      <slot name=\"trailing-icon\" />\n    </div>\n\n    <!-- Badge Slot -->\n    <div class=\"sl-absolute sl-top-0 sl-right-0 sl-transform sl-translate-x-1/2 -sl-translate-y-1/2\">\n      <slot name=\"badge\" />\n    </div>\n\n    <!-- Overlay Loading (if not replacing the leading icon and not using trailing loading) -->\n    <div\n      v-if=\"loading && !replaceLeadingIconWithLoading && !props.trailingLoading\"\n      class=\"sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-rounded sl-z-10\"\n      :class=\"loadingOverlayClasses\"\n    >\n      <Loading :theme=\"loadingTheme\" :size=\"loadingSize\" />\n      <p v-if=\"showLoadingTitle\" class=\"sl-ml-2\">Loading...</p>\n    </div>\n  </button>\n</template>\n\n<script lang=\"ts\" setup>\n/**\n * UiButton - Versatile button component with theme, size, and loading support\n * \n * A comprehensive button component supporting multiple themes, sizes, loading states,\n * and icon integration. Uses CSS variables for theming to allow brand customization.\n * \n * ## Features\n * - Multiple theme variants (primary, secondary, success, warning, danger, etc.)\n * - Size options from xs to 2xl\n * - Outlined variant for secondary actions\n * - Loading states with overlay, trailing, or leading replacement options\n * - Leading and trailing icon slots\n * - Badge slot for notifications\n * - Auto-contrast for background adaptation\n * \n * ## Usage\n * ```vue\n * <UiButton theme=\"primary\" size=\"md\" @button-click=\"handleClick\">\n *   Click Me\n * </UiButton>\n * \n * <UiButton leading-icon :loading=\"isLoading\">\n *   <template #leading-icon><PlusIcon /></template>\n *   Add Item\n * </UiButton>\n * ```\n * \n * ## Props\n * | Prop | Type | Default | Description |\n * |------|------|---------|-------------|\n * | theme | Theme | 'primary' | Color theme variant |\n * | size | Size | 'md' | Button size |\n * | label | string | - | Text label (alternative to slot) |\n * | disabled | boolean | false | Disabled state |\n * | loading | boolean | false | Loading state |\n * | outlined | boolean | false | Outlined variant |\n * | expanded | boolean | false | Full width |\n * \n * ## Events\n * | Event | Payload | Description |\n * |-------|---------|-------------|\n * | button-click | void | Emitted on button click |\n * | hover-enter | void | Emitted on mouse enter |\n * | hover-leave | void | Emitted on mouse leave |\n * \n * ## Slots\n * | Slot | Description |\n * |------|-------------|\n * | default | Button content |\n * | leading-icon | Icon before content |\n * | trailing-icon | Icon after content |\n * | badge | Badge overlay (positioned top-right) |\n * \n * @module components/UiButton\n * @see {@link ButtonType} for prop interface\n */\nimport { computed, defineAsyncComponent, ref, onMounted, watch, nextTick } from 'vue';\nimport type { ButtonType } from '../types/ui';\nimport type { RoundedType, Theme } from '../types/core';\n\n// Asynchronously load the Loading component\nconst Loading = defineAsyncComponent(() => import('./UiLoading.vue'));\n\n// Define props using the ButtonType interface\ninterface ButtonProps extends ButtonType {\n  replaceLeadingIconWithLoading?: boolean;\n  centerLeadingIcon?: boolean;\n  /**\n   * When enabled, shows loading indicator in trailing position instead of overlay\n   */\n  trailingLoading?: boolean;\n  /**\n   * Size of the loading indicator when using trailingLoading\n   */\n  trailingLoadingSize?: import('../types/core').Size;\n  /**\n   * Positions trailing loading/icon absolutely at the far right, centered vertically.\n   */\n  trailingOverlay?: boolean;\n  /**\n   * When enabled the button will attempt to automatically choose a contrasting\n   * colour theme if its background matches that of its closest non-transparent\n   * ancestor.\n   */\n  autoContrast?: boolean;\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  theme: 'primary',\n  size: 'md',\n  rounded: 'rounded-md',\n  disabled: false,\n  expanded: false,\n  outlined: false,\n  loading: false,\n  leadingIcon: false,\n  trailingIcon: false,\n  showLoadingTitle: false,\n  truncateLabel: false,\n  centerLabel: false,\n  inlineFlex: false,\n  replaceLeadingIconWithLoading: false,\n  centerLeadingIcon: false,\n  trailingLoading: false,\n  trailingOverlay: false,\n  autoContrast: false,\n});\n\n// Define the emits\nconst emit = defineEmits<{\n  'button-click': []\n  'hover-enter': []\n  'hover-leave': []\n}>();\n\n// Reactive computed properties\nconst loading = computed(() => Boolean(props.loading));\nconst replaceLeadingIconWithLoading = computed(() => props.replaceLeadingIconWithLoading || false);\n\n// Reference to the underlying button element\nconst buttonRef = ref<HTMLElement | null>(null);\n\n// Internal reactive theme value that may be overridden for auto-contrast\nconst resolvedTheme = ref<Theme>(props.theme ?? 'primary');\n\nconst findParentBackground = (node: HTMLElement | null): string | null => {\n  while (node && node !== document.documentElement) {\n    const bg = window.getComputedStyle(node).backgroundColor;\n    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {\n      return bg;\n    }\n    node = node.parentElement as HTMLElement | null;\n  }\n  return null;\n};\n\nconst adjustThemeBasedOnBackground = (): void => {\n  if (!props.autoContrast) return;\n  const el = buttonRef.value;\n  if (!el) return;\n\n  const parentBg = findParentBackground(el.parentElement as HTMLElement | null);\n  if (!parentBg) return;\n\n  const buttonBg = window.getComputedStyle(el).backgroundColor;\n\n  if (buttonBg === parentBg) {\n    resolvedTheme.value = resolvedTheme.value === 'light' ? 'primary' : 'light';\n  }\n};\n\nonMounted(() => {\n  nextTick(adjustThemeBasedOnBackground);\n});\n\nwatch(\n  () => props.theme,\n  (newTheme) => {\n    resolvedTheme.value = newTheme || 'primary';\n    nextTick(adjustThemeBasedOnBackground);\n  },\n  { immediate: false }\n);\n\n// Public computed theme\nconst theme = computed(() => resolvedTheme.value);\n\n// Compute loading size with fallback\nconst loadingSize = computed(() => props.loadingSize || props.size || 'md');\n\n// Determine loading theme based on button theme for proper contrast\nconst loadingTheme = computed(() => {\n  // For filled buttons with dark backgrounds, use light/white spinner\n  const darkBgThemes = ['primary', 'dark', 'danger', 'success', 'warning'];\n  if (!props.outlined && darkBgThemes.includes(theme.value)) {\n    return 'light'; // Light spinner on dark background\n  }\n  // For outlined or light buttons, use the button's theme color\n  return theme.value;\n});\n\n// Loading overlay classes based on button theme\nconst loadingOverlayClasses = computed(() => {\n  // For filled dark buttons, use semi-transparent dark overlay\n  const darkBgThemes = ['primary', 'dark', 'danger', 'success', 'warning'];\n  if (!props.outlined && darkBgThemes.includes(theme.value)) {\n    return 'sl-bg-black/20';\n  }\n  // For light/outlined buttons, use semi-transparent white/dark overlay\n  return 'sl-bg-white/75 dark:sl-bg-slate-900/75';\n});\n\n// Styling computed properties\nconst colorClass = computed(() => {\n  const outlineBaseClasses: Record<string, string> = {\n    primary: 'sl-text-stachelock-600 dark:sl-text-stachelock-400 sl-border sl-border-stachelock-600 dark:sl-border-stachelock-500 hover:sl-bg-stachelock-50 dark:hover:sl-bg-stachelock-900/30 hover:sl-border-stachelock-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-stachelock-300 dark:focus:sl-ring-stachelock-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    dark: 'sl-text-gray-700 dark:sl-text-gray-300 sl-border sl-border-gray-700 dark:sl-border-gray-500 hover:sl-bg-gray-50 dark:hover:sl-bg-gray-800 hover:sl-border-gray-800 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-gray-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    secondary: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    light: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-gray-300 dark:sl-border-slate-600 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    warning: 'sl-text-yellow-500 dark:sl-text-yellow-400 sl-border sl-border-yellow-500 dark:sl-border-yellow-500 hover:sl-bg-yellow-50 dark:hover:sl-bg-yellow-900/20 hover:sl-border-yellow-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-300 dark:focus:sl-ring-yellow-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    danger: 'sl-text-red-500 dark:sl-text-red-400 sl-border sl-border-red-500 dark:sl-border-red-500 hover:sl-bg-red-50 dark:hover:sl-bg-red-900/20 hover:sl-border-red-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-300 dark:focus:sl-ring-red-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    success: 'sl-text-green-500 dark:sl-text-green-400 sl-border sl-border-green-500 dark:sl-border-green-500 hover:sl-bg-green-50 dark:hover:sl-bg-green-900/20 hover:sl-border-green-400 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-300 dark:focus:sl-ring-green-600 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    ghost: 'sl-text-gray-800 dark:sl-text-gray-200 sl-border sl-border-transparent sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none',\n  };\n\n  const filledBaseClasses: Record<string, string> = {\n    primary: 'sl-border sl-border-transparent sl-text-white sl-shadow-sm focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    dark: 'sl-border sl-border-transparent sl-bg-gray-700 dark:sl-bg-gray-600 sl-text-white sl-shadow-sm hover:sl-bg-gray-800 dark:hover:sl-bg-gray-500 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    secondary: 'sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600',\n    light: 'sl-text-gray-800 dark:sl-text-gray-200 sl-bg-gray-200 dark:sl-bg-slate-700 hover:sl-bg-gray-100 dark:hover:sl-bg-slate-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-gray-300 dark:focus:sl-ring-slate-500 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900 sl-border sl-border-gray-300 dark:sl-border-slate-600',\n    warning: 'sl-border sl-border-transparent sl-bg-yellow-400 dark:sl-bg-yellow-500 sl-text-white sl-shadow-sm hover:sl-bg-yellow-600 dark:hover:sl-bg-yellow-600 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-yellow-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    danger: 'sl-border sl-border-transparent sl-bg-red-500 dark:sl-bg-red-600 sl-text-white sl-shadow-sm hover:sl-bg-red-600 dark:hover:sl-bg-red-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-red-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    success: 'sl-border sl-border-transparent sl-bg-green-500 dark:sl-bg-green-600 sl-text-white sl-shadow-sm hover:sl-bg-green-600 dark:hover:sl-bg-green-700 focus:sl-outline-none focus:sl-ring-2 focus:sl-ring-green-400 focus:sl-ring-offset-2 focus:sl-ring-offset-white dark:focus:sl-ring-offset-slate-900',\n    ghost: 'sl-border sl-border-transparent sl-text-gray-800 dark:sl-text-gray-200 sl-bg-transparent hover:sl-text-gray-700 dark:hover:sl-text-white hover:sl-bg-gray-100 dark:hover:sl-bg-slate-700 focus:sl-outline-none',\n  };\n\n  if (props.outlined) {\n    return `${outlineBaseClasses[theme.value] || ''} sl-bg-transparent dark:sl-bg-transparent`;\n  } else {\n    return filledBaseClasses[theme.value] || '';\n  }\n});\n\nconst roundedClassMap: Record<RoundedType, string> = {\n  square: '',\n  rounded: 'sl-rounded',\n  'rounded-md': 'sl-rounded-md',\n  'rounded-lg': 'sl-rounded-lg',\n  'rounded-full': 'sl-rounded-full',\n};\n\nconst roundedClass = computed(() => roundedClassMap[props.rounded || 'rounded-md']);\n\n// Separate horizontal and vertical padding for better control\nconst sizeClass = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-px-2 sl-py-1',\n    sm: 'sl-px-2.5 sl-py-1.5',\n    md: 'sl-px-3 sl-py-1.5',\n    lg: 'sl-px-4 sl-py-2',\n    xl: 'sl-px-5 sl-py-2.5',\n    '2xl': 'sl-px-6 sl-py-3',\n  };\n  return sizeMapping[props.size || 'md'];\n});\n\nconst textClass = computed(() => {\n  const textMapping: Record<string, string> = {\n    xs: 'sl-text-xs sl-font-regular',\n    sm: 'sl-text-sm sl-font-regular',\n    md: 'sl-text-base sl-font-medium',\n    lg: 'sl-text-lg sl-font-medium',\n    xl: 'sl-text-xl sl-font-medium',\n    '2xl': 'sl-text-2xl sl-font-medium',\n  };\n  return textMapping[props.size || 'sm'];\n});\n\nconst expandedClass = computed(() => (props.expanded ? 'sl-w-full' : ''));\n\nconst isLabelPresent = computed(() => !!props.label && props.label.length > 0);\n\n// Determine if this is an icon-only button (leading/trailing icon with no label)\nconst isIconOnly = computed(() => {\n  return !isLabelPresent.value && (props.leadingIcon || props.trailingIcon);\n});\n\nconst buttonClasses = computed(() => {\n  if (props.customClass) {\n    return props.customClass;\n  }\n\n  const coreClasses = [\n    roundedClass.value,\n    sizeClass.value,\n    textClass.value,\n    expandedClass.value,\n    colorClass.value,\n    props.disabled ? 'sl-cursor-not-allowed' : 'sl-cursor-pointer',\n    'focus:sl-ring-0',\n    'sl-relative',\n    'sl-flex',\n    'sl-items-center',\n    'sl-justify-center',\n    'sl-gap-2', // Consistent spacing between icon and text\n  ];\n\n  const finalClasses = [...coreClasses];\n\n  // For icon-only buttons (no label/text), use equal padding for square proportions\n  if (!isLabelPresent.value && (props.leadingIcon || props.trailingIcon)) {\n    // Size-aware square padding for icon-only buttons\n    const iconOnlyPadding: Record<string, string> = {\n      xs: '!sl-p-1.5',\n      sm: '!sl-p-2',\n      md: '!sl-p-2.5',\n      lg: '!sl-p-3',\n      xl: '!sl-p-3.5',\n      '2xl': '!sl-p-4',\n    };\n    finalClasses.push(iconOnlyPadding[props.size || 'md'] || '!sl-p-2.5');\n  }\n\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    finalClasses.push('sl-w-full', 'sl-h-full');\n  } else {\n    if (props.leadingIcon || props.inlineFlex || props.trailingIcon) {\n      finalClasses.push('sl-inline-flex');\n    }\n  }\n\n  return finalClasses.filter(Boolean);\n});\n\nconst buttonStyles = computed(() => {\n  if (props.theme === 'primary') {\n    // Only apply background color for filled primary buttons, not outlined\n    if (props.outlined) {\n      return {\n        color: 'var(--sl-color-primary-600, #3e4b9a)',\n        borderColor: 'var(--sl-color-primary-600, #3e4b9a)',\n        '--tw-ring-color': 'var(--sl-color-primary-500, #4d5ec0)',\n      };\n    }\n    return {\n      backgroundColor: 'var(--sl-color-primary-600, #3e4b9a)',\n      '--tw-ring-color': 'var(--sl-color-primary-500, #4d5ec0)',\n    };\n  }\n  return {};\n});\n\n// Gap on parent handles spacing, no margins needed\nconst trailingBaseClasses = 'sl-flex sl-items-center sl-flex-shrink-0';\nconst trailingAbsoluteClasses = 'sl-absolute sl-right-2 sl-top-1/2 -sl-translate-y-1/2 sl-flex sl-items-center sl-flex-shrink-0';\nconst trailingLoadingClasses = computed(() => props.trailingOverlay ? trailingAbsoluteClasses : trailingBaseClasses);\nconst trailingIconClasses = computed(() => props.trailingOverlay ? `${trailingAbsoluteClasses}` : 'sl-flex sl-items-center sl-flex-shrink-0');\n\nconst leadingIconClasses = computed(() => {\n  if (props.centerLeadingIcon && !isLabelPresent.value) {\n    return 'sl-absolute sl-inset-0 sl-flex sl-items-center sl-justify-center sl-w-full sl-h-full';\n  }\n  if (props.centerLeadingIcon) {\n    return 'sl-h-full sl-flex sl-items-center sl-justify-center';\n  }\n  if (!isLabelPresent.value) {\n    return 'sl-flex sl-items-center sl-justify-center';\n  }\n  // Gap on parent handles spacing\n  return 'sl-flex sl-items-center sl-justify-center sl-flex-shrink-0';\n});\n\nconst onClick = (): void => {\n  emit('button-click');\n};\n\nconst onMouseEnter = (): void => {\n  emit('hover-enter');\n};\n\nconst onMouseLeave = (): void => {\n  emit('hover-leave');\n};\n\nconst showLoadingTitle = props.showLoadingTitle || false;\n</script>\n\n<style scoped>\n/* Filled primary button hover */\nbutton[data-theme=\"primary\"]:not([data-outlined]):hover {\n  background-color: var(--sl-color-primary-700, #2e3873) !important;\n}\n\n/* Outlined primary button hover - subtle background */\nbutton[data-theme=\"primary\"][data-outlined]:hover {\n  background-color: rgb(var(--sl-color-primary-50-rgb, 237 239 249) / 0.5) !important;\n}\n\n/* Dark mode: Outlined primary button hover */\n:global(.dark) button[data-theme=\"primary\"][data-outlined]:hover {\n  background-color: rgb(var(--sl-color-primary-900-rgb, 15 19 38) / 0.3) !important;\n}\n</style>\n\n\n"],"names":["trailingBaseClasses","trailingAbsoluteClasses","Loading","defineAsyncComponent","props","__props","emit","__emit","loading","computed","replaceLeadingIconWithLoading","buttonRef","ref","resolvedTheme","findParentBackground","node","bg","adjustThemeBasedOnBackground","el","parentBg","onMounted","nextTick","watch","newTheme","theme","loadingSize","loadingTheme","darkBgThemes","loadingOverlayClasses","colorClass","outlineBaseClasses","filledBaseClasses","roundedClassMap","roundedClass","sizeClass","textClass","expandedClass","isLabelPresent","isIconOnly","buttonClasses","finalClasses","iconOnlyPadding","buttonStyles","trailingLoadingClasses","trailingIconClasses","leadingIconClasses","onClick","onMouseEnter","onMouseLeave","showLoadingTitle","_createElementBlock","_renderSlot","_ctx","_Fragment","_normalizeClass","_createVNode","_unref","truncateLabel","_toDisplayString","_createElementVNode","_hoisted_2","_hoisted_3"],"mappings":"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"}

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,3 @@
+export * from '../src/components/UiButtonGroup'
+import StachelockUI from '../src/components/UiButtonGroup'
+export default StachelockUI

package/dist/components/ButtonGroup.js

@@ -0,0 +1,5 @@
+import { _ as f } from "../UiButtonGroup.vue_vue_type_script_setup_true_lang-BKyznfxi.js";
+export {
+  f as default
+};
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/components/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,3 @@
+export * from '../src/components/UiCheckbox'
+import StachelockUI from '../src/components/UiCheckbox'
+export default StachelockUI

package/dist/components/Checkbox.js

@@ -0,0 +1,5 @@
+import { _ as f } from "../UiCheckbox.vue_vue_type_script_setup_true_lang-B5fPB7PH.js";
+export {
+  f as default
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/CloudinaryImage.d.ts

@@ -0,0 +1,3 @@
+export * from '../src/components/CloudinaryImage'
+import StachelockUI from '../src/components/CloudinaryImage'
+export default StachelockUI