@bridge-ui/vue 0.0.9 → 0.0.11

package/dist/Components/OtpField/OtpField.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,19 @@
-import e from "../BaseField/BaseField.js";
-import { useOtpField as t } from "./composables/useOtpField.js";
-import { Fragment as n, createBlock as r, createElementBlock as i, createElementVNode as a, defineComponent as o, guardReactiveProps as s, mergeModels as c, mergeProps as l, normalizeProps as u, openBlock as d, renderList as f, unref as p, useModel as m, withCtx as h } from "vue";
+import { presentSlotNames as e } from "../../Utils/slotOrProp.js";
+import { BASE_FIELD_CHROME_SLOT_NAMES as t } from "../BaseField/baseField.types.js";
+import n from "../BaseField/BaseField.js";
+import { useOtpField as r } from "./composables/useOtpField.js";
+import { Fragment as i, createBlock as a, createElementBlock as o, createElementVNode as s, createSlots as c, defineComponent as l, guardReactiveProps as u, mergeModels as d, mergeProps as f, normalizeProps as p, openBlock as m, renderList as h, renderSlot as g, unref as _, useModel as v, withCtx as y } from "vue";
 //#region src/Components/OtpField/OtpField.vue?vue&type=script&setup=true&lang.ts
-var g = [
+var b = [
 	"value",
 	"onFocus",
 	"onPaste",
 	"onInput",
 	"onKeydown"
-], _ = /*@__PURE__*/ o({
+], x = /*@__PURE__*/ l({
 	inheritAttrs: !1,
 	__name: "OtpField",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ d({
 		autoFocus: { type: Boolean },
 		classes: {},
 		color: { default: "primary" },
@@ -38,25 +40,28 @@ var g = [
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["change", "complete"], ["update:modelValue"]),
-	setup(o, { emit: c }) {
-		let _ = c, v = m(o, "modelValue"), { digits: y, pinBind: b, pinsBind: x, baseField: S, inputBind: C, setPinRef: w, handlePinInput: T, handlePinFocus: E, handlePinPaste: D, handlePinKeyDown: O } = t(o, v, {
-			onChange: (e) => _("change", e),
-			onComplete: (e) => _("complete", e)
+	emits: /*@__PURE__*/ d(["change", "complete"], ["update:modelValue"]),
+	setup(l, { emit: d }) {
+		let x = d, S = v(l, "modelValue"), { digits: C, pinBind: w, pinsBind: T, baseField: E, inputBind: D, setPinRef: O, handlePinInput: k, handlePinFocus: A, handlePinPaste: j, handlePinKeyDown: M } = r(l, S, {
+			onChange: (e) => x("change", e),
+			onComplete: (e) => x("complete", e)
 		});
-		return (t, o) => (d(), r(e, { field: p(S) }, {
-			default: h(() => [a("div", u(s(p(x))), [(d(!0), i(n, null, f(p(y), (e, t) => (d(), i("div", l({ key: t }, { ref_for: !0 }, p(b)(t)), [a("input", l({ ref_for: !0 }, p(C)(t), {
+		return (r, l) => (m(), a(n, { field: _(E) }, c({
+			default: y(() => [s("div", p(u(_(T))), [(m(!0), o(i, null, h(_(C), (e, t) => (m(), o("div", f({ key: t }, { ref_for: !0 }, _(w)(t)), [s("input", f({ ref_for: !0 }, _(D)(t), {
 				value: e,
-				onFocus: (e) => p(E)(t),
-				onPaste: (e) => p(D)(t, e),
-				onInput: (e) => p(T)(t, e),
-				onKeydown: (e) => p(O)(t, e),
+				onFocus: (e) => _(A)(t),
+				onPaste: (e) => _(j)(t, e),
+				onInput: (e) => _(k)(t, e),
+				onKeydown: (e) => _(M)(t, e),
 				ref_for: !0,
-				ref: (e) => p(w)(t, e)
-			}), null, 16, g)], 16))), 128))], 16)]),
-			_: 1
-		}, 8, ["field"]));
+				ref: (e) => _(O)(t, e)
+			}), null, 16, b)], 16))), 128))], 16)]),
+			_: 2
+		}, [h(_(e)(_(t), r.$slots), (e) => ({
+			name: e,
+			fn: y((t) => [g(r.$slots, e, p(u(t || {})))])
+		}))]), 1032, ["field"]));
 	}
 });
 //#endregion
-export { _ as default };
+export { x as default };

package/dist/Components/OtpField/composables/useOtpField.d.ts

@@ -1,5 +1,6 @@
 import { MaybeRefOrGetter, Ref } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults, OtpInputType } from '@bridge-ui/core';
+import { OtpInputType } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { OtpFieldOwnProps } from '../otpField.types';
 export type UseOtpFieldOptions = {
     onChange?: (value: string) => void;
@@ -15,23 +16,23 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
     merged: import('vue').ComputedRef<OtpFieldMerged>;
     digits: import('vue').ComputedRef<string[]>;
     length: import('vue').ComputedRef<number>;
-    pinBind: (_index: number) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>;
-    pinsBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    pinBind: (_index: number) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>;
+    pinsBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
     baseField: {
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
         }>;
         merged: import('vue').ComputedRef<Omit<Omit<import('../../BaseField').BaseFieldOwnProps, "field">, "error" | "size" | "hideErrorMessage"> & {
             error: NonNullable<boolean | undefined>;
-            size: NonNullable<keyof import('@bridge-ui/core').BaseFieldSize | undefined>;
+            size: NonNullable<keyof import('@bridge-ui/core/Tokens').BaseFieldSize | undefined>;
             hideErrorMessage: NonNullable<boolean | undefined>;
         }>;
-        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             slots?: import('../../BaseField').BaseFieldSlots | undefined;
             class: string;
         }>>;
-        errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        groupBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        errorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        groupBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             role: string;
             id: string;
             "aria-describedby": string | undefined;
@@ -39,21 +40,21 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
             "aria-invalid": true | undefined;
         }>>;
         controlId: import('vue').ComputedRef<string>;
-        headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
-        sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core').BaseFieldSizeItem | undefined>;
-        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').BaseFieldSizeItem | undefined>;
+        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
-        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         mergedClasses: import('vue').ComputedRef<Partial<import('../../BaseField').BaseFieldClasses>>;
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
-        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
     };
-    inputBind: (index: number) => import('@bridge-ui/core').MergePartBind<object, "class", {
+    inputBind: (index: number) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
         inputmode: "text" | "numeric";
         maxlength: number;
         disabled: boolean;

package/dist/Components/OtpField/composables/useOtpField.js

@@ -1,9 +1,10 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { baseFieldBridgeKeys as r, useBaseField as i } from "../../BaseField/composables/useBaseField.js";
 import { computed as a, nextTick as o, onMounted as s, ref as c, toValue as l, useAttrs as ee } from "vue";
-import { applyOtpInput as u, applyOtpKeyNavigation as d, applyOtpPaste as f, cn as p, isOtpComplete as m, joinOtpDigits as h, mergeBridgeUILayeredClasses as g, normalizeOtpValue as _, resolveOtpLength as te, splitComponentProps as ne, splitOtpValue as re } from "@bridge-ui/core";
-import { get as v, isUndefined as y, omit as b, pick as ie } from "es-toolkit/compat";
-import { colorProps as ae, invalidatedProps as x, roundedProps as S, sizeProps as C, variantProps as w } from "@bridge-ui/core/Tokens/OtpField";
+import { get as u, isUndefined as d, omit as f, pick as p } from "es-toolkit/compat";
+import { applyOtpInput as m, applyOtpKeyNavigation as h, applyOtpPaste as g, isOtpComplete as _, joinOtpDigits as te, normalizeOtpValue as v, resolveOtpLength as ne, splitOtpValue as y } from "@bridge-ui/core/Domain";
+import { otpFieldColorProps as b, otpFieldInvalidatedProps as x, otpFieldRoundedProps as re, otpFieldSizeProps as ie, otpFieldVariantProps as ae } from "@bridge-ui/core/Tokens";
+import { cn as S, mergeBridgeUILayeredClasses as C, splitComponentProps as w } from "@bridge-ui/core/Utils";
 //#region src/Components/OtpField/composables/useOtpField.ts
 var T = [
 	"mask",
@@ -33,7 +34,7 @@ function E(E, D, O = {}, se = {
 	color: "primary",
 	variant: "outline"
 }) {
-	let ce = ee(), k = c([]), A = a(() => ne({
+	let ce = ee(), k = c([]), A = a(() => w({
 		bridgeKeys: T,
 		props: {
 			...ce,
@@ -47,46 +48,46 @@ function E(E, D, O = {}, se = {
 		entry: M,
 		props: () => A.value.componentProps
 	}), P = a(() => j.value.customProps), F = a(() => oe(j.value.customProps)), I = a(() => ({
-		...ie(A.value.componentProps, r),
+		...p(A.value.componentProps, r),
 		customProps: F.value,
 		id: A.value.inheritedAttrs.id,
 		class: A.value.inheritedAttrs.class,
-		...b(A.value.inheritedAttrs, ["class", "id"])
+		...f(A.value.inheritedAttrs, ["class", "id"])
 	})), L = i(() => I.value, {
 		size: "md",
 		hideErrorMessage: !1
 	}, {
 		componentName: "OtpField",
 		labelHtmlFor: (e) => `${e}-0`
-	}), { controlId: R, isDisabled: z, isReadonly: B, invalidated: V, ariaDescribedBy: H } = L, U = a(() => te(j.value.length)), W = a(() => j.value.type ?? "numeric"), G = a(() => j.value.variant ?? "outline"), K = a(() => G.value === "underlined"), q = a(() => !y(D.value)), J = c(_(l(E).defaultValue, U.value, W.value)), le = a(() => q.value ? _(D.value, U.value, W.value) : J.value), Y = a(() => re(le.value, U.value));
+	}), { controlId: R, isDisabled: z, isReadonly: B, invalidated: V, ariaDescribedBy: H } = L, U = a(() => ne(j.value.length)), W = a(() => j.value.type ?? "numeric"), G = a(() => j.value.variant ?? "outline"), K = a(() => G.value === "underlined"), q = a(() => !d(D.value)), J = c(v(l(E).defaultValue, U.value, W.value)), le = a(() => q.value ? v(D.value, U.value, W.value) : J.value), Y = a(() => y(le.value, U.value));
 	s(() => {
 		if (!j.value.autoFocus || z.value || B.value) return;
 		let e = Y.value.findIndex((e) => e === ""), t = e === -1 ? 0 : e;
 		k.value[t]?.focus();
 	});
 	let X = (e, t) => {
-		let n = h(e);
-		q.value || (J.value = n), D.value = n, O.onChange?.(n), m(n, U.value) && O.onComplete?.(n), t != null && o(() => {
+		let n = te(e);
+		q.value || (J.value = n), D.value = n, O.onChange?.(n), _(n, U.value) && O.onComplete?.(n), t != null && o(() => {
 			k.value[t]?.focus(), k.value[t]?.select();
 		});
 	}, Z = a(() => {
-		let e = g(C, M.value?.tokens?.size);
-		return v(e, j.value.size ?? "md");
+		let e = C(ie, M.value?.tokens?.size);
+		return u(e, j.value.size ?? "md");
 	}), Q = a(() => {
-		let e = g(ae, M.value?.tokens?.color);
-		return v(e, j.value.color ?? "primary");
-	}), ue = a(() => g(x, M.value?.tokens?.invalidated, j.value.customProps?.invalidated)), $ = a(() => V.value ? ue.value : void 0), de = a(() => {
-		let e = g(S, M.value?.tokens?.rounded);
-		return v(e, j.value.rounded ?? "md");
+		let e = C(b, M.value?.tokens?.color);
+		return u(e, j.value.color ?? "primary");
+	}), ue = a(() => C(x, M.value?.tokens?.invalidated, j.value.customProps?.invalidated)), $ = a(() => V.value ? ue.value : void 0), de = a(() => {
+		let e = C(re, M.value?.tokens?.rounded);
+		return u(e, j.value.rounded ?? "md");
 	}), fe = a(() => {
-		let e = g(w, M.value?.tokens?.variant);
-		return v(e, G.value);
+		let e = C(ae, M.value?.tokens?.variant);
+		return u(e, G.value);
 	});
 	return {
 		merged: j,
 		digits: Y,
 		length: U,
-		pinBind: (t) => e(P.value?.pin, {}, p({
+		pinBind: (t) => e(P.value?.pin, {}, S({
 			"relative flex shrink-0 items-center justify-center overflow-hidden": !0,
 			[Z.value?.pin ?? ""]: !0,
 			[fe.value?.pin ?? ""]: !0,
@@ -97,7 +98,7 @@ function E(E, D, O = {}, se = {
 			[$.value?.pinUnderlined ?? ""]: V.value && K.value,
 			[N.value.pin ?? ""]: !0
 		})),
-		pinsBind: a(() => e({}, {}, p({
+		pinsBind: a(() => e({}, {}, S({
 			"flex flex-wrap items-center": !0,
 			[L.sizeClasses.value?.group ?? ""]: !0
 		}))),
@@ -118,7 +119,7 @@ function E(E, D, O = {}, se = {
 				"aria-invalid": V.value || void 0,
 				autocomplete: t === 0 ? "one-time-code" : "off",
 				"aria-label": `Digit ${t + 1} of ${U.value}`
-			}, {}, p({
+			}, {}, S({
 				"h-full w-full min-w-0 bg-transparent border-0 shadow-none text-center": !0,
 				"text-dark-900 dark:text-dark-100 placeholder:text-dark-400": !0,
 				"outline-none ring-0 focus:outline-none focus:ring-0": !0,
@@ -132,7 +133,7 @@ function E(E, D, O = {}, se = {
 		},
 		inputType: W,
 		handlePinInput: (e, t) => {
-			let n = t.target.value, r = u({
+			let n = t.target.value, r = m({
 				index: e,
 				input: n,
 				digits: Y.value,
@@ -144,7 +145,7 @@ function E(E, D, O = {}, se = {
 			k.value[e]?.select();
 		},
 		handlePinPaste: (e, t) => {
-			let n = t.clipboardData?.getData("text") ?? "", r = f({
+			let n = t.clipboardData?.getData("text") ?? "", r = g({
 				index: e,
 				pasted: n,
 				digits: Y.value,
@@ -153,7 +154,7 @@ function E(E, D, O = {}, se = {
 			r.focusIndex == null && r.digits.every((e, t) => e === Y.value[t]) || (t.preventDefault(), X(r.digits, r.focusIndex));
 		},
 		handlePinKeyDown: (e, t) => {
-			let n = d({
+			let n = h({
 				index: e,
 				key: t.key,
 				digits: Y.value

package/dist/Components/OtpField/otpField.types.d.ts

@@ -1,5 +1,7 @@
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
-import { BaseFieldInvalidated, MergeHtmlProps, MergeProps, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldVariant, OtpInputType } from '@bridge-ui/core';
+import { OtpInputType } from '@bridge-ui/core/Domain';
+import { BaseFieldInvalidated, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldSlots } from '../BaseField/baseField.types';
 export interface OtpFieldColorOverrides {}
 export interface OtpFieldRoundedOverrides {}

package/dist/Components/Pagination/Pagination.js

@@ -0,0 +1,5 @@
+import e from "./Pagination.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Pagination/Pagination.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/Pagination/Pagination.vue.d.ts

@@ -0,0 +1,30 @@
+import { PaginationOwnProps, PaginationSlots } from './pagination.types';
+type __VLS_Slots = PaginationSlots;
+type __VLS_Props = PaginationOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    next: () => any;
+    previous: () => any;
+    change: (page: number) => any;
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onNext?: (() => any) | undefined;
+    onPrevious?: (() => any) | undefined;
+    onChange?: ((page: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    disabled: boolean;
+    hideNextButton: boolean;
+    hidePrevButton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,77 @@
+import e from "../Icon/Icon.js";
+import { usePagination as t } from "./composables/usePagination.js";
+import { Fragment as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v } from "vue";
+//#region src/Components/Pagination/Pagination.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	key: 0,
+	class: "contents"
+}, b = {
+	key: 1,
+	class: "contents"
+}, x = {
+	key: 1,
+	class: "contents"
+}, S = /*@__PURE__*/ c({
+	inheritAttrs: !1,
+	__name: "Pagination",
+	props: /*@__PURE__*/ u({
+		boundaryCount: {},
+		classes: {},
+		color: {},
+		count: {},
+		customProps: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		hasNext: { type: Boolean },
+		hasPrevious: { type: Boolean },
+		hideNextButton: {
+			type: Boolean,
+			default: !1
+		},
+		hidePrevButton: {
+			type: Boolean,
+			default: !1
+		},
+		mode: {},
+		modelValue: {},
+		rounded: {},
+		siblingCount: {},
+		size: {},
+		variant: {}
+	}, {
+		modelValue: { default: 1 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u([
+		"change",
+		"next",
+		"previous",
+		"update:modelValue"
+	], ["update:modelValue"]),
+	setup(c, { emit: u }) {
+		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, getItemBind: M, prevIconBind: N, nextIconBind: P, getEllipsisBind: F } = t(C, {
+			size: "md",
+			rounded: "md",
+			variant: "text",
+			disabled: !1,
+			siblingCount: 1,
+			mode: "numbered",
+			color: "primary",
+			boundaryCount: 1,
+			hideNextButton: !1,
+			hidePrevButton: !1
+		}, w, S);
+		return (t, c) => (p(), i("nav", f(l(_(O))), [a("ul", f(l(_(k))), [
+			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(N)), null, 16)])], 16)])) : r("", !0),
+			(p(!0), i(n, null, m(_(T), (e, r) => (p(), i(n, { key: `${e.type}-${r}` }, [e.type === "ellipsis" ? (p(), i("li", d({
+				key: 0,
+				ref_for: !0
+			}, _(F)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(M)(e.page)), g(e.page), 17)]))], 64))), 128)),
+			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [s(_(e), d({ icon: "chevronRight" }, _(P)), null, 16)])], 16)])) : r("", !0)
+		], 16)], 16));
+	}
+});
+//#endregion
+export { S as default };

package/dist/Components/Pagination/composables/usePagination.d.ts

@@ -0,0 +1,62 @@
+import { Ref, SetupContext } from 'vue';
+import { PaginationEntry } from '@bridge-ui/core/Domain';
+import { IconSize } from '@bridge-ui/core/Tokens';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { PaginationEmits, PaginationOwnProps, PaginationProps } from '../pagination.types';
+type PaginationLibDefaults = LibDefaultsShape<PaginationOwnProps, "mode" | "size" | "color" | "rounded" | "variant" | "disabled" | "siblingCount" | "boundaryCount" | "hideNextButton" | "hidePrevButton">;
+type PaginationMerged = MergeLibDefaults<PaginationOwnProps, PaginationLibDefaults>;
+export declare function usePagination(props: PaginationOwnProps, libDefaults: PaginationLibDefaults, model: Ref<number | undefined>, emit: SetupContext<PaginationEmits>["emit"]): {
+    page: import('vue').ComputedRef<number>;
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<PaginationMerged>;
+    entries: import('vue').ComputedRef<PaginationEntry[]>;
+    showPrev: import('vue').ComputedRef<boolean>;
+    showNext: import('vue').ComputedRef<boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-label": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<PaginationProps, "color" | "mode" | "size" | "classes" | "customProps" | "rounded" | "variant" | "disabled" | "modelValue" | "boundaryCount" | "count" | "hasNext" | "hasPrevious" | "hideNextButton" | "hidePrevButton" | "siblingCount">>>;
+    listBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    prevBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        onClick: () => void;
+        type: "button";
+        "aria-label": string;
+        disabled: boolean;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    nextBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        onClick: () => void;
+        "aria-label": string;
+        type: "button";
+        disabled: boolean;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    getItemBind: (pageNumber: number) => import('@bridge-ui/core/Utils').MergePartBind<{
+        type: "button";
+        disabled: NonNullable<boolean | undefined>;
+        "aria-label": string;
+        "aria-current": "page" | undefined;
+        onClick: () => void;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>;
+    prevIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    nextIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    getEllipsisBind: (index: number) => import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        "data-ellipsis-index": number;
+        class: string;
+    }, "class", import('vue').LiHTMLAttributes | undefined, {}>;
+};
+export {};

package/dist/Components/Pagination/composables/usePagination.js

@@ -0,0 +1,188 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i, useSlots as a } from "vue";
+import { get as o } from "es-toolkit/compat";
+import { getPaginationItems as s } from "@bridge-ui/core/Domain";
+import { paginationColorProps as ee, paginationRoundedProps as c, paginationSizeProps as l, paginationVariantProps as u } from "@bridge-ui/core/Tokens";
+import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core/Utils";
+//#region src/Components/Pagination/composables/usePagination.ts
+var m = [
+	"mode",
+	"size",
+	"color",
+	"count",
+	"classes",
+	"hasNext",
+	"rounded",
+	"variant",
+	"disabled",
+	"modelValue",
+	"customProps",
+	"hasPrevious",
+	"siblingCount",
+	"boundaryCount",
+	"hideNextButton",
+	"hidePrevButton"
+];
+function h(h, g, _, v) {
+	let y = i(), b = a(), x = r(() => p({
+		props: {
+			...y,
+			...h
+		},
+		bridgeKeys: m
+	})), { merged: S, entry: C } = t({
+		libDefaults: g,
+		componentName: "Pagination",
+		props: () => x.value.componentProps
+	}), w = r(() => S.value.customProps), T = r(() => S.value.mode === "simple" ? 1 : _.value ?? 1), E = r(() => S.value.mode === "simple" ? [] : s({
+		page: T.value,
+		count: S.value.count ?? 0,
+		siblingCount: S.value.siblingCount,
+		boundaryCount: S.value.boundaryCount
+	})), D = n({
+		entry: C,
+		props: () => x.value.componentProps
+	}), O = r(() => f(l, C.value?.tokens?.size)), k = r(() => f(u, C.value?.tokens?.variant)), A = r(() => f(ee, C.value?.tokens?.color)), j = r(() => f(c, C.value?.tokens?.rounded)), M = r(() => o(O.value, S.value.size)), N = r(() => o(k.value, S.value.variant)), P = r(() => o(A.value, S.value.color)), F = r(() => o(j.value, S.value.rounded)), I = (e) => {
+		if (S.value.disabled) return;
+		let t = S.value.count ?? 0, n = Math.min(Math.max(1, e), Math.max(t, 1));
+		_.value = n, v("change", n), v("update:modelValue", n);
+	}, L = () => {
+		if (!S.value.disabled) {
+			if (S.value.mode === "simple") {
+				if (S.value.hasPrevious === !1) return;
+				v("previous");
+				return;
+			}
+			I(T.value - 1);
+		}
+	}, R = () => {
+		if (!S.value.disabled) {
+			if (S.value.mode === "simple") {
+				if (S.value.hasNext === !1) return;
+				v("next");
+				return;
+			}
+			I(T.value + 1);
+		}
+	}, z = r(() => S.value.disabled ? !0 : S.value.mode === "simple" ? S.value.hasPrevious === !1 : T.value <= 1), B = r(() => S.value.disabled ? !0 : S.value.mode === "simple" ? S.value.hasNext === !1 : T.value >= (S.value.count ?? 0)), V = r(() => !S.value.hidePrevButton), H = r(() => !S.value.hideNextButton), U = r(() => S.value.variant === "outlined"), W = r(() => S.value.variant === "ghost"), G = r(() => d({
+		[o(M.value, "item") ?? ""]: !0,
+		[o(N.value, "item") ?? ""]: !0,
+		[o(F.value, "item") ?? ""]: W.value
+	})), K = r(() => d({
+		[o(M.value, "itemIcon") ?? ""]: !0,
+		[o(N.value, "item") ?? ""]: !0,
+		[o(F.value, "item") ?? ""]: W.value
+	})), q = r(() => {
+		let e = S.value.variant;
+		return d({
+			[o(N.value, "itemSelected") ?? ""]: !0,
+			[o(P.value, "itemSelectedFilled") ?? ""]: e === "outlined",
+			[o(P.value, "itemSelectedAccent") ?? ""]: e === "text" || e === "ghost",
+			[o(P.value, "itemSelectedSoft") ?? ""]: e === "ghost"
+		});
+	}), J = r(() => {
+		let e = E.value.filter((e) => e.type === "page");
+		return {
+			first: e[0]?.page,
+			last: e[e.length - 1]?.page
+		};
+	}), Y = (e, t) => {
+		if (!U.value) return !1;
+		if (e === "prev") return !0;
+		if (V.value) return !1;
+		let n = E.value[0];
+		return e === "page" ? n?.type === "page" && n.page === t : e === "ellipsis" && n?.type === "ellipsis" && t === 0;
+	}, X = r(() => {
+		let t = x.value.inheritedAttrs;
+		return e(w.value?.root, t, {
+			"aria-label": t["aria-label"] ?? "Pagination",
+			class: d({
+				[o(M.value, "root") ?? ""]: !0,
+				[o(D.value, "root") ?? ""]: !0
+			})
+		});
+	}), Z = r(() => e(w.value?.list, {}, { class: d({
+		[o(M.value, "list") ?? ""]: !0,
+		[o(N.value, "list") ?? ""]: !0,
+		[o(F.value, "list") ?? ""]: U.value,
+		[o(D.value, "list") ?? ""]: !0
+	}) })), Q = (t) => {
+		let n = t === T.value, r = U.value && !V.value && t === J.value.first, i = U.value && !H.value && t === J.value.last;
+		return e(w.value?.item, {}, {
+			type: "button",
+			disabled: S.value.disabled,
+			"aria-label": `Page ${t}`,
+			"aria-current": n ? "page" : void 0,
+			onClick: () => {
+				n || I(t);
+			},
+			class: d({
+				[G.value]: !0,
+				[q.value]: n,
+				[o(D.value, "item") ?? ""]: !0,
+				"ml-0": Y("page", t),
+				[o(F.value, "itemStart") ?? ""]: r,
+				[o(F.value, "itemEnd") ?? ""]: i
+			})
+		});
+	}, te = (t) => e(w.value?.ellipsis, {}, {
+		"aria-hidden": !0,
+		"data-ellipsis-index": t,
+		class: d({
+			[o(M.value, "ellipsis") ?? ""]: !0,
+			[o(N.value, "ellipsis") ?? ""]: !0,
+			[o(F.value, "item") ?? ""]: W.value,
+			[o(D.value, "ellipsis") ?? ""]: !0,
+			"ml-0": Y("ellipsis", t)
+		})
+	}), $ = r(() => o(M.value, "icon") ?? "sm");
+	return {
+		page: T,
+		slots: b,
+		merged: S,
+		entries: E,
+		showPrev: V,
+		showNext: H,
+		rootBind: X,
+		listBind: Z,
+		prevBind: r(() => e(w.value?.prev, {}, {
+			onClick: L,
+			type: "button",
+			"aria-label": "Previous",
+			disabled: z.value,
+			class: d({
+				[K.value]: !0,
+				[o(D.value, "prev") ?? ""]: !0,
+				[o(D.value, "item") ?? ""]: !0,
+				"ml-0": U.value,
+				[o(F.value, "itemStart") ?? ""]: U.value
+			})
+		})),
+		nextBind: r(() => e(w.value?.next, {}, {
+			onClick: R,
+			"aria-label": "Next",
+			type: "button",
+			disabled: B.value,
+			class: d({
+				[K.value]: !0,
+				[o(D.value, "next") ?? ""]: !0,
+				[o(D.value, "item") ?? ""]: !0,
+				[o(F.value, "itemEnd") ?? ""]: U.value
+			})
+		})),
+		getItemBind: Q,
+		prevIconBind: r(() => e(w.value?.prevIcon, {}, {
+			"aria-hidden": !0,
+			size: $.value,
+			class: "shrink-0 pointer-events-none"
+		})),
+		nextIconBind: r(() => e(w.value?.nextIcon, {}, {
+			"aria-hidden": !0,
+			size: $.value,
+			class: "shrink-0 pointer-events-none"
+		})),
+		getEllipsisBind: te
+	};
+}
+//#endregion
+export { h as usePagination };

package/dist/Components/Pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { usePagination } from './composables/usePagination';
+export type { PaginationClasses, PaginationColorOverrides, PaginationCustomProps, PaginationEmits, PaginationOwnProps, PaginationProps, PaginationRoundedOverrides, PaginationSizeOverrides, PaginationSlots, PaginationVariantOverrides, } from './pagination.types';
+export { default as Pagination } from './Pagination.vue';