vlite3 0.6.1 → 0.6.3

package/components/Form/FormFields.vue2.js

@@ -33,17 +33,17 @@ const W = {
   },
   emits: ["change", "addonAction"],
   setup(c, { emit: N }) {
-    const a = c, y = N, L = O(() => {
+    const a = c, h = N, L = O(() => {
       if (a.className) return a.className;
-    }), k = (t) => M(a.values, t.name), h = (t) => a.errors[t.name] || "", z = (t) => a.isFieldVisible ? a.isFieldVisible(t) : !0, D = (t) => a.isFieldDisabled ? a.isFieldDisabled(t) : t.disabled === !0, R = (t) => a.isFieldReadonly ? a.isFieldReadonly(t) : t.readonly === !0, o = (t) => t.labelI18n ? Q(t.labelI18n) : t.label, x = (t) => {
+    }), k = (t) => M(a.values, t.name), y = (t) => a.errors[t.name] || "", z = (t) => a.isFieldVisible ? a.isFieldVisible(t) : !0, D = (t) => a.isFieldDisabled ? a.isFieldDisabled(t) : t.disabled === !0, R = (t) => a.isFieldReadonly ? a.isFieldReadonly(t) : t.readonly === !0, o = (t) => t.labelI18n ? Q(t.labelI18n) : t.label, x = (t) => {
       if (t)
         return p(t), t;
     }, $ = (t, n) => {
-      y("change", t.name, n);
+      h("change", t.name, n);
     }, q = (t) => t.itemClass || "", B = (t, n) => {
-      y("change", t, n);
+      h("change", t, n);
     }, I = (t) => {
-      y("addonAction", t);
+      h("addonAction", t);
     }, v = j({}), U = (t) => {
       v.value[t] = !0;
     }, E = (t) => {
@@ -96,7 +96,7 @@ const W = {
               for: e.name,
               class: i([
                 "absolute transition-all duration-200 ease-in-out pointer-events-none z-20",
-                f(e) ? "-top-2.5 left-3 text-xs bg-background px-1 text-primary shadow-[0_4px_4px_-4px_bg-background]" : `top-2.5 text-sm text-muted-foreground/70 ${S(e)}`
+                f(e) ? "-top-2.5 left-3 text-xs bg-background px-1 text-black shadow-[0_4px_4px_-4px_bg-background]" : `top-2.5 text-sm text-muted-foreground/70 ${S(e)}`
               ])
             }, [
               _(p)(o(e)) ? (s(), d(w(x(o(e))), { key: 0 })) : (s(), r(l, { key: 1 }, [
@@ -119,7 +119,7 @@ const W = {
               rounded: c.rounded,
               disabled: D(e),
               readonly: R(e),
-              error: h(e),
+              error: y(e),
               isUpdate: c.isUpdate,
               onChange: (F) => $(e, F),
               onAddonChange: B,
@@ -137,7 +137,7 @@ const W = {
             ]),
             _: 2
           }, 1032, ["for"])) : u("", !0),
-          h(e) ? (s(), r("p", te, m(h(e)), 1)) : u("", !0)
+          y(e) ? (s(), r("p", te, m(y(e)), 1)) : u("", !0)
         ], 2)) : u("", !0)
       ], 64))), 128))
     ], 2));

package/components/Input.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as Y, computed as a, useSlots as Z, ref as b, onMounted as _, nextTick as z, openBlock as d, createElementBlock as u, normalizeClass as r, createBlock as R, withCtx as ee, createTextVNode as $, toDisplayString as w, createCommentVNode as i, createElementVNode as A, renderSlot as T, createVNode as C } from "vue";
+import { defineComponent as Y, computed as a, useSlots as Z, ref as b, onMounted as _, nextTick as z, openBlock as d, createElementBlock as u, normalizeClass as r, createBlock as R, withCtx as ee, createTextVNode as $, toDisplayString as w, createCommentVNode as i, createElementVNode as A, renderSlot as T, createVNode as k } from "vue";
 import v from "./Icon.vue.js";
 import te from "./Label.vue.js";
 import le from "./Textarea.vue.js";
@@ -40,7 +40,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "ma
   setup(t, { emit: D }) {
     const e = t, c = D, s = a(() => e.labelI18n ? E(e.labelI18n) : e.label), I = a(
       () => e.placeholderI18n ? E(e.placeholderI18n) : e.placeholder
-    ), g = Z(), m = b(null), x = b(!1), y = b(!1), H = a(() => e.type === "password" && x.value ? "text" : e.type), k = a(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), V = a(() => h.value || k.value || y.value), p = a(() => !!e.addonLeft || !!g["addon-left"]), B = a(() => !!e.addonRight || !!g["addon-right"]), U = a(() => [
+    ), g = Z(), m = b(null), x = b(!1), y = b(!1), H = a(() => e.type === "password" && x.value ? "text" : e.type), C = a(() => e.modelValue !== "" && e.modelValue !== null && e.modelValue !== void 0), V = a(() => h.value || C.value || y.value), p = a(() => !!e.addonLeft || !!g["addon-left"]), B = a(() => !!e.addonRight || !!g["addon-right"]), U = a(() => [
       "relative w-full",
       e.class,
       e.labelPosition === "left" ? "flex items-center gap-4" : "",
@@ -49,11 +49,11 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "ma
       " "
     )), S = a(() => {
       const l = "block w-full bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none relative focus:z-10", n = {
-        solid: "bg-muted border-transparent focus-visible:border-primary",
-        outline: "border border-input focus-visible:border-primary",
-        "outline-b": "border-b border-input bg-transparent rounded-none focus-visible:border-primary",
+        solid: "bg-muted border-transparent focus-visible:border-black",
+        outline: "border border-input focus-visible:border-black",
+        "outline-b": "border-b border-input bg-transparent rounded-none focus-visible:border-black",
         transparent: "border-none bg-transparent shadow-none",
-        floating: "border border-input focus-visible:border-primary"
+        floating: "border border-input focus-visible:border-black"
       }, f = {
         sm: "h-7.5 text-xs",
         md: "h-9 text-sm",
@@ -77,7 +77,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "ma
         o,
         e.error ? "border-destructive focus-visible:ring-destructive" : "",
         e.icon ? "pl-9" : M && !p.value ? "pl-0" : "",
-        e.showClearButton && k.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : M && !B.value ? "pr-0" : "",
+        e.showClearButton && C.value || e.type === "password" || e.loading || e.iconRight ? "pr-9" : M && !B.value ? "pr-0" : "",
         // Keyframe name used to detect browser autofill via animationstart event
         e.variant === "floating" ? "autofill-detect" : "",
         e.inputClass
@@ -188,7 +188,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "ma
             for: s.value,
             class: r([
               "absolute transition-all duration-200 ease-in-out pointer-events-none z-20",
-              V.value ? "-top-2.5 left-3 text-xs bg-background px-1 text-primary shadow-[0_4px_4px_-4px_bg-background] translate-y-0" : t.type === "textarea" ? `top-2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"} translate-y-0` : `top-1/2 -translate-y-1/2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"}`
+              V.value ? "-top-2.5 left-3 text-xs bg-background px-1 text-black shadow-[0_4px_4px_-4px_bg-background] translate-y-0" : t.type === "textarea" ? `top-2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"} translate-y-0` : `top-1/2 -translate-y-1/2 text-sm text-muted-foreground/70 ${t.icon ? "left-9" : "left-3"}`
             ])
           }, w(s.value), 11, ne)) : i("", !0),
           t.type === "textarea" ? (d(), R(le, {
@@ -226,7 +226,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "ma
               t.disabled ? "opacity-50" : ""
             ])
           }, [
-            C(v, {
+            k(v, {
               icon: t.icon,
               class: r(["h-4 w-4", t.iconClass])
             }, null, 8, ["icon", "class"])
@@ -245,7 +245,7 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "ma
               ]),
               onClick: n[1] || (n[1] = (f) => !t.disabled && c("click:icon-right", f))
             }, [
-              C(v, {
+              k(v, {
                 icon: t.iconRight,
                 class: r(["h-4 w-4", t.iconRightClass])
               }, null, 8, ["icon", "class"])
@@ -257,19 +257,19 @@ const ne = ["for"], oe = ["type", "value", "placeholder", "disabled", "min", "ma
               class: "flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none",
               onClick: O
             }, [
-              C(v, {
+              k(v, {
                 icon: x.value ? "lucide:eye-off" : "lucide:eye",
                 class: "h-4 w-4"
               }, null, 8, ["icon"])
             ])) : i("", !0),
-            t.showClearButton && k.value && !t.disabled && !t.loading && t.type !== "textarea" && t.type !== "password" && (h.value || j.value) ? (d(), u("button", {
+            t.showClearButton && C.value && !t.disabled && !t.loading && t.type !== "textarea" && t.type !== "password" && (h.value || j.value) ? (d(), u("button", {
               key: 3,
               type: "button",
               tabindex: "-1",
               class: "flex items-center justify-center text-muted-foreground hover:text-foreground focus:outline-none transition-opacity duration-200",
               onClick: Q
             }, [
-              C(v, {
+              k(v, {
                 icon: "lucide:x-circle",
                 class: "h-4 w-4"
               })

package/components/Navbar/NavbarTabs.vue.js

@@ -70,9 +70,9 @@ const U = {
       ghost: "bg-accent text-accent-foreground"
     }, V = {
       line: "text-muted-foreground border-b-2 border-transparent hover:text-foreground hover:border-border",
-      pill: "text-muted-foreground hover:text-foreground hover:bg-accent/60",
-      solid: "text-muted-foreground hover:text-foreground hover:bg-accent",
-      ghost: "text-muted-foreground hover:text-foreground hover:bg-accent/60"
+      pill: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+      solid: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+      ghost: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
     }, x = (o) => {
       const t = h.path;
       if (!o.to) return !1;

package/components/Pagination/Pagination.vue.d.ts

@@ -10,6 +10,7 @@ declare const _default: import('vue').DefineComponent<PaginationProps, {}, {}, {
     "onUpdate:itemsPerPage"?: (value: number) => any;
     "onChange:itemsPerPage"?: (value: number) => any;
 }>, {
+    rounded: import('.').PaginationRounded;
     disabled: boolean;
     itemsPerPage: number;
     currentPage: number;
@@ -19,5 +20,6 @@ declare const _default: import('vue').DefineComponent<PaginationProps, {}, {}, {
     showItemsPerPage: boolean;
     itemsPerPageOptions: number[];
     navType: "text" | "icon";
+    activeVariant: import('.').PaginationVariant;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/components/Pagination/Pagination.vue.js

@@ -1,26 +1,26 @@
-import { defineComponent as A, computed as u, openBlock as i, createElementBlock as r, normalizeClass as z, createElementVNode as g, toDisplayString as l, Fragment as b, renderList as j, createVNode as x, createCommentVNode as f, createTextVNode as y, createBlock as w, withCtx as I } from "vue";
-import F from "../Icon.vue.js";
-import d from "../Button.vue.js";
-import { $t as h } from "../../utils/i18n.js";
-const q = {
+import { defineComponent as q, computed as u, openBlock as r, createElementBlock as l, normalizeClass as i, createElementVNode as m, toDisplayString as o, Fragment as k, renderList as D, createVNode as C, createCommentVNode as h, createTextVNode as b, createBlock as x, withCtx as z } from "vue";
+import G from "../Icon.vue.js";
+import c from "../Button.vue.js";
+import { $t as y } from "../../utils/i18n.js";
+const H = {
   key: 0,
   class: "flex flex-wrap items-center justify-center md:justify-start gap-4 order-2 md:order-1"
-}, G = {
+}, J = {
   key: 0,
   class: "flex items-center gap-2 text-sm text-muted-foreground"
-}, H = { class: "whitespace-nowrap" }, J = { class: "relative" }, K = ["value", "disabled"], Q = ["value"], U = { class: "whitespace-nowrap" }, W = {
+}, K = { class: "whitespace-nowrap" }, Q = { class: "relative" }, U = ["value", "disabled"], W = ["value"], X = { class: "whitespace-nowrap" }, Y = {
   key: 1,
   class: "hidden md:block w-px h-4 bg-border"
-}, X = {
+}, Z = {
   key: 2,
   class: "text-sm text-muted-foreground whitespace-nowrap"
-}, Y = { class: "font-medium text-foreground" }, Z = { class: "font-medium text-foreground" }, p = {
+}, p = { class: "font-medium text-foreground" }, _ = { class: "font-medium text-foreground" }, ee = {
   class: "flex items-center justify-center gap-1 order-1 md:order-2",
   "aria-label": "Pagination"
-}, _ = {
+}, te = {
   key: 0,
-  class: "px-2 text-gray-400 select-none"
-}, se = /* @__PURE__ */ A({
+  class: "px-2 text-muted-foreground select-none"
+}, le = /* @__PURE__ */ q({
   __name: "Pagination",
   props: {
     currentPage: { default: 1 },
@@ -33,38 +33,40 @@ const q = {
     itemsPerPage: { default: 10 },
     itemsPerPageOptions: { default: () => [10, 25, 50, 100] },
     navType: { default: "text" },
-    alignment: {}
+    alignment: {},
+    activeVariant: { default: "solid" },
+    rounded: { default: "full" }
   },
   emits: ["update:currentPage", "change", "update:itemsPerPage", "change:itemsPerPage"],
-  setup(e, { emit: T }) {
-    const s = e, c = T, o = (t) => {
-      s.disabled || t < 1 || t > s.totalPages || t !== s.currentPage && (c("update:currentPage", t), c("change", t));
-    }, D = (t) => {
-      const n = t.target, a = parseInt(n.value);
-      c("update:itemsPerPage", a), c("change:itemsPerPage", a), c("update:currentPage", 1), c("change", 1);
-    }, N = u(() => {
-      if (s.totalItems * 2 + 5 >= s.totalPages)
-        return k(1, s.totalPages);
-      const n = Math.max(s.currentPage - s.totalItems, 1), a = Math.min(s.currentPage + s.totalItems, s.totalPages), m = n > 2, P = a < s.totalPages - 2, C = 1, S = s.totalPages;
-      if (!m && P) {
-        let v = 3 + 2 * s.totalItems;
-        return [...k(1, v), "DOTS", S];
+  setup(e, { emit: N }) {
+    const n = e, f = N, g = (t) => {
+      n.disabled || t < 1 || t > n.totalPages || t !== n.currentPage && (f("update:currentPage", t), f("change", t));
+    }, O = (t) => {
+      const s = t.target, a = parseInt(s.value);
+      f("update:itemsPerPage", a), f("change:itemsPerPage", a), f("update:currentPage", 1), f("change", 1);
+    }, B = u(() => {
+      if (n.totalItems * 2 + 5 >= n.totalPages)
+        return I(1, n.totalPages);
+      const s = Math.max(n.currentPage - n.totalItems, 1), a = Math.min(n.currentPage + n.totalItems, n.totalPages), v = s > 2, P = a < n.totalPages - 2, $ = 1, j = n.totalPages;
+      if (!v && P) {
+        const w = 3 + 2 * n.totalItems;
+        return [...I(1, w), "DOTS", j];
       }
-      if (m && !P) {
-        let v = 3 + 2 * s.totalItems, $ = k(s.totalPages - v + 1, s.totalPages);
-        return [C, "DOTS", ...$];
+      if (v && !P) {
+        const w = 3 + 2 * n.totalItems, T = I(n.totalPages - w + 1, n.totalPages);
+        return [$, "DOTS", ...T];
       }
-      if (m && P) {
-        let v = k(n, a);
-        return [C, "DOTS", ...v, "DOTS", S];
+      if (v && P) {
+        const w = I(s, a);
+        return [$, "DOTS", ...w, "DOTS", j];
       }
       return [];
-    }), k = (t, n) => {
-      let a = n - t + 1;
-      return Array.from({ length: a }, (m, P) => P + t);
-    }, O = u(() => {
-      if (s.alignment)
-        switch (s.alignment) {
+    }), I = (t, s) => {
+      const a = s - t + 1;
+      return Array.from({ length: a }, (v, P) => P + t);
+    }, R = u(() => {
+      if (n.alignment)
+        switch (n.alignment) {
           case "start":
             return "justify-start";
           case "end":
@@ -74,156 +76,199 @@ const q = {
           default:
             return "justify-center";
         }
-      return s.showPageInfo || s.showItemsPerPage ? "justify-between" : "justify-center";
-    }), B = u(() => {
-      const t = h("vlite.pagination.show");
+      return n.showPageInfo || n.showItemsPerPage ? "justify-between" : "justify-center";
+    }), d = u(() => {
+      switch (n.rounded) {
+        case "none":
+          return "rounded-none";
+        case "sm":
+          return "rounded-sm";
+        case "lg":
+          return "rounded-lg";
+        case "full":
+          return "rounded-full";
+        default:
+          return "rounded-md";
+      }
+    }), S = u(() => {
+      switch (n.activeVariant) {
+        case "solid":
+          return {
+            variant: "primary",
+            extraClass: "pointer-events-none z-10"
+          };
+        case "ghost":
+          return {
+            variant: "ghost",
+            extraClass: "bg-accent text-accent-foreground pointer-events-none z-10 font-semibold"
+          };
+        default:
+          return {
+            variant: "outline",
+            extraClass: "bg-white text-primary border-primary ring-1 ring-primary pointer-events-none z-10"
+          };
+      }
+    }), V = u(() => {
+      const t = y("vlite.pagination.show");
       return t !== "vlite.pagination.show" ? t : "Show";
-    }), R = u(() => {
-      const t = h("vlite.pagination.perPage");
-      return t !== "vlite.pagination.perPage" ? t : "per page";
     }), E = u(() => {
-      const t = h("vlite.pagination.page");
+      const t = y("vlite.pagination.perPage");
+      return t !== "vlite.pagination.perPage" ? t : "per page";
+    }), A = u(() => {
+      const t = y("vlite.pagination.page");
       return t !== "vlite.pagination.page" ? t : "Page";
-    }), V = u(() => {
-      const t = h("vlite.pagination.of");
-      return t !== "vlite.pagination.of" ? t : "of";
     }), L = u(() => {
-      const t = h("vlite.pagination.previous");
-      return t !== "vlite.pagination.previous" ? t : "Previous";
+      const t = y("vlite.pagination.of");
+      return t !== "vlite.pagination.of" ? t : "of";
     }), M = u(() => {
-      const t = h("vlite.pagination.next");
+      const t = y("vlite.pagination.previous");
+      return t !== "vlite.pagination.previous" ? t : "Previous";
+    }), F = u(() => {
+      const t = y("vlite.pagination.next");
       return t !== "vlite.pagination.next" ? t : "Next";
     });
-    return (t, n) => (i(), r("div", {
-      class: z(["flex flex-col md:flex-row items-center gap-4 w-full", [O.value]])
+    return (t, s) => (r(), l("div", {
+      class: i(["flex flex-col md:flex-row items-center gap-4 w-full", [R.value]])
     }, [
-      e.showPageInfo || e.showItemsPerPage ? (i(), r("div", q, [
-        e.showItemsPerPage ? (i(), r("div", G, [
-          g("span", H, l(B.value), 1),
-          g("div", J, [
-            g("select", {
+      e.showPageInfo || e.showItemsPerPage ? (r(), l("div", H, [
+        e.showItemsPerPage ? (r(), l("div", J, [
+          m("span", K, o(V.value), 1),
+          m("div", Q, [
+            m("select", {
               value: e.itemsPerPage,
               class: "appearance-none bg-background border border-border hover:border-accent text-foreground py-1 pl-2 pr-6 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
               disabled: e.disabled,
-              onChange: D
+              onChange: O
             }, [
-              (i(!0), r(b, null, j(e.itemsPerPageOptions, (a) => (i(), r("option", {
+              (r(!0), l(k, null, D(e.itemsPerPageOptions, (a) => (r(), l("option", {
                 key: a,
                 value: a
-              }, l(a), 9, Q))), 128))
-            ], 40, K),
-            x(F, {
+              }, o(a), 9, W))), 128))
+            ], 40, U),
+            C(G, {
               icon: "lucide:chevron-down",
               class: "absolute right-1.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none"
             })
           ]),
-          g("span", U, l(R.value), 1)
-        ])) : f("", !0),
-        e.showItemsPerPage && e.showPageInfo ? (i(), r("div", W)) : f("", !0),
-        e.showPageInfo ? (i(), r("span", X, [
-          y(l(E.value) + " ", 1),
-          g("span", Y, l(e.currentPage), 1),
-          y(" " + l(V.value) + " ", 1),
-          g("span", Z, l(e.totalPages), 1)
-        ])) : f("", !0)
-      ])) : f("", !0),
-      g("nav", p, [
-        e.showEdges ? (i(), w(d, {
+          m("span", X, o(E.value), 1)
+        ])) : h("", !0),
+        e.showItemsPerPage && e.showPageInfo ? (r(), l("div", Y)) : h("", !0),
+        e.showPageInfo ? (r(), l("span", Z, [
+          b(o(A.value) + " ", 1),
+          m("span", p, o(e.currentPage), 1),
+          b(" " + o(L.value) + " ", 1),
+          m("span", _, o(e.totalPages), 1)
+        ])) : h("", !0)
+      ])) : h("", !0),
+      m("nav", ee, [
+        e.showEdges ? (r(), x(c, {
           key: 0,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevrons-left",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === 1,
-          onClick: n[0] || (n[0] = (a) => o(1))
-        }, null, 8, ["disabled"])) : f("", !0),
-        e.navType === "icon" ? (i(), w(d, {
+          onClick: s[0] || (s[0] = (a) => g(1))
+        }, null, 8, ["class", "disabled"])) : h("", !0),
+        e.navType === "icon" ? (r(), x(c, {
           key: 1,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevron-left",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === 1,
-          onClick: n[1] || (n[1] = (a) => o(e.currentPage - 1))
-        }, null, 8, ["disabled"])) : (i(), r(b, { key: 2 }, [
-          x(d, {
+          onClick: s[1] || (s[1] = (a) => g(e.currentPage - 1))
+        }, null, 8, ["class", "disabled"])) : (r(), l(k, { key: 2 }, [
+          C(c, {
             variant: "ghost",
             size: "sm",
-            class: "hidden sm:flex",
+            class: i(["hidden sm:flex", d.value]),
             disabled: e.disabled || e.currentPage === 1,
-            onClick: n[2] || (n[2] = (a) => o(e.currentPage - 1))
+            onClick: s[2] || (s[2] = (a) => g(e.currentPage - 1))
           }, {
-            default: I(() => [
-              y(l(L.value), 1)
+            default: z(() => [
+              b(o(M.value), 1)
             ]),
             _: 1
-          }, 8, ["disabled"]),
-          x(d, {
+          }, 8, ["class", "disabled"]),
+          C(c, {
             variant: "ghost",
             size: "sm",
             icon: "lucide:chevron-left",
-            class: "flex sm:hidden",
+            class: i(["flex sm:hidden", d.value]),
             disabled: e.disabled || e.currentPage === 1,
-            onClick: n[3] || (n[3] = (a) => o(e.currentPage - 1))
-          }, null, 8, ["disabled"])
+            onClick: s[3] || (s[3] = (a) => g(e.currentPage - 1))
+          }, null, 8, ["class", "disabled"])
         ], 64)),
-        (i(!0), r(b, null, j(N.value, (a, m) => (i(), r(b, { key: m }, [
-          a === "DOTS" ? (i(), r("div", _, "...")) : (i(), w(d, {
+        (r(!0), l(k, null, D(B.value, (a, v) => (r(), l(k, { key: v }, [
+          a === "DOTS" ? (r(), l("div", te, "...")) : a === e.currentPage ? (r(), x(c, {
             key: 1,
             size: "sm",
-            variant: a === e.currentPage ? "outline" : "ghost",
-            class: z({
-              "bg-white text-primary border-primary ring-1 ring-primary pointer-events-none z-10": a === e.currentPage,
-              "text-gray-600 hover:bg-gray-100": a !== e.currentPage
-            }),
+            variant: S.value.variant,
+            class: i([S.value.extraClass, d.value]),
+            disabled: e.disabled
+          }, {
+            default: z(() => [
+              b(o(a), 1)
+            ]),
+            _: 2
+          }, 1032, ["variant", "class", "disabled"])) : (r(), x(c, {
+            key: 2,
+            size: "sm",
+            variant: "ghost",
+            class: i(["text-gray-600 hover:bg-gray-100", d.value]),
             disabled: e.disabled,
-            onClick: (P) => o(a)
+            onClick: (P) => g(a)
           }, {
-            default: I(() => [
-              y(l(a), 1)
+            default: z(() => [
+              b(o(a), 1)
             ]),
             _: 2
-          }, 1032, ["variant", "class", "disabled", "onClick"]))
+          }, 1032, ["class", "disabled", "onClick"]))
         ], 64))), 128)),
-        e.navType === "icon" ? (i(), w(d, {
+        e.navType === "icon" ? (r(), x(c, {
           key: 3,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevron-right",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === e.totalPages,
-          onClick: n[4] || (n[4] = (a) => o(e.currentPage + 1))
-        }, null, 8, ["disabled"])) : (i(), r(b, { key: 4 }, [
-          x(d, {
+          onClick: s[4] || (s[4] = (a) => g(e.currentPage + 1))
+        }, null, 8, ["class", "disabled"])) : (r(), l(k, { key: 4 }, [
+          C(c, {
             variant: "ghost",
             size: "sm",
-            class: "hidden sm:flex",
+            class: i(["hidden sm:flex", d.value]),
             disabled: e.disabled || e.currentPage === e.totalPages,
-            onClick: n[5] || (n[5] = (a) => o(e.currentPage + 1))
+            onClick: s[5] || (s[5] = (a) => g(e.currentPage + 1))
           }, {
-            default: I(() => [
-              y(l(M.value), 1)
+            default: z(() => [
+              b(o(F.value), 1)
             ]),
             _: 1
-          }, 8, ["disabled"]),
-          x(d, {
+          }, 8, ["class", "disabled"]),
+          C(c, {
             variant: "ghost",
             size: "sm",
             icon: "lucide:chevron-right",
-            class: "flex sm:hidden",
+            class: i(["flex sm:hidden", d.value]),
             disabled: e.disabled || e.currentPage === e.totalPages,
-            onClick: n[6] || (n[6] = (a) => o(e.currentPage + 1))
-          }, null, 8, ["disabled"])
+            onClick: s[6] || (s[6] = (a) => g(e.currentPage + 1))
+          }, null, 8, ["class", "disabled"])
         ], 64)),
-        e.showEdges ? (i(), w(d, {
+        e.showEdges ? (r(), x(c, {
           key: 5,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevrons-right",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === e.totalPages,
-          onClick: n[7] || (n[7] = (a) => o(e.totalPages))
-        }, null, 8, ["disabled"])) : f("", !0)
+          onClick: s[7] || (s[7] = (a) => g(e.totalPages))
+        }, null, 8, ["class", "disabled"])) : h("", !0)
       ])
     ], 2));
   }
 });
 export {
-  se as default
+  le as default
 };

package/components/Pagination/index.d.ts

@@ -5,6 +5,8 @@ export interface PageInfo {
     totalItems?: number;
     itemsPerPage?: number;
 }
+export type PaginationVariant = 'outline' | 'solid' | 'ghost';
+export type PaginationRounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
 export interface PaginationProps {
     currentPage?: number;
     totalPages: number;
@@ -17,4 +19,8 @@ export interface PaginationProps {
     itemsPerPageOptions?: number[];
     navType?: 'text' | 'icon';
     alignment?: 'start' | 'center' | 'end' | 'between';
+    /** Visual style for the active page button. @default 'outline' */
+    activeVariant?: PaginationVariant;
+    /** Border radius for page buttons. @default 'md' */
+    rounded?: PaginationRounded;
 }