@bridge-ui/vue 0.0.6 → 0.0.8

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

@@ -0,0 +1,386 @@
+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
+	}, {
+		componentName: "Autocomplete",
+		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, [
+			"Autocomplete",
+			"tokens",
+			"listbox",
+			"color"
+		])), q.merged.value.color ?? "primary");
+		return q.invalidated.value ? d(xe, h(Ee.value, [
+			"Autocomplete",
+			"tokens",
+			"listbox",
+			"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,
+		componentName: "Autocomplete",
+		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.d.ts

@@ -7,7 +7,7 @@ export declare function useAvatar(props: AvatarProps, libDefaults: AvatarLibDefa
         [name: string]: import('vue').Slot<any> | undefined;
     }>;
     merged: import('vue').ComputedRef<AvatarMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<AvatarProps, "color" | "icon" | "size" | "classes" | "customProps" | "rounded" | "alt" | "fallback" | "src">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<AvatarProps, "color" | "icon" | "size" | "classes" | "customProps" | "rounded" | "alt" | "src" | "fallback">>>;
     iconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
     hasImage: import('vue').ComputedRef<boolean>;
     imageBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ImgHTMLAttributes | undefined, {

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/BaseField/BaseField.js

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

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

@@ -0,0 +1,15 @@
+import { BaseFieldSlots } from './baseField.types';
+import { UseBaseFieldReturn } from './composables/useBaseField';
+type __VLS_Slots = BaseFieldSlots;
+type __VLS_Props = {
+    field: UseBaseFieldReturn;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/BaseField/BaseField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,41 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, resolveNamedSlot as n, resolveSlotOrProp as r } from "../../Utils/slotOrProp.js";
+import i from "./BaseFieldLabel.js";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, resolveDynamicComponent as _, unref as v, useSlots as y } from "vue";
+//#region src/Components/BaseField/BaseField.vue?vue&type=script&setup=true&lang.ts
+var b = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], x = ["id"], S = ["id", "aria-hidden"], C = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "BaseField",
+	props: { field: {} },
+	setup(d) {
+		let C = d, w = y(), T = a(() => ({
+			...C.field,
+			slots: {
+				...C.field.slots,
+				...w
+			}
+		})), E = a(() => t(T.value.slots, "label", T.value.merged.value.label) || t(T.value.slots, "corner", T.value.merged.value.corner));
+		return (a, d) => (h(), c("div", p(T.value.rootBind.value, {
+			"data-invalid": T.value.invalidated.value || void 0,
+			"aria-disabled": T.value.isDisabled.value || void 0,
+			"aria-readonly": T.value.isReadonly.value || void 0
+		}), [
+			E.value ? (h(), c("div", m(p({ key: 0 }, T.value.headerBind.value)), [u(i, { api: T.value }, null, 8, ["api"]), v(t)(T.value.slots, "corner", T.value.merged.value.corner) ? (h(), c("span", m(p({ key: 0 }, T.value.cornerBind.value)), [(h(), o(_(v(r)(T.value.slots, "corner", T.value.merged.value.corner))))], 16)) : s("", !0)], 16)) : s("", !0),
+			l("div", m(f(T.value.groupBind.value)), [
+				v(e)(T.value.slots, "start") ? (h(), c("div", m(p({ key: 0 }, T.value.startSlotBind.value)), [(h(), o(_(v(n)(T.value.slots, "start"))))], 16)) : s("", !0),
+				g(a.$slots, "default"),
+				v(e)(T.value.slots, "end") ? (h(), c("div", m(p({ key: 1 }, T.value.endSlotBind.value)), [(h(), o(_(v(n)(T.value.slots, "end"))))], 16)) : s("", !0)
+			], 16),
+			!T.value.invalidated.value && v(t)(T.value.slots, "description", T.value.merged.value.description) ? (h(), c("p", p({ key: 1 }, T.value.descriptionBind.value, { id: `${T.value.controlId.value}-description` }), [(h(), o(_(v(r)(T.value.slots, "description", T.value.merged.value.description))))], 16, x)) : s("", !0),
+			T.value.merged.value.hideErrorMessage ? s("", !0) : (h(), c("p", p({ key: 2 }, T.value.errorBind.value, {
+				id: `${T.value.controlId.value}-error`,
+				"aria-hidden": T.value.showErrorMessageContent.value ? void 0 : !0
+			}), [T.value.showErrorMessageContent.value ? (h(), o(_(v(r)(T.value.slots, "errorMessage", T.value.merged.value.errorMessage)), { key: 0 })) : s("", !0)], 16, S))
+		], 16, b));
+	}
+});
+//#endregion
+export { C as default };

package/dist/Components/BaseField/BaseFieldLabel.js

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

package/dist/Components/BaseField/BaseFieldLabel.vue.d.ts

@@ -0,0 +1,7 @@
+import { UseBaseFieldReturn } from './composables/useBaseField';
+type __VLS_Props = {
+    api: UseBaseFieldReturn;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/BaseField/BaseFieldLabel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,16 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n, resolveNamedSlot as r } from "../../Utils/slotOrProp.js";
+import i from "../Label/Label.js";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+//#region src/Components/BaseField/BaseFieldLabel.vue?vue&type=script&setup=true&lang.ts
+var v = /* @__PURE__ */ u({
+	__name: "BaseFieldLabel",
+	props: { api: {} },
+	setup(u) {
+		return (v, y) => g(t)(u.api.slots, "label", u.api.merged.value.label) ? (p(), o(g(i), f(d({ key: 0 }, u.api.fieldLabelProps.value)), {
+			default: _(() => [g(e)(u.api.slots, "label") ? (p(), o(m(g(r)(u.api.slots, "label")), { key: 0 })) : g(n)(u.api.merged.value.label) ? (p(), c(a, { key: 1 }, [l(h(u.api.merged.value.label), 1)], 64)) : s("", !0)]),
+			_: 1
+		}, 16)) : s("", !0);
+	}
+});
+//#endregion
+export { v as default };