cisse-vue-ui 0.9.0 → 0.10.0

package/dist/{FilterTabs.vue_vue_type_script_setup_true_lang-COkZbeGG.cjs → FilterTabs.vue_vue_type_script_setup_true_lang-l8lJzwoY.cjs}

@@ -1,17 +1,17 @@
 "use strict";
 const vue = require("vue");
-const vue$1 = require("@iconify/vue");
-const ListSkeleton_vue_vue_type_script_setup_true_lang = require("./ListSkeleton.vue_vue_type_script_setup_true_lang-Bo3HqgX0.cjs");
 const index = require("./index-D1x3TH9k.cjs");
+const ListSkeleton_vue_vue_type_script_setup_true_lang = require("./ListSkeleton.vue_vue_type_script_setup_true_lang-Bo3HqgX0.cjs");
 const BadgeType_vue_vue_type_script_setup_true_lang = require("./BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs");
 const usePagination = require("./usePagination-gvvh1zqA.cjs");
+const vue$1 = require("@iconify/vue");
 const useDropdown = require("./useDropdown-HI7ABBLe.cjs");
 const useId = require("./useId-nxrBaIC9.cjs");
 const _hoisted_1$o = {
   key: 1,
   class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950"
 };
-const _hoisted_2$g = { class: "flex flex-col gap-0.5" };
+const _hoisted_2$h = { class: "flex flex-col gap-0.5" };
 const _hoisted_3$a = {
   key: 1,
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
@@ -53,7 +53,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
           key: 1,
           class: vue.normalizeClass(["flex items-center justify-between border-b px-5 py-3", dividerClasses.value])
         }, [
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             __props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               class: vue.normalizeClass(["text-md font-semibold", titleClasses.value])
@@ -78,7 +78,7 @@ const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$n = ["role", "tabindex", "onKeydown"];
-const _hoisted_2$f = ["src", "alt"];
+const _hoisted_2$g = ["src", "alt"];
 const _hoisted_3$9 = ["src", "alt"];
 const _hoisted_4$6 = { class: "flex items-center gap-3" };
 const _hoisted_5$4 = { class: "flex flex-col gap-0.5" };
@@ -311,7 +311,7 @@ const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
               src: __props.image,
               alt: __props.imageAlt || "",
               class: vue.normalizeClass(["w-full h-full object-cover", __props.imageClass])
-            }, null, 10, _hoisted_2$f)) : vue.createCommentVNode("", true)
+            }, null, 10, _hoisted_2$g)) : vue.createCommentVNode("", true)
           ]),
           _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" }, null, -1))
         ], 2)) : vue.createCommentVNode("", true),
@@ -648,7 +648,7 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$k = ["colspan", "rowspan", "scope", "aria-sort"];
-const _hoisted_2$e = {
+const _hoisted_2$f = {
   key: 0,
   d: "M7 14l5-5 5 5H7z"
 };
@@ -734,7 +734,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
             viewBox: "0 0 24 24",
             fill: "currentColor"
           }, [
-            __props.sorted && __props.sortDirection === "asc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_2$e)) : __props.sorted && __props.sortDirection === "desc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_3$8)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            __props.sorted && __props.sortDirection === "asc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_2$f)) : __props.sorted && __props.sortDirection === "desc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_3$8)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
               _cache[2] || (_cache[2] = vue.createElementVNode("path", {
                 d: "M7 14l5-5 5 5H7z",
                 class: "opacity-40"
@@ -1013,7 +1013,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$h = ["disabled", "aria-expanded"];
-const _hoisted_2$d = { class: "p-4" };
+const _hoisted_2$e = { class: "p-4" };
 const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -1099,7 +1099,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
               class: "!p-0"
             }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_2$d, [
+                vue.createElementVNode("div", _hoisted_2$e, [
                   vue.renderSlot(_ctx.$slots, "expanded")
                 ])
               ]),
@@ -1113,7 +1113,7 @@ const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$g = { class: "overflow-hidden" };
-const _hoisted_2$c = {
+const _hoisted_2$d = {
   key: 1,
   class: "flex flex-col items-center justify-center py-12 text-center"
 };
@@ -1233,7 +1233,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
           key: 0,
           rows: __props.loadingRows,
           columns: visibleProperties.value.length
-        }, null, 8, ["rows", "columns"])) : __props.error ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
+        }, null, 8, ["rows", "columns"])) : __props.error ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
           vue.renderSlot(_ctx.$slots, "error", {}, () => [
             vue.createElementVNode("div", _hoisted_3$7, [
               _cache[2] || (_cache[2] = vue.createElementVNode("svg", {
@@ -1359,7 +1359,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$f = { class: "space-y-3" };
-const _hoisted_2$b = { class: "flex items-center gap-3 p-3" };
+const _hoisted_2$c = { class: "flex items-center gap-3 p-3" };
 const _hoisted_3$6 = { class: "text-sm text-gray-600 dark:text-gray-400" };
 const _hoisted_4$4 = {
   key: 0,
@@ -1440,7 +1440,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
         })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
           __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$A, { key: 0 }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_2$b, [
+              vue.createElementVNode("div", _hoisted_2$c, [
                 vue.createVNode(index._sfc_main, {
                   "model-value": allSelected.value,
                   indeterminate: someSelected.value,
@@ -1629,7 +1629,7 @@ const _hoisted_1$e = {
   key: 0,
   class: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _hoisted_2$a = { class: "relative" };
+const _hoisted_2$b = { class: "relative" };
 const _hoisted_3$5 = ["disabled", "placeholder"];
 const _hoisted_4$3 = ["disabled"];
 const _hoisted_5$1 = {
@@ -1746,7 +1746,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         class: "autocomplete-container"
       }, [
         __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$e, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2$a, [
+        vue.createElementVNode("div", _hoisted_2$b, [
           vue.createElementVNode("div", {
             ref_key: "inputWrapperRef",
             ref: inputWrapperRef,
@@ -1922,7 +1922,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$d = { class: "relative inline-block" };
-const _hoisted_2$9 = ["src", "alt"];
+const _hoisted_2$a = ["src", "alt"];
 const _hoisted_3$4 = { key: 1 };
 const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
@@ -2044,7 +2044,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
             alt: __props.alt || __props.name,
             class: "size-full object-cover",
             onError: _cache[0] || (_cache[0] = ($event) => imageError.value = true)
-          }, null, 40, _hoisted_2$9)) : initials.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$4, vue.toDisplayString(initials.value), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+          }, null, 40, _hoisted_2$a)) : initials.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$4, vue.toDisplayString(initials.value), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
             key: 2,
             icon: "lucide:user",
             class: "size-1/2"
@@ -2063,7 +2063,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$c = ["aria-selected", "disabled", "onClick"];
-const _hoisted_2$8 = { class: "mt-4" };
+const _hoisted_2$9 = { class: "mt-4" };
 const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
@@ -2132,7 +2132,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
             }, vue.toDisplayString(tab.label), 11, _hoisted_1$c);
           }), 128))
         ], 2),
-        vue.createElementVNode("div", _hoisted_2$8, [
+        vue.createElementVNode("div", _hoisted_2$9, [
           vue.renderSlot(_ctx.$slots, "default", { activeTab: activeTab.value })
         ])
       ]);
@@ -2356,7 +2356,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$9 = ["aria-describedby"];
-const _hoisted_2$7 = ["id"];
+const _hoisted_2$8 = ["id"];
 const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "Tooltip",
   props: {
@@ -2428,7 +2428,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
               id: vue.unref(tooltipId),
               class: vue.normalizeClass(positionClasses.value),
               role: "tooltip"
-            }, vue.toDisplayString(__props.content), 11, _hoisted_2$7)) : vue.createCommentVNode("", true)
+            }, vue.toDisplayString(__props.content), 11, _hoisted_2$8)) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })
@@ -2437,7 +2437,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$8 = ["id", "aria-expanded", "aria-controls"];
-const _hoisted_2$6 = ["id", "aria-labelledby"];
+const _hoisted_2$7 = ["id", "aria-labelledby"];
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "Popover",
   props: {
@@ -2522,7 +2522,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
                 ])
               }, [
                 vue.renderSlot(_ctx.$slots, "default", { close: vue.unref(close) })
-              ], 14, _hoisted_2$6)) : vue.createCommentVNode("", true)
+              ], 14, _hoisted_2$7)) : vue.createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -2535,7 +2535,7 @@ const _hoisted_1$7 = {
   key: 0,
   class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700"
 };
-const _hoisted_2$5 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
+const _hoisted_2$6 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
 const _hoisted_3$3 = { class: "flex-1 overflow-y-auto p-4" };
 const _hoisted_4$2 = {
   key: 1,
@@ -2662,7 +2662,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             }, [
               __props.title || __props.showClose || _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
                 vue.renderSlot(_ctx.$slots, "header", {}, () => [
-                  vue.createElementVNode("h2", _hoisted_2$5, vue.toDisplayString(__props.title), 1)
+                  vue.createElementVNode("h2", _hoisted_2$6, vue.toDisplayString(__props.title), 1)
                 ]),
                 __props.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
@@ -2691,7 +2691,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$6 = { "aria-label": "Breadcrumb" };
-const _hoisted_2$4 = { class: "flex items-center flex-wrap gap-1 text-sm" };
+const _hoisted_2$5 = { class: "flex items-center flex-wrap gap-1 text-sm" };
 const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "Breadcrumb",
   props: {
@@ -2704,7 +2704,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$6, [
-        vue.createElementVNode("ol", _hoisted_2$4, [
+        vue.createElementVNode("ol", _hoisted_2$5, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index2) => {
             return vue.openBlock(), vue.createElementBlock("li", {
               key: index2,
@@ -2780,7 +2780,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$4 = ["id", "disabled", "aria-expanded", "aria-controls"];
-const _hoisted_2$3 = { class: "flex items-center gap-2 font-medium" };
+const _hoisted_2$4 = { class: "flex items-center gap-2 font-medium" };
 const _hoisted_3$2 = ["id", "aria-labelledby"];
 const _hoisted_4$1 = { class: "px-4 py-3 bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300" };
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
@@ -2817,7 +2817,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           "aria-controls": panelId.value,
           onClick: toggle
         }, [
-          vue.createElementVNode("span", _hoisted_2$3, [
+          vue.createElementVNode("span", _hoisted_2$4, [
             __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
               key: 0,
               icon: __props.icon,
@@ -2864,7 +2864,7 @@ const _hoisted_1$3 = {
   key: 0,
   class: "relative"
 };
-const _hoisted_2$2 = { class: "flex items-start gap-4" };
+const _hoisted_2$3 = { class: "flex items-start gap-4" };
 const _hoisted_3$1 = { class: "flex-1 min-w-0 pt-0.5" };
 const _hoisted_4 = { class: "flex items-center justify-between gap-2" };
 const _hoisted_5 = { class: "text-sm font-medium text-gray-900 dark:text-white" };
@@ -2943,7 +2943,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
               key: 0,
               class: vue.normalizeClass(["absolute left-4 top-8 w-0.5 h-full -ml-px", getStatusClasses(item.status).line])
             }, null, 2)) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_2$2, [
+            vue.createElementVNode("div", _hoisted_2$3, [
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(["relative z-10 flex items-center justify-center size-8 rounded-full shrink-0", getStatusClasses(item.status).dot])
               }, [
@@ -2996,7 +2996,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$2 = ["aria-label"];
-const _hoisted_2$1 = {
+const _hoisted_2$2 = {
   key: 0,
   class: "text-sm font-medium"
 };
@@ -3035,129 +3035,258 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           icon: vue.unref(isDark) ? __props.darkIcon : __props.lightIcon,
           class: vue.normalizeClass(sizeClasses[__props.size].icon)
         }, null, 8, ["icon", "class"]),
-        __props.showLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString(vue.unref(isDark) ? "Dark" : "Light"), 1)) : vue.createCommentVNode("", true)
+        __props.showLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, vue.toDisplayString(vue.unref(isDark) ? "Dark" : "Light"), 1)) : vue.createCommentVNode("", true)
       ], 10, _hoisted_1$2);
     };
   }
 });
-const _hoisted_1$1 = {
-  key: 0,
+const _hoisted_1$1 = { key: 0 };
+const _hoisted_2$1 = {
+  key: 1,
   class: "text-gray-400"
 };
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-  __name: "StatsCard",
+  __name: "StatItem",
   props: {
     label: {},
     value: {},
     icon: {},
+    iconPosition: { default: "top" },
     change: {},
     changeLabel: {},
+    trend: {},
+    trendOnly: { type: Boolean, default: false },
+    size: { default: "md" },
     variant: { default: "default" },
-    color: { default: "primary" }
+    color: { default: "primary" },
+    clickable: { type: Boolean, default: false },
+    centered: { type: Boolean },
+    cardClass: {},
+    iconClass: {},
+    valueClass: {},
+    labelClass: {}
   },
+  emits: ["click"],
   setup(__props) {
+    const props = __props;
+    const isCentered = vue.computed(() => {
+      if (props.centered !== void 0) return props.centered;
+      return props.iconPosition === "top";
+    });
+    const effectiveTrend = vue.computed(() => {
+      if (props.trend) return props.trend;
+      if (props.change === void 0) return void 0;
+      if (props.change > 0) return "up";
+      if (props.change < 0) return "down";
+      return "neutral";
+    });
+    const sizeClasses = vue.computed(() => {
+      const sizes = {
+        sm: {
+          padding: "sm",
+          icon: "size-8",
+          iconInner: "size-4",
+          value: "text-xl font-bold",
+          label: "text-xs",
+          change: "text-xs",
+          gap: "gap-1"
+        },
+        md: {
+          padding: "md",
+          icon: "size-10",
+          iconInner: "size-5",
+          value: "text-2xl sm:text-3xl font-bold",
+          label: "text-xs sm:text-sm",
+          change: "text-xs",
+          gap: "gap-2"
+        },
+        lg: {
+          padding: "lg",
+          icon: "size-12",
+          iconInner: "size-6",
+          value: "text-3xl sm:text-4xl font-bold",
+          label: "text-sm sm:text-base",
+          change: "text-sm",
+          gap: "gap-3"
+        }
+      };
+      return sizes[props.size];
+    });
+    const iconBgClasses = vue.computed(() => {
+      if (props.variant === "glass") return "bg-white/20";
+      const colors = {
+        primary: "bg-primary-100 dark:bg-primary-900/30",
+        secondary: "bg-secondary-100 dark:bg-secondary-900/30",
+        success: "bg-emerald-100 dark:bg-emerald-900/30",
+        warning: "bg-amber-100 dark:bg-amber-900/30",
+        danger: "bg-red-100 dark:bg-red-900/30",
+        info: "bg-blue-100 dark:bg-blue-900/30"
+      };
+      return colors[props.color];
+    });
+    const iconColorClasses = vue.computed(() => {
+      if (props.variant === "glass") return "text-white";
+      const colors = {
+        primary: "text-primary-600 dark:text-primary-400",
+        secondary: "text-secondary-600 dark:text-secondary-400",
+        success: "text-emerald-600 dark:text-emerald-400",
+        warning: "text-amber-600 dark:text-amber-400",
+        danger: "text-red-600 dark:text-red-400",
+        info: "text-blue-600 dark:text-blue-400"
+      };
+      return colors[props.color];
+    });
+    const valueTextClasses = vue.computed(() => {
+      if (props.variant === "glass") return "text-white";
+      return "text-gray-900 dark:text-white";
+    });
+    const labelTextClasses = vue.computed(() => {
+      if (props.variant === "glass") return "text-white/80";
+      return "text-gray-500 dark:text-gray-400";
+    });
+    const trendColorClasses = vue.computed(() => {
+      if (!effectiveTrend.value || effectiveTrend.value === "neutral") {
+        return "text-gray-500";
+      }
+      return effectiveTrend.value === "up" ? "text-emerald-500" : "text-red-500";
+    });
+    const trendIcon = vue.computed(() => {
+      if (!effectiveTrend.value || effectiveTrend.value === "neutral") {
+        return "heroicons:minus";
+      }
+      return effectiveTrend.value === "up" ? "heroicons:arrow-trending-up" : "heroicons:arrow-trending-down";
+    });
+    const cardVariant = vue.computed(() => {
+      const map = {
+        default: "default",
+        glass: "glass",
+        outline: "outline",
+        flat: "flat"
+      };
+      return map[props.variant];
+    });
+    const layoutClasses = vue.computed(() => {
+      if (props.iconPosition === "top") {
+        return isCentered.value ? "flex flex-col items-center text-center" : "flex flex-col";
+      }
+      if (props.iconPosition === "left") {
+        return "flex flex-row items-center";
+      }
+      return "flex flex-row-reverse items-center";
+    });
+    const contentClasses = vue.computed(() => {
+      if (props.iconPosition === "top") {
+        return "flex flex-col " + sizeClasses.value.gap;
+      }
+      return "flex flex-col flex-1 min-w-0 " + (props.iconPosition === "left" ? "ml-3" : "mr-3");
+    });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass([
-          "rounded-2xl p-4 text-center transition-all",
-          __props.variant === "default" && "bg-white dark:bg-slate-800 border border-gray-100 dark:border-slate-700 shadow-sm",
-          __props.variant === "glass" && "bg-white/15 backdrop-blur-sm border border-white/20",
-          __props.variant === "outline" && "border-2 border-gray-200 dark:border-slate-600",
-          __props.variant === "solid" && __props.color === "primary" && "bg-primary-500 text-white",
-          __props.variant === "solid" && __props.color === "success" && "bg-emerald-500 text-white",
-          __props.variant === "solid" && __props.color === "warning" && "bg-amber-500 text-white",
-          __props.variant === "solid" && __props.color === "danger" && "bg-red-500 text-white",
-          __props.variant === "solid" && __props.color === "info" && "bg-blue-500 text-white"
-        ])
-      }, [
-        __props.icon ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass([
-            "size-10 mx-auto mb-2 rounded-xl flex items-center justify-center",
-            __props.variant === "glass" && "bg-white/20",
-            __props.variant === "solid" && "bg-white/20",
-            __props.variant === "default" && __props.color === "primary" && "bg-primary-100 dark:bg-primary-900/30",
-            __props.variant === "default" && __props.color === "success" && "bg-emerald-100 dark:bg-emerald-900/30",
-            __props.variant === "default" && __props.color === "warning" && "bg-amber-100 dark:bg-amber-900/30",
-            __props.variant === "default" && __props.color === "danger" && "bg-red-100 dark:bg-red-900/30",
-            __props.variant === "default" && __props.color === "info" && "bg-blue-100 dark:bg-blue-900/30",
-            __props.variant === "outline" && "bg-gray-100 dark:bg-slate-700"
-          ])
-        }, [
-          vue.createVNode(vue.unref(vue$1.Icon), {
-            icon: __props.icon,
-            class: vue.normalizeClass([
-              "size-5",
-              (__props.variant === "glass" || __props.variant === "solid") && "text-white",
-              __props.variant === "default" && __props.color === "primary" && "text-primary-600 dark:text-primary-400",
-              __props.variant === "default" && __props.color === "success" && "text-emerald-600 dark:text-emerald-400",
-              __props.variant === "default" && __props.color === "warning" && "text-amber-600 dark:text-amber-400",
-              __props.variant === "default" && __props.color === "danger" && "text-red-600 dark:text-red-400",
-              __props.variant === "default" && __props.color === "info" && "text-blue-600 dark:text-blue-400",
-              __props.variant === "outline" && "text-gray-600 dark:text-gray-400"
-            ])
-          }, null, 8, ["icon", "class"])
-        ], 2)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass([
-            "text-2xl sm:text-3xl font-bold",
-            (__props.variant === "glass" || __props.variant === "solid") && "text-white",
-            (__props.variant === "default" || __props.variant === "outline") && "text-gray-900 dark:text-white"
-          ])
-        }, [
-          vue.renderSlot(_ctx.$slots, "value", {}, () => [
-            vue.createTextVNode(vue.toDisplayString(__props.value), 1)
-          ])
-        ], 2),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass([
-            "text-xs sm:text-sm",
-            __props.variant === "glass" && "text-white/80",
-            __props.variant === "solid" && "text-white/90",
-            (__props.variant === "default" || __props.variant === "outline") && "text-gray-500 dark:text-gray-400"
-          ])
-        }, [
-          vue.renderSlot(_ctx.$slots, "label", {}, () => [
-            vue.createTextVNode(vue.toDisplayString(__props.label), 1)
-          ])
-        ], 2),
-        __props.change !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: vue.normalizeClass([
-            "mt-2 text-xs font-medium inline-flex items-center gap-1",
-            __props.change >= 0 ? "text-emerald-500" : "text-red-500"
-          ])
-        }, [
-          vue.createVNode(vue.unref(vue$1.Icon), {
-            icon: __props.change >= 0 ? "heroicons:arrow-trending-up" : "heroicons:arrow-trending-down",
-            class: "size-3.5"
-          }, null, 8, ["icon"]),
-          vue.createElementVNode("span", null, vue.toDisplayString(__props.change >= 0 ? "+" : "") + vue.toDisplayString(__props.change) + "%", 1),
-          __props.changeLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, vue.toDisplayString(__props.changeLabel), 1)) : vue.createCommentVNode("", true)
-        ], 2)) : vue.createCommentVNode("", true)
-      ], 2);
+      return vue.openBlock(), vue.createBlock(_sfc_main$z, {
+        variant: cardVariant.value,
+        padding: sizeClasses.value.padding,
+        clickable: __props.clickable,
+        shadow: __props.variant === "glass" ? "none" : "sm",
+        border: __props.variant === "outline" ? "default" : "none",
+        rounded: "xl",
+        "header-divider": false,
+        class: vue.normalizeClass(__props.cardClass),
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(layoutClasses.value)
+          }, [
+            __props.icon ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass([
+                "rounded-xl flex items-center justify-center flex-shrink-0",
+                sizeClasses.value.icon,
+                iconBgClasses.value,
+                __props.iconPosition === "top" && "mb-2",
+                __props.iconClass
+              ])
+            }, [
+              vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+                vue.createVNode(vue.unref(vue$1.Icon), {
+                  icon: __props.icon,
+                  class: vue.normalizeClass([sizeClasses.value.iconInner, iconColorClasses.value])
+                }, null, 8, ["icon", "class"])
+              ])
+            ], 2)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(contentClasses.value)
+            }, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([sizeClasses.value.value, valueTextClasses.value, __props.valueClass])
+              }, [
+                vue.renderSlot(_ctx.$slots, "value", {}, () => [
+                  vue.createTextVNode(vue.toDisplayString(__props.value), 1)
+                ])
+              ], 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([sizeClasses.value.label, labelTextClasses.value, __props.labelClass])
+              }, [
+                vue.renderSlot(_ctx.$slots, "label", {}, () => [
+                  vue.createTextVNode(vue.toDisplayString(__props.label), 1)
+                ])
+              ], 2),
+              __props.change !== void 0 || __props.trend ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass([
+                  "mt-1 font-medium inline-flex items-center gap-1",
+                  sizeClasses.value.change,
+                  trendColorClasses.value
+                ])
+              }, [
+                vue.createVNode(vue.unref(vue$1.Icon), {
+                  icon: trendIcon.value,
+                  class: "size-3.5"
+                }, null, 8, ["icon"]),
+                !__props.trendOnly && __props.change !== void 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, vue.toDisplayString(__props.change >= 0 ? "+" : "") + vue.toDisplayString(__props.change) + "% ", 1)) : vue.createCommentVNode("", true),
+                __props.changeLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString(__props.changeLabel), 1)) : vue.createCommentVNode("", true)
+              ], 2)) : vue.createCommentVNode("", true)
+            ], 2)
+          ], 2),
+          vue.renderSlot(_ctx.$slots, "extra")
+        ]),
+        _: 3
+      }, 8, ["variant", "padding", "clickable", "shadow", "border", "class"]);
     };
   }
 });
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
-  __name: "StatsGrid",
+  __name: "Stats",
   props: {
     stats: {},
     cols: {},
+    gap: { default: "md" },
     variant: { default: "default" },
+    size: { default: "md" },
+    iconPosition: { default: "top" },
     color: { default: "primary" }
   },
   setup(__props) {
     return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["grid gap-3 sm:gap-4", [
+        class: vue.normalizeClass(["grid", [
+          // Gap classes
+          __props.gap === "sm" && "gap-2 sm:gap-3",
+          __props.gap === "md" && "gap-3 sm:gap-4",
+          __props.gap === "lg" && "gap-4 sm:gap-6",
+          // Column classes
+          __props.cols === 1 && "grid-cols-1",
           __props.cols === 2 && "grid-cols-2",
           __props.cols === 3 && "grid-cols-3",
           __props.cols === 4 && "grid-cols-2 sm:grid-cols-4",
-          !__props.cols && __props.stats.length === 2 && "grid-cols-2",
-          !__props.cols && __props.stats.length === 3 && "grid-cols-3",
-          !__props.cols && __props.stats.length === 4 && "grid-cols-2 sm:grid-cols-4",
-          !__props.cols && __props.stats.length > 4 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
+          __props.cols === 5 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
+          __props.cols === 6 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
+          // Auto columns based on stats length
+          !__props.cols && ((_a = __props.stats) == null ? void 0 : _a.length) === 1 && "grid-cols-1",
+          !__props.cols && ((_b = __props.stats) == null ? void 0 : _b.length) === 2 && "grid-cols-2",
+          !__props.cols && ((_c = __props.stats) == null ? void 0 : _c.length) === 3 && "grid-cols-3",
+          !__props.cols && ((_d = __props.stats) == null ? void 0 : _d.length) === 4 && "grid-cols-2 sm:grid-cols-4",
+          !__props.cols && __props.stats && __props.stats.length > 4 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
         ]])
       }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.stats, (stat, index2) => {
@@ -3168,10 +3297,14 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             icon: stat.icon,
             change: stat.change,
             "change-label": stat.changeLabel,
+            trend: stat.trend,
             variant: __props.variant,
-            color: __props.color
-          }, null, 8, ["label", "value", "icon", "change", "change-label", "variant", "color"]);
-        }), 128))
+            size: __props.size,
+            "icon-position": __props.iconPosition,
+            color: stat.color || __props.color
+          }, null, 8, ["label", "value", "icon", "change", "change-label", "trend", "variant", "size", "icon-position", "color"]);
+        }), 128)),
+        vue.renderSlot(_ctx.$slots, "default")
       ], 2);
     };
   }
@@ -3350,4 +3483,4 @@ exports._sfc_main$6 = _sfc_main$u;
 exports._sfc_main$7 = _sfc_main$t;
 exports._sfc_main$8 = _sfc_main$s;
 exports._sfc_main$9 = _sfc_main$r;
-//# sourceMappingURL=FilterTabs.vue_vue_type_script_setup_true_lang-COkZbeGG.cjs.map
+//# sourceMappingURL=FilterTabs.vue_vue_type_script_setup_true_lang-l8lJzwoY.cjs.map