@bridge-ui/vue 0.0.11 → 0.1.1

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { OtpInputType } from '@bridge-ui/core/Domain';
-import { BaseFieldInvalidated, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldVariant } from '@bridge-ui/core/Tokens';
+import { OtpFieldColor, OtpFieldRounded, OtpFieldVariant } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldSlots } from '../BaseField/baseField.types';
 export interface OtpFieldColorOverrides {}
@@ -17,18 +17,11 @@ export interface OtpFieldClasses extends BaseFieldClasses {
      */
     pin?: string;
 }
-export interface OtpFieldCustomProps extends Omit<BaseFieldCustomProps, "invalidated"> {
+export interface OtpFieldCustomProps extends BaseFieldCustomProps {
     /**
      * Props forwarded to each pin `<input>`.
      */
     input?: Partial<InputHTMLAttributes>;
-    /**
-     * Pin error chrome (`pin` / `pinUnderlined`). Error message color comes from
-     * {@link BaseField} (`Tokens/BaseField`); pass `errorMessage` here to override.
-     *
-     * @default undefined
-     */
-    invalidated?: Partial<OtpFieldInvalidated & BaseFieldInvalidated>;
     /**
      * Props forwarded to each pin cell wrapper.
      */

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

@@ -2,8 +2,8 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 import { useFormControl as r } from "../../FormControl/composables/useFormControl.js";
 import { computed as i, toValue as a, useAttrs as o } from "vue";
 import { get as s, omit as c } from "es-toolkit/compat";
-import { radioColorProps as l, radioInvalidatedProps as u, radioRoundedProps as d, radioSizeProps as f } from "@bridge-ui/core/Tokens";
-import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
+import { radioColorProps as l, radioRoundedProps as u, radioSizeProps as d } from "@bridge-ui/core/Tokens";
+import { cn as f, getColorToken as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/Radio/composables/useRadio.ts
 var g = [
 	"name",
@@ -38,50 +38,54 @@ function _(_, v, y) {
 		props: () => S.value.componentProps
 	}), D = i(() => a(y) === C.value.value), O = i(() => {
 		let e = m(l, w.value?.tokens?.color);
-		return s(e, C.value.color ?? "primary");
-	}), k = i(() => m(u, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => {
-		let e = m(f, w.value?.tokens?.size);
+		return p({
+			tokens: e,
+			color: C.value.color,
+			invalid: x.invalidated.value
+		});
+	}), k = i(() => {
+		let e = m(d, w.value?.tokens?.size);
 		return s(e, C.value.size ?? "sm");
-	}), M = i(() => {
-		let e = m(d, w.value?.tokens?.rounded);
+	}), A = i(() => {
+		let e = m(u, w.value?.tokens?.rounded);
 		return s(e, C.value.rounded ?? "full");
-	}), N = i(() => e({
+	}), j = i(() => e({
 		...T.value?.input,
 		...x.controlBind.value,
 		type: "radio",
 		name: C.value.name,
 		value: C.value.value
-	}, c(S.value.inheritedAttrs, ["class"]), p({
+	}, c(S.value.inheritedAttrs, ["class"]), f({
 		"sr-only": !0,
 		[E.value.input ?? ""]: !0
-	}))), P = i(() => e(T.value?.control, { "aria-hidden": !0 }, p({
+	}))), M = i(() => e(T.value?.control, { "aria-hidden": !0 }, f({
 		"inline-flex shrink-0 items-center justify-center border shadow-sm transition ease-in-out duration-100": !0,
 		"pointer-events-none": !0,
-		[j.value ?? ""]: !0,
-		[M.value ?? ""]: !0,
-		[A.value?.base ?? ""]: !D.value,
-		[A.value?.checked ?? ""]: D.value,
+		[k.value ?? ""]: !0,
+		[A.value ?? ""]: !0,
+		[O.value?.base ?? ""]: !D.value,
+		[O.value?.checked ?? ""]: D.value,
 		[E.value.control ?? ""]: !0
 	})));
 	return {
 		merged: C,
-		dotBind: i(() => e(T.value?.dot, {}, p({
+		dotBind: i(() => e(T.value?.dot, {}, f({
 			"rounded-full bg-white transition-transform duration-100": !0,
 			"scale-0": !D.value,
 			"scale-100": D.value,
 			"h-[42%] w-[42%]": !0,
 			[E.value.dot ?? ""]: !0
 		}))),
-		fieldBind: i(() => e({}, {}, p({
+		fieldBind: i(() => e({}, {}, f({
 			"relative inline-flex shrink-0 cursor-pointer items-center": !0,
 			"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2": !0,
-			[M.value ?? ""]: !0,
-			[A.value?.focus ?? ""]: !0
+			[A.value ?? ""]: !0,
+			[O.value?.focus ?? ""]: !0
 		}))),
-		inputBind: N,
+		inputBind: j,
 		isChecked: D,
 		formControl: x,
-		controlBind: P
+		controlBind: M
 	};
 }
 //#endregion

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

@@ -729,15 +729,14 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         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;
         emptyMessage: string;
         entries: ListboxEntry[];
+        error: boolean;
         hideEmptyMessage: boolean;
         highlightedIndex: number;
-        invalidated: boolean;
         isSelected: (value: import('@bridge-ui/core/Domain').ListboxValue) => boolean;
         labelledBy: string;
         listboxId: string;

package/dist/Components/Select/composables/useSelect.js

@@ -5,10 +5,10 @@ import { mergePartBind as r, resolveFieldAdornmentIconSize as ee, useBridgeUICom
 import { formFieldBridgeKeys as re, useFormField as ie } from "../../FormField/composables/useFormField.js";
 import { useListboxNavigation as ae } from "../../Listbox/composables/useListboxNavigation.js";
 import { Comment as oe, Text as se, computed as a, nextTick as o, onBeforeUnmount as ce, onMounted as le, ref as s, useAttrs as ue, useId as de, useSlots as fe, watch as c } from "vue";
-import { get as l, isNil as pe, omit as me } from "es-toolkit/compat";
-import { createSelectAsyncSearch as he, filterListboxEntries as ge, flattenListboxOptions as u, normalizeListboxEntries as _e, normalizeSelectOptions as ve, resolveFieldOverlay as ye, resolveSelectAsyncDebounce as be, resolveSelectAsyncOptions as xe, selectValuesEqual as d } from "@bridge-ui/core/Domain";
-import { listboxColorProps as Se, listboxInvalidatedProps as Ce } from "@bridge-ui/core/Tokens";
-import { adjustAutosizeTextareaHeight as we, cn as f, mergeBridgeUILayeredClasses as Te, splitComponentProps as Ee } from "@bridge-ui/core/Utils";
+import { get as pe, isNil as me, omit as he } from "es-toolkit/compat";
+import { createSelectAsyncSearch as ge, filterListboxEntries as _e, flattenListboxOptions as l, normalizeListboxEntries as u, normalizeSelectOptions as ve, resolveFieldOverlay as ye, resolveSelectAsyncDebounce as be, resolveSelectAsyncOptions as xe, selectValuesEqual as d } from "@bridge-ui/core/Domain";
+import { listboxColorProps as Se } from "@bridge-ui/core/Tokens";
+import { adjustAutosizeTextareaHeight as Ce, cn as f, getColorToken as we, mergeBridgeUILayeredClasses as Te, splitComponentProps as Ee } from "@bridge-ui/core/Utils";
 //#region src/Components/Select/composables/useSelect.ts
 var De = [
 	"classes",
@@ -53,7 +53,7 @@ function p(p, m, h, g, Oe) {
 	})), P = a(() => Oe.value.length > 0 ? Oe.value.map((e) => ({
 		option: e,
 		type: "option"
-	})) : _e(A.value.options, N.value)), Pe = a(() => u(P.value)), F = s([]);
+	})) : u(A.value.options, N.value)), Pe = a(() => l(P.value)), F = s([]);
 	function Fe(e) {
 		if (!e || typeof e != "object") return !1;
 		let t = e.type;
@@ -71,16 +71,16 @@ function p(p, m, h, g, Oe) {
 	let I = a(() => Ie() && !A.value.options?.length), L = a(() => {
 		if (I.value) return [];
 		if (T.value.length > 0) {
-			let e = _e(T.value, N.value);
+			let e = u(T.value, N.value);
 			return A.value.flipOptions ? [...e].reverse() : e;
 		}
 		return A.value.flipOptions ? [...P.value].reverse().map((e) => e.type === "section" ? {
 			...e,
 			options: [...e.options].reverse()
 		} : e) : P.value;
-	}), Le = a(() => I.value ? F.value : u(L.value)), R = a(() => {
+	}), Le = a(() => I.value ? F.value : l(L.value)), R = a(() => {
 		let e = m.value;
-		return M.value ? Array.isArray(e) ? e : [] : !pe(e) && e !== "" ? [e] : [];
+		return M.value ? Array.isArray(e) ? e : [] : !me(e) && e !== "" ? [e] : [];
 	}), Re = a(() => ye(A.value.overlay, Ae.mobile)), z = ne({
 		componentName: "Select",
 		overlay: Re,
@@ -100,8 +100,8 @@ function p(p, m, h, g, Oe) {
 		if (I.value) return [];
 		if (!W.value || !x.value.trim()) return L.value;
 		let e = x.value.trim().toLowerCase();
-		return ge(L.value, (t) => t.label.toLowerCase().includes(e));
-	}), G = a(() => I.value ? F.value : u(He.value)), K = ae(() => G.value, C, v), Ue = a(() => p.readonly || p.disabled ? !0 : !W.value), We = a(() => W.value || M.value ? x.value : B.value[0]?.label ?? ""), Ge = (e) => {
+		return _e(L.value, (t) => t.label.toLowerCase().includes(e));
+	}), G = a(() => I.value ? F.value : l(He.value)), K = ae(() => G.value, C, v), Ue = a(() => p.readonly || p.disabled ? !0 : !W.value), We = a(() => W.value || M.value ? x.value : B.value[0]?.label ?? ""), Ge = (e) => {
 		D.value = e instanceof HTMLElement ? e : null;
 	};
 	function Ke(e) {
@@ -119,7 +119,7 @@ function p(p, m, h, g, Oe) {
 		}
 	}
 	let Je = a(() => {
-		let e = me(k.value.inheritedAttrs, ["class"]), n = Ee({
+		let e = he(k.value.inheritedAttrs, ["class"]), n = Ee({
 			bridgeKeys: re,
 			props: e
 		}).componentProps, ee = n.endIcon ?? (t(_, "end") ? void 0 : "chevronUpDown"), { listbox: te, ...i } = n.customProps ?? {};
@@ -147,7 +147,7 @@ function p(p, m, h, g, Oe) {
 		likeInput: () => M.value,
 		control: () => M.value ? "textarea" : "input"
 	}), Xe = a(() => V.value && Be.value && !p.readonly && !q.isDisabled.value), J = (e) => {
-		!e || !M.value || we(e);
+		!e || !M.value || Ce(e);
 	};
 	function Ze(e) {
 		return ze.value.some((t) => d(t, e));
@@ -267,18 +267,17 @@ function p(p, m, h, g, Oe) {
 		!e?.resolve || R.value.length === 0 || (E.value = ve(await e.resolve(R.value), N.value));
 	}
 	let $ = a(() => {
-		let e = Te(Se, l(Me.value, [
+		let e = Te(Se, pe(Me.value, [
 			"Select",
 			"tokens",
 			"listbox",
 			"color"
-		])), t = l(e, q.merged.value.color ?? "primary");
-		return q.invalidated.value ? Te(Ce, l(Me.value, [
-			"Select",
-			"tokens",
-			"listbox",
-			"invalidated"
-		])) : t;
+		]));
+		return we({
+			tokens: e,
+			color: q.merged.value.color,
+			invalid: q.invalidated.value
+		});
 	}), ct = a(() => $.value?.value), lt = a(() => {
 		let e = !p.disabled && !p.readonly && !W.value, t = !p.disabled && !p.readonly && W.value && U.value, n = V.value && !M.value && !W.value;
 		return r({
@@ -317,7 +316,7 @@ function p(p, m, h, g, Oe) {
 			O = null;
 			return;
 		}
-		O = he((e) => void ot(e), be(e));
+		O = ge((e) => void ot(e), be(e));
 	}, { immediate: !0 }), ce(() => {
 		O?.cancel();
 	}), le(() => {
@@ -344,12 +343,11 @@ function p(p, m, h, g, Oe) {
 		showFooter: z.value,
 		entries: He.value,
 		options: G.value,
-		componentName: "Select",
 		size: q.merged.value.size,
+		error: q.invalidated.value,
 		color: q.merged.value.color,
 		labelledBy: q.controlId.value,
 		rounded: q.merged.value.rounded,
-		invalidated: q.invalidated.value,
 		highlightedIndex: C.value,
 		disableMaxHeight: p.disableMaxHeight === !0,
 		hideEmptyMessage: A.value.hideEmptyMessage === !0,