iryx-ui 0.18.2 → 0.18.3

package/dist/components/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { selectTheme as n } from "../theme/select.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
-import { ArrowDown01Icon as x, Tick02Icon as S } from "@hugeicons/core-free-icons";
-import { SelectContent as C, SelectGroup as w, SelectIcon as T, SelectItem as E, SelectItemIndicator as D, SelectItemText as O, SelectLabel as k, SelectPortal as A, SelectRoot as j, SelectTrigger as M, SelectValue as N, SelectViewport as P, useForwardPropsEmits as F } from "reka-ui";
+import { useFormField as n } from "../composables/form.js";
+import { selectTheme as r } from "../theme/select.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
+import { ArrowDown01Icon as S, Tick02Icon as C } from "@hugeicons/core-free-icons";
+import { SelectContent as w, SelectGroup as T, SelectIcon as E, SelectItem as D, SelectItemIndicator as O, SelectItemText as k, SelectLabel as A, SelectPortal as ee, SelectRoot as te, SelectTrigger as j, SelectValue as M, SelectViewport as N, useForwardPropsEmits as P } from "reka-ui";
 //#region src/components/Select.vue?vue&type=script&setup=true&lang.ts
-var I = /*@__PURE__*/ u({
+var F = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Select",
 	props: {
@@ -13,6 +14,10 @@ var I = /*@__PURE__*/ u({
 		placeholder: {},
 		size: {},
 		id: {},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -38,67 +43,81 @@ var I = /*@__PURE__*/ u({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue", "update:open"],
-	setup(u, { emit: I }) {
-		let L = u, R = I, z = F(i(() => {
-			let { items: e, placeholder: t, size: n, id: r, unstyled: i, class: a, ui: o, ...s } = L;
-			return s;
-		}), R);
-		function B(e) {
+	setup(d, { emit: F }) {
+		let I = d, L = F, R = P(a(() => {
+			let { items: e, placeholder: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = I;
+			return c;
+		}), L);
+		function z(e) {
 			return typeof e == "string" ? {
 				label: e,
 				value: e
 			} : e;
 		}
-		function V(e) {
+		function B(e) {
 			return typeof e != "string" && "items" in e;
 		}
-		let H = i(() => {
-			let e = L.items ?? [];
-			if (e.some(V)) return e.map((e) => V(e) ? {
+		let V = a(() => {
+			let e = I.items ?? [];
+			if (e.some(B)) return e.map((e) => B(e) ? {
 				label: e.label,
-				options: e.items.map(B)
+				options: e.items.map(z)
 			} : {
 				label: "",
-				options: [B(e)]
+				options: [z(e)]
 			});
-		}), U = i(() => (L.items ?? []).flatMap((e) => V(e) ? e.items.map(B) : [B(e)])), W = e(), G = i(() => L.unstyled ?? W.unstyled), K = i(() => n({ size: L.size })), q = i(() => G.value ? [L.ui?.trigger, L.class] : K.value.trigger({ class: [L.ui?.trigger, L.class] })), J = i(() => G.value ? L.ui?.content : K.value.content({ class: L.ui?.content })), Y = i(() => G.value ? L.ui?.viewport : K.value.viewport({ class: L.ui?.viewport })), X = i(() => G.value ? L.ui?.item : K.value.item({ class: L.ui?.item })), Z = i(() => G.value ? void 0 : K.value.itemIndicator()), Q = i(() => G.value ? L.ui?.group : K.value.group({ class: L.ui?.group })), $ = i(() => G.value ? L.ui?.groupLabel : K.value.groupLabel({ class: L.ui?.groupLabel }));
-		return (e, n) => (h(), a(y(j), m(d(y(z))), {
-			default: b(() => [l(y(M), f({ id: L.id }, e.$attrs, { class: q.value }), {
-				default: b(() => [l(y(N), {
+		}), H = a(() => (I.items ?? []).flatMap((e) => B(e) ? e.items.map(z) : [z(e)])), U = n(), W = a(() => I.id ?? U?.id.value);
+		U && I.id && (U.id.value = I.id);
+		let G = a(() => I.invalid ?? U?.invalid.value ?? !1), K = e(), q = a(() => I.unstyled ?? K.unstyled), J = a(() => r({
+			size: I.size,
+			invalid: G.value
+		})), Y = a(() => q.value ? [I.ui?.trigger, I.class] : J.value.trigger({ class: [I.ui?.trigger, I.class] })), X = a(() => q.value ? I.ui?.content : J.value.content({ class: I.ui?.content })), Z = a(() => q.value ? I.ui?.viewport : J.value.viewport({ class: I.ui?.viewport })), Q = a(() => q.value ? I.ui?.item : J.value.item({ class: I.ui?.item })), $ = a(() => q.value ? void 0 : J.value.itemIndicator()), ne = a(() => q.value ? I.ui?.group : J.value.group({ class: I.ui?.group })), re = a(() => q.value ? I.ui?.groupLabel : J.value.groupLabel({ class: I.ui?.groupLabel }));
+		return (e, n) => (g(), o(b(te), h(f(b(R))), {
+			default: x(() => [u(b(j), p({
+				id: W.value,
+				"aria-invalid": G.value || void 0,
+				"aria-describedby": b(U)?.describedBy.value
+			}, e.$attrs, { class: Y.value }), {
+				default: x(() => [u(b(M), {
 					class: "truncate",
-					placeholder: L.placeholder
-				}, null, 8, ["placeholder"]), l(y(T), { "as-child": "" }, {
-					default: b(() => [l(t, { icon: y(x) }, null, 8, ["icon"])]),
+					placeholder: I.placeholder
+				}, null, 8, ["placeholder"]), u(b(E), { "as-child": "" }, {
+					default: x(() => [u(t, { icon: b(S) }, null, 8, ["icon"])]),
 					_: 1
 				})]),
 				_: 1
-			}, 16, ["id", "class"]), l(y(A), null, {
-				default: b(() => [l(y(C), {
-					class: p(J.value),
+			}, 16, [
+				"id",
+				"aria-invalid",
+				"aria-describedby",
+				"class"
+			]), u(b(ee), null, {
+				default: x(() => [u(b(w), {
+					class: m(X.value),
 					position: "item-aligned"
 				}, {
-					default: b(() => [l(y(P), { class: p(Y.value) }, {
-						default: b(() => [_(e.$slots, "default", {}, () => [H.value ? (h(!0), s(r, { key: 0 }, g(H.value, (e, n) => (h(), a(y(w), {
+					default: x(() => [u(b(N), { class: m(Z.value) }, {
+						default: x(() => [v(e.$slots, "default", {}, () => [V.value ? (g(!0), c(i, { key: 0 }, _(V.value, (e, n) => (g(), o(b(T), {
 							key: e.label || n,
-							class: p(Q.value)
+							class: m(ne.value)
 						}, {
-							default: b(() => [e.label ? (h(), a(y(k), {
+							default: x(() => [e.label ? (g(), o(b(A), {
 								key: 0,
-								class: p($.value)
+								class: m(re.value)
 							}, {
-								default: b(() => [c(v(e.label), 1)]),
+								default: x(() => [l(y(e.label), 1)]),
 								_: 2
-							}, 1032, ["class"])) : o("", !0), (h(!0), s(r, null, g(e.options, (e) => (h(), a(y(E), {
+							}, 1032, ["class"])) : s("", !0), (g(!0), c(i, null, _(e.options, (e) => (g(), o(b(D), {
 								key: e.value,
 								value: e.value,
 								disabled: e.disabled,
-								class: p(X.value)
+								class: m(Q.value)
 							}, {
-								default: b(() => [l(y(D), { class: p(Z.value) }, {
-									default: b(() => [l(t, { icon: y(S) }, null, 8, ["icon"])]),
+								default: x(() => [u(b(O), { class: m($.value) }, {
+									default: x(() => [u(t, { icon: b(C) }, null, 8, ["icon"])]),
 									_: 1
-								}, 8, ["class"]), l(y(O), null, {
-									default: b(() => [c(v(e.label), 1)]),
+								}, 8, ["class"]), u(b(k), null, {
+									default: x(() => [l(y(e.label), 1)]),
 									_: 2
 								}, 1024)]),
 								_: 2
@@ -108,17 +127,17 @@ var I = /*@__PURE__*/ u({
 								"class"
 							]))), 128))]),
 							_: 2
-						}, 1032, ["class"]))), 128)) : (h(!0), s(r, { key: 1 }, g(U.value, (e) => (h(), a(y(E), {
+						}, 1032, ["class"]))), 128)) : (g(!0), c(i, { key: 1 }, _(H.value, (e) => (g(), o(b(D), {
 							key: e.value,
 							value: e.value,
 							disabled: e.disabled,
-							class: p(X.value)
+							class: m(Q.value)
 						}, {
-							default: b(() => [l(y(D), { class: p(Z.value) }, {
-								default: b(() => [l(t, { icon: y(S) }, null, 8, ["icon"])]),
+							default: x(() => [u(b(O), { class: m($.value) }, {
+								default: x(() => [u(t, { icon: b(C) }, null, 8, ["icon"])]),
 								_: 1
-							}, 8, ["class"]), l(y(O), null, {
-								default: b(() => [c(v(e.label), 1)]),
+							}, 8, ["class"]), u(b(k), null, {
+								default: x(() => [l(y(e.label), 1)]),
 								_: 2
 							}, 1024)]),
 							_: 2
@@ -138,4 +157,4 @@ var I = /*@__PURE__*/ u({
 	}
 });
 //#endregion
-export { I as default };
+export { F as default };

package/dist/components/Slider.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { sliderTheme as t } from "../theme/slider.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderList as m, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
-import { SliderRange as y, SliderRoot as b, SliderThumb as x, SliderTrack as S, useId as C } from "reka-ui";
+import { useFormField as t } from "../composables/form.js";
+import { sliderTheme as n } from "../theme/slider.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+import { SliderRange as b, SliderRoot as x, SliderThumb as S, SliderTrack as C, useId as w } from "reka-ui";
 //#region src/components/Slider.vue?vue&type=script&setup=true&lang.ts
-var w = ["id"], T = /*@__PURE__*/ u({
+var T = ["id"], E = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Slider",
 	props: {
@@ -35,62 +36,65 @@ var w = ["id"], T = /*@__PURE__*/ u({
 		ui: {}
 	},
 	emits: ["update:modelValue", "valueCommit"],
-	setup(u, { emit: T }) {
-		let E = u, D = T, O = r(() => typeof E.modelValue == "number"), k = r(() => Array.isArray(E.modelValue) ? E.modelValue : typeof E.modelValue == "number" ? [E.modelValue] : [E.min]);
-		function A(e) {
-			return O.value ? e[0] ?? E.min : e;
+	setup(d, { emit: E }) {
+		let D = d, O = E, k = i(() => typeof D.modelValue == "number"), A = i(() => Array.isArray(D.modelValue) ? D.modelValue : typeof D.modelValue == "number" ? [D.modelValue] : [D.min]);
+		function j(e) {
+			return k.value ? e[0] ?? D.min : e;
 		}
-		let j = r(() => E.formatValue ?? ((e) => String(e))), M = r(() => k.value.map((e) => j.value(e)).join(" – "));
-		function N(e, t) {
-			return E.label ? k.value.length > 1 ? `${E.label} ${E.rangeLabels[e] ?? ""}`.trim() : E.label : k.value.length > 1 ? E.rangeLabels[e] ?? void 0 : j.value(t);
+		let M = i(() => D.formatValue ?? ((e) => String(e))), N = i(() => A.value.map((e) => M.value(e)).join(" – "));
+		function P(e, t) {
+			return D.label ? A.value.length > 1 ? `${D.label} ${D.rangeLabels[e] ?? ""}`.trim() : D.label : A.value.length > 1 ? D.rangeLabels[e] ?? void 0 : M.value(t);
 		}
-		let P = C(), F = r(() => `${E.id ?? P}-label`), I = r(() => !!(E.label || E.showValue)), L = e(), R = r(() => E.unstyled ?? L.unstyled), z = r(() => t({
-			orientation: E.orientation,
-			size: E.size,
-			disabled: E.disabled ?? !1
+		let F = w(), I = t();
+		I && (I.id.value = void 0);
+		let L = i(() => `${D.id ?? F}-label`), R = i(() => !!(D.label || D.showValue)), z = e(), B = i(() => D.unstyled ?? z.unstyled), V = i(() => n({
+			orientation: D.orientation,
+			size: D.size,
+			disabled: D.disabled ?? !1
 		}));
-		function B(e, t) {
-			let n = [E.ui?.[e], t];
-			return R.value ? n : z.value[e]({ class: n });
+		function H(e, t) {
+			let n = [D.ui?.[e], t];
+			return B.value ? n : V.value[e]({ class: n });
 		}
-		return (e, t) => (p(), o("div", { class: f(B("root", E.class)) }, [
-			I.value ? (p(), o("div", {
+		return (e, t) => (m(), s("div", { class: p(H("root", D.class)) }, [
+			R.value ? (m(), s("div", {
 				key: 0,
-				class: f(B("header"))
-			}, [E.label || e.$slots.label ? (p(), o("span", {
+				class: p(H("header"))
+			}, [D.label || e.$slots.label ? (m(), s("span", {
 				key: 0,
-				id: F.value,
-				class: f(B("label"))
-			}, [h(e.$slots, "label", {}, () => [c(g(E.label), 1)])], 10, w)) : a("", !0), E.showValue ? (p(), o("span", {
+				id: L.value,
+				class: p(H("label"))
+			}, [g(e.$slots, "label", {}, () => [l(_(D.label), 1)])], 10, T)) : o("", !0), D.showValue ? (m(), s("span", {
 				key: 1,
-				class: f(B("value"))
-			}, [h(e.$slots, "value", {
-				values: k.value,
-				text: M.value
-			}, () => [c(g(M.value), 1)])], 2)) : a("", !0)], 2)) : a("", !0),
-			l(_(b), d({
-				"model-value": k.value,
-				min: E.min,
-				max: E.max,
-				step: E.step,
-				disabled: E.disabled,
-				orientation: E.orientation,
-				inverted: E.inverted,
-				"min-steps-between-thumbs": E.minStepsBetweenThumbs,
-				"aria-labelledby": E.label ? F.value : void 0
+				class: p(H("value"))
+			}, [g(e.$slots, "value", {
+				values: A.value,
+				text: N.value
+			}, () => [l(_(N.value), 1)])], 2)) : o("", !0)], 2)) : o("", !0),
+			u(v(x), f({
+				"model-value": A.value,
+				min: D.min,
+				max: D.max,
+				step: D.step,
+				disabled: D.disabled,
+				orientation: D.orientation,
+				inverted: D.inverted,
+				"min-steps-between-thumbs": D.minStepsBetweenThumbs,
+				"aria-labelledby": D.label ? L.value : v(I)?.labelId.value,
+				"aria-describedby": v(I)?.describedBy.value
 			}, e.$attrs, {
-				class: B("slider"),
-				"onUpdate:modelValue": t[0] ||= (e) => e && D("update:modelValue", A(e)),
-				onValueCommit: t[1] ||= (e) => D("valueCommit", A(e))
+				class: H("slider"),
+				"onUpdate:modelValue": t[0] ||= (e) => e && O("update:modelValue", j(e)),
+				onValueCommit: t[1] ||= (e) => O("valueCommit", j(e))
 			}), {
-				default: v(() => [l(_(S), { class: f(B("track")) }, {
-					default: v(() => [l(_(y), { class: f(B("range")) }, null, 8, ["class"])]),
+				default: y(() => [u(v(C), { class: p(H("track")) }, {
+					default: y(() => [u(v(b), { class: p(H("range")) }, null, 8, ["class"])]),
 					_: 1
-				}, 8, ["class"]), (p(!0), o(n, null, m(k.value, (e, t) => (p(), i(_(x), {
+				}, 8, ["class"]), (m(!0), s(r, null, h(A.value, (e, t) => (m(), a(v(S), {
 					key: t,
-					"aria-label": N(t, e),
-					"aria-valuetext": j.value(e),
-					class: f(B("thumb"))
+					"aria-label": P(t, e),
+					"aria-valuetext": M.value(e),
+					class: p(H("thumb"))
 				}, null, 8, [
 					"aria-label",
 					"aria-valuetext",
@@ -107,14 +111,15 @@ var w = ["id"], T = /*@__PURE__*/ u({
 				"inverted",
 				"min-steps-between-thumbs",
 				"aria-labelledby",
+				"aria-describedby",
 				"class"
 			]),
-			E.showScale && E.orientation !== "vertical" ? (p(), o("div", {
+			D.showScale && D.orientation !== "vertical" ? (m(), s("div", {
 				key: 1,
-				class: f(B("scale"))
-			}, [s("span", null, g(j.value(E.min)), 1), s("span", null, g(j.value(E.max)), 1)], 2)) : a("", !0)
+				class: p(H("scale"))
+			}, [c("span", null, _(M.value(D.min)), 1), c("span", null, _(M.value(D.max)), 1)], 2)) : o("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/components/Switch.vue.d.ts

@@ -7,6 +7,8 @@ export interface SwitchProps extends SwitchRootProps {
     description?: string;
     size?: 'sm' | 'md' | 'lg';
     id?: string;
+    /** Mark as failing validation. Taken from the enclosing `IFormField` when omitted. */
+    invalid?: boolean;
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: ClassValue;
@@ -32,6 +34,7 @@ declare const __VLS_base: import("vue").DefineComponent<SwitchProps, {}, {}, {},
     "onUpdate:modelValue"?: ((payload: boolean) => any) | undefined;
 }>, {
     unstyled: boolean;
+    invalid: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/Switch.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { switchTheme as t } from "../theme/switch.js";
-import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, openBlock as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
-import { Label as _, SwitchRoot as v, SwitchThumb as y, useForwardPropsEmits as b, useId as x } from "reka-ui";
+import { useFormField as t } from "../composables/form.js";
+import { switchTheme as n } from "../theme/switch.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+import { Label as v, SwitchRoot as y, SwitchThumb as b, useForwardPropsEmits as x, useId as S } from "reka-ui";
 //#region src/components/Switch.vue?vue&type=script&setup=true&lang.ts
-var S = ["id"], C = /*@__PURE__*/ l({
+var C = ["id"], w = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "Switch",
 	props: {
@@ -11,6 +12,10 @@ var S = ["id"], C = /*@__PURE__*/ l({
 		description: {},
 		size: {},
 		id: {},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
 		unstyled: {
 			type: Boolean,
 			default: void 0
@@ -34,51 +39,63 @@ var S = ["id"], C = /*@__PURE__*/ l({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(l, { emit: C }) {
-		let w = l, T = C, E = b(n(() => {
-			let { label: e, description: t, size: n, id: r, unstyled: i, class: a, ui: o, ...s } = w;
-			return s;
-		}), T), D = x(), O = n(() => w.id ?? D), k = n(() => !!(w.label || w.description)), A = e(), j = n(() => w.unstyled ?? A.unstyled), M = n(() => t({
-			size: w.size,
-			withText: k.value
-		})), N = n(() => j.value ? w.ui?.wrapper : M.value.wrapper({ class: w.ui?.wrapper })), P = n(() => j.value ? [w.ui?.root, w.class] : M.value.root({ class: [w.ui?.root, w.class] })), F = n(() => j.value ? w.ui?.thumb : M.value.thumb({ class: w.ui?.thumb })), I = n(() => j.value ? w.ui?.content : M.value.content({ class: w.ui?.content })), L = n(() => j.value ? w.ui?.label : M.value.label({ class: w.ui?.label })), R = n(() => j.value ? w.ui?.description : M.value.description({ class: w.ui?.description }));
-		return (e, t) => k.value ? (f(), a("div", {
+	setup(u, { emit: w }) {
+		let T = u, E = w, D = x(r(() => {
+			let { label: e, description: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = T;
+			return c;
+		}), E), O = S(), k = t(), A = r(() => T.invalid ?? k?.invalid.value ?? !1), j = r(() => T.id ?? k?.id.value ?? O);
+		k && (k.id.value = j.value);
+		let M = r(() => !!(T.label || T.description)), N = e(), P = r(() => T.unstyled ?? N.unstyled), F = r(() => n({
+			size: T.size,
+			withText: M.value,
+			invalid: A.value
+		})), I = r(() => P.value ? T.ui?.wrapper : F.value.wrapper({ class: T.ui?.wrapper })), L = r(() => P.value ? [T.ui?.root, T.class] : F.value.root({ class: [T.ui?.root, T.class] })), R = r(() => P.value ? T.ui?.thumb : F.value.thumb({ class: T.ui?.thumb })), z = r(() => P.value ? T.ui?.content : F.value.content({ class: T.ui?.content })), B = r(() => P.value ? T.ui?.label : F.value.label({ class: T.ui?.label })), V = r(() => P.value ? T.ui?.description : F.value.description({ class: T.ui?.description }));
+		return (e, t) => M.value ? (p(), o("div", {
 			key: 0,
-			class: d(N.value)
-		}, [c(h(v), u({ id: O.value }, {
-			...h(E),
+			class: f(I.value)
+		}, [l(g(y), d({ id: j.value }, {
+			...g(D),
 			...e.$attrs
 		}, {
-			"aria-describedby": w.description ? `${O.value}-description` : void 0,
-			class: P.value
+			"aria-invalid": A.value || void 0,
+			"aria-describedby": T.description ? `${j.value}-description` : void 0,
+			class: L.value
 		}), {
-			default: g(() => [c(h(y), { class: d(F.value) }, null, 8, ["class"])]),
+			default: _(() => [l(g(b), { class: f(R.value) }, null, 8, ["class"])]),
 			_: 1
 		}, 16, [
 			"id",
+			"aria-invalid",
 			"aria-describedby",
 			"class"
-		]), o("div", { class: d(I.value) }, [c(h(_), {
-			for: O.value,
-			class: d(L.value)
+		]), s("div", { class: f(z.value) }, [l(g(v), {
+			for: j.value,
+			class: f(B.value)
 		}, {
-			default: g(() => [p(e.$slots, "label", {}, () => [s(m(w.label), 1)])]),
+			default: _(() => [m(e.$slots, "label", {}, () => [c(h(T.label), 1)])]),
 			_: 3
-		}, 8, ["for", "class"]), w.description || e.$slots.description ? (f(), a("p", {
+		}, 8, ["for", "class"]), T.description || e.$slots.description ? (p(), o("p", {
 			key: 0,
-			id: `${O.value}-description`,
-			class: d(R.value)
-		}, [p(e.$slots, "description", {}, () => [s(m(w.description), 1)])], 10, S)) : i("", !0)], 2)], 2)) : (f(), r(h(v), u({
+			id: `${j.value}-description`,
+			class: f(V.value)
+		}, [m(e.$slots, "description", {}, () => [c(h(T.description), 1)])], 10, C)) : a("", !0)], 2)], 2)) : (p(), i(g(y), d({
 			key: 1,
-			id: w.id
+			id: j.value
 		}, {
-			...h(E),
+			...g(D),
 			...e.$attrs
-		}, { class: P.value }), {
-			default: g(() => [c(h(y), { class: d(F.value) }, null, 8, ["class"])]),
+		}, {
+			"aria-invalid": A.value || void 0,
+			class: L.value
+		}), {
+			default: _(() => [l(g(b), { class: f(R.value) }, null, 8, ["class"])]),
 			_: 1
-		}, 16, ["id", "class"]));
+		}, 16, [
+			"id",
+			"aria-invalid",
+			"class"
+		]));
 	}
 });
 //#endregion
-export { C as default };
+export { w as default };

package/dist/components/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { textareaTheme as t } from "../theme/input.js";
-import { useFormField as n } from "../composables/form.js";
+import { useFormField as t } from "../composables/form.js";
+import { textareaTheme as n } from "../theme/input.js";
 import { computed as r, createElementBlock as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeClass as c, onMounted as l, openBlock as u, ref as d, unref as f, useModel as p, vModelText as m, watch as h, withDirectives as g } from "vue";
 //#region src/components/Textarea.vue?vue&type=script&setup=true&lang.ts
 var _ = [
@@ -41,7 +41,7 @@ var _ = [
 	}),
 	emits: ["update:modelValue"],
 	setup(a, { expose: o }) {
-		let v = a, y = p(a, "modelValue"), b = n(), x = r(() => v.id ?? b?.id.value), S = r(() => v.invalid ?? b?.invalid.value ?? !1), C = e(), w = r(() => v.unstyled ?? C.unstyled), T = r(() => w.value ? v.class : t({
+		let v = a, y = p(a, "modelValue"), b = t(), x = r(() => v.id ?? b?.id.value), S = r(() => v.invalid ?? b?.invalid.value ?? !1), C = e(), w = r(() => v.unstyled ?? C.unstyled), T = r(() => w.value ? v.class : n({
 			size: v.size,
 			invalid: S.value,
 			autosize: !!v.autosize,

package/dist/composables/form.d.ts

@@ -52,7 +52,14 @@ export interface FormContext {
 export declare const formContextKey: InjectionKey<FormContext>;
 /** Context a `FormField` exposes to the control it wraps. */
 export interface FormFieldContext {
-    id: ComputedRef<string>;
+    /**
+     * The id the field's `<label for>` points at. Writable: a control with its
+     * own `id` writes that back, and one a label cannot target — a radio group,
+     * a slider — clears it so the field renders no dangling `for`.
+     */
+    id: Ref<string | undefined>;
+    /** Id of the field's own `<label>`, for controls a `for` cannot target. */
+    labelId: ComputedRef<string | undefined>;
     name: ComputedRef<string | undefined>;
     invalid: ComputedRef<boolean>;
     describedBy: ComputedRef<string | undefined>;

package/dist/index.js

@@ -43,14 +43,14 @@ import { calendarTheme as _e } from "./theme/calendar.js";
 import ve from "./components/Calendar.js";
 import { cardTheme as ye } from "./theme/card.js";
 import be from "./components/Card.js";
-import { checkboxTheme as xe } from "./theme/checkbox.js";
-import Se from "./components/Checkbox.js";
-import { collapsibleTheme as Ce } from "./theme/collapsible.js";
-import we from "./components/Collapsible.js";
-import { fieldBase as Te, inputTheme as Ee, textareaTheme as De } from "./theme/input.js";
-import { colorPickerTheme as Oe } from "./theme/color-picker.js";
-import ke from "./components/ColorPicker.js";
-import { formContextKey as Ae, formFieldContextKey as je, getByPath as Me, isStandardSchema as Ne, issuePath as Pe, useForm as Fe, useFormField as Ie } from "./composables/form.js";
+import { formContextKey as xe, formFieldContextKey as Se, getByPath as Ce, isStandardSchema as we, issuePath as Te, useForm as Ee, useFormField as De } from "./composables/form.js";
+import { checkboxTheme as Oe } from "./theme/checkbox.js";
+import ke from "./components/Checkbox.js";
+import { collapsibleTheme as Ae } from "./theme/collapsible.js";
+import je from "./components/Collapsible.js";
+import { fieldBase as Me, inputTheme as Ne, textareaTheme as Pe } from "./theme/input.js";
+import { colorPickerTheme as Fe } from "./theme/color-picker.js";
+import Ie from "./components/ColorPicker.js";
 import { comboboxTheme as Le } from "./theme/combobox.js";
 import Re from "./components/Combobox.js";
 import { isApplePlatform as ze, parseHotkey as Be, useApplePlatform as Ve } from "./composables/kbd.js";
@@ -167,4 +167,4 @@ import pr from "./components/Tooltip.js";
 import { treeTheme as mr } from "./theme/tree.js";
 import hr from "./components/Tree.js";
 import { IryxUi as gr, createIryxUi as _r } from "./plugin.js";
-export { B as AXIS_GAP, s as Accordion, l as Alert, h as App, b as AppShell, x as AspectRatio, D as AuthProviders, A as Avatar, j as AvatarGroup, N as Badge, F as Banner, ie as BarChart, oe as Breadcrumb, E as Button, ce as ButtonGroup, V as CATEGORY_HEIGHT, H as CHAR_WIDTH, ve as Calendar, le as CalendarDate, be as Card, re as ChartLegend, Se as Checkbox, we as Collapsible, ke as ColorPicker, Re as Combobox, Ye as CommandPalette, tt as ConfirmDialog, rt as Container, st as ContextMenu, lt as DateField, dt as DatePicker, ft as DateRangePicker, et as Dialog, mt as DonutChart, y as Drawer, ht as DropdownMenu, _t as Editable, yt as EmptyState, xt as FileUpload, St as Form, Tt as FormField, Dt as HoverCard, o as Icon, Ot as Input, gr as IryxUi, Je as Kbd, wt as Label, At as LineChart, Mt as Menubar, Ft as NavigationMenu, Jt as NumberInput, Xt as PageHeader, Qt as Pagination, en as PasswordInput, nn as PinInput, an as Popover, sn as Progress, Z as REVEAL_DURATION, ln as RadioGroup, U as SERIES_SLOTS, dn as ScrollArea, hn as ScrollFade, _n as Select, yn as Separator, wn as Sidebar, On as SignaturePad, An as Skeleton, Mn as Slider, Pn as Sparkline, In as Splitter, Rn as Stat, Bn as Stepper, Hn as Switch, W as TOP_PAD, Kn as Table, Jn as Tabs, Xn as TagsInput, Zn as Textarea, ue as Time, $n as TimeField, tr as Timeline, ar as Toaster, cr as Toggle, lr as ToggleGroup, dr as Toolbar, pr as Tooltip, hr as Tree, i as accordionTheme, It as addDecimals, c as alertTheme, _ as appShellTheme, f as applyTheme, S as authProvidersTheme, O as avatarGroupTheme, k as avatarTheme, M as badgeTheme, P as bannerTheme, te as barChartTheme, ae as breadcrumbTheme, C as buttonGroupContextKey, se as buttonGroupTheme, T as buttonTheme, _e as calendarTheme, ye as cardTheme, G as cartesianLayout, ne as chartLegendTheme, xe as checkboxTheme, Lt as clampDecimal, K as clampTooltip, p as clearTheme, Ce as collapsibleTheme, Oe as colorPickerTheme, Le as comboboxTheme, He as commandHaystack, Ke as commandPaletteTheme, Rt as compareDecimals, e as componentNames, nt as containerTheme, _r as createIryxUi, ct as dateFieldTheme, ut as datePickerTheme, t as defaultConfig, $e as dialogTheme, pt as donutChartTheme, v as drawerTheme, it as dropdownMenuTheme, gt as editableTheme, vt as emptyStateTheme, I as extent, Te as fieldBase, bt as fileUploadTheme, L as finiteValues, Ae as formContextKey, je as formFieldContextKey, zt as formatDecimal, Bt as formatForLocale, de as formatIsoDate, Me as getByPath, Un as getRowValue, Tn as hasInk, Et as hoverCardTheme, u as initAppearance, Ee as inputTheme, n as iryxUiConfigKey, ze as isApplePlatform, Ue as isCommandGroup, Vt as isDecimal, a as isIconArray, Nt as isNavigationGroup, at as isSeparator, bn as isSidebarGroup, xn as isSidebarSection, Ne as isStandardSchema, ot as isSubmenu, fe as isoToday, Pe as issuePath, qe as kbdTheme, Ct as labelTheme, kt as lineChartTheme, R as linearScale, Ht as localeSeparators, We as matchesHotkey, jt as menubarTheme, Pt as navigationMenuTheme, z as niceTicks, qt as numberInputTheme, Yt as pageHeaderTheme, Zt as paginationTheme, Ut as parseDecimal, Wt as parseFromLocale, Be as parseHotkey, $t as passwordInputTheme, tn as pinInputTheme, rn as popoverTheme, on as progressTheme, cn as radioGroupTheme, Xe as resolveConfirm, Gt as roundDecimal, un as scrollAreaTheme, fn as scrollFadeMask, mn as scrollFadeTheme, gn as selectTheme, vn as separatorTheme, q as seriesColor, Cn as sidebarTheme, Dn as signaturePadTheme, kn as skeletonTheme, jn as sliderTheme, J as slotOf, Nn as sparklineTheme, Fn as splitterTheme, Ln as statTheme, zn as stepperTheme, En as strokeWidth, Vn as switchTheme, Gn as tableTheme, qn as tabsTheme, Yn as tagsInputTheme, De as textareaTheme, m as themes, Qn as timeFieldTheme, er as timelineTheme, pe as toCalendarDate, Ge as toCommandGroups, Kt as toEditable, me as toIsoDate, he as toIsoTime, Sn as toSidebarSections, ge as toTime, ir as toastTheme, or as toggleGroupTheme, sr as toggleTheme, ur as toolbarTheme, Y as tooltipHalfWidth, fr as tooltipTheme, mr as treeTheme, d as useAppearance, Ve as useApplePlatform, w as useButtonGroup, Q as useChartAnimation, $ as useChartProgress, ee as useChartReveal, Ze as useConfirm, Qe as useConfirmState, Wn as useDataTable, g as useElementSize, Fe as useForm, Ie as useFormField, r as useIryxUiConfig, pn as useScrollEdges, nr as useToast, rr as useToastState, X as warnOnSlotOverflow };
+export { B as AXIS_GAP, s as Accordion, l as Alert, h as App, b as AppShell, x as AspectRatio, D as AuthProviders, A as Avatar, j as AvatarGroup, N as Badge, F as Banner, ie as BarChart, oe as Breadcrumb, E as Button, ce as ButtonGroup, V as CATEGORY_HEIGHT, H as CHAR_WIDTH, ve as Calendar, le as CalendarDate, be as Card, re as ChartLegend, ke as Checkbox, je as Collapsible, Ie as ColorPicker, Re as Combobox, Ye as CommandPalette, tt as ConfirmDialog, rt as Container, st as ContextMenu, lt as DateField, dt as DatePicker, ft as DateRangePicker, et as Dialog, mt as DonutChart, y as Drawer, ht as DropdownMenu, _t as Editable, yt as EmptyState, xt as FileUpload, St as Form, Tt as FormField, Dt as HoverCard, o as Icon, Ot as Input, gr as IryxUi, Je as Kbd, wt as Label, At as LineChart, Mt as Menubar, Ft as NavigationMenu, Jt as NumberInput, Xt as PageHeader, Qt as Pagination, en as PasswordInput, nn as PinInput, an as Popover, sn as Progress, Z as REVEAL_DURATION, ln as RadioGroup, U as SERIES_SLOTS, dn as ScrollArea, hn as ScrollFade, _n as Select, yn as Separator, wn as Sidebar, On as SignaturePad, An as Skeleton, Mn as Slider, Pn as Sparkline, In as Splitter, Rn as Stat, Bn as Stepper, Hn as Switch, W as TOP_PAD, Kn as Table, Jn as Tabs, Xn as TagsInput, Zn as Textarea, ue as Time, $n as TimeField, tr as Timeline, ar as Toaster, cr as Toggle, lr as ToggleGroup, dr as Toolbar, pr as Tooltip, hr as Tree, i as accordionTheme, It as addDecimals, c as alertTheme, _ as appShellTheme, f as applyTheme, S as authProvidersTheme, O as avatarGroupTheme, k as avatarTheme, M as badgeTheme, P as bannerTheme, te as barChartTheme, ae as breadcrumbTheme, C as buttonGroupContextKey, se as buttonGroupTheme, T as buttonTheme, _e as calendarTheme, ye as cardTheme, G as cartesianLayout, ne as chartLegendTheme, Oe as checkboxTheme, Lt as clampDecimal, K as clampTooltip, p as clearTheme, Ae as collapsibleTheme, Fe as colorPickerTheme, Le as comboboxTheme, He as commandHaystack, Ke as commandPaletteTheme, Rt as compareDecimals, e as componentNames, nt as containerTheme, _r as createIryxUi, ct as dateFieldTheme, ut as datePickerTheme, t as defaultConfig, $e as dialogTheme, pt as donutChartTheme, v as drawerTheme, it as dropdownMenuTheme, gt as editableTheme, vt as emptyStateTheme, I as extent, Me as fieldBase, bt as fileUploadTheme, L as finiteValues, xe as formContextKey, Se as formFieldContextKey, zt as formatDecimal, Bt as formatForLocale, de as formatIsoDate, Ce as getByPath, Un as getRowValue, Tn as hasInk, Et as hoverCardTheme, u as initAppearance, Ne as inputTheme, n as iryxUiConfigKey, ze as isApplePlatform, Ue as isCommandGroup, Vt as isDecimal, a as isIconArray, Nt as isNavigationGroup, at as isSeparator, bn as isSidebarGroup, xn as isSidebarSection, we as isStandardSchema, ot as isSubmenu, fe as isoToday, Te as issuePath, qe as kbdTheme, Ct as labelTheme, kt as lineChartTheme, R as linearScale, Ht as localeSeparators, We as matchesHotkey, jt as menubarTheme, Pt as navigationMenuTheme, z as niceTicks, qt as numberInputTheme, Yt as pageHeaderTheme, Zt as paginationTheme, Ut as parseDecimal, Wt as parseFromLocale, Be as parseHotkey, $t as passwordInputTheme, tn as pinInputTheme, rn as popoverTheme, on as progressTheme, cn as radioGroupTheme, Xe as resolveConfirm, Gt as roundDecimal, un as scrollAreaTheme, fn as scrollFadeMask, mn as scrollFadeTheme, gn as selectTheme, vn as separatorTheme, q as seriesColor, Cn as sidebarTheme, Dn as signaturePadTheme, kn as skeletonTheme, jn as sliderTheme, J as slotOf, Nn as sparklineTheme, Fn as splitterTheme, Ln as statTheme, zn as stepperTheme, En as strokeWidth, Vn as switchTheme, Gn as tableTheme, qn as tabsTheme, Yn as tagsInputTheme, Pe as textareaTheme, m as themes, Qn as timeFieldTheme, er as timelineTheme, pe as toCalendarDate, Ge as toCommandGroups, Kt as toEditable, me as toIsoDate, he as toIsoTime, Sn as toSidebarSections, ge as toTime, ir as toastTheme, or as toggleGroupTheme, sr as toggleTheme, ur as toolbarTheme, Y as tooltipHalfWidth, fr as tooltipTheme, mr as treeTheme, d as useAppearance, Ve as useApplePlatform, w as useButtonGroup, Q as useChartAnimation, $ as useChartProgress, ee as useChartReveal, Ze as useConfirm, Qe as useConfirmState, Wn as useDataTable, g as useElementSize, Ee as useForm, De as useFormField, r as useIryxUiConfig, pn as useScrollEdges, nr as useToast, rr as useToastState, X as warnOnSlotOverflow };

package/dist/theme/checkbox.d.ts

@@ -18,6 +18,11 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     wrapper: string;
     root: string;
@@ -45,6 +50,11 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     wrapper: string;
     root: string;
@@ -72,6 +82,11 @@ export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    invalid: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     wrapper: string;
     root: string;

package/dist/theme/checkbox.js

@@ -24,7 +24,8 @@ var t = e({
 				indicator: "[&_svg]:size-3.5"
 			}
 		},
-		withText: { true: { root: "mt-0.5" } }
+		withText: { true: { root: "mt-0.5" } },
+		invalid: { true: { root: "border-red-500 focus-visible:ring-red-500/40" } }
 	},
 	compoundVariants: [{
 		size: "lg",

package/dist/theme/radio-group.d.ts

@@ -21,6 +21,11 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    invalid: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     root: string;
     wrapper: string;
@@ -52,6 +57,11 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    invalid: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     root: string;
     wrapper: string;
@@ -83,6 +93,11 @@ export declare const radioGroupTheme: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    invalid: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     root: string;
     wrapper: string;