cisse-vue-ui 0.5.17 → 0.5.22

package/dist/{Timeline.vue_vue_type_script_setup_true_lang-CuPF4MPe.js → DarkModeToggle.vue_vue_type_script_setup_true_lang-43fxlbro.js}

@@ -1,10 +1,15 @@
-import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, renderSlot, normalizeClass, createElementVNode, createTextVNode, toDisplayString, useSlots, createVNode, Fragment, renderList, createBlock, resolveDynamicComponent, withCtx, onMounted, nextTick, getCurrentInstance, getCurrentScope, hasInjectionContext, inject, watch, shallowRef, toValue, watchEffect, unref, createSlots, ref, withDirectives, vModelText, withModifiers, Teleport, Transition, normalizeStyle, resolveComponent, mergeProps, provide, vShow, onUnmounted } from "vue";
-import { _ as _sfc_main$j } from "./Checkbox.vue_vue_type_script_setup_true_lang-B-nLCCNY.js";
-import { e as _sfc_main$k, d as _sfc_main$l, c as _sfc_main$m, b as _sfc_main$n, a as _sfc_main$o } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
+import { defineComponent, computed, createBlock, createElementBlock, openBlock, createCommentVNode, renderSlot, normalizeClass, createElementVNode, createTextVNode, toDisplayString, useSlots, createVNode, Fragment, renderList, resolveDynamicComponent, withCtx, createSlots, ref, watch, unref, withDirectives, vModelText, withModifiers, Teleport, Transition, normalizeStyle, nextTick, resolveComponent, mergeProps, provide, inject, vShow, onMounted, onUnmounted } from "vue";
+import { _ as _sfc_main$l, u as useBreakpoints } from "./index-Dghdw1yo.js";
+import { b as _sfc_main$j, a as _sfc_main$k, c as _sfc_main$r } from "./Button.vue_vue_type_script_setup_true_lang-DKE8elsf.js";
+import { e as _sfc_main$m, d as _sfc_main$n, c as _sfc_main$o, b as _sfc_main$p, a as _sfc_main$q } from "./BadgeType.vue_vue_type_script_setup_true_lang-CnB5eNEM.js";
 import { Icon } from "@iconify/vue";
 import { u as useDropdown } from "./useDropdown-iVu14E6s.js";
-const _hoisted_1$c = { class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950" };
-const _hoisted_2$9 = { class: "flex flex-col gap-0.5" };
+import { u as useDarkMode } from "./useDarkMode-Cl5QWTlC.js";
+const _hoisted_1$d = {
+  key: 1,
+  class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950"
+};
+const _hoisted_2$a = { class: "flex flex-col gap-0.5" };
 const _hoisted_3$7 = {
   key: 1,
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
@@ -16,7 +21,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     title: {},
     description: {},
     titleClass: {},
-    dividerClass: {}
+    dividerClass: {},
+    loading: { type: Boolean, default: false },
+    loadingLines: { default: 3 },
+    loadingAvatar: { type: Boolean, default: false },
+    loadingActions: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -27,7 +36,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       () => props.dividerClass || "border-gray-200 dark:border-gray-700"
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return __props.loading ? (openBlock(), createBlock(_sfc_main$j, {
+        key: 0,
+        lines: __props.loadingLines,
+        "show-avatar": __props.loadingAvatar,
+        "show-actions": __props.loadingActions
+      }, null, 8, ["lines", "show-avatar", "show-actions"])) : (openBlock(), createElementBlock("div", _hoisted_1$d, [
         _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["border-b", dividerClasses.value])
@@ -37,7 +51,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           key: 1,
           class: normalizeClass(["flex items-center justify-between border-b px-5 py-3", dividerClasses.value])
         }, [
-          createElementVNode("div", _hoisted_2$9, [
+          createElementVNode("div", _hoisted_2$a, [
             __props.title || _ctx.$slots.title ? (openBlock(), createElementBlock("span", {
               key: 0,
               class: normalizeClass(["text-md font-semibold", titleClasses.value])
@@ -57,12 +71,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           ])
         ], 2)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
-      ]);
+      ]));
     };
   }
 });
-const _hoisted_1$b = { class: "overflow-hidden" };
-const _hoisted_2$8 = { class: "overflow-x-auto" };
+const _hoisted_1$c = { class: "overflow-hidden" };
+const _hoisted_2$9 = {
+  key: 1,
+  class: "overflow-x-auto"
+};
 const _hoisted_3$6 = { class: "w-full divide-y divide-black/10 text-left dark:divide-white/10" };
 const _hoisted_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 = {
@@ -102,7 +119,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     selectableFilter: {},
     keyField: { default: "id" },
     sortBy: {},
-    sortDirection: {}
+    sortDirection: {},
+    loading: { type: Boolean, default: false },
+    loadingRows: { default: 5 }
   },
   emits: ["select", "selectAll", "sort"],
   setup(__props, { emit: __emit }) {
@@ -110,14 +129,14 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const typeComponents = {
-      text: _sfc_main$o,
-      number: _sfc_main$n,
-      date: _sfc_main$m,
-      boolean: _sfc_main$l,
-      badge: _sfc_main$k
+      text: _sfc_main$q,
+      number: _sfc_main$p,
+      date: _sfc_main$o,
+      boolean: _sfc_main$n,
+      badge: _sfc_main$m
     };
     const getTypeComponent = (type = "text") => {
-      return typeComponents[type] || _sfc_main$o;
+      return typeComponents[type] || _sfc_main$q;
     };
     const visibleProperties = computed(() => props.properties.filter((p) => !p.hidden));
     const getKey = (item) => {
@@ -191,13 +210,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       return props.sortBy === property.name;
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        __props.loading ? (openBlock(), createBlock(_sfc_main$k, {
+          key: 0,
+          rows: __props.loadingRows,
+          columns: visibleProperties.value.length
+        }, null, 8, ["rows", "columns"])) : (openBlock(), createElementBlock("div", _hoisted_2$9, [
           createElementVNode("table", _hoisted_3$6, [
             createElementVNode("thead", _hoisted_4$5, [
               createElementVNode("tr", null, [
                 __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_5$3, [
-                  createVNode(_sfc_main$j, {
+                  createVNode(_sfc_main$l, {
                     "model-value": allSelected.value,
                     indeterminate: someSelected.value,
                     disabled: selectableItems.value.length === 0,
@@ -256,7 +279,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["hover:bg-black/5 dark:hover:bg-white/5 transition-colors", { "bg-primary/5 dark:bg-primary/10": isSelected(item) }])
                 }, [
                   __props.selectable ? (openBlock(), createElementBlock("td", _hoisted_11$1, [
-                    isSelectable(item) ? (openBlock(), createBlock(_sfc_main$j, {
+                    isSelectable(item) ? (openBlock(), createBlock(_sfc_main$l, {
                       key: 0,
                       "model-value": isSelected(item),
                       "onUpdate:modelValue": ($event) => handleSelect(item)
@@ -289,17 +312,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 ], 2);
               }), 128))
             ])
-          ])
-        ]),
-        !__props.items || __props.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_13, [
-          renderSlot(_ctx.$slots, "empty")
-        ])) : createCommentVNode("", true)
+          ]),
+          !__props.items || __props.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_13, [
+            renderSlot(_ctx.$slots, "empty")
+          ])) : createCommentVNode("", true)
+        ]))
       ]);
     };
   }
 });
-const _hoisted_1$a = { class: "space-y-3" };
-const _hoisted_2$7 = { class: "flex items-center gap-3 p-3" };
+const _hoisted_1$b = { class: "space-y-3" };
+const _hoisted_2$8 = { class: "flex items-center gap-3 p-3" };
 const _hoisted_3$5 = { class: "text-sm text-gray-600 dark:text-gray-400" };
 const _hoisted_4$4 = {
   key: 0,
@@ -324,7 +347,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     keyField: { default: "id" },
     selectable: { type: Boolean, default: false },
     selectedItems: {},
-    selectableFilter: {}
+    selectableFilter: {},
+    loading: { type: Boolean, default: false },
+    loadingItems: { default: 5 }
   },
   emits: ["select", "selectAll"],
   setup(__props, { emit: __emit }) {
@@ -364,257 +389,68 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
     const hasEmptySlot = computed(() => !!slots.empty);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        __props.selectable && selectableItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$i, { key: 0 }, {
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        __props.loading ? (openBlock(), createBlock(_sfc_main$i, { key: 0 }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_2$7, [
-              createVNode(_sfc_main$j, {
-                "model-value": allSelected.value,
-                indeterminate: someSelected.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
-              }, null, 8, ["model-value", "indeterminate"]),
-              createElementVNode("span", _hoisted_3$5, toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
-              __props.selectedItems && __props.selectedItems.size > 0 ? (openBlock(), createElementBlock("span", _hoisted_4$4, " (" + toDisplayString(__props.selectedItems.size) + " sélectionné" + toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : createCommentVNode("", true)
-            ])
+            createVNode(_sfc_main$r, {
+              items: __props.loadingItems,
+              "show-avatar": "",
+              "show-secondary": "",
+              "show-action": ""
+            }, null, 8, ["items"])
           ]),
           _: 1
-        })) : createCommentVNode("", true),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
-          return openBlock(), createBlock(_sfc_main$i, {
-            key: getKey(item),
-            class: normalizeClass(["hover:shadow-lg transition-all duration-200", {
-              "ring-2 ring-primary": isSelected(item)
-            }])
-          }, {
+        })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          __props.selectable && selectableItems.value.length > 0 ? (openBlock(), createBlock(_sfc_main$i, { key: 0 }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_5$2, [
-                __props.selectable ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
-                  isSelectable(item) ? (openBlock(), createBlock(_sfc_main$j, {
-                    key: 0,
-                    "model-value": isSelected(item),
-                    "onUpdate:modelValue": ($event) => handleSelect(item)
-                  }, null, 8, ["model-value", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_7$2))
-                ])) : createCommentVNode("", true),
-                renderSlot(_ctx.$slots, "avatar", { item }),
-                createElementVNode("div", _hoisted_8$2, [
-                  renderSlot(_ctx.$slots, "content", { item })
-                ]),
-                createElementVNode("div", _hoisted_9$2, [
-                  renderSlot(_ctx.$slots, "actions", { item })
-                ])
+              createElementVNode("div", _hoisted_2$8, [
+                createVNode(_sfc_main$l, {
+                  "model-value": allSelected.value,
+                  indeterminate: someSelected.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
+                }, null, 8, ["model-value", "indeterminate"]),
+                createElementVNode("span", _hoisted_3$5, toDisplayString(allSelected.value ? "Tout désélectionner" : "Tout sélectionner"), 1),
+                __props.selectedItems && __props.selectedItems.size > 0 ? (openBlock(), createElementBlock("span", _hoisted_4$4, " (" + toDisplayString(__props.selectedItems.size) + " sélectionné" + toDisplayString(__props.selectedItems.size > 1 ? "s" : "") + ") ", 1)) : createCommentVNode("", true)
               ])
             ]),
-            _: 2
-          }, 1032, ["class"]);
-        }), 128)),
-        __props.items.length === 0 && hasEmptySlot.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
-          renderSlot(_ctx.$slots, "empty")
-        ])) : createCommentVNode("", true)
+            _: 1
+          })) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+            return openBlock(), createBlock(_sfc_main$i, {
+              key: getKey(item),
+              class: normalizeClass(["hover:shadow-lg transition-all duration-200", {
+                "ring-2 ring-primary": isSelected(item)
+              }])
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_5$2, [
+                  __props.selectable ? (openBlock(), createElementBlock("div", _hoisted_6$2, [
+                    isSelectable(item) ? (openBlock(), createBlock(_sfc_main$l, {
+                      key: 0,
+                      "model-value": isSelected(item),
+                      "onUpdate:modelValue": ($event) => handleSelect(item)
+                    }, null, 8, ["model-value", "onUpdate:modelValue"])) : (openBlock(), createElementBlock("div", _hoisted_7$2))
+                  ])) : createCommentVNode("", true),
+                  renderSlot(_ctx.$slots, "avatar", { item }),
+                  createElementVNode("div", _hoisted_8$2, [
+                    renderSlot(_ctx.$slots, "content", { item })
+                  ]),
+                  createElementVNode("div", _hoisted_9$2, [
+                    renderSlot(_ctx.$slots, "actions", { item })
+                  ])
+                ])
+              ]),
+              _: 2
+            }, 1032, ["class"]);
+          }), 128)),
+          __props.items.length === 0 && hasEmptySlot.value ? (openBlock(), createElementBlock("div", _hoisted_10$1, [
+            renderSlot(_ctx.$slots, "empty")
+          ])) : createCommentVNode("", true)
+        ], 64))
       ]);
     };
   }
 });
-const localProvidedStateMap = /* @__PURE__ */ new WeakMap();
-const injectLocal = /* @__NO_SIDE_EFFECTS__ */ (...args) => {
-  var _getCurrentInstance;
-  const key = args[0];
-  const instance = (_getCurrentInstance = getCurrentInstance()) === null || _getCurrentInstance === void 0 ? void 0 : _getCurrentInstance.proxy;
-  const owner = instance !== null && instance !== void 0 ? instance : getCurrentScope();
-  if (owner == null && !hasInjectionContext()) throw new Error("injectLocal must be called in setup");
-  if (owner && localProvidedStateMap.has(owner) && key in localProvidedStateMap.get(owner)) return localProvidedStateMap.get(owner)[key];
-  return inject(...args);
-};
-const isClient = typeof window !== "undefined" && typeof document !== "undefined";
-typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
-const toString = Object.prototype.toString;
-const isObject = (val) => toString.call(val) === "[object Object]";
-function increaseWithUnit(target, delta) {
-  var _target$match;
-  if (typeof target === "number") return target + delta;
-  const value = ((_target$match = target.match(/^-?\d+\.?\d*/)) === null || _target$match === void 0 ? void 0 : _target$match[0]) || "";
-  const unit = target.slice(value.length);
-  const result = Number.parseFloat(value) + delta;
-  if (Number.isNaN(result)) return target;
-  return result + unit;
-}
-function pxValue(px) {
-  return px.endsWith("rem") ? Number.parseFloat(px) * 16 : Number.parseFloat(px);
-}
-function toArray(value) {
-  return Array.isArray(value) ? value : [value];
-}
-function getLifeCycleTarget(target) {
-  return getCurrentInstance();
-}
-function tryOnMounted(fn, sync = true, target) {
-  if (getLifeCycleTarget()) onMounted(fn, target);
-  else if (sync) fn();
-  else nextTick(fn);
-}
-function watchImmediate(source, cb, options) {
-  return watch(source, cb, {
-    ...options,
-    immediate: true
-  });
-}
-const defaultWindow = isClient ? window : void 0;
-function unrefElement(elRef) {
-  var _$el;
-  const plain = toValue(elRef);
-  return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
-}
-function useEventListener(...args) {
-  const register = (el, event, listener, options) => {
-    el.addEventListener(event, listener, options);
-    return () => el.removeEventListener(event, listener, options);
-  };
-  const firstParamTargets = computed(() => {
-    const test = toArray(toValue(args[0])).filter((e) => e != null);
-    return test.every((e) => typeof e !== "string") ? test : void 0;
-  });
-  return watchImmediate(() => {
-    var _firstParamTargets$va, _firstParamTargets$va2;
-    return [
-      (_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
-      toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
-      toArray(unref(firstParamTargets.value ? args[2] : args[1])),
-      toValue(firstParamTargets.value ? args[3] : args[2])
-    ];
-  }, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
-    if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
-    const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
-    const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
-    onCleanup(() => {
-      cleanups.forEach((fn) => fn());
-    });
-  }, { flush: "post" });
-}
-// @__NO_SIDE_EFFECTS__
-function useMounted() {
-  const isMounted = shallowRef(false);
-  const instance = getCurrentInstance();
-  if (instance) onMounted(() => {
-    isMounted.value = true;
-  }, instance);
-  return isMounted;
-}
-// @__NO_SIDE_EFFECTS__
-function useSupported(callback) {
-  const isMounted = /* @__PURE__ */ useMounted();
-  return computed(() => {
-    isMounted.value;
-    return Boolean(callback());
-  });
-}
-const ssrWidthSymbol = Symbol("vueuse-ssr-width");
-// @__NO_SIDE_EFFECTS__
-function useSSRWidth() {
-  const ssrWidth = hasInjectionContext() ? /* @__PURE__ */ injectLocal(ssrWidthSymbol, null) : null;
-  return typeof ssrWidth === "number" ? ssrWidth : void 0;
-}
-function useMediaQuery(query, options = {}) {
-  const { window: window$1 = defaultWindow, ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
-  const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "matchMedia" in window$1 && typeof window$1.matchMedia === "function");
-  const ssrSupport = shallowRef(typeof ssrWidth === "number");
-  const mediaQuery = shallowRef();
-  const matches = shallowRef(false);
-  const handler = (event) => {
-    matches.value = event.matches;
-  };
-  watchEffect(() => {
-    if (ssrSupport.value) {
-      ssrSupport.value = !isSupported.value;
-      matches.value = toValue(query).split(",").some((queryString) => {
-        const not = queryString.includes("not all");
-        const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
-        const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
-        let res = Boolean(minWidth || maxWidth);
-        if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);
-        if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);
-        return not ? !res : res;
-      });
-      return;
-    }
-    if (!isSupported.value) return;
-    mediaQuery.value = window$1.matchMedia(toValue(query));
-    matches.value = mediaQuery.value.matches;
-  });
-  useEventListener(mediaQuery, "change", handler, { passive: true });
-  return computed(() => matches.value);
-}
-// @__NO_SIDE_EFFECTS__
-function useBreakpoints(breakpoints, options = {}) {
-  function getValue$1(k, delta) {
-    let v = toValue(breakpoints[toValue(k)]);
-    if (delta != null) v = increaseWithUnit(v, delta);
-    if (typeof v === "number") v = `${v}px`;
-    return v;
-  }
-  const { window: window$1 = defaultWindow, strategy = "min-width", ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
-  const ssrSupport = typeof ssrWidth === "number";
-  const mounted = ssrSupport ? shallowRef(false) : { value: true };
-  if (ssrSupport) tryOnMounted(() => mounted.value = !!window$1);
-  function match(query, size) {
-    if (!mounted.value && ssrSupport) return query === "min" ? ssrWidth >= pxValue(size) : ssrWidth <= pxValue(size);
-    if (!window$1) return false;
-    return window$1.matchMedia(`(${query}-width: ${size})`).matches;
-  }
-  const greaterOrEqual = (k) => {
-    return useMediaQuery(() => `(min-width: ${getValue$1(k)})`, options);
-  };
-  const smallerOrEqual = (k) => {
-    return useMediaQuery(() => `(max-width: ${getValue$1(k)})`, options);
-  };
-  const shortcutMethods = Object.keys(breakpoints).reduce((shortcuts, k) => {
-    Object.defineProperty(shortcuts, k, {
-      get: () => strategy === "min-width" ? greaterOrEqual(k) : smallerOrEqual(k),
-      enumerable: true,
-      configurable: true
-    });
-    return shortcuts;
-  }, {});
-  function current() {
-    const points = Object.keys(breakpoints).map((k) => [
-      k,
-      shortcutMethods[k],
-      pxValue(getValue$1(k))
-    ]).sort((a, b) => a[2] - b[2]);
-    return computed(() => points.filter(([, v]) => v.value).map(([k]) => k));
-  }
-  return Object.assign(shortcutMethods, {
-    greaterOrEqual,
-    smallerOrEqual,
-    greater(k) {
-      return useMediaQuery(() => `(min-width: ${getValue$1(k, 0.1)})`, options);
-    },
-    smaller(k) {
-      return useMediaQuery(() => `(max-width: ${getValue$1(k, -0.1)})`, options);
-    },
-    between(a, b) {
-      return useMediaQuery(() => `(min-width: ${getValue$1(a)}) and (max-width: ${getValue$1(b, -0.1)})`, options);
-    },
-    isGreater(k) {
-      return match("min", getValue$1(k, 0.1));
-    },
-    isGreaterOrEqual(k) {
-      return match("min", getValue$1(k));
-    },
-    isSmaller(k) {
-      return match("max", getValue$1(k, -0.1));
-    },
-    isSmallerOrEqual(k) {
-      return match("max", getValue$1(k));
-    },
-    isInBetween(a, b) {
-      return match("min", getValue$1(a)) && match("max", getValue$1(b, -0.1));
-    },
-    current,
-    active() {
-      const bps = current();
-      return computed(() => bps.value.length === 0 ? "" : bps.value.at(strategy === "min-width" ? -1 : 0));
-    }
-  });
-}
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "ResponsiveList",
   props: {
@@ -626,7 +462,9 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     selectableFilter: {},
     breakpoint: { default: "lg" },
     sortBy: {},
-    sortDirection: {}
+    sortDirection: {},
+    loading: { type: Boolean, default: false },
+    loadingRows: { default: 5 }
   },
   emits: ["select", "selectAll", "sort"],
   setup(__props, { emit: __emit }) {
@@ -662,7 +500,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       return !!slots[`cell-${key}`];
     };
     const hasActionsSlot = computed(() => !!slots.actions);
-    const breakpoints = /* @__PURE__ */ useBreakpoints({
+    const breakpoints = useBreakpoints({
       sm: 640,
       md: 768,
       lg: 1024,
@@ -679,6 +517,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           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"))
         }, {
@@ -697,7 +537,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "empty")
           ]),
           _: 3
-        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter"])) : (openBlock(), createBlock(_sfc_main$i, { key: 1 }, {
+        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter", "loading", "loading-items"])) : (openBlock(), createBlock(_sfc_main$i, { key: 1 }, {
           default: withCtx(() => [
             createVNode(_sfc_main$h, {
               items: __props.items,
@@ -708,6 +548,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               "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))
@@ -738,7 +580,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["items", "properties", "key-field", "selectable", "selected-items", "selectable-filter", "sort-by", "sort-direction"])
+            ]), 1032, ["items", "properties", "key-field", "selectable", "selected-items", "selectable-filter", "sort-by", "sort-direction", "loading", "loading-rows"])
           ]),
           _: 3
         }))
@@ -746,11 +588,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = {
+const _hoisted_1$a = {
   key: 0,
   class: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _hoisted_2$6 = { class: "relative" };
+const _hoisted_2$7 = { class: "relative" };
 const _hoisted_3$4 = ["disabled", "placeholder"];
 const _hoisted_4$3 = ["disabled"];
 const _hoisted_5$1 = {
@@ -866,8 +708,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         ref: containerRef,
         class: "autocomplete-container"
       }, [
-        __props.label ? (openBlock(), createElementBlock("label", _hoisted_1$9, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$6, [
+        __props.label ? (openBlock(), createElementBlock("label", _hoisted_1$a, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$7, [
           createElementVNode("div", {
             ref_key: "inputWrapperRef",
             ref: inputWrapperRef,
@@ -1042,103 +884,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "Button",
-  props: {
-    variant: { default: "primary" },
-    size: { default: "md" },
-    icon: {},
-    iconRight: {},
-    loading: { type: Boolean },
-    disabled: { type: Boolean },
-    block: { type: Boolean },
-    href: {},
-    to: {},
-    type: { default: "button" }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const variantClasses = {
-      primary: "bg-primary text-primary-foreground hover:bg-primary/90 focus:ring-primary",
-      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90 focus:ring-secondary",
-      outline: "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-primary dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
-      ghost: "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-primary dark:text-gray-300 dark:hover:bg-gray-800",
-      danger: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500",
-      success: "bg-green-500 text-white hover:bg-green-600 focus:ring-green-500"
-    };
-    const sizeClasses = {
-      xs: "px-2 py-1 text-xs gap-1",
-      sm: "px-3 py-1.5 text-sm gap-1.5",
-      md: "px-4 py-2 text-sm gap-2",
-      lg: "px-5 py-2.5 text-base gap-2",
-      xl: "px-6 py-3 text-lg gap-2.5"
-    };
-    const iconSizeClasses = {
-      xs: "size-3",
-      sm: "size-4",
-      md: "size-4",
-      lg: "size-5",
-      xl: "size-6"
-    };
-    const classes = computed(() => [
-      "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
-      variantClasses[props.variant],
-      sizeClasses[props.size],
-      props.block && "w-full"
-    ]);
-    const component = computed(() => {
-      if (props.to) {
-        try {
-          const RouterLink = resolveComponent("RouterLink");
-          if (typeof RouterLink !== "string") return RouterLink;
-        } catch {
-        }
-      }
-      if (props.href) return "a";
-      return "button";
-    });
-    const componentProps = computed(() => {
-      if (props.to) return { to: props.to };
-      if (props.href) return { href: props.href };
-      return { type: props.type, disabled: props.disabled || props.loading };
-    });
-    const handleClick = (event) => {
-      if (props.disabled || props.loading) return;
-      emit("click", event);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(component.value), mergeProps(componentProps.value, {
-        class: classes.value,
-        onClick: handleClick
-      }), {
-        default: withCtx(() => [
-          __props.loading ? (openBlock(), createBlock(unref(Icon), {
-            key: 0,
-            icon: "lucide:loader-2",
-            class: normalizeClass([iconSizeClasses[__props.size], "animate-spin"])
-          }, null, 8, ["class"])) : __props.icon ? (openBlock(), createBlock(unref(Icon), {
-            key: 1,
-            icon: __props.icon,
-            class: normalizeClass(iconSizeClasses[__props.size])
-          }, null, 8, ["icon", "class"])) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "default"),
-          __props.iconRight && !__props.loading ? (openBlock(), createBlock(unref(Icon), {
-            key: 2,
-            icon: __props.iconRight,
-            class: normalizeClass(iconSizeClasses[__props.size])
-          }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
-        ]),
-        _: 3
-      }, 16, ["class"]);
-    };
-  }
-});
-const _hoisted_1$8 = { class: "relative inline-block" };
-const _hoisted_2$5 = ["src", "alt"];
+const _hoisted_1$9 = { class: "relative inline-block" };
+const _hoisted_2$6 = ["src", "alt"];
 const _hoisted_3$3 = { key: 1 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "Avatar",
   props: {
     src: {},
@@ -1184,7 +933,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     });
     const showImage = computed(() => props.src && !imageError.value);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         createElementVNode("div", {
           class: normalizeClass([
             "flex items-center justify-center overflow-hidden bg-gray-200 font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300",
@@ -1198,7 +947,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             alt: __props.alt || __props.name,
             class: "size-full object-cover",
             onError: _cache[0] || (_cache[0] = ($event) => imageError.value = true)
-          }, null, 40, _hoisted_2$5)) : initials.value ? (openBlock(), createElementBlock("span", _hoisted_3$3, toDisplayString(initials.value), 1)) : (openBlock(), createBlock(unref(Icon), {
+          }, null, 40, _hoisted_2$6)) : initials.value ? (openBlock(), createElementBlock("span", _hoisted_3$3, toDisplayString(initials.value), 1)) : (openBlock(), createBlock(unref(Icon), {
             key: 2,
             icon: "lucide:user",
             class: "size-1/2"
@@ -1216,9 +965,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["aria-selected", "disabled", "onClick"];
-const _hoisted_2$4 = { class: "mt-4" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8 = ["aria-selected", "disabled", "onClick"];
+const _hoisted_2$5 = { class: "mt-4" };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -1283,18 +1032,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 activeTab.value === tab.key ? variantClasses[__props.variant].active : variantClasses[__props.variant].inactive
               ]),
               onClick: ($event) => selectTab(tab)
-            }, toDisplayString(tab.label), 11, _hoisted_1$7);
+            }, toDisplayString(tab.label), 11, _hoisted_1$8);
           }), 128))
         ], 2),
-        createElementVNode("div", _hoisted_2$4, [
+        createElementVNode("div", _hoisted_2$5, [
           renderSlot(_ctx.$slots, "default", { activeTab: activeTab.value })
         ])
       ]);
     };
   }
 });
-const _hoisted_1$6 = { role: "tabpanel" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { role: "tabpanel" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TabPanel",
   props: {
     value: {}
@@ -1304,7 +1053,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const activeTab = inject("activeTab");
     const isActive = computed(() => (activeTab == null ? void 0 : activeTab.value) === props.value);
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$7, [
         renderSlot(_ctx.$slots, "default")
       ], 512)), [
         [vShow, isActive.value]
@@ -1312,11 +1061,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   key: 2,
   class: "text-sm font-semibold"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Stepper",
   props: {
     steps: {},
@@ -1385,7 +1134,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                   key: 1,
                   icon: step.icon,
                   class: "size-6"
-                }, null, 8, ["icon"])) : (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(index + 1), 1))
+                }, null, 8, ["icon"])) : (openBlock(), createElementBlock("span", _hoisted_1$6, toDisplayString(index + 1), 1))
               ], 2),
               createElementVNode("div", {
                 class: normalizeClass([
@@ -1413,7 +1162,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "CollapsibleCard",
   props: {
     title: {},
@@ -1509,7 +1258,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "Tooltip",
   props: {
     content: {},
@@ -1584,7 +1333,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Popover",
   props: {
     position: { default: "bottom" },
@@ -1667,17 +1416,17 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   key: 0,
   class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700"
 };
-const _hoisted_2$3 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
+const _hoisted_2$4 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
 const _hoisted_3$2 = { class: "flex-1 overflow-y-auto p-4" };
 const _hoisted_4$2 = {
   key: 1,
   class: "px-4 py-3 border-t border-gray-200 dark:border-gray-700"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "Drawer",
   props: {
     modelValue: { type: Boolean },
@@ -1796,9 +1545,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               role: "dialog",
               "aria-modal": "true"
             }, [
-              __props.title || __props.showClose || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+              __props.title || __props.showClose || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
                 renderSlot(_ctx.$slots, "header", {}, () => [
-                  createElementVNode("h2", _hoisted_2$3, toDisplayString(__props.title), 1)
+                  createElementVNode("h2", _hoisted_2$4, toDisplayString(__props.title), 1)
                 ]),
                 __props.showClose ? (openBlock(), createElementBlock("button", {
                   key: 0,
@@ -1826,9 +1575,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = { "aria-label": "Breadcrumb" };
-const _hoisted_2$2 = { class: "flex items-center flex-wrap gap-1 text-sm" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = { "aria-label": "Breadcrumb" };
+const _hoisted_2$3 = { class: "flex items-center flex-wrap gap-1 text-sm" };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Breadcrumb",
   props: {
     items: {},
@@ -1839,8 +1588,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   emits: ["click"],
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("nav", _hoisted_1$3, [
-        createElementVNode("ol", _hoisted_2$2, [
+      return openBlock(), createElementBlock("nav", _hoisted_1$4, [
+        createElementVNode("ol", _hoisted_2$3, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
             return openBlock(), createElementBlock("li", {
               key: index,
@@ -1882,8 +1631,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = { 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$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Accordion",
   props: {
     mode: { default: "single" },
@@ -1909,17 +1658,17 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       isOpen
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         renderSlot(_ctx.$slots, "default")
       ]);
     };
   }
 });
-const _hoisted_1$1 = ["disabled", "aria-expanded"];
-const _hoisted_2$1 = { class: "flex items-center gap-2 font-medium" };
+const _hoisted_1$2 = ["disabled", "aria-expanded"];
+const _hoisted_2$2 = { class: "flex items-center gap-2 font-medium" };
 const _hoisted_3$1 = { class: "overflow-hidden" };
 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$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
     itemKey: {},
@@ -1947,7 +1696,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           "aria-expanded": isOpen.value,
           onClick: toggle
         }, [
-          createElementVNode("span", _hoisted_2$1, [
+          createElementVNode("span", _hoisted_2$2, [
             __props.icon ? (openBlock(), createBlock(unref(Icon), {
               key: 0,
               icon: __props.icon,
@@ -1959,7 +1708,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             icon: "heroicons:chevron-down",
             class: normalizeClass(["w-5 h-5 transition-transform duration-200", { "rotate-180": isOpen.value }])
           }, null, 8, ["class"])
-        ], 10, _hoisted_1$1),
+        ], 10, _hoisted_1$2),
         createVNode(Transition, {
           "enter-active-class": "transition-all duration-200 ease-out",
           "enter-from-class": "opacity-0 max-h-0",
@@ -1983,11 +1732,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = {
+const _hoisted_1$1 = {
   key: 0,
   class: "relative"
 };
-const _hoisted_2 = { class: "flex items-start gap-4" };
+const _hoisted_2$1 = { class: "flex items-start gap-4" };
 const _hoisted_3 = { 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" };
@@ -2010,7 +1759,7 @@ const _hoisted_12 = {
   key: 0,
   class: "text-xs text-gray-500 dark:text-gray-400"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "Timeline",
   props: {
     items: {},
@@ -2056,7 +1805,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return __props.orientation === "vertical" ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      return __props.orientation === "vertical" ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
           return openBlock(), createElementBlock("div", {
             key: item.key,
@@ -2066,7 +1815,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: 0,
               class: normalizeClass(["absolute left-4 top-8 w-0.5 h-full -ml-px", getStatusClasses(item.status).line])
             }, null, 2)) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_2, [
+            createElementVNode("div", _hoisted_2$1, [
               createElementVNode("div", {
                 class: normalizeClass(["relative z-10 flex items-center justify-center w-8 h-8 rounded-full flex-shrink-0", getStatusClasses(item.status).dot])
               }, [
@@ -2118,6 +1867,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "text-sm font-medium"
+};
+const _sfc_main = /* @__PURE__ */ 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({ storageKey: props.storageKey });
+    const sizeClasses = {
+      sm: { button: "p-1.5", icon: "h-4 w-4" },
+      md: { button: "p-2", icon: "h-5 w-5" },
+      lg: { button: "p-2.5", icon: "h-6 w-6" }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        class: 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-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+        ]),
+        "aria-label": unref(isDark) ? "Switch to light mode" : "Switch to dark mode",
+        onClick: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => unref(toggle) && unref(toggle)(...args))
+      }, [
+        createVNode(unref(Icon), {
+          icon: unref(isDark) ? __props.darkIcon : __props.lightIcon,
+          class: normalizeClass(sizeClasses[__props.size].icon)
+        }, null, 8, ["icon", "class"]),
+        __props.showLabel ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(unref(isDark) ? "Dark" : "Light"), 1)) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
 export {
   _sfc_main$i as _,
   _sfc_main$h as a,
@@ -2139,4 +1933,4 @@ export {
   _sfc_main$1 as q,
   _sfc_main as r
 };
-//# sourceMappingURL=Timeline.vue_vue_type_script_setup_true_lang-CuPF4MPe.js.map
+//# sourceMappingURL=DarkModeToggle.vue_vue_type_script_setup_true_lang-43fxlbro.js.map