@stachelock/ui 0.2.13 → 0.3.0

package/dist/UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js

@@ -0,0 +1,88 @@
+import { defineComponent as y, computed as e, createElementBlock as o, openBlock as n, normalizeClass as t, createCommentVNode as g, renderSlot as v, createElementVNode as d } from "vue";
+const x = /* @__PURE__ */ y({
+  __name: "UiBadge",
+  props: {
+    color: { default: "gray" },
+    size: { default: "md" },
+    dot: { type: Boolean, default: !1 },
+    removable: { type: Boolean, default: !1 }
+  },
+  emits: ["remove"],
+  setup(a) {
+    const r = a, i = e(() => ({
+      gray: "sl-bg-gray-100 dark:sl-bg-gray-800 sl-text-gray-700 dark:sl-text-gray-300 sl-ring-gray-500/20 dark:sl-ring-gray-500/30",
+      red: "sl-bg-red-50 dark:sl-bg-red-900/30 sl-text-red-700 dark:sl-text-red-400 sl-ring-red-600/20 dark:sl-ring-red-500/30",
+      yellow: "sl-bg-yellow-50 dark:sl-bg-yellow-900/30 sl-text-yellow-800 dark:sl-text-yellow-400 sl-ring-yellow-600/20 dark:sl-ring-yellow-500/30",
+      green: "sl-bg-green-50 dark:sl-bg-green-900/30 sl-text-green-700 dark:sl-text-green-400 sl-ring-green-600/20 dark:sl-ring-green-500/30",
+      blue: "sl-bg-blue-50 dark:sl-bg-blue-900/30 sl-text-blue-700 dark:sl-text-blue-400 sl-ring-blue-600/20 dark:sl-ring-blue-500/30",
+      indigo: "sl-bg-indigo-50 dark:sl-bg-indigo-900/30 sl-text-indigo-700 dark:sl-text-indigo-400 sl-ring-indigo-600/20 dark:sl-ring-indigo-500/30",
+      purple: "sl-bg-purple-50 dark:sl-bg-purple-900/30 sl-text-purple-700 dark:sl-text-purple-400 sl-ring-purple-600/20 dark:sl-ring-purple-500/30",
+      pink: "sl-bg-pink-50 dark:sl-bg-pink-900/30 sl-text-pink-700 dark:sl-text-pink-400 sl-ring-pink-600/20 dark:sl-ring-pink-500/30"
+    })[r.color]), p = e(() => ({
+      sm: "sl-px-2 sl-py-0.5 sl-text-xs",
+      md: "sl-px-2.5 sl-py-0.5 sl-text-xs",
+      lg: "sl-px-3 sl-py-1 sl-text-sm"
+    })[r.size]), b = e(() => [
+      "sl-h-1.5 sl-w-1.5 sl-rounded-full sl-mr-1.5",
+      {
+        gray: "sl-bg-gray-500",
+        red: "sl-bg-red-500",
+        yellow: "sl-bg-yellow-500",
+        green: "sl-bg-green-500",
+        blue: "sl-bg-blue-500",
+        indigo: "sl-bg-indigo-500",
+        purple: "sl-bg-purple-500",
+        pink: "sl-bg-pink-500"
+      }[r.color]
+    ]), u = e(() => [
+      "sl-ml-1 sl-rounded-sm sl-p-0.5 sl-transition-colors",
+      {
+        gray: "hover:sl-bg-gray-200 dark:hover:sl-bg-gray-700",
+        red: "hover:sl-bg-red-100 dark:hover:sl-bg-red-800/50",
+        yellow: "hover:sl-bg-yellow-100 dark:hover:sl-bg-yellow-800/50",
+        green: "hover:sl-bg-green-100 dark:hover:sl-bg-green-800/50",
+        blue: "hover:sl-bg-blue-100 dark:hover:sl-bg-blue-800/50",
+        indigo: "hover:sl-bg-indigo-100 dark:hover:sl-bg-indigo-800/50",
+        purple: "hover:sl-bg-purple-100 dark:hover:sl-bg-purple-800/50",
+        pink: "hover:sl-bg-pink-100 dark:hover:sl-bg-pink-800/50"
+      }[r.color]
+    ]), k = e(() => [
+      "sl-inline-flex sl-items-center sl-font-medium sl-rounded-full sl-ring-1 sl-ring-inset",
+      i.value,
+      p.value
+    ]);
+    return (l, s) => (n(), o("span", {
+      class: t(k.value)
+    }, [
+      l.dot ? (n(), o("span", {
+        key: 0,
+        class: t(b.value)
+      }, null, 2)) : g("", !0),
+      v(l.$slots, "default"),
+      l.removable ? (n(), o("button", {
+        key: 1,
+        type: "button",
+        onClick: s[0] || (s[0] = (m) => l.$emit("remove")),
+        class: t(u.value)
+      }, s[1] || (s[1] = [
+        d("svg", {
+          class: "sl-h-3 sl-w-3",
+          viewBox: "0 0 14 14",
+          fill: "currentColor"
+        }, [
+          d("path", {
+            d: "M4 4l6 6m0-6l-6 6",
+            stroke: "currentColor",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round",
+            fill: "none"
+          })
+        ], -1)
+      ]), 2)) : g("", !0)
+    ], 2));
+  }
+});
+export {
+  x as _
+};
+//# sourceMappingURL=UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js.map

package/dist/UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.js","sources":["../src/components/UiBadge.vue"],"sourcesContent":["<!--\n  @component UiBadge\n  @description Status indicators, labels, and notification counts.\n  \n  @props\n  - color: Color variant (gray, red, yellow, green, blue, indigo, purple, pink)\n  - size: Size variant (sm, md, lg)\n  - dot: Show leading status dot\n  - removable: Show remove button\n  \n  @emits\n  - remove: Emitted when remove button is clicked\n  \n  @slots\n  - default: Badge content\n-->\n<template>\n  <span :class=\"badgeClasses\">\n    <!-- Status Dot -->\n    <span v-if=\"dot\" :class=\"dotClasses\" />\n    \n    <!-- Content -->\n    <slot />\n    \n    <!-- Remove Button -->\n    <button\n      v-if=\"removable\"\n      type=\"button\"\n      @click=\"$emit('remove')\"\n      :class=\"removeButtonClasses\"\n    >\n      <svg class=\"sl-h-3 sl-w-3\" viewBox=\"0 0 14 14\" fill=\"currentColor\">\n        <path d=\"M4 4l6 6m0-6l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" fill=\"none\" />\n      </svg>\n    </button>\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\n\ntype BadgeColor = 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';\ntype BadgeSize = 'sm' | 'md' | 'lg';\n\ninterface BadgeProps {\n  color?: BadgeColor;\n  size?: BadgeSize;\n  dot?: boolean;\n  removable?: boolean;\n}\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n  color: 'gray',\n  size: 'md',\n  dot: false,\n  removable: false,\n});\n\ndefineEmits<{\n  remove: [];\n}>();\n\n// Color classes for each variant\nconst colorClasses = computed(() => {\n  const colors: Record<BadgeColor, string> = {\n    gray: 'sl-bg-gray-100 dark:sl-bg-gray-800 sl-text-gray-700 dark:sl-text-gray-300 sl-ring-gray-500/20 dark:sl-ring-gray-500/30',\n    red: 'sl-bg-red-50 dark:sl-bg-red-900/30 sl-text-red-700 dark:sl-text-red-400 sl-ring-red-600/20 dark:sl-ring-red-500/30',\n    yellow: 'sl-bg-yellow-50 dark:sl-bg-yellow-900/30 sl-text-yellow-800 dark:sl-text-yellow-400 sl-ring-yellow-600/20 dark:sl-ring-yellow-500/30',\n    green: 'sl-bg-green-50 dark:sl-bg-green-900/30 sl-text-green-700 dark:sl-text-green-400 sl-ring-green-600/20 dark:sl-ring-green-500/30',\n    blue: 'sl-bg-blue-50 dark:sl-bg-blue-900/30 sl-text-blue-700 dark:sl-text-blue-400 sl-ring-blue-600/20 dark:sl-ring-blue-500/30',\n    indigo: 'sl-bg-indigo-50 dark:sl-bg-indigo-900/30 sl-text-indigo-700 dark:sl-text-indigo-400 sl-ring-indigo-600/20 dark:sl-ring-indigo-500/30',\n    purple: 'sl-bg-purple-50 dark:sl-bg-purple-900/30 sl-text-purple-700 dark:sl-text-purple-400 sl-ring-purple-600/20 dark:sl-ring-purple-500/30',\n    pink: 'sl-bg-pink-50 dark:sl-bg-pink-900/30 sl-text-pink-700 dark:sl-text-pink-400 sl-ring-pink-600/20 dark:sl-ring-pink-500/30',\n  };\n  return colors[props.color];\n});\n\n// Size classes\nconst sizeClasses = computed(() => {\n  const sizes: Record<BadgeSize, string> = {\n    sm: 'sl-px-2 sl-py-0.5 sl-text-xs',\n    md: 'sl-px-2.5 sl-py-0.5 sl-text-xs',\n    lg: 'sl-px-3 sl-py-1 sl-text-sm',\n  };\n  return sizes[props.size];\n});\n\n// Dot color classes\nconst dotClasses = computed(() => {\n  const dotColors: Record<BadgeColor, string> = {\n    gray: 'sl-bg-gray-500',\n    red: 'sl-bg-red-500',\n    yellow: 'sl-bg-yellow-500',\n    green: 'sl-bg-green-500',\n    blue: 'sl-bg-blue-500',\n    indigo: 'sl-bg-indigo-500',\n    purple: 'sl-bg-purple-500',\n    pink: 'sl-bg-pink-500',\n  };\n  return [\n    'sl-h-1.5 sl-w-1.5 sl-rounded-full sl-mr-1.5',\n    dotColors[props.color]\n  ];\n});\n\n// Remove button classes (hover matches badge color)\nconst removeButtonClasses = computed(() => {\n  const hoverColors: Record<BadgeColor, string> = {\n    gray: 'hover:sl-bg-gray-200 dark:hover:sl-bg-gray-700',\n    red: 'hover:sl-bg-red-100 dark:hover:sl-bg-red-800/50',\n    yellow: 'hover:sl-bg-yellow-100 dark:hover:sl-bg-yellow-800/50',\n    green: 'hover:sl-bg-green-100 dark:hover:sl-bg-green-800/50',\n    blue: 'hover:sl-bg-blue-100 dark:hover:sl-bg-blue-800/50',\n    indigo: 'hover:sl-bg-indigo-100 dark:hover:sl-bg-indigo-800/50',\n    purple: 'hover:sl-bg-purple-100 dark:hover:sl-bg-purple-800/50',\n    pink: 'hover:sl-bg-pink-100 dark:hover:sl-bg-pink-800/50',\n  };\n  return [\n    'sl-ml-1 sl-rounded-sm sl-p-0.5 sl-transition-colors',\n    hoverColors[props.color]\n  ];\n});\n\n// Combined badge classes\nconst badgeClasses = computed(() => [\n  'sl-inline-flex sl-items-center sl-font-medium sl-rounded-full sl-ring-1 sl-ring-inset',\n  colorClasses.value,\n  sizeClasses.value,\n]);\n</script>\n"],"names":["props","__props","colorClasses","computed","sizeClasses","dotClasses","removeButtonClasses","badgeClasses","_createElementBlock","dot","_renderSlot","_ctx","removable","$emit","_createElementVNode"],"mappings":";;;;;;;;;;;AAmDA,UAAMA,IAAQC,GAYRC,IAAeC,EAAS,OACe;AAAA,MACzC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,GAEMH,EAAM,KAAK,CAC1B,GAGKI,IAAcD,EAAS,OACc;AAAA,MACvC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAEOH,EAAM,IAAI,CACxB,GAGKK,IAAaF,EAAS,MAWnB;AAAA,MACL;AAAA,MAX4C;AAAA,QAC5C,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA,EAIIH,EAAM,KAAK;AAAA,IAAA,CAExB,GAGKM,IAAsBH,EAAS,MAW5B;AAAA,MACL;AAAA,MAX8C;AAAA,QAC9C,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA,EAIMH,EAAM,KAAK;AAAA,IAAA,CAE1B,GAGKO,IAAeJ,EAAS,MAAM;AAAA,MAClC;AAAA,MACAD,EAAa;AAAA,MACbE,EAAY;AAAA,IAAA,CACb;2BA/GCI,EAkBO,QAAA;AAAA,MAlBA,SAAOD,EAAA,KAAY;AAAA,IAAA;MAEZE,EAAAA,YAAZD,EAAuC,QAAA;AAAA;QAArB,SAAOH,EAAA,KAAU;AAAA,MAAA;MAGnCK,EAAQC,EAAA,QAAA,SAAA;AAAA,MAIAC,EAAAA,kBADRJ,EASS,UAAA;AAAA;QAPP,MAAK;AAAA,QACJ,gCAAOK,EAAAA,MAAK,QAAA;AAAA,QACZ,SAAOP,EAAA,KAAmB;AAAA,MAAA;QAE3BQ,EAEM,OAAA;AAAA,UAFD,OAAM;AAAA,UAAgB,SAAQ;AAAA,UAAY,MAAK;AAAA,QAAA;UAClDA,EAA0G,QAAA;AAAA,YAApG,GAAE;AAAA,YAAoB,QAAO;AAAA,YAAe,gBAAa;AAAA,YAAM,kBAAe;AAAA,YAAQ,MAAK;AAAA,UAAA;;;;;;"}

package/dist/UiButtonGroup.vue_vue_type_script_setup_true_lang-BKyznfxi.js

@@ -0,0 +1,108 @@
+import { defineComponent as z, computed as m, createElementBlock as o, openBlock as i, normalizeClass as c, Fragment as b, renderList as B, createBlock as V, createCommentVNode as g, createElementVNode as d, resolveDynamicComponent as _, toDisplayString as D } from "vue";
+const I = ["disabled", "onClick", "aria-pressed"], S = {
+  key: 0,
+  class: "sl-inline-flex sl-items-center"
+}, A = /* @__PURE__ */ z({
+  __name: "UiButtonGroup",
+  props: {
+    buttons: {},
+    modelValue: { default: null },
+    size: { default: "md" },
+    theme: { default: "primary" },
+    disabled: { type: Boolean, default: !1 },
+    fullWidth: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "click"],
+  setup(h, { emit: f }) {
+    const t = h, p = f, n = (s) => t.modelValue === s.value, y = m(() => ({
+      xs: "sl-px-2 sl-py-1 sl-text-xs",
+      sm: "sl-px-2.5 sl-py-1.5 sl-text-sm",
+      md: "sl-px-3 sl-py-2 sl-text-sm",
+      lg: "sl-px-4 sl-py-2.5 sl-text-base"
+    })[t.size]), k = m(() => ({
+      default: "sl-text-gray-900 sl-bg-gray-100 dark:sl-text-white dark:sl-bg-gray-700",
+      primary: "sl-text-stachelock-600 sl-bg-stachelock-50 dark:sl-text-stachelock-400 dark:sl-bg-stachelock-900/30",
+      secondary: "sl-text-gray-700 sl-bg-gray-50 dark:sl-text-gray-300 dark:sl-bg-gray-800"
+    })[t.theme]), x = (s, r) => {
+      const e = r === 0, l = r === t.buttons.length - 1, u = n(s), w = s.disabled || s.loading || t.disabled, a = [
+        "sl-inline-flex",
+        "sl-items-center",
+        "sl-font-medium",
+        "sl-border",
+        "sl-border-gray-300",
+        "dark:sl-border-gray-600",
+        "sl-transition-colors",
+        "focus:sl-z-10",
+        "focus:sl-outline-none",
+        "focus:sl-ring-2",
+        "focus:sl-ring-stachelock-500",
+        "focus:sl-ring-offset-1",
+        y.value
+      ];
+      return t.fullWidth && a.push("sl-flex-1", "sl-justify-center"), e ? a.push("sl-rounded-l-md") : a.push("-sl-ml-px"), l && a.push("sl-rounded-r-md"), u ? a.push(s.activeClass || k.value) : a.push(
+        "sl-text-gray-700",
+        "dark:sl-text-gray-300",
+        "sl-bg-white",
+        "dark:sl-bg-gray-800",
+        "hover:sl-bg-gray-50",
+        "dark:hover:sl-bg-gray-700"
+      ), w ? a.push("sl-cursor-not-allowed", "sl-opacity-50") : a.push("sl-cursor-pointer"), a;
+    }, v = (s) => {
+      const r = n(s), l = [{
+        xs: "sl-w-3.5 sl-h-3.5",
+        sm: "sl-w-4 sl-h-4",
+        md: "sl-w-5 sl-h-5",
+        lg: "sl-w-5 sl-h-5"
+      }[t.size]];
+      return r && s.activeIconClass ? l.push(s.activeIconClass) : r ? l.push("sl-text-stachelock-600", "dark:sl-text-stachelock-400") : l.push("sl-text-gray-500", "dark:sl-text-gray-400"), l;
+    }, C = (s) => {
+      !s.disabled && !s.loading && !t.disabled && (p("update:modelValue", s.value), p("click", s));
+    };
+    return (s, r) => (i(), o("div", {
+      class: c(["sl-inline-flex sl-rounded-md sl-shadow-sm", { "sl-w-full": s.fullWidth }]),
+      role: "group"
+    }, [
+      (i(!0), o(b, null, B(s.buttons, (e, l) => (i(), o("button", {
+        key: e.value ?? l,
+        type: "button",
+        disabled: e.disabled || e.loading || s.disabled,
+        class: c(x(e, l)),
+        onClick: (u) => C(e),
+        "aria-pressed": n(e)
+      }, [
+        e.loading ? (i(), o("span", S, r[0] || (r[0] = [
+          d("svg", {
+            class: "sl-animate-spin sl-h-4 sl-w-4",
+            fill: "none",
+            viewBox: "0 0 24 24"
+          }, [
+            d("circle", {
+              class: "sl-opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              "stroke-width": "4"
+            }),
+            d("path", {
+              class: "sl-opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            })
+          ], -1)
+        ]))) : e.icon ? (i(), V(_(e.icon), {
+          key: 1,
+          class: c(v(e))
+        }, null, 8, ["class"])) : g("", !0),
+        e.label && !e.loading ? (i(), o("span", {
+          key: 2,
+          class: c({ "sl-ml-1.5": e.icon })
+        }, D(e.label), 3)) : g("", !0)
+      ], 10, I))), 128))
+    ], 2));
+  }
+});
+export {
+  A as _
+};
+//# sourceMappingURL=UiButtonGroup.vue_vue_type_script_setup_true_lang-BKyznfxi.js.map

package/dist/UiButtonGroup.vue_vue_type_script_setup_true_lang-BKyznfxi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiButtonGroup.vue_vue_type_script_setup_true_lang-BKyznfxi.js","sources":["../src/components/UiButtonGroup.vue"],"sourcesContent":["<!--\n  @component ButtonGroup\n  @description A group of buttons with connected styling and active state support.\n  \n  A flexible button group component that displays multiple buttons in a connected\n  row with support for active states, icons, loading states, and various themes.\n  \n  @props\n  - buttons (ButtonGroupItem[]): Array of button configurations\n  - modelValue (string | number, optional): Currently active button value (v-model)\n  - size ('xs' | 'sm' | 'md' | 'lg'): Button size\n  - theme ('default' | 'primary' | 'secondary'): Color theme for active state\n  - disabled (boolean): Disable all buttons\n  - fullWidth (boolean): Make button group span full width\n  \n  @emits\n  - update:modelValue: Emitted when a button is clicked with the button value\n  - click: Emitted when any button is clicked with the button object\n  \n  @example\n  <ButtonGroup\n    v-model=\"selectedOption\"\n    :buttons=\"[\n      { value: 'list', label: 'List', icon: ListIcon },\n      { value: 'grid', label: 'Grid', icon: GridIcon },\n    ]\"\n  />\n-->\n<template>\n  <div \n    class=\"sl-inline-flex sl-rounded-md sl-shadow-sm\" \n    :class=\"{ 'sl-w-full': fullWidth }\"\n    role=\"group\"\n  >\n    <button\n      v-for=\"(button, index) in buttons\"\n      :key=\"button.value ?? index\"\n      type=\"button\"\n      :disabled=\"button.disabled || button.loading || disabled\"\n      :class=\"getButtonClasses(button, index)\"\n      @click=\"handleClick(button)\"\n      :aria-pressed=\"isActive(button)\"\n    >\n      <!-- Loading state -->\n      <span \n        v-if=\"button.loading\" \n        class=\"sl-inline-flex sl-items-center\"\n      >\n        <svg \n          class=\"sl-animate-spin sl-h-4 sl-w-4\" \n          fill=\"none\" \n          viewBox=\"0 0 24 24\"\n        >\n          <circle \n            class=\"sl-opacity-25\" \n            cx=\"12\" \n            cy=\"12\" \n            r=\"10\" \n            stroke=\"currentColor\" \n            stroke-width=\"4\" \n          />\n          <path \n            class=\"sl-opacity-75\" \n            fill=\"currentColor\" \n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" \n          />\n        </svg>\n      </span>\n      \n      <!-- Leading icon -->\n      <component \n        v-else-if=\"button.icon\" \n        :is=\"button.icon\" \n        :class=\"getIconClasses(button)\"\n      />\n      \n      <!-- Label -->\n      <span \n        v-if=\"button.label && !button.loading\" \n        :class=\"{ 'sl-ml-1.5': button.icon }\"\n      >\n        {{ button.label }}\n      </span>\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * ButtonGroup - Connected button group component\n * \n * @module components/UiButtonGroup\n */\nimport { computed, type Component } from 'vue';\n\ntype Size = 'xs' | 'sm' | 'md' | 'lg';\ntype Theme = 'default' | 'primary' | 'secondary';\n\ninterface ButtonGroupItem {\n  /** Unique value for the button */\n  value: string | number;\n  /** Display label */\n  label?: string;\n  /** Icon component */\n  icon?: Component;\n  /** Whether button is disabled */\n  disabled?: boolean;\n  /** Whether button is in loading state */\n  loading?: boolean;\n  /** Custom active class override */\n  activeClass?: string;\n  /** Custom icon class when active */\n  activeIconClass?: string;\n}\n\ninterface Props {\n  /** Array of button configurations */\n  buttons: ButtonGroupItem[];\n  /** Currently active button value */\n  modelValue?: string | number | null;\n  /** Button size */\n  size?: Size;\n  /** Color theme for active state */\n  theme?: Theme;\n  /** Disable all buttons */\n  disabled?: boolean;\n  /** Make button group span full width */\n  fullWidth?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: null,\n  size: 'md',\n  theme: 'primary',\n  disabled: false,\n  fullWidth: false,\n});\n\nconst emit = defineEmits<{\n  /** Emitted when a button is clicked */\n  'update:modelValue': [value: string | number];\n  /** Emitted when any button is clicked */\n  click: [button: ButtonGroupItem];\n}>();\n\n// Check if a button is active\nconst isActive = (button: ButtonGroupItem): boolean => {\n  return props.modelValue === button.value;\n};\n\n// Size-based padding classes\nconst sizeClasses = computed(() => {\n  const sizes: Record<Size, string> = {\n    xs: 'sl-px-2 sl-py-1 sl-text-xs',\n    sm: 'sl-px-2.5 sl-py-1.5 sl-text-sm',\n    md: 'sl-px-3 sl-py-2 sl-text-sm',\n    lg: 'sl-px-4 sl-py-2.5 sl-text-base',\n  };\n  return sizes[props.size];\n});\n\n// Theme-based active classes\nconst activeClasses = computed(() => {\n  const themes: Record<Theme, string> = {\n    default: 'sl-text-gray-900 sl-bg-gray-100 dark:sl-text-white dark:sl-bg-gray-700',\n    primary: 'sl-text-stachelock-600 sl-bg-stachelock-50 dark:sl-text-stachelock-400 dark:sl-bg-stachelock-900/30',\n    secondary: 'sl-text-gray-700 sl-bg-gray-50 dark:sl-text-gray-300 dark:sl-bg-gray-800',\n  };\n  return themes[props.theme];\n});\n\n// Get classes for a button\nconst getButtonClasses = (button: ButtonGroupItem, index: number): string[] => {\n  const isFirst = index === 0;\n  const isLast = index === props.buttons.length - 1;\n  const active = isActive(button);\n  const isDisabled = button.disabled || button.loading || props.disabled;\n\n  const classes: string[] = [\n    'sl-inline-flex',\n    'sl-items-center',\n    'sl-font-medium',\n    'sl-border',\n    'sl-border-gray-300',\n    'dark:sl-border-gray-600',\n    'sl-transition-colors',\n    'focus:sl-z-10',\n    'focus:sl-outline-none',\n    'focus:sl-ring-2',\n    'focus:sl-ring-stachelock-500',\n    'focus:sl-ring-offset-1',\n    sizeClasses.value,\n  ];\n\n  // Full width distribution\n  if (props.fullWidth) {\n    classes.push('sl-flex-1', 'sl-justify-center');\n  }\n\n  // Position-based rounding\n  if (isFirst) {\n    classes.push('sl-rounded-l-md');\n  } else {\n    classes.push('-sl-ml-px');\n  }\n  \n  if (isLast) {\n    classes.push('sl-rounded-r-md');\n  }\n\n  // Active state\n  if (active) {\n    classes.push(button.activeClass || activeClasses.value);\n  } else {\n    classes.push(\n      'sl-text-gray-700',\n      'dark:sl-text-gray-300',\n      'sl-bg-white',\n      'dark:sl-bg-gray-800',\n      'hover:sl-bg-gray-50',\n      'dark:hover:sl-bg-gray-700'\n    );\n  }\n\n  // Disabled state\n  if (isDisabled) {\n    classes.push('sl-cursor-not-allowed', 'sl-opacity-50');\n  } else {\n    classes.push('sl-cursor-pointer');\n  }\n\n  return classes;\n};\n\n// Get icon classes\nconst getIconClasses = (button: ButtonGroupItem): string[] => {\n  const active = isActive(button);\n  const iconSizes: Record<Size, string> = {\n    xs: 'sl-w-3.5 sl-h-3.5',\n    sm: 'sl-w-4 sl-h-4',\n    md: 'sl-w-5 sl-h-5',\n    lg: 'sl-w-5 sl-h-5',\n  };\n\n  const classes: string[] = [iconSizes[props.size]];\n  \n  if (active && button.activeIconClass) {\n    classes.push(button.activeIconClass);\n  } else if (active) {\n    classes.push('sl-text-stachelock-600', 'dark:sl-text-stachelock-400');\n  } else {\n    classes.push('sl-text-gray-500', 'dark:sl-text-gray-400');\n  }\n  \n  return classes;\n};\n\n// Handle button click\nconst handleClick = (button: ButtonGroupItem): void => {\n  if (!button.disabled && !button.loading && !props.disabled) {\n    emit('update:modelValue', button.value);\n    emit('click', button);\n  }\n};\n</script>\n"],"names":["props","__props","emit","__emit","isActive","button","sizeClasses","computed","activeClasses","getButtonClasses","index","isFirst","isLast","active","isDisabled","classes","getIconClasses","handleClick","_createElementBlock","_normalizeClass","fullWidth","_openBlock","_Fragment","_renderList","buttons","disabled","$event","_hoisted_2","_cache","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString"],"mappings":"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"}

package/dist/UiCheckbox.vue_vue_type_script_setup_true_lang-B5fPB7PH.js

@@ -0,0 +1,96 @@
+import { defineComponent as f, ref as g, computed as c, watch as k, onMounted as y, createElementBlock as n, openBlock as a, normalizeClass as i, createElementVNode as r, createCommentVNode as v, toDisplayString as w } from "vue";
+const z = { class: "sl-relative sl-flex sl-items-center sl-justify-center" }, C = ["id", "checked", "disabled", "indeterminate"], V = {
+  key: 0,
+  class: "sl-text-sm sl-text-slate-700 sl-select-none"
+}, E = /* @__PURE__ */ f({
+  __name: "UiCheckbox",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    indeterminate: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    label: {},
+    id: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(u, { expose: m, emit: p }) {
+    const l = u, o = p, s = g(), b = c(() => ({
+      sm: "sl-h-3.5 sl-w-3.5",
+      md: "sl-h-4 sl-w-4",
+      lg: "sl-h-5 sl-w-5"
+    })[l.size]), d = c(() => ({
+      sm: "sl-h-2.5 sl-w-2.5",
+      md: "sl-h-3 sl-w-3",
+      lg: "sl-h-3.5 sl-w-3.5"
+    })[l.size]);
+    k(
+      () => l.indeterminate,
+      (e) => {
+        s.value && (s.value.indeterminate = e);
+      }
+    ), y(() => {
+      s.value && l.indeterminate && (s.value.indeterminate = !0);
+    });
+    const h = (e) => {
+      const t = e.target;
+      o("update:modelValue", t.checked), o("change", t.checked);
+    };
+    return m({ toggle: () => {
+      l.disabled || (o("update:modelValue", !l.modelValue), o("change", !l.modelValue));
+    }, focus: () => s.value?.focus(), blur: () => s.value?.blur(), checkboxRef: s }), (e, t) => (a(), n("label", {
+      class: i(["sl-inline-flex sl-items-center sl-gap-2 sl-cursor-pointer", { "sl-cursor-not-allowed sl-opacity-50": e.disabled }])
+    }, [
+      r("div", z, [
+        r("input", {
+          ref_key: "checkboxRef",
+          ref: s,
+          type: "checkbox",
+          id: e.id,
+          checked: e.modelValue,
+          disabled: e.disabled,
+          indeterminate: e.indeterminate,
+          class: i(["sl-peer sl-appearance-none sl-rounded sl-border sl-border-slate-300 sl-bg-white sl-transition-all sl-duration-150", [
+            b.value,
+            !e.disabled && "hover:sl-border-slate-400 sl-cursor-pointer",
+            "checked:sl-bg-primary-600 checked:sl-border-primary-600",
+            "indeterminate:sl-bg-primary-600 indeterminate:sl-border-primary-600",
+            "focus:sl-ring-2 focus:sl-ring-primary-500 focus:sl-ring-offset-2 focus:sl-outline-none",
+            "disabled:sl-bg-slate-100 disabled:sl-border-slate-200 disabled:checked:sl-bg-slate-300 disabled:checked:sl-border-slate-300"
+          ]]),
+          onChange: h
+        }, null, 42, C),
+        (a(), n("svg", {
+          class: i(["sl-absolute sl-pointer-events-none sl-text-white sl-transition-opacity sl-duration-150", [d.value, e.modelValue && !e.indeterminate ? "sl-opacity-100" : "sl-opacity-0"]]),
+          viewBox: "0 0 14 14",
+          fill: "none"
+        }, t[0] || (t[0] = [
+          r("path", {
+            d: "M3 8L6 11L11 3.5",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, -1)
+        ]), 2)),
+        (a(), n("svg", {
+          class: i(["sl-absolute sl-pointer-events-none sl-text-white sl-transition-opacity sl-duration-150", [d.value, e.indeterminate ? "sl-opacity-100" : "sl-opacity-0"]]),
+          viewBox: "0 0 14 14",
+          fill: "none"
+        }, t[1] || (t[1] = [
+          r("path", {
+            d: "M3 7H11",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, -1)
+        ]), 2))
+      ]),
+      e.label ? (a(), n("span", V, w(e.label), 1)) : v("", !0)
+    ], 2));
+  }
+});
+export {
+  E as _
+};
+//# sourceMappingURL=UiCheckbox.vue_vue_type_script_setup_true_lang-B5fPB7PH.js.map

package/dist/UiCheckbox.vue_vue_type_script_setup_true_lang-B5fPB7PH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiCheckbox.vue_vue_type_script_setup_true_lang-B5fPB7PH.js","sources":["../src/components/UiCheckbox.vue"],"sourcesContent":["<!--\n  @component UiCheckbox\n  @description Simple checkbox for standalone use (tables, lists, etc.)\n  \n  For form checkboxes with validation, use CheckboxInput instead.\n  \n  @props\n  - modelValue: Checked state (v-model)\n  - indeterminate: Shows indeterminate state (for \"select all\" headers)\n  - disabled: Disabled state\n  - size: Checkbox size (sm, md, lg)\n  - label: Optional label text\n  - id: Optional id attribute\n  \n  @emits\n  - update:modelValue: Emitted when checked state changes\n  - change: Emitted with the new value\n-->\n<template>\n  <label \n    class=\"sl-inline-flex sl-items-center sl-gap-2 sl-cursor-pointer\"\n    :class=\"{ 'sl-cursor-not-allowed sl-opacity-50': disabled }\"\n  >\n    <div class=\"sl-relative sl-flex sl-items-center sl-justify-center\">\n      <input\n        ref=\"checkboxRef\"\n        type=\"checkbox\"\n        :id=\"id\"\n        :checked=\"modelValue\"\n        :disabled=\"disabled\"\n        :indeterminate=\"indeterminate\"\n        class=\"sl-peer sl-appearance-none sl-rounded sl-border sl-border-slate-300 sl-bg-white sl-transition-all sl-duration-150\"\n        :class=\"[\n          sizeClasses,\n          !disabled && 'hover:sl-border-slate-400 sl-cursor-pointer',\n          'checked:sl-bg-primary-600 checked:sl-border-primary-600',\n          'indeterminate:sl-bg-primary-600 indeterminate:sl-border-primary-600',\n          'focus:sl-ring-2 focus:sl-ring-primary-500 focus:sl-ring-offset-2 focus:sl-outline-none',\n          'disabled:sl-bg-slate-100 disabled:sl-border-slate-200 disabled:checked:sl-bg-slate-300 disabled:checked:sl-border-slate-300'\n        ]\"\n        @change=\"handleChange\"\n      />\n      <!-- Check icon -->\n      <svg\n        class=\"sl-absolute sl-pointer-events-none sl-text-white sl-transition-opacity sl-duration-150\"\n        :class=\"[iconSizeClasses, modelValue && !indeterminate ? 'sl-opacity-100' : 'sl-opacity-0']\"\n        viewBox=\"0 0 14 14\"\n        fill=\"none\"\n      >\n        <path\n          d=\"M3 8L6 11L11 3.5\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n      <!-- Indeterminate icon -->\n      <svg\n        class=\"sl-absolute sl-pointer-events-none sl-text-white sl-transition-opacity sl-duration-150\"\n        :class=\"[iconSizeClasses, indeterminate ? 'sl-opacity-100' : 'sl-opacity-0']\"\n        viewBox=\"0 0 14 14\"\n        fill=\"none\"\n      >\n        <path\n          d=\"M3 7H11\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    </div>\n    <span v-if=\"label\" class=\"sl-text-sm sl-text-slate-700 sl-select-none\">{{ label }}</span>\n  </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, onMounted } from 'vue';\n\ntype CheckboxSize = 'sm' | 'md' | 'lg';\n\ninterface Props {\n  modelValue?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  size?: CheckboxSize;\n  label?: string;\n  id?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: false,\n  indeterminate: false,\n  disabled: false,\n  size: 'md',\n});\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean];\n  'change': [value: boolean];\n}>();\n\nconst checkboxRef = ref<HTMLInputElement>();\n\n// Size classes\nconst sizeClasses = computed(() => {\n  const sizes: Record<CheckboxSize, string> = {\n    sm: 'sl-h-3.5 sl-w-3.5',\n    md: 'sl-h-4 sl-w-4',\n    lg: 'sl-h-5 sl-w-5',\n  };\n  return sizes[props.size];\n});\n\nconst iconSizeClasses = computed(() => {\n  const sizes: Record<CheckboxSize, string> = {\n    sm: 'sl-h-2.5 sl-w-2.5',\n    md: 'sl-h-3 sl-w-3',\n    lg: 'sl-h-3.5 sl-w-3.5',\n  };\n  return sizes[props.size];\n});\n\n// Handle indeterminate state (can't be set via attribute)\nwatch(\n  () => props.indeterminate,\n  (value) => {\n    if (checkboxRef.value) {\n      checkboxRef.value.indeterminate = value;\n    }\n  }\n);\n\nonMounted(() => {\n  if (checkboxRef.value && props.indeterminate) {\n    checkboxRef.value.indeterminate = true;\n  }\n});\n\nconst handleChange = (event: Event) => {\n  const target = event.target as HTMLInputElement;\n  emit('update:modelValue', target.checked);\n  emit('change', target.checked);\n};\n\n// Expose methods\nconst toggle = () => {\n  if (!props.disabled) {\n    emit('update:modelValue', !props.modelValue);\n    emit('change', !props.modelValue);\n  }\n};\n\nconst focus = () => checkboxRef.value?.focus();\nconst blur = () => checkboxRef.value?.blur();\n\ndefineExpose({ toggle, focus, blur, checkboxRef });\n</script>\n\n"],"names":["props","__props","emit","__emit","checkboxRef","ref","sizeClasses","computed","iconSizeClasses","watch","value","onMounted","handleChange","event","target","__expose","_createElementBlock","_normalizeClass","disabled","_createElementVNode","_hoisted_1","id","modelValue","indeterminate","label","_hoisted_3","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;AA2FA,UAAMA,IAAQC,GAORC,IAAOC,GAKPC,IAAcC,EAAA,GAGdC,IAAcC,EAAS,OACiB;AAAA,MAC1C,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAEOP,EAAM,IAAI,CACxB,GAEKQ,IAAkBD,EAAS,OACa;AAAA,MAC1C,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,GAEOP,EAAM,IAAI,CACxB;AAGD,IAAAS;AAAA,MACE,MAAMT,EAAM;AAAA,MACZ,CAACU,MAAU;AACT,QAAIN,EAAY,UACdA,EAAY,MAAM,gBAAgBM;AAAA,MAEtC;AAAA,IAAA,GAGFC,EAAU,MAAM;AACd,MAAIP,EAAY,SAASJ,EAAM,kBAC7BI,EAAY,MAAM,gBAAgB;AAAA,IAEtC,CAAC;AAED,UAAMQ,IAAe,CAACC,MAAiB;AACrC,YAAMC,IAASD,EAAM;AACrB,MAAAX,EAAK,qBAAqBY,EAAO,OAAO,GACxCZ,EAAK,UAAUY,EAAO,OAAO;AAAA,IAC/B;AAaA,WAAAC,EAAa,EAAE,QAVA,MAAM;AACnB,MAAKf,EAAM,aACTE,EAAK,qBAAqB,CAACF,EAAM,UAAU,GAC3CE,EAAK,UAAU,CAACF,EAAM,UAAU;AAAA,IAEpC,GAKuB,OAHT,MAAMI,EAAY,OAAO,MAAA,GAGT,MAFjB,MAAMA,EAAY,OAAO,KAAA,GAEF,aAAAA,GAAa,mBA1I/CY,EAuDQ,SAAA;AAAA,MAtDN,OAAKC,EAAA,CAAC,6DAA2D,EAAA,uCAChBC,EAAAA,UAAQ,CAAA;AAAA,IAAA;MAEzDC,EAiDM,OAjDNC,GAiDM;AAAA,QAhDJD,EAiBE,SAAA;AAAA,mBAhBI;AAAA,UAAJ,KAAIf;AAAA,UACJ,MAAK;AAAA,UACJ,IAAIiB,EAAAA;AAAAA,UACJ,SAASC,EAAAA;AAAAA,UACT,UAAUJ,EAAAA;AAAAA,UACV,eAAeK,EAAAA;AAAAA,UAChB,UAAM,qHAAmH;AAAA,YACrGjB,EAAA;AAAA,aAAwBY,EAAAA,YAAQ;AAAA;;;;;UAQnD,UAAQN;AAAA,QAAA;cAGXI,EAaM,OAAA;AAAA,UAZJ,UAAM,0FAAwF,CACrFR,SAAiBc,EAAAA,eAAeC,EAAAA,gBAAa,mBAAA,cAAA,CAAA,CAAA;AAAA,UACtD,SAAQ;AAAA,UACR,MAAK;AAAA,QAAA;UAELJ,EAME,QAAA;AAAA,YALA,GAAE;AAAA,YACF,QAAO;AAAA,YACP,gBAAa;AAAA,YACb,kBAAe;AAAA,YACf,mBAAgB;AAAA,UAAA;;cAIpBH,EAaM,OAAA;AAAA,UAZJ,OAAKC,EAAA,CAAC,0FAAwF,CACrFT,EAAA,OAAiBe,EAAAA,gBAAa,mBAAA,cAAA,CAAA,CAAA;AAAA,UACvC,SAAQ;AAAA,UACR,MAAK;AAAA,QAAA;UAELJ,EAME,QAAA;AAAA,YALA,GAAE;AAAA,YACF,QAAO;AAAA,YACP,gBAAa;AAAA,YACb,kBAAe;AAAA,YACf,mBAAgB;AAAA,UAAA;;;MAIVK,EAAAA,cAAZR,EAAyF,QAAzFS,GAAyFC,EAAfF,EAAAA,KAAK,GAAA,CAAA;;;;"}

package/dist/{UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js → UiLoading.vue_vue_type_script_setup_true_lang-DldleD-3.js}

@@ -1,8 +1,8 @@
-import { defineComponent as d, computed as n, createElementBlock as a, openBlock as r, normalizeClass as o, createCommentVNode as p, createElementVNode as l, toDisplayString as m } from "vue";
+import { defineComponent as m, computed as i, createElementBlock as a, openBlock as r, normalizeClass as o, createCommentVNode as x, createElementVNode as t, toDisplayString as d } from "vue";
 const g = {
   key: 0,
-  class: "sl-absolute sl-inset-0 sl-bg-white sl-bg-opacity-75 dark:sl-bg-gray-900 dark:sl-bg-opacity-75 sl-flex sl-items-center sl-justify-center sl-z-50"
-}, u = { class: "sl-flex sl-flex-col sl-items-center" }, f = /* @__PURE__ */ d({
+  class: "sl-absolute sl-inset-0 sl-bg-white sl-bg-opacity-75 dark:sl-bg-slate-900 dark:sl-bg-opacity-75 sl-flex sl-items-center sl-justify-center sl-z-50"
+}, h = { class: "sl-flex sl-flex-col sl-items-center" }, u = /* @__PURE__ */ m({
   __name: "UiLoading",
   props: {
     theme: { default: "primary" },
@@ -11,11 +11,11 @@ const g = {
     overlay: { type: Boolean, default: !1 },
     className: {}
   },
-  setup(x) {
-    const t = x, y = n(() => {
+  setup(y) {
+    const l = y, p = i(() => {
       const s = ["sl-flex sl-items-center sl-justify-center"];
-      return t.overlay ? s.push("sl-relative") : s.push("sl-flex-col sl-space-y-2"), t.className && s.push(t.className), s;
-    }), i = n(() => {
+      return l.overlay ? s.push("sl-relative") : s.push("sl-flex-col sl-space-y-2"), l.className && s.push(l.className), s;
+    }), n = i(() => {
       const e = {
         xs: "sl-h-3 sl-w-3",
         sm: "sl-h-4 sl-w-4",
@@ -24,20 +24,23 @@ const g = {
         xl: "sl-h-10 sl-w-10",
         "2xl": "sl-h-12 sl-w-12"
       }, s = {
-        primary: "sl-text-primary-600",
-        secondary: "sl-text-gray-600",
-        dark: "sl-text-gray-700",
-        light: "sl-text-gray-400",
-        success: "sl-text-green-600",
-        warning: "sl-text-yellow-600",
-        danger: "sl-text-red-600",
-        ghost: "sl-text-gray-600"
+        primary: "sl-text-primary-600 dark:sl-text-primary-400",
+        secondary: "sl-text-gray-600 dark:sl-text-gray-300",
+        dark: "sl-text-gray-700 dark:sl-text-gray-300",
+        light: "sl-text-white",
+        // White spinner for dark backgrounds
+        white: "sl-text-white",
+        // Alias for light
+        success: "sl-text-green-600 dark:sl-text-green-400",
+        warning: "sl-text-yellow-600 dark:sl-text-yellow-400",
+        danger: "sl-text-red-600 dark:sl-text-red-400",
+        ghost: "sl-text-gray-600 dark:sl-text-gray-300"
       };
       return [
-        e[t.size || "md"],
-        s[t.theme || "primary"]
+        e[l.size || "md"],
+        s[l.theme || "primary"]
       ];
-    }), c = n(() => {
+    }), c = i(() => {
       const e = {
         xs: "sl-text-xs",
         sm: "sl-text-sm",
@@ -46,35 +49,37 @@ const g = {
         xl: "sl-text-xl",
         "2xl": "sl-text-2xl"
       }, s = {
-        primary: "sl-text-stachelock-700",
-        secondary: "sl-text-gray-700",
-        dark: "sl-text-gray-800",
-        light: "sl-text-gray-500",
-        success: "sl-text-green-700",
-        warning: "sl-text-yellow-700",
-        danger: "sl-text-red-700",
-        ghost: "sl-text-gray-700"
+        primary: "sl-text-stachelock-700 dark:sl-text-stachelock-300",
+        secondary: "sl-text-gray-700 dark:sl-text-gray-300",
+        dark: "sl-text-gray-800 dark:sl-text-gray-200",
+        light: "sl-text-white",
+        white: "sl-text-white",
+        // Alias for light
+        success: "sl-text-green-700 dark:sl-text-green-300",
+        warning: "sl-text-yellow-700 dark:sl-text-yellow-300",
+        danger: "sl-text-red-700 dark:sl-text-red-300",
+        ghost: "sl-text-gray-700 dark:sl-text-gray-300"
       };
       return [
-        e[t.size || "md"],
-        s[t.theme || "primary"],
+        e[l.size || "md"],
+        s[l.theme || "primary"],
         "sl-font-medium"
       ];
     });
     return (e, s) => (r(), a("div", {
-      class: o(y.value)
+      class: o(p.value)
     }, [
       e.overlay ? (r(), a("div", g, [
-        l("div", u, [
-          l("div", {
-            class: o(i.value)
+        t("div", h, [
+          t("div", {
+            class: o(n.value)
           }, s[0] || (s[0] = [
-            l("svg", {
+            t("svg", {
               class: "sl-animate-spin",
               fill: "none",
               viewBox: "0 0 24 24"
             }, [
-              l("circle", {
+              t("circle", {
                 class: "sl-opacity-25",
                 cx: "12",
                 cy: "12",
@@ -82,7 +87,7 @@ const g = {
                 stroke: "currentColor",
                 "stroke-width": "4"
               }),
-              l("path", {
+              t("path", {
                 class: "sl-opacity-75",
                 fill: "currentColor",
                 d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
@@ -92,18 +97,18 @@ const g = {
           e.text ? (r(), a("p", {
             key: 0,
             class: o(c.value)
-          }, m(e.text), 3)) : p("", !0)
+          }, d(e.text), 3)) : x("", !0)
         ])
       ])) : (r(), a("div", {
         key: 1,
-        class: o(i.value)
+        class: o(n.value)
       }, s[1] || (s[1] = [
-        l("svg", {
+        t("svg", {
           class: "sl-animate-spin",
           fill: "none",
           viewBox: "0 0 24 24"
         }, [
-          l("circle", {
+          t("circle", {
             class: "sl-opacity-25",
             cx: "12",
             cy: "12",
@@ -111,7 +116,7 @@ const g = {
             stroke: "currentColor",
             "stroke-width": "4"
           }),
-          l("path", {
+          t("path", {
             class: "sl-opacity-75",
             fill: "currentColor",
             d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
@@ -121,11 +126,11 @@ const g = {
       e.text && !e.overlay ? (r(), a("p", {
         key: 2,
         class: o(c.value)
-      }, m(e.text), 3)) : p("", !0)
+      }, d(e.text), 3)) : x("", !0)
     ], 2));
   }
 });
 export {
-  f as _
+  u as _
 };
-//# sourceMappingURL=UiLoading.vue_vue_type_script_setup_true_lang-KbLKA4SA.js.map
+//# sourceMappingURL=UiLoading.vue_vue_type_script_setup_true_lang-DldleD-3.js.map

package/dist/UiLoading.vue_vue_type_script_setup_true_lang-DldleD-3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiLoading.vue_vue_type_script_setup_true_lang-DldleD-3.js","sources":["../src/components/UiLoading.vue"],"sourcesContent":["<template>\n  <div :class=\"containerClasses\">\n    <div v-if=\"overlay\" class=\"sl-absolute sl-inset-0 sl-bg-white sl-bg-opacity-75 dark:sl-bg-slate-900 dark:sl-bg-opacity-75 sl-flex sl-items-center sl-justify-center sl-z-50\">\n      <div class=\"sl-flex sl-flex-col sl-items-center\">\n        <div :class=\"spinnerClasses\">\n          <svg class=\"sl-animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle\n              class=\"sl-opacity-25\"\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              stroke-width=\"4\"\n            />\n            <path\n              class=\"sl-opacity-75\"\n              fill=\"currentColor\"\n              d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n        </div>\n        <p v-if=\"text\" :class=\"textClasses\">{{ text }}</p>\n      </div>\n    </div>\n    <div v-else :class=\"spinnerClasses\">\n      <svg class=\"sl-animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle\n          class=\"sl-opacity-25\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        />\n        <path\n          class=\"sl-opacity-75\"\n          fill=\"currentColor\"\n          d=\"m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n      </svg>\n    </div>\n    <p v-if=\"text && !overlay\" :class=\"textClasses\">{{ text }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue';\nimport type { LoadingType } from '../types/ui';\n\ninterface LoadingProps extends LoadingType {}\n\nconst props = withDefaults(defineProps<LoadingProps>(), {\n  theme: 'primary',\n  size: 'md',\n  overlay: false,\n});\n\nconst containerClasses = computed(() => {\n  const base = 'sl-flex sl-items-center sl-justify-center';\n  const classes = [base];\n\n  if (props.overlay) {\n    classes.push('sl-relative');\n  } else {\n    classes.push('sl-flex-col sl-space-y-2');\n  }\n\n  if (props.className) {\n    classes.push(props.className);\n  }\n\n  return classes;\n});\n\nconst spinnerClasses = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-h-3 sl-w-3',\n    sm: 'sl-h-4 sl-w-4',\n    md: 'sl-h-6 sl-w-6',\n    lg: 'sl-h-8 sl-w-8',\n    xl: 'sl-h-10 sl-w-10',\n    '2xl': 'sl-h-12 sl-w-12',\n  };\n\n  const colorMapping: Record<string, string> = {\n    primary: 'sl-text-primary-600 dark:sl-text-primary-400',\n    secondary: 'sl-text-gray-600 dark:sl-text-gray-300',\n    dark: 'sl-text-gray-700 dark:sl-text-gray-300',\n    light: 'sl-text-white', // White spinner for dark backgrounds\n    white: 'sl-text-white', // Alias for light\n    success: 'sl-text-green-600 dark:sl-text-green-400',\n    warning: 'sl-text-yellow-600 dark:sl-text-yellow-400',\n    danger: 'sl-text-red-600 dark:sl-text-red-400',\n    ghost: 'sl-text-gray-600 dark:sl-text-gray-300',\n  };\n\n  return [\n    sizeMapping[props.size || 'md'],\n    colorMapping[props.theme || 'primary']\n  ];\n});\n\nconst textClasses = computed(() => {\n  const sizeMapping: Record<string, string> = {\n    xs: 'sl-text-xs',\n    sm: 'sl-text-sm',\n    md: 'sl-text-base',\n    lg: 'sl-text-lg',\n    xl: 'sl-text-xl',\n    '2xl': 'sl-text-2xl',\n  };\n\n  const colorMapping: Record<string, string> = {\n    primary: 'sl-text-stachelock-700 dark:sl-text-stachelock-300',\n    secondary: 'sl-text-gray-700 dark:sl-text-gray-300',\n    dark: 'sl-text-gray-800 dark:sl-text-gray-200',\n    light: 'sl-text-white',\n    white: 'sl-text-white', // Alias for light\n    success: 'sl-text-green-700 dark:sl-text-green-300',\n    warning: 'sl-text-yellow-700 dark:sl-text-yellow-300',\n    danger: 'sl-text-red-700 dark:sl-text-red-300',\n    ghost: 'sl-text-gray-700 dark:sl-text-gray-300',\n  };\n\n  return [\n    sizeMapping[props.size || 'md'],\n    colorMapping[props.theme || 'primary'],\n    'sl-font-medium'\n  ];\n});\n</script>\n\n\n"],"names":["props","__props","containerClasses","computed","classes","spinnerClasses","sizeMapping","colorMapping","textClasses","_createElementBlock","overlay","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","text"],"mappings":"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"}