@bridge-ui/vue 0.0.1-beta.2 → 0.0.1-beta.3

package/dist/Components/Listbox/composables/useListbox.js

@@ -2,9 +2,10 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 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 { colorProps as l, invalidatedProps as u } from "@bridge-ui/core/Components/Listbox";
+import { colorProps as l, invalidatedProps as u, sizeProps as d } from "@bridge-ui/core/Components/Listbox";
 //#region src/Components/Listbox/composables/useListbox.ts
-var d = [
+var f = [
+	"size",
 	"color",
 	"classes",
 	"maxHeight",
@@ -12,36 +13,51 @@ var d = [
 	"invalidated",
 	"disableMaxHeight"
 ];
-function f(f, p) {
-	let m = i(), h = r(() => c({
+function p(p, m) {
+	let h = i(), g = r(() => c({
 		props: {
-			...m,
-			...f
+			...h,
+			...p
 		},
-		bridgeKeys: d
-	})), { merged: g, entry: _ } = t({
-		libDefaults: p,
+		bridgeKeys: f
+	})), { merged: _, entry: v } = t({
+		libDefaults: m,
 		componentName: "Listbox",
-		props: () => h.value.componentProps
-	}), v = n({
-		entry: _,
-		props: () => h.value.componentProps
-	}), y = r(() => a(s(l, _.value?.customProps?.color), g.value.color ?? "primary")), b = r(() => s(u, _.value?.customProps?.invalidated)), x = r(() => g.value.invalidated ? b.value : y.value), S = r(() => x.value?.selected), C = r(() => x.value?.highlighted);
+		props: () => g.value.componentProps
+	}), y = n({
+		entry: v,
+		props: () => g.value.componentProps
+	}), b = r(() => a(s(l, v.value?.customProps?.color), _.value.color ?? "primary")), x = r(() => s(u, v.value?.customProps?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => a(s(d, v.value?.customProps?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted), E = r(() => o(C.value?.check, S.value?.check)), D = r(() => e(_.value.customProps?.content, {}, o({ relative: !0 }))), O = r(() => {
+		let t = _.value.maxHeight ?? "max-h-60", n = _.value.disableMaxHeight === !0;
+		return e(_.value.customProps?.scroll, {}, o({
+			"overflow-y-auto overscroll-contain": !n,
+			[t]: !n,
+			[y.value.scroll ?? ""]: !0
+		}));
+	}), k = r(() => e({}, {
+		role: "progressbar",
+		"aria-hidden": !0
+	}, o({ "h-0.5 w-full shrink-0 overflow-hidden": !0 }))), A = r(() => e(_.value.customProps?.loading, {}, o({
+		"h-full w-1/3 animate-bridge-listbox-indeterminate": !0,
+		[b.value?.progressColor ?? ""]: !0,
+		[y.value.loading ?? ""]: !0
+	})));
 	return {
-		merged: g,
-		checkClass: r(() => x.value?.check),
-		scrollBind: r(() => {
-			let t = g.value.maxHeight ?? "max-h-60", n = g.value.disableMaxHeight === !0;
-			return e(g.value.customProps?.scroll, {}, o({
-				"overflow-y-auto overscroll-contain": !n,
-				[t]: !n,
-				[v.value.scroll ?? ""]: !0
-			}));
-		}),
-		mergedClasses: v,
-		optionSelectedClass: S,
-		optionHighlightedClass: C
+		merged: _,
+		checkClass: E,
+		scrollBind: O,
+		contentBind: D,
+		messageBind: r(() => e({}, {}, o({
+			"text-gray-500": !0,
+			[C.value?.message ?? ""]: !0
+		}))),
+		loadingBind: A,
+		sizeClasses: C,
+		mergedClasses: y,
+		loadingTrackBind: k,
+		optionSelectedClass: w,
+		optionHighlightedClass: T
 	};
 }
 //#endregion
-export { f as useListbox };
+export { p as useListbox };

package/dist/Components/Listbox/listbox.types.d.ts

@@ -1,11 +1,16 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { ListboxColor, ListboxOption, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ListboxColor, ListboxOption, ListboxSize, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+export interface ListboxSizeOverrides {}
 export interface ListboxColorOverrides {}
 export interface ListboxClasses {
     /**
      * Classes merged onto the check icon.
      */
     check?: string;
+    /**
+     * Classes merged onto the indeterminate loading progress bar.
+     */
+    loading?: string;
     /**
      * Classes merged onto keyboard-highlighted options.
      */
@@ -24,6 +29,10 @@ export interface ListboxCustomProps {
      * Props forwarded to the floating menu panel.
      */
     content?: HTMLAttributes;
+    /**
+     * Props forwarded to the indeterminate loading progress bar.
+     */
+    loading?: HTMLAttributes;
     /**
      * Props forwarded to the scrollable options container.
      */
@@ -110,9 +119,18 @@ export interface ListboxOwnProps {
      */
     listboxId: string;
     /**
-     * External loading state.
+     * When `true`, shows an indeterminate progress bar and loading text in the
+     * panel (options are hidden while loading).
+     *
+     * @default false
      */
     loading?: boolean;
+    /**
+     * Message shown while `loading` is true (ignored when the `loading` slot is set).
+     *
+     * @default "Loading..."
+     */
+    loadingMessage?: string;
     /**
      * Tailwind max-height class for the options scroll area (e.g. `max-h-80`).
      *
@@ -141,6 +159,12 @@ export interface ListboxOwnProps {
      * @default true
      */
     showCheckmark?: boolean;
+    /**
+     * Typography and option padding scale, aligned with `FormField` / `Select`.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<ListboxSize, ListboxSizeOverrides>;
 }
 export interface ListboxSlots {
     /**
@@ -156,7 +180,8 @@ export interface ListboxSlots {
      */
     empty?: Slot;
     /**
-     * Custom loading content.
+     * Custom loading content. Replaces the default `loadingMessage` when set.
+     * The progress bar still renders above this content.
      */
     loading?: Slot;
     /**

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

@@ -5,7 +5,7 @@ import r from "../FormField/FormField.js";
 import { useNumberField as i } from "./composables/useNumberField.js";
 import { computed as a, createBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, isRef as u, mergeModels as d, mergeProps as f, normalizeClass as p, openBlock as m, unref as h, useModel as g, vModelDynamic as _, withCtx as v, withDirectives as y } from "vue";
 import { cn as b } from "@bridge-ui/core";
-import { ChevronDown as x, ChevronUp as S } from "lucide-vue-next";
+import { ChevronDown as x, ChevronUp as S } from "@lucide/vue";
 //#region src/Components/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
 var C = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, w = ["disabled"], T = ["disabled"], E = /* @__PURE__ */ l({
 	inheritAttrs: !1,

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-next').LucideIcon;
+            errorIcon: import('@lucide/vue').LucideIcon;
             withErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
@@ -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-next').LucideIcon>;
+        errorIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
         inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;

package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import n from "../FormField/FormField.js";
 import { usePasswordField as r } from "./composables/usePasswordField.js";
 import { computed as i, createBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeClass as d, openBlock as f, unref as p, useModel as m, vModelDynamic as h, withCtx as g, withDirectives as _ } from "vue";
 import { cn as v } from "@bridge-ui/core";
-import { Eye as y, EyeOff as b } from "lucide-vue-next";
+import { Eye as y, EyeOff as b } from "@lucide/vue";
 //#region src/Components/PasswordField/PasswordField.vue?vue&type=script&setup=true&lang.ts
 var x = ["disabled", "aria-label"], S = /* @__PURE__ */ c({
 	inheritAttrs: !1,

package/dist/Components/PasswordField/composables/usePasswordField.d.ts

@@ -15,7 +15,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
             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-next').LucideIcon;
+            errorIcon: import('@lucide/vue').LucideIcon;
             withErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
@@ -211,7 +211,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         }>>;
         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-next').LucideIcon>;
+        errorIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
         inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;

package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,37 +1,36 @@
 import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
-import r from "../FormField/FormField.js";
-import i from "../Listbox/Listbox.js";
-import { useSelect as a } from "./composables/useSelect.js";
-import { SELECT_OPTION_KEY as o } from "./selectInjectionKey.js";
-import { Fragment as s, createBlock as c, createCommentVNode as ee, createElementBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, isRef as h, mergeModels as g, mergeProps as _, normalizeProps as v, openBlock as y, provide as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useModel as te, useTemplateRef as D, withCtx as O, withKeys as k, withModifiers as A } from "vue";
-import { X as j } from "lucide-vue-next";
+import r from "../Chip/Chip.js";
+import i from "../FormField/FormField.js";
+import a from "../Listbox/Listbox.js";
+import { useSelect as o } from "./composables/useSelect.js";
+import { SELECT_OPTION_KEY as s } from "./selectInjectionKey.js";
+import { Fragment as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, resolveDynamicComponent as D, toDisplayString as O, unref as k, useModel as A, useTemplateRef as j, withCtx as M, withKeys as N, withModifiers as P } from "vue";
+import { X as F } from "@lucide/vue";
 //#region src/Components/Select/Select.vue?vue&type=script&setup=true&lang.ts
-var ne = {
+var I = {
 	key: 0,
-	class: "flex min-w-0 flex-1 flex-wrap items-center gap-1"
-}, M = { class: "truncate" }, N = [
-	"aria-label",
-	"onClick",
-	"onKeydown"
-], P = {
+	class: "flex min-w-0 flex-1 flex-wrap items-center gap-0.5"
+}, L = {
 	key: 1,
 	class: "flex min-w-0 flex-1 items-center gap-1"
-}, F = /* @__PURE__ */ p({
+}, R = /* @__PURE__ */ g({
 	inheritAttrs: !1,
 	__name: "Select",
-	props: /* @__PURE__ */ g({
+	props: /* @__PURE__ */ y({
 		asyncData: {},
 		clearable: {
 			type: Boolean,
 			default: !0
 		},
+		customProps: {},
 		defaultValue: {},
 		disableMaxHeight: { type: Boolean },
 		emptyMessage: { default: "No options" },
 		flipOptions: { type: Boolean },
 		hideEmptyMessage: { type: Boolean },
 		loading: { type: Boolean },
+		loadingMessage: {},
 		maxHeight: {},
 		minItemsForSearch: { default: 11 },
 		multiple: { type: Boolean },
@@ -48,7 +47,6 @@ var ne = {
 		color: {},
 		controlId: {},
 		corner: {},
-		customProps: {},
 		description: {},
 		disabled: { type: Boolean },
 		end: {},
@@ -74,7 +72,7 @@ var ne = {
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ g([
+	emits: /* @__PURE__ */ y([
 		"change",
 		"clear",
 		"close",
@@ -84,108 +82,90 @@ var ne = {
 		"select",
 		"update:modelValue"
 	], ["update:modelValue"]),
-	setup(p, { emit: g }) {
-		let F = te(p, "modelValue"), I = p, L = g, R = D("trigger"), z = x([]);
-		b(o, {
+	setup(g, { emit: y }) {
+		let R = A(g, "modelValue"), z = g, B = y, V = j("trigger"), H = w([]);
+		C(s, {
 			unregister(e) {
-				z.value = z.value.filter((t) => String(t.value) !== String(e));
+				H.value = H.value.filter((t) => String(t.value) !== String(e));
 			},
 			register(e) {
-				z.value.some((t) => String(t.value) === String(e.value)) || (z.value = [...z.value, e]);
+				H.value.some((t) => String(t.value) === String(e.value)) || (H.value = [...H.value, e]);
 			}
 		});
-		let { open: B, slots: V, hasValue: H, multiple: U, listboxId: W, formField: G, isLoading: K, clearable: q, clearBind: J, isSelected: Y, clearValue: X, removeChip: Z, triggerBind: Q, selectOption: re, containerRef: ie, emptyMessage: ae, clearIconSize: $, visibleOptions: oe, selectedOptions: se, highlightedIndex: ce, hideEmptyMessage: le } = a(I, F, R, L, z);
-		return (a, o) => (y(), l(s, null, [
-			f(E(r), { field: E(G) }, {
-				default: O(() => [E(U) ? (y(), l("div", ne, [(y(!0), l(s, null, S(E(se), (e) => (y(), l("span", {
+		let { open: U, slots: W, hasValue: G, multiple: K, formField: q, clearable: J, clearBind: Y, clearValue: X, removeChip: Z, triggerBind: Q, selectOption: $, containerRef: ee, listboxProps: te, clearIconSize: ne, mergedClasses: re, selectedOptions: ie } = o(z, R, V, B, H);
+		return (o, s) => (S(), d(c, null, [
+			h(k(i), { field: k(q) }, {
+				default: M(() => [k(K) ? (S(), d("div", I, [(S(!0), d(c, null, T(k(ie), (e) => (S(), l(k(r), {
+					dismissible: "",
 					key: String(e.value),
-					class: "inline-flex max-w-full items-center gap-1 rounded-md bg-gray-100 px-2 py-0.5 text-sm text-gray-800 dark:bg-gray-700 dark:text-gray-100"
-				}, [C(a.$slots, "chip", { option: e }, () => [u("span", M, T(e.label), 1)]), u("span", _({ ref_for: !0 }, E(J), {
-					"aria-label": `Remove ${e.label}`,
-					onClick: (t) => E(Z)(e, t),
-					onKeydown: [k(A((t) => E(Z)(e, t), ["prevent"]), ["enter"]), k(A((t) => E(Z)(e, t), ["prevent"]), ["space"])]
-				}), [f(E(n), {
-					icon: E(j),
-					size: E($)
-				}, null, 8, ["icon", "size"])], 16, N)]))), 128)), u("textarea", _({ ref: "trigger" }, E(Q)), null, 16)])) : (y(), l("div", P, [u("input", _({
+					size: k(q).merged.value.size,
+					"custom-props": { clear: k(Y) },
+					disabled: k(q).isDisabled.value,
+					"clear-label": `Remove ${e.label}`,
+					classes: { root: k(re).chip },
+					onDismiss: (t) => k(Z)(e, t)
+				}, {
+					default: M(() => [E(o.$slots, "chip", { option: e }, () => [m(O(e.label), 1)])]),
+					_: 2
+				}, 1032, [
+					"size",
+					"custom-props",
+					"disabled",
+					"clear-label",
+					"classes",
+					"onDismiss"
+				]))), 128)), f("textarea", b({ ref: "trigger" }, k(Q)), null, 16)])) : (S(), d("div", L, [f("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, E(Q)), null, 16), E(q) && E(H) && !E(G).isDisabled.value ? (y(), l("span", _({ key: 0 }, E(J), {
-					onClick: o[0] ||= (...e) => E(X) && E(X)(...e),
+				}, k(Q)), null, 16), k(J) && k(G) && !k(q).isDisabled.value ? (S(), d("span", b({ key: 0 }, k(Y), {
+					onClick: s[0] ||= (...e) => k(X) && k(X)(...e),
 					"aria-label": "Clear selection",
-					onKeydown: [o[1] ||= k(A((...e) => E(X) && E(X)(...e), ["prevent"]), ["enter"]), o[2] ||= k(A((...e) => E(X) && E(X)(...e), ["prevent"]), ["space"])]
-				}), [f(E(n), {
-					icon: E(j),
-					size: E($)
-				}, null, 8, ["icon", "size"])], 16)) : ee("", !0)]))]),
+					onKeydown: [s[1] ||= N(P((...e) => k(X) && k(X)(...e), ["prevent"]), ["enter"]), s[2] ||= N(P((...e) => k(X) && k(X)(...e), ["prevent"]), ["space"])]
+				}), [h(k(n), {
+					icon: k(F),
+					size: k(ne)
+				}, null, 8, ["icon", "size"])], 16)) : u("", !0)]))]),
 				_: 3
 			}, 8, ["field"]),
-			f(E(i), {
-				modelValue: E(B),
-				"onUpdate:modelValue": o[3] ||= (e) => h(B) ? B.value = e : null,
-				loading: E(K),
-				multiple: E(U),
-				"listbox-id": E(W),
-				"anchor-el": E(ie),
-				options: E(oe),
-				"is-selected": E(Y),
-				onSelect: E(re),
-				"disable-auto-focus": !0,
-				"empty-message": E(ae),
-				"max-height": I.maxHeight,
-				color: E(G).merged.value.color,
-				"highlighted-index": E(ce),
-				"hide-empty-message": E(le),
-				"labelled-by": E(G).controlId.value,
-				invalidated: E(G).invalidated.value,
-				"disable-max-height": I.disableMaxHeight
-			}, d({ _: 2 }, [
-				E(e)(E(V), "beforeOptions") ? {
+			h(k(a), b(k(te), {
+				modelValue: k(U),
+				"onUpdate:modelValue": s[3] ||= (e) => v(U) ? U.value = e : null,
+				"anchor-el": k(ee),
+				onSelect: k($)
+			}), p({ _: 2 }, [
+				k(e)(k(W), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "beforeOptions"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "beforeOptions"))))]),
 					key: "0"
 				} : void 0,
-				E(e)(E(V), "loading") ? {
+				k(e)(k(W), "loading") ? {
 					name: "loading",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "loading"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "loading"))))]),
 					key: "1"
 				} : void 0,
-				E(e)(E(V), "option") ? {
+				k(e)(k(W), "option") ? {
 					name: "option",
-					fn: O((e) => [C(a.$slots, "option", v(m(e)))]),
+					fn: M((e) => [E(o.$slots, "option", x(_(e)))]),
 					key: "2"
 				} : void 0,
-				E(e)(E(V), "empty") ? {
+				k(e)(k(W), "empty") ? {
 					name: "empty",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "empty"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "empty"))))]),
 					key: "3"
 				} : void 0,
-				E(e)(E(V), "afterOptions") ? {
+				k(e)(k(W), "afterOptions") ? {
 					name: "afterOptions",
-					fn: O(() => [(y(), c(w(E(t)(E(V), "afterOptions"))))]),
+					fn: M(() => [(S(), l(D(k(t)(k(W), "afterOptions"))))]),
 					key: "4"
 				} : void 0
-			]), 1032, [
+			]), 1040, [
 				"modelValue",
-				"loading",
-				"multiple",
-				"listbox-id",
 				"anchor-el",
-				"options",
-				"is-selected",
-				"onSelect",
-				"empty-message",
-				"max-height",
-				"color",
-				"highlighted-index",
-				"hide-empty-message",
-				"labelled-by",
-				"invalidated",
-				"disable-max-height"
+				"onSelect"
 			]),
-			C(a.$slots, "default")
+			E(o.$slots, "default")
 		], 64));
 	}
 });
 //#endregion
-export { F as default };
+export { R as default };

package/dist/Components/Select/composables/useSelect.d.ts

@@ -1,6 +1,6 @@
 import { Ref, SetupContext } from 'vue';
 import { FormFieldOwnProps } from '../../FormField/formField.types';
-import { SelectEmits, SelectOption, SelectOwnProps, SelectValue } from '../select.types';
+import { SelectClasses, SelectEmits, SelectOption, SelectOwnProps, SelectValue } from '../select.types';
 export declare function useSelect(props: SelectOwnProps, model: Ref<null | undefined | SelectValue | SelectValue[]>, triggerRef: Ref<null | HTMLInputElement | HTMLTextAreaElement>, emit: SetupContext<SelectEmits>["emit"], declarativeOptions: Ref<SelectOption[]>): {
     open: Ref<boolean, boolean>;
     slots: Readonly<{
@@ -18,7 +18,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
             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-next').LucideIcon;
+            errorIcon: import('@lucide/vue').LucideIcon;
             withErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
@@ -214,7 +214,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         }>>;
         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-next').LucideIcon>;
+        errorIcon: import('vue').ComputedRef<import('@lucide/vue').LucideIcon>;
         inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;
@@ -723,11 +723,35 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
     }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>>;
     selectOption: (option: SelectOption) => void;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    listboxProps: import('vue').ComputedRef<{
+        listboxId: string;
+        isSelected: (value: SelectValue) => boolean;
+        loading: boolean;
+        multiple: boolean;
+        options: import('@bridge-ui/core').ListboxOption[];
+        labelledBy: string;
+        highlightedIndex: number;
+        invalidated: boolean;
+        color: "dark" | "error" | "info" | "primary" | "secondary" | "success" | "warning";
+        size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
+        classes?: import('../../Listbox').ListboxClasses;
+        customProps?: import('../../Listbox').ListboxCustomProps;
+        disableAutoFocus: boolean;
+        placement?: import('@floating-ui/utils').Placement;
+        disableMaxHeight: boolean;
+        emptyMessage: string;
+        hideEmptyMessage: boolean;
+        loadingMessage: string;
+        maxHeight: string;
+        showCheckmark?: boolean;
+    }>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
+    mergedClasses: import('vue').ComputedRef<Partial<SelectClasses>>;
     visibleOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     isSearchActive: import('vue').ComputedRef<boolean>;
     selectedOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     highlightedIndex: Ref<number, number>;
     emptyMessage: import('vue').ComputedRef<string>;
     hideEmptyMessage: import('vue').ComputedRef<boolean>;
+    loadingMessage: import('vue').ComputedRef<string>;
 };