@bridge-ui/vue 0.0.7 → 0.0.9

package/dist/Components/OtpField/otpField.types.d.ts

@@ -1,114 +1,36 @@
-import { HTMLAttributes, InputHTMLAttributes, Slot } from 'vue';
-import { MergeHtmlProps, MergeProps, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldSize, OtpFieldVariant, OtpInputType } from '@bridge-ui/core';
-import { LabelProps } from '../Label/label.types';
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import { BaseFieldInvalidated, MergeHtmlProps, MergeProps, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldVariant, OtpInputType } from '@bridge-ui/core';
+import { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldSlots } from '../BaseField/baseField.types';
 export interface OtpFieldColorOverrides {}
 export interface OtpFieldRoundedOverrides {}
 export interface OtpFieldSizeOverrides {}
 export interface OtpFieldVariantOverrides {}
-export interface OtpFieldClasses {
-    /**
-     * Classes merged onto the corner label in the header row.
-     */
-    corner?: string;
-    /**
-     * Classes merged onto the helper text below the pins.
-     */
-    description?: string;
-    /**
-     * Classes merged onto the inline-end adornment slot wrapper.
-     */
-    end?: string;
-    /**
-     * Classes merged onto the error message below the pins.
-     */
-    errorMessage?: string;
-    /**
-     * Classes merged onto the pin group wrapper.
-     */
-    group?: string;
-    /**
-     * Classes merged onto the label + corner header row.
-     */
-    header?: string;
+export interface OtpFieldClasses extends BaseFieldClasses {
     /**
      * Classes merged onto each pin `<input>`.
      */
     input?: string;
-    /**
-     * Classes merged onto the primary label.
-     */
-    label?: string;
     /**
      * Classes merged onto each pin cell wrapper.
      */
     pin?: string;
-    /**
-     * Classes merged onto the required asterisk.
-     */
-    required?: string;
-    /**
-     * Classes merged onto the root wrapper.
-     */
-    root?: string;
-    /**
-     * Classes merged onto the inline-start adornment slot wrapper.
-     */
-    start?: string;
 }
-export interface OtpFieldCustomProps {
-    /**
-     * Props forwarded to the corner label element.
-     */
-    corner?: HTMLAttributes;
-    /**
-     * Props forwarded to the helper text below the pins.
-     */
-    description?: HTMLAttributes;
-    /**
-     * Props forwarded to the inline-end adornment slot wrapper.
-     */
-    end?: HTMLAttributes;
-    /**
-     * Props forwarded to the error message element.
-     */
-    errorMessage?: HTMLAttributes;
-    /**
-     * Props forwarded to the pin group wrapper.
-     */
-    group?: HTMLAttributes;
-    /**
-     * Props forwarded to the label + corner header row.
-     */
-    header?: HTMLAttributes;
+export interface OtpFieldCustomProps extends Omit<BaseFieldCustomProps, "invalidated"> {
     /**
      * Props forwarded to each pin `<input>`.
      */
     input?: Partial<InputHTMLAttributes>;
     /**
-     * Error-state pin chrome colors. Label colors come from `Label` when `error`
-     * is set.
-     *
-     * @default undefined
-     */
-    invalidated?: Partial<OtpFieldInvalidated>;
-    /**
-     * Props forwarded to the primary `Label` (content stays owned by `OtpField`).
+     * Pin error chrome (`pin` / `pinUnderlined`). Error message color comes from
+     * {@link BaseField} (`Tokens/BaseField`); pass `errorMessage` here to override.
      *
      * @default undefined
      */
-    label?: Partial<Omit<LabelProps, "children">>;
+    invalidated?: Partial<OtpFieldInvalidated & BaseFieldInvalidated>;
     /**
      * Props forwarded to each pin cell wrapper.
      */
     pin?: HTMLAttributes;
-    /**
-     * Props forwarded to the root wrapper.
-     */
-    root?: HTMLAttributes;
-    /**
-     * Props forwarded to the inline-start adornment slot wrapper.
-     */
-    start?: HTMLAttributes;
 }
 export interface OtpFieldEmits {
     /**
@@ -120,7 +42,7 @@ export interface OtpFieldEmits {
      */
     complete: [value: string];
 }
-export interface OtpFieldOwnProps {
+export interface OtpFieldOwnProps extends Omit<BaseFieldOwnProps, "field" | "slots" | "classes" | "children" | "customProps"> {
     /**
      * Autofocus the first empty pin (or the first pin) on mount.
      *
@@ -139,19 +61,6 @@ export interface OtpFieldOwnProps {
      * @default "primary"
      */
     color?: MergeProps<OtpFieldColor, OtpFieldColorOverrides>;
-    /**
-     * Associates labels and helper text with the pin group. When omitted, an id
-     * is generated automatically.
-     *
-     * @default undefined
-     */
-    controlId?: string;
-    /**
-     * Secondary label text at the inline end of the header row.
-     *
-     * @default undefined
-     */
-    corner?: string;
     /**
      * Extra props for internal parts (`root`, `pin`, `input`, …).
      *
@@ -165,42 +74,6 @@ export interface OtpFieldOwnProps {
      * @default undefined
      */
     defaultValue?: string;
-    /**
-     * Helper text below the pins (hidden when the field is invalid).
-     *
-     * @default undefined
-     */
-    description?: string;
-    /**
-     * Whether all pins are disabled.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * When `true`, applies invalid styling on the label and pins.
-     *
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * Error message below the pins. Shown only when set (or via `errorMessage` slot).
-     *
-     * @default undefined
-     */
-    errorMessage?: string;
-    /**
-     * When `true`, does not reserve space below the pins for error messages.
-     *
-     * @default false
-     */
-    hideErrorMessage?: boolean;
-    /**
-     * The primary label text above the pins.
-     *
-     * @default undefined
-     */
-    label?: string;
     /**
      * Number of pin slots.
      *
@@ -219,30 +92,12 @@ export interface OtpFieldOwnProps {
      * @default undefined
      */
     placeholder?: string;
-    /**
-     * Whether all pins are read-only.
-     *
-     * @default false
-     */
-    readonly?: boolean;
-    /**
-     * Shows a red asterisk on the label.
-     *
-     * @default false
-     */
-    required?: boolean;
     /**
      * Border radius of each pin cell.
      *
      * @default "md"
      */
     rounded?: MergeProps<OtpFieldRounded, OtpFieldRoundedOverrides>;
-    /**
-     * Pin size and label typography scale.
-     *
-     * @default "md"
-     */
-    size?: MergeProps<OtpFieldSize, OtpFieldSizeOverrides>;
     /**
      * Character set accepted by each pin.
      *
@@ -256,32 +111,7 @@ export interface OtpFieldOwnProps {
      */
     variant?: MergeProps<OtpFieldVariant, OtpFieldVariantOverrides>;
 }
-export interface OtpFieldSlots {
-    /**
-     * Secondary header text at the inline end.
-     */
-    corner?: Slot;
-    /**
-     * Helper text below the pins.
-     */
-    description?: Slot;
-    /**
-     * Inline-end slot beside the pin group (e.g. a button or timer).
-     */
-    end?: Slot;
-    /**
-     * Error message below the pins.
-     */
-    errorMessage?: Slot;
-    /**
-     * Primary label content.
-     */
-    label?: Slot;
-    /**
-     * Inline-start slot beside the pin group (e.g. an icon or button).
-     */
-    start?: Slot;
-}
+export interface OtpFieldSlots extends BaseFieldSlots {}
 export type OtpFieldProps = MergeHtmlProps<OtpFieldOwnProps, Omit<HTMLAttributes, "color" | "onChange">> & {
     /**
      * Bound with `v-model` on the component (`defineModel` internally).

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

@@ -7,10 +7,10 @@ import { computed as o, createBlock as s, createElementVNode as c, createVNode a
 import { cn as S } from "@bridge-ui/core";
 import { isUndefined as C } from "es-toolkit/compat";
 //#region src/Components/PasswordField/PasswordField.vue?vue&type=script&setup=true&lang.ts
-var w = /* @__PURE__ */ u({
+var w = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "PasswordField",
-	props: /* @__PURE__ */ f({
+	props: /*@__PURE__*/ f({
 		classes: {},
 		customProps: {},
 		defaultValue: {},
@@ -43,7 +43,7 @@ var w = /* @__PURE__ */ u({
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ f(["visibility-change"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ f(["visibility-change"], ["update:modelValue"]),
 	setup(u, { emit: f }) {
 		let w = f, T = v(u, "modelValue"), E = u, D = g(E.defaultValue), O = o({
 			set: (e) => {

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

@@ -433,7 +433,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
         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, {}>>;
@@ -681,7 +681,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, {
         type: string;
     }>>;
     isVisible: import('vue').ComputedRef<boolean>;

package/dist/Components/PasswordField/composables/usePasswordField.js

@@ -24,7 +24,10 @@ function l(l, u = {}) {
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !1
-	}, { reservedSlots: () => ["end"] });
+	}, {
+		reservedSlots: () => ["end"],
+		componentName: "PasswordField"
+	});
 	return {
 		formField: y,
 		inputBind: i(() => e(y.inputBind.value, { type: g.value }, "")),

package/dist/Components/Progress/Progress.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useProgress as e } from "./composables/useProgress.js";
 import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, openBlock as c, unref as l } from "vue";
 //#region src/Components/Progress/Progress.vue?vue&type=script&setup=true&lang.ts
-var u = /* @__PURE__ */ i({
+var u = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "Progress",
 	props: {

package/dist/Components/Progress/composables/useProgress.js

@@ -31,7 +31,19 @@ function g(l, g) {
 	}), x = n({
 		entry: b,
 		props: () => v.value.componentProps
-	}), S = r(() => y.value.customProps), C = r(() => c(o(u, b.value?.tokens?.color), y.value.color)), w = r(() => c(o(f, b.value?.tokens?.size), y.value.size)), T = r(() => c(o(d, b.value?.tokens?.rounded), y.value.rounded)), E = r(() => c(o(p, b.value?.tokens?.variant), y.value.variant)), D = r(() => y.value.variant === "buffer"), O = r(() => y.value.variant === "determinate" || y.value.variant === "buffer"), k = r(() => y.value.variant === "indeterminate" || y.value.variant === "query"), A = r(() => h(y.value.value)), j = r(() => h(y.value.valueBuffer)), M = r(() => e(S.value?.root, v.value.inheritedAttrs, {
+	}), S = r(() => y.value.customProps), C = r(() => {
+		let e = o(u, b.value?.tokens?.color);
+		return c(e, y.value.color);
+	}), w = r(() => {
+		let e = o(f, b.value?.tokens?.size);
+		return c(e, y.value.size);
+	}), T = r(() => {
+		let e = o(d, b.value?.tokens?.rounded);
+		return c(e, y.value.rounded);
+	}), E = r(() => {
+		let e = o(p, b.value?.tokens?.variant);
+		return c(e, y.value.variant);
+	}), D = r(() => y.value.variant === "buffer"), O = r(() => y.value.variant === "determinate" || y.value.variant === "buffer"), k = r(() => y.value.variant === "indeterminate" || y.value.variant === "query"), A = r(() => h(y.value.value)), j = r(() => h(y.value.valueBuffer)), M = r(() => e(S.value?.root, v.value.inheritedAttrs, {
 		role: "progressbar",
 		...O.value ? {
 			"aria-valuemin": 0,

package/dist/Components/Radio/Radio.vue_vue_type_script_setup_true_lang.js

@@ -3,10 +3,10 @@ import { useRadio as t } from "./composables/useRadio.js";
 import { computed as n, createBlock as r, createElementVNode as i, defineComponent as a, guardReactiveProps as o, mergeModels as s, mergeProps as c, normalizeProps as l, openBlock as u, ref as d, unref as f, useAttrs as p, useModel as m, withCtx as h } from "vue";
 import { isNil as g } from "es-toolkit/compat";
 //#region src/Components/Radio/Radio.vue?vue&type=script&setup=true&lang.ts
-var _ = ["for"], v = ["checked"], y = /* @__PURE__ */ a({
+var _ = ["for"], v = ["checked"], y = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "Radio",
-	props: /* @__PURE__ */ s({
+	props: /*@__PURE__*/ s({
 		classes: {},
 		color: {},
 		customProps: {},
@@ -32,22 +32,22 @@ var _ = ["for"], v = ["checked"], y = /* @__PURE__ */ a({
 	}),
 	emits: ["update:modelValue"],
 	setup(a) {
-		let s = p(), y = a, b = m(a, "modelValue"), x = d(!!y.defaultChecked), { merged: S, dotBind: C, fieldBind: w, inputBind: T, isChecked: E, formControl: D, controlBind: O } = t(() => ({
+		let s = p(), y = a, b = m(a, "modelValue"), x = d(!!y.defaultChecked), S = n(() => g(b.value) && x.value ? y.value : b.value), { merged: C, dotBind: w, fieldBind: T, inputBind: E, isChecked: D, formControl: O, controlBind: k } = t(() => ({
 			...s,
 			...y
 		}), {
 			size: "md",
 			rounded: "full",
 			color: "primary"
-		}, n(() => g(b.value) && x.value ? y.value : b.value));
-		function k() {
-			x.value = !0, g(S.value.value) || (b.value = S.value.value);
+		}, S);
+		function A() {
+			x.value = !0, g(C.value.value) || (b.value = C.value.value);
 		}
-		return (t, n) => (u(), r(f(e), { field: f(D) }, {
-			default: h(() => [i("label", c(f(w), { for: f(D).controlId.value }), [i("input", c(f(T), {
-				checked: f(E),
-				onChange: k
-			}), null, 16, v), i("span", l(o(f(O))), [i("span", l(o(f(C))), null, 16)], 16)], 16, _)]),
+		return (t, n) => (u(), r(f(e), { field: f(O) }, {
+			default: h(() => [i("label", c(f(T), { for: f(O).controlId.value }), [i("input", c(f(E), {
+				checked: f(D),
+				onChange: A
+			}), null, 16, v), i("span", l(o(f(k))), [i("span", l(o(f(w))), null, 16)], 16)], 16, _)]),
 			_: 1
 		}, 8, ["field"]));
 	}

package/dist/Components/Radio/composables/useRadio.d.ts

@@ -240,7 +240,7 @@ export declare function useRadio(props: MaybeRefOrGetter<RadioOwnProps>, libDefa
             hideErrorMessage: NonNullable<boolean | undefined>;
         }>;
         rowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<Omit<import('../../FormControl').FormControlOwnProps, "field">, "error" | "size" | "classes" | "customProps" | "disabled" | "required" | "controlId" | "description" | "endLabel" | "errorMessage" | "hideErrorMessage" | "readonly" | "startLabel">>>>;
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<Omit<import('../../FormControl').FormControlOwnProps, "field">, "error" | "size" | "classes" | "customProps" | "disabled" | "required" | "description" | "errorMessage" | "controlId" | "hideErrorMessage" | "readonly" | "endLabel" | "startLabel">>>>;
         controlId: import('vue').ComputedRef<string>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;

package/dist/Components/Radio/composables/useRadio.js

@@ -23,7 +23,7 @@ function _(_, v, y) {
 		error: !1,
 		hideErrorMessage: !1,
 		size: v.size ?? "sm"
-	}), S = i(() => l({
+	}, { componentName: "Radio" }), S = i(() => l({
 		bridgeKeys: g,
 		props: {
 			...b,
@@ -36,7 +36,16 @@ function _(_, v, y) {
 	}), T = i(() => C.value.customProps), E = n({
 		entry: w,
 		props: () => S.value.componentProps
-	}), D = i(() => a(y) === C.value.value), O = i(() => u(c(f, w.value?.tokens?.color), C.value.color ?? "primary")), k = i(() => c(p, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => u(c(h, w.value?.tokens?.size), C.value.size ?? "sm")), M = i(() => u(c(m, w.value?.tokens?.rounded), C.value.rounded ?? "full")), N = i(() => e({
+	}), D = i(() => a(y) === C.value.value), O = i(() => {
+		let e = c(f, w.value?.tokens?.color);
+		return u(e, C.value.color ?? "primary");
+	}), k = i(() => c(p, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => {
+		let e = c(h, w.value?.tokens?.size);
+		return u(e, C.value.size ?? "sm");
+	}), M = i(() => {
+		let e = c(m, w.value?.tokens?.rounded);
+		return u(e, C.value.rounded ?? "full");
+	}), N = i(() => e({
 		...T.value?.input,
 		...x.controlBind.value,
 		type: "radio",

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

@@ -9,20 +9,22 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     clear: () => any;
     search: (query: string) => any;
     select: (option: import('@bridge-ui/core').ListboxOption) => any;
-    "update:modelValue": (...args: unknown[]) => any;
+    cancel: () => any;
     change: (value: import('@bridge-ui/core').SelectModel) => any;
     close: () => any;
-    open: () => any;
     deselect: (option: import('@bridge-ui/core').ListboxOption) => any;
+    open: () => any;
+    "update:modelValue": (...args: unknown[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: import('@bridge-ui/core').SelectModel) => any) | undefined;
     onClose?: (() => any) | undefined;
-    onOpen?: (() => any) | undefined;
     onDeselect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
 }>, {
     showErrorIcon: boolean;
     clearable: boolean;

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

@@ -21,10 +21,10 @@ var P = {
 	key: 0,
 	hidden: "",
 	"aria-hidden": "true"
-}, R = /* @__PURE__ */ h({
+}, R = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "Select",
-	props: /* @__PURE__ */ v({
+	props: /*@__PURE__*/ v({
 		asyncData: {},
 		clearable: {
 			type: Boolean,
@@ -45,11 +45,13 @@ var P = {
 		optionLabel: {},
 		options: {},
 		optionValue: {},
+		overlay: {},
 		placeholder: {},
 		searchable: {
 			type: Boolean,
 			default: !1
 		},
+		showFooter: { type: Boolean },
 		classes: {},
 		color: {},
 		controlId: {},
@@ -79,7 +81,8 @@ var P = {
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ v([
+	emits: /*@__PURE__*/ v([
+		"cancel",
 		"change",
 		"clear",
 		"close",
@@ -104,20 +107,20 @@ var P = {
 				W.value.some((t) => String(t.value) === String(e.value)) || (W.value = [...W.value, e]);
 			}
 		});
-		let { open: G, slots: K, hasValue: q, multiple: se, formField: J, clearable: ce, clearBind: Y, clearValue: X, removeChip: le, triggerBind: Z, selectOption: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, selectedOptions: me, hasComposedList: $, handleRegisteredOptionsChange: he } = o(z, oe, U, B, W);
+		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: se, triggerBind: Z, handleApply: ce, selectOption: le, handleCancel: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, showClearIcon: me, selectedOptions: he, hasComposedList: $, handleRegisteredOptionsChange: ge } = o(z, oe, U, B, W);
 		return (e, o) => (x(), f(c, null, [
 			m(E(a), { field: E(J) }, {
-				default: k(() => [E(se) ? (x(), f("div", P, [(x(!0), f(c, null, ie(E(me), (t) => (x(), u(E(i), y({
+				default: k(() => [E(q) ? (x(), f("div", P, [(x(!0), f(c, null, ie(E(he), (t) => (x(), u(E(i), y({
 					dismissible: "",
 					key: String(t.value),
 					size: E(J).merged.value.size,
 					disabled: E(J).isDisabled.value,
 					"clear-label": `Remove ${t.label}`,
-					onDismiss: (e) => E(le)(t, e)
+					onDismiss: (e) => E(se)(t, e)
 				}, { ref_for: !0 }, E(ee)(z.customProps?.chip, {
 					customProps: { clear: E(Y) },
 					classes: { root: E(M)({
-						"bg-white ring-1 ring-inset ring-gray-200 dark:bg-gray-700 dark:ring-gray-600": !0,
+						"bg-white ring-1 ring-inset ring-dark-200 dark:bg-dark-700 dark:ring-dark-600": !0,
 						[E(pe).chip ?? ""]: !0
 					}) }
 				})), {
@@ -131,7 +134,7 @@ var P = {
 				]))), 128)), p("textarea", y({ ref: "trigger" }, E(Z)), null, 16)])) : (x(), f("div", F, [p("input", y({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, E(Z)), null, 16), E(ce) && E(q) && !E(J).isDisabled.value ? (x(), f("span", y({ key: 0 }, E(Y), {
+				}, E(Z)), null, 16), E(me) ? (x(), f("span", y({ key: 0 }, E(Y), {
 					onClick: o[0] ||= (...e) => E(X) && E(X)(...e),
 					onKeydown: [o[1] ||= A(j((...e) => E(X) && E(X)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => E(X) && E(X)(...e), ["prevent"]), ["space"])],
 					"aria-label": E(V)("Clear selection")
@@ -145,9 +148,11 @@ var P = {
 				modelValue: E(G),
 				"onUpdate:modelValue": o[3] ||= (e) => _(G) ? G.value = e : null
 			}, E(de), {
+				onApply: E(ce),
 				"anchor-el": E(Q),
-				onSelect: E(ue),
-				onRegisteredOptionsChange: E(he)
+				onCancel: E(ue),
+				onSelect: E(le),
+				onRegisteredOptionsChange: E(ge)
 			}), ne({ _: 2 }, [
 				E($) ? {
 					name: "default",
@@ -181,7 +186,9 @@ var P = {
 				} : void 0
 			]), 1040, [
 				"modelValue",
+				"onApply",
 				"anchor-el",
+				"onCancel",
 				"onSelect",
 				"onRegisteredOptionsChange"
 			]),

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

@@ -4,7 +4,7 @@ import { createElementBlock as t, defineComponent as n, inject as r, onBeforeUnm
 var s = {
 	hidden: "",
 	"aria-hidden": "true"
-}, c = /* @__PURE__ */ n({
+}, c = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	name: "SelectOption",
 	__name: "SelectOption",

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

@@ -437,7 +437,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
         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, {}>>;
@@ -720,13 +720,16 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>>;
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>>;
+    handleApply: () => void;
     selectOption: (option: SelectOption) => void;
+    handleCancel: () => void;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     listboxProps: import('vue').ComputedRef<{
         anchorEl?: null | HTMLElement;
         classes?: import('../../Listbox').ListboxClasses;
         color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
+        componentName: "Select" | "Autocomplete";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;
@@ -743,13 +746,16 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         maxHeight: string;
         multiple: boolean;
         options: import('@bridge-ui/core').ListboxOption[];
+        overlay: import('@bridge-ui/core').FieldOverlayMode;
         placement?: import('@floating-ui/utils').Placement;
         rounded: "2xl" | "lg" | "md" | "sm" | "xl" | "xs" | "none" | "3xl" | "4xl" | "full";
         showCheckmark?: boolean;
+        showFooter: boolean;
         size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
     }>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
     mergedClasses: import('vue').ComputedRef<Partial<SelectClasses>>;
+    showClearIcon: import('vue').ComputedRef<boolean>;
     visibleOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;
     isSearchActive: import('vue').ComputedRef<boolean>;
     selectedOptions: import('vue').ComputedRef<import('@bridge-ui/core').ListboxOption[]>;