cisse-vue-ui 0.7.3 → 0.7.5

package/dist/FilterTabs.vue_vue_type_script_setup_true_lang-HwjuvIJX.cjs

@@ -0,0 +1,2242 @@
+"use strict";
+const vue = require("vue");
+const index = require("./index-D1x3TH9k.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$h = {
+  key: 1,
+  class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950"
+};
+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$l = /* @__PURE__ */ vue.defineComponent({
+  __name: "CardComponent",
+  props: {
+    title: {},
+    description: {},
+    titleClass: {},
+    dividerClass: {},
+    loading: { type: Boolean, default: false },
+    loadingLines: { default: 3 },
+    loadingAvatar: { type: Boolean, default: false },
+    loadingActions: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const titleClasses = vue.computed(
+      () => props.titleClass || "text-gray-800 dark:text-gray-200"
+    );
+    const dividerClasses = vue.computed(
+      () => props.dividerClass || "border-gray-200 dark:border-gray-700"
+    );
+    return (_ctx, _cache) => {
+      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$h, [
+        _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(["border-b", dividerClasses.value])
+        }, [
+          vue.renderSlot(_ctx.$slots, "header")
+        ], 2)) : __props.title || __props.description || _ctx.$slots.title || _ctx.$slots.description || _ctx.$slots.actions ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(["flex items-center justify-between border-b px-5 py-3", dividerClasses.value])
+        }, [
+          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])
+            }, [
+              vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                vue.createTextVNode(vue.toDisplayString(__props.title), 1)
+              ])
+            ], 2)) : vue.createCommentVNode("", true),
+            __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)
+              ])
+            ])) : vue.createCommentVNode("", true)
+          ]),
+          vue.createElementVNode("div", _hoisted_4$6, [
+            vue.renderSlot(_ctx.$slots, "actions")
+          ])
+        ], 2)) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "default")
+      ]));
+    };
+  }
+});
+const _hoisted_1$g = { class: "overflow-hidden" };
+const _hoisted_2$c = {
+  key: 1,
+  class: "overflow-x-auto"
+};
+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,
+  class: "w-12 px-3 py-3"
+};
+const _hoisted_6$3 = ["onClick"];
+const _hoisted_7$3 = {
+  key: 0,
+  d: "M7 14l5-5 5 5H7z"
+};
+const _hoisted_8$3 = {
+  key: 1,
+  d: "M7 10l5 5 5-5H7z"
+};
+const _hoisted_9$3 = {
+  key: 1,
+  class: "px-3 py-3 text-right"
+};
+const _hoisted_10$2 = { class: "divide-y divide-black/10 font-medium dark:divide-white/10" };
+const _hoisted_11$1 = {
+  key: 0,
+  class: "px-3 py-4"
+};
+const _hoisted_12$1 = {
+  key: 1,
+  class: "flex items-center justify-end gap-2 px-3 py-4"
+};
+const _hoisted_13 = { key: 0 };
+const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableComponent",
+  props: {
+    properties: {},
+    items: {},
+    selectable: { type: Boolean, default: false },
+    selectedItems: {},
+    selectableFilter: {},
+    keyField: { default: "id" },
+    sortBy: {},
+    sortDirection: {},
+    loading: { type: Boolean, default: false },
+    loadingRows: { default: 5 }
+  },
+  emits: ["select", "selectAll", "sort"],
+  setup(__props, { emit: __emit }) {
+    const slots = vue.useSlots();
+    const props = __props;
+    const emit = __emit;
+    const typeComponents = {
+      text: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1,
+      number: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$2,
+      date: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$3,
+      boolean: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$4,
+      badge: BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$5
+    };
+    const getTypeComponent = (type = "text") => {
+      return typeComponents[type] || BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1;
+    };
+    const visibleProperties = vue.computed(() => props.properties.filter((p) => !p.hidden));
+    const getKey = (item) => {
+      const keyValue = item[props.keyField];
+      return String(keyValue ?? Math.random());
+    };
+    const getItemValue = (item, property) => {
+      if (property.name.includes(".")) {
+        let value = item;
+        for (const key of property.name.split(".")) {
+          if (value && typeof value === "object" && key in value) {
+            value = value[key];
+          } else {
+            return void 0;
+          }
+        }
+        return value;
+      }
+      return item[property.name];
+    };
+    const getAlignmentClass = (align) => {
+      switch (align) {
+        case "center":
+          return "text-center";
+        case "right":
+          return "text-right";
+        default:
+          return "text-left";
+      }
+    };
+    const getMainClass = (main) => {
+      if (main) {
+        return "text-sm font-semibold text-gray-900 dark:text-gray-100";
+      }
+      return "text-xs font-medium text-gray-600 dark:text-gray-400";
+    };
+    const selectableItems = vue.computed(() => {
+      if (!props.selectableFilter) return props.items;
+      return props.items.filter(props.selectableFilter);
+    });
+    const allSelected = vue.computed(() => {
+      if (selectableItems.value.length === 0) return false;
+      return selectableItems.value.every((item) => {
+        var _a;
+        return (_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item));
+      });
+    });
+    const someSelected = vue.computed(() => {
+      var _a;
+      return (((_a = props.selectedItems) == null ? void 0 : _a.size) || 0) > 0 && !allSelected.value;
+    });
+    const isSelected = (item) => {
+      var _a;
+      return ((_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item))) || false;
+    };
+    const isSelectable = (item) => {
+      if (!props.selectable) return false;
+      if (!props.selectableFilter) return true;
+      return props.selectableFilter(item);
+    };
+    const handleSelect = (item) => {
+      emit("select", getKey(item));
+    };
+    const hasActionSlot = vue.computed(() => !!slots.action);
+    const handleSort = (property) => {
+      if (!property.sortable) return;
+      const newDirection = props.sortBy === property.name && props.sortDirection === "asc" ? "desc" : "asc";
+      emit("sort", property.name, newDirection);
+    };
+    const isSortedColumn = (property) => {
+      return props.sortBy === property.name;
+    };
+    return (_ctx, _cache) => {
+      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$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, [
+                  vue.createVNode(index._sfc_main, {
+                    "model-value": allSelected.value,
+                    indeterminate: someSelected.value,
+                    disabled: selectableItems.value.length === 0,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
+                  }, null, 8, ["model-value", "indeterminate", "disabled"])
+                ])) : vue.createCommentVNode("", true),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleProperties.value, (property) => {
+                  return vue.openBlock(), vue.createElementBlock("th", {
+                    key: property.name,
+                    class: vue.normalizeClass([
+                      getAlignmentClass(property.align),
+                      "px-3 py-3",
+                      property.sortable ? "cursor-pointer select-none hover:bg-black/5 dark:hover:bg-white/5" : ""
+                    ]),
+                    onClick: ($event) => handleSort(property)
+                  }, [
+                    vue.createElementVNode("div", {
+                      class: vue.normalizeClass(["flex items-center gap-1", {
+                        "justify-center": property.align === "center",
+                        "justify-end": property.align === "right"
+                      }])
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "header-" + property.name, { property }, () => [
+                        vue.createTextVNode(vue.toDisplayString(property.label ?? property.name), 1)
+                      ]),
+                      property.sortable ? (vue.openBlock(), vue.createElementBlock("svg", {
+                        key: 0,
+                        class: vue.normalizeClass([
+                          "size-4 transition-colors",
+                          isSortedColumn(property) ? "text-primary-500" : "text-gray-400"
+                        ]),
+                        viewBox: "0 0 24 24",
+                        fill: "currentColor"
+                      }, [
+                        isSortedColumn(property) && __props.sortDirection === "asc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_7$3)) : isSortedColumn(property) && __props.sortDirection === "desc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_8$3)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                          _cache[1] || (_cache[1] = vue.createElementVNode("path", {
+                            d: "M7 14l5-5 5 5H7z",
+                            class: "opacity-40"
+                          }, null, -1)),
+                          _cache[2] || (_cache[2] = vue.createElementVNode("path", {
+                            d: "M7 10l5 5 5-5H7z",
+                            class: "opacity-40"
+                          }, null, -1))
+                        ], 64))
+                      ], 2)) : vue.createCommentVNode("", true)
+                    ], 2)
+                  ], 10, _hoisted_6$3);
+                }), 128)),
+                hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("th", _hoisted_9$3)) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            vue.createElementVNode("tbody", _hoisted_10$2, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+                return vue.openBlock(), vue.createElementBlock("tr", {
+                  key: getKey(item),
+                  class: vue.normalizeClass(["hover:bg-black/5 dark:hover:bg-white/5 transition-colors", { "bg-primary/5 dark:bg-primary/10": isSelected(item) }])
+                }, [
+                  __props.selectable ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_11$1, [
+                    isSelectable(item) ? (vue.openBlock(), vue.createBlock(index._sfc_main, {
+                      key: 0,
+                      "model-value": isSelected(item),
+                      "onUpdate:modelValue": ($event) => handleSelect(item)
+                    }, null, 8, ["model-value", "onUpdate:modelValue"])) : vue.createCommentVNode("", true)
+                  ])) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleProperties.value, (property) => {
+                    return vue.openBlock(), vue.createElementBlock("td", {
+                      key: property.name,
+                      class: vue.normalizeClass([
+                        getAlignmentClass(property.align),
+                        getMainClass(property.main),
+                        property.className,
+                        "px-3 py-4"
+                      ])
+                    }, [
+                      vue.renderSlot(_ctx.$slots, "item-" + property.name, {
+                        item,
+                        property,
+                        value: getItemValue(item, property)
+                      }, () => [
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getTypeComponent(property.type || "text")), {
+                          value: getItemValue(item, property)
+                        }, null, 8, ["value"]))
+                      ])
+                    ], 2);
+                  }), 128)),
+                  hasActionSlot.value ? (vue.openBlock(), vue.createElementBlock("td", _hoisted_12$1, [
+                    vue.renderSlot(_ctx.$slots, "action", { item })
+                  ])) : vue.createCommentVNode("", true)
+                ], 2);
+              }), 128))
+            ])
+          ]),
+          !__props.items || __props.items.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+            vue.renderSlot(_ctx.$slots, "empty")
+          ])) : vue.createCommentVNode("", true)
+        ]))
+      ]);
+    };
+  }
+});
+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"
+};
+const _hoisted_5$2 = { class: "p-4 flex items-center gap-4" };
+const _hoisted_6$2 = {
+  key: 0,
+  class: "shrink-0"
+};
+const _hoisted_7$2 = {
+  key: 1,
+  class: "size-5"
+};
+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$j = /* @__PURE__ */ vue.defineComponent({
+  __name: "MobileList",
+  props: {
+    items: {},
+    keyField: { default: "id" },
+    selectable: { type: Boolean, default: false },
+    selectedItems: {},
+    selectableFilter: {},
+    loading: { type: Boolean, default: false },
+    loadingItems: { default: 5 }
+  },
+  emits: ["select", "selectAll"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
+    const getKey = (item) => {
+      const keyValue = item[props.keyField];
+      return String(keyValue ?? Math.random());
+    };
+    const selectableItems = vue.computed(() => {
+      if (!props.selectableFilter) return props.items;
+      return props.items.filter(props.selectableFilter);
+    });
+    const allSelected = vue.computed(() => {
+      if (selectableItems.value.length === 0) return false;
+      return selectableItems.value.every((item) => {
+        var _a;
+        return (_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item));
+      });
+    });
+    const someSelected = vue.computed(() => {
+      var _a;
+      return (((_a = props.selectedItems) == null ? void 0 : _a.size) || 0) > 0 && !allSelected.value;
+    });
+    const isSelected = (item) => {
+      var _a;
+      return ((_a = props.selectedItems) == null ? void 0 : _a.has(getKey(item))) || false;
+    };
+    const isSelectable = (item) => {
+      if (!props.selectable) return false;
+      if (!props.selectableFilter) return true;
+      return props.selectableFilter(item);
+    };
+    const handleSelect = (item) => {
+      emit("select", getKey(item));
+    };
+    const hasEmptySlot = vue.computed(() => !!slots.empty);
+    return (_ctx, _cache) => {
+      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(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$2, {
+              items: __props.loadingItems,
+              "show-avatar": "",
+              "show-secondary": "",
+              "show-action": ""
+            }, null, 8, ["items"])
+          ]),
+          _: 1
+        })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$l, { key: 0 }, {
+            default: vue.withCtx(() => [
+              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$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$l, {
+              key: getKey(item),
+              class: vue.normalizeClass(["hover:shadow-lg transition-all duration-200", {
+                "ring-2 ring-primary": isSelected(item)
+              }])
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_5$2, [
+                  __props.selectable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$2, [
+                    isSelectable(item) ? (vue.openBlock(), vue.createBlock(index._sfc_main, {
+                      key: 0,
+                      "model-value": isSelected(item),
+                      "onUpdate:modelValue": ($event) => handleSelect(item)
+                    }, null, 8, ["model-value", "onUpdate:modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$2))
+                  ])) : vue.createCommentVNode("", true),
+                  vue.renderSlot(_ctx.$slots, "avatar", { item }),
+                  vue.createElementVNode("div", _hoisted_8$2, [
+                    vue.renderSlot(_ctx.$slots, "content", { item })
+                  ]),
+                  vue.createElementVNode("div", _hoisted_9$2, [
+                    vue.renderSlot(_ctx.$slots, "actions", { item })
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1032, ["class"]);
+          }), 128)),
+          __props.items.length === 0 && hasEmptySlot.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_10$1, [
+            vue.renderSlot(_ctx.$slots, "empty")
+          ])) : vue.createCommentVNode("", true)
+        ], 64))
+      ]);
+    };
+  }
+});
+const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  __name: "ResponsiveList",
+  props: {
+    items: {},
+    columns: {},
+    keyField: { default: "id" },
+    selectable: { type: Boolean, default: false },
+    selectedItems: {},
+    selectableFilter: {},
+    breakpoint: { default: "lg" },
+    sortBy: {},
+    sortDirection: {},
+    loading: { type: Boolean, default: false },
+    loadingRows: { default: 5 }
+  },
+  emits: ["select", "selectAll", "sort"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
+    const getColumnKey = (col) => col.key || col.name || "";
+    const tableProperties = vue.computed(
+      () => props.columns.map((col) => ({
+        name: getColumnKey(col),
+        label: col.label,
+        type: col.type,
+        sortable: col.sortable,
+        hidden: col.hidden,
+        align: col.align,
+        className: col.className,
+        main: col.main
+      }))
+    );
+    const getCellValue = (item, key) => {
+      const keys = key.split(".");
+      let value = item;
+      for (const k of keys) {
+        if (value && typeof value === "object" && k in value) {
+          value = value[k];
+        } else {
+          return void 0;
+        }
+      }
+      return value;
+    };
+    const hasCellSlot = (key) => {
+      return !!slots[`cell-${key}`];
+    };
+    const hasActionsSlot = vue.computed(() => !!slots.actions);
+    const breakpoints = index.useBreakpoints({
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      "2xl": 1536
+    });
+    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$j, {
+          key: 0,
+          items: __props.items,
+          "key-field": __props.keyField,
+          selectable: __props.selectable,
+          "selected-items": __props.selectedItems,
+          "selectable-filter": __props.selectableFilter,
+          loading: __props.loading,
+          "loading-items": __props.loadingRows,
+          onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event)),
+          onSelectAll: _cache[1] || (_cache[1] = ($event) => emit("selectAll"))
+        }, {
+          avatar: vue.withCtx(({ item }) => [
+            vue.renderSlot(_ctx.$slots, "avatar", { item })
+          ]),
+          content: vue.withCtx(({ item }) => [
+            vue.renderSlot(_ctx.$slots, "mobileContent", { item })
+          ]),
+          actions: vue.withCtx(({ item }) => [
+            vue.renderSlot(_ctx.$slots, "mobileActions", { item }, () => [
+              vue.renderSlot(_ctx.$slots, "actions", { item })
+            ])
+          ]),
+          empty: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "empty")
+          ]),
+          _: 3
+        }, 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$k, {
+              items: __props.items,
+              properties: tableProperties.value,
+              "key-field": __props.keyField,
+              selectable: __props.selectable,
+              "selected-items": __props.selectedItems,
+              "selectable-filter": __props.selectableFilter,
+              "sort-by": __props.sortBy,
+              "sort-direction": __props.sortDirection,
+              loading: __props.loading,
+              "loading-rows": __props.loadingRows,
+              onSelect: _cache[2] || (_cache[2] = ($event) => emit("select", $event)),
+              onSelectAll: _cache[3] || (_cache[3] = ($event) => emit("selectAll")),
+              onSort: _cache[4] || (_cache[4] = (col, dir) => emit("sort", col, dir))
+            }, vue.createSlots({
+              empty: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "empty")
+              ]),
+              _: 2
+            }, [
+              vue.renderList(__props.columns, (col) => {
+                return {
+                  name: `item-${getColumnKey(col)}`,
+                  fn: vue.withCtx(({ item, value }) => [
+                    hasCellSlot(getColumnKey(col)) ? vue.renderSlot(_ctx.$slots, `cell-${getColumnKey(col)}`, {
+                      key: 0,
+                      item,
+                      value: getCellValue(item, getColumnKey(col))
+                    }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                      vue.createTextVNode(vue.toDisplayString(value), 1)
+                    ], 64))
+                  ])
+                };
+              }),
+              hasActionsSlot.value ? {
+                name: "action",
+                fn: vue.withCtx(({ item }) => [
+                  vue.renderSlot(_ctx.$slots, "actions", { item })
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["items", "properties", "key-field", "selectable", "selected-items", "selectable-filter", "sort-by", "sort-direction", "loading", "loading-rows"])
+          ]),
+          _: 3
+        }))
+      ]);
+    };
+  }
+});
+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_3$5 = ["disabled", "placeholder"];
+const _hoisted_4$3 = ["disabled"];
+const _hoisted_5$1 = {
+  key: 0,
+  class: "px-4 py-3 text-sm text-gray-500"
+};
+const _hoisted_6$1 = ["data-index", "onClick"];
+const _hoisted_7$1 = { class: "flex-1 dark:text-white" };
+const _hoisted_8$1 = { class: "text-xs text-gray-400" };
+const _hoisted_9$1 = {
+  key: 1,
+  class: "mt-1 text-sm text-red-600"
+};
+const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  __name: "AutocompleteComponent",
+  props: {
+    modelValue: {},
+    options: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    label: {},
+    error: {},
+    noResultsText: {},
+    teleport: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const searchQuery = vue.ref("");
+    const inputRef = vue.ref(null);
+    const containerRef = vue.ref(null);
+    const dropdownRef = vue.ref(null);
+    const inputWrapperRef = vue.ref(null);
+    const {
+      isOpen,
+      highlightedIndex,
+      dropdownStyle,
+      open: openBase,
+      close: closeBase,
+      handleKeydown: baseHandleKeydown,
+      scrollToHighlighted
+    } = useDropdown.useDropdown(inputWrapperRef, dropdownRef, {
+      teleport: props.teleport
+    });
+    const filteredOptions = vue.computed(() => {
+      if (!searchQuery.value) {
+        return props.options;
+      }
+      const query = searchQuery.value.toLowerCase();
+      return props.options.filter(
+        (option) => option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query)
+      );
+    });
+    const selectedLabel = vue.computed(() => {
+      if (!props.modelValue) return "";
+      const option = props.options.find((opt) => opt.value === props.modelValue);
+      return (option == null ? void 0 : option.label) || "";
+    });
+    vue.watch(
+      () => props.modelValue,
+      () => {
+        if (!isOpen.value) {
+          searchQuery.value = selectedLabel.value;
+        }
+      },
+      { immediate: true }
+    );
+    const openDropdown = () => {
+      if (props.disabled) return;
+      searchQuery.value = "";
+      highlightedIndex.value = -1;
+      openBase();
+      vue.nextTick(() => {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+      });
+    };
+    const closeDropdown = () => {
+      closeBase();
+      searchQuery.value = selectedLabel.value;
+    };
+    const selectOption = (option) => {
+      emit("update:modelValue", option.value);
+      searchQuery.value = option.label;
+      closeDropdown();
+    };
+    const clearSelection = () => {
+      emit("update:modelValue", null);
+      searchQuery.value = "";
+      highlightedIndex.value = -1;
+      vue.nextTick(() => {
+        var _a;
+        (_a = inputRef.value) == null ? void 0 : _a.focus();
+      });
+    };
+    const handleKeydown = (event) => {
+      baseHandleKeydown(event, {
+        itemCount: filteredOptions.value.length,
+        onSelect: (index2) => {
+          if (filteredOptions.value[index2]) {
+            selectOption(filteredOptions.value[index2]);
+          }
+        }
+      });
+      if (isOpen.value) {
+        scrollToHighlighted(dropdownRef.value);
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        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", {
+            ref_key: "inputWrapperRef",
+            ref: inputWrapperRef,
+            class: vue.normalizeClass([{
+              "border-red-500": __props.error,
+              "border-gray-300 dark:border-gray-600": !__props.error && !vue.unref(isOpen),
+              "border-primary ring-2 ring-primary/20": vue.unref(isOpen),
+              "cursor-not-allowed opacity-50": __props.disabled
+            }, "flex items-center gap-2 rounded-lg border bg-white px-3 py-2 transition dark:bg-gray-800"])
+          }, [
+            vue.createVNode(vue.unref(vue$1.Icon), {
+              class: "size-5 text-gray-400",
+              icon: "lucide:search"
+            }),
+            vue.withDirectives(vue.createElementVNode("input", {
+              ref_key: "inputRef",
+              ref: inputRef,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+              disabled: __props.disabled,
+              placeholder: __props.placeholder || "Search...",
+              class: "flex-1 bg-transparent text-sm outline-hidden dark:text-white",
+              type: "text",
+              onFocus: openDropdown,
+              onKeydown: handleKeydown
+            }, null, 40, _hoisted_3$5), [
+              [vue.vModelText, searchQuery.value]
+            ]),
+            __props.modelValue && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              class: "rounded p-1 transition hover:bg-gray-100 dark:hover:bg-gray-700",
+              type: "button",
+              onClick: vue.withModifiers(clearSelection, ["stop"])
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                class: "size-4 text-gray-400",
+                icon: "lucide:x"
+              })
+            ])) : vue.createCommentVNode("", true),
+            vue.createElementVNode("button", {
+              disabled: __props.disabled,
+              class: "rounded p-1 transition hover:bg-gray-100 dark:hover:bg-gray-700",
+              type: "button",
+              onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => vue.unref(isOpen) ? closeDropdown() : openDropdown(), ["stop"]))
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                class: vue.normalizeClass([{ "rotate-180": vue.unref(isOpen) }, "size-4 text-gray-400 transition"]),
+                icon: "lucide:chevron-down"
+              }, null, 8, ["class"])
+            ], 8, _hoisted_4$3)
+          ], 2),
+          (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            to: "body",
+            disabled: !__props.teleport
+          }, [
+            vue.createVNode(vue.Transition, {
+              "enter-active-class": "transition duration-100 ease-out",
+              "enter-from-class": "opacity-0 scale-95",
+              "enter-to-class": "opacity-100 scale-100",
+              "leave-active-class": "transition duration-75 ease-in",
+              "leave-from-class": "opacity-100 scale-100",
+              "leave-to-class": "opacity-0 scale-95"
+            }, {
+              default: vue.withCtx(() => [
+                vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
+                  key: 0,
+                  ref_key: "dropdownRef",
+                  ref: dropdownRef,
+                  style: vue.normalizeStyle(vue.unref(dropdownStyle)),
+                  class: vue.normalizeClass([
+                    "autocomplete-dropdown z-9999 max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                    !__props.teleport && "absolute mt-2 w-full"
+                  ])
+                }, [
+                  filteredOptions.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, vue.toDisplayString(__props.noResultsText || "No results found"), 1)) : vue.createCommentVNode("", true),
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredOptions.value, (option, index2) => {
+                    return vue.openBlock(), vue.createElementBlock("button", {
+                      key: option.value,
+                      class: vue.normalizeClass([{
+                        "bg-gray-100 dark:bg-gray-700": vue.unref(highlightedIndex) === index2,
+                        "bg-primary/10": __props.modelValue === option.value
+                      }, "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition hover:bg-gray-100 dark:hover:bg-gray-700"]),
+                      "data-index": index2,
+                      type: "button",
+                      onClick: ($event) => selectOption(option)
+                    }, [
+                      __props.modelValue === option.value ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                        key: 0,
+                        class: "size-4 text-primary",
+                        icon: "lucide:check"
+                      })) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("span", _hoisted_7$1, vue.toDisplayString(option.label), 1),
+                      vue.createElementVNode("span", _hoisted_8$1, "(" + vue.toDisplayString(option.value) + ")", 1)
+                    ], 10, _hoisted_6$1);
+                  }), 128))
+                ], 6)) : vue.createCommentVNode("", true)
+              ]),
+              _: 1
+            })
+          ], 8, ["disabled"]))
+        ]),
+        __props.error ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_9$1, vue.toDisplayString(__props.error), 1)) : vue.createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableAction",
+  props: {
+    link: {},
+    icon: {},
+    color: {}
+  },
+  setup(__props) {
+    const colorClass = vue.computed(() => {
+      switch (__props.color) {
+        case "info":
+          return "border-blue-200 hover:bg-blue-100 dark:border-blue-800 dark:hover:bg-blue-900";
+        case "warning":
+          return "border-yellow-200 hover:bg-yellow-100 dark:border-yellow-800 dark:hover:bg-yellow-900";
+        case "success":
+          return "border-green-200 hover:bg-green-100 dark:border-green-800 dark:hover:bg-green-900";
+        case "error":
+          return "border-red-200 hover:bg-red-100 dark:border-red-800 dark:hover:bg-red-900";
+        default:
+          return "border-gray-200 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800";
+      }
+    });
+    const iconColorClass = vue.computed(() => {
+      switch (__props.color) {
+        case "info":
+          return "text-blue-600 group-hover:text-blue-900 dark:text-blue-400 dark:group-hover:text-blue-100";
+        case "warning":
+          return "text-yellow-600 group-hover:text-yellow-900 dark:text-yellow-400 dark:group-hover:text-yellow-100";
+        case "success":
+          return "text-green-600 group-hover:text-green-900 dark:text-green-400 dark:group-hover:text-green-100";
+        case "error":
+          return "text-red-600 group-hover:text-red-900 dark:text-red-400 dark:group-hover:text-red-100";
+        default:
+          return "text-gray-600 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-gray-100";
+      }
+    });
+    const linkComponent = vue.computed(() => {
+      if (!__props.link) return "button";
+      try {
+        const RouterLink = vue.resolveComponent("RouterLink");
+        if (typeof RouterLink !== "string") {
+          return RouterLink;
+        }
+      } catch {
+      }
+      return "a";
+    });
+    const linkProps = vue.computed(() => {
+      if (!__props.link) return {};
+      if (linkComponent.value === "a") {
+        return { href: __props.link };
+      }
+      return { to: __props.link };
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(linkComponent.value), vue.mergeProps(linkProps.value, {
+        class: [colorClass.value, "group flex size-8 items-center justify-center rounded-lg border"]
+      }), {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(vue$1.Icon), {
+            class: vue.normalizeClass([iconColorClass.value, "size-4"]),
+            icon: __props.icon
+          }, null, 8, ["class", "icon"])
+        ]),
+        _: 1
+      }, 16, ["class"]);
+    };
+  }
+});
+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: {},
+    alt: {},
+    name: {},
+    size: { default: "md" },
+    status: {},
+    rounded: { default: "full" }
+  },
+  setup(__props) {
+    const props = __props;
+    const imageError = vue.ref(false);
+    const sizeClasses = {
+      xs: "size-6 text-xs",
+      sm: "size-8 text-sm",
+      md: "size-10 text-base",
+      lg: "size-12 text-lg",
+      xl: "size-16 text-xl",
+      "2xl": "size-20 text-2xl"
+    };
+    const statusSizes = {
+      xs: "size-1.5",
+      sm: "size-2",
+      md: "size-2.5",
+      lg: "size-3",
+      xl: "size-4",
+      "2xl": "size-5"
+    };
+    const statusColors = {
+      online: "bg-green-500",
+      offline: "bg-gray-400",
+      away: "bg-yellow-500",
+      busy: "bg-red-500"
+    };
+    const roundedClasses = {
+      full: "rounded-full",
+      lg: "rounded-lg",
+      md: "rounded-md"
+    };
+    const initials = vue.computed(() => {
+      if (!props.name) return "";
+      return props.name.split(" ").map((n) => n[0]).slice(0, 2).join("").toUpperCase();
+    });
+    const showImage = vue.computed(() => props.src && !imageError.value);
+    return (_ctx, _cache) => {
+      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",
+            sizeClasses[__props.size],
+            roundedClasses[__props.rounded]
+          ])
+        }, [
+          showImage.value ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            src: __props.src,
+            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), {
+            key: 2,
+            icon: "lucide:user",
+            class: "size-1/2"
+          }))
+        ], 2),
+        __props.status ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 0,
+          class: vue.normalizeClass([
+            "absolute bottom-0 right-0 block rounded-full ring-2 ring-white dark:ring-gray-900",
+            statusSizes[__props.size],
+            statusColors[__props.status]
+          ])
+        }, null, 2)) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+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: {},
+    modelValue: {},
+    variant: { default: "underline" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const activeTab = vue.computed({
+      get: () => {
+        var _a;
+        return props.modelValue || ((_a = props.tabs[0]) == null ? void 0 : _a.key);
+      },
+      set: (value) => emit("update:modelValue", value)
+    });
+    const selectTab = (tab) => {
+      if (tab.disabled) return;
+      activeTab.value = tab.key;
+    };
+    const variantClasses = {
+      underline: {
+        container: "border-b border-gray-200 dark:border-gray-700",
+        tab: "border-b-2 -mb-px px-4 py-2",
+        active: "border-primary text-primary dark:text-primary",
+        inactive: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
+      },
+      pills: {
+        container: "gap-2",
+        tab: "px-4 py-2 rounded-lg",
+        active: "bg-primary text-white",
+        inactive: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+      },
+      boxed: {
+        container: "bg-gray-100 dark:bg-gray-800 p-1 rounded-lg gap-1",
+        tab: "px-4 py-2 rounded-md",
+        active: "bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-sm",
+        inactive: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+      }
+    };
+    vue.provide("activeTab", activeTab);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass([
+            "flex",
+            variantClasses[__props.variant].container
+          ]),
+          role: "tablist"
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.tabs, (tab) => {
+            return vue.openBlock(), vue.createElementBlock("button", {
+              key: tab.key,
+              type: "button",
+              role: "tab",
+              "aria-selected": activeTab.value === tab.key,
+              disabled: tab.disabled,
+              class: vue.normalizeClass([
+                "text-sm font-medium transition-colors focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+                variantClasses[__props.variant].tab,
+                activeTab.value === tab.key ? variantClasses[__props.variant].active : variantClasses[__props.variant].inactive
+              ]),
+              onClick: ($event) => selectTab(tab)
+            }, vue.toDisplayString(tab.label), 11, _hoisted_1$c);
+          }), 128))
+        ], 2),
+        vue.createElementVNode("div", _hoisted_2$8, [
+          vue.renderSlot(_ctx.$slots, "default", { activeTab: activeTab.value })
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$b = { role: "tabpanel" };
+const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  __name: "TabPanel",
+  props: {
+    value: {}
+  },
+  setup(__props) {
+    const props = __props;
+    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$b, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 512)), [
+        [vue.vShow, isActive.value]
+      ]);
+    };
+  }
+});
+const _hoisted_1$a = {
+  key: 2,
+  class: "text-sm font-semibold"
+};
+const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  __name: "Stepper",
+  props: {
+    steps: {},
+    modelValue: {},
+    orientation: { default: "horizontal" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const getCurrentStepIndex = () => {
+      if (props.modelValue === void 0) return 0;
+      const index2 = props.steps.findIndex((s) => s.key === props.modelValue);
+      return index2 >= 0 ? index2 : 0;
+    };
+    const isStepComplete = (index2) => index2 < getCurrentStepIndex();
+    const isStepActive = (index2) => index2 === getCurrentStepIndex();
+    const isStepPending = (index2) => index2 > getCurrentStepIndex();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "w-full",
+          __props.orientation === "vertical" ? "flex flex-col" : ""
+        ])
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass([
+            __props.orientation === "horizontal" ? "relative flex items-start justify-between" : "relative flex flex-col gap-4"
+          ])
+        }, [
+          __props.orientation === "horizontal" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            _cache[0] || (_cache[0] = vue.createElementVNode("div", {
+              class: "absolute left-0 top-6 h-0.5 w-full bg-gray-200 dark:bg-gray-700",
+              "aria-hidden": "true"
+            }, null, -1)),
+            vue.createElementVNode("div", {
+              class: "absolute left-0 top-6 h-0.5 bg-primary transition-all duration-500 ease-in-out",
+              style: vue.normalizeStyle({
+                width: `${getCurrentStepIndex() / (__props.steps.length - 1) * 100}%`
+              }),
+              "aria-hidden": "true"
+            }, null, 4)
+          ], 64)) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.steps, (step, index2) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: step.key,
+              class: vue.normalizeClass([
+                "relative",
+                __props.orientation === "horizontal" ? "flex flex-1 flex-col items-center" : "flex items-start gap-4"
+              ])
+            }, [
+              __props.orientation === "vertical" && index2 < __props.steps.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass(["absolute left-6 top-12 h-full w-0.5 -translate-x-1/2", isStepComplete(index2) ? "bg-primary" : "bg-gray-200 dark:bg-gray-700"])
+              }, null, 2)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["relative z-10 flex size-12 shrink-0 items-center justify-center rounded-full border-2 transition-all duration-300", {
+                  "border-primary bg-primary text-white shadow-lg": isStepActive(index2) || isStepComplete(index2),
+                  "border-gray-300 bg-white text-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-500": isStepPending(index2)
+                }])
+              }, [
+                isStepComplete(index2) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                  key: 0,
+                  icon: "lucide:check",
+                  class: "size-6"
+                })) : step.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                  key: 1,
+                  icon: step.icon,
+                  class: "size-6"
+                }, null, 8, ["icon"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, vue.toDisplayString(index2 + 1), 1))
+              ], 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([
+                  __props.orientation === "horizontal" ? "mt-4 flex flex-col items-center text-center" : "flex flex-col pt-2"
+                ])
+              }, [
+                vue.createElementVNode("p", {
+                  class: vue.normalizeClass(["text-sm font-semibold transition-colors", {
+                    "text-primary dark:text-primary": isStepActive(index2) || isStepComplete(index2),
+                    "text-gray-500 dark:text-gray-400": isStepPending(index2)
+                  }])
+                }, vue.toDisplayString(step.title), 3),
+                step.description ? (vue.openBlock(), vue.createElementBlock("p", {
+                  key: 0,
+                  class: vue.normalizeClass(["mt-1 text-xs", {
+                    "text-gray-600 dark:text-gray-300": isStepActive(index2),
+                    "text-gray-500 dark:text-gray-400": !isStepActive(index2)
+                  }])
+                }, vue.toDisplayString(step.description), 3)) : vue.createCommentVNode("", true)
+              ], 2)
+            ], 2);
+          }), 128))
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  __name: "CollapsibleCard",
+  props: {
+    title: {},
+    description: {},
+    defaultExpanded: { type: Boolean, default: true },
+    headerClass: { default: "w-full text-left" },
+    contentClass: { default: "" }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = vue.useSlots();
+    const isExpanded = vue.ref(props.defaultExpanded);
+    const toggle = () => {
+      isExpanded.value = !isExpanded.value;
+    };
+    const hasCustomHeader = () => !!slots.header;
+    return (_ctx, _cache) => {
+      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",
+            "enter-from-class": "opacity-0 max-h-0",
+            "enter-to-class": "opacity-100 max-h-[2000px]",
+            "leave-active-class": "transition-all duration-200 ease-in",
+            "leave-from-class": "opacity-100 max-h-[2000px]",
+            "leave-to-class": "opacity-0 max-h-0"
+          }, {
+            default: vue.withCtx(() => [
+              vue.withDirectives(vue.createElementVNode("div", {
+                class: vue.normalizeClass(["overflow-hidden", __props.contentClass])
+              }, [
+                vue.createElementVNode("div", {
+                  class: vue.normalizeClass(hasCustomHeader() ? "" : "space-y-4 p-6")
+                }, [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ], 2)
+              ], 2), [
+                [vue.vShow, isExpanded.value]
+              ])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 2
+      }, [
+        hasCustomHeader() ? {
+          name: "header",
+          fn: vue.withCtx(() => [
+            vue.createElementVNode("button", {
+              type: "button",
+              class: vue.normalizeClass(__props.headerClass),
+              onClick: toggle
+            }, [
+              vue.renderSlot(_ctx.$slots, "header", {
+                expanded: isExpanded.value,
+                toggle
+              })
+            ], 2)
+          ]),
+          key: "0"
+        } : __props.title || __props.description ? {
+          name: "title",
+          fn: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(__props.title), 1)
+          ]),
+          key: "1"
+        } : void 0,
+        !hasCustomHeader() && __props.description ? {
+          name: "description",
+          fn: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(__props.description), 1)
+          ]),
+          key: "2"
+        } : void 0,
+        !hasCustomHeader() ? {
+          name: "actions",
+          fn: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "actions"),
+            vue.createElementVNode("button", {
+              type: "button",
+              class: "rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800",
+              onClick: toggle
+            }, [
+              vue.createVNode(vue.unref(vue$1.Icon), {
+                icon: isExpanded.value ? "lucide:chevron-up" : "lucide:chevron-down",
+                class: "size-5"
+              }, null, 8, ["icon"])
+            ])
+          ]),
+          key: "3"
+        } : void 0
+      ]), 1024);
+    };
+  }
+});
+const _hoisted_1$9 = ["aria-describedby"];
+const _hoisted_2$7 = ["id"];
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  __name: "Tooltip",
+  props: {
+    content: {},
+    position: { default: "top" },
+    delay: { default: 0 },
+    disabled: { type: Boolean, default: false },
+    id: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { id: tooltipId } = useId.useId({ prefix: "tooltip", id: props.id });
+    const isVisible = vue.ref(false);
+    let timeoutId = null;
+    const show = () => {
+      if (props.disabled) return;
+      if (props.delay > 0) {
+        timeoutId = setTimeout(() => {
+          isVisible.value = true;
+        }, props.delay);
+      } else {
+        isVisible.value = true;
+      }
+    };
+    const hide = () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+      isVisible.value = false;
+    };
+    const positionClasses = vue.computed(() => {
+      const base = "absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg whitespace-nowrap dark:bg-gray-700";
+      const arrow = "after:absolute after:border-4 after:border-transparent";
+      switch (props.position) {
+        case "top":
+          return `${base} ${arrow} bottom-full left-1/2 -translate-x-1/2 mb-2 after:top-full after:left-1/2 after:-translate-x-1/2 after:border-t-gray-900 dark:after:border-t-gray-700`;
+        case "bottom":
+          return `${base} ${arrow} top-full left-1/2 -translate-x-1/2 mt-2 after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-b-gray-900 dark:after:border-b-gray-700`;
+        case "left":
+          return `${base} ${arrow} right-full top-1/2 -translate-y-1/2 mr-2 after:left-full after:top-1/2 after:-translate-y-1/2 after:border-l-gray-900 dark:after:border-l-gray-700`;
+        case "right":
+          return `${base} ${arrow} left-full top-1/2 -translate-y-1/2 ml-2 after:right-full after:top-1/2 after:-translate-y-1/2 after:border-r-gray-900 dark:after:border-r-gray-700`;
+        default:
+          return base;
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "relative inline-block",
+        "aria-describedby": __props.content && !__props.disabled ? vue.unref(tooltipId) : void 0,
+        onMouseenter: show,
+        onMouseleave: hide,
+        onFocus: show,
+        onBlur: hide
+      }, [
+        vue.renderSlot(_ctx.$slots, "default"),
+        vue.createVNode(vue.Transition, {
+          "enter-active-class": "transition duration-150 ease-out",
+          "enter-from-class": "opacity-0 scale-95",
+          "enter-to-class": "opacity-100 scale-100",
+          "leave-active-class": "transition duration-100 ease-in",
+          "leave-from-class": "opacity-100 scale-100",
+          "leave-to-class": "opacity-0 scale-95"
+        }, {
+          default: vue.withCtx(() => [
+            isVisible.value && __props.content ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              id: vue.unref(tooltipId),
+              class: vue.normalizeClass(positionClasses.value),
+              role: "tooltip"
+            }, vue.toDisplayString(__props.content), 11, _hoisted_2$7)) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 40, _hoisted_1$9);
+    };
+  }
+});
+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" },
+    hover: { type: Boolean, default: false },
+    teleport: { type: Boolean, default: true },
+    width: { default: "auto" },
+    id: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { related } = useId.useId({ prefix: "popover", id: props.id });
+    const triggerId = vue.computed(() => related("trigger"));
+    const popoverId = vue.computed(() => related("content"));
+    const triggerRef = vue.ref();
+    const popoverRef = vue.ref();
+    const { isOpen, dropdownStyle, toggle, close, open } = useDropdown.useDropdown(triggerRef, popoverRef, {
+      teleport: props.teleport,
+      gap: 8
+    });
+    const handleTrigger = () => {
+      if (!props.hover) {
+        toggle();
+      }
+    };
+    const handleMouseEnter = () => {
+      if (props.hover) {
+        open();
+      }
+    };
+    const handleMouseLeave = () => {
+      if (props.hover) {
+        close();
+      }
+    };
+    const widthClasses = {
+      auto: "w-auto min-w-48",
+      sm: "w-48",
+      md: "w-64",
+      lg: "w-80"
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: "relative inline-block",
+        onMouseenter: handleMouseEnter,
+        onMouseleave: handleMouseLeave
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "triggerRef",
+          ref: triggerRef,
+          id: triggerId.value,
+          "aria-expanded": vue.unref(isOpen),
+          "aria-controls": popoverId.value,
+          onClick: handleTrigger
+        }, [
+          vue.renderSlot(_ctx.$slots, "trigger")
+        ], 8, _hoisted_1$8),
+        (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          to: "body",
+          disabled: !__props.teleport
+        }, [
+          vue.createVNode(vue.Transition, {
+            "enter-active-class": "transition duration-150 ease-out",
+            "enter-from-class": "opacity-0 scale-95",
+            "enter-to-class": "opacity-100 scale-100",
+            "leave-active-class": "transition duration-100 ease-in",
+            "leave-from-class": "opacity-100 scale-100",
+            "leave-to-class": "opacity-0 scale-95"
+          }, {
+            default: vue.withCtx(() => [
+              vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                id: popoverId.value,
+                ref_key: "popoverRef",
+                ref: popoverRef,
+                role: "dialog",
+                "aria-labelledby": triggerId.value,
+                style: vue.normalizeStyle(vue.unref(dropdownStyle)),
+                class: vue.normalizeClass([
+                  "z-9999 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800",
+                  widthClasses[__props.width]
+                ])
+              }, [
+                vue.renderSlot(_ctx.$slots, "default", { close: vue.unref(close) })
+              ], 14, _hoisted_2$6)) : vue.createCommentVNode("", true)
+            ]),
+            _: 3
+          })
+        ], 8, ["disabled"]))
+      ], 32);
+    };
+  }
+});
+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_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$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Drawer",
+  props: {
+    modelValue: { type: Boolean },
+    position: { default: "right" },
+    size: { default: "md" },
+    title: {},
+    showClose: { type: Boolean, default: true },
+    closeOnOverlay: { type: Boolean, default: true },
+    closeOnEscape: { type: Boolean, default: true },
+    overlay: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const close = () => {
+      emit("update:modelValue", false);
+    };
+    const handleOverlayClick = () => {
+      if (props.closeOnOverlay) {
+        close();
+      }
+    };
+    const handleKeydown = (e) => {
+      if (e.key === "Escape" && props.closeOnEscape && props.modelValue) {
+        close();
+      }
+    };
+    vue.onMounted(() => {
+      document.addEventListener("keydown", handleKeydown);
+    });
+    vue.onUnmounted(() => {
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    vue.watch(
+      () => props.modelValue,
+      (isOpen) => {
+        if (isOpen) {
+          document.body.style.overflow = "hidden";
+        } else {
+          document.body.style.overflow = "";
+        }
+      }
+    );
+    const sizeClasses = vue.computed(() => {
+      const isHorizontal = props.position === "left" || props.position === "right";
+      const sizes = {
+        sm: isHorizontal ? "w-64" : "h-32",
+        md: isHorizontal ? "w-80" : "h-48",
+        lg: isHorizontal ? "w-96" : "h-64",
+        xl: isHorizontal ? "w-lg" : "h-96",
+        full: isHorizontal ? "w-screen" : "h-screen"
+      };
+      return sizes[props.size];
+    });
+    const positionClasses = vue.computed(() => {
+      const base = "fixed bg-white dark:bg-gray-800 shadow-xl flex flex-col";
+      switch (props.position) {
+        case "left":
+          return `${base} inset-y-0 left-0 ${sizeClasses.value}`;
+        case "right":
+          return `${base} inset-y-0 right-0 ${sizeClasses.value}`;
+        case "top":
+          return `${base} inset-x-0 top-0 ${sizeClasses.value}`;
+        case "bottom":
+          return `${base} inset-x-0 bottom-0 ${sizeClasses.value}`;
+        default:
+          return base;
+      }
+    });
+    const transformClasses = vue.computed(() => {
+      switch (props.position) {
+        case "left":
+          return { enter: "-translate-x-full", leave: "-translate-x-full" };
+        case "right":
+          return { enter: "translate-x-full", leave: "translate-x-full" };
+        case "top":
+          return { enter: "-translate-y-full", leave: "-translate-y-full" };
+        case "bottom":
+          return { enter: "translate-y-full", leave: "translate-y-full" };
+        default:
+          return { enter: "", leave: "" };
+      }
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+        vue.createVNode(vue.Transition, {
+          "enter-active-class": "transition-opacity duration-300 ease-out",
+          "enter-from-class": "opacity-0",
+          "enter-to-class": "opacity-100",
+          "leave-active-class": "transition-opacity duration-200 ease-in",
+          "leave-from-class": "opacity-100",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: vue.withCtx(() => [
+            __props.modelValue && __props.overlay ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: "fixed inset-0 z-40 bg-black/50",
+              onClick: handleOverlayClick
+            })) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
+        vue.createVNode(vue.Transition, {
+          "enter-active-class": "transition-transform duration-300 ease-out",
+          "enter-from-class": transformClasses.value.enter,
+          "enter-to-class": "translate-x-0 translate-y-0",
+          "leave-active-class": "transition-transform duration-200 ease-in",
+          "leave-from-class": "translate-x-0 translate-y-0",
+          "leave-to-class": transformClasses.value.leave
+        }, {
+          default: vue.withCtx(() => [
+            __props.modelValue ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass([positionClasses.value, "z-50"]),
+              role: "dialog",
+              "aria-modal": "true"
+            }, [
+              __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)
+                ]),
+                __props.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 0,
+                  type: "button",
+                  class: "p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700",
+                  onClick: close
+                }, [
+                  vue.createVNode(vue.unref(vue$1.Icon), {
+                    icon: "heroicons:x-mark",
+                    class: "size-5"
+                  })
+                ])) : vue.createCommentVNode("", true)
+              ])) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_3$3, [
+                vue.renderSlot(_ctx.$slots, "default")
+              ]),
+              _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
+                vue.renderSlot(_ctx.$slots, "footer")
+              ])) : vue.createCommentVNode("", true)
+            ], 2)) : vue.createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["enter-from-class", "leave-to-class"])
+      ]);
+    };
+  }
+});
+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: {},
+    separator: { default: "heroicons:chevron-right" },
+    homeIcon: { default: "heroicons:home" },
+    showHomeIcon: { type: Boolean, default: true }
+  },
+  emits: ["click"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      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,
+              class: "flex items-center"
+            }, [
+              index2 > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                key: 0,
+                icon: __props.separator,
+                class: "size-4 mx-2 text-gray-400 dark:text-gray-500 shrink-0"
+              }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.to ? "router-link" : item.href ? "a" : "span"), {
+                to: item.to,
+                href: item.href,
+                class: vue.normalizeClass([
+                  "flex items-center gap-1.5 transition-colors",
+                  index2 === __props.items.length - 1 ? "text-gray-900 dark:text-white font-medium cursor-default" : "text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"
+                ]),
+                "aria-current": index2 === __props.items.length - 1 ? "page" : void 0,
+                onClick: ($event) => _ctx.$emit("click", item, index2)
+              }, {
+                default: vue.withCtx(() => [
+                  index2 === 0 && __props.showHomeIcon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                    key: 0,
+                    icon: item.icon || __props.homeIcon,
+                    class: "size-4"
+                  }, null, 8, ["icon"])) : item.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                    key: 1,
+                    icon: item.icon,
+                    class: "size-4"
+                  }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("span", null, vue.toDisplayString(item.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["to", "href", "class", "aria-current", "onClick"]))
+            ]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+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" },
+    defaultOpen: { default: () => [] }
+  },
+  setup(__props) {
+    const props = __props;
+    const openItems = vue.ref(new Set(props.defaultOpen));
+    const toggle = (key) => {
+      if (openItems.value.has(key)) {
+        openItems.value.delete(key);
+      } else {
+        if (props.mode === "single") {
+          openItems.value.clear();
+        }
+        openItems.value.add(key);
+      }
+      openItems.value = new Set(openItems.value);
+    };
+    const isOpen = (key) => openItems.value.has(key);
+    vue.provide("accordion", {
+      toggle,
+      isOpen
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ]);
+    };
+  }
+});
+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$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "AccordionItem",
+  props: {
+    itemKey: {},
+    title: {},
+    icon: {},
+    disabled: { type: Boolean },
+    id: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { related } = useId.useId({ prefix: "accordion", id: props.id });
+    const headerId = vue.computed(() => related("header"));
+    const panelId = vue.computed(() => related("panel"));
+    const accordion = vue.inject("accordion");
+    const isOpen = vue.computed(() => (accordion == null ? void 0 : accordion.isOpen(props.itemKey)) ?? false);
+    const toggle = () => {
+      if (!props.disabled) {
+        accordion == null ? void 0 : accordion.toggle(props.itemKey);
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createElementVNode("button", {
+          id: headerId.value,
+          type: "button",
+          class: vue.normalizeClass(["flex items-center justify-between w-full px-4 py-3 text-left transition-colors", [
+            __props.disabled ? "bg-gray-50 text-gray-400 cursor-not-allowed dark:bg-gray-800 dark:text-gray-500" : "bg-white hover:bg-gray-50 text-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-white"
+          ]]),
+          disabled: __props.disabled,
+          "aria-expanded": isOpen.value,
+          "aria-controls": panelId.value,
+          onClick: toggle
+        }, [
+          vue.createElementVNode("span", _hoisted_2$3, [
+            __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+              key: 0,
+              icon: __props.icon,
+              class: "size-5",
+              "aria-hidden": "true"
+            }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
+            vue.createTextVNode(" " + vue.toDisplayString(__props.title), 1)
+          ]),
+          vue.createVNode(vue.unref(vue$1.Icon), {
+            icon: "heroicons:chevron-down",
+            class: vue.normalizeClass(["size-5 transition-transform duration-200", { "rotate-180": isOpen.value }]),
+            "aria-hidden": "true"
+          }, null, 8, ["class"])
+        ], 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",
+          "enter-to-class": "opacity-100 max-h-screen",
+          "leave-active-class": "transition-all duration-150 ease-in",
+          "leave-from-class": "opacity-100 max-h-screen",
+          "leave-to-class": "opacity-0 max-h-0"
+        }, {
+          default: vue.withCtx(() => [
+            vue.withDirectives(vue.createElementVNode("div", {
+              id: panelId.value,
+              role: "region",
+              "aria-labelledby": headerId.value,
+              class: "overflow-hidden"
+            }, [
+              vue.createElementVNode("div", _hoisted_4$1, [
+                vue.renderSlot(_ctx.$slots, "default")
+              ])
+            ], 8, _hoisted_3$2), [
+              [vue.vShow, isOpen.value]
+            ])
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+const _hoisted_1$3 = {
+  key: 0,
+  class: "relative"
+};
+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 = {
+  key: 0,
+  class: "text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "mt-1 text-sm text-gray-600 dark:text-gray-400"
+};
+const _hoisted_8 = {
+  key: 1,
+  class: "flex items-start overflow-x-auto pb-4"
+};
+const _hoisted_9 = { class: "flex items-center w-full" };
+const _hoisted_10 = { class: "mt-2 text-center max-w-[120px]" };
+const _hoisted_11 = { class: "text-xs font-medium text-gray-900 dark:text-white" };
+const _hoisted_12 = {
+  key: 0,
+  class: "text-xs text-gray-500 dark:text-gray-400"
+};
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "Timeline",
+  props: {
+    items: {},
+    orientation: { default: "vertical" }
+  },
+  setup(__props) {
+    const getStatusClasses = (status) => {
+      switch (status) {
+        case "completed":
+          return {
+            dot: "bg-green-500",
+            line: "bg-green-500",
+            icon: "text-white"
+          };
+        case "current":
+          return {
+            dot: "bg-primary-500 ring-4 ring-primary-100 dark:ring-primary-900",
+            line: "bg-gray-200 dark:bg-gray-700",
+            icon: "text-white"
+          };
+        case "error":
+          return {
+            dot: "bg-red-500",
+            line: "bg-red-500",
+            icon: "text-white"
+          };
+        default:
+          return {
+            dot: "bg-gray-300 dark:bg-gray-600",
+            line: "bg-gray-200 dark:bg-gray-700",
+            icon: "text-gray-500 dark:text-gray-400"
+          };
+      }
+    };
+    const getDefaultIcon = (status) => {
+      switch (status) {
+        case "completed":
+          return "heroicons:check";
+        case "error":
+          return "heroicons:x-mark";
+        default:
+          return "";
+      }
+    };
+    return (_ctx, _cache) => {
+      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,
+            class: "relative pb-8 last:pb-0"
+          }, [
+            index2 < __props.items.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", {
+              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", {
+                class: vue.normalizeClass(["relative z-10 flex items-center justify-center size-8 rounded-full shrink-0", getStatusClasses(item.status).dot])
+              }, [
+                item.icon || getDefaultIcon(item.status) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                  key: 0,
+                  icon: item.icon || getDefaultIcon(item.status),
+                  class: vue.normalizeClass(["size-4", getStatusClasses(item.status).icon])
+                }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
+              ], 2),
+              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)
+                ]),
+                item.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_7, vue.toDisplayString(item.description), 1)) : vue.createCommentVNode("", true),
+                vue.renderSlot(_ctx.$slots, item.key, { item })
+              ])
+            ])
+          ]);
+        }), 128))
+      ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index2) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: item.key,
+            class: vue.normalizeClass(["flex flex-col items-center shrink-0", { "flex-1": index2 < __props.items.length - 1 }])
+          }, [
+            vue.createElementVNode("div", _hoisted_9, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["relative z-10 flex items-center justify-center size-8 rounded-full shrink-0", getStatusClasses(item.status).dot])
+              }, [
+                item.icon || getDefaultIcon(item.status) ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                  key: 0,
+                  icon: item.icon || getDefaultIcon(item.status),
+                  class: vue.normalizeClass(["size-4", getStatusClasses(item.status).icon])
+                }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
+              ], 2),
+              index2 < __props.items.length - 1 ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass(["flex-1 h-0.5 mx-2", getStatusClasses(item.status).line])
+              }, null, 2)) : vue.createCommentVNode("", true)
+            ]),
+            vue.createElementVNode("div", _hoisted_10, [
+              vue.createElementVNode("h3", _hoisted_11, vue.toDisplayString(item.title), 1),
+              item.date ? (vue.openBlock(), vue.createElementBlock("time", _hoisted_12, vue.toDisplayString(item.date), 1)) : vue.createCommentVNode("", true)
+            ])
+          ], 2);
+        }), 128))
+      ]));
+    };
+  }
+});
+const _hoisted_1$2 = ["aria-label"];
+const _hoisted_2$1 = {
+  key: 0,
+  class: "text-sm font-medium"
+};
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "DarkModeToggle",
+  props: {
+    size: { default: "md" },
+    lightIcon: { default: "lucide:sun" },
+    darkIcon: { default: "lucide:moon" },
+    showLabel: { type: Boolean, default: false },
+    storageKey: { default: "dark-mode" }
+  },
+  setup(__props) {
+    const props = __props;
+    const { isDark, toggle } = useDarkMode.useDarkMode({ storageKey: props.storageKey });
+    const sizeClasses = {
+      sm: { button: "p-1.5", icon: "size-4" },
+      md: { button: "p-2", icon: "size-5" },
+      lg: { button: "p-2.5", icon: "size-6" }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("button", {
+        type: "button",
+        class: vue.normalizeClass([
+          sizeClasses[__props.size].button,
+          "inline-flex items-center gap-2 rounded-lg transition-colors",
+          "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
+          "dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100",
+          "focus:outline-hidden focus:ring-2 focus:ring-primary focus:ring-offset-2"
+        ]),
+        "aria-label": vue.unref(isDark) ? "Switch to light mode" : "Switch to dark mode",
+        onClick: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => vue.unref(toggle) && vue.unref(toggle)(...args))
+      }, [
+        vue.createVNode(vue.unref(vue$1.Icon), {
+          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)
+      ], 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$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