@bridge-ui/vue 0.0.5 → 0.0.6

package/dist/Components/ListItem/composables/useListItem.js

@@ -6,9 +6,8 @@ import { LISTBOX_INJECTION_KEY as c } from "../../Listbox/listboxInjectionKey.js
 import { computed as l, getCurrentInstance as u, inject as d, onBeforeUnmount as f, toValue as p, useAttrs as m, watch as h } from "vue";
 import { get as g, isNull as _, omit as v } from "es-toolkit/compat";
 import { cn as y, splitComponentProps as b } from "@bridge-ui/core";
-import { Check as x } from "@lucide/vue";
 //#region src/Components/ListItem/composables/useListItem.ts
-var S = [
+var x = [
 	"as",
 	"role",
 	"dense",
@@ -23,109 +22,109 @@ var S = [
 	"interactive",
 	"selectedIcon"
 ];
-function C(t, n, C) {
-	let w = m(), T = d(o, null), E = d(c, null), D = E != null, O = l(() => b({
+function S(t, n, S) {
+	let C = m(), w = d(o, null), T = d(c, null), E = T != null, D = l(() => b({
 		props: {
-			...w,
+			...C,
 			...t
 		},
-		bridgeKeys: S
-	})), { merged: k, entry: A } = i({
+		bridgeKeys: x
+	})), { merged: O, entry: k } = i({
 		libDefaults: n,
 		componentName: "ListItem",
-		props: () => O.value.componentProps
-	}), j = l(() => E ? p(E) : null), M = l(() => k.value.value == null || !D ? null : {
-		value: k.value.value,
-		description: k.value.secondary,
-		disabled: !!k.value.disabled,
-		label: k.value.primary ?? String(k.value.value)
-	}), N;
+		props: () => D.value.componentProps
+	}), A = l(() => T ? p(T) : null), j = l(() => O.value.value == null || !E ? null : {
+		value: O.value.value,
+		description: O.value.secondary,
+		disabled: !!O.value.disabled,
+		label: O.value.primary ?? String(O.value.value)
+	}), M;
 	h(() => {
-		let e = M.value;
+		let e = j.value;
 		return e ? `${String(e.value)}:${e.label}:${e.disabled}:${e.description ?? ""}` : null;
 	}, () => {
-		N?.(), N = void 0;
-		let e = M.value;
-		!e || !E || (N = p(E).registerOption(e));
+		M?.(), M = void 0;
+		let e = j.value;
+		!e || !T || (M = p(T).registerOption(e));
 	}, { immediate: !0 }), f(() => {
-		N?.();
+		M?.();
 	});
-	let P = l(() => M.value != null), F = l(() => !M.value || !j.value ? !1 : j.value.isSelected(M.value.value)), I = l(() => !M.value || !j.value ? -1 : j.value.getOptionIndex(M.value.value)), L = l(() => !j.value || I.value < 0 ? !1 : j.value.highlightedIndex === I.value), R = l(() => k.value.customProps), z = a({
-		entry: A,
-		props: () => O.value.componentProps
-	}), B = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : T ? p(T).dense : !1), V = l(() => e(C, "primary") || e(C, "default") || !!k.value.primary), H = l(() => e(C, "secondary") || !!k.value.secondary), U = l(() => e(C, "start")), W = l(() => P.value ? !F.value || !j.value?.showCheckmark ? null : x : !k.value.selected || _(k.value.selectedIcon) ? null : k.value.selectedIcon ?? x), G = l(() => e(C, "end") || W.value != null), K = l(() => v(O.value.inheritedAttrs, [])), q = l(() => r(R.value?.root, K.value, {
+	let N = l(() => j.value != null), P = l(() => !j.value || !A.value ? !1 : A.value.isSelected(j.value.value)), F = l(() => !j.value || !A.value ? -1 : A.value.getOptionIndex(j.value.value)), I = l(() => !A.value || F.value < 0 ? !1 : A.value.highlightedIndex === F.value), L = l(() => O.value.customProps), R = a({
+		entry: k,
+		props: () => D.value.componentProps
+	}), z = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : w ? p(w).dense : !1), B = l(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = l(() => e(S, "secondary") || !!O.value.secondary), H = l(() => e(S, "start")), U = l(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || _(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), W = l(() => e(S, "end") || U.value != null), G = l(() => v(D.value.inheritedAttrs, [])), K = l(() => r(L.value?.root, G.value, {
 		class: y({
 			"list-none": !0,
-			"border-b border-black/10 last:border-b-0 dark:border-white/10": k.value.divider,
-			[g(z.value, "root") ?? ""]: !0
+			"border-b border-black/10 last:border-b-0 dark:border-white/10": O.value.divider,
+			[g(R.value, "root") ?? ""]: !0
 		}),
-		id: P.value && j.value?.listboxId && I.value >= 0 ? s(j.value.listboxId, I.value) : void 0
-	})), J = l(() => k.value.interactive || P.value ? r(R.value?.interactive, {}, {
-		"aria-disabled": k.value.disabled ? !0 : void 0,
-		role: P.value ? "option" : k.value.role,
-		tabindex: k.value.disabled || P.value ? -1 : 0,
-		"data-selected": k.value.selected || F.value ? !0 : void 0,
-		"aria-selected": P.value ? F.value : void 0,
-		onMousedown: P.value ? (e) => {
+		id: N.value && A.value?.listboxId && F.value >= 0 ? s(A.value.listboxId, F.value) : void 0
+	})), q = l(() => O.value.interactive || N.value ? r(L.value?.interactive, {}, {
+		"aria-disabled": O.value.disabled ? !0 : void 0,
+		role: N.value ? "option" : O.value.role,
+		tabindex: O.value.disabled || N.value ? -1 : 0,
+		"data-selected": O.value.selected || P.value ? !0 : void 0,
+		"aria-selected": N.value ? P.value : void 0,
+		onMousedown: N.value ? (e) => {
 			e.preventDefault();
 		} : void 0,
-		onClick: P.value ? () => {
-			M.value && j.value?.onSelect(M.value);
+		onClick: N.value ? () => {
+			j.value && A.value?.onSelect(j.value);
 		} : void 0,
 		class: y({
 			"flex w-full min-w-0 items-center gap-x-3 text-left text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
-			"cursor-pointer select-none": !k.value.disabled,
+			"cursor-pointer select-none": !O.value.disabled,
 			"px-4": !0,
-			"py-2": !B.value,
-			"py-1.5": B.value,
-			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !k.value.disabled && !P.value,
-			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": k.value.selected && !P.value,
-			[j.value?.optionSelectedClass ?? ""]: P.value && F.value,
-			[j.value?.mergedClasses.optionSelected ?? ""]: P.value && F.value,
-			[j.value?.optionHighlightedClass ?? ""]: P.value && L.value && !F.value,
-			[j.value?.mergedClasses.optionHighlighted ?? ""]: P.value && L.value && !F.value,
-			"opacity-50 pointer-events-none": k.value.disabled,
-			[g(z.value, "interactive") ?? ""]: !0,
-			[j.value?.sizeClasses?.option ?? ""]: !0
+			"py-2": !z.value,
+			"py-1.5": z.value,
+			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !O.value.disabled && !N.value,
+			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": O.value.selected && !N.value,
+			[A.value?.optionSelectedClass ?? ""]: N.value && P.value,
+			[A.value?.mergedClasses.optionSelected ?? ""]: N.value && P.value,
+			[A.value?.optionHighlightedClass ?? ""]: N.value && I.value && !P.value,
+			[A.value?.mergedClasses.optionHighlighted ?? ""]: N.value && I.value && !P.value,
+			"opacity-50 pointer-events-none": O.value.disabled,
+			[g(R.value, "interactive") ?? ""]: !0,
+			[A.value?.sizeClasses?.option ?? ""]: !0
 		})
-	}) : null), Y = l(() => y({
+	}) : null), J = l(() => y({
 		"flex w-full min-w-0 gap-x-3": !0,
-		"items-center text-dark-900 dark:text-dark-100": !k.value.interactive,
-		"px-4": !k.value.interactive,
-		"py-2": !k.value.interactive && !B.value,
-		"py-1.5": !k.value.interactive && B.value
-	})), X = l(() => r(R.value?.start, {}, y({
+		"items-center text-dark-900 dark:text-dark-100": !O.value.interactive,
+		"px-4": !O.value.interactive,
+		"py-2": !O.value.interactive && !z.value,
+		"py-1.5": !O.value.interactive && z.value
+	})), Y = l(() => r(L.value?.start, {}, y({
 		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
-		[g(z.value, "start") ?? ""]: !0
-	}))), Z = l(() => r(R.value?.content, {}, y({
+		[g(R.value, "start") ?? ""]: !0
+	}))), X = l(() => r(L.value?.content, {}, y({
 		"min-w-0 flex-1": !0,
-		[g(z.value, "content") ?? ""]: !0
-	}))), Q = l(() => r(R.value?.primary, {}, y("block truncate text-sm font-medium", j.value?.sizeClasses?.primary, g(z.value, "primary")))), $ = l(() => r(R.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", j.value?.sizeClasses?.secondary, g(z.value, "secondary"))));
+		[g(R.value, "content") ?? ""]: !0
+	}))), Z = l(() => r(L.value?.primary, {}, y("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, g(R.value, "primary")))), Q = l(() => r(L.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, g(R.value, "secondary"))));
 	return {
-		merged: k,
-		hasEnd: G,
-		endBind: l(() => r(R.value?.end, {}, y({
+		merged: O,
+		hasEnd: W,
+		endBind: l(() => r(L.value?.end, {}, y({
 			"ml-auto flex shrink-0 items-center": !0,
-			[g(z.value, "end") ?? ""]: !0
+			[g(R.value, "end") ?? ""]: !0
 		}))),
-		rootBind: q,
-		rowClass: Y,
-		hasStart: U,
-		startBind: X,
-		hasPrimary: V,
-		contentBind: Z,
-		primaryBind: Q,
-		hasSecondary: H,
-		secondaryBind: $,
-		interactiveBind: J,
-		selectedIconBind: l(() => r(R.value?.selectedIcon, {}, {
+		rootBind: K,
+		rowClass: J,
+		hasStart: H,
+		startBind: Y,
+		hasPrimary: B,
+		contentBind: X,
+		primaryBind: Z,
+		hasSecondary: V,
+		secondaryBind: Q,
+		interactiveBind: q,
+		selectedIconBind: l(() => r(L.value?.selectedIcon, {}, {
 			size: "sm",
-			class: y("shrink-0", j.value?.checkClass, g(z.value, "selectedIcon"))
+			class: y("shrink-0", A.value?.checkClass, g(R.value, "selectedIcon"))
 		})),
-		resolvedSelectedIcon: W
+		resolvedSelectedIcon: U
 	};
 }
-function w(r, i) {
+function C(r, i) {
 	if (e(r, "primary")) return n(r, "primary");
 	if (e(r, "default")) return n(r, "default");
 	if (!t(i)) return () => null;
@@ -133,4 +132,4 @@ function w(r, i) {
 	return () => a;
 }
 //#endregion
-export { w as resolveListItemPrimary, C as useListItem };
+export { C as resolveListItemPrimary, S as useListItem };

package/dist/Components/ListItem/listItem.types.d.ts

@@ -1,6 +1,6 @@
-import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, Slot, VNode } from 'vue';
 import { ListboxValue, MergeHtmlProps } from '@bridge-ui/core';
+import { IconSource } from '../../Adapters/Icon';
 import { IconProps } from '../Icon';
 export interface ListItemClasses {
     /**
@@ -146,7 +146,7 @@ export interface ListItemOwnProps {
      *
      * @default Check
      */
-    selectedIcon?: null | LucideIcon;
+    selectedIcon?: null | IconSource;
     /**
      * When set inside a `Listbox`, registers this row as a selectable option.
      *

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

@@ -23,10 +23,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     multiple: boolean;
     disableAutoFocus: boolean;
     placement: import('@floating-ui/utils').Placement;
-    emptyMessage: string;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
-    loadingMessage: string;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -1,19 +1,20 @@
-import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as n } from "../../Utils/index.js";
-import r from "../List/List.js";
-import { useListbox as i } from "./composables/useListbox.js";
-import { LISTBOX_INJECTION_KEY as ee } from "./listboxInjectionKey.js";
-import te from "../ListItem/ListItem.js";
-import ne from "../ListSection/ListSection.js";
-import a from "../Menu/Menu.js";
-import o from "../Progress/Progress.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeProps as y, openBlock as b, provide as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as re, useSlots as ie, watch as O, withCtx as k } from "vue";
+import { useI18nAdapter as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import { hasNamedSlot as t, resolveNamedSlot as n } from "../../Utils/slotOrProp.js";
+import { mergeNestedComponentProps as r } from "../../Utils/index.js";
+import ee from "../List/List.js";
+import { useListbox as te } from "./composables/useListbox.js";
+import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
+import a from "../ListItem/ListItem.js";
+import o from "../ListSection/ListSection.js";
+import s from "../Menu/Menu.js";
+import ne from "../Progress/Progress.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as E, toDisplayString as D, unref as O, useModel as re, useSlots as ie, watch as k, withCtx as A } from "vue";
 import { isNil as ae } from "es-toolkit/compat";
-import { cn as A, entriesFromListboxOptions as j, flattenListboxOptions as M, mapListboxEntriesToRows as N } from "@bridge-ui/core";
+import { cn as oe, entriesFromListboxOptions as se, flattenListboxOptions as j, mapListboxEntriesToRows as M, resolveMessage as N } from "@bridge-ui/core";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var P = { key: 1 }, F = /* @__PURE__ */ h({
+var P = { key: 1 }, F = /* @__PURE__ */ g({
 	__name: "Listbox",
-	props: /* @__PURE__ */ _({
+	props: /* @__PURE__ */ v({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -23,7 +24,7 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 			default: !1
 		},
 		disableMaxHeight: { type: Boolean },
-		emptyMessage: { default: "No options" },
+		emptyMessage: {},
 		entries: {},
 		hideEmptyMessage: {
 			type: Boolean,
@@ -38,7 +39,7 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 			type: Boolean,
 			default: !1
 		},
-		loadingMessage: { default: "Loading..." },
+		loadingMessage: {},
 		maxHeight: {},
 		multiple: {
 			type: Boolean,
@@ -59,99 +60,99 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ _([
+	emits: /* @__PURE__ */ v([
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(h, { emit: _ }) {
-		let F = ie(), I = _, L = re(h, "modelValue");
-		O(L, (e) => {
+	setup(g, { emit: v }) {
+		let F = ie(), I = v, L = re(g, "modelValue");
+		k(L, (e) => {
 			I("show-change", e);
 		});
-		let R = h, { merged: z, checkClass: B, scrollBind: V, messageBind: H, sizeClasses: U, mergedClasses: W, optionSelectedClass: G, optionHighlightedClass: oe } = i(R, {
+		let R = g, z = e(), B = l(() => R.emptyMessage ?? N("No options", z.value)), V = l(() => R.loadingMessage ?? N("Loading...", z.value)), { merged: H, checkClass: U, scrollBind: W, messageBind: G, sizeClasses: K, mergedClasses: q, optionSelectedClass: ce, optionHighlightedClass: le } = te(R, {
 			size: "md",
 			color: "primary"
-		}), K = c(() => R.options ?? []), q = c(() => R.entries ? R.entries : j(K.value)), J = c(() => M(q.value)), Y = c(() => e(F, "default")), X = c(() => !R.loading && !Y.value && J.value.length === 0 && R.hideEmptyMessage !== !0), se = c(() => A(B.value, W.value.check)), Z = S([]);
-		function Q(e) {
+		}), ue = l(() => R.options ?? []), J = l(() => R.entries ? R.entries : se(ue.value)), Y = l(() => j(J.value)), X = l(() => t(F, "default")), Z = l(() => !R.loading && !X.value && Y.value.length === 0 && R.hideEmptyMessage !== !0), de = l(() => oe(U.value, q.value.check)), Q = C([]);
+		function $(e) {
 			return R.isSelected?.(e) ?? !1;
 		}
-		function ce(e) {
+		function fe(e) {
 			e.disabled || I("select", e);
 		}
-		function le(e) {
-			return Z.value.some((t) => String(t.value) === String(e.value)) || (Z.value = [...Z.value, e]), () => {
-				Z.value = Z.value.filter((t) => String(t.value) !== String(e.value));
+		function pe(e) {
+			return Q.value.some((t) => String(t.value) === String(e.value)) || (Q.value = [...Q.value, e]), () => {
+				Q.value = Q.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function ue(e) {
-			return (Y.value ? Z.value : J.value).findIndex((t) => String(t.value) === String(e));
+		function me(e) {
+			return (X.value ? Q.value : Y.value).findIndex((t) => String(t.value) === String(e));
 		}
-		O(Z, (e) => {
-			Y.value && I("registered-options-change", e);
-		}, { deep: !0 }), x(ee, c(() => ({
-			getOptionIndex: ue,
-			registerOption: le,
-			onSelect: ce,
+		k(Q, (e) => {
+			X.value && I("registered-options-change", e);
+		}, { deep: !0 }), S(i, l(() => ({
+			getOptionIndex: me,
+			registerOption: pe,
+			onSelect: fe,
 			listboxId: R.listboxId,
-			isSelected: Q,
-			sizeClasses: U.value,
+			isSelected: $,
+			sizeClasses: K.value,
 			showCheckmark: R.showCheckmark,
-			checkClass: se.value,
+			checkClass: de.value,
 			highlightedIndex: R.highlightedIndex,
-			optionSelectedClass: G.value,
-			optionHighlightedClass: oe.value,
+			optionSelectedClass: ce.value,
+			optionHighlightedClass: le.value,
 			mergedClasses: {
-				optionSelected: W.value.optionSelected,
-				optionHighlighted: W.value.optionHighlighted
+				optionSelected: q.value.optionSelected,
+				optionHighlighted: q.value.optionHighlighted
 			}
 		})));
-		let de = c(() => N(q.value, Q)), fe = c(() => z.value.customProps?.menu), pe = c(() => z.value.customProps?.list), $ = c(() => z.value.customProps?.listItem), me = c(() => z.value.customProps?.progress), he = c(() => z.value.customProps?.listSection), ge = c(() => ({
+		let he = l(() => M(J.value, $)), ge = l(() => H.value.customProps?.menu), _e = l(() => H.value.customProps?.list), ve = l(() => H.value.customProps?.listItem), ye = l(() => H.value.customProps?.progress), be = l(() => H.value.customProps?.listSection), xe = l(() => ({
 			...ae(R.rounded) ? {} : { rounded: R.rounded },
-			...fe.value
-		})), _e = c(() => ({
+			...ge.value
+		})), Se = l(() => ({
 			size: "xs",
 			"aria-hidden": !0,
-			color: z.value.color,
-			...n(me.value, {
+			color: H.value.color,
+			...r(ye.value, {
 				class: "shrink-0",
-				classes: { bar: W.value.loading }
+				classes: { bar: q.value.loading }
 			})
-		})), ve = c(() => ({
+		})), Ce = l(() => ({
 			dense: !0,
 			role: "listbox",
 			id: R.listboxId,
 			"aria-labelledby": R.labelledBy,
 			"aria-multiselectable": R.multiple || void 0,
-			...n(pe.value, { class: "p-0" })
+			...r(_e.value, { class: "p-0" })
 		}));
-		return (n, i) => (b(), l(D(a), v({
+		return (e, r) => (x(), u(O(s), y({
 			modelValue: L.value,
-			"onUpdate:modelValue": i[0] ||= (e) => L.value = e,
-			"anchor-el": h.anchorEl,
-			placement: h.placement,
+			"onUpdate:modelValue": r[0] ||= (e) => L.value = e,
+			"anchor-el": g.anchorEl,
+			placement: g.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": h.disableAutoFocus
-		}, ge.value), {
-			default: k(() => [
-				D(e)(D(F), "beforeOptions") ? (b(), l(T(D(t)(D(F), "beforeOptions")), { key: 0 })) : u("", !0),
-				h.loading ? (b(), d(s, { key: 1 }, [m(D(o), y(g(_e.value)), null, 16), f("div", y(g(D(H))), [D(e)(D(F), "loading") ? (b(), l(T(D(t)(D(F), "loading")), { key: 0 })) : (b(), d("span", P, E(h.loadingMessage), 1))], 16)], 64)) : (b(), d("div", y(v({ key: 2 }, D(V))), [m(D(r), y(g(ve.value)), {
-					default: k(() => [Y.value ? w(n.$slots, "default", { key: 0 }) : (b(!0), d(s, { key: 1 }, C(de.value, (t) => (b(), d(s, { key: t.key }, [t.kind === "section" ? (b(), l(D(ne), v({
+			"disable-auto-focus": g.disableAutoFocus
+		}, xe.value), {
+			default: A(() => [
+				O(t)(O(F), "beforeOptions") ? (x(), u(E(O(n)(O(F), "beforeOptions")), { key: 0 })) : d("", !0),
+				g.loading ? (x(), f(c, { key: 1 }, [h(O(ne), b(_(Se.value)), null, 16), p("div", b(_(O(G))), [O(t)(O(F), "loading") ? (x(), u(E(O(n)(O(F), "loading")), { key: 0 })) : (x(), f("span", P, D(V.value), 1))], 16)], 64)) : (x(), f("div", b(y({ key: 2 }, O(W))), [h(O(ee), b(_(Ce.value)), {
+					default: A(() => [X.value ? T(e.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, w(he.value, (n) => (x(), f(c, { key: n.key }, [n.kind === "section" ? (x(), u(O(o), y({
 						key: 0,
-						title: t.title,
-						sticky: t.sticky
-					}, { ref_for: !0 }, he.value), null, 16, ["title", "sticky"])) : (b(), l(D(te), v({
+						title: n.title,
+						sticky: n.sticky
+					}, { ref_for: !0 }, be.value), null, 16, ["title", "sticky"])) : (x(), u(O(a), y({
 						key: 1,
 						interactive: "",
-						value: t.option.value,
-						disabled: t.option.disabled,
-						secondary: t.option.description,
-						primary: D(e)(D(F), "option") ? void 0 : t.option.label
-					}, { ref_for: !0 }, $.value), p({ _: 2 }, [D(e)(D(F), "option") ? {
+						value: n.option.value,
+						disabled: n.option.disabled,
+						secondary: n.option.description,
+						primary: O(t)(O(F), "option") ? void 0 : n.option.label
+					}, { ref_for: !0 }, ve.value), m({ _: 2 }, [O(t)(O(F), "option") ? {
 						name: "default",
-						fn: k(() => [w(n.$slots, "option", {
-							option: t.option,
-							selected: t.selected
+						fn: A(() => [T(e.$slots, "option", {
+							option: n.option,
+							selected: n.selected
 						})]),
 						key: "0"
 					} : void 0]), 1040, [
@@ -162,8 +163,8 @@ var P = { key: 1 }, F = /* @__PURE__ */ h({
 					]))], 64))), 128))]),
 					_: 3
 				}, 16)], 16)),
-				X.value && !D(e)(D(F), "empty") ? (b(), d("div", y(v({ key: 3 }, D(H))), E(h.emptyMessage), 17)) : X.value && D(e)(D(F), "empty") ? (b(), l(T(D(t)(D(F), "empty")), { key: 4 })) : u("", !0),
-				D(e)(D(F), "afterOptions") ? (b(), l(T(D(t)(D(F), "afterOptions")), { key: 5 })) : u("", !0)
+				Z.value && !O(t)(O(F), "empty") ? (x(), f("div", b(y({ key: 3 }, O(G))), D(B.value), 17)) : Z.value && O(t)(O(F), "empty") ? (x(), u(E(O(n)(O(F), "empty")), { key: 4 })) : d("", !0),
+				O(t)(O(F), "afterOptions") ? (x(), u(E(O(n)(O(F), "afterOptions")), { key: 5 })) : d("", !0)
 			]),
 			_: 3
 		}, 16, [

package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,17 @@
-import { useHoldRepeat as e } from "../../Utils/useHoldRepeat.js";
-import { mergePartBind as t, resolveFieldAdornmentIconSize as n } from "../../Utils/index.js";
-import r from "../Icon/Icon.js";
-import i from "../FormField/FormField.js";
-import { useNumberField as a } from "./composables/useNumberField.js";
-import { computed as o, createBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, isRef as f, mergeModels as p, mergeProps as m, normalizeProps as h, openBlock as g, ref as _, unref as v, useModel as y, vModelDynamic as b, withCtx as x, withDirectives as S } from "vue";
-import { isUndefined as C } from "es-toolkit/compat";
-import { cn as w } from "@bridge-ui/core";
-import { ChevronDown as T, ChevronUp as E } from "@lucide/vue";
+import { useI18nAdapter as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import { useHoldRepeat as t } from "../../Utils/useHoldRepeat.js";
+import { mergePartBind as n, resolveFieldAdornmentIconSize as r } from "../../Utils/index.js";
+import i from "../Icon/Icon.js";
+import a from "../FormField/FormField.js";
+import { useNumberField as o } from "./composables/useNumberField.js";
+import { computed as s, createBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, isRef as p, mergeModels as m, mergeProps as h, normalizeProps as g, openBlock as _, ref as v, unref as y, useModel as b, vModelDynamic as x, withCtx as S, withDirectives as C } from "vue";
+import { isUndefined as w } from "es-toolkit/compat";
+import { cn as T, resolveMessage as E } from "@bridge-ui/core";
 //#region src/Components/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
-var D = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, O = /* @__PURE__ */ u({
+var D = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, O = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "NumberField",
-	props: /* @__PURE__ */ p({
+	props: /* @__PURE__ */ m({
 		classes: {},
 		customProps: {},
 		defaultValue: {},
@@ -41,45 +41,45 @@ var D = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overf
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ p(["change", "update:modelValue"], ["update:modelValue"]),
-	setup(u, { emit: p }) {
-		let O = p, k = y(u, "modelValue"), A = u, j = _(A.defaultValue), { decrement: M, formField: N, increment: P, inputBind: F, stringModel: I, mergedClasses: L } = a(A, o({
+	emits: /* @__PURE__ */ m(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(d, { emit: m }) {
+		let O = m, k = b(d, "modelValue"), A = d, j = v(A.defaultValue), M = s({
 			set: (e) => {
 				k.value = e, j.value = e;
 			},
-			get: () => C(k.value) ? j.value : k.value
-		}), { onChange: (e) => O("change", e) }), R = e(() => P(), () => ({ disabled: A.disabled })), z = e(() => M(), () => ({ disabled: A.disabled })), B = o(() => n(A.size)), V = o(() => t(A.customProps?.increment, {
+			get: () => w(k.value) ? j.value : k.value
+		}), N = e(), { decrement: P, formField: F, increment: I, inputBind: L, stringModel: R, mergedClasses: z } = o(A, M, { onChange: (e) => O("change", e) }), B = t(() => I(), () => ({ disabled: A.disabled })), V = t(() => P(), () => ({ disabled: A.disabled })), H = s(() => r(A.size)), U = s(() => n(A.customProps?.increment, {
 			type: "button",
 			disabled: A.disabled,
-			"aria-label": "Increment value",
-			onClick: R.onPressClick,
-			onPointerup: R.onPressPointerUp,
-			onPointerdown: R.onPressPointerDown,
-			onLostpointercapture: R.onPressLostPointerCapture
-		}, w({
+			onClick: B.onPressClick,
+			onPointerup: B.onPressPointerUp,
+			onPointerdown: B.onPressPointerDown,
+			"aria-label": E("Increment value", N.value),
+			onLostpointercapture: B.onPressLostPointerCapture
+		}, T({
 			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-			[L.value.increment ?? ""]: !0
-		}))), H = o(() => t(A.customProps?.decrement, {
+			[z.value.increment ?? ""]: !0
+		}))), W = s(() => n(A.customProps?.decrement, {
 			type: "button",
 			disabled: A.disabled,
-			"aria-label": "Decrement value",
-			onClick: z.onPressClick,
-			onPointerup: z.onPressPointerUp,
-			onPointerdown: z.onPressPointerDown,
-			onLostpointercapture: z.onPressLostPointerCapture
-		}, w({
+			onClick: V.onPressClick,
+			onPointerup: V.onPressPointerUp,
+			onPointerdown: V.onPressPointerDown,
+			"aria-label": E("Decrement value", N.value),
+			onLostpointercapture: V.onPressLostPointerCapture
+		}, T({
 			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-			[L.value.decrement ?? ""]: !0
+			[z.value.decrement ?? ""]: !0
 		})));
-		return (e, t) => (g(), s(v(i), { field: v(N) }, {
-			end: x(() => [c("div", D, [c("button", h(d(V.value)), [l(v(r), m({
-				icon: v(E),
-				size: B.value
-			}, A.customProps?.incrementIcon), null, 16, ["icon", "size"])], 16), c("button", h(d(H.value)), [l(v(r), m({
-				icon: v(T),
-				size: B.value
-			}, A.customProps?.decrementIcon), null, 16, ["icon", "size"])], 16)])]),
-			default: x(() => [S(c("input", m({ "onUpdate:modelValue": t[0] ||= (e) => f(I) ? I.value = e : null }, v(F)), null, 16), [[b, v(I)]])]),
+		return (e, t) => (_(), c(y(a), { field: y(F) }, {
+			end: S(() => [l("div", D, [l("button", g(f(U.value)), [u(y(i), h({
+				icon: "chevronUp",
+				size: H.value
+			}, A.customProps?.incrementIcon), null, 16, ["size"])], 16), l("button", g(f(W.value)), [u(y(i), h({
+				icon: "chevronDown",
+				size: H.value
+			}, A.customProps?.decrementIcon), null, 16, ["size"])], 16)])]),
+			default: S(() => [C(l("input", h({ "onUpdate:modelValue": t[0] ||= (e) => p(R) ? R.value = e : null }, y(L)), null, 16), [[x, y(R)]])]),
 			_: 1
 		}, 8, ["field"]));
 	}

package/dist/Components/NumberField/composables/useNumberField.d.ts

@@ -17,7 +17,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             size: NonNullable<keyof import('@bridge-ui/core').FormFieldSize | undefined>;
             rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
             variant: NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>;
-            errorIcon: import('@lucide/vue').LucideIcon;
+            errorIcon: NonNullable<import('../../..').IconSource | undefined>;
             withErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
@@ -173,13 +173,13 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             'aria-valuenow'?: (string | number) | undefined;
             'aria-valuetext'?: string | undefined | undefined;
             accesskey?: string | undefined | undefined;
-            contenteditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+            contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
             contextmenu?: string | undefined | undefined;
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
             enterKeyHint?: "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined;
-            hidden?: "" | "until-found" | (boolean | "true" | "false") | "hidden" | undefined;
+            hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
             spellcheck?: (boolean | "true" | "false") | undefined;
@@ -213,7 +213,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         }>>;
         controlId: import('vue').ComputedRef<string>;
         errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        errorIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
+        errorIcon: import('vue').ComputedRef<NonNullable<import('../../..').IconSource | undefined>>;
         inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;
@@ -435,7 +435,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -684,7 +684,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>, {
         min: number | undefined;
         max: number | undefined;
         type: string;