cisse-vue-ui 0.10.0 → 0.10.1

package/dist/{FilterTabs.vue_vue_type_script_setup_true_lang-CJnvcF8Z.js → FilterTabs.vue_vue_type_script_setup_true_lang-aPs8YGWB.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, createBlock, createElementBlock, openBlock, createCommentVNode, renderSlot, normalizeClass, createElementVNode, createTextVNode, toDisplayString, useSlots, withKeys, withModifiers, normalizeStyle, unref, useAttrs, toRefs, provide, reactive, mergeProps, normalizeProps, guardReactiveProps, inject, Fragment, withCtx, createVNode, renderList, resolveDynamicComponent, ref, createSlots, watch, withDirectives, vModelText, Teleport, Transition, nextTick, resolveComponent, vShow, onMounted, onUnmounted, mergeModels, useModel } from "vue";
 import { _ as _sfc_main$C, a as useBreakpoints } from "./index-BaWpldIJ.js";
-import { b as _sfc_main$B, a as _sfc_main$I, _ as _sfc_main$J, c as _sfc_main$K } from "./ListSkeleton.vue_vue_type_script_setup_true_lang-BHopJ9RG.js";
+import { c as _sfc_main$B, b as _sfc_main$I, _ as _sfc_main$J, d as _sfc_main$K, a as _sfc_main$L } from "./Skeleton.vue_vue_type_script_setup_true_lang-mcD2ZqKf.js";
 import { e as _sfc_main$D, d as _sfc_main$E, c as _sfc_main$F, b as _sfc_main$G, a as _sfc_main$H } from "./BadgeType.vue_vue_type_script_setup_true_lang-tHRMWBb-.js";
 import { a as usePagination, u as useDarkMode } from "./usePagination-BGwbICFC.js";
 import { Icon } from "@iconify/vue";
@@ -11,11 +11,11 @@ const _hoisted_1$o = {
   class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950"
 };
 const _hoisted_2$h = { class: "flex flex-col gap-0.5" };
-const _hoisted_3$a = {
+const _hoisted_3$b = {
   key: 1,
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
 };
-const _hoisted_4$7 = { class: "flex gap-2" };
+const _hoisted_4$8 = { class: "flex gap-2" };
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "CardComponent",
   props: {
@@ -61,13 +61,13 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
                 createTextVNode(toDisplayString(__props.title), 1)
               ])
             ], 2)) : createCommentVNode("", true),
-            __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_3$a, [
+            __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_3$b, [
               renderSlot(_ctx.$slots, "description", {}, () => [
                 createTextVNode(toDisplayString(__props.description), 1)
               ])
             ])) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", _hoisted_4$7, [
+          createElementVNode("div", _hoisted_4$8, [
             renderSlot(_ctx.$slots, "actions")
           ])
         ], 2)) : createCommentVNode("", true),
@@ -78,8 +78,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$n = ["role", "tabindex", "onKeydown"];
 const _hoisted_2$g = ["src", "alt"];
-const _hoisted_3$9 = ["src", "alt"];
-const _hoisted_4$6 = { class: "flex items-center gap-3" };
+const _hoisted_3$a = ["src", "alt"];
+const _hoisted_4$7 = { class: "flex items-center gap-3" };
 const _hoisted_5$4 = { class: "flex flex-col gap-0.5" };
 const _hoisted_6$3 = ["src", "alt"];
 const _sfc_main$z = /* @__PURE__ */ defineComponent({
@@ -325,7 +325,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               src: __props.image,
               alt: __props.imageAlt || "",
               class: normalizeClass(["w-full h-full object-cover", __props.imageClass])
-            }, null, 10, _hoisted_3$9)) : createCommentVNode("", true)
+            }, null, 10, _hoisted_3$a)) : createCommentVNode("", true)
           ])
         ], 6)) : createCommentVNode("", true),
         createElementVNode("div", {
@@ -351,7 +351,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
               __props.imagePosition === "background" && "text-white border-white/20"
             ])
           }, [
-            createElementVNode("div", _hoisted_4$6, [
+            createElementVNode("div", _hoisted_4$7, [
               __props.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 class: normalizeClass(computedIconClass.value)
@@ -651,7 +651,7 @@ const _hoisted_2$f = {
   key: 0,
   d: "M7 14l5-5 5 5H7z"
 };
-const _hoisted_3$8 = {
+const _hoisted_3$9 = {
   key: 1,
   d: "M7 10l5 5 5-5H7z"
 };
@@ -733,7 +733,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             viewBox: "0 0 24 24",
             fill: "currentColor"
           }, [
-            __props.sorted && __props.sortDirection === "asc" ? (openBlock(), createElementBlock("path", _hoisted_2$f)) : __props.sorted && __props.sortDirection === "desc" ? (openBlock(), createElementBlock("path", _hoisted_3$8)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            __props.sorted && __props.sortDirection === "asc" ? (openBlock(), createElementBlock("path", _hoisted_2$f)) : __props.sorted && __props.sortDirection === "desc" ? (openBlock(), createElementBlock("path", _hoisted_3$9)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
               _cache[2] || (_cache[2] = createElementVNode("path", {
                 d: "M7 14l5-5 5 5H7z",
                 class: "opacity-40"
@@ -1116,8 +1116,8 @@ const _hoisted_2$d = {
   key: 1,
   class: "flex flex-col items-center justify-center py-12 text-center"
 };
-const _hoisted_3$7 = { class: "flex flex-col items-center gap-3" };
-const _hoisted_4$5 = { class: "text-sm text-gray-600 dark:text-gray-400" };
+const _hoisted_3$8 = { class: "flex flex-col items-center gap-3" };
+const _hoisted_4$6 = { class: "text-sm text-gray-600 dark:text-gray-400" };
 const _hoisted_5$3 = {
   key: 3,
   class: "flex flex-col items-center justify-center py-12 text-center"
@@ -1234,7 +1234,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           columns: visibleProperties.value.length
         }, null, 8, ["rows", "columns"])) : __props.error ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
           renderSlot(_ctx.$slots, "error", {}, () => [
-            createElementVNode("div", _hoisted_3$7, [
+            createElementVNode("div", _hoisted_3$8, [
               _cache[2] || (_cache[2] = createElementVNode("svg", {
                 class: "size-12 text-red-400",
                 fill: "none",
@@ -1248,7 +1248,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                   d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                 })
               ], -1)),
-              createElementVNode("p", _hoisted_4$5, toDisplayString(__props.errorMessage), 1)
+              createElementVNode("p", _hoisted_4$6, toDisplayString(__props.errorMessage), 1)
             ])
           ])
         ])) : __props.items && __props.items.length > 0 ? (openBlock(), createBlock(_sfc_main$y, {
@@ -1359,8 +1359,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$f = { class: "space-y-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 = {
+const _hoisted_3$7 = { class: "text-sm text-gray-600 dark:text-gray-400" };
+const _hoisted_4$5 = {
   key: 0,
   class: "text-sm text-primary font-medium"
 };
@@ -1445,8 +1445,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   indeterminate: someSelected.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
                 }, null, 8, ["model-value", "indeterminate"]),
-                createElementVNode("span", _hoisted_3$6, toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
-                __props.selectedItems && __props.selectedItems.size > 0 ? (openBlock(), createElementBlock("span", _hoisted_4$4, " (" + toDisplayString(__props.selectedItems.size) + " sélectionné" + toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : createCommentVNode("", true)
+                createElementVNode("span", _hoisted_3$7, toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
+                __props.selectedItems && __props.selectedItems.size > 0 ? (openBlock(), createElementBlock("span", _hoisted_4$5, " (" + toDisplayString(__props.selectedItems.size) + " sélectionné" + toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : createCommentVNode("", true)
               ])
             ]),
             _: 1
@@ -1629,8 +1629,8 @@ const _hoisted_1$e = {
   class: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
 };
 const _hoisted_2$b = { class: "relative" };
-const _hoisted_3$5 = ["disabled", "placeholder"];
-const _hoisted_4$3 = ["disabled"];
+const _hoisted_3$6 = ["disabled", "placeholder"];
+const _hoisted_4$4 = ["disabled"];
 const _hoisted_5$1 = {
   key: 0,
   class: "px-4 py-3 text-sm text-gray-500"
@@ -1770,7 +1770,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               type: "text",
               onFocus: openDropdown,
               onKeydown: handleKeydown
-            }, null, 40, _hoisted_3$5), [
+            }, null, 40, _hoisted_3$6), [
               [vModelText, searchQuery.value]
             ]),
             __props.modelValue && !__props.disabled ? (openBlock(), createElementBlock("button", {
@@ -1794,7 +1794,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([{ "rotate-180": unref(isOpen) }, "size-4 text-gray-400 transition"]),
                 icon: "lucide:chevron-down"
               }, null, 8, ["class"])
-            ], 8, _hoisted_4$3)
+            ], 8, _hoisted_4$4)
           ], 2),
           (openBlock(), createBlock(Teleport, {
             to: "body",
@@ -1922,7 +1922,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$d = { class: "relative inline-block" };
 const _hoisted_2$a = ["src", "alt"];
-const _hoisted_3$4 = { key: 1 };
+const _hoisted_3$5 = { key: 1 };
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
@@ -2043,7 +2043,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             alt: __props.alt || __props.name,
             class: "size-full object-cover",
             onError: _cache[0] || (_cache[0] = ($event) => imageError.value = true)
-          }, null, 40, _hoisted_2$a)) : initials.value ? (openBlock(), createElementBlock("span", _hoisted_3$4, toDisplayString(initials.value), 1)) : (openBlock(), createBlock(unref(Icon), {
+          }, null, 40, _hoisted_2$a)) : initials.value ? (openBlock(), createElementBlock("span", _hoisted_3$5, toDisplayString(initials.value), 1)) : (openBlock(), createBlock(unref(Icon), {
             key: 2,
             icon: "lucide:user",
             class: "size-1/2"
@@ -2535,8 +2535,8 @@ const _hoisted_1$7 = {
   class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700"
 };
 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 = {
+const _hoisted_3$4 = { class: "flex-1 overflow-y-auto p-4" };
+const _hoisted_4$3 = {
   key: 1,
   class: "px-4 py-3 border-t border-gray-200 dark:border-gray-700"
 };
@@ -2675,10 +2675,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                   })
                 ])) : createCommentVNode("", true)
               ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_3$3, [
+              createElementVNode("div", _hoisted_3$4, [
                 renderSlot(_ctx.$slots, "default")
               ]),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
                 renderSlot(_ctx.$slots, "footer")
               ])) : createCommentVNode("", true)
             ], 2)) : createCommentVNode("", true)
@@ -2780,8 +2780,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$4 = ["id", "disabled", "aria-expanded", "aria-controls"];
 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 _hoisted_3$3 = ["id", "aria-labelledby"];
+const _hoisted_4$2 = { class: "px-4 py-3 bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
@@ -2846,10 +2846,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "aria-labelledby": headerId.value,
               class: "overflow-hidden"
             }, [
-              createElementVNode("div", _hoisted_4$1, [
+              createElementVNode("div", _hoisted_4$2, [
                 renderSlot(_ctx.$slots, "default")
               ])
-            ], 8, _hoisted_3$2), [
+            ], 8, _hoisted_3$3), [
               [vShow, isOpen.value]
             ])
           ]),
@@ -2864,8 +2864,8 @@ const _hoisted_1$3 = {
   class: "relative"
 };
 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_3$2 = { class: "flex-1 min-w-0 pt-0.5" };
+const _hoisted_4$1 = { class: "flex items-center justify-between gap-2" };
 const _hoisted_5 = { class: "text-sm font-medium text-gray-900 dark:text-white" };
 const _hoisted_6 = {
   key: 0,
@@ -2952,8 +2952,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["size-4", getStatusClasses(item.status).icon])
                 }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
               ], 2),
-              createElementVNode("div", _hoisted_3$1, [
-                createElementVNode("div", _hoisted_4, [
+              createElementVNode("div", _hoisted_3$2, [
+                createElementVNode("div", _hoisted_4$1, [
                   createElementVNode("h3", _hoisted_5, toDisplayString(item.title), 1),
                   item.date ? (openBlock(), createElementBlock("time", _hoisted_6, toDisplayString(item.date), 1)) : createCommentVNode("", true)
                 ]),
@@ -3039,9 +3039,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { key: 0 };
+const _hoisted_1$1 = {
+  key: 0,
+  class: "mr-0.5"
+};
 const _hoisted_2$1 = {
   key: 1,
+  class: "ml-0.5"
+};
+const _hoisted_3$1 = { key: 1 };
+const _hoisted_4 = {
+  key: 2,
   class: "text-gray-400"
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
@@ -3049,28 +3057,46 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   props: {
     label: {},
     value: {},
+    description: {},
+    prefix: {},
+    suffix: {},
     icon: {},
     iconPosition: { default: "top" },
+    iconRounded: { default: "xl" },
+    hideIconBg: { type: Boolean, default: false },
     change: {},
     changeLabel: {},
     trend: {},
     trendOnly: { type: Boolean, default: false },
+    hideTrendIcon: { type: Boolean, default: false },
+    invertTrendColors: { type: Boolean, default: false },
     size: { default: "md" },
     variant: { default: "default" },
     color: { default: "primary" },
     clickable: { type: Boolean, default: false },
     centered: { type: Boolean },
+    labelFirst: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    shadow: { default: "sm" },
+    rounded: { default: "xl" },
+    border: { default: "none" },
+    accent: { default: "none" },
     cardClass: {},
+    iconWrapperClass: {},
     iconClass: {},
     valueClass: {},
-    labelClass: {}
+    labelClass: {},
+    descriptionClass: {},
+    trendClass: {},
+    contentClass: {}
   },
   emits: ["click"],
   setup(__props) {
     const props = __props;
     const isCentered = computed(() => {
       if (props.centered !== void 0) return props.centered;
-      return props.iconPosition === "top";
+      return props.iconPosition === "top" || props.iconPosition === "bottom";
     });
     const effectiveTrend = computed(() => {
       if (props.trend) return props.trend;
@@ -3081,38 +3107,73 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     });
     const sizeClasses = computed(() => {
       const sizes = {
+        xs: {
+          padding: props.compact ? "none" : "sm",
+          icon: "size-6",
+          iconInner: "size-3",
+          value: "text-lg font-bold",
+          label: "text-xs",
+          description: "text-xs",
+          change: "text-xs",
+          gap: "gap-0.5"
+        },
         sm: {
-          padding: "sm",
+          padding: props.compact ? "sm" : "sm",
           icon: "size-8",
           iconInner: "size-4",
           value: "text-xl font-bold",
           label: "text-xs",
+          description: "text-xs",
           change: "text-xs",
           gap: "gap-1"
         },
         md: {
-          padding: "md",
+          padding: props.compact ? "sm" : "md",
           icon: "size-10",
           iconInner: "size-5",
           value: "text-2xl sm:text-3xl font-bold",
           label: "text-xs sm:text-sm",
+          description: "text-xs sm:text-sm",
           change: "text-xs",
           gap: "gap-2"
         },
         lg: {
-          padding: "lg",
+          padding: props.compact ? "md" : "lg",
           icon: "size-12",
           iconInner: "size-6",
           value: "text-3xl sm:text-4xl font-bold",
           label: "text-sm sm:text-base",
+          description: "text-sm",
           change: "text-sm",
           gap: "gap-3"
+        },
+        xl: {
+          padding: props.compact ? "md" : "lg",
+          icon: "size-14",
+          iconInner: "size-7",
+          value: "text-4xl sm:text-5xl font-bold",
+          label: "text-base sm:text-lg",
+          description: "text-sm sm:text-base",
+          change: "text-sm",
+          gap: "gap-4"
         }
       };
       return sizes[props.size];
     });
+    const iconRoundedClasses = computed(() => {
+      const map = {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        full: "rounded-full"
+      };
+      return map[props.iconRounded];
+    });
     const iconBgClasses = computed(() => {
-      if (props.variant === "glass") return "bg-white/20";
+      if (props.hideIconBg) return "";
+      if (props.variant === "glass" || props.variant === "solid") return "bg-white/20";
       const colors = {
         primary: "bg-primary-100 dark:bg-primary-900/30",
         secondary: "bg-secondary-100 dark:bg-secondary-900/30",
@@ -3124,7 +3185,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return colors[props.color];
     });
     const iconColorClasses = computed(() => {
-      if (props.variant === "glass") return "text-white";
+      if (props.variant === "glass" || props.variant === "solid") return "text-white";
       const colors = {
         primary: "text-primary-600 dark:text-primary-400",
         secondary: "text-secondary-600 dark:text-secondary-400",
@@ -3135,19 +3196,43 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       };
       return colors[props.color];
     });
+    const solidBgClasses = computed(() => {
+      if (props.variant !== "solid") return "";
+      const colors = {
+        primary: "bg-primary-500",
+        secondary: "bg-secondary-500",
+        success: "bg-emerald-500",
+        warning: "bg-amber-500",
+        danger: "bg-red-500",
+        info: "bg-blue-500"
+      };
+      return colors[props.color];
+    });
     const valueTextClasses = computed(() => {
-      if (props.variant === "glass") return "text-white";
+      if (props.variant === "glass" || props.variant === "solid") return "text-white";
       return "text-gray-900 dark:text-white";
     });
     const labelTextClasses = computed(() => {
       if (props.variant === "glass") return "text-white/80";
+      if (props.variant === "solid") return "text-white/90";
       return "text-gray-500 dark:text-gray-400";
     });
+    const descriptionTextClasses = computed(() => {
+      if (props.variant === "glass") return "text-white/70";
+      if (props.variant === "solid") return "text-white/80";
+      return "text-gray-400 dark:text-gray-500";
+    });
     const trendColorClasses = computed(() => {
       if (!effectiveTrend.value || effectiveTrend.value === "neutral") {
         return "text-gray-500";
       }
-      return effectiveTrend.value === "up" ? "text-emerald-500" : "text-red-500";
+      const isUp = effectiveTrend.value === "up";
+      const greenColor = "text-emerald-500";
+      const redColor = "text-red-500";
+      if (props.invertTrendColors) {
+        return isUp ? redColor : greenColor;
+      }
+      return isUp ? greenColor : redColor;
     });
     const trendIcon = computed(() => {
       if (!effectiveTrend.value || effectiveTrend.value === "neutral") {
@@ -3156,100 +3241,170 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return effectiveTrend.value === "up" ? "heroicons:arrow-trending-up" : "heroicons:arrow-trending-down";
     });
     const cardVariant = computed(() => {
-      const map = {
-        default: "default",
-        glass: "glass",
-        outline: "outline",
-        flat: "flat"
-      };
-      return map[props.variant];
+      if (props.variant === "solid") return "default";
+      return props.variant;
+    });
+    const effectiveShadow = computed(() => {
+      if (props.variant === "glass") return "none";
+      return props.shadow;
+    });
+    const effectiveBorder = computed(() => {
+      if (props.variant === "outline") return "default";
+      return props.border;
     });
     const layoutClasses = computed(() => {
-      if (props.iconPosition === "top") {
-        return isCentered.value ? "flex flex-col items-center text-center" : "flex flex-col";
+      const centered = isCentered.value ? "items-center text-center" : "";
+      switch (props.iconPosition) {
+        case "top":
+          return `flex flex-col ${centered}`;
+        case "bottom":
+          return `flex flex-col-reverse ${centered}`;
+        case "left":
+          return "flex flex-row items-center";
+        case "right":
+          return "flex flex-row-reverse items-center";
+        default:
+          return `flex flex-col ${centered}`;
       }
-      if (props.iconPosition === "left") {
-        return "flex flex-row items-center";
+    });
+    const iconMarginClasses = computed(() => {
+      switch (props.iconPosition) {
+        case "top":
+          return "mb-2";
+        case "bottom":
+          return "mt-2";
+        case "left":
+          return "mr-3";
+        case "right":
+          return "ml-3";
+        default:
+          return "";
       }
-      return "flex flex-row-reverse items-center";
     });
-    const contentClasses = computed(() => {
-      if (props.iconPosition === "top") {
-        return "flex flex-col " + sizeClasses.value.gap;
+    const computedContentClasses = computed(() => {
+      const isVertical = props.iconPosition === "top" || props.iconPosition === "bottom";
+      if (isVertical) {
+        return `flex flex-col ${sizeClasses.value.gap}`;
       }
-      return "flex flex-col flex-1 min-w-0 " + (props.iconPosition === "left" ? "ml-3" : "mr-3");
+      return `flex flex-col flex-1 min-w-0 ${sizeClasses.value.gap}`;
     });
     return (_ctx, _cache) => {
       return openBlock(), 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",
+        shadow: effectiveShadow.value,
+        border: effectiveBorder.value,
+        rounded: __props.rounded,
+        accent: __props.accent,
         "header-divider": false,
-        class: normalizeClass(__props.cardClass),
+        class: normalizeClass([__props.cardClass, solidBgClasses.value, __props.variant === "solid" && "text-white"]),
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", {
+          __props.loading ? (openBlock(), createElementBlock("div", {
+            key: 0,
             class: normalizeClass(layoutClasses.value)
           }, [
-            __props.icon ? (openBlock(), createElementBlock("div", {
+            __props.icon ? (openBlock(), createBlock(_sfc_main$L, {
+              key: 0,
+              class: normalizeClass([sizeClasses.value.icon, iconRoundedClasses.value, iconMarginClasses.value])
+            }, null, 8, ["class"])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(computedContentClasses.value)
+            }, [
+              createVNode(_sfc_main$L, {
+                class: normalizeClass(sizeClasses.value.value),
+                width: "60%",
+                height: "1.5em"
+              }, null, 8, ["class"]),
+              createVNode(_sfc_main$L, {
+                class: normalizeClass(sizeClasses.value.label),
+                width: "80%",
+                height: "1em"
+              }, null, 8, ["class"])
+            ], 2)
+          ], 2)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(layoutClasses.value)
+          }, [
+            __props.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: normalizeClass([
-                "rounded-xl flex items-center justify-center flex-shrink-0",
+                "flex items-center justify-center flex-shrink-0",
                 sizeClasses.value.icon,
+                iconRoundedClasses.value,
                 iconBgClasses.value,
-                __props.iconPosition === "top" && "mb-2",
-                __props.iconClass
+                iconMarginClasses.value,
+                __props.iconWrapperClass
               ])
             }, [
               renderSlot(_ctx.$slots, "icon", {}, () => [
                 createVNode(unref(Icon), {
                   icon: __props.icon,
-                  class: normalizeClass([sizeClasses.value.iconInner, iconColorClasses.value])
+                  class: normalizeClass([sizeClasses.value.iconInner, iconColorClasses.value, __props.iconClass])
                 }, null, 8, ["icon", "class"])
               ])
             ], 2)) : createCommentVNode("", true),
             createElementVNode("div", {
-              class: normalizeClass(contentClasses.value)
+              class: normalizeClass([computedContentClasses.value, __props.contentClass])
             }, [
+              __props.labelFirst ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([sizeClasses.value.label, labelTextClasses.value, __props.labelClass])
+              }, [
+                renderSlot(_ctx.$slots, "label", {}, () => [
+                  createTextVNode(toDisplayString(__props.label), 1)
+                ])
+              ], 2)) : createCommentVNode("", true),
               createElementVNode("div", {
                 class: normalizeClass([sizeClasses.value.value, valueTextClasses.value, __props.valueClass])
               }, [
                 renderSlot(_ctx.$slots, "value", {}, () => [
-                  createTextVNode(toDisplayString(__props.value), 1)
+                  __props.prefix ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(__props.prefix), 1)) : createCommentVNode("", true),
+                  createTextVNode(" " + toDisplayString(__props.value) + " ", 1),
+                  __props.suffix ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(__props.suffix), 1)) : createCommentVNode("", true)
                 ])
               ], 2),
-              createElementVNode("div", {
+              !__props.labelFirst ? (openBlock(), createElementBlock("div", {
+                key: 1,
                 class: normalizeClass([sizeClasses.value.label, labelTextClasses.value, __props.labelClass])
               }, [
                 renderSlot(_ctx.$slots, "label", {}, () => [
                   createTextVNode(toDisplayString(__props.label), 1)
                 ])
-              ], 2),
+              ], 2)) : createCommentVNode("", true),
+              __props.description || _ctx.$slots.description ? (openBlock(), createElementBlock("div", {
+                key: 2,
+                class: normalizeClass([sizeClasses.value.description, descriptionTextClasses.value, __props.descriptionClass])
+              }, [
+                renderSlot(_ctx.$slots, "description", {}, () => [
+                  createTextVNode(toDisplayString(__props.description), 1)
+                ])
+              ], 2)) : createCommentVNode("", true),
               __props.change !== void 0 || __props.trend ? (openBlock(), createElementBlock("div", {
-                key: 0,
+                key: 3,
                 class: normalizeClass([
                   "mt-1 font-medium inline-flex items-center gap-1",
                   sizeClasses.value.change,
-                  trendColorClasses.value
+                  trendColorClasses.value,
+                  __props.trendClass
                 ])
               }, [
-                createVNode(unref(Icon), {
+                !__props.hideTrendIcon ? (openBlock(), createBlock(unref(Icon), {
+                  key: 0,
                   icon: trendIcon.value,
                   class: "size-3.5"
-                }, null, 8, ["icon"]),
-                !__props.trendOnly && __props.change !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(__props.change >= 0 ? "+" : "") + toDisplayString(__props.change) + "% ", 1)) : createCommentVNode("", true),
-                __props.changeLabel ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(__props.changeLabel), 1)) : createCommentVNode("", true)
+                }, null, 8, ["icon"])) : createCommentVNode("", true),
+                !__props.trendOnly && __props.change !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(__props.change >= 0 ? "+" : "") + toDisplayString(__props.change) + "% ", 1)) : createCommentVNode("", true),
+                __props.changeLabel ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.changeLabel), 1)) : createCommentVNode("", true)
               ], 2)) : createCommentVNode("", true)
             ], 2)
-          ], 2),
+          ], 2)),
           renderSlot(_ctx.$slots, "extra")
         ]),
         _: 3
-      }, 8, ["variant", "padding", "clickable", "shadow", "border", "class"]);
+      }, 8, ["variant", "padding", "clickable", "shadow", "border", "rounded", "accent", "class"]);
     };
   }
 });
@@ -3262,17 +3417,41 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     variant: { default: "default" },
     size: { default: "md" },
     iconPosition: { default: "top" },
-    color: { default: "primary" }
+    iconRounded: { default: "xl" },
+    hideIconBg: { type: Boolean, default: false },
+    color: { default: "primary" },
+    labelFirst: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    shadow: { default: "sm" },
+    rounded: { default: "xl" },
+    border: { default: "none" },
+    accent: { default: "none" },
+    clickable: { type: Boolean, default: false },
+    centered: { type: Boolean },
+    invertTrendColors: { type: Boolean, default: false },
+    hideTrendIcon: { type: Boolean, default: false },
+    gridClass: {},
+    cardClass: {},
+    iconWrapperClass: {},
+    iconClass: {},
+    valueClass: {},
+    labelClass: {}
   },
+  emits: ["item-click"],
   setup(__props) {
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["grid", [
+          __props.gridClass,
           // Gap classes
+          __props.gap === "none" && "gap-0",
+          __props.gap === "xs" && "gap-1 sm:gap-2",
           __props.gap === "sm" && "gap-2 sm:gap-3",
           __props.gap === "md" && "gap-3 sm:gap-4",
           __props.gap === "lg" && "gap-4 sm:gap-6",
+          __props.gap === "xl" && "gap-6 sm:gap-8",
           // Column classes
           __props.cols === 1 && "grid-cols-1",
           __props.cols === 2 && "grid-cols-2",
@@ -3297,11 +3476,33 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             change: stat.change,
             "change-label": stat.changeLabel,
             trend: stat.trend,
+            description: stat.description,
+            prefix: stat.prefix,
+            suffix: stat.suffix,
             variant: __props.variant,
             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"]);
+            "icon-rounded": __props.iconRounded,
+            "hide-icon-bg": __props.hideIconBg,
+            color: stat.color || __props.color,
+            "label-first": __props.labelFirst,
+            compact: __props.compact,
+            loading: __props.loading,
+            shadow: __props.shadow,
+            rounded: __props.rounded,
+            border: __props.border,
+            accent: __props.accent,
+            clickable: __props.clickable,
+            centered: __props.centered,
+            "invert-trend-colors": __props.invertTrendColors,
+            "hide-trend-icon": __props.hideTrendIcon,
+            "card-class": __props.cardClass,
+            "icon-wrapper-class": __props.iconWrapperClass,
+            "icon-class": __props.iconClass,
+            "value-class": __props.valueClass,
+            "label-class": __props.labelClass,
+            onClick: ($event) => _ctx.$emit("item-click", index, stat, $event)
+          }, null, 8, ["label", "value", "icon", "change", "change-label", "trend", "description", "prefix", "suffix", "variant", "size", "icon-position", "icon-rounded", "hide-icon-bg", "color", "label-first", "compact", "loading", "shadow", "rounded", "border", "accent", "clickable", "centered", "invert-trend-colors", "hide-trend-icon", "card-class", "icon-wrapper-class", "icon-class", "value-class", "label-class", "onClick"]);
         }), 128)),
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -3484,4 +3685,4 @@ export {
   _sfc_main$b as y,
   _sfc_main$a as z
 };
-//# sourceMappingURL=FilterTabs.vue_vue_type_script_setup_true_lang-CJnvcF8Z.js.map
+//# sourceMappingURL=FilterTabs.vue_vue_type_script_setup_true_lang-aPs8YGWB.js.map