@indielayer/ui 1.2.0 → 1.3.0

package/lib/components/modal/Modal.vue.js

@@ -1,11 +1,10 @@
-import { defineComponent as T, ref as f, watch as k, openBlock as l, createBlock as h, Teleport as B, createElementBlock as n, normalizeStyle as z, unref as o, normalizeClass as i, createCommentVNode as r, createElementVNode as p, createVNode as S, renderSlot as c, withCtx as E } from "vue";
-import { onClickOutside as N, useEventListener as _ } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.js";
-import { useTheme as I } from "../../composables/theme.js";
+import { defineComponent as B, ref as f, watch as k, openBlock as l, createBlock as h, Teleport as z, createElementBlock as n, normalizeStyle as S, unref as o, normalizeClass as i, createCommentVNode as r, createElementVNode as p, createVNode as E, renderSlot as c, withCtx as N } from "vue";
+import { onClickOutside as _, useEventListener as I } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { useTheme as M } from "../../composables/useTheme.js";
 import { closeIcon as O } from "../../common/icons.js";
-import R from "./Modal.theme.js";
-import X from "../scroll/Scroll.vue.js";
-import j from "../icon/Icon.vue.js";
-const D = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, K = ["xs", "sm", "md", "lg", "xl", "full"], L = {
+import R from "../scroll/Scroll.vue.js";
+import X from "../icon/Icon.vue.js";
+const j = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen" }, D = ["xs", "sm", "md", "lg", "xl", "full"], K = {
   size: {
     type: String,
     default: "md"
@@ -13,67 +12,67 @@ const D = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
   modelValue: Boolean,
   showClose: Boolean,
   backdrop: Boolean
-}, M = {
+}, L = {
   name: "XModal",
   validators: {
-    size: K
+    size: D
   }
-}, Q = /* @__PURE__ */ T({
-  ...M,
-  props: L,
+}, J = /* @__PURE__ */ B({
+  ...L,
+  props: K,
   emits: ["update:modelValue"],
-  setup(b, { expose: g, emit: y }) {
-    const m = b, a = f(m.modelValue), t = f(!1), v = f(null);
+  setup(b, { expose: g, emit: w }) {
+    const m = b, y = w, t = f(m.modelValue), a = f(!1), v = f(null);
     let u;
-    k(a, (e) => {
+    k(t, (e) => {
       u && (u(), u = void 0), e && setTimeout(() => {
-        u = N(v, d);
+        u = _(v, d);
       });
     }), k(() => m.modelValue, (e) => {
-      e ? (a.value = e, setTimeout(() => {
-        t.value = e;
-      })) : (t.value = e, setTimeout(() => {
+      e ? (t.value = e, setTimeout(() => {
         a.value = e;
+      })) : (a.value = e, setTimeout(() => {
+        t.value = e;
       }, 150));
-    }), typeof window < "u" && _(document, "keydown", w);
-    function w(e) {
-      e.key === "Escape" && a.value && d();
+    }), typeof window < "u" && I(document, "keydown", C);
+    function C(e) {
+      e.key === "Escape" && t.value && d();
     }
     function d() {
-      t.value = !1, setTimeout(() => {
-        a.value = !1, y("update:modelValue", !1);
+      a.value = !1, setTimeout(() => {
+        t.value = !1, y("update:modelValue", !1);
       }, 150);
     }
-    function C() {
-      a.value = !0, y("update:modelValue", !0), setTimeout(() => {
-        t.value = !0;
+    function V() {
+      t.value = !0, y("update:modelValue", !0), setTimeout(() => {
+        a.value = !0;
       });
     }
-    const { styles: V, classes: s, className: $ } = I("modal", R, m);
-    return g({ open: C, close: d }), (e, P) => (l(), h(B, { to: "body" }, [
-      a.value ? (l(), n("div", {
+    const { styles: $, classes: s, className: T } = M("Modal", {}, m);
+    return g({ open: V, close: d }), (e, P) => (l(), h(z, { to: "body" }, [
+      t.value ? (l(), n("div", {
         key: 0,
-        style: z(o(V)),
+        style: S(o($)),
         class: i([
-          o($),
+          o(T),
           o(s).wrapper,
-          t.value ? "visible" : "invisible ease-in duration-100"
+          a.value ? "visible" : "invisible ease-in duration-100"
         ])
       }, [
         e.backdrop ? (l(), n("div", {
           key: 0,
           class: i([
             o(s).backdrop,
-            t.value ? "ease-out duration-200 opacity-30 dark:opacity-70" : "ease-in duration-100 opacity-0"
+            a.value ? "ease-out duration-200 opacity-30 dark:opacity-70" : "ease-in duration-100 opacity-0"
           ])
         }, null, 2)) : r("", !0),
-        p("div", D, [
+        p("div", j, [
           p("div", {
             ref_key: "modalRef",
             ref: v,
             class: i([
               o(s).modal,
-              t.value ? "ease-out duration-200 opacity-100 translate-y-0 sm:scale-100" : "ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              a.value ? "ease-out duration-200 opacity-100 translate-y-0 sm:scale-100" : "ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             ]),
             role: "dialog",
             "aria-modal": "true",
@@ -87,7 +86,7 @@ const D = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
               ]),
               onClick: d
             }, [
-              S(j, { icon: o(O) }, null, 8, ["icon"])
+              E(X, { icon: o(O) }, null, 8, ["icon"])
             ], 2)) : r("", !0),
             c(e.$slots, "image"),
             e.$slots.header ? (l(), n("div", {
@@ -96,12 +95,12 @@ const D = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
             }, [
               c(e.$slots, "header")
             ], 2)) : r("", !0),
-            e.$slots.default ? (l(), h(X, {
+            e.$slots.default ? (l(), h(R, {
               key: 2,
               scrollbar: !1,
               vertical: ""
             }, {
-              default: E(() => [
+              default: N(() => [
                 p("div", {
                   class: i(o(s).content)
                 }, [
@@ -123,5 +122,5 @@ const D = { class: "flex items-end sm:items-center justify-center p-4 sm:p-6 h-s
   }
 });
 export {
-  Q as default
+  J as default
 };

package/lib/components/modal/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XModal } from './Modal.vue';
-export type { ModalProps, ModalSize } from './Modal.vue';
-export type { ModalTheme } from './Modal.theme';
+export type { ModalProps, ModalSize, ModalTheme } from './Modal.vue';

package/lib/components/modal/theme/Modal.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ModalTheme } from '../Modal.vue';
+declare const theme: ModalTheme;
+export default theme;

package/lib/components/modal/{Modal.theme.js → theme/Modal.base.theme.js}

@@ -11,7 +11,7 @@ const a = {
     content: "px-6 py-4",
     actions: "bg-slate-50 dark:bg-gray-800 p-4"
   }
-}, t = a;
+}, s = a;
 export {
-  t as default
+  s as default
 };

package/lib/components/modal/theme/Modal.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { ModalTheme } from '../Modal.vue';
+declare const theme: ModalTheme;
+export default theme;

package/lib/components/modal/theme/Modal.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Modal.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

package/lib/components/notifications/Notifications.vue.d.ts

@@ -1,4 +1,5 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const notificationsProps: {
     align: {
         type: PropType<"left" | "right">;
@@ -20,7 +21,7 @@ declare const notificationsProps: {
     };
     injectKey: {
         type: (SymbolConstructor | StringConstructor)[];
-        default: import("vue").InjectionKey<any>;
+        default: import("vue").InjectionKey<NotificationInjection>;
     };
     color: {
         readonly type: StringConstructor;
@@ -52,6 +53,17 @@ export type NotificationEvent = {
     align?: NotificationsAlign;
     position?: NotificationsPosition;
 };
+export type NotificationInjection = {
+    log: (notification: NotificationEvent | string) => void;
+    info: (notification: NotificationEvent | string) => void;
+    warn: (notification: NotificationEvent | string) => void;
+    error: (notification: NotificationEvent | string) => void;
+    warning: (notification: NotificationEvent | string) => void;
+    success: (notification: NotificationEvent | string) => void;
+};
+type InternalClasses = 'wrapper' | 'list' | 'item';
+export interface NotificationsTheme extends ThemeComponent<NotificationsProps, InternalClasses> {
+}
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     align: {
         type: PropType<"left" | "right">;
@@ -73,7 +85,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     injectKey: {
         type: (SymbolConstructor | StringConstructor)[];
-        default: import("vue").InjectionKey<any>;
+        default: import("vue").InjectionKey<NotificationInjection>;
     };
     color: {
         readonly type: StringConstructor;
@@ -107,17 +119,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     injectKey: {
         type: (SymbolConstructor | StringConstructor)[];
-        default: import("vue").InjectionKey<any>;
+        default: import("vue").InjectionKey<NotificationInjection>;
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
     };
 }>>, {
-    color: string;
-    align: "left" | "right";
     removable: boolean;
+    color: string;
     position: "top" | "bottom";
+    align: "left" | "right";
     timeout: number;
     injectKey: string | symbol;
 }, {}>, {

package/lib/components/notifications/Notifications.vue.js

@@ -1,16 +1,15 @@
-import { defineComponent as I, ref as v, provide as O, watch as $, openBlock as a, createElementBlock as m, Fragment as K, renderSlot as q, createBlock as y, Teleport as J, createElementVNode as h, normalizeStyle as A, unref as l, normalizeClass as k, createVNode as D, TransitionGroup as Q, withCtx as U, renderList as W, createCommentVNode as f, toDisplayString as x } from "vue";
+import { defineComponent as I, ref as v, provide as O, watch as $, openBlock as a, createElementBlock as u, Fragment as K, renderSlot as q, createBlock as y, Teleport as J, createElementVNode as h, normalizeStyle as A, unref as l, normalizeClass as k, createVNode as D, TransitionGroup as Q, withCtx as U, renderList as W, createCommentVNode as f, toDisplayString as x } from "vue";
 import { injectNotificationKey as Y } from "../../composables/keys.js";
-import { useColors as H } from "../../composables/colors.js";
-import { useCSS as Z } from "../../composables/css.js";
-import { useTheme as ee } from "../../composables/theme.js";
+import { useColors as H } from "../../composables/useColors.js";
+import { useCSS as Z } from "../../composables/useCSS.js";
+import { useTheme as ee } from "../../composables/useTheme.js";
 import { closeIcon as oe } from "../../common/icons.js";
 import E from "../icon/Icon.vue.js";
 import te from "../spacer/Spacer.js";
-import re from "./Notifications.theme.js";
-const se = { class: "flex items-center flex-wrap" }, ae = {
+const se = { class: "flex items-center flex-wrap" }, re = {
   key: 0,
   class: "font-semibold mr-2"
-}, le = ["onClick"], ne = {
+}, ae = ["onClick"], le = {
   ...H.props("primary"),
   align: {
     type: String,
@@ -37,25 +36,25 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
 }, b = {
   align: ["left", "right"],
   position: ["bottom", "top"]
-}, ie = {
+}, ne = {
   name: "XNotifications",
   validators: b
-}, he = /* @__PURE__ */ I({
-  ...ie,
-  props: ne,
+}, ge = /* @__PURE__ */ I({
+  ...ne,
+  props: le,
   setup(n, { expose: L }) {
-    const r = n, i = v(r.align), s = v(r.position), u = v([]), C = v(null), R = Z("notification"), _ = H();
-    O(r.injectKey, {
+    const s = n, i = v(s.align), r = v(s.position), m = v([]), C = v(null), R = Z("notification"), _ = H();
+    O(s.injectKey, {
       log: z,
       info: M,
       warn: p,
       error: S,
       warning: p,
       success: w
-    }), $(() => r.align, (o) => {
+    }), $(() => s.align, (o) => {
       i.value = o;
-    }), $(() => r.position, (o) => {
-      s.value = o;
+    }), $(() => s.position, (o) => {
+      r.value = o;
     });
     function z(o) {
       const t = typeof o == "string", e = {
@@ -115,15 +114,15 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
       const e = {
         ...{
           id: Date.now(),
-          iconColor: r.color,
-          timeout: r.timeout,
+          iconColor: s.color,
+          timeout: s.timeout,
           align: i.value,
-          position: s.value,
-          removable: r.removable
+          position: r.value,
+          removable: s.removable
         },
         ...o
       };
-      i.value = e.align, s.value = e.position;
+      i.value = e.align, r.value = e.position;
       const P = _.getPalette(e.iconColor), d = _.getPalette(((V = e.action) == null ? void 0 : V.color) || "primary"), T = R.variables({
         icon: P[400],
         action: d[400],
@@ -138,18 +137,18 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
           }
         }
       });
-      e.style = Object.keys(T).map((B) => `${B}: ${T[B]}`).join(";"), u.value.push(e), (j = C.value) == null || j.scrollTo({ top: 0, behavior: "smooth" }), e.timeout && X(e, e.timeout);
+      e.style = Object.keys(T).map((B) => `${B}: ${T[B]}`).join(";"), m.value.push(e), (j = C.value) == null || j.scrollTo({ top: 0, behavior: "smooth" }), e.timeout && X(e, e.timeout);
     }
     function N(o) {
-      u.value = u.value.filter((t) => t.id !== o.id);
+      m.value = m.value.filter((t) => t.id !== o.id);
     }
     function X(o, t) {
       setTimeout(() => {
         N(o);
       }, t);
     }
-    const { styles: F, classes: g, className: G } = ee("notification", re, r);
-    return L({ log: z, info: M, success: w, warn: p, warning: p, error: S }), (o, t) => (a(), m(K, null, [
+    const { styles: F, classes: g, className: G } = ee("Notifications", {}, s);
+    return L({ log: z, info: M, success: w, warn: p, warning: p, error: S }), (o, t) => (a(), u(K, null, [
       q(o.$slots, "default"),
       (a(), y(J, { to: "body" }, [
         h("div", {
@@ -164,8 +163,8 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
               "left-0": i.value === "left",
               "right-0": i.value === "right",
               // position
-              "top-0": s.value === "top",
-              "bottom-0": s.value === "bottom"
+              "top-0": r.value === "top",
+              "bottom-0": r.value === "bottom"
             }
           ])
         }, [
@@ -173,7 +172,7 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
             tag: "ul",
             class: k([
               l(g).list,
-              { "flex-col-reverse": s.value }
+              { "flex-col-reverse": r.value }
             ]),
             "enter-active-class": "transition ease-out duration-200",
             "leave-active-class": "transition ease-out duration-100",
@@ -184,13 +183,13 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
             "move-class": "ease-in-out duration-200"
           }, {
             default: U(() => [
-              (a(!0), m(K, null, W(u.value, (e) => (a(), m("li", {
+              (a(!0), u(K, null, W(m.value, (e) => (a(), u("li", {
                 key: e.id,
                 class: k([
                   l(g).item,
                   {
-                    "mb-2": s.value === "bottom",
-                    "mt-2": s.value === "top"
+                    "mb-2": r.value === "bottom",
+                    "mt-2": r.value === "top"
                   }
                 ]),
                 style: A(e.style)
@@ -203,15 +202,15 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
                   viewBox: "0 0 20 20"
                 }, null, 8, ["icon"])) : f("", !0),
                 h("div", se, [
-                  e.title ? (a(), m("span", ae, x(e.title), 1)) : f("", !0),
+                  e.title ? (a(), u("span", re, x(e.title), 1)) : f("", !0),
                   h("span", null, x(e.message), 1)
                 ]),
                 D(l(te)),
-                e.action ? (a(), m("div", {
+                e.action ? (a(), u("div", {
                   key: 1,
                   class: "ml-3 font-semibold cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
                   onClick: e.action.onClick
-                }, x(e.action.label), 9, le)) : f("", !0),
+                }, x(e.action.label), 9, ae)) : f("", !0),
                 e.removable ? (a(), y(E, {
                   key: 2,
                   icon: l(oe),
@@ -230,5 +229,5 @@ const se = { class: "flex items-center flex-wrap" }, ae = {
   }
 });
 export {
-  he as default
+  ge as default
 };

package/lib/components/notifications/index.d.ts

@@ -1,3 +1,2 @@
 export { default as XNotifications } from './Notifications.vue';
-export type { NotificationsProps, NotificationEvent, NotificationsAction, NotificationsAlign, NotificationsPosition, } from './Notifications.vue';
-export type { NotificationsTheme } from './Notifications.theme';
+export type { NotificationsProps, NotificationEvent, NotificationsAction, NotificationsAlign, NotificationsPosition, NotificationsTheme, } from './Notifications.vue';

package/lib/components/notifications/theme/Notifications.base.theme.d.ts

@@ -0,0 +1,3 @@
+import type { NotificationsTheme } from '../Notifications.vue';
+declare const theme: NotificationsTheme;
+export default theme;

package/lib/components/notifications/theme/Notifications.carbon.theme.d.ts

@@ -0,0 +1,3 @@
+import type { NotificationsTheme } from '../Notifications.vue';
+declare const theme: NotificationsTheme;
+export default theme;

package/lib/components/notifications/theme/Notifications.carbon.theme.js

@@ -0,0 +1,5 @@
+import e from "./Notifications.base.theme.js";
+const t = e, o = t;
+export {
+  o as default
+};

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

@@ -1,4 +1,5 @@
 import { type PropType, type ExtractPublicPropTypes } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
 declare const paginationVariant: readonly ["simple", "quick", "dots"];
 declare const paginationProps: {
     links: BooleanConstructor;
@@ -15,13 +16,16 @@ declare const paginationProps: {
         default: string;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 };
 export type PaginationVariant = typeof paginationVariant[number];
 export type PaginationProps = ExtractPublicPropTypes<typeof paginationProps>;
+type InternalClasses = 'wrapper' | 'dots';
+export interface PaginationTheme extends ThemeComponent<PaginationProps, InternalClasses> {
+}
 declare const _default: import("vue").DefineComponent<{
     links: BooleanConstructor;
     totalPages: {
@@ -37,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
@@ -56,17 +60,17 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        readonly type: PropType<import("../../composables/common").Size>;
+        readonly type: PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    size: import("../../composables/common").Size;
+    size: import("../../composables/useCommon").Size;
     modelValue: number;
-    variant: "dots" | "simple" | "quick";
     links: boolean;
     totalPages: number;
+    variant: "dots" | "simple" | "quick";
 }, {}>;
 export default _default;

package/lib/components/pagination/Pagination.vue.js

@@ -1,12 +1,11 @@
-import { defineComponent as h, computed as v, ref as E, watch as X, openBlock as o, createElementBlock as n, normalizeStyle as D, unref as t, normalizeClass as c, Fragment as u, createVNode as r, createElementVNode as g, withKeys as F, toDisplayString as L, createBlock as m, createCommentVNode as d, renderList as P } from "vue";
-import { useTheme as Q } from "../../composables/theme.js";
-import { useCommon as C } from "../../composables/common.js";
-import { prevIcon as T, nextIcon as U, dotsIcon as y } from "../../common/icons.js";
+import { defineComponent as E, computed as v, ref as X, watch as D, openBlock as o, createElementBlock as n, normalizeStyle as F, unref as s, normalizeClass as c, Fragment as u, createVNode as r, createElementVNode as g, withKeys as L, toDisplayString as Q, createBlock as m, createCommentVNode as d, renderList as P } from "vue";
+import { useTheme as T } from "../../composables/useTheme.js";
+import { useCommon as C } from "../../composables/useCommon.js";
+import { prevIcon as U, nextIcon as j, dotsIcon as y } from "../../common/icons.js";
 import b from "../icon/Icon.vue.js";
-import j from "../input/Input.vue.js";
+import A from "../input/Input.vue.js";
 import I from "../button/Button.vue.js";
 import f from "./PaginationItem.vue.js";
-import A from "./Pagination.theme.js";
 const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { class: "text-gray-600 mr-2" }, "Page", -1), J = { class: "text-gray-600 ml-2" }, M = ["onClick"], O = ["simple", "quick", "dots"], R = {
   ...C.props(),
   links: Boolean,
@@ -28,56 +27,57 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
     ...C.validators(),
     variant: O
   }
-}, te = /* @__PURE__ */ h({
+}, te = /* @__PURE__ */ E({
   ...W,
   props: R,
   emits: ["update:modelValue"],
-  setup($, { emit: p }) {
-    const l = $, w = v(() => l.totalPages === 3 ? [2] : l.totalPages > 2 ? l.modelValue === 1 || l.modelValue === 2 ? [2, 3] : l.modelValue === l.totalPages || l.modelValue === l.totalPages - 1 ? [l.totalPages - 2, l.totalPages - 1] : [l.modelValue - 1, l.modelValue, l.modelValue + 1] : []), i = E(l.modelValue + "");
-    function B() {
+  setup($, { emit: w }) {
+    const l = $, p = w, B = v(() => l.totalPages === 3 ? [2] : l.totalPages > 2 ? l.modelValue === 1 || l.modelValue === 2 ? [2, 3] : l.modelValue === l.totalPages || l.modelValue === l.totalPages - 1 ? [l.totalPages - 2, l.totalPages - 1] : [l.modelValue - 1, l.modelValue, l.modelValue + 1] : []), i = X(l.modelValue + "");
+    function N() {
       const e = parseInt(i.value);
       e >= 0 && e <= l.totalPages ? p("update:modelValue", e) : i.value = l.modelValue + "";
     }
-    X(() => l.modelValue, (e) => {
+    D(() => l.modelValue, (e) => {
       i.value = l.modelValue + "";
     });
-    function N() {
+    function q() {
       l.modelValue > 1 && p("update:modelValue", l.modelValue - 1);
     }
-    function q() {
+    function S() {
       l.modelValue < l.totalPages && p("update:modelValue", l.modelValue + 1);
     }
-    const V = v(() => l.size === "xs" ? "xs" : l.size === "sm" ? "sm" : l.size === "lg" ? "md" : l.size === "xl" ? "lg" : "sm"), { styles: S, classes: k, className: K } = Q("pagination", A, l);
-    return (e, s) => (o(), n("ul", {
-      style: D(t(S)),
+    const V = v(() => l.size === "xs" ? "xs" : l.size === "sm" ? "sm" : l.size === "lg" ? "md" : l.size === "xl" ? "lg" : "sm"), { styles: K, classes: k, className: h } = T("Pagination", {}, l);
+    return (e, t) => (o(), n("ul", {
+      style: F(s(K)),
       class: c([
-        t(K),
-        t(k).wrapper
+        s(h),
+        s(k).wrapper
       ])
     }, [
       e.variant === "quick" ? (o(), n(u, { key: 0 }, [
         r(I, {
-          "icon-left": t(T),
+          "icon-left": s(U),
           size: V.value,
           disabled: e.modelValue <= 1,
-          onClick: N
+          onClick: q
         }, null, 8, ["icon-left", "size", "disabled"]),
         g("div", G, [
           H,
-          r(j, {
+          r(A, {
             modelValue: i.value,
-            "onUpdate:modelValue": s[0] || (s[0] = (a) => i.value = a),
+            "onUpdate:modelValue": t[0] || (t[0] = (a) => i.value = a),
             size: e.size,
-            class: "w-[2.75rem] text-center",
-            onKeydown: F(B, ["enter"])
+            class: "text-center w-16",
+            "hide-footer": "",
+            onKeydown: L(N, ["enter"])
           }, null, 8, ["modelValue", "size", "onKeydown"]),
-          g("span", J, "of " + L(e.totalPages), 1)
+          g("span", J, "of " + Q(e.totalPages), 1)
         ]),
         r(I, {
-          "icon-left": t(U),
+          "icon-left": s(j),
           size: V.value,
           disabled: e.modelValue >= e.totalPages,
-          onClick: q
+          onClick: S
         }, null, 8, ["icon-left", "size", "disabled"])
       ], 64)) : e.variant === "simple" ? (o(), n(u, { key: 1 }, [
         r(f, {
@@ -85,26 +85,26 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
           links: e.links,
           size: e.size,
           selected: e.modelValue === 1,
-          onInput: s[1] || (s[1] = (a) => e.$emit("update:modelValue", a))
+          onInput: t[1] || (t[1] = (a) => e.$emit("update:modelValue", a))
         }, null, 8, ["links", "size", "selected"]),
         e.totalPages > 3 && e.modelValue > 3 ? (o(), m(b, {
           key: 0,
           class: "mx-1",
-          icon: t(y),
+          icon: s(y),
           size: e.size
         }, null, 8, ["icon", "size"])) : d("", !0),
-        (o(!0), n(u, null, P(w.value, (a) => (o(), m(f, {
+        (o(!0), n(u, null, P(B.value, (a) => (o(), m(f, {
           key: a,
           value: a,
           links: e.links,
           size: e.size,
           selected: e.modelValue === a,
-          onInput: s[2] || (s[2] = (z) => e.$emit("update:modelValue", z))
+          onInput: t[2] || (t[2] = (z) => e.$emit("update:modelValue", z))
         }, null, 8, ["value", "links", "size", "selected"]))), 128)),
         e.totalPages > 3 && e.modelValue < e.totalPages - 2 ? (o(), m(b, {
           key: 1,
           class: "mx-1",
-          icon: t(y),
+          icon: s(y),
           size: e.size
         }, null, 8, ["icon", "size"])) : d("", !0),
         e.totalPages > 1 ? (o(), m(f, {
@@ -113,12 +113,12 @@ const G = { class: "mx-9 flex items-center" }, H = /* @__PURE__ */ g("span", { c
           links: e.links,
           size: e.size,
           selected: e.modelValue === e.totalPages,
-          onInput: s[3] || (s[3] = (a) => e.$emit("update:modelValue", a))
+          onInput: t[3] || (t[3] = (a) => e.$emit("update:modelValue", a))
         }, null, 8, ["value", "links", "size", "selected"])) : d("", !0)
       ], 64)) : e.variant === "dots" ? (o(!0), n(u, { key: 2 }, P(e.totalPages, (a) => (o(), n("li", {
         key: a,
         class: c(["rounded-full cursor-pointer", [
-          t(k).dots,
+          s(k).dots,
           a === e.modelValue ? "bg-[color:var(--x-pagination-bg)]" : "bg-gray-100 hover:bg-gray-200"
         ]]),
         onClick: (z) => e.$emit("update:modelValue", a)