@bridge-ui/vue 0.0.6 → 0.0.7

package/dist/Components/Autocomplete/composables/useAutocomplete.js

@@ -0,0 +1,382 @@
+import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { hasNamedSlot as t } from "../../../Utils/slotOrProp.js";
+import { mergePartBind as n, resolveFieldAdornmentIconSize as r, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as te, useFormField as ne } from "../../FormField/composables/useFormField.js";
+import { useListboxNavigation as re } from "../../Listbox/composables/useListboxNavigation.js";
+import { Comment as ie, Text as ae, computed as a, nextTick as o, onBeforeUnmount as oe, onMounted as se, ref as s, useAttrs as ce, useId as le, useSlots as ue, watch as c } from "vue";
+import { adjustAutosizeTextareaHeight as de, cn as l, commitFreeSoloValue as fe, createSelectAsyncSearch as pe, filterListboxEntries as me, flattenListboxOptions as u, mergeBridgeUILayeredClasses as d, normalizeListboxEntries as f, normalizeSelectOptions as p, resolveSelectAsyncDebounce as he, resolveSelectAsyncOptions as ge, selectValuesEqual as m, splitComponentProps as _e } from "@bridge-ui/core";
+import { get as h, isNil as ve, omit as ye } from "es-toolkit/compat";
+import { colorProps as be, invalidatedProps as xe } from "@bridge-ui/core/Tokens/Listbox";
+//#region src/Components/Autocomplete/composables/useAutocomplete.ts
+var Se = [
+	"classes",
+	"loading",
+	"options",
+	"freeSolo",
+	"multiple",
+	"asyncData",
+	"clearable",
+	"maxHeight",
+	"searchable",
+	"flipOptions",
+	"optionLabel",
+	"optionValue",
+	"placeholder",
+	"defaultValue",
+	"emptyMessage",
+	"loadingMessage",
+	"disableMaxHeight",
+	"hideEmptyMessage",
+	"minItemsForSearch",
+	"optionDescription"
+];
+function g(g, _, v, y, Ce) {
+	let we = ce(), b = ue(), x = le(), S = e(), C = s(!1), w = s(""), T = s(-1), E = s(null), D = s(!1), O = s([]), k = null, A = s([]), j = a(() => _e({
+		props: {
+			...we,
+			...g
+		},
+		bridgeKeys: Se
+	})), M = a(() => j.value.componentProps), Te = a(() => ({ classes: M.value.classes })), { components: Ee, entry: De } = ee({
+		componentName: "Autocomplete",
+		props: () => Te.value
+	}), N = i({
+		entry: De,
+		props: () => Te.value
+	}), P = a(() => !!M.value.multiple), F = a(() => ({
+		optionLabel: M.value.optionLabel ?? "label",
+		optionValue: M.value.optionValue ?? "value",
+		optionDescription: M.value.optionDescription ?? "description"
+	})), I = a(() => Ce.value.length > 0 ? Ce.value.map((e) => ({
+		option: e,
+		type: "option"
+	})) : f(M.value.options, F.value)), Oe = a(() => u(I.value)), L = s([]);
+	function ke(e) {
+		if (!e || typeof e != "object") return !1;
+		let t = e.type;
+		if (!t || typeof t != "object") return !1;
+		let n = t.name, r = t.__name;
+		return n === "AutocompleteOption" || r === "AutocompleteOption";
+	}
+	function Ae() {
+		return t(b, "default") ? (b.default?.({}) ?? []).some((e) => {
+			if (!e || typeof e != "object") return !1;
+			let t = e.type;
+			return t === ie || t === ae || t === void 0 || typeof t == "symbol" ? !1 : !ke(e);
+		}) : !1;
+	}
+	let R = a(() => Ae() && !M.value.options?.length), z = a(() => {
+		if (R.value) return [];
+		if (O.value.length > 0) {
+			let e = f(O.value, F.value);
+			return M.value.flipOptions ? [...e].reverse() : e;
+		}
+		return M.value.flipOptions ? [...I.value].reverse().map((e) => e.type === "section" ? {
+			...e,
+			options: [...e.options].reverse()
+		} : e) : I.value;
+	}), je = a(() => R.value ? L.value : u(z.value)), B = a(() => {
+		let e = _.value;
+		return P.value ? Array.isArray(e) ? e : [] : !ve(e) && e !== "" ? [e] : [];
+	}), V = a(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of [...je.value, ...A.value]) e.set(t.value, t);
+		return B.value.map((t) => e.get(t) ?? {
+			value: t,
+			label: String(t)
+		});
+	}), Me = a(() => B.value.length > 0), Ne = a(() => M.value.clearable !== !1), H = a(() => !!M.value.asyncData), U = a(() => {
+		if (H.value || (M.value.searchable ?? !0)) return !0;
+		let e = M.value.minItemsForSearch ?? 11;
+		return Oe.value.length >= e;
+	}), W = a(() => C.value && U.value), Pe = a(() => !!M.value.loading || D.value), Fe = a(() => {
+		if (R.value) return [];
+		if (!W.value || !w.value.trim()) return z.value;
+		let e = w.value.trim().toLowerCase();
+		return me(z.value, (t) => t.label.toLowerCase().includes(e));
+	}), G = a(() => R.value ? L.value : u(Fe.value)), K = re(() => G.value, T, x), Ie = a(() => g.readonly || g.disabled ? !0 : !W.value), Le = a(() => W.value || P.value ? w.value : V.value[0]?.label ?? ""), Re = (e) => {
+		E.value = e instanceof HTMLElement ? e : null;
+	};
+	function ze(e) {
+		e.preventDefault();
+	}
+	function Be(e) {
+		if (g.disabled || g.readonly) return;
+		let t = e.target;
+		if (!t.closest("[data-autocomplete-clear]") && !(t.closest(".wrapper-start-slot") || t.closest(".wrapper-end-slot"))) {
+			if (!C.value) {
+				Q();
+				return;
+			}
+			W.value || ($(), v.value?.focus({ preventScroll: !0 }));
+		}
+	}
+	let Ve = a(() => {
+		let e = _e({
+			bridgeKeys: te,
+			props: ye(j.value.inheritedAttrs, ["class"])
+		}).componentProps, r = e.endIcon ?? (t(b, "end") ? void 0 : "chevronUpDown"), { listbox: ee, ...i } = e.customProps ?? {};
+		return {
+			...e,
+			endIcon: r,
+			classes: N.value,
+			customProps: {
+				...i,
+				container: n(i.container, {}, {
+					ref: Re,
+					onClick: Be,
+					class: l({ "cursor-pointer": !g.disabled && !g.readonly && !W.value })
+				})
+			}
+		};
+	}), He = a(() => g.customProps?.listbox), q = ne(() => Ve.value, {
+		size: "md",
+		rounded: "md",
+		color: "primary",
+		variant: "outline",
+		showErrorIcon: !0
+	}, {
+		likeInput: () => P.value,
+		control: () => P.value ? "textarea" : "input"
+	}), J = (e) => {
+		!e || !P.value || de(e);
+	};
+	function Y(e) {
+		return B.value.some((t) => m(t, e));
+	}
+	function X(e) {
+		_.value = e;
+	}
+	function Z(e) {
+		if (P.value) {
+			let t = Array.isArray(e) ? e : [];
+			y("update:modelValue", t), y("change", t);
+			return;
+		}
+		let t = e ?? "";
+		y("update:modelValue", t), y("change", t);
+	}
+	function Q() {
+		g.disabled || g.readonly || C.value || (C.value = !0, w.value = "", K.highlightCurrentSelection(Y), y("open"), H.value && M.value.asyncData && k?.searchImmediate(""));
+	}
+	function $(e) {
+		k?.cancel();
+		let t = C.value;
+		if (t && e?.commitFreeSolo && M.value.freeSolo !== !1) {
+			let e = fe(w.value, B.value, P.value);
+			e != null && (X(e), Z(e), P.value && o(() => {
+				J(v.value), v.value?.focus({ preventScroll: !0 });
+			}));
+		}
+		w.value = "", T.value = -1, t && (C.value = !1, y("close"));
+	}
+	function Ue(e) {
+		if (!e.disabled) {
+			if (P.value) {
+				let t = [...B.value], n = t.findIndex((t) => m(t, e.value));
+				n >= 0 ? (t.splice(n, 1), y("deselect", e)) : (t.push(e.value), y("select", e)), X(t), Z(t), w.value = "", T.value = -1, o(() => {
+					J(v.value), v.value?.focus({ preventScroll: !0 });
+				});
+				return;
+			}
+			X(e.value), Z(e.value), y("select", e), $();
+		}
+	}
+	function We() {
+		if (M.value.freeSolo === !1) return !1;
+		let e = fe(w.value, B.value, P.value);
+		return e == null ? !1 : (X(e), Z(e), w.value = "", T.value = -1, P.value ? (o(() => {
+			J(v.value), v.value?.focus({ preventScroll: !0 });
+		}), !0) : ($(), !0));
+	}
+	function Ge(e) {
+		e?.preventDefault(), e?.stopPropagation(), P.value ? (X([]), Z([])) : (X(null), Z(null)), y("clear"), $();
+	}
+	function Ke(e, t) {
+		if (t.preventDefault(), t.stopPropagation(), !P.value) return;
+		let n = B.value.filter((t) => !m(t, e.value));
+		X(n), Z(n), y("deselect", e), o(() => J(v.value));
+	}
+	function qe() {
+		let e = K.getHighlightedOption();
+		return e ? (Ue(e), !0) : !1;
+	}
+	function Je(e) {
+		w.value = e.target.value, y("search", w.value), C.value || Q(), K.resetHighlight(), H.value && k?.searchDebounced(w.value);
+	}
+	function Ye(e) {
+		if (!(g.disabled || g.readonly)) switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), C.value ? K.moveHighlight(1) : Q();
+				break;
+			case "ArrowUp":
+				e.preventDefault(), C.value ? K.moveHighlight(-1) : Q();
+				break;
+			case "Enter":
+				e.preventDefault(), C.value ? qe() || We() : Q();
+				break;
+			case "Escape":
+				e.preventDefault(), $();
+				break;
+			case "Home":
+				C.value && (e.preventDefault(), K.highlightFirst());
+				break;
+			case "End":
+				C.value && (e.preventDefault(), K.highlightLast());
+				break;
+			case "Backspace":
+				if (P.value && !w.value && V.value.length > 0) {
+					e.preventDefault();
+					let t = V.value.at(-1);
+					t && Ke(t, e);
+				}
+				break;
+			case "Tab":
+				$({ commitFreeSolo: !0 });
+				break;
+			default: break;
+		}
+	}
+	async function Xe(e) {
+		let t = M.value.asyncData;
+		if (t) {
+			D.value = !0;
+			try {
+				let { options: n, resolvedSelected: r } = await ge(t, e, B.value, (e) => p(e, F.value));
+				r.length > 0 && (A.value = r), O.value = n;
+			} finally {
+				D.value = !1;
+			}
+		}
+	}
+	async function Ze() {
+		let e = M.value.asyncData;
+		!e?.resolve || B.value.length === 0 || (A.value = p(await e.resolve(B.value), F.value));
+	}
+	let Qe = a(() => {
+		let e = h(d(be, h(Ee.value, [
+			"Listbox",
+			"tokens",
+			"color"
+		])), q.merged.value.color ?? "primary");
+		return q.invalidated.value ? d(xe, h(Ee.value, [
+			"Listbox",
+			"tokens",
+			"invalidated"
+		])) : e;
+	}), $e = a(() => Qe.value?.value), et = a(() => {
+		let e = !g.disabled && !g.readonly && !W.value, t = !g.disabled && !g.readonly && W.value && U.value, r = Me.value && !P.value && !W.value;
+		return n({
+			role: "combobox",
+			value: Le.value,
+			"aria-controls": x,
+			"aria-expanded": C.value,
+			readonly: Ie.value,
+			onKeydown: Ye,
+			placeholder: M.value.placeholder,
+			"aria-autocomplete": U.value ? "list" : void 0,
+			"aria-activedescendant": C.value ? K.activeDescendantId.value : void 0,
+			...P.value ? {
+				rows: 1,
+				onInput: (e) => {
+					Je(e), J(e.target);
+				}
+			} : { onInput: Je }
+		}, q.inputBind.value, l({
+			"cursor-text": t,
+			"cursor-pointer": e,
+			"resize-none overflow-hidden": P.value,
+			[l($e.value, N.value.value) ?? ""]: r
+		}));
+	});
+	c(() => [
+		C.value,
+		P.value,
+		v.value
+	], () => {
+		J(v.value);
+	}, { immediate: !0 }), c(() => _.value, () => {
+		Ze();
+	}, { immediate: !0 }), c(() => M.value.asyncData, (e) => {
+		if (k?.cancel(), O.value = [], Ze(), !e) {
+			k = null;
+			return;
+		}
+		k = pe((e) => void Xe(e), he(e));
+	}, { immediate: !0 }), oe(() => {
+		k?.cancel();
+	}), se(() => {
+		J(v.value);
+	});
+	let tt = a(() => r(q.merged.value.size)), nt = a(() => n({}, {}, {
+		tabindex: 0,
+		role: "button",
+		"data-autocomplete-clear": !0,
+		onMousedown: ze,
+		class: l({
+			"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
+			[Qe.value?.clear ?? ""]: !0,
+			[N.value.clear ?? ""]: !0
+		})
+	})), rt = a(() => ({
+		listboxId: x,
+		isSelected: Y,
+		disableAutoFocus: !0,
+		loading: Pe.value,
+		multiple: P.value,
+		maxHeight: g.maxHeight,
+		entries: Fe.value,
+		options: G.value,
+		size: q.merged.value.size,
+		color: q.merged.value.color,
+		labelledBy: q.controlId.value,
+		rounded: q.merged.value.rounded,
+		invalidated: q.invalidated.value,
+		highlightedIndex: T.value,
+		disableMaxHeight: g.disableMaxHeight === !0,
+		hideEmptyMessage: M.value.hideEmptyMessage === !0,
+		emptyMessage: M.value.emptyMessage ?? S("No options"),
+		loadingMessage: M.value.loadingMessage ?? S("Loading..."),
+		...He.value
+	}));
+	function it(e) {
+		let t = L.value;
+		t.length === e.length && t.every((t, n) => String(t.value) === String(e[n]?.value)) || (L.value = e);
+	}
+	return {
+		slots: b,
+		hasValue: Me,
+		multiple: P,
+		listboxId: x,
+		formField: q,
+		isLoading: Pe,
+		clearable: Ne,
+		clearBind: nt,
+		isSelected: Y,
+		clearValue: Ge,
+		removeChip: Ke,
+		triggerBind: et,
+		selectOption: Ue,
+		containerRef: E,
+		listboxProps: rt,
+		clearIconSize: tt,
+		mergedClasses: N,
+		visibleOptions: G,
+		isSearchActive: W,
+		open: a({
+			get: () => C.value,
+			set: (e) => {
+				e ? Q() : $({ commitFreeSolo: !0 });
+			}
+		}),
+		selectedOptions: V,
+		hasComposedList: R,
+		highlightedIndex: T,
+		handleRegisteredOptionsChange: it,
+		hideEmptyMessage: a(() => M.value.hideEmptyMessage === !0),
+		emptyMessage: a(() => M.value.emptyMessage ?? S("No options")),
+		loadingMessage: a(() => M.value.loadingMessage ?? S("Loading..."))
+	};
+}
+//#endregion
+export { g as useAutocomplete };

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

@@ -0,0 +1,4 @@
+export type { AutocompleteClasses, AutocompleteEmits, SelectOption as AutocompleteOptionData, AutocompleteOptionProps, AutocompleteProps, AutocompleteSlots, SelectAsyncData, SelectModel, SelectValue, } from './autocomplete.types';
+export { default as Autocomplete } from './Autocomplete.vue';
+export { default as AutocompleteOption } from './AutocompleteOption.vue';
+export { useAutocomplete } from './composables/useAutocomplete';

package/dist/Components/Autocomplete/index.js

@@ -0,0 +1,4 @@
+import { useAutocomplete as e } from "./composables/useAutocomplete.js";
+import t from "./Autocomplete.js";
+import n from "./AutocompleteOption.js";
+export { t as Autocomplete, n as AutocompleteOption, e as useAutocomplete };

package/dist/Components/Avatar/composables/useAvatar.js

@@ -1,8 +1,8 @@
 import { hasNamedSlot as e } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
 import { computed as i, useAttrs as a, useSlots as o } from "vue";
-import { get as s, isEmpty as c, isNil as l } from "es-toolkit/compat";
-import { cn as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core";
+import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
+import { get as u, isEmpty as d, isNil as f } from "es-toolkit/compat";
 import { colorProps as p, iconSizeProps as m, roundedProps as h, sizeProps as g } from "@bridge-ui/core/Tokens/Avatar";
 //#region src/Components/Avatar/composables/useAvatar.ts
 var _ = [
@@ -17,7 +17,7 @@ var _ = [
 	"customProps"
 ];
 function v(v, y) {
-	let b = a(), x = o(), S = i(() => f({
+	let b = a(), x = o(), S = i(() => l({
 		bridgeKeys: _,
 		props: {
 			...b,
@@ -30,35 +30,35 @@ function v(v, y) {
 	}), T = r({
 		entry: w,
 		props: () => S.value.componentProps
-	}), E = i(() => e(x, "default")), D = i(() => !l(C.value.src) && !c(C.value.src)), O = i(() => e(x, "fallback")), k = i(() => !l(C.value.fallback) && !c(C.value.fallback)), A = i(() => C.value.icon ?? "user"), j = i(() => !D.value && !E.value), M = i(() => s(d(g, w.value?.tokens?.size), C.value.size)), N = i(() => s(d(p, w.value?.tokens?.color), C.value.color)), P = i(() => s(d(h, w.value?.tokens?.rounded), C.value.rounded)), F = i(() => s(d(m, w.value?.tokens?.iconSize), C.value.size)), I = i(() => C.value.customProps), L = i(() => t(I.value?.root, S.value.inheritedAttrs, u({
+	}), E = i(() => e(x, "default")), D = i(() => !f(C.value.src) && !d(C.value.src)), O = i(() => e(x, "fallback")), k = i(() => !f(C.value.fallback) && !d(C.value.fallback)), A = i(() => C.value.icon ?? "user"), j = i(() => !D.value && !E.value), M = i(() => u(c(g, w.value?.tokens?.size), C.value.size)), N = i(() => u(c(p, w.value?.tokens?.color), C.value.color)), P = i(() => u(c(h, w.value?.tokens?.rounded), C.value.rounded)), F = i(() => u(c(m, w.value?.tokens?.iconSize), C.value.size)), I = i(() => C.value.customProps), L = i(() => t(I.value?.root, S.value.inheritedAttrs, s({
 		"inline-flex shrink-0 items-center justify-center overflow-hidden": !0,
 		[T.value.root ?? ""]: !0,
 		[P.value ?? ""]: !0,
 		[M.value ?? ""]: j.value || E.value || D.value,
-		[s(N.value, "background") ?? ""]: j.value,
-		[s(N.value, "text") ?? ""]: j.value
+		[u(N.value, "background") ?? ""]: j.value,
+		[u(N.value, "text") ?? ""]: j.value
 	}))), R = i(() => t(I.value?.image, {
 		alt: C.value.alt,
 		src: C.value.src
-	}, u({
+	}, s({
 		"shrink-0 object-cover object-center": !0,
 		[M.value ?? ""]: !0,
 		[P.value ?? ""]: !0,
 		[T.value.image ?? ""]: !0
-	}))), z = i(() => t(I.value?.fallback, {}, u({
+	}))), z = i(() => t(I.value?.fallback, {}, s({
 		"font-medium": !0,
-		[s(F.value, "label") ?? ""]: !0,
-		[s(N.value, "text") ?? ""]: !0,
+		[u(F.value, "label") ?? ""]: !0,
+		[u(N.value, "text") ?? ""]: !0,
 		[T.value.fallback ?? ""]: !0
 	})));
 	return {
 		slots: x,
 		merged: C,
 		rootBind: L,
-		iconBind: i(() => t(I.value?.icon, {}, u({
+		iconBind: i(() => t(I.value?.icon, {}, s({
 			"shrink-0": !0,
-			[s(F.value, "icon") ?? ""]: !0,
-			[s(N.value, "text") ?? ""]: !0
+			[u(F.value, "icon") ?? ""]: !0,
+			[u(N.value, "text") ?? ""]: !0
 		}))),
 		hasImage: D,
 		imageBind: R,

package/dist/Components/Badge/composables/useBadge.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
-import { get as a } from "es-toolkit/compat";
-import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
+import { get as c } from "es-toolkit/compat";
 import { densityProps as l, roundedProps as u, variantProps as d } from "@bridge-ui/core/Tokens/Badge";
 //#region src/Components/Badge/composables/useBadge.ts
 var f = [
@@ -14,7 +14,7 @@ var f = [
 	"variant"
 ];
 function p(p, m) {
-	let h = i(), g = r(() => c({
+	let h = i(), g = r(() => s({
 		bridgeKeys: f,
 		props: {
 			...h,
@@ -27,18 +27,18 @@ function p(p, m) {
 	}), y = n({
 		entry: v,
 		props: () => g.value.componentProps
-	}), b = r(() => _.value.density === "mini"), x = r(() => a(s(l, v.value?.tokens?.density), [_.value.density, _.value.size])), S = r(() => a(s(d, v.value?.tokens?.variant), [_.value.variant, _.value.color])), C = r(() => a(s(u, v.value?.tokens?.rounded), _.value.rounded));
+	}), b = r(() => _.value.density === "mini"), x = r(() => c(o(l, v.value?.tokens?.density), [_.value.density, _.value.size])), S = r(() => c(o(d, v.value?.tokens?.variant), [_.value.variant, _.value.color])), C = r(() => c(o(u, v.value?.tokens?.rounded), _.value.rounded));
 	return {
 		merged: _,
-		rootBind: r(() => e({}, g.value.inheritedAttrs, o({
+		rootBind: r(() => e({}, g.value.inheritedAttrs, a({
 			"inline-flex items-center justify-center font-medium whitespace-nowrap": !0,
 			"w-full": !b.value && _.value.full,
 			"w-fit": !b.value && !_.value.full,
 			[x.value ?? ""]: !0,
 			[C.value ?? ""]: !0,
-			[a(S.value, "background") ?? ""]: !0,
-			[a(S.value, "border") ?? ""]: !0,
-			[a(S.value, "text") ?? ""]: !0,
+			[c(S.value, "background") ?? ""]: !0,
+			[c(S.value, "border") ?? ""]: !0,
+			[c(S.value, "text") ?? ""]: !0,
 			[y.value.root ?? ""]: !0
 		})))
 	};

package/dist/Components/Button/composables/useButton.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
-import { get as a, includes as o, isNil as s } from "es-toolkit/compat";
-import { cn as c, mergeBridgeUILayeredClasses as l, splitComponentProps as u } from "@bridge-ui/core";
+import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
+import { get as c, includes as l, isNil as u } from "es-toolkit/compat";
 import { densityProps as d, roundedProps as f, variantProps as p } from "@bridge-ui/core/Tokens/Button";
 //#region src/Components/Button/composables/useButton.ts
 var m = [
@@ -23,7 +23,7 @@ var m = [
 	"customProps"
 ];
 function h(h, g) {
-	let _ = i(), v = r(() => u({
+	let _ = i(), v = r(() => s({
 		bridgeKeys: m,
 		props: {
 			..._,
@@ -40,22 +40,22 @@ function h(h, g) {
 		if (!(!w.value || D.value || !y.value.href)) return y.value.href;
 	}), M = r(() => {
 		if (!T.value) return;
-		let e = a(v.value.inheritedAttrs, "type");
-		return o([
+		let e = c(v.value.inheritedAttrs, "type");
+		return l([
 			"submit",
 			"reset",
 			"button"
 		], e) ? e : "button";
-	}), N = r(() => a(l(d, b.value?.tokens?.density), [y.value.density, y.value.size])), P = r(() => s(v.value.componentProps.variant) ? E.value ? "flat" : y.value.variant : v.value.componentProps.variant), F = r(() => a(l(p, b.value?.tokens?.variant), [P.value, y.value.color])), I = r(() => a(l(f, b.value?.tokens?.rounded), y.value.rounded));
+	}), N = r(() => c(o(d, b.value?.tokens?.density), [y.value.density, y.value.size])), P = r(() => u(v.value.componentProps.variant) ? E.value ? "flat" : y.value.variant : v.value.componentProps.variant), F = r(() => c(o(p, b.value?.tokens?.variant), [P.value, y.value.color])), I = r(() => c(o(f, b.value?.tokens?.rounded), y.value.rounded));
 	return {
 		tag: C,
 		merged: y,
 		isMini: E,
-		iconBind: r(() => e(x.value?.icon, {}, c({
+		iconBind: r(() => e(x.value?.icon, {}, a({
 			"shrink-0": !0,
 			[S.value.icon ?? ""]: !0
 		}))),
-		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, c({
+		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, a({
 			"inline-flex items-center justify-center": !0,
 			"cursor-pointer outline-none outline-hidden": !0,
 			"shrink-0": E.value,
@@ -64,9 +64,9 @@ function h(h, g) {
 			"w-full": !E.value && y.value.full,
 			"w-fit": !E.value && !y.value.full,
 			"group hover:shadow-xs": !E.value,
-			[a(F.value, "base") ?? ""]: !0,
-			[a(F.value, "hover") ?? ""]: !0,
-			[a(F.value, "focus") ?? ""]: !0,
+			[c(F.value, "base") ?? ""]: !0,
+			[c(F.value, "hover") ?? ""]: !0,
+			[c(F.value, "focus") ?? ""]: !0,
 			"transition-all ease-in-out duration-200": !0,
 			"focus:ring-2": !0,
 			"focus:ring-offset-background-white dark:focus:ring-offset-background-dark": !0,
@@ -76,19 +76,19 @@ function h(h, g) {
 		}))),
 		rootHref: j,
 		rootType: M,
-		endIconBind: r(() => e(x.value?.endIcon, {}, c({
+		endIconBind: r(() => e(x.value?.endIcon, {}, a({
 			"shrink-0": !0,
 			[S.value.endIcon ?? ""]: !0
 		}))),
 		endSlotBind: r(() => e(x.value?.end, {}, "inline-flex shrink-0 items-center")),
 		rootAriaBusy: k,
 		rootDisabled: O,
-		startIconBind: r(() => e(x.value?.startIcon, {}, c({
+		startIconBind: r(() => e(x.value?.startIcon, {}, a({
 			"shrink-0": !0,
 			[S.value.startIcon ?? ""]: !0
 		}))),
 		startSlotBind: r(() => e(x.value?.start, {}, "inline-flex shrink-0 items-center")),
-		loadingIconBind: r(() => e(x.value?.loading, {}, c({
+		loadingIconBind: r(() => e(x.value?.loading, {}, a({
 			"shrink-0 animate-spin": !0,
 			[S.value.loading ?? ""]: !0
 		}))),

package/dist/Components/Card/composables/useCard.js

@@ -1,8 +1,8 @@
 import { hasNamedSlot as e } from "../../../Utils/slotOrProp.js";
 import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
 import { computed as i, useAttrs as a, useSlots as o } from "vue";
-import { get as s } from "es-toolkit/compat";
-import { cn as c, mergeBridgeUILayeredClasses as l, splitComponentProps as u } from "@bridge-ui/core";
+import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
+import { get as u } from "es-toolkit/compat";
 import { paddingProps as d, roundedProps as f, shadowProps as p, variantProps as m } from "@bridge-ui/core/Tokens/Card";
 //#region src/Components/Card/composables/useCard.ts
 var h = [
@@ -16,7 +16,7 @@ var h = [
 	"customProps"
 ];
 function g(g, _) {
-	let v = a(), y = o(), b = i(() => u({
+	let v = a(), y = o(), b = i(() => l({
 		bridgeKeys: h,
 		props: {
 			...v,
@@ -32,44 +32,44 @@ function g(g, _) {
 	}), T = i(() => {
 		let e = y.default?.();
 		return !!(e && e.length > 0);
-	}), E = i(() => e(y, "footer")), D = i(() => s(l(m, S.value?.tokens?.variant), x.value.variant)), O = i(() => x.value.borderless ? !1 : !!s(D.value, "border")), k = i(() => {
-		if (x.value.variant === "elevated") return s(l(p, S.value?.tokens?.shadow), x.value.shadow);
-	}), A = i(() => s(l(d, S.value?.tokens?.padding), x.value.padding)), j = i(() => s(l(f, S.value?.tokens?.rounded), x.value.rounded)), M = i(() => t(C.value?.body, {}, c({
+	}), E = i(() => e(y, "footer")), D = i(() => u(c(m, S.value?.tokens?.variant), x.value.variant)), O = i(() => x.value.borderless ? !1 : !!u(D.value, "border")), k = i(() => {
+		if (x.value.variant === "elevated") return u(c(p, S.value?.tokens?.shadow), x.value.shadow);
+	}), A = i(() => u(c(d, S.value?.tokens?.padding), x.value.padding)), j = i(() => u(c(f, S.value?.tokens?.rounded), x.value.rounded)), M = i(() => t(C.value?.body, {}, s({
 		grow: !0,
-		[s(A.value, "body") ?? ""]: !0,
-		[s(D.value, "text") ?? ""]: !0,
-		[s(w.value, "body") ?? ""]: !0
-	}))), N = i(() => t(C.value?.footer, {}, c({
+		[u(A.value, "body") ?? ""]: !0,
+		[u(D.value, "text") ?? ""]: !0,
+		[u(w.value, "body") ?? ""]: !0
+	}))), N = i(() => t(C.value?.footer, {}, s({
 		"border-t": O.value,
-		[s(A.value, "footer") ?? ""]: !0,
-		[s(D.value, "border") ?? ""]: O.value,
-		[s(D.value, "footer") ?? ""]: !0,
-		[s(j.value, "footer") ?? ""]: !0,
-		[s(w.value, "footer") ?? ""]: !0
-	}))), P = i(() => t(C.value?.header, {}, c({
+		[u(A.value, "footer") ?? ""]: !0,
+		[u(D.value, "border") ?? ""]: O.value,
+		[u(D.value, "footer") ?? ""]: !0,
+		[u(j.value, "footer") ?? ""]: !0,
+		[u(w.value, "footer") ?? ""]: !0
+	}))), P = i(() => t(C.value?.header, {}, s({
 		"flex items-center justify-between": !0,
 		"border-b": O.value,
-		[s(A.value, "header") ?? ""]: !0,
-		[s(D.value, "border") ?? ""]: O.value,
-		[s(j.value, "header") ?? ""]: !0,
-		[s(w.value, "header") ?? ""]: !0
+		[u(A.value, "header") ?? ""]: !0,
+		[u(D.value, "border") ?? ""]: O.value,
+		[u(j.value, "header") ?? ""]: !0,
+		[u(w.value, "header") ?? ""]: !0
 	})));
 	return {
 		slots: y,
 		merged: x,
 		bodyBind: M,
-		rootBind: i(() => t(C.value?.root, b.value.inheritedAttrs, c({
+		rootBind: i(() => t(C.value?.root, b.value.inheritedAttrs, s({
 			"flex w-full flex-col": !0,
 			[k.value ?? ""]: !0,
-			[s(j.value, "root") ?? ""]: !0,
-			[s(D.value, "root") ?? ""]: !0,
-			[s(w.value, "root") ?? ""]: !0
+			[u(j.value, "root") ?? ""]: !0,
+			[u(D.value, "root") ?? ""]: !0,
+			[u(w.value, "root") ?? ""]: !0
 		}))),
 		hasFooter: E,
-		titleBind: i(() => t(C.value?.title, {}, c({
+		titleBind: i(() => t(C.value?.title, {}, s({
 			"text-base font-medium whitespace-normal": !0,
-			[s(D.value, "text") ?? ""]: !0,
-			[s(w.value, "title") ?? ""]: !0
+			[u(D.value, "text") ?? ""]: !0,
+			[u(w.value, "title") ?? ""]: !0
 		}))),
 		footerBind: N,
 		headerBind: P,