@stachelock/ui 0.3.1 → 0.4.0

package/dist/loading/ContentSkeleton.js

@@ -1,15 +1,15 @@
-import { defineComponent as y, computed as b, createElementBlock as s, openBlock as l, normalizeClass as i, renderSlot as p, createCommentVNode as k, Fragment as t, renderList as o, createElementVNode as e, createStaticVNode as u } from "vue";
-import { _ as m } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const f = {
+import { defineComponent as y, computed as b, createElementBlock as s, openBlock as l, normalizeClass as i, renderSlot as k, createCommentVNode as m, Fragment as r, renderList as n, createElementVNode as e, createStaticVNode as u } from "vue";
+import { _ as f } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const C = {
   key: 0,
   class: "sl-space-y-3"
-}, C = {
+}, p = {
   key: 2,
   class: "sl-space-y-3"
 }, h = { class: "sl-flex sl-space-x-4 sl-pb-2 sl-border-b sl-border-gray-200 dark:sl-border-slate-700" }, w = {
   key: 3,
   class: "sl-space-y-6"
-}, S = /* @__PURE__ */ y({
+}, x = /* @__PURE__ */ y({
   __name: "ContentSkeleton",
   props: {
     type: { default: "list" },
@@ -18,49 +18,49 @@ const f = {
     containerClass: { default: "" },
     columns: { default: 1 }
   },
-  setup(c) {
-    const n = c, g = b(() => n.type === "card" || n.type === "page" ? {
+  setup(d) {
+    const o = d, g = b(() => o.type === "card" || o.type === "page" ? {
       1: "sl-grid-cols-1",
       2: "sl-grid-cols-1 sm:sl-grid-cols-2",
       3: "sl-grid-cols-1 sm:sl-grid-cols-2 lg:sl-grid-cols-3",
       4: "sl-grid-cols-1 sm:sl-grid-cols-2 lg:sl-grid-cols-4"
-    }[n.columns] || "sl-grid-cols-1" : "");
-    return (d, a) => (l(), s("div", {
+    }[o.columns] || "sl-grid-cols-1" : "");
+    return (c, a) => (l(), s("div", {
       class: i(["sl-animate-pulse", d.containerClass])
     }, [
-      d.type === "list" ? (l(), s("div", f, [
-        (l(!0), s(t, null, o(d.itemCount, (r) => (l(), s("div", {
-          key: r,
+      d.type === "list" ? (l(), s("div", C, [
+        (l(!0), s(r, null, n(d.itemCount, (t) => (l(), s("div", {
+          key: t,
           class: "sl-flex sl-items-center sl-space-x-4"
-        }, a[0] || (a[0] = [
+        }, [...a[0] || (a[0] = [
           e("div", { class: "sl-rounded-full sl-bg-gray-300 dark:sl-bg-slate-600 sl-h-10 sl-w-10" }, null, -1),
           e("div", { class: "sl-flex-1 sl-space-y-2" }, [
             e("div", { class: "sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4" }),
             e("div", { class: "sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2" })
           ], -1)
-        ])))), 128))
+        ])]))), 128))
       ])) : d.type === "card" ? (l(), s("div", {
         key: 1,
         class: i(["sl-grid sl-gap-4", g.value])
       }, [
-        (l(!0), s(t, null, o(d.itemCount, (r) => (l(), s("div", {
-          key: r,
+        (l(!0), s(r, null, n(d.itemCount, (t) => (l(), s("div", {
+          key: t,
           class: "sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-rounded-lg sl-p-4"
-        }, a[1] || (a[1] = [
+        }, [...a[1] || (a[1] = [
           u('<div class="sl-h-32 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-mb-4" data-v-51d22800></div><div class="sl-space-y-2" data-v-51d22800><div class="sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4" data-v-51d22800></div><div class="sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2" data-v-51d22800></div><div class="sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-5/6" data-v-51d22800></div></div>', 2)
-        ])))), 128))
-      ], 2)) : d.type === "table" ? (l(), s("div", C, [
+        ])]))), 128))
+      ], 2)) : d.type === "table" ? (l(), s("div", p, [
         e("div", h, [
-          (l(!0), s(t, null, o(d.columnCount, (r) => (l(), s("div", {
-            key: r,
+          (l(!0), s(r, null, n(d.columnCount, (t) => (l(), s("div", {
+            key: t,
             class: "sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-flex-1"
           }))), 128))
         ]),
-        (l(!0), s(t, null, o(d.itemCount, (r) => (l(), s("div", {
-          key: r,
+        (l(!0), s(r, null, n(d.itemCount, (t) => (l(), s("div", {
+          key: t,
           class: "sl-flex sl-space-x-4 sl-py-2"
         }, [
-          (l(!0), s(t, null, o(d.columnCount, (v) => (l(), s("div", {
+          (l(!0), s(r, null, n(d.columnCount, (v) => (l(), s("div", {
             key: v,
             class: "sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-flex-1"
           }))), 128))
@@ -73,24 +73,24 @@ const f = {
         e("div", {
           class: i(["sl-grid sl-gap-6", g.value])
         }, [
-          (l(!0), s(t, null, o(d.itemCount, (r) => (l(), s("div", {
-            key: r,
+          (l(!0), s(r, null, n(d.itemCount, (t) => (l(), s("div", {
+            key: t,
             class: "sl-space-y-3"
-          }, a[2] || (a[2] = [
+          }, [...a[2] || (a[2] = [
             u('<div class="sl-h-6 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/4" data-v-51d22800></div><div class="sl-space-y-2" data-v-51d22800><div class="sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded" data-v-51d22800></div><div class="sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-5/6" data-v-51d22800></div><div class="sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4" data-v-51d22800></div></div>', 2)
-          ])))), 128))
+          ])]))), 128))
         ], 2)
-      ])) : d.type === "custom" ? p(d.$slots, "custom", { key: 4 }, () => [
+      ])) : d.type === "custom" ? k(c.$slots, "custom", { key: 4 }, () => [
         a[4] || (a[4] = e("div", { class: "sl-space-y-4" }, [
           e("div", { class: "sl-h-6 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2" }),
           e("div", { class: "sl-h-32 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded" }),
           e("div", { class: "sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4" })
         ], -1))
-      ], !0) : k("", !0)
+      ], !0) : m("", !0)
     ], 2));
   }
-}), B = /* @__PURE__ */ m(S, [["__scopeId", "data-v-51d22800"]]);
+}), V = /* @__PURE__ */ f(x, [["__scopeId", "data-v-51d22800"]]);
 export {
-  B as default
+  V as default
 };
 //# sourceMappingURL=ContentSkeleton.js.map

package/dist/loading/ContentSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentSkeleton.js","sources":["../../src/components/loading/ContentSkeleton.vue"],"sourcesContent":["<!--\n  @component ContentSkeleton\n  @description Skeleton loading placeholders for various content types.\n  \n  Provides animated skeleton loading states for lists, cards, tables,\n  pages, and custom layouts.\n  \n  @props\n  - type (string, optional): Skeleton type - 'list' | 'card' | 'table' | 'page' | 'custom'\n  - itemCount (number, optional): Number of skeleton items to show\n  - columnCount (number, optional): Number of columns for table type\n  - columns (number, optional): Grid columns for card/page layouts\n  - containerClass (string, optional): Additional container classes\n  \n  @slots\n  - custom: Custom skeleton content when type is 'custom'\n  \n  @example\n  <ContentSkeleton type=\"list\" :item-count=\"5\" />\n  <ContentSkeleton type=\"card\" :item-count=\"3\" :columns=\"3\" />\n  <ContentSkeleton type=\"table\" :item-count=\"10\" :column-count=\"4\" />\n-->\n<template>\n  <div class=\"sl-animate-pulse\" :class=\"containerClass\">\n    <!-- List skeleton -->\n    <template v-if=\"type === 'list'\">\n      <div class=\"sl-space-y-3\">\n        <div \n          v-for=\"n in itemCount\" \n          :key=\"n\" \n          class=\"sl-flex sl-items-center sl-space-x-4\"\n        >\n          <div class=\"sl-rounded-full sl-bg-gray-300 dark:sl-bg-slate-600 sl-h-10 sl-w-10\" />\n          <div class=\"sl-flex-1 sl-space-y-2\">\n            <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n            <div class=\"sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2\" />\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- Card skeleton -->\n    <template v-else-if=\"type === 'card'\">\n      <div class=\"sl-grid sl-gap-4\" :class=\"gridClass\">\n        <div \n          v-for=\"n in itemCount\" \n          :key=\"n\" \n          class=\"sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-rounded-lg sl-p-4\"\n        >\n          <div class=\"sl-h-32 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-mb-4\" />\n          <div class=\"sl-space-y-2\">\n            <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n            <div class=\"sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2\" />\n            <div class=\"sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-5/6\" />\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- Table skeleton -->\n    <template v-else-if=\"type === 'table'\">\n      <div class=\"sl-space-y-3\">\n        <!-- Table header -->\n        <div class=\"sl-flex sl-space-x-4 sl-pb-2 sl-border-b sl-border-gray-200 dark:sl-border-slate-700\">\n          <div \n            v-for=\"n in columnCount\" \n            :key=\"n\" \n            class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-flex-1\" \n          />\n        </div>\n        <!-- Table rows -->\n        <div \n          v-for=\"n in itemCount\" \n          :key=\"n\" \n          class=\"sl-flex sl-space-x-4 sl-py-2\"\n        >\n          <div \n            v-for=\"col in columnCount\" \n            :key=\"col\" \n            class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-flex-1\" \n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- Page skeleton -->\n    <template v-else-if=\"type === 'page'\">\n      <div class=\"sl-space-y-6\">\n        <!-- Header -->\n        <div class=\"sl-space-y-2\">\n          <div class=\"sl-h-8 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/3\" />\n          <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-2/3\" />\n        </div>\n        \n        <!-- Content blocks -->\n        <div class=\"sl-grid sl-gap-6\" :class=\"gridClass\">\n          <div \n            v-for=\"n in itemCount\" \n            :key=\"n\" \n            class=\"sl-space-y-3\"\n          >\n            <div class=\"sl-h-6 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/4\" />\n            <div class=\"sl-space-y-2\">\n              <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded\" />\n              <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-5/6\" />\n              <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- Custom slot for custom skeletons -->\n    <template v-else-if=\"type === 'custom'\">\n      <slot name=\"custom\">\n        <!-- Default custom skeleton -->\n        <div class=\"sl-space-y-4\">\n          <div class=\"sl-h-6 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2\" />\n          <div class=\"sl-h-32 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded\" />\n          <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n        </div>\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\ntype SkeletonType = 'list' | 'card' | 'table' | 'page' | 'custom';\n\ninterface Props {\n  type?: SkeletonType;\n  itemCount?: number;\n  columnCount?: number;\n  containerClass?: string;\n  columns?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  type: 'list',\n  itemCount: 3,\n  columnCount: 3,\n  containerClass: '',\n  columns: 1\n});\n\nconst gridClass = computed(() => {\n  if (props.type === 'card' || props.type === 'page') {\n    const colsClass: Record<number, string> = {\n      1: 'sl-grid-cols-1',\n      2: 'sl-grid-cols-1 sm:sl-grid-cols-2',\n      3: 'sl-grid-cols-1 sm:sl-grid-cols-2 lg:sl-grid-cols-3',\n      4: 'sl-grid-cols-1 sm:sl-grid-cols-2 lg:sl-grid-cols-4'\n    };\n    return colsClass[props.columns] || 'sl-grid-cols-1';\n  }\n  return '';\n});\n</script>\n\n<style scoped>\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n.sl-animate-pulse {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n</style>\n\n"],"names":["props","__props","gridClass","computed","_createElementBlock","_normalizeClass","containerClass","type","_openBlock","_hoisted_1","_Fragment","_renderList","itemCount","n","_createElementVNode","_hoisted_2","_hoisted_3","columnCount","col","_hoisted_4","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2IA,UAAMA,IAAQC,GAQRC,IAAYC,EAAS,MACrBH,EAAM,SAAS,UAAUA,EAAM,SAAS,SACA;AAAA,MACxC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,EAEYA,EAAM,OAAO,KAAK,mBAE9B,EACR;2BAvICI,EAoGM,OAAA;AAAA,MApGD,OAAKC,EAAA,CAAC,oBAA2BC,EAAAA,cAAc,CAAA;AAAA,IAAA;MAElCC,EAAAA,SAAI,UAClBC,KAAAJ,EAYM,OAZNK,GAYM;AAAA,gBAXJL,EAUMM,GAAA,MAAAC,EATQC,EAAAA,WAAS,CAAdC,YADTT,EAUM,OAAA;AAAA,UARH,KAAKS;AAAA,UACN,OAAM;AAAA,QAAA;UAENC,EAAmF,OAAA,EAA9E,OAAM,sEAAA,GAAqE,MAAA,EAAA;AAAA,UAChFA,EAGM,OAAA,EAHD,OAAM,4BAAwB;AAAA,YACjCA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,YAC3EA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,UAAA;;YAO9DP,EAAAA,SAAI,eACvBH,EAaM,OAAA;AAAA;QAbD,OAAKC,EAAA,CAAC,oBAA2BH,EAAA,KAAS,CAAA;AAAA,MAAA;gBAC7CE,EAWMM,GAAA,MAAAC,EAVQC,EAAAA,WAAS,CAAdC,YADTT,EAWM,OAAA;AAAA,UATH,KAAKS;AAAA,UACN,OAAM;AAAA,QAAA;;;eAaSN,EAAAA,SAAI,WACvBC,KAAAJ,EAqBM,OArBNW,GAqBM;AAAA,QAnBJD,EAMM,OANNE,GAMM;AAAA,kBALJZ,EAIEM,GAAA,MAAAC,EAHYM,EAAAA,aAAW,CAAhBJ,YADTT,EAIE,OAAA;AAAA,YAFC,KAAKS;AAAA,YACN,OAAM;AAAA,UAAA;;gBAIVT,EAUMM,GAAA,MAAAC,EATQC,EAAAA,WAAS,CAAdC,YADTT,EAUM,OAAA;AAAA,UARH,KAAKS;AAAA,UACN,OAAM;AAAA,QAAA;kBAENT,EAIEM,GAAA,MAAAC,EAHcM,EAAAA,aAAW,CAAlBC,YADTd,EAIE,OAAA;AAAA,YAFC,KAAKc;AAAA,YACN,OAAM;AAAA,UAAA;;YAOOX,EAAAA,SAAI,UACvBC,EAAA,GAAAJ,EAsBM,OAtBNe,GAsBM;AAAA,wBApBJL,EAGM,OAAA,EAHD,OAAM,kBAAc;AAAA,UACvBA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,UAC3EA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,QAAA;QAI7EA,EAaM,OAAA;AAAA,UAbD,OAAKT,EAAA,CAAC,oBAA2BH,EAAA,KAAS,CAAA;AAAA,QAAA;kBAC7CE,EAWMM,GAAA,MAAAC,EAVQC,EAAAA,WAAS,CAAdC,YADTT,EAWM,OAAA;AAAA,YATH,KAAKS;AAAA,YACN,OAAM;AAAA,UAAA;;;;YAcON,EAAAA,SAAI,WACvBa,EAOOC,gCAPP,MAOO;AAAA,wBALLP,EAIM,OAAA,EAJD,OAAM,kBAAc;AAAA,UACvBA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,UAC3EA,EAAsE,OAAA,EAAjE,OAAM,0DAAwD;AAAA,UACnEA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,QAAA;;;;;"}
+{"version":3,"file":"ContentSkeleton.js","sources":["../../src/components/loading/ContentSkeleton.vue"],"sourcesContent":["<!--\n  @component ContentSkeleton\n  @description Skeleton loading placeholders for various content types.\n  \n  Provides animated skeleton loading states for lists, cards, tables,\n  pages, and custom layouts.\n  \n  @props\n  - type (string, optional): Skeleton type - 'list' | 'card' | 'table' | 'page' | 'custom'\n  - itemCount (number, optional): Number of skeleton items to show\n  - columnCount (number, optional): Number of columns for table type\n  - columns (number, optional): Grid columns for card/page layouts\n  - containerClass (string, optional): Additional container classes\n  \n  @slots\n  - custom: Custom skeleton content when type is 'custom'\n  \n  @example\n  <ContentSkeleton type=\"list\" :item-count=\"5\" />\n  <ContentSkeleton type=\"card\" :item-count=\"3\" :columns=\"3\" />\n  <ContentSkeleton type=\"table\" :item-count=\"10\" :column-count=\"4\" />\n-->\n<template>\n  <div class=\"sl-animate-pulse\" :class=\"containerClass\">\n    <!-- List skeleton -->\n    <template v-if=\"type === 'list'\">\n      <div class=\"sl-space-y-3\">\n        <div \n          v-for=\"n in itemCount\" \n          :key=\"n\" \n          class=\"sl-flex sl-items-center sl-space-x-4\"\n        >\n          <div class=\"sl-rounded-full sl-bg-gray-300 dark:sl-bg-slate-600 sl-h-10 sl-w-10\" />\n          <div class=\"sl-flex-1 sl-space-y-2\">\n            <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n            <div class=\"sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2\" />\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- Card skeleton -->\n    <template v-else-if=\"type === 'card'\">\n      <div class=\"sl-grid sl-gap-4\" :class=\"gridClass\">\n        <div \n          v-for=\"n in itemCount\" \n          :key=\"n\" \n          class=\"sl-border sl-border-gray-200 dark:sl-border-slate-700 sl-rounded-lg sl-p-4\"\n        >\n          <div class=\"sl-h-32 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-mb-4\" />\n          <div class=\"sl-space-y-2\">\n            <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n            <div class=\"sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2\" />\n            <div class=\"sl-h-3 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-5/6\" />\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- Table skeleton -->\n    <template v-else-if=\"type === 'table'\">\n      <div class=\"sl-space-y-3\">\n        <!-- Table header -->\n        <div class=\"sl-flex sl-space-x-4 sl-pb-2 sl-border-b sl-border-gray-200 dark:sl-border-slate-700\">\n          <div \n            v-for=\"n in columnCount\" \n            :key=\"n\" \n            class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-flex-1\" \n          />\n        </div>\n        <!-- Table rows -->\n        <div \n          v-for=\"n in itemCount\" \n          :key=\"n\" \n          class=\"sl-flex sl-space-x-4 sl-py-2\"\n        >\n          <div \n            v-for=\"col in columnCount\" \n            :key=\"col\" \n            class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-flex-1\" \n          />\n        </div>\n      </div>\n    </template>\n\n    <!-- Page skeleton -->\n    <template v-else-if=\"type === 'page'\">\n      <div class=\"sl-space-y-6\">\n        <!-- Header -->\n        <div class=\"sl-space-y-2\">\n          <div class=\"sl-h-8 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/3\" />\n          <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-2/3\" />\n        </div>\n        \n        <!-- Content blocks -->\n        <div class=\"sl-grid sl-gap-6\" :class=\"gridClass\">\n          <div \n            v-for=\"n in itemCount\" \n            :key=\"n\" \n            class=\"sl-space-y-3\"\n          >\n            <div class=\"sl-h-6 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/4\" />\n            <div class=\"sl-space-y-2\">\n              <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded\" />\n              <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-5/6\" />\n              <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n\n    <!-- Custom slot for custom skeletons -->\n    <template v-else-if=\"type === 'custom'\">\n      <slot name=\"custom\">\n        <!-- Default custom skeleton -->\n        <div class=\"sl-space-y-4\">\n          <div class=\"sl-h-6 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-1/2\" />\n          <div class=\"sl-h-32 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded\" />\n          <div class=\"sl-h-4 sl-bg-gray-300 dark:sl-bg-slate-600 sl-rounded sl-w-3/4\" />\n        </div>\n      </slot>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\ntype SkeletonType = 'list' | 'card' | 'table' | 'page' | 'custom';\n\ninterface Props {\n  type?: SkeletonType;\n  itemCount?: number;\n  columnCount?: number;\n  containerClass?: string;\n  columns?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  type: 'list',\n  itemCount: 3,\n  columnCount: 3,\n  containerClass: '',\n  columns: 1\n});\n\nconst gridClass = computed(() => {\n  if (props.type === 'card' || props.type === 'page') {\n    const colsClass: Record<number, string> = {\n      1: 'sl-grid-cols-1',\n      2: 'sl-grid-cols-1 sm:sl-grid-cols-2',\n      3: 'sl-grid-cols-1 sm:sl-grid-cols-2 lg:sl-grid-cols-3',\n      4: 'sl-grid-cols-1 sm:sl-grid-cols-2 lg:sl-grid-cols-4'\n    };\n    return colsClass[props.columns] || 'sl-grid-cols-1';\n  }\n  return '';\n});\n</script>\n\n<style scoped>\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n.sl-animate-pulse {\n  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n</style>\n\n"],"names":["props","__props","gridClass","computed","_createElementBlock","_normalizeClass","_openBlock","_hoisted_1","_Fragment","_renderList","n","_createElementVNode","_hoisted_2","_hoisted_3","col","_hoisted_4","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2IA,UAAMA,IAAQC,GAQRC,IAAYC,EAAS,MACrBH,EAAM,SAAS,UAAUA,EAAM,SAAS,SACA;AAAA,MACxC,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IAAA,EAEYA,EAAM,OAAO,KAAK,mBAE9B,EACR;2BAvICI,EAoGM,OAAA;AAAA,MApGD,OAAKC,EAAA,CAAC,oBAA2BJ,EAAA,cAAc,CAAA;AAAA,IAAA;MAElCA,EAAA,SAAI,UAClBK,KAAAF,EAYM,OAZNG,GAYM;AAAA,gBAXJH,EAUMI,GAAA,MAAAC,EATQR,EAAA,WAAS,CAAdS,YADTN,EAUM,OAAA;AAAA,UARH,KAAKM;AAAA,UACN,OAAM;AAAA,QAAA;UAENC,EAAmF,OAAA,EAA9E,OAAM,sEAAA,GAAqE,MAAA,EAAA;AAAA,UAChFA,EAGM,OAAA,EAHD,OAAM,4BAAwB;AAAA,YACjCA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,YAC3EA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,UAAA;;YAO9DV,EAAA,SAAI,eACvBG,EAaM,OAAA;AAAA;QAbD,OAAKC,EAAA,CAAC,oBAA2BH,EAAA,KAAS,CAAA;AAAA,MAAA;gBAC7CE,EAWMI,GAAA,MAAAC,EAVQR,EAAA,WAAS,CAAdS,YADTN,EAWM,OAAA;AAAA,UATH,KAAKM;AAAA,UACN,OAAM;AAAA,QAAA;;;eAaST,EAAA,SAAI,WACvBK,KAAAF,EAqBM,OArBNQ,GAqBM;AAAA,QAnBJD,EAMM,OANNE,GAMM;AAAA,kBALJT,EAIEI,GAAA,MAAAC,EAHYR,EAAA,aAAW,CAAhBS,YADTN,EAIE,OAAA;AAAA,YAFC,KAAKM;AAAA,YACN,OAAM;AAAA,UAAA;;gBAIVN,EAUMI,GAAA,MAAAC,EATQR,EAAA,WAAS,CAAdS,YADTN,EAUM,OAAA;AAAA,UARH,KAAKM;AAAA,UACN,OAAM;AAAA,QAAA;kBAENN,EAIEI,GAAA,MAAAC,EAHcR,EAAA,aAAW,CAAlBa,YADTV,EAIE,OAAA;AAAA,YAFC,KAAKU;AAAA,YACN,OAAM;AAAA,UAAA;;YAOOb,EAAA,SAAI,UACvBK,EAAA,GAAAF,EAsBM,OAtBNW,GAsBM;AAAA,wBApBJJ,EAGM,OAAA,EAHD,OAAM,kBAAc;AAAA,UACvBA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,UAC3EA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,QAAA;QAI7EA,EAaM,OAAA;AAAA,UAbD,OAAKN,EAAA,CAAC,oBAA2BH,EAAA,KAAS,CAAA;AAAA,QAAA;kBAC7CE,EAWMI,GAAA,MAAAC,EAVQR,EAAA,WAAS,CAAdS,YADTN,EAWM,OAAA;AAAA,YATH,KAAKM;AAAA,YACN,OAAM;AAAA,UAAA;;;;YAcOT,EAAA,SAAI,WACvBe,EAOOC,gCAPP,MAOO;AAAA,wBALLN,EAIM,OAAA,EAJD,OAAM,kBAAc;AAAA,UACvBA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,UAC3EA,EAAsE,OAAA,EAAjE,OAAM,0DAAwD;AAAA,UACnEA,EAA8E,OAAA,EAAzE,OAAM,kEAAgE;AAAA,QAAA;;;;;"}

package/dist/loading/SmartLoadingIndicator.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/loading/SmartLoadingIndicator'
-import StachelockUI from '../src/components/loading/SmartLoadingIndicator'
-export default StachelockUI
+export {}

package/dist/loading/SmartLoadingIndicator.js

@@ -1,52 +1,52 @@
-import { defineComponent as S, ref as v, computed as h, watch as L, onUnmounted as B, createBlock as D, openBlock as e, Transition as M, withCtx as j, createElementBlock as t, createCommentVNode as o, normalizeClass as r, createElementVNode as l, toDisplayString as n, normalizeStyle as b, renderSlot as V, createVNode as I } from "vue";
-import N from "./ContentSkeleton.js";
-import { _ as P } from "../_plugin-vue_export-helper-CHgC5LLL.js";
-const $ = {
+import { defineComponent as B, ref as b, computed as k, watch as D, onUnmounted as M, createBlock as p, openBlock as e, Transition as j, withCtx as V, createElementBlock as t, createCommentVNode as n, normalizeClass as d, createElementVNode as l, toDisplayString as o, normalizeStyle as w, renderSlot as I, createVNode as N } from "vue";
+import P from "./ContentSkeleton.js";
+import { _ as $ } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const E = {
   key: 0,
   class: "sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8"
-}, E = {
+}, A = {
   key: 0,
   class: "sl-text-center"
-}, A = { class: "sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white" }, H = {
+}, H = { class: "sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white" }, U = {
   key: 0,
   class: "sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400"
-}, U = {
+}, q = {
   key: 1,
   class: "sl-w-full sl-max-w-xs"
-}, q = { class: "sl-flex sl-justify-between sl-mb-1" }, F = {
+}, F = { class: "sl-flex sl-justify-between sl-mb-1" }, G = {
   key: 0,
   class: "sl-text-sm sl-text-gray-600 dark:sl-text-slate-400"
-}, G = {
+}, J = {
   key: 1,
   class: "sl-text-sm sl-text-gray-600 dark:sl-text-slate-400"
-}, J = { class: "sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden" }, K = {
+}, K = { class: "sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden" }, O = {
   key: 1,
   class: "sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8"
-}, O = { class: "sl-flex sl-space-x-2" }, Q = {
+}, Q = { class: "sl-flex sl-space-x-2" }, R = {
   key: 0,
   class: "sl-text-center"
-}, R = { class: "sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white" }, W = {
+}, W = { class: "sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white" }, X = {
   key: 0,
   class: "sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400"
-}, X = {
+}, Y = {
   key: 2,
   class: "sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8"
-}, Y = {
+}, Z = {
   key: 0,
   class: "sl-text-center"
-}, Z = { class: "sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white" }, ss = { class: "sl-w-full sl-max-w-md" }, es = { class: "sl-flex sl-justify-between sl-mb-1" }, ls = {
+}, _ = { class: "sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white" }, ss = { class: "sl-w-full sl-max-w-md" }, es = { class: "sl-flex sl-justify-between sl-mb-1" }, ls = {
   key: 0,
   class: "sl-text-sm sl-text-gray-600 dark:sl-text-slate-400"
 }, ts = {
   key: 1,
   class: "sl-text-sm sl-text-gray-600 dark:sl-text-slate-400"
-}, as = { class: "sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden" }, os = {
+}, as = { class: "sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden" }, ns = {
   key: 1,
   class: "sl-text-sm sl-text-gray-500 dark:sl-text-slate-400"
-}, ns = {
+}, os = {
   key: 3,
   class: "sl-w-full"
-}, is = /* @__PURE__ */ S({
+}, is = /* @__PURE__ */ B({
   __name: "SmartLoadingIndicator",
   props: {
     isLoading: { type: Boolean },
@@ -67,75 +67,75 @@ const $ = {
     containerClass: { default: "" }
   },
   emits: ["cancel"],
-  setup(w, { emit: x }) {
-    const a = w, _ = x, k = v(!1), d = v(!1);
-    let c = null, u = null, y = 0;
-    const C = h(() => [
+  setup(s, { emit: C }) {
+    const a = s, z = C, v = b(!1), c = b(!1);
+    let u = null, m = null, h = 0;
+    const T = k(() => [
       a.containerClass,
       {
         "sl-fixed sl-inset-0 sl-z-50 sl-bg-white dark:sl-bg-slate-900 sl-flex sl-items-center sl-justify-center": a.fullScreen,
         "sl-absolute sl-inset-0 sl-bg-white/80 dark:sl-bg-slate-900/80 sl-flex sl-items-center sl-justify-center": a.overlay && !a.fullScreen
       }
-    ]), z = h(() => ({
+    ]), S = k(() => ({
       sm: "sl-w-6 sl-h-6",
       md: "sl-w-8 sl-h-8",
       lg: "sl-w-12 sl-h-12",
       xl: "sl-w-16 sl-h-16"
-    })[a.size]), p = h(() => ({
+    })[a.size]), x = k(() => ({
       sm: "sl-w-2 sl-h-2",
       md: "sl-w-3 sl-h-3",
       lg: "sl-w-4 sl-h-4",
       xl: "sl-w-5 sl-h-5"
     })[a.size]);
-    function m() {
-      k.value = !1, d.value = !1, g();
-    }
     function g() {
-      c && (clearTimeout(c), c = null), u && (clearTimeout(u), u = null);
+      v.value = !1, c.value = !1, f();
+    }
+    function f() {
+      u && (clearTimeout(u), u = null), m && (clearTimeout(m), m = null);
     }
-    function T() {
-      _("cancel");
+    function L() {
+      z("cancel");
     }
-    return L(() => a.isLoading, (s) => {
-      if (s) {
-        if (y = Date.now(), g(), a.variant === "skeleton") {
-          d.value = !0;
+    return D(() => a.isLoading, (r) => {
+      if (r) {
+        if (h = Date.now(), f(), a.variant === "skeleton") {
+          c.value = !0;
           return;
         }
-        c = setTimeout(() => {
-          k.value = !0, d.value = !0;
-          const i = Date.now() - y, f = a.minDuration - i;
-          f > 0 && (u = setTimeout(() => {
-            a.isLoading || m();
-          }, f));
+        u = setTimeout(() => {
+          v.value = !0, c.value = !0;
+          const i = Date.now() - h, y = a.minDuration - i;
+          y > 0 && (m = setTimeout(() => {
+            a.isLoading || g();
+          }, y));
         }, a.delay);
       } else {
-        const i = Date.now() - y;
+        const i = Date.now() - h;
         if (i < a.delay)
-          g(), m();
+          f(), g();
         else if (i < a.minDuration) {
-          const f = a.minDuration - i;
+          const y = a.minDuration - i;
           setTimeout(() => {
-            m();
-          }, f);
+            g();
+          }, y);
         } else
-          m();
+          g();
       }
-    }), B(() => {
-      g();
-    }), (s, i) => (e(), D(M, {
+    }), M(() => {
+      f();
+    }), (r, i) => (e(), p(j, {
       name: "loading",
       mode: "out-in"
     }, {
-      default: j(() => [
-        d.value ? (e(), t("div", {
+      default: V(() => [
+        c.value ? (e(), t("div", {
           key: 0,
-          class: r(["sl-loading-container", C.value])
+          class: d(["sl-loading-container", T.value])
         }, [
-          s.variant === "spinner" ? (e(), t("div", $, [
+          s.variant === "spinner" ? (e(), t("div", E, [
             l("div", {
-              class: r(["sl-loading-spinner", z.value])
-            }, i[0] || (i[0] = [
+              class: d(["sl-loading-spinner", S.value])
+            }, [...i[0] || (i[0] = [
               l("svg", {
                 class: "sl-animate-spin",
                 viewBox: "0 0 24 24",
@@ -155,75 +155,75 @@ const $ = {
                   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)
-            ]), 2),
-            s.message ? (e(), t("div", E, [
-              l("p", A, n(s.message), 1),
-              s.subMessage ? (e(), t("p", H, n(s.subMessage), 1)) : o("", !0)
-            ])) : o("", !0),
-            s.progress !== void 0 ? (e(), t("div", U, [
-              l("div", q, [
-                s.progressLabel ? (e(), t("span", F, n(s.progressLabel), 1)) : o("", !0),
-                s.showPercentage ? (e(), t("span", G, n(s.progress) + "%", 1)) : o("", !0)
+            ])], 2),
+            s.message ? (e(), t("div", A, [
+              l("p", H, o(s.message), 1),
+              s.subMessage ? (e(), t("p", U, o(s.subMessage), 1)) : n("", !0)
+            ])) : n("", !0),
+            s.progress !== void 0 ? (e(), t("div", q, [
+              l("div", F, [
+                s.progressLabel ? (e(), t("span", G, o(s.progressLabel), 1)) : n("", !0),
+                s.showPercentage ? (e(), t("span", J, o(s.progress) + "%", 1)) : n("", !0)
               ]),
-              l("div", J, [
+              l("div", K, [
                 l("div", {
                   class: "sl-h-full sl-bg-stachelock-600 sl-rounded-full sl-transition-all sl-duration-300",
-                  style: b({ width: `${s.progress}%` })
+                  style: w({ width: `${s.progress}%` })
                 }, null, 4)
               ])
-            ])) : o("", !0),
+            ])) : n("", !0),
             s.showCancel ? (e(), t("button", {
               key: 2,
-              onClick: T,
+              onClick: L,
               class: "sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-gray-700 dark:sl-text-slate-300 sl-bg-white dark:sl-bg-slate-800 sl-border sl-border-gray-300 dark:sl-border-slate-600 sl-rounded-md hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700 sl-transition-colors"
-            }, n(s.cancelText), 1)) : o("", !0)
-          ])) : s.variant === "dots" ? (e(), t("div", K, [
-            l("div", O, [
+            }, o(s.cancelText), 1)) : n("", !0)
+          ])) : s.variant === "dots" ? (e(), t("div", O, [
+            l("div", Q, [
               l("div", {
-                class: r(["sl-loading-dot", p.value]),
+                class: d(["sl-loading-dot", x.value]),
                 style: { "animation-delay": "0s" }
               }, null, 2),
               l("div", {
-                class: r(["sl-loading-dot", p.value]),
+                class: d(["sl-loading-dot", x.value]),
                 style: { "animation-delay": "0.2s" }
               }, null, 2),
               l("div", {
-                class: r(["sl-loading-dot", p.value]),
+                class: d(["sl-loading-dot", x.value]),
                 style: { "animation-delay": "0.4s" }
               }, null, 2)
             ]),
-            s.message ? (e(), t("div", Q, [
-              l("p", R, n(s.message), 1),
-              s.subMessage ? (e(), t("p", W, n(s.subMessage), 1)) : o("", !0)
-            ])) : o("", !0)
-          ])) : s.variant === "progress" ? (e(), t("div", X, [
-            s.message ? (e(), t("div", Y, [
-              l("p", Z, n(s.message), 1)
-            ])) : o("", !0),
+            s.message ? (e(), t("div", R, [
+              l("p", W, o(s.message), 1),
+              s.subMessage ? (e(), t("p", X, o(s.subMessage), 1)) : n("", !0)
+            ])) : n("", !0)
+          ])) : s.variant === "progress" ? (e(), t("div", Y, [
+            s.message ? (e(), t("div", Z, [
+              l("p", _, o(s.message), 1)
+            ])) : n("", !0),
             l("div", ss, [
               l("div", es, [
-                s.progressLabel ? (e(), t("span", ls, n(s.progressLabel), 1)) : o("", !0),
-                s.showPercentage ? (e(), t("span", ts, n(s.progress || 0) + "%", 1)) : o("", !0)
+                s.progressLabel ? (e(), t("span", ls, o(s.progressLabel), 1)) : n("", !0),
+                s.showPercentage ? (e(), t("span", ts, o(s.progress || 0) + "%", 1)) : n("", !0)
               ]),
               l("div", as, [
                 l("div", {
                   class: "sl-h-full sl-bg-stachelock-600 sl-rounded-full sl-transition-all sl-duration-300",
-                  style: b({ width: `${s.progress || 0}%` })
+                  style: w({ width: `${s.progress || 0}%` })
                 }, null, 4)
               ])
             ]),
-            s.subMessage ? (e(), t("p", os, n(s.subMessage), 1)) : o("", !0)
-          ])) : s.variant === "skeleton" ? (e(), t("div", ns, [
-            V(s.$slots, "skeleton", {}, () => [
-              I(N, { type: s.skeletonType }, null, 8, ["type"])
+            s.subMessage ? (e(), t("p", ns, o(s.subMessage), 1)) : n("", !0)
+          ])) : s.variant === "skeleton" ? (e(), t("div", os, [
+            I(r.$slots, "skeleton", {}, () => [
+              N(P, { type: s.skeletonType }, null, 8, ["type"])
             ], !0)
-          ])) : o("", !0)
-        ], 2)) : o("", !0)
+          ])) : n("", !0)
+        ], 2)) : n("", !0)
       ]),
       _: 3
     }));
   }
-}), us = /* @__PURE__ */ P(is, [["__scopeId", "data-v-13fb92eb"]]);
+}), us = /* @__PURE__ */ $(is, [["__scopeId", "data-v-13fb92eb"]]);
 export {
   us as default
 };

package/dist/loading/SmartLoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"SmartLoadingIndicator.js","sources":["../../src/components/loading/SmartLoadingIndicator.vue"],"sourcesContent":["<!--\n  @component SmartLoadingIndicator\n  @description Context-aware loading indicator with multiple display modes.\n  \n  A flexible loading component that supports spinner, dots, progress bar,\n  and skeleton display modes with delayed showing and minimum duration.\n  \n  @props\n  - isLoading (boolean, required): Whether to show loading state\n  - delay (number, optional): Delay before showing (default: 300ms)\n  - minDuration (number, optional): Minimum display time (default: 500ms)\n  - size (string, optional): Size variant - 'sm' | 'md' | 'lg' | 'xl'\n  - variant (string, optional): Display variant - 'spinner' | 'dots' | 'progress' | 'skeleton'\n  - message (string, optional): Loading message\n  - subMessage (string, optional): Secondary message\n  - progress (number, optional): Progress percentage (0-100)\n  - progressLabel (string, optional): Label for progress bar\n  - showPercentage (boolean, optional): Show percentage on progress bar\n  - showCancel (boolean, optional): Show cancel button\n  - cancelText (string, optional): Cancel button text\n  - fullScreen (boolean, optional): Full screen overlay\n  - overlay (boolean, optional): Background overlay\n  - skeletonType (string, optional): Skeleton type when variant is 'skeleton'\n  \n  @emits\n  - cancel: Emitted when cancel button is clicked\n  \n  @example\n  <SmartLoadingIndicator\n    :is-loading=\"loading\"\n    variant=\"spinner\"\n    message=\"Loading data...\"\n  />\n-->\n<template>\n  <Transition name=\"loading\" mode=\"out-in\">\n    <div v-if=\"shouldShowLoading\" class=\"sl-loading-container\" :class=\"containerClasses\">\n      <!-- Spinner variant -->\n      <div v-if=\"variant === 'spinner'\" class=\"sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8\">\n        <div class=\"sl-loading-spinner\" :class=\"spinnerSizeClass\">\n          <svg class=\"sl-animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle class=\"sl-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n            <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\" />\n          </svg>\n        </div>\n        <div v-if=\"message\" class=\"sl-text-center\">\n          <p class=\"sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ message }}</p>\n          <p v-if=\"subMessage\" class=\"sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400\">{{ subMessage }}</p>\n        </div>\n        <div v-if=\"progress !== undefined\" class=\"sl-w-full sl-max-w-xs\">\n          <div class=\"sl-flex sl-justify-between sl-mb-1\">\n            <span v-if=\"progressLabel\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progressLabel }}</span>\n            <span v-if=\"showPercentage\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progress }}%</span>\n          </div>\n          <div class=\"sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden\">\n            <div \n              class=\"sl-h-full sl-bg-stachelock-600 sl-rounded-full sl-transition-all sl-duration-300\"\n              :style=\"{ width: `${progress}%` }\"\n            />\n          </div>\n        </div>\n        <button\n          v-if=\"showCancel\"\n          @click=\"handleCancel\"\n          class=\"sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-gray-700 dark:sl-text-slate-300 sl-bg-white dark:sl-bg-slate-800 sl-border sl-border-gray-300 dark:sl-border-slate-600 sl-rounded-md hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700 sl-transition-colors\"\n        >\n          {{ cancelText }}\n        </button>\n      </div>\n\n      <!-- Dots variant -->\n      <div v-else-if=\"variant === 'dots'\" class=\"sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8\">\n        <div class=\"sl-flex sl-space-x-2\">\n          <div class=\"sl-loading-dot\" :class=\"dotSizeClass\" style=\"animation-delay: 0s\" />\n          <div class=\"sl-loading-dot\" :class=\"dotSizeClass\" style=\"animation-delay: 0.2s\" />\n          <div class=\"sl-loading-dot\" :class=\"dotSizeClass\" style=\"animation-delay: 0.4s\" />\n        </div>\n        <div v-if=\"message\" class=\"sl-text-center\">\n          <p class=\"sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ message }}</p>\n          <p v-if=\"subMessage\" class=\"sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400\">{{ subMessage }}</p>\n        </div>\n      </div>\n\n      <!-- Progress variant -->\n      <div v-else-if=\"variant === 'progress'\" class=\"sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8\">\n        <div v-if=\"message\" class=\"sl-text-center\">\n          <p class=\"sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ message }}</p>\n        </div>\n        <div class=\"sl-w-full sl-max-w-md\">\n          <div class=\"sl-flex sl-justify-between sl-mb-1\">\n            <span v-if=\"progressLabel\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progressLabel }}</span>\n            <span v-if=\"showPercentage\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progress || 0 }}%</span>\n          </div>\n          <div class=\"sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden\">\n            <div \n              class=\"sl-h-full sl-bg-stachelock-600 sl-rounded-full sl-transition-all sl-duration-300\"\n              :style=\"{ width: `${progress || 0}%` }\"\n            />\n          </div>\n        </div>\n        <p v-if=\"subMessage\" class=\"sl-text-sm sl-text-gray-500 dark:sl-text-slate-400\">{{ subMessage }}</p>\n      </div>\n\n      <!-- Skeleton variant -->\n      <div v-else-if=\"variant === 'skeleton'\" class=\"sl-w-full\">\n        <slot name=\"skeleton\">\n          <ContentSkeleton :type=\"skeletonType\" />\n        </slot>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, onUnmounted } from 'vue';\nimport ContentSkeleton from './ContentSkeleton.vue';\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl';\ntype Variant = 'spinner' | 'dots' | 'progress' | 'skeleton';\ntype SkeletonType = 'list' | 'card' | 'table' | 'custom';\n\ninterface Props {\n  isLoading: boolean;\n  delay?: number;\n  minDuration?: number;\n  size?: Size;\n  variant?: Variant;\n  message?: string;\n  subMessage?: string;\n  progress?: number;\n  progressLabel?: string;\n  showPercentage?: boolean;\n  showCancel?: boolean;\n  cancelText?: string;\n  fullScreen?: boolean;\n  overlay?: boolean;\n  skeletonType?: SkeletonType;\n  containerClass?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  delay: 300,\n  minDuration: 500,\n  size: 'md',\n  variant: 'spinner',\n  cancelText: 'Cancel',\n  fullScreen: false,\n  overlay: false,\n  skeletonType: 'list',\n  showPercentage: false,\n  showCancel: false,\n  containerClass: '',\n});\n\nconst emit = defineEmits<{\n  cancel: [];\n}>();\n\nconst showSpinner = ref(false);\nconst shouldShowLoading = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | null = null;\nlet minDurationTimer: ReturnType<typeof setTimeout> | null = null;\nlet startTime = 0;\n\nconst containerClasses = computed(() => [\n  props.containerClass,\n  {\n    'sl-fixed sl-inset-0 sl-z-50 sl-bg-white dark:sl-bg-slate-900 sl-flex sl-items-center sl-justify-center': props.fullScreen,\n    'sl-absolute sl-inset-0 sl-bg-white/80 dark:sl-bg-slate-900/80 sl-flex sl-items-center sl-justify-center': props.overlay && !props.fullScreen,\n  }\n]);\n\nconst spinnerSizeClass = computed(() => {\n  const sizes: Record<Size, string> = {\n    sm: 'sl-w-6 sl-h-6',\n    md: 'sl-w-8 sl-h-8',\n    lg: 'sl-w-12 sl-h-12',\n    xl: 'sl-w-16 sl-h-16',\n  };\n  return sizes[props.size];\n});\n\nconst dotSizeClass = computed(() => {\n  const sizes: Record<Size, string> = {\n    sm: 'sl-w-2 sl-h-2',\n    md: 'sl-w-3 sl-h-3',\n    lg: 'sl-w-4 sl-h-4',\n    xl: 'sl-w-5 sl-h-5',\n  };\n  return sizes[props.size];\n});\n\nfunction hideLoading(): void {\n  showSpinner.value = false;\n  shouldShowLoading.value = false;\n  clearTimers();\n}\n\nfunction clearTimers(): void {\n  if (delayTimer) {\n    clearTimeout(delayTimer);\n    delayTimer = null;\n  }\n  if (minDurationTimer) {\n    clearTimeout(minDurationTimer);\n    minDurationTimer = null;\n  }\n}\n\nfunction handleCancel(): void {\n  emit('cancel');\n}\n\nwatch(() => props.isLoading, (newVal) => {\n  if (newVal) {\n    startTime = Date.now();\n    clearTimers();\n    \n    // For skeletons, show immediately\n    if (props.variant === 'skeleton') {\n      shouldShowLoading.value = true;\n      return;\n    }\n    \n    // Start delay timer for spinner/dots/progress\n    delayTimer = setTimeout(() => {\n      showSpinner.value = true;\n      shouldShowLoading.value = true;\n      \n      // Ensure minimum display time\n      const elapsed = Date.now() - startTime;\n      const remaining = props.minDuration - elapsed;\n      \n      if (remaining > 0) {\n        minDurationTimer = setTimeout(() => {\n          if (!props.isLoading) {\n            hideLoading();\n          }\n        }, remaining);\n      }\n    }, props.delay);\n  } else {\n    const elapsed = Date.now() - startTime;\n    \n    if (elapsed < props.delay) {\n      clearTimers();\n      hideLoading();\n    } else if (elapsed < props.minDuration) {\n      const remaining = props.minDuration - elapsed;\n      setTimeout(() => {\n        hideLoading();\n      }, remaining);\n    } else {\n      hideLoading();\n    }\n  }\n});\n\nonUnmounted(() => {\n  clearTimers();\n});\n</script>\n\n<style scoped>\n.sl-loading-spinner {\n  @apply sl-text-stachelock-600;\n}\n\n.sl-loading-dot {\n  @apply sl-rounded-full sl-bg-stachelock-600;\n  animation: bounce 1.4s infinite ease-in-out both;\n}\n\n@keyframes bounce {\n  0%, 80%, 100% {\n    transform: scale(0);\n  }\n  40% {\n    transform: scale(1);\n  }\n}\n\n.loading-enter-active,\n.loading-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.loading-enter-from,\n.loading-leave-to {\n  opacity: 0;\n}\n</style>\n\n"],"names":["props","__props","emit","__emit","showSpinner","ref","shouldShowLoading","delayTimer","minDurationTimer","startTime","containerClasses","computed","spinnerSizeClass","dotSizeClass","hideLoading","clearTimers","handleCancel","watch","newVal","elapsed","remaining","onUnmounted","_createBlock","_Transition","_createElementBlock","_normalizeClass","variant","_openBlock","_hoisted_1","_createElementVNode","message","_hoisted_2","_hoisted_3","_toDisplayString","subMessage","_hoisted_4","progress","_hoisted_5","_hoisted_6","progressLabel","_hoisted_7","showPercentage","_hoisted_8","_hoisted_9","showCancel","cancelText","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_renderSlot","_ctx","_createVNode","ContentSkeleton","skeletonType"],"mappings":"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"}
+{"version":3,"file":"SmartLoadingIndicator.js","sources":["../../src/components/loading/SmartLoadingIndicator.vue"],"sourcesContent":["<!--\n  @component SmartLoadingIndicator\n  @description Context-aware loading indicator with multiple display modes.\n  \n  A flexible loading component that supports spinner, dots, progress bar,\n  and skeleton display modes with delayed showing and minimum duration.\n  \n  @props\n  - isLoading (boolean, required): Whether to show loading state\n  - delay (number, optional): Delay before showing (default: 300ms)\n  - minDuration (number, optional): Minimum display time (default: 500ms)\n  - size (string, optional): Size variant - 'sm' | 'md' | 'lg' | 'xl'\n  - variant (string, optional): Display variant - 'spinner' | 'dots' | 'progress' | 'skeleton'\n  - message (string, optional): Loading message\n  - subMessage (string, optional): Secondary message\n  - progress (number, optional): Progress percentage (0-100)\n  - progressLabel (string, optional): Label for progress bar\n  - showPercentage (boolean, optional): Show percentage on progress bar\n  - showCancel (boolean, optional): Show cancel button\n  - cancelText (string, optional): Cancel button text\n  - fullScreen (boolean, optional): Full screen overlay\n  - overlay (boolean, optional): Background overlay\n  - skeletonType (string, optional): Skeleton type when variant is 'skeleton'\n  \n  @emits\n  - cancel: Emitted when cancel button is clicked\n  \n  @example\n  <SmartLoadingIndicator\n    :is-loading=\"loading\"\n    variant=\"spinner\"\n    message=\"Loading data...\"\n  />\n-->\n<template>\n  <Transition name=\"loading\" mode=\"out-in\">\n    <div v-if=\"shouldShowLoading\" class=\"sl-loading-container\" :class=\"containerClasses\">\n      <!-- Spinner variant -->\n      <div v-if=\"variant === 'spinner'\" class=\"sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8\">\n        <div class=\"sl-loading-spinner\" :class=\"spinnerSizeClass\">\n          <svg class=\"sl-animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <circle class=\"sl-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n            <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\" />\n          </svg>\n        </div>\n        <div v-if=\"message\" class=\"sl-text-center\">\n          <p class=\"sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ message }}</p>\n          <p v-if=\"subMessage\" class=\"sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400\">{{ subMessage }}</p>\n        </div>\n        <div v-if=\"progress !== undefined\" class=\"sl-w-full sl-max-w-xs\">\n          <div class=\"sl-flex sl-justify-between sl-mb-1\">\n            <span v-if=\"progressLabel\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progressLabel }}</span>\n            <span v-if=\"showPercentage\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progress }}%</span>\n          </div>\n          <div class=\"sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden\">\n            <div \n              class=\"sl-h-full sl-bg-stachelock-600 sl-rounded-full sl-transition-all sl-duration-300\"\n              :style=\"{ width: `${progress}%` }\"\n            />\n          </div>\n        </div>\n        <button\n          v-if=\"showCancel\"\n          @click=\"handleCancel\"\n          class=\"sl-px-4 sl-py-2 sl-text-sm sl-font-medium sl-text-gray-700 dark:sl-text-slate-300 sl-bg-white dark:sl-bg-slate-800 sl-border sl-border-gray-300 dark:sl-border-slate-600 sl-rounded-md hover:sl-bg-gray-50 dark:hover:sl-bg-slate-700 sl-transition-colors\"\n        >\n          {{ cancelText }}\n        </button>\n      </div>\n\n      <!-- Dots variant -->\n      <div v-else-if=\"variant === 'dots'\" class=\"sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8\">\n        <div class=\"sl-flex sl-space-x-2\">\n          <div class=\"sl-loading-dot\" :class=\"dotSizeClass\" style=\"animation-delay: 0s\" />\n          <div class=\"sl-loading-dot\" :class=\"dotSizeClass\" style=\"animation-delay: 0.2s\" />\n          <div class=\"sl-loading-dot\" :class=\"dotSizeClass\" style=\"animation-delay: 0.4s\" />\n        </div>\n        <div v-if=\"message\" class=\"sl-text-center\">\n          <p class=\"sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ message }}</p>\n          <p v-if=\"subMessage\" class=\"sl-mt-1 sl-text-sm sl-text-gray-500 dark:sl-text-slate-400\">{{ subMessage }}</p>\n        </div>\n      </div>\n\n      <!-- Progress variant -->\n      <div v-else-if=\"variant === 'progress'\" class=\"sl-flex sl-flex-col sl-items-center sl-space-y-4 sl-p-8\">\n        <div v-if=\"message\" class=\"sl-text-center\">\n          <p class=\"sl-text-base sl-font-medium sl-text-gray-900 dark:sl-text-white\">{{ message }}</p>\n        </div>\n        <div class=\"sl-w-full sl-max-w-md\">\n          <div class=\"sl-flex sl-justify-between sl-mb-1\">\n            <span v-if=\"progressLabel\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progressLabel }}</span>\n            <span v-if=\"showPercentage\" class=\"sl-text-sm sl-text-gray-600 dark:sl-text-slate-400\">{{ progress || 0 }}%</span>\n          </div>\n          <div class=\"sl-h-2 sl-bg-gray-200 dark:sl-bg-slate-700 sl-rounded-full sl-overflow-hidden\">\n            <div \n              class=\"sl-h-full sl-bg-stachelock-600 sl-rounded-full sl-transition-all sl-duration-300\"\n              :style=\"{ width: `${progress || 0}%` }\"\n            />\n          </div>\n        </div>\n        <p v-if=\"subMessage\" class=\"sl-text-sm sl-text-gray-500 dark:sl-text-slate-400\">{{ subMessage }}</p>\n      </div>\n\n      <!-- Skeleton variant -->\n      <div v-else-if=\"variant === 'skeleton'\" class=\"sl-w-full\">\n        <slot name=\"skeleton\">\n          <ContentSkeleton :type=\"skeletonType\" />\n        </slot>\n      </div>\n    </div>\n  </Transition>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, onUnmounted } from 'vue';\nimport ContentSkeleton from './ContentSkeleton.vue';\n\ntype Size = 'sm' | 'md' | 'lg' | 'xl';\ntype Variant = 'spinner' | 'dots' | 'progress' | 'skeleton';\ntype SkeletonType = 'list' | 'card' | 'table' | 'custom';\n\ninterface Props {\n  isLoading: boolean;\n  delay?: number;\n  minDuration?: number;\n  size?: Size;\n  variant?: Variant;\n  message?: string;\n  subMessage?: string;\n  progress?: number;\n  progressLabel?: string;\n  showPercentage?: boolean;\n  showCancel?: boolean;\n  cancelText?: string;\n  fullScreen?: boolean;\n  overlay?: boolean;\n  skeletonType?: SkeletonType;\n  containerClass?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  delay: 300,\n  minDuration: 500,\n  size: 'md',\n  variant: 'spinner',\n  cancelText: 'Cancel',\n  fullScreen: false,\n  overlay: false,\n  skeletonType: 'list',\n  showPercentage: false,\n  showCancel: false,\n  containerClass: '',\n});\n\nconst emit = defineEmits<{\n  cancel: [];\n}>();\n\nconst showSpinner = ref(false);\nconst shouldShowLoading = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | null = null;\nlet minDurationTimer: ReturnType<typeof setTimeout> | null = null;\nlet startTime = 0;\n\nconst containerClasses = computed(() => [\n  props.containerClass,\n  {\n    'sl-fixed sl-inset-0 sl-z-50 sl-bg-white dark:sl-bg-slate-900 sl-flex sl-items-center sl-justify-center': props.fullScreen,\n    'sl-absolute sl-inset-0 sl-bg-white/80 dark:sl-bg-slate-900/80 sl-flex sl-items-center sl-justify-center': props.overlay && !props.fullScreen,\n  }\n]);\n\nconst spinnerSizeClass = computed(() => {\n  const sizes: Record<Size, string> = {\n    sm: 'sl-w-6 sl-h-6',\n    md: 'sl-w-8 sl-h-8',\n    lg: 'sl-w-12 sl-h-12',\n    xl: 'sl-w-16 sl-h-16',\n  };\n  return sizes[props.size];\n});\n\nconst dotSizeClass = computed(() => {\n  const sizes: Record<Size, string> = {\n    sm: 'sl-w-2 sl-h-2',\n    md: 'sl-w-3 sl-h-3',\n    lg: 'sl-w-4 sl-h-4',\n    xl: 'sl-w-5 sl-h-5',\n  };\n  return sizes[props.size];\n});\n\nfunction hideLoading(): void {\n  showSpinner.value = false;\n  shouldShowLoading.value = false;\n  clearTimers();\n}\n\nfunction clearTimers(): void {\n  if (delayTimer) {\n    clearTimeout(delayTimer);\n    delayTimer = null;\n  }\n  if (minDurationTimer) {\n    clearTimeout(minDurationTimer);\n    minDurationTimer = null;\n  }\n}\n\nfunction handleCancel(): void {\n  emit('cancel');\n}\n\nwatch(() => props.isLoading, (newVal) => {\n  if (newVal) {\n    startTime = Date.now();\n    clearTimers();\n    \n    // For skeletons, show immediately\n    if (props.variant === 'skeleton') {\n      shouldShowLoading.value = true;\n      return;\n    }\n    \n    // Start delay timer for spinner/dots/progress\n    delayTimer = setTimeout(() => {\n      showSpinner.value = true;\n      shouldShowLoading.value = true;\n      \n      // Ensure minimum display time\n      const elapsed = Date.now() - startTime;\n      const remaining = props.minDuration - elapsed;\n      \n      if (remaining > 0) {\n        minDurationTimer = setTimeout(() => {\n          if (!props.isLoading) {\n            hideLoading();\n          }\n        }, remaining);\n      }\n    }, props.delay);\n  } else {\n    const elapsed = Date.now() - startTime;\n    \n    if (elapsed < props.delay) {\n      clearTimers();\n      hideLoading();\n    } else if (elapsed < props.minDuration) {\n      const remaining = props.minDuration - elapsed;\n      setTimeout(() => {\n        hideLoading();\n      }, remaining);\n    } else {\n      hideLoading();\n    }\n  }\n});\n\nonUnmounted(() => {\n  clearTimers();\n});\n</script>\n\n<style scoped>\n.sl-loading-spinner {\n  @apply sl-text-stachelock-600;\n}\n\n.sl-loading-dot {\n  @apply sl-rounded-full sl-bg-stachelock-600;\n  animation: bounce 1.4s infinite ease-in-out both;\n}\n\n@keyframes bounce {\n  0%, 80%, 100% {\n    transform: scale(0);\n  }\n  40% {\n    transform: scale(1);\n  }\n}\n\n.loading-enter-active,\n.loading-leave-active {\n  transition: opacity 0.3s ease;\n}\n\n.loading-enter-from,\n.loading-leave-to {\n  opacity: 0;\n}\n</style>\n\n"],"names":["props","__props","emit","__emit","showSpinner","ref","shouldShowLoading","delayTimer","minDurationTimer","startTime","containerClasses","computed","spinnerSizeClass","dotSizeClass","hideLoading","clearTimers","handleCancel","watch","newVal","elapsed","remaining","onUnmounted","_createBlock","_Transition","_createElementBlock","_normalizeClass","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","_hoisted_23","_hoisted_24","_renderSlot","_ctx","_createVNode","ContentSkeleton"],"mappings":"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"}

package/dist/loading/index.d.ts

@@ -1 +1,2 @@
 export * from '../src/components/loading/index'
+export {}

package/dist/maps/GoogleMap.d.ts

@@ -1,3 +1 @@
-export * from '../src/components/maps/GoogleMap'
-import StachelockUI from '../src/components/maps/GoogleMap'
-export default StachelockUI
+export {}

package/dist/maps/GoogleMap.js

@@ -155,12 +155,12 @@ const O = {
           Z(e.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["api-key", "center", "zoom", "map-type-id", "styles", "disable-default-ui", "street-view-control", "zoom-control", "fullscreen-control", "map-type-control"])) : (l(), c("div", O, r[1] || (r[1] = [
+      }, 8, ["api-key", "center", "zoom", "map-type-id", "styles", "disable-default-ui", "street-view-control", "zoom-control", "fullscreen-control", "map-type-control"])) : (l(), c("div", O, [...r[1] || (r[1] = [
         n("div", { class: "sl-flex sl-flex-col sl-items-center sl-gap-2" }, [
           n("div", { class: "sl-animate-spin sl-rounded-full sl-h-8 sl-w-8 sl-border-b-2 sl-border-primary-600" }),
           n("span", { class: "sl-text-sm sl-text-gray-500" }, "Loading map...")
         ], -1)
-      ])))
+      ])]))
     ], 4));
   }
 }), X = /* @__PURE__ */ E(H, [["__scopeId", "data-v-3de6bd84"]]);