@bridge-ui/vue 0.0.5 → 0.0.7

package/dist/Components/FormField/composables/useFormField.js

@@ -1,12 +1,11 @@
 import { hasNamedSlot as e, hasSlotOrProp as t } from "../../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as n, mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
 import { computed as o, toValue as s, useId as c, useSlots as l } from "vue";
-import { get as u, omit as d } from "es-toolkit/compat";
-import { cn as f, mergeBridgeUILayeredClasses as p, splitComponentProps as m } from "@bridge-ui/core";
-import { CircleAlert as h } from "@lucide/vue";
-import { colorProps as g, invalidatedProps as _, roundedProps as v, sizeProps as y, variantProps as b } from "@bridge-ui/core/Tokens/FormField";
+import { cn as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core";
+import { get as p, omit as m } from "es-toolkit/compat";
+import { colorProps as h, invalidatedProps as g, roundedProps as _, sizeProps as v, variantProps as y } from "@bridge-ui/core/Tokens/FormField";
 //#region src/Components/FormField/composables/useFormField.ts
-var x = [
+var b = [
 	"end",
 	"size",
 	"color",
@@ -26,73 +25,73 @@ var x = [
 	"customProps",
 	"description",
 	"errorMessage",
-	"withErrorIcon",
-	"withoutErrorMessage"
+	"showErrorIcon",
+	"hideErrorMessage"
 ];
-function S(S, ee, C = {}) {
-	let w = c(), T = l(), E = o(() => m({
-		props: s(S),
-		bridgeKeys: x
-	})), { merged: D, entry: O } = i({
-		libDefaults: ee,
+function x(x, S, C = {}) {
+	let ee = c(), w = l(), T = o(() => f({
+		props: s(x),
+		bridgeKeys: b
+	})), { merged: E, entry: D } = i({
+		libDefaults: S,
 		componentName: "FormField",
-		props: () => E.value.componentProps
-	}), k = o(() => D.value.customProps), A = o(() => C.control?.() ?? "input"), j = a({
-		entry: O,
-		props: () => E.value.componentProps
-	}), M = o(() => D.value.error === !0), N = o(() => !!D.value.disabled), P = o(() => !!D.value.readonly), F = o(() => D.value.variant ?? "outline"), te = o(() => D.value.errorIcon ?? h), I = o(() => F.value === "notched"), L = o(() => F.value === "stacked"), R = o(() => F.value === "underlined"), z = o(() => A.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !D.value.withoutErrorMessage), H = o(() => {
-		let e = E.value.inheritedAttrs.id;
-		return D.value.controlId ?? e ?? w;
-	}), U = o(() => M.value && t(T, "errorMessage", D.value.errorMessage)), W = o(() => (I.value || L.value) && (t(T, "label", D.value.label) || t(T, "corner", D.value.corner))), G = o(() => t(T, "label", D.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
+		props: () => T.value.componentProps
+	}), O = o(() => E.value.customProps), k = o(() => C.control?.() ?? "input"), A = a({
+		entry: D,
+		props: () => T.value.componentProps
+	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !E.value.hideErrorMessage), H = o(() => {
+		let e = T.value.inheritedAttrs.id;
+		return E.value.controlId ?? e ?? ee;
+	}), U = o(() => j.value && t(w, "errorMessage", E.value.errorMessage)), W = o(() => (I.value || L.value) && (t(w, "label", E.value.label) || t(w, "corner", E.value.corner))), G = o(() => t(w, "label", E.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
 		let e = [];
-		return !M.value && t(T, "description", D.value.description) && e.push(`${H.value}-description`), M.value && !D.value.withoutErrorMessage && t(T, "errorMessage", D.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
-	}), q = o(() => u(p(y, O.value?.tokens?.size), [D.value.size, F.value])), J = o(() => u(p(g, O.value?.tokens?.color), D.value.color ?? "primary")), Y = o(() => p(_, O.value?.tokens?.invalidated, D.value.customProps?.invalidated)), X = o(() => M.value ? Y.value : void 0), Z = o(() => u(p(v, O.value?.tokens?.rounded), D.value.rounded)), Q = o(() => u(p(b, O.value?.tokens?.variant), F.value)), ne = o(() => {
-		let e = M.value ? Y.value : J.value;
+		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.hideErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+	}), q = o(() => p(d(v, D.value?.tokens?.size), [E.value.size, P.value])), J = o(() => p(d(h, D.value?.tokens?.color), E.value.color ?? "primary")), Y = o(() => d(g, D.value?.tokens?.invalidated, E.value.customProps?.invalidated)), X = o(() => j.value ? Y.value : void 0), Z = o(() => p(d(_, D.value?.tokens?.rounded), E.value.rounded)), Q = o(() => p(d(y, D.value?.tokens?.variant), P.value)), te = o(() => {
+		let e = j.value ? Y.value : J.value;
 		return R.value ? e?.underlined : e?.input;
-	}), re = o(() => {
-		if (L.value) return f({
+	}), ne = o(() => {
+		if (L.value) return u({
 			[q.value?.insetTop ?? ""]: !0,
 			[q.value?.insetStart ?? ""]: !0,
 			[q.value?.insetEnd ?? ""]: !0
 		});
-	}), ie = o(() => {
-		let t = C.reservedSlots?.() ?? [], n = e(T, "end") || t.includes("end"), r = e(T, "start") || t.includes("start");
-		if (!L.value) return !r && !n ? q.value?.padding : f({
+	}), re = o(() => {
+		let t = C.reservedSlots?.() ?? [], n = e(w, "end") || t.includes("end"), r = e(w, "start") || t.includes("start");
+		if (!L.value) return !r && !n ? q.value?.padding : u({
 			[q.value?.insetStart ?? ""]: !r,
 			[q.value?.insetEnd ?? ""]: !n
 		});
-	}), ae = o(() => r(k.value?.end, {}, f({
+	}), ie = o(() => r(O.value?.end, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
-		"text-gray-500": !M.value,
+		"text-gray-500": !j.value,
 		[Z.value?.end ?? ""]: !R.value && !L.value,
-		[J.value?.end ?? ""]: !M.value,
-		[X.value?.adornment ?? ""]: M.value,
-		[j.value.end ?? ""]: !0
-	}))), oe = o(() => {
-		let e = E.value.inheritedAttrs;
-		return r(k.value?.root, {
-			class: f(e.class),
-			...d(e, ["class"])
-		}, f({
+		[J.value?.end ?? ""]: !j.value,
+		[X.value?.adornment ?? ""]: j.value,
+		[A.value.end ?? ""]: !0
+	}))), ae = o(() => {
+		let e = T.value.inheritedAttrs;
+		return r(O.value?.root, {
+			class: u(e.class),
+			...m(e, ["class"])
+		}, u({
 			"group w-full relative": !0,
 			"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
 			"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-			[j.value.root ?? ""]: !0
+			[A.value.root ?? ""]: !0
 		}));
-	}), $ = o(() => r(k.value?.errorMessage, {}, f({
+	}), oe = o(() => r(O.value?.errorMessage, {}, u({
 		"mt-2": !0,
 		"min-h-[1lh]": V.value,
 		[X.value?.errorMessage ?? ""]: !0,
 		[q.value?.text ?? ""]: !0,
-		[j.value.errorMessage ?? ""]: !0
-	}))), se = o(() => r({
-		...k.value?.input,
+		[A.value.errorMessage ?? ""]: !0
+	}))), $ = o(() => r({
+		...O.value?.input,
 		id: H.value,
-		disabled: N.value,
-		readonly: P.value,
+		disabled: M.value,
+		readonly: N.value,
 		"aria-describedby": K.value,
-		"aria-invalid": M.value || void 0
-	}, d(E.value.inheritedAttrs, ["class"]), f({
+		"aria-invalid": j.value || void 0
+	}, m(T.value.inheritedAttrs, ["class"]), u({
 		"flex-1 min-w-0 min-h-0 bg-transparent border-0 shadow-none": !0,
 		"h-full": !z.value && !L.value,
 		"max-h-none": z.value,
@@ -102,34 +101,34 @@ function S(S, ee, C = {}) {
 		[q.value?.input ?? ""]: !z.value,
 		[q.value?.textarea ?? ""]: z.value,
 		[q.value?.textareaLikeInput ?? ""]: B.value,
-		[j.value.input ?? ""]: !0
-	}))), ce = o(() => n(k.value?.label, {
+		[A.value.input ?? ""]: !0
+	}))), se = o(() => n(O.value?.label, {
 		for: H.value,
-		size: D.value.size,
-		error: M.value,
-		required: D.value.required,
+		size: E.value.size,
+		error: j.value,
+		required: E.value.required,
 		classes: {
-			required: j.value.required,
-			root: f({
+			required: A.value.required,
+			root: u({
 				[Q.value?.label ?? ""]: I.value,
-				[j.value.label ?? ""]: !0
+				[A.value.label ?? ""]: !0
 			})
 		}
-	})), le = o(() => r(k.value?.start, {}, f({
+	})), ce = o(() => r(O.value?.start, {}, u({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
-		"text-gray-400": !M.value,
+		"text-gray-400": !j.value,
 		[Z.value?.start ?? ""]: !R.value && !L.value,
-		[J.value?.start ?? ""]: !M.value,
-		[X.value?.adornment ?? ""]: M.value,
-		[j.value.start ?? ""]: !0
-	}))), ue = o(() => r(k.value?.corner, {}, f({
+		[J.value?.start ?? ""]: !j.value,
+		[X.value?.adornment ?? ""]: j.value,
+		[A.value.start ?? ""]: !0
+	}))), le = o(() => r(O.value?.corner, {}, u({
 		"text-gray-500 dark:text-gray-400": !I.value,
 		[q.value?.text ?? ""]: !0,
 		[Q.value?.corner ?? ""]: I.value,
-		[j.value.corner ?? ""]: !0
-	}))), de = o(() => {
-		let e = t(T, "label", D.value.label);
-		return r(k.value?.header, {}, f({
+		[A.value.corner ?? ""]: !0
+	}))), ue = o(() => {
+		let e = t(w, "label", E.value.label);
+		return r(O.value?.header, {}, u({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
@@ -137,84 +136,84 @@ function S(S, ee, C = {}) {
 			"items-center": I.value,
 			"items-end": L.value,
 			[Q.value?.labelRow ?? ""]: W.value,
-			[j.value.header ?? ""]: !0
+			[A.value.header ?? ""]: !0
 		}));
-	}), fe = o(() => r(k.value?.header, {}, f({
+	}), de = o(() => r(O.value?.header, {}, u({
 		flex: !0,
 		"mb-1": !0,
 		[G.value]: !0,
-		[j.value.header ?? ""]: !0
-	}))), pe = o(() => r(k.value?.endIcon, {}, f({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), me = o(() => r(k.value?.end, {}, f({
+		[A.value.header ?? ""]: !0
+	}))), fe = o(() => r(O.value?.endIcon, {}, u({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), pe = o(() => r(O.value?.end, {}, u({
 		"group/end wrapper-end-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 		"self-stretch min-h-0 overflow-hidden py-0.5 pe-0.5": L.value,
 		"h-full min-h-0 overflow-hidden py-0.5 pe-0.5": !L.value,
-		[j.value.end ?? ""]: !0
-	}))), he = o(() => r({}, {}, f({
+		[A.value.end ?? ""]: !0
+	}))), me = o(() => r({}, {}, u({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
-		[re.value ?? ""]: !0
-	}))), ge = o(() => r({}, {}, f({
+		[ne.value ?? ""]: !0
+	}))), he = o(() => r({}, {}, u({
 		"flex w-full min-w-0 flex-1 items-stretch gap-x-2": !0,
 		[q.value?.controlRow ?? ""]: !0
 	})));
 	return {
-		slots: T,
-		merged: D,
-		control: A,
-		endBind: ae,
-		rootBind: oe,
+		slots: w,
+		merged: E,
+		control: k,
+		endBind: ie,
+		rootBind: ae,
 		controlId: H,
-		errorBind: $,
-		errorIcon: te,
-		inputBind: se,
+		errorBind: oe,
+		errorIcon: F,
+		inputBind: $,
 		isNotched: I,
 		isStacked: L,
-		startBind: le,
-		cornerBind: ue,
-		headerBind: fe,
-		isDisabled: N,
-		isReadonly: P,
-		variantKey: F,
-		endIconBind: pe,
-		endSlotBind: me,
-		invalidated: M,
-		containerBind: o(() => r(k.value?.container, { "data-bridge-rounded": D.value.rounded ?? "md" }, f({
+		startBind: ce,
+		cornerBind: le,
+		headerBind: de,
+		isDisabled: M,
+		isReadonly: N,
+		variantKey: P,
+		endIconBind: fe,
+		endSlotBind: pe,
+		invalidated: j,
+		containerBind: o(() => r(O.value?.container, { "data-bridge-rounded": E.value.rounded ?? "md" }, u({
 			"group/field relative flex flex-row items-stretch overflow-hidden": L.value,
 			"group/field relative flex justify-start gap-x-2 items-stretch": !L.value,
 			"transition-all ease-in-out duration-150 outline-none": !0,
-			"bg-gray-100 dark:bg-gray-800": N.value && !M.value,
+			"bg-gray-100 dark:bg-gray-800": M.value && !j.value,
 			[q.value?.container ?? ""]: !z.value,
 			[q.value?.containerTextareaLikeInput ?? ""]: B.value,
 			[q.value?.containerTextarea ?? ""]: z.value && !B.value,
 			[Q.value?.container ?? ""]: !0,
 			[Z.value?.input ?? ""]: !R.value,
-			[ie.value ?? ""]: !0,
-			[ne.value ?? ""]: !0,
+			[re.value ?? ""]: !0,
+			[te.value ?? ""]: !0,
 			"rounded-none": R.value,
-			[X.value?.container ?? ""]: M.value && !R.value,
-			[X.value?.containerUnderlined ?? ""]: M.value && R.value,
-			[j.value.container ?? ""]: !0
+			[X.value?.container ?? ""]: j.value && !R.value,
+			[X.value?.containerUnderlined ?? ""]: j.value && R.value,
+			[A.value.container ?? ""]: !0
 		}))),
-		startIconBind: o(() => r(k.value?.startIcon, {}, f({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
-		startSlotBind: o(() => r(k.value?.start, {}, f({
+		startIconBind: o(() => r(O.value?.startIcon, {}, u({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: o(() => r(O.value?.start, {}, u({
 			"group/start wrapper-start-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 			"self-stretch min-h-0 overflow-hidden py-0.5 ps-0.5": L.value,
 			"h-full min-h-0 overflow-hidden py-0.5 ps-0.5": !L.value,
-			[j.value.start ?? ""]: !0
+			[A.value.start ?? ""]: !0
 		}))),
-		fieldLabelProps: ce,
+		fieldLabelProps: se,
 		ariaDescribedBy: K,
-		descriptionBind: o(() => r(k.value?.description, {}, f({
+		descriptionBind: o(() => r(O.value?.description, {}, u({
 			"mt-2 text-gray-500 dark:text-gray-400": !0,
 			[q.value?.text ?? ""]: !0,
-			[j.value.description ?? ""]: !0
+			[A.value.description ?? ""]: !0
 		}))),
-		stackedBodyBind: he,
+		stackedBodyBind: me,
 		hasInsetLabelRow: W,
-		insetLabelRowBind: de,
-		stackedInputRowBind: ge,
+		insetLabelRowBind: ue,
+		stackedInputRowBind: he,
 		showErrorMessageContent: U,
 		reservesErrorMessageSpace: V
 	};
 }
 //#endregion
-export { x as formFieldBridgeKeys, S as useFormField };
+export { b as formFieldBridgeKeys, x as useFormField };

package/dist/Components/FormField/formField.types.d.ts

@@ -1,6 +1,6 @@
-import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, InputHTMLAttributes, Slot } from 'vue';
 import { FormFieldColor, FormFieldInvalidated, FormFieldRounded, FormFieldSize, FormFieldVariant, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { IconSource } from '../../Adapters/Icon';
 import { UseFormFieldReturn } from './composables/useFormField';
 import { IconProps } from '../Icon';
 import { LabelProps } from '../Label/label.types';
@@ -167,7 +167,7 @@ export interface FormFieldOwnProps {
      *
      * @default undefined
      */
-    endIcon?: LucideIcon;
+    endIcon?: IconSource;
     /**
      * When `true`, applies invalid styling on the label and hides description.
      *
@@ -175,11 +175,11 @@ export interface FormFieldOwnProps {
      */
     error?: boolean;
     /**
-     * Icon used when `withErrorIcon` is enabled and the field is invalid.
+     * Icon used when `showErrorIcon` is enabled and the field is invalid.
      *
-     * @default CircleAlert
+     * @default "alert"
      */
-    errorIcon?: LucideIcon;
+    errorIcon?: IconSource;
     /**
      * Error message below the control. Shown only when set (or via `#errorMessage`
      * slot).
@@ -194,6 +194,12 @@ export interface FormFieldOwnProps {
      * @default undefined
      */
     field?: UseFormFieldReturn;
+    /**
+     * When `true`, does not reserve space below the control for error messages.
+     *
+     * @default false
+     */
+    hideErrorMessage?: boolean;
     /**
      * The primary label text above the control.
      *
@@ -218,6 +224,13 @@ export interface FormFieldOwnProps {
      * @default "md"
      */
     rounded?: MergeProps<FormFieldRounded, FormFieldRoundedOverrides>;
+    /**
+     * When `true` and the field is invalid, shows an error icon at the inline end
+     * when no `endIcon` or `end` slot is present.
+     *
+     * @default true
+     */
+    showErrorIcon?: boolean;
     /**
      * Typography scale for label, corner, description, and error message, and
      * control sizing (input, container, icons).
@@ -241,26 +254,13 @@ export interface FormFieldOwnProps {
      *
      * @default undefined
      */
-    startIcon?: LucideIcon;
+    startIcon?: IconSource;
     /**
      * The visual variant of the field shell and control.
      *
      * @default "outline"
      */
     variant?: MergeProps<FormFieldVariant, FormFieldVariantOverrides>;
-    /**
-     * When `true` and the field is invalid, shows an error icon at the inline end
-     * when no `endIcon` or `end` slot is present.
-     *
-     * @default true
-     */
-    withErrorIcon?: boolean;
-    /**
-     * When `true`, does not reserve space below the control for error messages.
-     *
-     * @default false
-     */
-    withoutErrorMessage?: boolean;
 }
 export interface FormFieldSlots {
     /**

package/dist/Components/Icon/Icon.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,17 @@
 import { useIcon as e } from "./composables/useIcon.js";
-import { createBlock as t, defineComponent as n, guardReactiveProps as r, normalizeProps as i, openBlock as a, resolveDynamicComponent as o, unref as s } from "vue";
+import { createBlock as t, createCommentVNode as n, defineComponent as r, mergeProps as i, normalizeProps as a, openBlock as o, resolveDynamicComponent as s, unref as c } from "vue";
 //#region src/Components/Icon/Icon.vue?vue&type=script&setup=true&lang.ts
-var c = /* @__PURE__ */ n({
+var l = /* @__PURE__ */ r({
 	inheritAttrs: !1,
 	__name: "Icon",
 	props: {
-		icon: { type: [Function, Object] },
+		icon: {},
 		size: {}
 	},
-	setup(n) {
-		let { merged: c, rootBind: l } = e(n, { size: "md" });
-		return (e, n) => (a(), t(o(s(c).icon), i(r(s(l))), null, 16));
+	setup(r) {
+		let { rootBind: l, resolvedIcon: u } = e(r, { size: "md" });
+		return (e, r) => c(u) ? (o(), t(s(c(u)), a(i({ key: 0 }, c(l))), null, 16)) : n("", !0);
 	}
 });
 //#endregion
-export { c as default };
+export { l as default };

package/dist/Components/Icon/composables/useIcon.d.ts

@@ -1,9 +1,11 @@
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { IconElement } from '../../../Adapters/Icon';
 import { IconOwnProps, IconProps } from '../icon.types';
 type IconLibDefaults = LibDefaultsShape<IconOwnProps, "size">;
 type IconMerged = MergeLibDefaults<IconOwnProps, IconLibDefaults>;
 export declare function useIcon(props: IconOwnProps, libDefaults: IconLibDefaults): {
     merged: import('vue').ComputedRef<IconMerged>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, Omit<IconProps, "icon" | "size">>>;
+    resolvedIcon: import('vue').ComputedRef<IconElement | null | undefined>;
 };
 export {};

package/dist/Components/Icon/composables/useIcon.js

@@ -1,26 +1,28 @@
-import { mergePartBind as e, useBridgeUIComponent as t } from "../../../Utils/index.js";
-import { computed as n, useAttrs as r } from "vue";
-import { get as i } from "es-toolkit/compat";
-import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
-import { sizeProps as c } from "@bridge-ui/core/Tokens/Icon";
+import { useIconAdapter as e } from "../../../Adapters/Icon/useIconAdapter.js";
+import { mergePartBind as t, useBridgeUIComponent as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i } from "vue";
+import { cn as a, mergeBridgeUILayeredClasses as o, resolveIconSource as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l } from "es-toolkit/compat";
+import { sizeProps as u } from "@bridge-ui/core/Tokens/Icon";
 //#region src/Components/Icon/composables/useIcon.ts
-var l = ["icon", "size"];
-function u(u, d) {
-	let f = r(), p = n(() => s({
-		bridgeKeys: l,
+var d = ["icon", "size"];
+function f(f, p) {
+	let m = i(), h = r(() => c({
+		bridgeKeys: d,
 		props: {
-			...f,
-			...u
+			...m,
+			...f
 		}
-	})), { merged: m, entry: h } = t({
-		libDefaults: d,
+	})), { merged: g, entry: _ } = n({
+		libDefaults: p,
 		componentName: "Icon",
-		props: () => p.value.componentProps
-	}), g = n(() => i(o(c, h.value?.tokens?.size), m.value.size));
+		props: () => h.value.componentProps
+	}), v = e(), y = r(() => s(g.value.icon, v.value)), b = r(() => l(o(u, _.value?.tokens?.size), g.value.size));
 	return {
-		merged: m,
-		rootBind: n(() => e({}, p.value.inheritedAttrs, a({ [g.value ?? ""]: !0 })))
+		merged: g,
+		rootBind: r(() => t({}, h.value.inheritedAttrs, a({ [b.value ?? ""]: !0 }))),
+		resolvedIcon: y
 	};
 }
 //#endregion
-export { u as useIcon };
+export { f as useIcon };

package/dist/Components/Icon/icon.types.d.ts

@@ -1,12 +1,12 @@
-import { LucideIcon } from '@lucide/vue';
 import { SVGAttributes } from 'vue';
 import { IconSize, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { IconSource } from '../../Adapters/Icon';
 export interface IconSizeOverrides {}
 export interface IconOwnProps {
     /**
-     * Lucide icon component.
+     * Semantic icon name, icon component, or adapter-normalized native value.
      */
-    icon: LucideIcon;
+    icon: IconSource;
     /**
      * The size of the icon.
      *

package/dist/Components/Label/composables/useLabel.d.ts

@@ -4,7 +4,7 @@ type LabelLibDefaults = LibDefaultsShape<LabelOwnProps, "size">;
 type LabelMerged = MergeLibDefaults<LabelOwnProps, LabelLibDefaults>;
 export declare function useLabel(props: LabelOwnProps, libDefaults: LabelLibDefaults): {
     merged: import('vue').ComputedRef<LabelMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, Omit<LabelProps, "size" | "classes" | "error" | "required">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, Omit<LabelProps, "error" | "size" | "classes" | "required">>>;
     requiredBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
 };
 export {};

package/dist/Components/Label/composables/useLabel.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
-import { get as a } from "es-toolkit/compat";
-import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
+import { get as c } from "es-toolkit/compat";
 import { invalidatedProps as l, sizeProps as u } from "@bridge-ui/core/Tokens/Label";
 //#region src/Components/Label/composables/useLabel.ts
 var d = [
@@ -11,7 +11,7 @@ var d = [
 	"required"
 ];
 function f(f, p) {
-	let m = i(), h = r(() => c({
+	let m = i(), h = r(() => s({
 		bridgeKeys: d,
 		props: {
 			...m,
@@ -24,13 +24,13 @@ function f(f, p) {
 	}), v = n({
 		entry: _,
 		props: () => h.value.componentProps
-	}), y = r(() => a(s(u, _.value?.tokens?.size), g.value.size)), b = r(() => s(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, o({
+	}), y = r(() => c(o(u, _.value?.tokens?.size), g.value.size)), b = r(() => o(l, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, a({
 		[b.value.required ?? ""]: !0,
 		[v.value.required ?? ""]: !0
 	})));
 	return {
 		merged: g,
-		rootBind: r(() => e({}, h.value.inheritedAttrs, o({
+		rootBind: r(() => e({}, h.value.inheritedAttrs, a({
 			"inline-flex items-center gap-x-0.5 font-medium leading-none": !0,
 			"text-gray-700 dark:text-gray-300": !g.value.error,
 			[b.value.label ?? ""]: g.value.error,

package/dist/Components/Link/Link.vue_vue_type_script_setup_true_lang.js

@@ -18,8 +18,8 @@ var f = [
 		disabled: { type: Boolean },
 		external: { type: Boolean },
 		href: {},
-		leftIcon: { type: [Function, Object] },
-		rightIcon: { type: [Function, Object] },
+		leftIcon: {},
+		rightIcon: {},
 		size: {},
 		underline: {}
 	},

package/dist/Components/Link/composables/useLink.js

@@ -1,7 +1,7 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i, useSlots as a } from "vue";
-import { get as o } from "es-toolkit/compat";
-import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
+import { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { get as l } from "es-toolkit/compat";
 import { colorProps as u, sizeProps as d, underlineProps as f } from "@bridge-ui/core/Tokens/Link";
 //#region src/Components/Link/composables/useLink.ts
 var p = [
@@ -17,7 +17,7 @@ var p = [
 	"customProps"
 ];
 function m(m, h) {
-	let g = i(), _ = a(), v = r(() => l({
+	let g = i(), _ = a(), v = r(() => c({
 		bridgeKeys: p,
 		props: {
 			...g,
@@ -34,28 +34,28 @@ function m(m, h) {
 		if (y.value.external && !C.value) return "_blank";
 	}), D = r(() => {
 		if (y.value.external && !C.value) return "noopener noreferrer";
-	}), O = r(() => o(c(d, b.value?.tokens?.size), y.value.size)), k = r(() => o(c(u, b.value?.tokens?.color), y.value.color)), A = r(() => o(c(f, b.value?.tokens?.underline), y.value.underline));
+	}), O = r(() => l(s(d, b.value?.tokens?.size), y.value.size)), k = r(() => l(s(u, b.value?.tokens?.color), y.value.color)), A = r(() => l(s(f, b.value?.tokens?.underline), y.value.underline));
 	return {
 		slots: _,
 		merged: y,
 		rootRel: D,
-		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, s({
+		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, o({
 			"inline-flex items-center gap-x-1 font-medium": !0,
 			"transition-colors duration-200": !0,
 			[O.value ?? ""]: !0,
 			[A.value ?? ""]: !0,
-			[o(k.value, "base") ?? ""]: !0,
-			[o(k.value, "hover") ?? ""]: !0,
+			[l(k.value, "base") ?? ""]: !0,
+			[l(k.value, "hover") ?? ""]: !0,
 			"aria-disabled:opacity-80 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none": !0,
 			[S.value.root ?? ""]: !0
 		}))),
 		rootHref: T,
 		rootTarget: E,
-		leftIconBind: r(() => e(x.value?.leftIcon, {}, s({
+		leftIconBind: r(() => e(x.value?.leftIcon, {}, o({
 			"shrink-0": !0,
 			[S.value.leftIcon ?? ""]: !0
 		}))),
-		rightIconBind: r(() => e(x.value?.rightIcon, {}, s({
+		rightIconBind: r(() => e(x.value?.rightIcon, {}, o({
 			"shrink-0": !0,
 			[S.value.rightIcon ?? ""]: !0
 		}))),

package/dist/Components/Link/link.types.d.ts

@@ -1,6 +1,6 @@
-import { LucideIcon } from '@lucide/vue';
 import { AnchorHTMLAttributes, HTMLAttributes, Slot } from 'vue';
 import { LinkColor, LinkSize, LinkUnderline, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { IconSource } from '../../Adapters/Icon';
 import { IconProps } from '../Icon';
 export interface LinkSizeOverrides {}
 export interface LinkColorOverrides {}
@@ -76,13 +76,13 @@ export interface LinkOwnProps {
      *
      * @default undefined
      */
-    leftIcon?: LucideIcon;
+    leftIcon?: IconSource;
     /**
      * The icon to display after the link text.
      *
      * @default undefined
      */
-    rightIcon?: LucideIcon;
+    rightIcon?: IconSource;
     /**
      * The size of the link.
      *