cisse-vue-ui 0.8.4 → 0.10.0

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

@@ -1,118 +1,1130 @@
 "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 ListSkeleton_vue_vue_type_script_setup_true_lang = require("./ListSkeleton.vue_vue_type_script_setup_true_lang-Bo3HqgX0.cjs");
 const BadgeType_vue_vue_type_script_setup_true_lang = require("./BadgeType.vue_vue_type_script_setup_true_lang-zs0NXN4g.cjs");
+const usePagination = require("./usePagination-gvvh1zqA.cjs");
 const vue$1 = require("@iconify/vue");
 const useDropdown = require("./useDropdown-HI7ABBLe.cjs");
 const useId = require("./useId-nxrBaIC9.cjs");
-const useDarkMode = require("./useDarkMode-DLZcJEUQ.cjs");
-const _hoisted_1$h = {
+const _hoisted_1$o = {
   key: 1,
   class: "flex flex-col overflow-hidden rounded-lg bg-white shadow-md dark:bg-slate-950"
 };
-const _hoisted_2$d = { class: "flex flex-col gap-0.5" };
-const _hoisted_3$8 = {
+const _hoisted_2$h = { class: "flex flex-col gap-0.5" };
+const _hoisted_3$a = {
   key: 1,
   class: "text-sm font-normal text-gray-600 dark:text-gray-400"
 };
-const _hoisted_4$6 = { class: "flex gap-2" };
-const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_4$7 = { class: "flex gap-2" };
+const _sfc_main$A = /* @__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 }
+    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$2, {
+        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$o, [
+        _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$h, [
+            __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$a, [
+              vue.renderSlot(_ctx.$slots, "description", {}, () => [
+                vue.createTextVNode(vue.toDisplayString(__props.description), 1)
+              ])
+            ])) : vue.createCommentVNode("", true)
+          ]),
+          vue.createElementVNode("div", _hoisted_4$7, [
+            vue.renderSlot(_ctx.$slots, "actions")
+          ])
+        ], 2)) : vue.createCommentVNode("", true),
+        vue.renderSlot(_ctx.$slots, "default")
+      ]));
+    };
+  }
+});
+const _hoisted_1$n = ["role", "tabindex", "onKeydown"];
+const _hoisted_2$g = ["src", "alt"];
+const _hoisted_3$9 = ["src", "alt"];
+const _hoisted_4$6 = { class: "flex items-center gap-3" };
+const _hoisted_5$4 = { class: "flex flex-col gap-0.5" };
+const _hoisted_6$3 = ["src", "alt"];
+const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  __name: "CardWrapper",
+  props: {
+    title: {},
+    description: {},
+    icon: {},
+    shadow: { default: "md" },
+    rounded: { default: "lg" },
+    padding: { default: "none" },
+    headerPadding: { default: "md" },
+    border: { default: "none" },
+    variant: { default: "default" },
+    accent: { default: "none" },
+    headerDivider: { type: Boolean, default: true },
+    footerDivider: { type: Boolean, default: true },
+    clickable: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    image: {},
+    imageAlt: {},
+    imagePosition: { default: "top" },
+    imageHeight: { default: "200px" },
+    imageWidth: { default: "200px" },
+    loading: { type: Boolean, default: false },
+    loadingLines: { default: 3 },
+    loadingAvatar: { type: Boolean, default: false },
+    loadingActions: { type: Boolean, default: false },
+    cardClass: {},
+    headerClass: {},
+    titleClass: {},
+    descriptionClass: {},
+    iconClass: {},
+    iconElementClass: {},
+    contentClass: {},
+    footerClass: {},
+    dividerClass: {},
+    actionsClass: {},
+    imageClass: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
+    const hasHeader = vue.computed(
+      () => props.title || props.description || props.icon || slots.header || slots.title || slots.description || slots.icon || slots.actions
+    );
+    const hasFooter = vue.computed(() => !!slots.footer);
+    const hasImage = vue.computed(() => !!props.image || !!slots.image);
+    const isHorizontal = vue.computed(() => props.imagePosition === "left" || props.imagePosition === "right");
+    const shadowClasses = vue.computed(() => {
+      const map = {
+        none: "",
+        sm: "shadow-sm",
+        md: "shadow-md",
+        lg: "shadow-lg",
+        xl: "shadow-xl"
+      };
+      return map[props.shadow];
+    });
+    const roundedClasses = vue.computed(() => {
+      const map = {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        full: "rounded-3xl"
+      };
+      return map[props.rounded];
+    });
+    const paddingClasses = vue.computed(() => {
+      const map = {
+        none: "",
+        sm: "p-3",
+        md: "p-5",
+        lg: "p-6"
+      };
+      return map[props.padding];
+    });
+    const headerPaddingClasses = vue.computed(() => {
+      const map = {
+        none: "",
+        sm: "px-3 py-2",
+        md: "px-5 py-3",
+        lg: "px-6 py-4"
+      };
+      return map[props.headerPadding];
+    });
+    const footerPaddingClasses = vue.computed(() => {
+      const map = {
+        none: "",
+        sm: "px-3 py-2",
+        md: "px-5 py-3",
+        lg: "px-6 py-4"
+      };
+      return map[props.headerPadding];
+    });
+    const borderClasses = vue.computed(() => {
+      const map = {
+        none: "",
+        default: "border border-gray-200 dark:border-gray-700",
+        primary: "border border-primary-500 dark:border-primary-400",
+        secondary: "border border-secondary-500 dark:border-secondary-400"
+      };
+      return map[props.border];
+    });
+    const variantClasses = vue.computed(() => {
+      const map = {
+        default: "bg-white dark:bg-slate-950",
+        glass: "bg-white/15 backdrop-blur-sm",
+        outline: "bg-transparent",
+        flat: "bg-gray-50 dark:bg-slate-900"
+      };
+      return map[props.variant];
+    });
+    const accentClasses = vue.computed(() => {
+      if (props.accent === "none") return "";
+      const colorMap = {
+        primary: "border-primary-500",
+        secondary: "border-secondary-500",
+        success: "border-emerald-500",
+        warning: "border-amber-500",
+        danger: "border-red-500",
+        info: "border-blue-500"
+      };
+      const position = isHorizontal.value ? "border-l-4" : "border-t-4";
+      return `${position} ${colorMap[props.accent]}`;
+    });
+    const interactiveClasses = vue.computed(() => {
+      if (props.disabled) {
+        return "opacity-60 cursor-not-allowed";
+      }
+      if (props.clickable) {
+        return "cursor-pointer transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0 active:shadow-md";
+      }
+      return "";
+    });
+    const selectedClasses = vue.computed(() => {
+      if (!props.selected) return "";
+      return "ring-2 ring-primary-500 ring-offset-2 dark:ring-offset-slate-900";
+    });
+    const computedDividerClass = vue.computed(
+      () => props.dividerClass || "border-gray-200 dark:border-gray-700"
+    );
+    const computedTitleClass = vue.computed(
+      () => props.titleClass || "text-gray-800 dark:text-gray-200"
+    );
+    const computedDescriptionClass = vue.computed(
+      () => props.descriptionClass || "text-gray-600 dark:text-gray-400"
+    );
+    const computedIconClass = vue.computed(
+      () => props.iconClass || "flex items-center justify-center size-10 rounded-lg bg-primary-100 dark:bg-primary-900/30"
+    );
+    const computedIconElementClass = vue.computed(
+      () => props.iconElementClass || "size-5 text-primary-600 dark:text-primary-400"
+    );
+    const imageContainerClasses = vue.computed(() => {
+      const base = "overflow-hidden flex-shrink-0";
+      switch (props.imagePosition) {
+        case "left":
+          return `${base} rounded-l-lg`;
+        case "right":
+          return `${base} rounded-r-lg`;
+        case "top":
+          return `${base} rounded-t-lg`;
+        case "bottom":
+          return `${base} rounded-b-lg`;
+        case "background":
+          return "absolute inset-0";
+        default:
+          return base;
+      }
+    });
+    const imageStyle = vue.computed(() => {
+      if (props.imagePosition === "background") {
+        return {};
+      }
+      if (isHorizontal.value) {
+        return { width: props.imageWidth };
+      }
+      return { height: props.imageHeight };
+    });
+    const handleClick = (event) => {
+      if (props.disabled) return;
+      if (props.clickable) {
+        emit("click", event);
+      }
+    };
+    return (_ctx, _cache) => {
+      return __props.loading ? (vue.openBlock(), vue.createBlock(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$2, {
+        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", {
+        key: 1,
+        class: vue.normalizeClass([
+          "overflow-hidden relative",
+          isHorizontal.value ? "flex" : "flex flex-col",
+          __props.imagePosition === "right" && "flex-row-reverse",
+          shadowClasses.value,
+          roundedClasses.value,
+          borderClasses.value,
+          variantClasses.value,
+          accentClasses.value,
+          interactiveClasses.value,
+          selectedClasses.value,
+          __props.cardClass
+        ]),
+        role: __props.clickable ? "button" : void 0,
+        tabindex: __props.clickable && !__props.disabled ? 0 : void 0,
+        onClick: handleClick,
+        onKeydown: [
+          vue.withKeys(handleClick, ["enter"]),
+          vue.withKeys(vue.withModifiers(handleClick, ["prevent"]), ["space"])
+        ]
+      }, [
+        hasImage.value && __props.imagePosition === "background" ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(imageContainerClasses.value)
+        }, [
+          vue.renderSlot(_ctx.$slots, "image", {}, () => [
+            __props.image ? (vue.openBlock(), vue.createElementBlock("img", {
+              key: 0,
+              src: __props.image,
+              alt: __props.imageAlt || "",
+              class: vue.normalizeClass(["w-full h-full object-cover", __props.imageClass])
+            }, null, 10, _hoisted_2$g)) : vue.createCommentVNode("", true)
+          ]),
+          _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" }, null, -1))
+        ], 2)) : vue.createCommentVNode("", true),
+        hasImage.value && (__props.imagePosition === "left" || __props.imagePosition === "top") ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(imageContainerClasses.value),
+          style: vue.normalizeStyle(imageStyle.value)
+        }, [
+          vue.renderSlot(_ctx.$slots, "image", {}, () => [
+            __props.image ? (vue.openBlock(), vue.createElementBlock("img", {
+              key: 0,
+              src: __props.image,
+              alt: __props.imageAlt || "",
+              class: vue.normalizeClass(["w-full h-full object-cover", __props.imageClass])
+            }, null, 10, _hoisted_3$9)) : vue.createCommentVNode("", true)
+          ])
+        ], 6)) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(["flex flex-col flex-1 min-w-0", __props.imagePosition === "background" && "relative z-10"])
+        }, [
+          _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: vue.normalizeClass([
+              __props.headerDivider && "border-b",
+              computedDividerClass.value,
+              __props.headerClass
+            ])
+          }, [
+            vue.renderSlot(_ctx.$slots, "header")
+          ], 2)) : hasHeader.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            class: vue.normalizeClass([
+              "flex items-center justify-between gap-4",
+              headerPaddingClasses.value,
+              __props.headerDivider && "border-b",
+              computedDividerClass.value,
+              __props.headerClass,
+              __props.imagePosition === "background" && "text-white border-white/20"
+            ])
+          }, [
+            vue.createElementVNode("div", _hoisted_4$6, [
+              __props.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass(computedIconClass.value)
+              }, [
+                vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+                  __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+                    key: 0,
+                    icon: __props.icon,
+                    class: vue.normalizeClass(computedIconElementClass.value)
+                  }, null, 8, ["icon", "class"])) : vue.createCommentVNode("", true)
+                ])
+              ], 2)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_5$4, [
+                __props.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 0,
+                  class: vue.normalizeClass([
+                    "text-md font-semibold",
+                    __props.imagePosition === "background" ? "text-white" : computedTitleClass.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", {
+                  key: 1,
+                  class: vue.normalizeClass([
+                    "text-sm font-normal",
+                    __props.imagePosition === "background" ? "text-white/80" : computedDescriptionClass.value
+                  ])
+                }, [
+                  vue.renderSlot(_ctx.$slots, "description", {}, () => [
+                    vue.createTextVNode(vue.toDisplayString(__props.description), 1)
+                  ])
+                ], 2)) : vue.createCommentVNode("", true)
+              ])
+            ]),
+            _ctx.$slots.actions ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(["flex gap-2", __props.actionsClass])
+            }, [
+              vue.renderSlot(_ctx.$slots, "actions")
+            ], 2)) : vue.createCommentVNode("", true)
+          ], 2)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(["flex-1", paddingClasses.value, __props.contentClass])
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 2),
+          hasFooter.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: vue.normalizeClass([
+              __props.footerDivider && "border-t",
+              computedDividerClass.value,
+              footerPaddingClasses.value,
+              __props.footerClass,
+              __props.imagePosition === "background" && "text-white border-white/20"
+            ])
+          }, [
+            vue.renderSlot(_ctx.$slots, "footer")
+          ], 2)) : vue.createCommentVNode("", true)
+        ], 2),
+        hasImage.value && (__props.imagePosition === "right" || __props.imagePosition === "bottom") ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 2,
+          class: vue.normalizeClass(imageContainerClasses.value),
+          style: vue.normalizeStyle(imageStyle.value)
+        }, [
+          vue.renderSlot(_ctx.$slots, "image", {}, () => [
+            __props.image ? (vue.openBlock(), vue.createElementBlock("img", {
+              key: 0,
+              src: __props.image,
+              alt: __props.imageAlt || "",
+              class: vue.normalizeClass(["w-full h-full object-cover", __props.imageClass])
+            }, null, 10, _hoisted_6$3)) : vue.createCommentVNode("", true)
+          ])
+        ], 6)) : vue.createCommentVNode("", true)
+      ], 42, _hoisted_1$n));
+    };
+  }
+});
+const _hoisted_1$m = { class: "overflow-x-auto" };
+const TableContextKey = Symbol("TableContext");
+const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Table",
+  props: {
+    striped: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    hover: { type: Boolean, default: true },
+    compact: { type: Boolean, default: false },
+    stickyHeader: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const attrs = vue.useAttrs();
+    const props = __props;
+    const tableClasses = vue.computed(() => [
+      "w-full text-left",
+      props.bordered ? "border border-gray-200 dark:border-gray-700" : ""
+    ]);
+    const wrapperClasses = vue.computed(() => [
+      "overflow-hidden",
+      props.stickyHeader ? "max-h-[600px] overflow-y-auto" : ""
+    ]);
+    const { striped, bordered, hover, compact, stickyHeader } = vue.toRefs(props);
+    vue.provide(TableContextKey, vue.reactive({
+      striped,
+      bordered,
+      hover,
+      compact,
+      stickyHeader
+    }));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(wrapperClasses.value)
+      }, [
+        vue.createElementVNode("div", _hoisted_1$m, [
+          vue.createElementVNode("table", vue.mergeProps(vue.unref(attrs), { class: tableClasses.value }), [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 16)
+        ])
+      ], 2);
+    };
+  }
+});
+const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Caption",
+  props: {
+    position: { default: "top" },
+    srOnly: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const attrs = vue.useAttrs();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("caption", vue.mergeProps(vue.unref(attrs), {
+        class: [
+          __props.position === "bottom" ? "caption-bottom" : "caption-top",
+          __props.srOnly ? "sr-only" : "py-2 text-sm text-gray-600 dark:text-gray-400"
+        ]
+      }), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Colgroup",
+  setup(__props) {
+    const attrs = vue.useAttrs();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("colgroup", vue.normalizeProps(vue.guardReactiveProps(vue.unref(attrs))), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$l = ["span"];
+const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Col",
+  props: {
+    span: {},
+    width: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = vue.useAttrs();
+    const colStyles = vue.computed(() => ({
+      width: props.width
+    }));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("col", vue.mergeProps(vue.unref(attrs), {
+        span: __props.span,
+        style: colStyles.value
+      }), null, 16, _hoisted_1$l);
+    };
+  }
+});
+const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Thead",
+  setup(__props) {
+    const context = vue.inject(TableContextKey);
+    const attrs = vue.useAttrs();
+    const theadClasses = vue.computed(() => [
+      "text-sm font-semibold text-gray-600 uppercase dark:text-gray-400",
+      (context == null ? void 0 : context.bordered) ? "border-b border-gray-200 dark:border-gray-700" : "border-b border-black/10 dark:border-white/10",
+      (context == null ? void 0 : context.stickyHeader) ? "sticky top-0 z-10" : ""
+    ]);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("thead", vue.mergeProps(vue.unref(attrs), {
+        class: [theadClasses.value, "bg-black/5 dark:bg-white/5"]
+      }), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Tbody",
+  setup(__props) {
+    const context = vue.inject(TableContextKey);
+    const attrs = vue.useAttrs();
+    const tbodyClasses = vue.computed(() => [
+      "font-medium",
+      (context == null ? void 0 : context.bordered) ? "divide-y divide-gray-200 dark:divide-gray-700" : "divide-y divide-black/10 dark:divide-white/10"
+    ]);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("tbody", vue.mergeProps(vue.unref(attrs), { class: tbodyClasses.value }), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Tfoot",
+  setup(__props) {
+    const context = vue.inject(TableContextKey);
+    const attrs = vue.useAttrs();
+    const tfootClasses = vue.computed(() => [
+      "text-sm font-medium text-gray-600 dark:text-gray-400",
+      (context == null ? void 0 : context.bordered) ? "border-t border-gray-200 dark:border-gray-700" : "border-t border-black/10 dark:border-white/10"
+    ]);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("tfoot", vue.mergeProps(vue.unref(attrs), {
+        class: [tfootClasses.value, "bg-black/5 dark:bg-white/5"]
+      }), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Tr",
+  props: {
+    selected: { type: Boolean, default: false },
+    clickable: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    even: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const attrs = vue.useAttrs();
+    const emit = __emit;
+    const context = vue.inject(TableContextKey);
+    const rowClasses = vue.computed(() => [
+      "transition-colors",
+      // Hover effect
+      (context == null ? void 0 : context.hover) && !props.disabled ? "hover:bg-black/5 dark:hover:bg-white/5" : "",
+      // Selected state
+      props.selected ? "bg-primary-50 dark:bg-primary-900/20" : "",
+      // Striped (only apply if not selected)
+      (context == null ? void 0 : context.striped) && props.even && !props.selected ? "bg-black/[0.02] dark:bg-white/[0.02]" : "",
+      // Clickable
+      props.clickable && !props.disabled ? "cursor-pointer" : "",
+      // Disabled
+      props.disabled ? "opacity-50 cursor-not-allowed" : ""
+    ]);
+    const handleClick = (event) => {
+      if (props.clickable && !props.disabled) {
+        emit("click", event);
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps(vue.unref(attrs), {
+        class: rowClasses.value,
+        onClick: handleClick
+      }), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$k = ["colspan", "rowspan", "scope", "aria-sort"];
+const _hoisted_2$f = {
+  key: 0,
+  d: "M7 14l5-5 5 5H7z"
+};
+const _hoisted_3$8 = {
+  key: 1,
+  d: "M7 10l5 5 5-5H7z"
+};
+const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Th",
+  props: {
+    sortable: { type: Boolean, default: false },
+    sorted: { type: Boolean, default: false },
+    sortDirection: { default: "asc" },
+    align: { default: "left" },
+    width: {},
+    minWidth: {},
+    maxWidth: {},
+    sticky: { type: Boolean, default: false },
+    stickyLeft: { default: "0" },
+    colspan: {},
+    rowspan: {},
+    scope: { default: "col" },
+    resizable: { type: Boolean, default: false },
+    resizing: { type: Boolean, default: false }
+  },
+  emits: ["sort", "resizeStart"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const attrs = vue.useAttrs();
+    const emit = __emit;
+    const context = vue.inject(TableContextKey);
+    const thClasses = vue.computed(() => [
+      // Padding
+      (context == null ? void 0 : context.compact) ? "px-2 py-2" : "px-3 py-3",
+      // Alignment
+      props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left",
+      // Sortable hover
+      props.sortable ? "cursor-pointer select-none hover:bg-black/5 dark:hover:bg-white/5" : "",
+      // Border for bordered tables
+      (context == null ? void 0 : context.bordered) ? "border-r border-gray-200 dark:border-gray-700 last:border-r-0" : "",
+      // Sticky column
+      props.sticky ? "sticky bg-black/5 dark:bg-white/5 z-20" : "",
+      // Resizable
+      props.resizable ? "relative" : ""
+    ]);
+    const thStyles = vue.computed(() => ({
+      width: props.width,
+      minWidth: props.minWidth,
+      maxWidth: props.maxWidth,
+      left: props.sticky ? props.stickyLeft : void 0
+    }));
+    const handleSort = () => {
+      if (props.sortable) {
+        emit("sort");
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("th", vue.mergeProps(vue.unref(attrs), {
+        class: thClasses.value,
+        style: thStyles.value,
+        colspan: __props.colspan,
+        rowspan: __props.rowspan,
+        scope: __props.scope,
+        "aria-sort": __props.sortable ? __props.sorted ? __props.sortDirection === "asc" ? "ascending" : "descending" : "none" : void 0,
+        onClick: handleSort
+      }), [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(["flex items-center gap-1", {
+            "justify-center": __props.align === "center",
+            "justify-end": __props.align === "right"
+          }])
+        }, [
+          vue.renderSlot(_ctx.$slots, "default"),
+          __props.sortable ? (vue.openBlock(), vue.createElementBlock("svg", {
+            key: 0,
+            class: vue.normalizeClass([
+              "size-4 transition-colors flex-shrink-0",
+              __props.sorted ? "text-primary-500" : "text-gray-400"
+            ]),
+            viewBox: "0 0 24 24",
+            fill: "currentColor"
+          }, [
+            __props.sorted && __props.sortDirection === "asc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_2$f)) : __props.sorted && __props.sortDirection === "desc" ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_3$8)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+              _cache[2] || (_cache[2] = vue.createElementVNode("path", {
+                d: "M7 14l5-5 5 5H7z",
+                class: "opacity-40"
+              }, null, -1)),
+              _cache[3] || (_cache[3] = vue.createElementVNode("path", {
+                d: "M7 10l5 5 5-5H7z",
+                class: "opacity-40"
+              }, null, -1))
+            ], 64))
+          ], 2)) : vue.createCommentVNode("", true)
+        ], 2),
+        __props.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass([
+            "absolute top-0 right-0 bottom-0 w-1 cursor-col-resize select-none",
+            "hover:bg-primary-400 dark:hover:bg-primary-500",
+            "transition-colors",
+            __props.resizing ? "bg-primary-500" : "bg-transparent"
+          ]),
+          role: "separator",
+          "aria-orientation": "vertical",
+          tabindex: "-1",
+          onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(($event) => emit("resizeStart", $event), ["stop"])),
+          onTouchstart: _cache[1] || (_cache[1] = vue.withModifiers(($event) => emit("resizeStart", $event), ["stop"]))
+        }, null, 34)) : vue.createCommentVNode("", true)
+      ], 16, _hoisted_1$k);
+    };
+  }
+});
+const _hoisted_1$j = ["colspan", "rowspan"];
+const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "Td",
+  props: {
+    align: { default: "left" },
+    main: { type: Boolean, default: false },
+    className: {},
+    truncate: { type: Boolean, default: false },
+    width: {},
+    sticky: { type: Boolean, default: false },
+    stickyLeft: { default: "0" },
+    colspan: {},
+    rowspan: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const attrs = vue.useAttrs();
+    const context = vue.inject(TableContextKey);
+    const tdClasses = vue.computed(() => [
+      // Padding
+      (context == null ? void 0 : context.compact) ? "px-2 py-2" : "px-3 py-4",
+      // Alignment
+      props.align === "center" ? "text-center" : props.align === "right" ? "text-right" : "text-left",
+      // Main column styling
+      props.main ? "text-sm font-semibold text-gray-900 dark:text-gray-100" : "text-xs font-medium text-gray-600 dark:text-gray-400",
+      // Truncate
+      props.truncate ? "truncate" : "",
+      // Border for bordered tables
+      (context == null ? void 0 : context.bordered) ? "border-r border-gray-200 dark:border-gray-700 last:border-r-0" : "",
+      // Sticky column
+      props.sticky ? "sticky bg-white dark:bg-gray-900 z-10" : "",
+      // Custom className
+      props.className || ""
+    ]);
+    const tdStyles = vue.computed(() => ({
+      width: props.width,
+      maxWidth: props.truncate ? props.width || "200px" : void 0,
+      left: props.sticky ? props.stickyLeft : void 0
+    }));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("td", vue.mergeProps(vue.unref(attrs), {
+        class: tdClasses.value,
+        style: tdStyles.value,
+        colspan: __props.colspan,
+        rowspan: __props.rowspan
+      }), [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$j);
+    };
+  }
+});
+const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableHeader",
+  props: {
+    columns: {},
+    selectable: { type: Boolean, default: false },
+    allSelected: { type: Boolean, default: false },
+    someSelected: { type: Boolean, default: false },
+    selectableCount: { default: 0 },
+    sortBy: {},
+    sortDirection: {},
+    showActions: { type: Boolean, default: false }
+  },
+  emits: ["selectAll", "sort"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const handleSort = (property) => {
+      if (!property.sortable) return;
+      const newDirection = props.sortBy === property.name && props.sortDirection === "asc" ? "desc" : "asc";
+      emit("sort", property.name, newDirection);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$r, null, {
+        default: vue.withCtx(() => [
+          __props.selectable ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
+            key: 0,
+            width: "48px"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(index._sfc_main, {
+                "model-value": __props.allSelected,
+                indeterminate: __props.someSelected,
+                disabled: __props.selectableCount === 0,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("selectAll"))
+              }, null, 8, ["model-value", "indeterminate", "disabled"])
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.columns, (column) => {
+            return vue.openBlock(), vue.createBlock(_sfc_main$q, {
+              key: column.name,
+              sortable: column.sortable,
+              sorted: __props.sortBy === column.name,
+              "sort-direction": __props.sortDirection,
+              align: column.align,
+              width: column.width,
+              "min-width": column.minWidth,
+              "max-width": column.maxWidth,
+              onSort: ($event) => handleSort(column)
+            }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "header-" + column.name, { column }, () => [
+                  vue.createTextVNode(vue.toDisplayString(column.label ?? column.name), 1)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["sortable", "sorted", "sort-direction", "align", "width", "min-width", "max-width", "onSort"]);
+          }), 128)),
+          __props.showActions ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
+            key: 1,
+            align: "right",
+            width: "100px"
+          })) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _hoisted_1$i = { class: "flex items-center justify-end gap-2" };
+const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableRow",
+  props: {
+    item: {},
+    columns: {},
+    selectable: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false },
+    canSelect: { type: Boolean, default: true },
+    clickable: { type: Boolean, default: false },
+    even: { type: Boolean, default: false },
+    showActions: { type: Boolean, default: false }
+  },
+  emits: ["select", "click"],
+  setup(__props, { emit: __emit }) {
+    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 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];
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$r, {
+        selected: __props.selected,
+        clickable: __props.clickable,
+        even: __props.even,
+        onClick: _cache[1] || (_cache[1] = (e) => emit("click", e))
+      }, {
+        default: vue.withCtx(() => [
+          __props.selectable ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+            key: 0,
+            width: "48px"
+          }, {
+            default: vue.withCtx(() => [
+              __props.canSelect ? (vue.openBlock(), vue.createBlock(index._sfc_main, {
+                key: 0,
+                "model-value": __props.selected,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("select"))
+              }, null, 8, ["model-value"])) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.columns, (column) => {
+            return vue.openBlock(), vue.createBlock(_sfc_main$p, {
+              key: column.name,
+              align: column.align,
+              main: column.main,
+              "class-name": column.className,
+              truncate: column.truncate,
+              width: column.width
+            }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "cell-" + column.name, {
+                  item: __props.item,
+                  value: getItemValue(__props.item, column),
+                  column
+                }, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getTypeComponent(column.type || "text")), {
+                    value: getItemValue(__props.item, column)
+                  }, null, 8, ["value"]))
+                ])
+              ]),
+              _: 2
+            }, 1032, ["align", "main", "class-name", "truncate", "width"]);
+          }), 128)),
+          __props.showActions ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
+            key: 1,
+            align: "right"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1$i, [
+                vue.renderSlot(_ctx.$slots, "actions", { item: __props.item })
+              ])
+            ]),
+            _: 3
+          })) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["selected", "clickable", "even"]);
+    };
+  }
+});
+const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  __name: "TableFooter",
+  props: {
+    colSpan: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(_sfc_main$r, null, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_sfc_main$p, {
+            colspan: __props.colSpan,
+            class: "text-center"
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["colspan"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _hoisted_1$h = ["disabled", "aria-expanded"];
+const _hoisted_2$e = { class: "p-4" };
+const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "ExpandableRow",
+  props: {
+    colspan: {},
+    defaultExpanded: { type: Boolean, default: false },
+    expanded: { type: Boolean, default: void 0 },
+    selected: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    expandOnRowClick: { type: Boolean, default: false }
   },
-  setup(__props) {
+  emits: ["update:expanded", "click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
     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"
-    );
+    const emit = __emit;
+    const attrs = vue.useAttrs();
+    const internalExpanded = vue.ref(props.defaultExpanded);
+    const isExpanded = vue.computed({
+      get: () => props.expanded !== void 0 ? props.expanded : internalExpanded.value,
+      set: (value) => {
+        internalExpanded.value = value;
+        emit("update:expanded", value);
+      }
+    });
+    const toggle = () => {
+      if (!props.disabled) {
+        isExpanded.value = !isExpanded.value;
+      }
+    };
+    const handleRowClick = (event) => {
+      emit("click", event);
+      if (props.expandOnRowClick) {
+        toggle();
+      }
+    };
+    __expose({ toggle, isExpanded });
     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", {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createVNode(_sfc_main$r, vue.mergeProps(vue.unref(attrs), {
+          selected: __props.selected,
+          disabled: __props.disabled,
+          clickable: "",
+          onClick: handleRowClick
+        }), {
+          default: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$p, {
+              width: "40px",
+              class: "!p-2"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("button", {
+                  type: "button",
+                  disabled: __props.disabled,
+                  class: "flex size-6 items-center justify-center rounded transition-colors hover:bg-black/10 dark:hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed",
+                  "aria-expanded": isExpanded.value,
+                  "aria-label": "Toggle row details",
+                  onClick: vue.withModifiers(toggle, ["stop"])
+                }, [
+                  (vue.openBlock(), vue.createElementBlock("svg", {
+                    class: vue.normalizeClass(["size-4 transition-transform", { "rotate-90": isExpanded.value }]),
+                    viewBox: "0 0 24 24",
+                    fill: "currentColor"
+                  }, [..._cache[0] || (_cache[0] = [
+                    vue.createElementVNode("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }, null, -1)
+                  ])], 2))
+                ], 8, _hoisted_1$h)
+              ]),
+              _: 1
+            }),
+            vue.renderSlot(_ctx.$slots, "row")
+          ]),
+          _: 3
+        }, 16, ["selected", "disabled"]),
+        isExpanded.value ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
           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)
+          class: "bg-gray-50 dark:bg-gray-800/50"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$p, {
+              colspan: __props.colspan + 1,
+              class: "!p-0"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_2$e, [
+                  vue.renderSlot(_ctx.$slots, "expanded")
+                ])
+              ]),
+              _: 3
+            }, 8, ["colspan"])
           ]),
-          vue.createElementVNode("div", _hoisted_4$6, [
-            vue.renderSlot(_ctx.$slots, "actions")
-          ])
-        ], 2)) : vue.createCommentVNode("", true),
-        vue.renderSlot(_ctx.$slots, "default")
-      ]));
+          _: 3
+        })) : vue.createCommentVNode("", true)
+      ], 64);
     };
   }
 });
 const _hoisted_1$g = { class: "overflow-hidden" };
-const _hoisted_2$c = {
+const _hoisted_2$d = {
   key: 1,
-  class: "overflow-x-auto"
+  class: "flex flex-col items-center justify-center py-12 text-center"
 };
-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_3$7 = { class: "flex flex-col items-center gap-3" };
+const _hoisted_4$5 = { class: "text-sm text-gray-600 dark:text-gray-400" };
 const _hoisted_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"
+  key: 3,
+  class: "flex flex-col items-center justify-center py-12 text-center"
 };
-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",
+  __name: "DataTable",
   props: {
     properties: {},
     items: {},
@@ -123,58 +1135,65 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     sortBy: {},
     sortDirection: {},
     loading: { type: Boolean, default: false },
-    loadingRows: { default: 5 }
+    loadingRows: { default: 5 },
+    error: { type: Boolean, default: false },
+    errorMessage: { default: "An error occurred while loading data." },
+    striped: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    hover: { type: Boolean, default: true },
+    compact: { type: Boolean, default: false },
+    stickyHeader: { type: Boolean, default: false },
+    clickableRows: { type: Boolean, default: false },
+    paginated: { type: Boolean, default: false },
+    pageSize: { default: 10 },
+    pageSizeOptions: { default: () => [10, 20, 50, 100] },
+    showPageSize: { type: Boolean, default: true },
+    currentPage: {},
+    totalItems: {}
   },
-  emits: ["select", "selectAll", "sort"],
+  emits: ["select", "selectAll", "sort", "rowClick", "update:currentPage", "update:pageSize"],
   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 visibleProperties = vue.computed(() => props.properties.filter((p) => !p.hidden));
+    const {
+      currentPage: internalPage,
+      pageSize: internalPageSize,
+      totalPages,
+      paginatedItems,
+      setPageSize: setInternalPageSize,
+      goToPage
+    } = usePagination.usePagination({
+      items: vue.computed(() => props.items),
+      pageSize: props.pageSize,
+      initialPage: props.currentPage ?? 1
+    });
+    const effectivePage = vue.computed(() => props.currentPage ?? internalPage.value);
+    const effectivePageSize = vue.computed(() => props.pageSize ?? internalPageSize.value);
+    const effectiveTotalPages = vue.computed(() => {
+      if (props.totalItems !== void 0) {
+        return Math.ceil(props.totalItems / effectivePageSize.value);
+      }
+      return totalPages.value;
+    });
+    const displayItems = vue.computed(() => {
+      if (!props.paginated) return props.items;
+      if (props.totalItems !== void 0) return props.items;
+      return paginatedItems.value;
+    });
+    const handlePageChange = (page) => {
+      goToPage(page);
+      emit("update:currentPage", page);
     };
-    const getTypeComponent = (type = "text") => {
-      return typeComponents[type] || BadgeType_vue_vue_type_script_setup_true_lang._sfc_main$1;
+    const handlePageSizeChange = (size) => {
+      setInternalPageSize(size);
+      emit("update:pageSize", size);
     };
-    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);
@@ -202,129 +1221,145 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     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;
+    const handleRowClick = (item, event) => {
+      if (props.clickableRows) {
+        emit("rowClick", item, event);
+      }
     };
+    const hasActionSlot = vue.computed(() => !!slots.action);
     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, {
+        __props.loading ? (vue.openBlock(), vue.createBlock(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$1, {
           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" : ""
+        }, null, 8, ["rows", "columns"])) : __props.error ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$d, [
+          vue.renderSlot(_ctx.$slots, "error", {}, () => [
+            vue.createElementVNode("div", _hoisted_3$7, [
+              _cache[2] || (_cache[2] = vue.createElementVNode("svg", {
+                class: "size-12 text-red-400",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor"
+              }, [
+                vue.createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "1.5",
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                })
+              ], -1)),
+              vue.createElementVNode("p", _hoisted_4$5, vue.toDisplayString(__props.errorMessage), 1)
+            ])
+          ])
+        ])) : __props.items && __props.items.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
+          key: 2,
+          striped: __props.striped,
+          bordered: __props.bordered,
+          hover: __props.hover,
+          compact: __props.compact,
+          "sticky-header": __props.stickyHeader
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$u, null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$o, {
+                  columns: visibleProperties.value,
+                  selectable: __props.selectable,
+                  "all-selected": allSelected.value,
+                  "some-selected": someSelected.value,
+                  "selectable-count": selectableItems.value.length,
+                  "sort-by": __props.sortBy,
+                  "sort-direction": __props.sortDirection,
+                  "show-actions": hasActionSlot.value,
+                  onSelectAll: _cache[0] || (_cache[0] = ($event) => emit("selectAll")),
+                  onSort: _cache[1] || (_cache[1] = (col, dir) => emit("sort", col, dir))
+                }, vue.createSlots({ _: 2 }, [
+                  vue.renderList(visibleProperties.value, (column) => {
+                    return {
+                      name: `header-${column.name}`,
+                      fn: vue.withCtx((slotProps) => [
+                        vue.renderSlot(_ctx.$slots, "header-" + column.name, vue.normalizeProps(vue.guardReactiveProps(slotProps)))
+                      ])
+                    };
+                  })
+                ]), 1032, ["columns", "selectable", "all-selected", "some-selected", "selectable-count", "sort-by", "sort-direction", "show-actions"])
+              ]),
+              _: 3
+            }),
+            vue.createVNode(_sfc_main$t, null, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayItems.value, (item, index2) => {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                    key: getKey(item),
+                    item,
+                    columns: visibleProperties.value,
+                    selectable: __props.selectable,
+                    selected: isSelected(item),
+                    "can-select": isSelectable(item),
+                    clickable: __props.clickableRows,
+                    even: index2 % 2 === 1,
+                    "show-actions": hasActionSlot.value,
+                    onSelect: ($event) => handleSelect(item),
+                    onClick: (e) => handleRowClick(item, e)
+                  }, vue.createSlots({
+                    actions: vue.withCtx(({ item: rowItem }) => [
+                      vue.renderSlot(_ctx.$slots, "action", { item: rowItem })
                     ]),
-                    onClick: ($event) => handleSort(property)
+                    _: 2
                   }, [
-                    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))
-            ])
+                    vue.renderList(visibleProperties.value, (column) => {
+                      return {
+                        name: `cell-${column.name}`,
+                        fn: vue.withCtx((slotProps) => [
+                          vue.renderSlot(_ctx.$slots, "item-" + column.name, vue.mergeProps({ ref_for: true }, slotProps))
+                        ])
+                      };
+                    })
+                  ]), 1032, ["item", "columns", "selectable", "selected", "can-select", "clickable", "even", "show-actions", "onSelect", "onClick"]);
+                }), 128))
+              ]),
+              _: 3
+            })
           ]),
-          !__props.items || __props.items.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
-            vue.renderSlot(_ctx.$slots, "empty")
-          ])) : vue.createCommentVNode("", true)
-        ]))
+          _: 3
+        }, 8, ["striped", "bordered", "hover", "compact", "sticky-header"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$3, [
+          vue.renderSlot(_ctx.$slots, "empty", {}, () => [
+            _cache[3] || (_cache[3] = vue.createElementVNode("div", { class: "flex flex-col items-center gap-3" }, [
+              vue.createElementVNode("svg", {
+                class: "size-12 text-gray-300 dark:text-gray-600",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor"
+              }, [
+                vue.createElementVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "1.5",
+                  d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+                })
+              ]),
+              vue.createElementVNode("p", { class: "text-sm text-gray-500 dark:text-gray-400" }, "No data available")
+            ], -1))
+          ])
+        ])),
+        __props.paginated && __props.items && __props.items.length > 0 && !__props.loading && !__props.error ? (vue.openBlock(), vue.createBlock(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main, {
+          key: 4,
+          "current-page": effectivePage.value,
+          "total-pages": effectiveTotalPages.value,
+          "page-size": effectivePageSize.value,
+          "page-size-options": __props.pageSizeOptions,
+          "show-page-size": __props.showPageSize,
+          class: "mt-4",
+          "onUpdate:currentPage": handlePageChange,
+          "onUpdate:pageSize": handlePageSizeChange
+        }, null, 8, ["current-page", "total-pages", "page-size", "page-size-options", "show-page-size"])) : 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_2$c = { class: "flex items-center gap-3 p-3" };
 const _hoisted_3$6 = { class: "text-sm text-gray-600 dark:text-gray-400" };
 const _hoisted_4$4 = {
   key: 0,
@@ -392,9 +1427,9 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     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 }, {
+        __props.loading ? (vue.openBlock(), vue.createBlock(_sfc_main$A, { key: 0 }, {
           default: vue.withCtx(() => [
-            vue.createVNode(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$2, {
+            vue.createVNode(ListSkeleton_vue_vue_type_script_setup_true_lang._sfc_main$3, {
               items: __props.loadingItems,
               "show-avatar": "",
               "show-secondary": "",
@@ -403,9 +1438,9 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
           ]),
           _: 1
         })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-          __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$l, { key: 0 }, {
+          __props.selectable && selectableItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$A, { key: 0 }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_2$b, [
+              vue.createElementVNode("div", _hoisted_2$c, [
                 vue.createVNode(index._sfc_main, {
                   "model-value": allSelected.value,
                   indeterminate: someSelected.value,
@@ -418,7 +1453,7 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
             _: 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, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$A, {
               key: getKey(item),
               class: vue.normalizeClass(["hover:shadow-lg transition-all duration-200", {
                 "ring-2 ring-primary": isSelected(item)
@@ -539,9 +1574,9 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "empty")
           ]),
           _: 3
-        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter", "loading", "loading-items"])) : (vue.openBlock(), vue.createBlock(_sfc_main$l, { key: 1 }, {
+        }, 8, ["items", "key-field", "selectable", "selected-items", "selectable-filter", "loading", "loading-items"])) : (vue.openBlock(), vue.createBlock(_sfc_main$A, { key: 1 }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$k, {
+            vue.createVNode(vue.unref(_sfc_main$k), {
               items: __props.items,
               properties: tableProperties.value,
               "key-field": __props.keyField,
@@ -594,7 +1629,7 @@ const _hoisted_1$e = {
   key: 0,
   class: "mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
 };
-const _hoisted_2$a = { class: "relative" };
+const _hoisted_2$b = { class: "relative" };
 const _hoisted_3$5 = ["disabled", "placeholder"];
 const _hoisted_4$3 = ["disabled"];
 const _hoisted_5$1 = {
@@ -711,7 +1746,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         class: "autocomplete-container"
       }, [
         __props.label ? (vue.openBlock(), vue.createElementBlock("label", _hoisted_1$e, vue.toDisplayString(__props.label), 1)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2$a, [
+        vue.createElementVNode("div", _hoisted_2$b, [
           vue.createElementVNode("div", {
             ref_key: "inputWrapperRef",
             ref: inputWrapperRef,
@@ -887,7 +1922,7 @@ const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$d = { class: "relative inline-block" };
-const _hoisted_2$9 = ["src", "alt"];
+const _hoisted_2$a = ["src", "alt"];
 const _hoisted_3$4 = { key: 1 };
 const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "Avatar",
@@ -1009,7 +2044,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
             alt: __props.alt || __props.name,
             class: "size-full object-cover",
             onError: _cache[0] || (_cache[0] = ($event) => imageError.value = true)
-          }, null, 40, _hoisted_2$9)) : initials.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$4, vue.toDisplayString(initials.value), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
+          }, null, 40, _hoisted_2$a)) : initials.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$4, vue.toDisplayString(initials.value), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
             key: 2,
             icon: "lucide:user",
             class: "size-1/2"
@@ -1028,7 +2063,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$c = ["aria-selected", "disabled", "onClick"];
-const _hoisted_2$8 = { class: "mt-4" };
+const _hoisted_2$9 = { class: "mt-4" };
 const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
   __name: "Tabs",
   props: {
@@ -1097,7 +2132,7 @@ const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
             }, vue.toDisplayString(tab.label), 11, _hoisted_1$c);
           }), 128))
         ], 2),
-        vue.createElementVNode("div", _hoisted_2$8, [
+        vue.createElementVNode("div", _hoisted_2$9, [
           vue.renderSlot(_ctx.$slots, "default", { activeTab: activeTab.value })
         ])
       ]);
@@ -1242,7 +2277,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     };
     const hasCustomHeader = () => !!slots.header;
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$l, null, vue.createSlots({
+      return vue.openBlock(), vue.createBlock(_sfc_main$A, null, vue.createSlots({
         default: vue.withCtx(() => [
           vue.createVNode(vue.Transition, {
             "enter-active-class": "transition-all duration-200 ease-out",
@@ -1321,7 +2356,7 @@ const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$9 = ["aria-describedby"];
-const _hoisted_2$7 = ["id"];
+const _hoisted_2$8 = ["id"];
 const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   __name: "Tooltip",
   props: {
@@ -1393,7 +2428,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
               id: vue.unref(tooltipId),
               class: vue.normalizeClass(positionClasses.value),
               role: "tooltip"
-            }, vue.toDisplayString(__props.content), 11, _hoisted_2$7)) : vue.createCommentVNode("", true)
+            }, vue.toDisplayString(__props.content), 11, _hoisted_2$8)) : vue.createCommentVNode("", true)
           ]),
           _: 1
         })
@@ -1402,7 +2437,7 @@ const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$8 = ["id", "aria-expanded", "aria-controls"];
-const _hoisted_2$6 = ["id", "aria-labelledby"];
+const _hoisted_2$7 = ["id", "aria-labelledby"];
 const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   __name: "Popover",
   props: {
@@ -1487,7 +2522,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
                 ])
               }, [
                 vue.renderSlot(_ctx.$slots, "default", { close: vue.unref(close) })
-              ], 14, _hoisted_2$6)) : vue.createCommentVNode("", true)
+              ], 14, _hoisted_2$7)) : vue.createCommentVNode("", true)
             ]),
             _: 3
           })
@@ -1500,7 +2535,7 @@ const _hoisted_1$7 = {
   key: 0,
   class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700"
 };
-const _hoisted_2$5 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
+const _hoisted_2$6 = { class: "text-lg font-semibold text-gray-900 dark:text-white" };
 const _hoisted_3$3 = { class: "flex-1 overflow-y-auto p-4" };
 const _hoisted_4$2 = {
   key: 1,
@@ -1627,7 +2662,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
             }, [
               __props.title || __props.showClose || _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
                 vue.renderSlot(_ctx.$slots, "header", {}, () => [
-                  vue.createElementVNode("h2", _hoisted_2$5, vue.toDisplayString(__props.title), 1)
+                  vue.createElementVNode("h2", _hoisted_2$6, vue.toDisplayString(__props.title), 1)
                 ]),
                 __props.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
@@ -1656,7 +2691,7 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$6 = { "aria-label": "Breadcrumb" };
-const _hoisted_2$4 = { class: "flex items-center flex-wrap gap-1 text-sm" };
+const _hoisted_2$5 = { class: "flex items-center flex-wrap gap-1 text-sm" };
 const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   __name: "Breadcrumb",
   props: {
@@ -1669,7 +2704,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$6, [
-        vue.createElementVNode("ol", _hoisted_2$4, [
+        vue.createElementVNode("ol", _hoisted_2$5, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item, index2) => {
             return vue.openBlock(), vue.createElementBlock("li", {
               key: index2,
@@ -1745,7 +2780,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$4 = ["id", "disabled", "aria-expanded", "aria-controls"];
-const _hoisted_2$3 = { class: "flex items-center gap-2 font-medium" };
+const _hoisted_2$4 = { class: "flex items-center gap-2 font-medium" };
 const _hoisted_3$2 = ["id", "aria-labelledby"];
 const _hoisted_4$1 = { class: "px-4 py-3 bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-300" };
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
@@ -1782,7 +2817,7 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           "aria-controls": panelId.value,
           onClick: toggle
         }, [
-          vue.createElementVNode("span", _hoisted_2$3, [
+          vue.createElementVNode("span", _hoisted_2$4, [
             __props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(vue$1.Icon), {
               key: 0,
               icon: __props.icon,
@@ -1829,7 +2864,7 @@ const _hoisted_1$3 = {
   key: 0,
   class: "relative"
 };
-const _hoisted_2$2 = { class: "flex items-start gap-4" };
+const _hoisted_2$3 = { class: "flex items-start gap-4" };
 const _hoisted_3$1 = { class: "flex-1 min-w-0 pt-0.5" };
 const _hoisted_4 = { class: "flex items-center justify-between gap-2" };
 const _hoisted_5 = { class: "text-sm font-medium text-gray-900 dark:text-white" };
@@ -1908,7 +2943,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
               key: 0,
               class: vue.normalizeClass(["absolute left-4 top-8 w-0.5 h-full -ml-px", getStatusClasses(item.status).line])
             }, null, 2)) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_2$2, [
+            vue.createElementVNode("div", _hoisted_2$3, [
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(["relative z-10 flex items-center justify-center size-8 rounded-full shrink-0", getStatusClasses(item.status).dot])
               }, [
@@ -1961,7 +2996,7 @@ const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$2 = ["aria-label"];
-const _hoisted_2$1 = {
+const _hoisted_2$2 = {
   key: 0,
   class: "text-sm font-medium"
 };
@@ -1976,7 +3011,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { isDark, toggle } = useDarkMode.useDarkMode({ storageKey: props.storageKey });
+    const { isDark, toggle } = usePagination.useDarkMode({ storageKey: props.storageKey });
     const sizeClasses = {
       sm: { button: "p-1.5", icon: "size-4" },
       md: { button: "p-2", icon: "size-5" },
@@ -2000,129 +3035,258 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
           icon: vue.unref(isDark) ? __props.darkIcon : __props.lightIcon,
           class: vue.normalizeClass(sizeClasses[__props.size].icon)
         }, null, 8, ["icon", "class"]),
-        __props.showLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString(vue.unref(isDark) ? "Dark" : "Light"), 1)) : vue.createCommentVNode("", true)
+        __props.showLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, vue.toDisplayString(vue.unref(isDark) ? "Dark" : "Light"), 1)) : vue.createCommentVNode("", true)
       ], 10, _hoisted_1$2);
     };
   }
 });
-const _hoisted_1$1 = {
-  key: 0,
+const _hoisted_1$1 = { key: 0 };
+const _hoisted_2$1 = {
+  key: 1,
   class: "text-gray-400"
 };
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-  __name: "StatsCard",
+  __name: "StatItem",
   props: {
     label: {},
     value: {},
     icon: {},
+    iconPosition: { default: "top" },
     change: {},
     changeLabel: {},
+    trend: {},
+    trendOnly: { type: Boolean, default: false },
+    size: { default: "md" },
     variant: { default: "default" },
-    color: { default: "primary" }
+    color: { default: "primary" },
+    clickable: { type: Boolean, default: false },
+    centered: { type: Boolean },
+    cardClass: {},
+    iconClass: {},
+    valueClass: {},
+    labelClass: {}
   },
+  emits: ["click"],
   setup(__props) {
+    const props = __props;
+    const isCentered = vue.computed(() => {
+      if (props.centered !== void 0) return props.centered;
+      return props.iconPosition === "top";
+    });
+    const effectiveTrend = vue.computed(() => {
+      if (props.trend) return props.trend;
+      if (props.change === void 0) return void 0;
+      if (props.change > 0) return "up";
+      if (props.change < 0) return "down";
+      return "neutral";
+    });
+    const sizeClasses = vue.computed(() => {
+      const sizes = {
+        sm: {
+          padding: "sm",
+          icon: "size-8",
+          iconInner: "size-4",
+          value: "text-xl font-bold",
+          label: "text-xs",
+          change: "text-xs",
+          gap: "gap-1"
+        },
+        md: {
+          padding: "md",
+          icon: "size-10",
+          iconInner: "size-5",
+          value: "text-2xl sm:text-3xl font-bold",
+          label: "text-xs sm:text-sm",
+          change: "text-xs",
+          gap: "gap-2"
+        },
+        lg: {
+          padding: "lg",
+          icon: "size-12",
+          iconInner: "size-6",
+          value: "text-3xl sm:text-4xl font-bold",
+          label: "text-sm sm:text-base",
+          change: "text-sm",
+          gap: "gap-3"
+        }
+      };
+      return sizes[props.size];
+    });
+    const iconBgClasses = vue.computed(() => {
+      if (props.variant === "glass") return "bg-white/20";
+      const colors = {
+        primary: "bg-primary-100 dark:bg-primary-900/30",
+        secondary: "bg-secondary-100 dark:bg-secondary-900/30",
+        success: "bg-emerald-100 dark:bg-emerald-900/30",
+        warning: "bg-amber-100 dark:bg-amber-900/30",
+        danger: "bg-red-100 dark:bg-red-900/30",
+        info: "bg-blue-100 dark:bg-blue-900/30"
+      };
+      return colors[props.color];
+    });
+    const iconColorClasses = vue.computed(() => {
+      if (props.variant === "glass") return "text-white";
+      const colors = {
+        primary: "text-primary-600 dark:text-primary-400",
+        secondary: "text-secondary-600 dark:text-secondary-400",
+        success: "text-emerald-600 dark:text-emerald-400",
+        warning: "text-amber-600 dark:text-amber-400",
+        danger: "text-red-600 dark:text-red-400",
+        info: "text-blue-600 dark:text-blue-400"
+      };
+      return colors[props.color];
+    });
+    const valueTextClasses = vue.computed(() => {
+      if (props.variant === "glass") return "text-white";
+      return "text-gray-900 dark:text-white";
+    });
+    const labelTextClasses = vue.computed(() => {
+      if (props.variant === "glass") return "text-white/80";
+      return "text-gray-500 dark:text-gray-400";
+    });
+    const trendColorClasses = vue.computed(() => {
+      if (!effectiveTrend.value || effectiveTrend.value === "neutral") {
+        return "text-gray-500";
+      }
+      return effectiveTrend.value === "up" ? "text-emerald-500" : "text-red-500";
+    });
+    const trendIcon = vue.computed(() => {
+      if (!effectiveTrend.value || effectiveTrend.value === "neutral") {
+        return "heroicons:minus";
+      }
+      return effectiveTrend.value === "up" ? "heroicons:arrow-trending-up" : "heroicons:arrow-trending-down";
+    });
+    const cardVariant = vue.computed(() => {
+      const map = {
+        default: "default",
+        glass: "glass",
+        outline: "outline",
+        flat: "flat"
+      };
+      return map[props.variant];
+    });
+    const layoutClasses = vue.computed(() => {
+      if (props.iconPosition === "top") {
+        return isCentered.value ? "flex flex-col items-center text-center" : "flex flex-col";
+      }
+      if (props.iconPosition === "left") {
+        return "flex flex-row items-center";
+      }
+      return "flex flex-row-reverse items-center";
+    });
+    const contentClasses = vue.computed(() => {
+      if (props.iconPosition === "top") {
+        return "flex flex-col " + sizeClasses.value.gap;
+      }
+      return "flex flex-col flex-1 min-w-0 " + (props.iconPosition === "left" ? "ml-3" : "mr-3");
+    });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass([
-          "rounded-2xl p-4 text-center transition-all",
-          __props.variant === "default" && "bg-white dark:bg-slate-800 border border-gray-100 dark:border-slate-700 shadow-sm",
-          __props.variant === "glass" && "bg-white/15 backdrop-blur-sm border border-white/20",
-          __props.variant === "outline" && "border-2 border-gray-200 dark:border-slate-600",
-          __props.variant === "solid" && __props.color === "primary" && "bg-primary-500 text-white",
-          __props.variant === "solid" && __props.color === "success" && "bg-emerald-500 text-white",
-          __props.variant === "solid" && __props.color === "warning" && "bg-amber-500 text-white",
-          __props.variant === "solid" && __props.color === "danger" && "bg-red-500 text-white",
-          __props.variant === "solid" && __props.color === "info" && "bg-blue-500 text-white"
-        ])
-      }, [
-        __props.icon ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass([
-            "size-10 mx-auto mb-2 rounded-xl flex items-center justify-center",
-            __props.variant === "glass" && "bg-white/20",
-            __props.variant === "solid" && "bg-white/20",
-            __props.variant === "default" && __props.color === "primary" && "bg-primary-100 dark:bg-primary-900/30",
-            __props.variant === "default" && __props.color === "success" && "bg-emerald-100 dark:bg-emerald-900/30",
-            __props.variant === "default" && __props.color === "warning" && "bg-amber-100 dark:bg-amber-900/30",
-            __props.variant === "default" && __props.color === "danger" && "bg-red-100 dark:bg-red-900/30",
-            __props.variant === "default" && __props.color === "info" && "bg-blue-100 dark:bg-blue-900/30",
-            __props.variant === "outline" && "bg-gray-100 dark:bg-slate-700"
-          ])
-        }, [
-          vue.createVNode(vue.unref(vue$1.Icon), {
-            icon: __props.icon,
-            class: vue.normalizeClass([
-              "size-5",
-              (__props.variant === "glass" || __props.variant === "solid") && "text-white",
-              __props.variant === "default" && __props.color === "primary" && "text-primary-600 dark:text-primary-400",
-              __props.variant === "default" && __props.color === "success" && "text-emerald-600 dark:text-emerald-400",
-              __props.variant === "default" && __props.color === "warning" && "text-amber-600 dark:text-amber-400",
-              __props.variant === "default" && __props.color === "danger" && "text-red-600 dark:text-red-400",
-              __props.variant === "default" && __props.color === "info" && "text-blue-600 dark:text-blue-400",
-              __props.variant === "outline" && "text-gray-600 dark:text-gray-400"
-            ])
-          }, null, 8, ["icon", "class"])
-        ], 2)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass([
-            "text-2xl sm:text-3xl font-bold",
-            (__props.variant === "glass" || __props.variant === "solid") && "text-white",
-            (__props.variant === "default" || __props.variant === "outline") && "text-gray-900 dark:text-white"
-          ])
-        }, [
-          vue.renderSlot(_ctx.$slots, "value", {}, () => [
-            vue.createTextVNode(vue.toDisplayString(__props.value), 1)
-          ])
-        ], 2),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass([
-            "text-xs sm:text-sm",
-            __props.variant === "glass" && "text-white/80",
-            __props.variant === "solid" && "text-white/90",
-            (__props.variant === "default" || __props.variant === "outline") && "text-gray-500 dark:text-gray-400"
-          ])
-        }, [
-          vue.renderSlot(_ctx.$slots, "label", {}, () => [
-            vue.createTextVNode(vue.toDisplayString(__props.label), 1)
-          ])
-        ], 2),
-        __props.change !== void 0 ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: vue.normalizeClass([
-            "mt-2 text-xs font-medium inline-flex items-center gap-1",
-            __props.change >= 0 ? "text-emerald-500" : "text-red-500"
-          ])
-        }, [
-          vue.createVNode(vue.unref(vue$1.Icon), {
-            icon: __props.change >= 0 ? "heroicons:arrow-trending-up" : "heroicons:arrow-trending-down",
-            class: "size-3.5"
-          }, null, 8, ["icon"]),
-          vue.createElementVNode("span", null, vue.toDisplayString(__props.change >= 0 ? "+" : "") + vue.toDisplayString(__props.change) + "%", 1),
-          __props.changeLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, vue.toDisplayString(__props.changeLabel), 1)) : vue.createCommentVNode("", true)
-        ], 2)) : vue.createCommentVNode("", true)
-      ], 2);
+      return vue.openBlock(), vue.createBlock(_sfc_main$z, {
+        variant: cardVariant.value,
+        padding: sizeClasses.value.padding,
+        clickable: __props.clickable,
+        shadow: __props.variant === "glass" ? "none" : "sm",
+        border: __props.variant === "outline" ? "default" : "none",
+        rounded: "xl",
+        "header-divider": false,
+        class: vue.normalizeClass(__props.cardClass),
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(layoutClasses.value)
+          }, [
+            __props.icon ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass([
+                "rounded-xl flex items-center justify-center flex-shrink-0",
+                sizeClasses.value.icon,
+                iconBgClasses.value,
+                __props.iconPosition === "top" && "mb-2",
+                __props.iconClass
+              ])
+            }, [
+              vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+                vue.createVNode(vue.unref(vue$1.Icon), {
+                  icon: __props.icon,
+                  class: vue.normalizeClass([sizeClasses.value.iconInner, iconColorClasses.value])
+                }, null, 8, ["icon", "class"])
+              ])
+            ], 2)) : vue.createCommentVNode("", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(contentClasses.value)
+            }, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([sizeClasses.value.value, valueTextClasses.value, __props.valueClass])
+              }, [
+                vue.renderSlot(_ctx.$slots, "value", {}, () => [
+                  vue.createTextVNode(vue.toDisplayString(__props.value), 1)
+                ])
+              ], 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass([sizeClasses.value.label, labelTextClasses.value, __props.labelClass])
+              }, [
+                vue.renderSlot(_ctx.$slots, "label", {}, () => [
+                  vue.createTextVNode(vue.toDisplayString(__props.label), 1)
+                ])
+              ], 2),
+              __props.change !== void 0 || __props.trend ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                class: vue.normalizeClass([
+                  "mt-1 font-medium inline-flex items-center gap-1",
+                  sizeClasses.value.change,
+                  trendColorClasses.value
+                ])
+              }, [
+                vue.createVNode(vue.unref(vue$1.Icon), {
+                  icon: trendIcon.value,
+                  class: "size-3.5"
+                }, null, 8, ["icon"]),
+                !__props.trendOnly && __props.change !== void 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, vue.toDisplayString(__props.change >= 0 ? "+" : "") + vue.toDisplayString(__props.change) + "% ", 1)) : vue.createCommentVNode("", true),
+                __props.changeLabel ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString(__props.changeLabel), 1)) : vue.createCommentVNode("", true)
+              ], 2)) : vue.createCommentVNode("", true)
+            ], 2)
+          ], 2),
+          vue.renderSlot(_ctx.$slots, "extra")
+        ]),
+        _: 3
+      }, 8, ["variant", "padding", "clickable", "shadow", "border", "class"]);
     };
   }
 });
 const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
-  __name: "StatsGrid",
+  __name: "Stats",
   props: {
     stats: {},
     cols: {},
+    gap: { default: "md" },
     variant: { default: "default" },
+    size: { default: "md" },
+    iconPosition: { default: "top" },
     color: { default: "primary" }
   },
   setup(__props) {
     return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["grid gap-3 sm:gap-4", [
+        class: vue.normalizeClass(["grid", [
+          // Gap classes
+          __props.gap === "sm" && "gap-2 sm:gap-3",
+          __props.gap === "md" && "gap-3 sm:gap-4",
+          __props.gap === "lg" && "gap-4 sm:gap-6",
+          // Column classes
+          __props.cols === 1 && "grid-cols-1",
           __props.cols === 2 && "grid-cols-2",
           __props.cols === 3 && "grid-cols-3",
           __props.cols === 4 && "grid-cols-2 sm:grid-cols-4",
-          !__props.cols && __props.stats.length === 2 && "grid-cols-2",
-          !__props.cols && __props.stats.length === 3 && "grid-cols-3",
-          !__props.cols && __props.stats.length === 4 && "grid-cols-2 sm:grid-cols-4",
-          !__props.cols && __props.stats.length > 4 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
+          __props.cols === 5 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5",
+          __props.cols === 6 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6",
+          // Auto columns based on stats length
+          !__props.cols && ((_a = __props.stats) == null ? void 0 : _a.length) === 1 && "grid-cols-1",
+          !__props.cols && ((_b = __props.stats) == null ? void 0 : _b.length) === 2 && "grid-cols-2",
+          !__props.cols && ((_c = __props.stats) == null ? void 0 : _c.length) === 3 && "grid-cols-3",
+          !__props.cols && ((_d = __props.stats) == null ? void 0 : _d.length) === 4 && "grid-cols-2 sm:grid-cols-4",
+          !__props.cols && __props.stats && __props.stats.length > 4 && "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
         ]])
       }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.stats, (stat, index2) => {
@@ -2133,10 +3297,14 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             icon: stat.icon,
             change: stat.change,
             "change-label": stat.changeLabel,
+            trend: stat.trend,
             variant: __props.variant,
-            color: __props.color
-          }, null, 8, ["label", "value", "icon", "change", "change-label", "variant", "color"]);
-        }), 128))
+            size: __props.size,
+            "icon-position": __props.iconPosition,
+            color: stat.color || __props.color
+          }, null, 8, ["label", "value", "icon", "change", "change-label", "trend", "variant", "size", "icon-position", "color"]);
+        }), 128)),
+        vue.renderSlot(_ctx.$slots, "default")
       ], 2);
     };
   }
@@ -2277,26 +3445,42 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-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-DYxh-wFx.cjs.map
+exports.TableContextKey = TableContextKey;
+exports._sfc_main = _sfc_main$A;
+exports._sfc_main$1 = _sfc_main$z;
+exports._sfc_main$10 = _sfc_main$q;
+exports._sfc_main$11 = _sfc_main$p;
+exports._sfc_main$12 = _sfc_main$o;
+exports._sfc_main$13 = _sfc_main$n;
+exports._sfc_main$14 = _sfc_main$m;
+exports._sfc_main$15 = _sfc_main$l;
+exports._sfc_main$16 = _sfc_main$k;
+exports._sfc_main$17 = _sfc_main$j;
+exports._sfc_main$18 = _sfc_main$i;
+exports._sfc_main$19 = _sfc_main$h;
+exports._sfc_main$2 = _sfc_main$y;
+exports._sfc_main$20 = _sfc_main$g;
+exports._sfc_main$21 = _sfc_main$f;
+exports._sfc_main$22 = _sfc_main$e;
+exports._sfc_main$23 = _sfc_main$d;
+exports._sfc_main$24 = _sfc_main$c;
+exports._sfc_main$25 = _sfc_main$b;
+exports._sfc_main$26 = _sfc_main$a;
+exports._sfc_main$27 = _sfc_main$9;
+exports._sfc_main$28 = _sfc_main$8;
+exports._sfc_main$29 = _sfc_main$7;
+exports._sfc_main$3 = _sfc_main$x;
+exports._sfc_main$30 = _sfc_main$6;
+exports._sfc_main$31 = _sfc_main$5;
+exports._sfc_main$32 = _sfc_main$4;
+exports._sfc_main$33 = _sfc_main$3;
+exports._sfc_main$34 = _sfc_main$2;
+exports._sfc_main$35 = _sfc_main$1;
+exports._sfc_main$36 = _sfc_main;
+exports._sfc_main$4 = _sfc_main$w;
+exports._sfc_main$5 = _sfc_main$v;
+exports._sfc_main$6 = _sfc_main$u;
+exports._sfc_main$7 = _sfc_main$t;
+exports._sfc_main$8 = _sfc_main$s;
+exports._sfc_main$9 = _sfc_main$r;
+//# sourceMappingURL=FilterTabs.vue_vue_type_script_setup_true_lang-l8lJzwoY.cjs.map