cisse-vue-ui 0.9.0 → 0.10.1

package/dist/{ListSkeleton.vue_vue_type_script_setup_true_lang-Bo3HqgX0.cjs → Skeleton.vue_vue_type_script_setup_true_lang-ahmyY81P.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const vue = require("vue");
 const vue$1 = require("@iconify/vue");
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   class: "bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4",
   "aria-hidden": "true"
 };
@@ -14,7 +14,7 @@ const _hoisted_4$2 = {
   key: 1,
   class: "flex justify-end gap-2 pt-2"
 };
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "CardSkeleton",
   props: {
     showAvatar: { type: Boolean, default: false },
@@ -23,7 +23,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
         __props.showAvatar ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [..._cache[0] || (_cache[0] = [
           vue.createElementVNode("div", { class: "size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
           vue.createElementVNode("div", { class: "flex-1 space-y-2" }, [
@@ -48,7 +48,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   class: "w-full",
   "aria-hidden": "true"
 };
@@ -56,7 +56,7 @@ const _hoisted_2$2 = {
   key: 0,
   class: "flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700"
 };
-const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "TableSkeleton",
   props: {
     rows: { default: 5 },
@@ -65,7 +65,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
         __props.showHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.columns, (col) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -96,7 +96,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-200 px-4 sm:px-6 py-4 dark:border-gray-700"
 };
@@ -122,7 +122,7 @@ const _hoisted_11 = {
 const _hoisted_12 = ["disabled", "onClick"];
 const _hoisted_13 = ["disabled"];
 const _hoisted_14 = { class: "hidden sm:inline" };
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "PaginationControls",
   props: {
     currentPage: {},
@@ -180,7 +180,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       emit("update:pageSize", Number(target.value));
     };
     return (_ctx, _cache) => {
-      return __props.totalPages > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+      return __props.totalPages > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
         vue.createElementVNode("div", _hoisted_2$1, [
           vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(__props.pageLabel) + " " + vue.toDisplayString(__props.currentPage) + " " + vue.toDisplayString(__props.ofLabel) + " " + vue.toDisplayString(__props.totalPages), 1),
           __props.showPageSize ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
@@ -242,7 +242,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1 = {
+const _hoisted_1$1 = {
   class: "divide-y divide-gray-200 dark:divide-gray-700",
   "aria-hidden": "true"
 };
@@ -255,7 +255,7 @@ const _hoisted_4 = {
   key: 1,
   class: "shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
 };
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   __name: "ListSkeleton",
   props: {
     items: { default: 5 },
@@ -265,7 +265,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: item,
@@ -290,8 +290,62 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-exports._sfc_main = _sfc_main$1;
-exports._sfc_main$1 = _sfc_main$2;
+const _hoisted_1 = {
+  key: 0,
+  class: "space-y-2",
+  "aria-hidden": "true"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Skeleton",
+  props: {
+    variant: { default: "text" },
+    width: {},
+    height: {},
+    lines: { default: 1 },
+    animate: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const variantClasses = {
+      text: "h-4 rounded",
+      circular: "rounded-full",
+      rectangular: "",
+      rounded: "rounded-lg"
+    };
+    return (_ctx, _cache) => {
+      return __props.variant === "text" && __props.lines > 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.lines, (i) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: i,
+            class: vue.normalizeClass([
+              "bg-gray-200 dark:bg-gray-700",
+              variantClasses[__props.variant],
+              __props.animate && "animate-pulse"
+            ]),
+            style: vue.normalizeStyle({
+              width: i === __props.lines ? "75%" : __props.width || "100%",
+              height: __props.height
+            })
+          }, null, 6);
+        }), 128))
+      ])) : (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        class: vue.normalizeClass([
+          "bg-gray-200 dark:bg-gray-700",
+          variantClasses[__props.variant],
+          __props.animate && "animate-pulse"
+        ]),
+        style: vue.normalizeStyle({
+          width: __props.width || (__props.variant === "circular" ? "3rem" : "100%"),
+          height: __props.height || (__props.variant === "circular" ? "3rem" : __props.variant === "text" ? "1rem" : "6rem")
+        }),
+        "aria-hidden": "true"
+      }, null, 6));
+    };
+  }
+});
+exports._sfc_main = _sfc_main$2;
+exports._sfc_main$1 = _sfc_main;
 exports._sfc_main$2 = _sfc_main$3;
-exports._sfc_main$3 = _sfc_main;
-//# sourceMappingURL=ListSkeleton.vue_vue_type_script_setup_true_lang-Bo3HqgX0.cjs.map
+exports._sfc_main$3 = _sfc_main$4;
+exports._sfc_main$4 = _sfc_main$1;
+//# sourceMappingURL=Skeleton.vue_vue_type_script_setup_true_lang-ahmyY81P.cjs.map

package/dist/Skeleton.vue_vue_type_script_setup_true_lang-ahmyY81P.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.vue_vue_type_script_setup_true_lang-ahmyY81P.cjs","sources":["../src/components/feedback/CardSkeleton.vue","../src/components/feedback/TableSkeleton.vue","../src/components/feedback/PaginationControls.vue","../src/components/feedback/ListSkeleton.vue","../src/components/feedback/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Number of text lines */\r\n    lines?: number\r\n    /** Show action buttons */\r\n    showActions?: boolean\r\n  }>(),\r\n  {\r\n    showAvatar: false,\r\n    lines: 3,\r\n    showActions: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4\" aria-hidden=\"true\">\r\n    <!-- Header with avatar -->\r\n    <div v-if=\"showAvatar\" class=\"flex items-center gap-3\">\r\n      <div class=\"size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\" />\r\n      <div class=\"flex-1 space-y-2\">\r\n        <div class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2\" />\r\n        <div class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Content lines -->\r\n    <div class=\"space-y-2\">\r\n      <div\r\n        v-for=\"line in lines\"\r\n        :key=\"line\"\r\n        class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ width: line === lines ? '60%' : '100%' }\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Actions -->\r\n    <div v-if=\"showActions\" class=\"flex justify-end gap-2 pt-2\">\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of rows */\r\n    rows?: number\r\n    /** Number of columns */\r\n    columns?: number\r\n    /** Show header */\r\n    showHeader?: boolean\r\n  }>(),\r\n  {\r\n    rows: 5,\r\n    columns: 4,\r\n    showHeader: true,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"w-full\" aria-hidden=\"true\">\r\n    <!-- Header -->\r\n    <div\r\n      v-if=\"showHeader\"\r\n      class=\"flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`header-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ maxWidth: col === 1 ? '30%' : '20%' }\"\r\n      />\r\n    </div>\r\n    <!-- Rows -->\r\n    <div\r\n      v-for=\"row in rows\"\r\n      :key=\"`row-${row}`\"\r\n      class=\"flex items-center gap-4 px-4 py-4 border-b border-gray-100 dark:border-gray-800\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`cell-${row}-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{\r\n          maxWidth: col === 1 ? '40%' : col === columns ? '15%' : '25%',\r\n          opacity: 1 - (row * 0.1)\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nimport { computed } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\n\r\nconst {\r\n  currentPage,\r\n  totalPages,\r\n  loading = false,\r\n  pageSize = 10,\r\n  pageSizeOptions = [10, 20, 50, 100],\r\n  showPageSize = true,\r\n  showPageNumbers = true,\r\n  maxVisiblePages = 7,\r\n  pageLabel = 'Page',\r\n  ofLabel = 'of',\r\n  itemsPerPageLabel = 'Items per page:',\r\n  previousLabel = 'Previous',\r\n  nextLabel = 'Next',\r\n} = defineProps<{\r\n  currentPage: number\r\n  totalPages: number\r\n  loading?: boolean\r\n  pageSize?: number\r\n  pageSizeOptions?: number[]\r\n  showPageSize?: boolean\r\n  showPageNumbers?: boolean\r\n  maxVisiblePages?: number\r\n  pageLabel?: string\r\n  ofLabel?: string\r\n  itemsPerPageLabel?: string\r\n  previousLabel?: string\r\n  nextLabel?: string\r\n}>()\r\n\r\ntype PageItem = number | 'ellipsis-start' | 'ellipsis-end'\r\n\r\nconst visiblePages = computed<PageItem[]>(() => {\r\n  if (totalPages <= maxVisiblePages) {\r\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\r\n  }\r\n\r\n  const pages: PageItem[] = []\r\n  const sidePages = Math.floor((maxVisiblePages - 3) / 2)\r\n\r\n  // Always show first page\r\n  pages.push(1)\r\n\r\n  // Calculate range around current page\r\n  let rangeStart = Math.max(2, currentPage - sidePages)\r\n  let rangeEnd = Math.min(totalPages - 1, currentPage + sidePages)\r\n\r\n  // Adjust range to show more pages on one side if near edges\r\n  if (currentPage <= sidePages + 2) {\r\n    rangeEnd = Math.min(totalPages - 1, maxVisiblePages - 2)\r\n  } else if (currentPage >= totalPages - sidePages - 1) {\r\n    rangeStart = Math.max(2, totalPages - maxVisiblePages + 3)\r\n  }\r\n\r\n  // Add ellipsis or pages after first page\r\n  if (rangeStart > 2) {\r\n    pages.push('ellipsis-start')\r\n  }\r\n\r\n  // Add range pages\r\n  for (let i = rangeStart; i <= rangeEnd; i++) {\r\n    pages.push(i)\r\n  }\r\n\r\n  // Add ellipsis or pages before last page\r\n  if (rangeEnd < totalPages - 1) {\r\n    pages.push('ellipsis-end')\r\n  }\r\n\r\n  // Always show last page\r\n  if (totalPages > 1) {\r\n    pages.push(totalPages)\r\n  }\r\n\r\n  return pages\r\n})\r\n\r\nconst emit = defineEmits<{\r\n  'update:page': [page: number]\r\n  'update:pageSize': [size: number]\r\n}>()\r\n\r\nconst changePage = (page: number) => {\r\n  if (page >= 1 && page <= totalPages && !loading) {\r\n    emit('update:page', page)\r\n  }\r\n}\r\n\r\nconst changePageSize = (event: Event) => {\r\n  const target = event.target as HTMLSelectElement\r\n  emit('update:pageSize', Number(target.value))\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"totalPages > 1\"\r\n    class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-200 px-4 sm:px-6 py-4 dark:border-gray-700\"\r\n  >\r\n    <!-- Info and page size -->\r\n    <div class=\"flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4\">\r\n      <div class=\"text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left\">\r\n        {{ pageLabel }} {{ currentPage }} {{ ofLabel }} {{ totalPages }}\r\n      </div>\r\n      <div\r\n        v-if=\"showPageSize\"\r\n        class=\"flex items-center justify-center sm:justify-start gap-2\"\r\n      >\r\n        <label\r\n          class=\"text-sm text-gray-600 dark:text-gray-400 hidden sm:inline\"\r\n          for=\"page-size\"\r\n        >\r\n          {{ itemsPerPageLabel }}\r\n        </label>\r\n        <select\r\n          id=\"page-size\"\r\n          :value=\"pageSize\"\r\n          class=\"focus:border-primary focus:ring-primary rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100\"\r\n          @change=\"changePageSize\"\r\n        >\r\n          <option\r\n            v-for=\"size in pageSizeOptions\"\r\n            :key=\"size\"\r\n            :value=\"size\"\r\n          >\r\n            {{ size }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Navigation buttons -->\r\n    <div class=\"flex justify-center sm:justify-end items-center gap-1\">\r\n      <!-- Previous button -->\r\n      <button\r\n        :disabled=\"currentPage === 1 || loading\"\r\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n        @click=\"changePage(currentPage - 1)\"\r\n      >\r\n        <Icon\r\n          class=\"size-4\"\r\n          icon=\"lucide:chevron-left\"\r\n        />\r\n        <span class=\"hidden sm:inline\">{{ previousLabel }}</span>\r\n      </button>\r\n\r\n      <!-- Page numbers -->\r\n      <template v-if=\"showPageNumbers\">\r\n        <template\r\n          v-for=\"page in visiblePages\"\r\n          :key=\"page\"\r\n        >\r\n          <!-- Ellipsis -->\r\n          <span\r\n            v-if=\"page === 'ellipsis-start' || page === 'ellipsis-end'\"\r\n            class=\"px-2 py-2 text-sm text-gray-500 dark:text-gray-400\"\r\n          >\r\n            …\r\n          </span>\r\n          <!-- Page number button -->\r\n          <button\r\n            v-else\r\n            :disabled=\"loading\"\r\n            :class=\"[\r\n              'min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg border transition-colors',\r\n              page === currentPage\r\n                ? 'bg-primary-600 text-white border-primary-600 dark:bg-primary-500 dark:border-primary-500'\r\n                : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700',\r\n              loading ? 'cursor-not-allowed opacity-50' : ''\r\n            ]\"\r\n            @click=\"changePage(page)\"\r\n          >\r\n            {{ page }}\r\n          </button>\r\n        </template>\r\n      </template>\r\n\r\n      <!-- Next button -->\r\n      <button\r\n        :disabled=\"currentPage === totalPages || loading\"\r\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n        @click=\"changePage(currentPage + 1)\"\r\n      >\r\n        <span class=\"hidden sm:inline\">{{ nextLabel }}</span>\r\n        <Icon\r\n          class=\"size-4\"\r\n          icon=\"lucide:chevron-right\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of items */\r\n    items?: number\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Show secondary text */\r\n    showSecondary?: boolean\r\n    /** Show action button */\r\n    showAction?: boolean\r\n  }>(),\r\n  {\r\n    items: 5,\r\n    showAvatar: true,\r\n    showSecondary: true,\r\n    showAction: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"divide-y divide-gray-200 dark:divide-gray-700\" aria-hidden=\"true\">\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item\"\r\n      class=\"flex items-center gap-4 py-4 px-4\"\r\n    >\r\n      <!-- Avatar -->\r\n      <div\r\n        v-if=\"showAvatar\"\r\n        class=\"shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n\r\n      <!-- Content -->\r\n      <div class=\"flex-1 min-w-0 space-y-2\">\r\n        <div\r\n          class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${60 + Math.random() * 30}%` }\"\r\n        />\r\n        <div\r\n          v-if=\"showSecondary\"\r\n          class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${40 + Math.random() * 20}%` }\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Action -->\r\n      <div\r\n        v-if=\"showAction\"\r\n        class=\"shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded'\r\n\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Variant style */\r\n    variant?: SkeletonVariant\r\n    /** Width (CSS value) */\r\n    width?: string\r\n    /** Height (CSS value) */\r\n    height?: string\r\n    /** Number of lines (for text variant) */\r\n    lines?: number\r\n    /** Animate the skeleton */\r\n    animate?: boolean\r\n  }>(),\r\n  {\r\n    variant: 'text',\r\n    animate: true,\r\n    lines: 1,\r\n  },\r\n)\r\n\r\nconst variantClasses: Record<SkeletonVariant, string> = {\r\n  text: 'h-4 rounded',\r\n  circular: 'rounded-full',\r\n  rectangular: '',\r\n  rounded: 'rounded-lg',\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"variant === 'text' && lines > 1\"\r\n    class=\"space-y-2\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <div\r\n      v-for=\"i in lines\"\r\n      :key=\"i\"\r\n      :class=\"[\r\n        'bg-gray-200 dark:bg-gray-700',\r\n        variantClasses[variant],\r\n        animate && 'animate-pulse',\r\n      ]\"\r\n      :style=\"{\r\n        width: i === lines ? '75%' : width || '100%',\r\n        height: height,\r\n      }\"\r\n    />\r\n  </div>\r\n  <div\r\n    v-else\r\n    :class=\"[\r\n      'bg-gray-200 dark:bg-gray-700',\r\n      variantClasses[variant],\r\n      animate && 'animate-pulse',\r\n    ]\"\r\n    :style=\"{\r\n      width: width || (variant === 'circular' ? '3rem' : '100%'),\r\n      height: height || (variant === 'circular' ? '3rem' : variant === 'text' ? '1rem' : '6rem'),\r\n    }\"\r\n    aria-hidden=\"true\"\r\n  />\r\n</template>\r\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_Fragment","_renderList","_normalizeStyle","_hoisted_4","computed","_toDisplayString","_createVNode","_unref","Icon","_normalizeClass"],"mappings":"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"}

package/dist/{ListSkeleton.vue_vue_type_script_setup_true_lang-BHopJ9RG.js → Skeleton.vue_vue_type_script_setup_true_lang-mcD2ZqKf.js}

@@ -1,6 +1,6 @@
 import { defineComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, Fragment, renderList, normalizeStyle, computed, toDisplayString, createVNode, unref, normalizeClass } from "vue";
 import { Icon } from "@iconify/vue";
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   class: "bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4",
   "aria-hidden": "true"
 };
@@ -13,7 +13,7 @@ const _hoisted_4$2 = {
   key: 1,
   class: "flex justify-end gap-2 pt-2"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "CardSkeleton",
   props: {
     showAvatar: { type: Boolean, default: false },
@@ -22,7 +22,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         __props.showAvatar ? (openBlock(), createElementBlock("div", _hoisted_2$3, [..._cache[0] || (_cache[0] = [
           createElementVNode("div", { class: "size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse" }, null, -1),
           createElementVNode("div", { class: "flex-1 space-y-2" }, [
@@ -47,7 +47,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   class: "w-full",
   "aria-hidden": "true"
 };
@@ -55,7 +55,7 @@ const _hoisted_2$2 = {
   key: 0,
   class: "flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "TableSkeleton",
   props: {
     rows: { default: 5 },
@@ -64,7 +64,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         __props.showHeader ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (col) => {
             return openBlock(), createElementBlock("div", {
@@ -95,7 +95,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-200 px-4 sm:px-6 py-4 dark:border-gray-700"
 };
@@ -121,7 +121,7 @@ const _hoisted_11 = {
 const _hoisted_12 = ["disabled", "onClick"];
 const _hoisted_13 = ["disabled"];
 const _hoisted_14 = { class: "hidden sm:inline" };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "PaginationControls",
   props: {
     currentPage: {},
@@ -179,7 +179,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       emit("update:pageSize", Number(target.value));
     };
     return (_ctx, _cache) => {
-      return __props.totalPages > 1 ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+      return __props.totalPages > 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
         createElementVNode("div", _hoisted_2$1, [
           createElementVNode("div", _hoisted_3$1, toDisplayString(__props.pageLabel) + " " + toDisplayString(__props.currentPage) + " " + toDisplayString(__props.ofLabel) + " " + toDisplayString(__props.totalPages), 1),
           __props.showPageSize ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
@@ -241,7 +241,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = {
+const _hoisted_1$1 = {
   class: "divide-y divide-gray-200 dark:divide-gray-700",
   "aria-hidden": "true"
 };
@@ -254,7 +254,7 @@ const _hoisted_4 = {
   key: 1,
   class: "shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "ListSkeleton",
   props: {
     items: { default: 5 },
@@ -264,7 +264,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
           return openBlock(), createElementBlock("div", {
             key: item,
@@ -289,10 +289,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1 = {
+  key: 0,
+  class: "space-y-2",
+  "aria-hidden": "true"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Skeleton",
+  props: {
+    variant: { default: "text" },
+    width: {},
+    height: {},
+    lines: { default: 1 },
+    animate: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const variantClasses = {
+      text: "h-4 rounded",
+      circular: "rounded-full",
+      rectangular: "",
+      rounded: "rounded-lg"
+    };
+    return (_ctx, _cache) => {
+      return __props.variant === "text" && __props.lines > 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.lines, (i) => {
+          return openBlock(), createElementBlock("div", {
+            key: i,
+            class: normalizeClass([
+              "bg-gray-200 dark:bg-gray-700",
+              variantClasses[__props.variant],
+              __props.animate && "animate-pulse"
+            ]),
+            style: normalizeStyle({
+              width: i === __props.lines ? "75%" : __props.width || "100%",
+              height: __props.height
+            })
+          }, null, 6);
+        }), 128))
+      ])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass([
+          "bg-gray-200 dark:bg-gray-700",
+          variantClasses[__props.variant],
+          __props.animate && "animate-pulse"
+        ]),
+        style: normalizeStyle({
+          width: __props.width || (__props.variant === "circular" ? "3rem" : "100%"),
+          height: __props.height || (__props.variant === "circular" ? "3rem" : __props.variant === "text" ? "1rem" : "6rem")
+        }),
+        "aria-hidden": "true"
+      }, null, 6));
+    };
+  }
+});
 export {
-  _sfc_main$1 as _,
-  _sfc_main$2 as a,
+  _sfc_main$2 as _,
+  _sfc_main as a,
   _sfc_main$3 as b,
-  _sfc_main as c
+  _sfc_main$4 as c,
+  _sfc_main$1 as d
 };
-//# sourceMappingURL=ListSkeleton.vue_vue_type_script_setup_true_lang-BHopJ9RG.js.map
+//# sourceMappingURL=Skeleton.vue_vue_type_script_setup_true_lang-mcD2ZqKf.js.map

package/dist/Skeleton.vue_vue_type_script_setup_true_lang-mcD2ZqKf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.vue_vue_type_script_setup_true_lang-mcD2ZqKf.js","sources":["../src/components/feedback/CardSkeleton.vue","../src/components/feedback/TableSkeleton.vue","../src/components/feedback/PaginationControls.vue","../src/components/feedback/ListSkeleton.vue","../src/components/feedback/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Number of text lines */\r\n    lines?: number\r\n    /** Show action buttons */\r\n    showActions?: boolean\r\n  }>(),\r\n  {\r\n    showAvatar: false,\r\n    lines: 3,\r\n    showActions: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 space-y-4\" aria-hidden=\"true\">\r\n    <!-- Header with avatar -->\r\n    <div v-if=\"showAvatar\" class=\"flex items-center gap-3\">\r\n      <div class=\"size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\" />\r\n      <div class=\"flex-1 space-y-2\">\r\n        <div class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/2\" />\r\n        <div class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-1/3\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Content lines -->\r\n    <div class=\"space-y-2\">\r\n      <div\r\n        v-for=\"line in lines\"\r\n        :key=\"line\"\r\n        class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ width: line === lines ? '60%' : '100%' }\"\r\n      />\r\n    </div>\r\n\r\n    <!-- Actions -->\r\n    <div v-if=\"showActions\" class=\"flex justify-end gap-2 pt-2\">\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n      <div class=\"h-8 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\" />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of rows */\r\n    rows?: number\r\n    /** Number of columns */\r\n    columns?: number\r\n    /** Show header */\r\n    showHeader?: boolean\r\n  }>(),\r\n  {\r\n    rows: 5,\r\n    columns: 4,\r\n    showHeader: true,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"w-full\" aria-hidden=\"true\">\r\n    <!-- Header -->\r\n    <div\r\n      v-if=\"showHeader\"\r\n      class=\"flex gap-4 px-4 py-3 border-b border-gray-200 dark:border-gray-700\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`header-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{ maxWidth: col === 1 ? '30%' : '20%' }\"\r\n      />\r\n    </div>\r\n    <!-- Rows -->\r\n    <div\r\n      v-for=\"row in rows\"\r\n      :key=\"`row-${row}`\"\r\n      class=\"flex items-center gap-4 px-4 py-4 border-b border-gray-100 dark:border-gray-800\"\r\n    >\r\n      <div\r\n        v-for=\"col in columns\"\r\n        :key=\"`cell-${row}-${col}`\"\r\n        class=\"flex-1 h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n        :style=\"{\r\n          maxWidth: col === 1 ? '40%' : col === columns ? '15%' : '25%',\r\n          opacity: 1 - (row * 0.1)\r\n        }\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nimport { computed } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\n\r\nconst {\r\n  currentPage,\r\n  totalPages,\r\n  loading = false,\r\n  pageSize = 10,\r\n  pageSizeOptions = [10, 20, 50, 100],\r\n  showPageSize = true,\r\n  showPageNumbers = true,\r\n  maxVisiblePages = 7,\r\n  pageLabel = 'Page',\r\n  ofLabel = 'of',\r\n  itemsPerPageLabel = 'Items per page:',\r\n  previousLabel = 'Previous',\r\n  nextLabel = 'Next',\r\n} = defineProps<{\r\n  currentPage: number\r\n  totalPages: number\r\n  loading?: boolean\r\n  pageSize?: number\r\n  pageSizeOptions?: number[]\r\n  showPageSize?: boolean\r\n  showPageNumbers?: boolean\r\n  maxVisiblePages?: number\r\n  pageLabel?: string\r\n  ofLabel?: string\r\n  itemsPerPageLabel?: string\r\n  previousLabel?: string\r\n  nextLabel?: string\r\n}>()\r\n\r\ntype PageItem = number | 'ellipsis-start' | 'ellipsis-end'\r\n\r\nconst visiblePages = computed<PageItem[]>(() => {\r\n  if (totalPages <= maxVisiblePages) {\r\n    return Array.from({ length: totalPages }, (_, i) => i + 1)\r\n  }\r\n\r\n  const pages: PageItem[] = []\r\n  const sidePages = Math.floor((maxVisiblePages - 3) / 2)\r\n\r\n  // Always show first page\r\n  pages.push(1)\r\n\r\n  // Calculate range around current page\r\n  let rangeStart = Math.max(2, currentPage - sidePages)\r\n  let rangeEnd = Math.min(totalPages - 1, currentPage + sidePages)\r\n\r\n  // Adjust range to show more pages on one side if near edges\r\n  if (currentPage <= sidePages + 2) {\r\n    rangeEnd = Math.min(totalPages - 1, maxVisiblePages - 2)\r\n  } else if (currentPage >= totalPages - sidePages - 1) {\r\n    rangeStart = Math.max(2, totalPages - maxVisiblePages + 3)\r\n  }\r\n\r\n  // Add ellipsis or pages after first page\r\n  if (rangeStart > 2) {\r\n    pages.push('ellipsis-start')\r\n  }\r\n\r\n  // Add range pages\r\n  for (let i = rangeStart; i <= rangeEnd; i++) {\r\n    pages.push(i)\r\n  }\r\n\r\n  // Add ellipsis or pages before last page\r\n  if (rangeEnd < totalPages - 1) {\r\n    pages.push('ellipsis-end')\r\n  }\r\n\r\n  // Always show last page\r\n  if (totalPages > 1) {\r\n    pages.push(totalPages)\r\n  }\r\n\r\n  return pages\r\n})\r\n\r\nconst emit = defineEmits<{\r\n  'update:page': [page: number]\r\n  'update:pageSize': [size: number]\r\n}>()\r\n\r\nconst changePage = (page: number) => {\r\n  if (page >= 1 && page <= totalPages && !loading) {\r\n    emit('update:page', page)\r\n  }\r\n}\r\n\r\nconst changePageSize = (event: Event) => {\r\n  const target = event.target as HTMLSelectElement\r\n  emit('update:pageSize', Number(target.value))\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"totalPages > 1\"\r\n    class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-gray-200 px-4 sm:px-6 py-4 dark:border-gray-700\"\r\n  >\r\n    <!-- Info and page size -->\r\n    <div class=\"flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4\">\r\n      <div class=\"text-sm text-gray-700 dark:text-gray-300 text-center sm:text-left\">\r\n        {{ pageLabel }} {{ currentPage }} {{ ofLabel }} {{ totalPages }}\r\n      </div>\r\n      <div\r\n        v-if=\"showPageSize\"\r\n        class=\"flex items-center justify-center sm:justify-start gap-2\"\r\n      >\r\n        <label\r\n          class=\"text-sm text-gray-600 dark:text-gray-400 hidden sm:inline\"\r\n          for=\"page-size\"\r\n        >\r\n          {{ itemsPerPageLabel }}\r\n        </label>\r\n        <select\r\n          id=\"page-size\"\r\n          :value=\"pageSize\"\r\n          class=\"focus:border-primary focus:ring-primary rounded border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100\"\r\n          @change=\"changePageSize\"\r\n        >\r\n          <option\r\n            v-for=\"size in pageSizeOptions\"\r\n            :key=\"size\"\r\n            :value=\"size\"\r\n          >\r\n            {{ size }}\r\n          </option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Navigation buttons -->\r\n    <div class=\"flex justify-center sm:justify-end items-center gap-1\">\r\n      <!-- Previous button -->\r\n      <button\r\n        :disabled=\"currentPage === 1 || loading\"\r\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n        @click=\"changePage(currentPage - 1)\"\r\n      >\r\n        <Icon\r\n          class=\"size-4\"\r\n          icon=\"lucide:chevron-left\"\r\n        />\r\n        <span class=\"hidden sm:inline\">{{ previousLabel }}</span>\r\n      </button>\r\n\r\n      <!-- Page numbers -->\r\n      <template v-if=\"showPageNumbers\">\r\n        <template\r\n          v-for=\"page in visiblePages\"\r\n          :key=\"page\"\r\n        >\r\n          <!-- Ellipsis -->\r\n          <span\r\n            v-if=\"page === 'ellipsis-start' || page === 'ellipsis-end'\"\r\n            class=\"px-2 py-2 text-sm text-gray-500 dark:text-gray-400\"\r\n          >\r\n            …\r\n          </span>\r\n          <!-- Page number button -->\r\n          <button\r\n            v-else\r\n            :disabled=\"loading\"\r\n            :class=\"[\r\n              'min-w-[40px] px-3 py-2 text-sm font-medium rounded-lg border transition-colors',\r\n              page === currentPage\r\n                ? 'bg-primary-600 text-white border-primary-600 dark:bg-primary-500 dark:border-primary-500'\r\n                : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700',\r\n              loading ? 'cursor-not-allowed opacity-50' : ''\r\n            ]\"\r\n            @click=\"changePage(page)\"\r\n          >\r\n            {{ page }}\r\n          </button>\r\n        </template>\r\n      </template>\r\n\r\n      <!-- Next button -->\r\n      <button\r\n        :disabled=\"currentPage === totalPages || loading\"\r\n        class=\"focus:ring-primary inline-flex items-center gap-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n        @click=\"changePage(currentPage + 1)\"\r\n      >\r\n        <span class=\"hidden sm:inline\">{{ nextLabel }}</span>\r\n        <Icon\r\n          class=\"size-4\"\r\n          icon=\"lucide:chevron-right\"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Number of items */\r\n    items?: number\r\n    /** Show avatar/icon placeholder */\r\n    showAvatar?: boolean\r\n    /** Show secondary text */\r\n    showSecondary?: boolean\r\n    /** Show action button */\r\n    showAction?: boolean\r\n  }>(),\r\n  {\r\n    items: 5,\r\n    showAvatar: true,\r\n    showSecondary: true,\r\n    showAction: false,\r\n  },\r\n)\r\n</script>\r\n\r\n<template>\r\n  <div class=\"divide-y divide-gray-200 dark:divide-gray-700\" aria-hidden=\"true\">\r\n    <div\r\n      v-for=\"item in items\"\r\n      :key=\"item\"\r\n      class=\"flex items-center gap-4 py-4 px-4\"\r\n    >\r\n      <!-- Avatar -->\r\n      <div\r\n        v-if=\"showAvatar\"\r\n        class=\"shrink-0 size-10 rounded-full bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n\r\n      <!-- Content -->\r\n      <div class=\"flex-1 min-w-0 space-y-2\">\r\n        <div\r\n          class=\"h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${60 + Math.random() * 30}%` }\"\r\n        />\r\n        <div\r\n          v-if=\"showSecondary\"\r\n          class=\"h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse\"\r\n          :style=\"{ width: `${40 + Math.random() * 20}%` }\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Action -->\r\n      <div\r\n        v-if=\"showAction\"\r\n        class=\"shrink-0 size-8 rounded bg-gray-200 dark:bg-gray-700 animate-pulse\"\r\n      />\r\n    </div>\r\n  </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded'\r\n\r\nwithDefaults(\r\n  defineProps<{\r\n    /** Variant style */\r\n    variant?: SkeletonVariant\r\n    /** Width (CSS value) */\r\n    width?: string\r\n    /** Height (CSS value) */\r\n    height?: string\r\n    /** Number of lines (for text variant) */\r\n    lines?: number\r\n    /** Animate the skeleton */\r\n    animate?: boolean\r\n  }>(),\r\n  {\r\n    variant: 'text',\r\n    animate: true,\r\n    lines: 1,\r\n  },\r\n)\r\n\r\nconst variantClasses: Record<SkeletonVariant, string> = {\r\n  text: 'h-4 rounded',\r\n  circular: 'rounded-full',\r\n  rectangular: '',\r\n  rounded: 'rounded-lg',\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    v-if=\"variant === 'text' && lines > 1\"\r\n    class=\"space-y-2\"\r\n    aria-hidden=\"true\"\r\n  >\r\n    <div\r\n      v-for=\"i in lines\"\r\n      :key=\"i\"\r\n      :class=\"[\r\n        'bg-gray-200 dark:bg-gray-700',\r\n        variantClasses[variant],\r\n        animate && 'animate-pulse',\r\n      ]\"\r\n      :style=\"{\r\n        width: i === lines ? '75%' : width || '100%',\r\n        height: height,\r\n      }\"\r\n    />\r\n  </div>\r\n  <div\r\n    v-else\r\n    :class=\"[\r\n      'bg-gray-200 dark:bg-gray-700',\r\n      variantClasses[variant],\r\n      animate && 'animate-pulse',\r\n    ]\"\r\n    :style=\"{\r\n      width: width || (variant === 'circular' ? '3rem' : '100%'),\r\n      height: height || (variant === 'circular' ? '3rem' : variant === 'text' ? '1rem' : '6rem'),\r\n    }\"\r\n    aria-hidden=\"true\"\r\n  />\r\n</template>\r\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_createElementVNode","_hoisted_3","_Fragment","_renderList","_normalizeStyle","_hoisted_4","_toDisplayString","_createVNode","_unref","_normalizeClass"],"mappings":"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"}

package/dist/components/core/StatItem.stories.d.ts

@@ -0,0 +1,44 @@
+import { Meta, StoryObj } from '@storybook/vue3-vite';
+import { default as StatItem } from './StatItem.vue';
+declare const meta: Meta<typeof StatItem>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPrefixAndSuffix: Story;
+export declare const WithDescription: Story;
+export declare const WithChange: Story;
+export declare const NegativeChange: Story;
+export declare const InvertedTrendColors: Story;
+export declare const IconLeft: Story;
+export declare const IconRight: Story;
+export declare const IconBottom: Story;
+export declare const RoundIcon: Story;
+export declare const NoIconBackground: Story;
+export declare const LabelFirst: Story;
+export declare const XSmallSize: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const XLargeSize: Story;
+export declare const CompactMode: Story;
+export declare const TrendOnly: Story;
+export declare const HideTrendIcon: Story;
+export declare const GlassVariant: Story;
+export declare const OutlineVariant: Story;
+export declare const FlatVariant: Story;
+export declare const SolidVariant: Story;
+export declare const SolidSuccess: Story;
+export declare const SolidDanger: Story;
+export declare const WithAccent: Story;
+export declare const SuccessColor: Story;
+export declare const WarningColor: Story;
+export declare const DangerColor: Story;
+export declare const InfoColor: Story;
+export declare const NoIcon: Story;
+export declare const Clickable: Story;
+export declare const Loading: Story;
+export declare const AllSizes: Story;
+export declare const AllIconPositions: Story;
+export declare const AllColors: Story;
+export declare const AllVariants: Story;
+export declare const AllIconRounded: Story;
+export declare const DashboardMetrics: Story;

package/dist/components/core/StatItem.vue.d.ts

@@ -0,0 +1,135 @@
+import { CardShadow, CardRounded, CardBorder, CardAccent } from './CardWrapper.vue';
+export type StatItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type StatItemIconPosition = 'top' | 'left' | 'right' | 'bottom';
+export type StatItemVariant = 'default' | 'glass' | 'outline' | 'flat' | 'solid';
+export type StatItemColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type StatItemTrend = 'up' | 'down' | 'neutral';
+export type StatItemIconRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface StatItemData {
+    label: string;
+    value: string | number;
+    icon?: string;
+    change?: number;
+    changeLabel?: string;
+    trend?: StatItemTrend;
+    color?: StatItemColor;
+    description?: string;
+    prefix?: string;
+    suffix?: string;
+}
+type __VLS_Props = {
+    /** Stat label */
+    label: string;
+    /** Stat value */
+    value: string | number;
+    /** Description text below label */
+    description?: string;
+    /** Prefix for value (e.g., "$") */
+    prefix?: string;
+    /** Suffix for value (e.g., "%", "users") */
+    suffix?: string;
+    /** Icon name (iconify format) */
+    icon?: string;
+    /** Icon position */
+    iconPosition?: StatItemIconPosition;
+    /** Icon border radius */
+    iconRounded?: StatItemIconRounded;
+    /** Hide icon background */
+    hideIconBg?: boolean;
+    /** Percentage change (positive or negative) */
+    change?: number;
+    /** Change label (e.g., "vs last month") */
+    changeLabel?: string;
+    /** Explicit trend direction (overrides change-based calculation) */
+    trend?: StatItemTrend;
+    /** Show only trend arrow without percentage */
+    trendOnly?: boolean;
+    /** Hide trend icon, show only text */
+    hideTrendIcon?: boolean;
+    /** Invert trend colors (green for down, red for up) */
+    invertTrendColors?: boolean;
+    /** Size variant */
+    size?: StatItemSize;
+    /** Visual variant */
+    variant?: StatItemVariant;
+    /** Color scheme */
+    color?: StatItemColor;
+    /** Make the stat clickable */
+    clickable?: boolean;
+    /** Center content (default: true for top/bottom icon, false for left/right) */
+    centered?: boolean;
+    /** Show label before value */
+    labelFirst?: boolean;
+    /** Compact mode (reduced padding) */
+    compact?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Card shadow level */
+    shadow?: CardShadow;
+    /** Card border radius */
+    rounded?: CardRounded;
+    /** Card border style */
+    border?: CardBorder;
+    /** Card accent color */
+    accent?: CardAccent;
+    /** Custom class for the card */
+    cardClass?: string;
+    /** Custom class for the icon wrapper */
+    iconWrapperClass?: string;
+    /** Custom class for the icon element */
+    iconClass?: string;
+    /** Custom class for the value */
+    valueClass?: string;
+    /** Custom class for the label */
+    labelClass?: string;
+    /** Custom class for the description */
+    descriptionClass?: string;
+    /** Custom class for the trend indicator */
+    trendClass?: string;
+    /** Custom class for the content wrapper */
+    contentClass?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        label?(_: {}): any;
+        label?(_: {}): any;
+        value?(_: {}): any;
+        description?(_: {}): any;
+        extra?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    rounded: CardRounded;
+    loading: boolean;
+    shadow: CardShadow;
+    border: CardBorder;
+    variant: StatItemVariant;
+    accent: CardAccent;
+    clickable: boolean;
+    color: StatItemColor;
+    compact: boolean;
+    size: StatItemSize;
+    iconPosition: StatItemIconPosition;
+    iconRounded: StatItemIconRounded;
+    hideIconBg: boolean;
+    trendOnly: boolean;
+    hideTrendIcon: boolean;
+    invertTrendColors: boolean;
+    labelFirst: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};