@bridge-ui/vue 0.0.5 → 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/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,7 @@ var p = /* @__PURE__ */ a({
 		color: {},
 		customProps: {},
 		fallback: {},
-		icon: { type: [Function, Object] },
+		icon: {},
 		rounded: {},
 		size: {},
 		src: {}

package/dist/Components/Avatar/avatar.types.d.ts

@@ -1,6 +1,6 @@
-import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, ImgHTMLAttributes, Slot } from 'vue';
 import { AvatarColor, AvatarRounded, AvatarSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { IconSource } from '../../Adapters/Icon';
 import { IconProps } from '../Icon';
 export interface AvatarSizeOverrides {}
 export interface AvatarColorOverrides {}
@@ -81,7 +81,7 @@ export interface AvatarOwnProps {
      *
      * @default undefined
      */
-    icon?: LucideIcon;
+    icon?: IconSource;
     /**
      * The roundedness of the avatar.
      *

package/dist/Components/Avatar/composables/useAvatar.d.ts

@@ -15,7 +15,7 @@ export declare function useAvatar(props: AvatarProps, libDefaults: AvatarLibDefa
         src: string | undefined;
     }>>;
     fallbackBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    resolvedIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
+    resolvedIcon: import('vue').ComputedRef<import('../../..').IconSource>;
     hasFallbackSlot: import('vue').ComputedRef<boolean>;
     hasFallbackText: import('vue').ComputedRef<boolean>;
     hasCustomContent: import('vue').ComputedRef<boolean>;

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

@@ -1,12 +1,11 @@
 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 { User as p } from "@lucide/vue";
-import { colorProps as m, iconSizeProps as h, roundedProps as g, sizeProps as _ } from "@bridge-ui/core/Tokens/Avatar";
+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 v = [
+var _ = [
 	"alt",
 	"src",
 	"icon",
@@ -17,58 +16,58 @@ var v = [
 	"fallback",
 	"customProps"
 ];
-function y(y, b) {
-	let x = a(), S = o(), C = i(() => f({
-		bridgeKeys: v,
+function v(v, y) {
+	let b = a(), x = o(), S = i(() => l({
+		bridgeKeys: _,
 		props: {
-			...x,
-			...y
+			...b,
+			...v
 		}
-	})), { merged: w, entry: T } = n({
-		libDefaults: b,
+	})), { merged: C, entry: w } = n({
+		libDefaults: y,
 		componentName: "Avatar",
-		props: () => C.value.componentProps
-	}), E = r({
-		entry: T,
-		props: () => C.value.componentProps
-	}), D = i(() => e(S, "default")), O = i(() => !l(w.value.src) && !c(w.value.src)), k = i(() => e(S, "fallback")), A = i(() => !l(w.value.fallback) && !c(w.value.fallback)), j = i(() => w.value.icon ?? p), M = i(() => !O.value && !D.value), N = i(() => s(d(_, T.value?.tokens?.size), w.value.size)), P = i(() => s(d(m, T.value?.tokens?.color), w.value.color)), F = i(() => s(d(g, T.value?.tokens?.rounded), w.value.rounded)), I = i(() => s(d(h, T.value?.tokens?.iconSize), w.value.size)), L = i(() => w.value.customProps), R = i(() => t(L.value?.root, C.value.inheritedAttrs, u({
+		props: () => S.value.componentProps
+	}), T = r({
+		entry: w,
+		props: () => S.value.componentProps
+	}), 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,
-		[E.value.root ?? ""]: !0,
-		[F.value ?? ""]: !0,
-		[N.value ?? ""]: M.value || D.value || O.value,
-		[s(P.value, "background") ?? ""]: M.value,
-		[s(P.value, "text") ?? ""]: M.value
-	}))), z = i(() => t(L.value?.image, {
-		alt: w.value.alt,
-		src: w.value.src
-	}, u({
+		[T.value.root ?? ""]: !0,
+		[P.value ?? ""]: !0,
+		[M.value ?? ""]: j.value || E.value || D.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
+	}, s({
 		"shrink-0 object-cover object-center": !0,
-		[N.value ?? ""]: !0,
-		[F.value ?? ""]: !0,
-		[E.value.image ?? ""]: !0
-	}))), B = i(() => t(L.value?.fallback, {}, u({
+		[M.value ?? ""]: !0,
+		[P.value ?? ""]: !0,
+		[T.value.image ?? ""]: !0
+	}))), z = i(() => t(I.value?.fallback, {}, s({
 		"font-medium": !0,
-		[s(I.value, "label") ?? ""]: !0,
-		[s(P.value, "text") ?? ""]: !0,
-		[E.value.fallback ?? ""]: !0
+		[u(F.value, "label") ?? ""]: !0,
+		[u(N.value, "text") ?? ""]: !0,
+		[T.value.fallback ?? ""]: !0
 	})));
 	return {
-		slots: S,
-		merged: w,
-		rootBind: R,
-		iconBind: i(() => t(L.value?.icon, {}, u({
+		slots: x,
+		merged: C,
+		rootBind: L,
+		iconBind: i(() => t(I.value?.icon, {}, s({
 			"shrink-0": !0,
-			[s(I.value, "icon") ?? ""]: !0,
-			[s(P.value, "text") ?? ""]: !0
+			[u(F.value, "icon") ?? ""]: !0,
+			[u(N.value, "text") ?? ""]: !0
 		}))),
-		hasImage: O,
-		imageBind: z,
-		fallbackBind: B,
-		resolvedIcon: j,
-		hasFallbackSlot: k,
-		hasFallbackText: A,
-		hasCustomContent: D
+		hasImage: D,
+		imageBind: R,
+		fallbackBind: z,
+		resolvedIcon: A,
+		hasFallbackSlot: O,
+		hasFallbackText: k,
+		hasCustomContent: E
 	};
 }
 //#endregion
-export { y as useAvatar };
+export { v as useAvatar };

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
 		})))
 	};