@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/Menu/composables/useMenu.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, Ref } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { MenuOwnProps, MenuProps } from '../menu.types';
 type MenuLibDefaults = LibDefaultsShape<MenuOwnProps, "offset" | "shadow" | "rounded" | "strategy" | "placement" | "teleportTo" | "closeOnEscape" | "closeOnClickAway" | "disableScrollLock">;
 type MenuMerged = MergeLibDefaults<MenuOwnProps, MenuLibDefaults>;
@@ -24,9 +24,9 @@ export declare function useMenu(props: MenuOwnProps, libDefaults: MenuLibDefault
     merged: import('vue').ComputedRef<MenuMerged>;
     menuId: string;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "teleportTo" | "closeOnClickAway" | "disableAutoFocus" | "strategy">, "anchorEl" | "onShowChange">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "teleportTo" | "closeOnClickAway" | "disableAutoFocus" | "strategy">, "anchorEl" | "onShowChange">>>;
     isPortaled: import('vue').ComputedRef<boolean>;
-    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         tabindex: number;
         role: string;
         "aria-expanded": boolean;
@@ -36,7 +36,7 @@ export declare function useMenu(props: MenuOwnProps, libDefaults: MenuLibDefault
         "aria-controls": string | undefined;
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    contentBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         id: string;
         role: string;
         onKeydown: (event: KeyboardEvent) => void;

package/dist/Components/Menu/composables/useMenu.js

@@ -1,10 +1,12 @@
 import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as ee } from "../../../Utils/index.js";
-import { computed as r, nextTick as i, onBeforeUnmount as a, ref as o, toValue as te, useAttrs as s, useId as ne, watch as c } from "vue";
-import { LAYER_STACK_BASE_Z_INDEX as l, acquireLayerStackOrder as u, claimOpenMenu as re, cn as d, createFocusable as f, createPositionable as p, getLayerStackEntry as m, mergeBridgeUILayeredClasses as h, pushLayerStack as ie, splitComponentProps as ae, subscribeLayerStack as oe } from "@bridge-ui/core";
-import { get as g, omit as _ } from "es-toolkit/compat";
-import { roundedProps as v, shadowProps as se } from "@bridge-ui/core/Tokens/Menu";
+import { computed as r, nextTick as i, onBeforeUnmount as te, ref as a, toValue as o, useAttrs as ne, useId as re, watch as s } from "vue";
+import { get as c, omit as l } from "es-toolkit/compat";
+import { menuRoundedProps as ie, menuShadowProps as ae } from "@bridge-ui/core/Tokens";
+import { cn as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core/Utils";
+import { createFocusable as p, createPositionable as oe } from "@bridge-ui/core/Runtime";
+import { LAYER_STACK_BASE_Z_INDEX as m, acquireLayerStackOrder as h, claimOpenMenu as g, getLayerStackEntry as _, pushLayerStack as se, subscribeLayerStack as ce } from "@bridge-ui/core/Layer";
 //#region src/Components/Menu/composables/useMenu.ts
-var ce = [
+var le = [
 	"offset",
 	"shadow",
 	"classes",
@@ -20,59 +22,59 @@ var ce = [
 	"disableAutoFocus",
 	"disableScrollLock"
 ];
-function y(y, le, b = {}) {
-	let ue = s(), x = ne(), S = o(!1), C = o(""), w = o(null), T = o(null), E = null, D = null, O = null, k = null, A = null, j = null, M = !1, N = o(l), P = r(() => te(b.show ?? !1));
+function v(v, ue, y = {}) {
+	let b = ne(), x = re(), S = a(!1), C = a(""), w = a(null), T = a(null), E = null, D = null, O = null, k = null, A = null, j = null, M = !1, N = a(m), P = r(() => o(y.show ?? !1));
 	function F(e) {
-		e || b.onClose?.(), b.show && (b.show.value = e), b.onShowChange?.(e);
+		e || y.onClose?.(), y.show && (y.show.value = e), y.onShowChange?.(e);
 	}
-	let I = r(() => ae({
-		bridgeKeys: ce,
+	let I = r(() => f({
+		bridgeKeys: le,
 		props: {
-			...ue,
-			...y
+			...b,
+			...v
 		}
 	})), { merged: L, entry: R } = n({
-		libDefaults: le,
+		libDefaults: ue,
 		componentName: "Menu",
 		props: () => I.value.componentProps
 	}), z = r(() => L.value.customProps), B = ee({
 		entry: R,
 		props: () => I.value.componentProps
 	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => {
-		let e = h(v, R.value?.tokens?.rounded);
-		return g(e, L.value.rounded);
+		let e = d(ie, R.value?.tokens?.rounded);
+		return c(e, L.value.rounded);
 	}), fe = r(() => {
-		let e = h(se, R.value?.tokens?.shadow);
-		return g(e, L.value.shadow);
-	}), U = r(() => !L.value.persistent), W = r(() => _(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
-	function G() {
-		return y.anchorEl ?? w.value;
+		let e = d(ae, R.value?.tokens?.shadow);
+		return c(e, L.value.shadow);
+	}), U = r(() => !L.value.persistent), pe = r(() => l(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
+	function W() {
+		return v.anchorEl ?? w.value;
 	}
-	function K() {
-		G()?.focus({ preventScroll: !0 });
+	function G() {
+		W()?.focus({ preventScroll: !0 });
 	}
-	function q(e) {
-		return G()?.contains(e) ?? !1;
+	function K(e) {
+		return W()?.contains(e) ?? !1;
 	}
-	function pe(e) {
-		return !(e instanceof Element) || q(e) || T.value?.contains(e) ? !1 : !!e.closest("[aria-haspopup=\"menu\"], button, [role=\"button\"]");
+	function me(e) {
+		return !(e instanceof Element) || K(e) || T.value?.contains(e) ? !1 : !!e.closest("[aria-haspopup=\"menu\"], button, [role=\"button\"]");
 	}
-	function J() {
+	function q() {
 		!U.value || !P.value || F(!1);
 	}
-	function me() {
+	function he() {
 		L.value.persistent && P.value || F(!P.value);
 	}
-	function he(e) {
+	function J(e) {
 		(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), P.value || F(!0));
 	}
 	function ge(e) {
 		let t = T.value;
 		if (!t) return;
-		let n = f(t);
+		let n = p(t);
 		switch (e.key) {
 			case "Escape":
-				e.preventDefault(), J(), K();
+				e.preventDefault(), q(), G();
 				break;
 			case "ArrowDown":
 				e.preventDefault(), n.next()?.focus({ preventScroll: !0 });
@@ -91,22 +93,22 @@ function y(y, le, b = {}) {
 	}
 	function X() {
 		Y();
-		let e = G(), t = T.value;
-		!P.value || !e || !t || (k = p({
+		let e = W(), t = T.value;
+		!P.value || !e || !t || (k = oe({
 			floating: t,
 			reference: e,
 			offset: L.value.offset,
 			strategy: L.value.strategy,
 			placement: L.value.placement,
 			onReferenceHidden: () => {
-				!M || !U.value || !P.value || J();
+				!M || !U.value || !P.value || q();
 			}
 		}), k.start(), i(() => {
 			M = !0;
 		}));
 	}
 	function Z() {
-		!P.value || L.value.disableAutoFocus || !T.value || f(T.value).focusFirst();
+		!P.value || L.value.disableAutoFocus || !T.value || p(T.value).focusFirst();
 	}
 	function _e() {
 		if (A?.(), !P.value) {
@@ -115,7 +117,7 @@ function y(y, le, b = {}) {
 		}
 		function e(e) {
 			let t = e.target;
-			q(t) || T.value?.contains(t) || L.value.closeOnClickAway === !1 || !U.value || pe(t) || J();
+			K(t) || T.value?.contains(t) || L.value.closeOnClickAway === !1 || !U.value || me(t) || q();
 		}
 		document.addEventListener("pointerdown", e, !0), A = () => {
 			document.removeEventListener("pointerdown", e, !0);
@@ -134,29 +136,29 @@ function y(y, le, b = {}) {
 		}));
 	}
 	function be() {
-		!P.value || L.value.closeOnEscape === !1 || !U.value || (J(), K());
+		!P.value || L.value.closeOnEscape === !1 || !U.value || (q(), G());
 	}
 	function Q() {
-		let e = m(C.value);
+		let e = _(C.value);
 		e && (N.value = e.zIndex);
 	}
 	function $() {
-		j?.(), j = null, A?.(), A = null, O?.(), O = null, D?.release(), D = null, E = null, C.value = "", N.value = l, Y();
+		j?.(), j = null, A?.(), A = null, O?.(), O = null, D?.release(), D = null, E = null, C.value = "", N.value = m, Y();
 	}
-	let xe = r(() => e(z.value?.root, W.value, d({
+	let xe = r(() => e(z.value?.root, pe.value, u({
 		"relative inline-block text-left": !0,
-		[g(B.value, "root") ?? ""]: !0
+		[c(B.value, "root") ?? ""]: !0
 	}))), Se = r(() => e(z.value?.trigger, {}, {
 		tabindex: 0,
 		role: "button",
 		"aria-expanded": P.value,
-		onKeydown: he,
+		onKeydown: J,
 		"aria-haspopup": "menu",
-		onClickCapture: me,
+		onClickCapture: he,
 		"aria-controls": P.value ? x : void 0,
-		class: d({
+		class: u({
 			"inline-block w-fit max-w-full cursor-pointer outline-hidden": !0,
-			[g(B.value, "trigger") ?? ""]: !0
+			[c(B.value, "trigger") ?? ""]: !0
 		})
 	})), Ce = r(() => e(z.value?.content, {}, {
 		id: x,
@@ -164,34 +166,34 @@ function y(y, le, b = {}) {
 		onKeydown: ge,
 		style: { zIndex: N.value },
 		"aria-hidden": V.value ? !0 : void 0,
-		class: d({
+		class: u({
 			"bg-white text-dark-900 dark:bg-dark-800 dark:text-dark-100 ring-1 ring-black/5 dark:ring-white/10 outline-hidden overflow-hidden min-w-32 w-max max-w-[calc(100vw-16px)]": !0,
 			"invisible pointer-events-none": V.value,
 			[de.value ?? ""]: !0,
 			[fe.value ?? ""]: !0,
-			[g(B.value, "content") ?? ""]: !0
+			[c(B.value, "content") ?? ""]: !0
 		})
 	}));
-	return c(P, (e) => {
+	return s(P, (e) => {
 		if (e) {
 			S.value = !0, i(() => {
-				P.value && (j = re({
+				P.value && (j = g({
 					id: x,
-					requestClose: J
+					requestClose: q
 				}));
-			}), E = u(), D = ie({
+			}), E = h(), D = se({
 				order: E,
 				onEscape: be,
 				lockScroll: L.value.disableScrollLock !== !0
-			}), C.value = D.id, N.value = D.zIndex, Q(), O = oe(Q), i(() => {
+			}), C.value = D.id, N.value = D.zIndex, Q(), O = ce(Q), i(() => {
 				X(), Z(), _e();
 			});
 			return;
 		}
 		$(), L.value.keepMounted || (S.value = !1);
-	}, { immediate: !0 }), c([
+	}, { immediate: !0 }), s([
 		P,
-		() => y.anchorEl,
+		() => v.anchorEl,
 		() => L.value.offset,
 		() => L.value.strategy,
 		() => L.value.placement
@@ -199,11 +201,11 @@ function y(y, le, b = {}) {
 		i(() => {
 			X();
 		});
-	}), c([P, () => L.value.disableAutoFocus], () => {
+	}), s([P, () => L.value.disableAutoFocus], () => {
 		i(() => {
 			Z();
 		});
-	}), a(() => {
+	}), te(() => {
 		$();
 	}), {
 		merged: L,
@@ -218,4 +220,4 @@ function y(y, le, b = {}) {
 	};
 }
 //#endregion
-export { y as useMenu };
+export { v as useMenu };

package/dist/Components/Menu/menu.types.d.ts

@@ -1,5 +1,7 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { MenuRounded, MenuShadow, MergeHtmlProps, MergeProps, PositionPlacement, PositionStrategy } from '@bridge-ui/core';
+import { PositionPlacement, PositionStrategy } from '@bridge-ui/core/Runtime';
+import { MenuRounded, MenuShadow } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface MenuShadowOverrides {}
 export interface MenuRoundedOverrides {}
 export interface MenuClasses {

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

@@ -25,7 +25,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     hideBackdrop: boolean;
     keepMounted: boolean;
     persistent: boolean;
-    scroll: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ModalScroll, import('./modal.types').ModalScrollOverrides>;
+    scroll: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').ModalScroll, import('./modal.types').ModalScrollOverrides>;
     teleportTo: false | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/Components/Modal/Modal.vue_vue_type_script_setup_true_lang.js

@@ -80,13 +80,14 @@ var g = /*@__PURE__*/ s({
 		});
 		l({ stackId: n(() => v.stackId ?? D.value) });
 		let O = n(() => b.value.teleportTo === !1), k = n(() => b.value.teleportTo === !1 ? "body" : b.value.teleportTo), A = n(() => v.hideBackdrop !== !0 && b.value.hideBackdrop !== !0);
-		return (e, n) => (f(), r(t, {
+		return (e, n) => m(x) ? (f(), r(t, {
+			key: 0,
 			to: k.value,
 			disabled: O.value
-		}, [m(x) ? (f(), a("div", d(u({ key: 0 }, m(S))), [A.value ? (f(), a("div", u({
+		}, [o("div", d(c(m(S))), [A.value ? (f(), a("div", u({
 			key: 0,
 			"aria-hidden": "true"
-		}, m(w)), null, 16)) : i("", !0), o("div", d(c(m(T))), [o("div", u({ ref: m(E) }, m(C)), [p(e.$slots, "default")], 16)], 16)], 16)) : i("", !0)], 8, ["to", "disabled"]));
+		}, m(w)), null, 16)) : i("", !0), o("div", d(c(m(T))), [o("div", u({ ref: m(E) }, m(C)), [p(e.$slots, "default")], 16)], 16)], 16)], 8, ["to", "disabled"])) : i("", !0);
 	}
 });
 //#endregion

package/dist/Components/Modal/composables/useModal.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, Ref } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { ModalOwnProps, ModalProps } from '../modal.types';
 type ModalLibDefaults = LibDefaultsShape<ModalOwnProps, "blur" | "size" | "align" | "scroll" | "autoFocus" | "teleportTo" | "transition" | "closeOnEscape" | "closeOnOverlay">;
 type ModalMerged = MergeLibDefaults<ModalOwnProps, ModalLibDefaults>;
@@ -27,7 +27,7 @@ export type ModalOptions = {
 export declare function useModal(props: ModalOwnProps, libDefaults: ModalLibDefaults, options?: ModalOptions): {
     merged: import('vue').ComputedRef<ModalMerged>;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         onTransitionend: (event: TransitionEvent) => void;
         style: {
             zIndex: number;
@@ -35,7 +35,7 @@ export declare function useModal(props: ModalOwnProps, libDefaults: ModalLibDefa
         "aria-hidden": boolean | undefined;
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "autoFocus" | "blur" | "closeOnEscape" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "persistent" | "scroll" | "stackId" | "teleportTo" | "transition" | "align">>>;
-    panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         "data-modal-part": string;
         "data-state": "open" | "closed";
         class: string;
@@ -43,14 +43,14 @@ export declare function useModal(props: ModalOwnProps, libDefaults: ModalLibDefa
         role: string;
         "aria-modal": boolean;
     }>>;
-    overlayBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    overlayBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         "data-modal-part": string;
         "data-state": "open" | "closed";
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {
         onClick: () => void;
     }>>;
-    wrapperBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+    wrapperBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
         onClick: (event: MouseEvent) => void;
     }>>;
     setPanelRef: (element: null | Element | ComponentPublicInstance) => void;

package/dist/Components/Modal/composables/useModal.js

@@ -1,11 +1,12 @@
-import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as te } from "../../../Utils/index.js";
-import { computed as n, nextTick as r, onBeforeUnmount as ne, ref as i, toValue as re, useAttrs as a, watch as o } from "vue";
-import { LAYER_STACK_BASE_Z_INDEX as s, acquireLayerStackOrder as ie, cn as c, countModalTransitionLayers as ae, createFocusTrap as l, getLayerStackEntry as u, getModalOverlayTransitionClass as d, getModalPanelTransitionClass as f, hasModalTransition as p, mergeBridgeUILayeredClasses as m, pushLayerStack as h, resolveEffectiveModalTransition as oe, splitComponentProps as g, subscribeLayerStack as se } from "@bridge-ui/core";
-import { get as _ } from "es-toolkit/compat";
-import { isModalBackdropClick as ce } from "@bridge-ui/core/Utils";
-import { alignProps as v, blurProps as y, sizeProps as b } from "@bridge-ui/core/Tokens/Modal";
+import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as ee } from "../../../Utils/index.js";
+import { computed as r, nextTick as i, onBeforeUnmount as a, ref as o, toValue as te, useAttrs as ne, watch as s } from "vue";
+import { get as c } from "es-toolkit/compat";
+import { modalAlignProps as l, modalBlurProps as u, modalSizeProps as re } from "@bridge-ui/core/Tokens";
+import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as ie } from "@bridge-ui/core/Utils";
+import { createFocusTrap as p, isModalBackdropClick as m } from "@bridge-ui/core/Runtime";
+import { LAYER_STACK_BASE_Z_INDEX as h, acquireLayerStackOrder as g, countModalTransitionLayers as ae, getLayerStackEntry as oe, getModalOverlayTransitionClass as se, getModalPanelTransitionClass as ce, hasModalTransition as _, pushLayerStack as le, resolveEffectiveModalTransition as ue, subscribeLayerStack as de } from "@bridge-ui/core/Layer";
 //#region src/Components/Modal/composables/useModal.ts
-var le = [
+var fe = [
 	"blur",
 	"size",
 	"align",
@@ -25,112 +26,112 @@ var le = [
 	"disableEnforceFocus",
 	"disableRestoreFocus"
 ];
-function x(x, ue, S = {}) {
-	let de = a(), C = i(!1), w = i(!1), T = i(""), E = i(null), D = 0, O = null, k = null, A = null, j = null, M = i(s), N = i("closed"), P = n(() => re(S.show ?? !1));
+function v(v, y, b = {}) {
+	let x = ne(), S = o(!1), C = o(!1), w = o(""), T = o(null), E = !1, D = 0, O = null, k = null, A = null, j = null, M = o(h), N = o("closed"), P = r(() => te(b.show ?? !1));
 	function F(e) {
-		e || S.onClose?.(), S.show && (S.show.value = e), S.onShowChange?.(e);
+		e || b.onClose?.(), b.show && (b.show.value = e), b.onShowChange?.(e);
 	}
-	let I = n(() => g({
-		bridgeKeys: le,
+	let I = r(() => ie({
+		bridgeKeys: fe,
 		props: {
-			...de,
-			...x
+			...x,
+			...v
 		}
-	})), { merged: L, entry: R } = ee({
-		libDefaults: ue,
+	})), { merged: L, entry: R } = n({
+		libDefaults: y,
 		componentName: "Modal",
 		props: () => I.value.componentProps
-	}), z = n(() => L.value.customProps), B = te({
+	}), z = r(() => L.value.customProps), B = ee({
 		entry: R,
 		props: () => I.value.componentProps
-	}), V = n(() => oe(L.value.transition ?? "none")), H = n(() => p(V.value)), U = n(() => L.value.scroll ?? "body"), W = n(() => L.value.keepMounted && !w.value), fe = n(() => {
-		let e = m(v, R.value?.tokens?.align);
-		return _(e, L.value.align);
-	}), pe = n(() => {
-		let e = m(y, R.value?.tokens?.blur);
-		return _(e, L.value.blur);
-	}), me = n(() => {
-		let e = m(b, R.value?.tokens?.size);
-		return _(e, L.value.size);
-	}), he = n(() => d(V.value)), ge = n(() => f(V.value)), G = n(() => !L.value.persistent), _e = n(() => I.value.inheritedAttrs), ve = n(() => e(z.value?.root, _e.value, {
-		onTransitionend: we,
+	}), V = r(() => ue(L.value.transition ?? "none")), H = r(() => _(V.value)), U = r(() => L.value.scroll ?? "body"), W = r(() => L.value.keepMounted && !S.value), pe = r(() => {
+		let e = f(l, R.value?.tokens?.align);
+		return c(e, L.value.align);
+	}), me = r(() => {
+		let e = f(u, R.value?.tokens?.blur);
+		return c(e, L.value.blur);
+	}), he = r(() => {
+		let e = f(re, R.value?.tokens?.size);
+		return c(e, L.value.size);
+	}), ge = r(() => se(V.value)), _e = r(() => ce(V.value)), G = r(() => !L.value.persistent), ve = r(() => I.value.inheritedAttrs), ye = r(() => e(z.value?.root, ve.value, {
+		onTransitionend: Te,
 		style: { zIndex: M.value },
 		"aria-hidden": W.value ? !0 : void 0,
-		class: c({
+		class: d({
 			"fixed inset-0": !0,
 			"overflow-y-auto": U.value === "body",
 			"overflow-hidden": U.value === "paper",
 			"invisible pointer-events-none": W.value,
-			[_(B.value, "root") ?? ""]: !0
+			[c(B.value, "root") ?? ""]: !0
 		})
-	})), ye = n(() => e(z.value?.overlay, { onClick: Z }, {
+	})), be = r(() => e(z.value?.overlay, { onClick: Z }, {
 		"data-modal-part": "overlay",
 		"data-state": N.value,
-		class: c({
+		class: d({
 			"fixed inset-0 bg-black/50": !0,
-			[pe.value ?? ""]: !0,
-			[he.value]: H.value,
-			[_(B.value, "overlay") ?? ""]: !0
+			[me.value ?? ""]: !0,
+			[ge.value]: H.value,
+			[c(B.value, "overlay") ?? ""]: !0
 		})
-	})), be = n(() => e(z.value?.wrapper, { onClick: Q }, c({
+	})), xe = r(() => e(z.value?.wrapper, { onClick: Q }, d({
 		"flex min-h-full w-full transform p-4": !0,
-		[fe.value ?? ""]: !0,
-		[_(B.value, "wrapper") ?? ""]: !0
-	}))), xe = n(() => e(z.value?.panel, {
+		[pe.value ?? ""]: !0,
+		[c(B.value, "wrapper") ?? ""]: !0
+	}))), Se = r(() => e(z.value?.panel, {
 		role: "dialog",
 		"aria-modal": !0
 	}, {
 		"data-modal-part": "panel",
 		"data-state": N.value,
-		class: c({
+		class: d({
 			"relative w-full": !0,
-			[me.value ?? ""]: !0,
+			[he.value ?? ""]: !0,
 			"max-h-[calc(100dvh-2rem)] overflow-y-auto": U.value === "paper",
-			[ge.value]: H.value,
-			[_(B.value, "panel") ?? ""]: !0
+			[_e.value]: H.value,
+			[c(B.value, "panel") ?? ""]: !0
 		})
 	}));
 	function K() {
 		k?.release(), k = null;
 	}
 	function q() {
-		if (!w.value || N.value !== "open" || !E.value) {
+		if (!S.value || N.value !== "open" || !T.value) {
 			K();
 			return;
 		}
-		K(), k = l({
-			container: E.value,
+		K(), k = p({
+			container: T.value,
 			disableAutoFocus: !L.value.autoFocus,
 			disableEnforceFocus: L.value.disableEnforceFocus,
 			disableRestoreFocus: L.value.disableRestoreFocus
 		});
 	}
-	function Se(e) {
-		E.value = t(e), q();
+	function Ce(e) {
+		T.value = t(e), q();
 	}
 	function J() {
-		D = 0, w.value = !1, K(), P.value ? F(!1) : S.onShowChange?.(!1), N.value = "closed", L.value.keepMounted || (C.value = !1);
+		E && (E = !1, D = 0, S.value = !1, K(), P.value ? F(!1) : b.onShowChange?.(!1), N.value = "closed", L.value.keepMounted || (C.value = !1));
 	}
 	function Y() {
-		if (A?.releaseScrollLock(), !H.value) {
+		if (A?.releaseScrollLock(), E = !0, !H.value) {
 			J();
 			return;
 		}
 		N.value = "closed", D = ae(V.value, { hideBackdrop: L.value.hideBackdrop }), D === 0 && J();
 	}
-	function Ce() {
-		if (!H.value) {
+	function we() {
+		if (E = !1, D = 0, !H.value) {
 			N.value = "open";
 			return;
 		}
-		N.value = "closed", r(() => {
+		N.value = "closed", i(() => {
 			requestAnimationFrame(() => {
 				N.value = "open";
 			});
 		});
 	}
-	function we(e) {
-		if (!C.value || N.value !== "closed") return;
+	function Te(e) {
+		if (!E || !C.value || N.value !== "closed") return;
 		let t = e.target;
 		(t?.dataset.modalPart === "overlay" || t?.dataset.modalPart === "panel") && e.propertyName !== "none" && e.elapsedTime !== 0 && (--D, D <= 0 && J());
 	}
@@ -147,53 +148,53 @@ function x(x, ue, S = {}) {
 		L.value.closeOnOverlay === !1 || !G.value || X();
 	}
 	function Q(e) {
-		ce(e) && Z();
+		m(e) && Z();
 	}
-	function Te() {
+	function Ee() {
 		!P.value || L.value.closeOnEscape === !1 || !G.value || X();
 	}
-	o(P, (e) => {
+	s(P, (e) => {
 		if (e) {
-			C.value = !0, w.value = !0, Ce();
+			C.value = !0, S.value = !0, we();
 			return;
 		}
 		C.value && Y();
-	}, { immediate: !0 }), o([
-		w,
+	}, { immediate: !0 }), s([
+		S,
 		N,
 		() => L.value.autoFocus,
 		() => L.value.disableEnforceFocus,
 		() => L.value.disableRestoreFocus
 	], () => {
-		r(() => {
+		i(() => {
 			q();
 		});
 	});
 	function $() {
-		let e = u(T.value);
+		let e = oe(w.value);
 		e && (M.value = e.zIndex);
 	}
-	return o(w, (e) => {
-		e ? (O = ie(), A = h({
+	return s(S, (e) => {
+		e ? (O = g(), A = le({
 			order: O,
-			id: S.stackId,
-			onEscape: Te,
+			id: b.stackId,
+			onEscape: Ee,
 			lockScroll: L.value.disableScrollLock !== !0
-		}), T.value = A.id, M.value = A.zIndex, $(), j = se($)) : (j?.(), j = null, A?.release(), A = null, O = null, T.value = "", M.value = s);
-	}, { immediate: !0 }), ne(() => {
+		}), w.value = A.id, M.value = A.zIndex, $(), j = de($)) : (j?.(), j = null, A?.release(), A = null, O = null, w.value = "", M.value = h);
+	}, { immediate: !0 }), a(() => {
 		j?.(), j = null, K(), A?.release(), A = null;
 	}), {
 		merged: L,
 		mounted: C,
-		rootBind: ve,
-		panelBind: xe,
-		overlayBind: ye,
-		wrapperBind: be,
-		setPanelRef: Se,
-		layerStackId: T,
+		rootBind: ye,
+		panelBind: Se,
+		overlayBind: be,
+		wrapperBind: xe,
+		setPanelRef: Ce,
+		layerStackId: w,
 		handleOverlayClick: Z,
 		handleWrapperClick: Q
 	};
 }
 //#endregion
-export { x as useModal };
+export { v as useModal };

package/dist/Components/Modal/modal.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { MergeHtmlProps, MergeProps, ModalAlign, ModalBlur, ModalScroll, ModalSize, ModalTransition } from '@bridge-ui/core';
+import { ModalAlign, ModalBlur, ModalScroll, ModalSize, ModalTransition } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface ModalBlurOverrides {}
 export interface ModalSizeOverrides {}
 export interface ModalAlignOverrides {}