cisse-vue-ui 0.5.33 → 0.6.0

package/dist/{DarkModeToggle.vue_vue_type_script_setup_true_lang-DOrIWBcH.cjs → FilterTabs.vue_vue_type_script_setup_true_lang-HwjuvIJX.cjs}

@@ -1,23 +1,23 @@
 "use strict";
 const vue = require("vue");
 const index = require("./index-D1x3TH9k.cjs");
-const Button_vue_vue_type_script_setup_true_lang = require("./Button.vue_vue_type_script_setup_true_lang-CLmHDal2.cjs");
+const ListSkeleton_vue_vue_type_script_setup_true_lang = require("./ListSkeleton.vue_vue_type_script_setup_true_lang-DtwwmfWr.cjs");
 const BadgeType_vue_vue_type_script_setup_true_lang = require("./BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs");
 const vue$1 = require("@iconify/vue");
 const useDropdown = require("./useDropdown-DHFnd259.cjs");
 const useId = require("./useId-nxrBaIC9.cjs");
 const useDarkMode = require("./useDarkMode-DLZcJEUQ.cjs");
-const _hoisted_1$f = {
+const _hoisted_1$h = {
   key: 1,
   class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950"
 };
-const _hoisted_2$c = { class: "flex flex-col gap-0.5" };
-const _hoisted_3$7 = {
+const _hoisted_2$d = { class: "flex flex-col gap-0.5" };
+const _hoisted_3$8 = {
   key: 1,
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
 };
 const _hoisted_4$6 = { class: "flex gap-2" };
-const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
   __name: "CardComponent",
   props: {
     title: {},
@@ -38,12 +38,12 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
       () => props.dividerClass || "border-gray-200 dark:border-gray-700"
     );
     return (_ctx, _cache) => {
-      return __props.loading ? (vue.openBlock(), vue.createBlock(Button_vue_vue_type_script_setup_true_lang._sfc_main$2, {
+      return __props.loading ? (vue.openBlock(), vue.createBlock(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$1, {
         key: 0,
         lines: __props.loadingLines,
         "show-avatar": __props.loadingAvatar,
         "show-actions": __props.loadingActions
-      }, null, 8, ["lines", "show-avatar", "show-actions"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+      }, null, 8, ["lines", "show-avatar", "show-actions"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
         _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: vue.normalizeClass(["border-b", dividerClasses.value])
@@ -53,7 +53,7 @@ const _sfc_main$i = /* @__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$c, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             __props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               class: vue.normalizeClass(["text-md font-semibold", titleClasses.value])
@@ -62,7 +62,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                 vue.createTextVNode(vue.toDisplayString(__props.title), 1)
               ])
             ], 2)) : vue.createCommentVNode("", true),
-            __props.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$7, [
+            __props.description || _ctx.$slots.description ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$8, [
               vue.renderSlot(_ctx.$slots, "description", {}, () => [
                 vue.createTextVNode(vue.toDisplayString(__props.description), 1)
               ])
@@ -77,12 +77,12 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$e = { class: "overflow-hidden" };
-const _hoisted_2$b = {
+const _hoisted_1$g = { class: "overflow-hidden" };
+const _hoisted_2$c = {
   key: 1,
   class: "overflow-x-auto"
 };
-const _hoisted_3$6 = { class: "w-full divide-y divide-black/10 text-left dark:divide-white/10" };
+const _hoisted_3$7 = { class: "w-full divide-y divide-black/10 text-left dark:divide-white/10" };
 const _hoisted_4$5 = { class: "bg-black/5 text-sm font-semibold text-gray-600 uppercase dark:bg-white/5 dark:text-gray-400" };
 const _hoisted_5$3 = {
   key: 0,
@@ -111,7 +111,7 @@ const _hoisted_12$1 = {
   class: "flex items-center justify-end gap-2 px-3 py-4"
 };
 const _hoisted_13 = { key: 0 };
-const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
   __name: "TableComponent",
   props: {
     properties: {},
@@ -212,13 +212,13 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       return props.sortBy === property.name;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-        __props.loading ? (vue.openBlock(), vue.createBlock(Button_vue_vue_type_script_setup_true_lang._sfc_main$1, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        __props.loading ? (vue.openBlock(), vue.createBlock(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main, {
           key: 0,
           rows: __props.loadingRows,
           columns: visibleProperties.value.length
-        }, null, 8, ["rows", "columns"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
-          vue.createElementVNode("table", _hoisted_3$6, [
+        }, null, 8, ["rows", "columns"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
+          vue.createElementVNode("table", _hoisted_3$7, [
             vue.createElementVNode("thead", _hoisted_4$5, [
               vue.createElementVNode("tr", null, [
                 __props.selectable ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_5$3, [
@@ -323,9 +323,9 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$d = { class: "space-y-3" };
-const _hoisted_2$a = { class: "flex items-center gap-3 p-3" };
-const _hoisted_3$5 = { class: "text-sm text-gray-600 dark:text-gray-400" };
+const _hoisted_1$f = { class: "space-y-3" };
+const _hoisted_2$b = { 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,
   class: "text-sm text-primary font-medium"
@@ -342,7 +342,7 @@ const _hoisted_7$2 = {
 const _hoisted_8$2 = { class: "flex-1 min-w-0 overflow-hidden" };
 const _hoisted_9$2 = { class: "shrink-0" };
 const _hoisted_10$1 = { key: 1 };
-const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "MobileList",
   props: {
     items: {},
@@ -391,10 +391,10 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
     const hasEmptySlot = vue.computed(() => !!slots.empty);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-        __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$i, { key: 0 }, {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$l, { key: 0 }, {
           default: vue.withCtx(() => [
-            vue.createVNode(Button_vue_vue_type_script_setup_true_lang._sfc_main$3, {
+            vue.createVNode(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$2, {
               items: __props.loadingItems,
               "show-avatar": "",
               "show-secondary": "",
@@ -403,22 +403,22 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-          __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$i, { key: 0 }, {
+          __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$l, { key: 0 }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_2$a, [
+              vue.createElementVNode("div", _hoisted_2$b, [
                 vue.createVNode(index._sfc_main, {
                   "model-value": allSelected.value,
                   indeterminate: someSelected.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
                 }, null, 8, ["model-value", "indeterminate"]),
-                vue.createElementVNode("span", _hoisted_3$5, vue.toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
+                vue.createElementVNode("span", _hoisted_3$6, vue.toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
                 __props.selectedItems && __props.selectedItems.size > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$4, " (" + vue.toDisplayString(__props.selectedItems.size) + " sélectionné" + vue.toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : vue.createCommentVNode("", true)
               ])
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$i, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$l, {
               key: getKey(item),
               class: vue.normalizeClass(["hover:shadow-lg transition-all duration-200", {
                 "ring-2 ring-primary": isSelected(item)
@@ -453,7 +453,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
   __name: "ResponsiveList",
   props: {
     items: {},
@@ -512,7 +512,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     const isDesktop = vue.computed(() => breakpoints.greaterOrEqual(props.breakpoint).value);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", null, [
-        !isDesktop.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
+        !isDesktop.value ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
           key: 0,
           items: __props.items,
           "key-field": __props.keyField,
@@ -539,9 +539,9 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "empty")
           ]),
           _: 3
-        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter", "loading", "loading-items"])) : (vue.openBlock(), vue.createBlock(_sfc_main$i, { key: 1 }, {
+        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter", "loading", "loading-items"])) : (vue.openBlock(), vue.createBlock(_sfc_main$l, { key: 1 }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$h, {
+            vue.createVNode(_sfc_main$k, {
               items: __props.items,
               properties: tableProperties.value,
               "key-field": __props.keyField,
@@ -590,12 +590,12 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$c = {
+const _hoisted_1$e = {
   key: 0,
   class: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _hoisted_2$9 = { class: "relative" };
-const _hoisted_3$4 = ["disabled", "placeholder"];
+const _hoisted_2$a = { class: "relative" };
+const _hoisted_3$5 = ["disabled", "placeholder"];
 const _hoisted_4$3 = ["disabled"];
 const _hoisted_5$1 = {
   key: 0,
@@ -608,7 +608,7 @@ const _hoisted_9$1 = {
   key: 1,
   class: "mt-1 text-sm text-red-600"
 };
-const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "AutocompleteComponent",
   props: {
     modelValue: {},
@@ -710,8 +710,8 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
         ref: containerRef,
         class: "autocomplete-container"
       }, [
-        __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$c, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2$9, [
+        __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", {
             ref_key: "inputWrapperRef",
             ref: inputWrapperRef,
@@ -736,7 +736,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
               type: "text",
               onFocus: openDropdown,
               onKeydown: handleKeydown
-            }, null, 40, _hoisted_3$4), [
+            }, null, 40, _hoisted_3$5), [
               [vue.vModelText, searchQuery.value]
             ]),
             __props.modelValue && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("button", {
@@ -817,7 +817,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   __name: "TableAction",
   props: {
     link: {},
@@ -886,10 +886,10 @@ const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$b = { class: "relative inline-block" };
-const _hoisted_2$8 = ["src", "alt"];
-const _hoisted_3$3 = { key: 1 };
-const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$d = { class: "relative inline-block" };
+const _hoisted_2$9 = ["src", "alt"];
+const _hoisted_3$4 = { key: 1 };
+const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
   props: {
     src: {},
@@ -935,7 +935,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     });
     const showImage = vue.computed(() => props.src && !imageError.value);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
         vue.createElementVNode("div", {
           class: vue.normalizeClass([
             "flex items-center justify-center overflow-hidden bg-gray-200 font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300",
@@ -949,7 +949,7 @@ const _sfc_main$c = /* @__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$8)) : initials.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$3, vue.toDisplayString(initials.value), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+          }, 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), {
             key: 2,
             icon: "lucide:user",
             class: "size-1/2"
@@ -967,9 +967,9 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$a = ["aria-selected", "disabled", "onClick"];
-const _hoisted_2$7 = { class: "mt-4" };
-const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$c = ["aria-selected", "disabled", "onClick"];
+const _hoisted_2$8 = { class: "mt-4" };
+const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -1034,18 +1034,18 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
                 activeTab.value === tab.key ? variantClasses[__props.variant].active : variantClasses[__props.variant].inactive
               ]),
               onClick: ($event) => selectTab(tab)
-            }, vue.toDisplayString(tab.label), 11, _hoisted_1$a);
+            }, vue.toDisplayString(tab.label), 11, _hoisted_1$c);
           }), 128))
         ], 2),
-        vue.createElementVNode("div", _hoisted_2$7, [
+        vue.createElementVNode("div", _hoisted_2$8, [
           vue.renderSlot(_ctx.$slots, "default", { activeTab: activeTab.value })
         ])
       ]);
     };
   }
 });
-const _hoisted_1$9 = { role: "tabpanel" };
-const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$b = { role: "tabpanel" };
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
   __name: "TabPanel",
   props: {
     value: {}
@@ -1055,7 +1055,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     const activeTab = vue.inject("activeTab");
     const isActive = vue.computed(() => (activeTab == null ? void 0 : activeTab.value) === props.value);
     return (_ctx, _cache) => {
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
         vue.renderSlot(_ctx.$slots, "default")
       ], 512)), [
         [vue.vShow, isActive.value]
@@ -1063,11 +1063,11 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$8 = {
+const _hoisted_1$a = {
   key: 2,
   class: "text-sm font-semibold"
 };
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
   __name: "Stepper",
   props: {
     steps: {},
@@ -1136,7 +1136,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
                   key: 1,
                   icon: step.icon,
                   class: "size-6"
-                }, null, 8, ["icon"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, vue.toDisplayString(index2 + 1), 1))
+                }, null, 8, ["icon"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, vue.toDisplayString(index2 + 1), 1))
               ], 2),
               vue.createElementVNode("div", {
                 class: vue.normalizeClass([
@@ -1164,7 +1164,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   __name: "CollapsibleCard",
   props: {
     title: {},
@@ -1182,7 +1182,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     };
     const hasCustomHeader = () => !!slots.header;
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$i, null, vue.createSlots({
+      return vue.openBlock(), vue.createBlock(_sfc_main$l, null, vue.createSlots({
         default: vue.withCtx(() => [
           vue.createVNode(vue.Transition, {
             "enter-active-class": "transition-all duration-200 ease-out",
@@ -1260,9 +1260,9 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["aria-describedby"];
-const _hoisted_2$6 = ["id"];
-const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$9 = ["aria-describedby"];
+const _hoisted_2$7 = ["id"];
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "Tooltip",
   props: {
     content: {},
@@ -1333,17 +1333,17 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
               id: vue.unref(tooltipId),
               class: vue.normalizeClass(positionClasses.value),
               role: "tooltip"
-            }, vue.toDisplayString(__props.content), 11, _hoisted_2$6)) : vue.createCommentVNode("", true)
+            }, vue.toDisplayString(__props.content), 11, _hoisted_2$7)) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })
-      ], 40, _hoisted_1$7);
+      ], 40, _hoisted_1$9);
     };
   }
 });
-const _hoisted_1$6 = ["id", "aria-expanded", "aria-controls"];
-const _hoisted_2$5 = ["id", "aria-labelledby"];
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$8 = ["id", "aria-expanded", "aria-controls"];
+const _hoisted_2$6 = ["id", "aria-labelledby"];
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "Popover",
   props: {
     position: { default: "bottom" },
@@ -1399,7 +1399,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
           onClick: handleTrigger
         }, [
           vue.renderSlot(_ctx.$slots, "trigger")
-        ], 8, _hoisted_1$6),
+        ], 8, _hoisted_1$8),
         (vue.openBlock(), vue.createBlock(vue.Teleport, {
           to: "body",
           disabled: !__props.teleport
@@ -1427,7 +1427,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
                 ])
               }, [
                 vue.renderSlot(_ctx.$slots, "default", { close: vue.unref(close) })
-              ], 14, _hoisted_2$5)) : vue.createCommentVNode("", true)
+              ], 14, _hoisted_2$6)) : vue.createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -1436,17 +1436,17 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$5 = {
+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$4 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
-const _hoisted_3$2 = { class: "flex-1 overflow-y-auto p-4" };
+const _hoisted_2$5 = { 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,
   class: "px-4 py-3 border-t border-gray-200 dark:border-gray-700"
 };
-const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean },
@@ -1565,9 +1565,9 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
               role: "dialog",
               "aria-modal": "true"
             }, [
-              __props.title || __props.showClose || _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+              __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$4, vue.toDisplayString(__props.title), 1)
+                  vue.createElementVNode("h2", _hoisted_2$5, vue.toDisplayString(__props.title), 1)
                 ]),
                 __props.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
@@ -1581,7 +1581,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
                   })
                 ])) : vue.createCommentVNode("", true)
               ])) : vue.createCommentVNode("", true),
-              vue.createElementVNode("div", _hoisted_3$2, [
+              vue.createElementVNode("div", _hoisted_3$3, [
                 vue.renderSlot(_ctx.$slots, "default")
               ]),
               _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
@@ -1595,9 +1595,9 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$4 = { "aria-label": "Breadcrumb" };
-const _hoisted_2$3 = { class: "flex items-center flex-wrap gap-1 text-sm" };
-const _sfc_main$4 = /* @__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 _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "Breadcrumb",
   props: {
     items: {},
@@ -1608,8 +1608,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   emits: ["click"],
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$4, [
-        vue.createElementVNode("ol", _hoisted_2$3, [
+      return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$6, [
+        vue.createElementVNode("ol", _hoisted_2$4, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index2) => {
             return vue.openBlock(), vue.createElementBlock("li", {
               key: index2,
@@ -1651,8 +1651,8 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { class: "divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden" };
-const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$5 = { class: "divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden" };
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   __name: "Accordion",
   props: {
     mode: { default: "single" },
@@ -1678,17 +1678,17 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       isOpen
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
         vue.renderSlot(_ctx.$slots, "default")
       ]);
     };
   }
 });
-const _hoisted_1$2 = ["id", "disabled", "aria-expanded", "aria-controls"];
-const _hoisted_2$2 = { class: "flex items-center gap-2 font-medium" };
-const _hoisted_3$1 = ["id", "aria-labelledby"];
+const _hoisted_1$4 = ["id", "disabled", "aria-expanded", "aria-controls"];
+const _hoisted_2$3 = { 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$2 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     itemKey: {},
@@ -1722,7 +1722,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
           "aria-controls": panelId.value,
           onClick: toggle
         }, [
-          vue.createElementVNode("span", _hoisted_2$2, [
+          vue.createElementVNode("span", _hoisted_2$3, [
             __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
               key: 0,
               icon: __props.icon,
@@ -1736,7 +1736,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
             class: vue.normalizeClass(["size-5 transition-transform duration-200", { "rotate-180": isOpen.value }]),
             "aria-hidden": "true"
           }, null, 8, ["class"])
-        ], 10, _hoisted_1$2),
+        ], 10, _hoisted_1$4),
         vue.createVNode(vue.Transition, {
           "enter-active-class": "transition-all duration-200 ease-out",
           "enter-from-class": "opacity-0 max-h-0",
@@ -1755,7 +1755,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
               vue.createElementVNode("div", _hoisted_4$1, [
                 vue.renderSlot(_ctx.$slots, "default")
               ])
-            ], 8, _hoisted_3$1), [
+            ], 8, _hoisted_3$2), [
               [vue.vShow, isOpen.value]
             ])
           ]),
@@ -1765,12 +1765,12 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$1 = {
+const _hoisted_1$3 = {
   key: 0,
   class: "relative"
 };
-const _hoisted_2$1 = { class: "flex items-start gap-4" };
-const _hoisted_3 = { class: "flex-1 min-w-0 pt-0.5" };
+const _hoisted_2$2 = { 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" };
 const _hoisted_6 = {
@@ -1792,7 +1792,7 @@ const _hoisted_12 = {
   key: 0,
   class: "text-xs text-gray-500 dark:text-gray-400"
 };
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   __name: "Timeline",
   props: {
     items: {},
@@ -1838,7 +1838,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return __props.orientation === "vertical" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+      return __props.orientation === "vertical" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index2) => {
           return vue.openBlock(), vue.createElementBlock("div", {
             key: item.key,
@@ -1848,7 +1848,7 @@ const _sfc_main$1 = /* @__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$1, [
+            vue.createElementVNode("div", _hoisted_2$2, [
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(["relative z-10 flex items-center justify-center size-8 rounded-full shrink-0", getStatusClasses(item.status).dot])
               }, [
@@ -1858,7 +1858,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                   class: vue.normalizeClass(["size-4", getStatusClasses(item.status).icon])
                 }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
               ], 2),
-              vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", _hoisted_3$1, [
                 vue.createElementVNode("div", _hoisted_4, [
                   vue.createElementVNode("h3", _hoisted_5, vue.toDisplayString(item.title), 1),
                   item.date ? (vue.openBlock(), vue.createElementBlock("time", _hoisted_6, vue.toDisplayString(item.date), 1)) : vue.createCommentVNode("", true)
@@ -1900,12 +1900,12 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = {
+const _hoisted_1$2 = ["aria-label"];
+const _hoisted_2$1 = {
   key: 0,
   class: "text-sm font-medium"
 };
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   __name: "DarkModeToggle",
   props: {
     size: { default: "md" },
@@ -1940,28 +1940,303 @@ const _sfc_main = /* @__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, vue.toDisplayString(vue.unref(isDark) ? "Dark" : "Light"), 1)) : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1);
+        __props.showLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString(vue.unref(isDark) ? "Dark" : "Light"), 1)) : vue.createCommentVNode("", true)
+      ], 10, _hoisted_1$2);
+    };
+  }
+});
+const _hoisted_1$1 = {
+  key: 0,
+  class: "text-gray-400"
+};
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "StatsCard",
+  props: {
+    label: {},
+    value: {},
+    icon: {},
+    change: {},
+    changeLabel: {},
+    variant: { default: "default" },
+    color: { default: "primary" }
+  },
+  setup(__props) {
+    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);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "StatsGrid",
+  props: {
+    stats: {},
+    cols: {},
+    variant: { default: "default" },
+    color: { default: "primary" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(["grid gap-3 sm:gap-4", [
+          __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"
+        ]])
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.stats, (stat, index2) => {
+          return vue.openBlock(), vue.createBlock(_sfc_main$2, {
+            key: index2,
+            label: stat.label,
+            value: stat.value,
+            icon: stat.icon,
+            change: stat.change,
+            "change-label": stat.changeLabel,
+            variant: __props.variant,
+            color: __props.color
+          }, null, 8, ["label", "value", "icon", "change", "change-label", "variant", "color"]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+const _hoisted_1 = ["disabled", "onClick"];
+const _hoisted_2 = ["disabled", "onClick"];
+const _hoisted_3 = ["disabled", "onClick"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "FilterTabs",
+  props: /* @__PURE__ */ vue.mergeModels({
+    options: {},
+    variant: { default: "pills" },
+    size: { default: "md" },
+    fullWidth: { type: Boolean }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const modelValue = vue.useModel(__props, "modelValue");
+    return (_ctx, _cache) => {
+      return __props.variant === "pills" ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: vue.normalizeClass([
+          "inline-flex p-1 bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 gap-1",
+          __props.fullWidth && "w-full"
+        ])
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key: option.key,
+            type: "button",
+            disabled: option.disabled,
+            class: vue.normalizeClass([
+              "flex items-center justify-center gap-2 rounded-xl font-medium transition-all",
+              __props.fullWidth && "flex-1",
+              __props.size === "sm" && "px-3 py-1.5 text-xs",
+              __props.size === "md" && "px-4 py-2.5 text-sm",
+              __props.size === "lg" && "px-5 py-3 text-base",
+              modelValue.value === option.key ? "bg-primary-500 text-white shadow-md" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-slate-700",
+              option.disabled && "opacity-50 cursor-not-allowed"
+            ]),
+            onClick: ($event) => !option.disabled && (modelValue.value = option.key)
+          }, [
+            option.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+              key: 0,
+              icon: option.icon,
+              class: "size-4"
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1),
+            option.count !== void 0 ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 1,
+              class: vue.normalizeClass([
+                "px-1.5 py-0.5 rounded-full text-xs font-medium",
+                modelValue.value === option.key ? "bg-white/20 text-white" : "bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-gray-400"
+              ])
+            }, vue.toDisplayString(option.count), 3)) : vue.createCommentVNode("", true)
+          ], 10, _hoisted_1);
+        }), 128))
+      ], 2)) : __props.variant === "underline" ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 1,
+        class: vue.normalizeClass([
+          "flex border-b border-gray-200 dark:border-slate-700",
+          __props.fullWidth && "w-full"
+        ])
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key: option.key,
+            type: "button",
+            disabled: option.disabled,
+            class: vue.normalizeClass([
+              "flex items-center justify-center gap-2 font-medium transition-all border-b-2 -mb-px",
+              __props.fullWidth && "flex-1",
+              __props.size === "sm" && "px-3 py-2 text-xs",
+              __props.size === "md" && "px-4 py-3 text-sm",
+              __props.size === "lg" && "px-5 py-4 text-base",
+              modelValue.value === option.key ? "border-primary-500 text-primary-600 dark:text-primary-400" : "border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300",
+              option.disabled && "opacity-50 cursor-not-allowed"
+            ]),
+            onClick: ($event) => !option.disabled && (modelValue.value = option.key)
+          }, [
+            option.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+              key: 0,
+              icon: option.icon,
+              class: "size-4"
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1),
+            option.count !== void 0 ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 1,
+              class: vue.normalizeClass([
+                "px-1.5 py-0.5 rounded-full text-xs font-medium",
+                modelValue.value === option.key ? "bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400" : "bg-gray-100 dark:bg-slate-700 text-gray-500"
+              ])
+            }, vue.toDisplayString(option.count), 3)) : vue.createCommentVNode("", true)
+          ], 10, _hoisted_2);
+        }), 128))
+      ], 2)) : __props.variant === "boxed" ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 2,
+        class: vue.normalizeClass([
+          "inline-flex bg-gray-100 dark:bg-slate-800 rounded-xl p-1 gap-1",
+          __props.fullWidth && "w-full"
+        ])
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option) => {
+          return vue.openBlock(), vue.createElementBlock("button", {
+            key: option.key,
+            type: "button",
+            disabled: option.disabled,
+            class: vue.normalizeClass([
+              "flex items-center justify-center gap-2 rounded-lg font-medium transition-all",
+              __props.fullWidth && "flex-1",
+              __props.size === "sm" && "px-3 py-1.5 text-xs",
+              __props.size === "md" && "px-4 py-2 text-sm",
+              __props.size === "lg" && "px-5 py-2.5 text-base",
+              modelValue.value === option.key ? "bg-white dark:bg-slate-700 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white",
+              option.disabled && "opacity-50 cursor-not-allowed"
+            ]),
+            onClick: ($event) => !option.disabled && (modelValue.value = option.key)
+          }, [
+            option.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+              key: 0,
+              icon: option.icon,
+              class: "size-4"
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("span", null, vue.toDisplayString(option.label), 1),
+            option.count !== void 0 ? (vue.openBlock(), vue.createElementBlock("span", {
+              key: 1,
+              class: vue.normalizeClass([
+                "px-1.5 py-0.5 rounded-full text-xs font-medium",
+                modelValue.value === option.key ? "bg-gray-100 dark:bg-slate-600 text-gray-600 dark:text-gray-300" : "bg-gray-200 dark:bg-slate-700 text-gray-500 dark:text-gray-400"
+              ])
+            }, vue.toDisplayString(option.count), 3)) : vue.createCommentVNode("", true)
+          ], 10, _hoisted_3);
+        }), 128))
+      ], 2)) : vue.createCommentVNode("", true);
     };
   }
 });
-exports._sfc_main = _sfc_main$i;
-exports._sfc_main$1 = _sfc_main$h;
-exports._sfc_main$10 = _sfc_main$8;
-exports._sfc_main$11 = _sfc_main$7;
-exports._sfc_main$12 = _sfc_main$6;
-exports._sfc_main$13 = _sfc_main$5;
-exports._sfc_main$14 = _sfc_main$4;
-exports._sfc_main$15 = _sfc_main$3;
-exports._sfc_main$16 = _sfc_main$2;
-exports._sfc_main$17 = _sfc_main$1;
-exports._sfc_main$18 = _sfc_main;
-exports._sfc_main$2 = _sfc_main$g;
-exports._sfc_main$3 = _sfc_main$f;
-exports._sfc_main$4 = _sfc_main$e;
-exports._sfc_main$5 = _sfc_main$d;
-exports._sfc_main$6 = _sfc_main$c;
-exports._sfc_main$7 = _sfc_main$b;
-exports._sfc_main$8 = _sfc_main$a;
-exports._sfc_main$9 = _sfc_main$9;
-//# sourceMappingURL=DarkModeToggle.vue_vue_type_script_setup_true_lang-DOrIWBcH.cjs.map
+exports._sfc_main = _sfc_main$l;
+exports._sfc_main$1 = _sfc_main$k;
+exports._sfc_main$10 = _sfc_main$b;
+exports._sfc_main$11 = _sfc_main$a;
+exports._sfc_main$12 = _sfc_main$9;
+exports._sfc_main$13 = _sfc_main$8;
+exports._sfc_main$14 = _sfc_main$7;
+exports._sfc_main$15 = _sfc_main$6;
+exports._sfc_main$16 = _sfc_main$5;
+exports._sfc_main$17 = _sfc_main$4;
+exports._sfc_main$18 = _sfc_main$3;
+exports._sfc_main$19 = _sfc_main$2;
+exports._sfc_main$2 = _sfc_main$j;
+exports._sfc_main$20 = _sfc_main$1;
+exports._sfc_main$21 = _sfc_main;
+exports._sfc_main$3 = _sfc_main$i;
+exports._sfc_main$4 = _sfc_main$h;
+exports._sfc_main$5 = _sfc_main$g;
+exports._sfc_main$6 = _sfc_main$f;
+exports._sfc_main$7 = _sfc_main$e;
+exports._sfc_main$8 = _sfc_main$d;
+exports._sfc_main$9 = _sfc_main$c;
+//# sourceMappingURL=FilterTabs.vue_vue_type_script_setup_true_lang-HwjuvIJX.cjs.map