iryx-ui 0.21.0 → 0.22.0

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

@@ -1,10 +1,19 @@
 import type { CheckboxRootProps } from 'reka-ui';
 import type { ClassValue } from '../class-value';
+import type { IconLike } from '../composables/icon';
 export interface CheckboxProps extends CheckboxRootProps {
     /** Text shown beside the box. Also makes the text clickable. */
     label?: string;
     /** Secondary text under the label. */
     description?: string;
+    /**
+     * How the control is drawn. `checkbox` is a box beside its label, `card`
+     * makes the whole bordered surface the control, and `tile` centres an icon
+     * above the label.
+     */
+    variant?: 'checkbox' | 'card' | 'tile';
+    /** Shown above the label by the `tile` variant, ignored by the others. */
+    icon?: IconLike;
     size?: 'sm' | 'md' | 'lg';
     id?: string;
     /** Mark as failing validation. Taken from the enclosing `IFormField` when omitted. */
@@ -16,21 +25,29 @@ export interface CheckboxProps extends CheckboxRootProps {
     ui?: {
         wrapper?: string;
         root?: string;
+        mark?: string;
+        icon?: string;
         indicator?: string;
         content?: string;
         label?: string;
         description?: string;
     };
 }
-declare var __VLS_13: {}, __VLS_31: {}, __VLS_33: {}, __VLS_48: {};
+declare var __VLS_14: {}, __VLS_31: {}, __VLS_33: {}, __VLS_47: {}, __VLS_65: {}, __VLS_67: {}, __VLS_82: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
     label?: (props: typeof __VLS_31) => any;
 } & {
     description?: (props: typeof __VLS_33) => any;
 } & {
-    default?: (props: typeof __VLS_48) => any;
+    default?: (props: typeof __VLS_47) => any;
+} & {
+    label?: (props: typeof __VLS_65) => any;
+} & {
+    description?: (props: typeof __VLS_67) => any;
+} & {
+    default?: (props: typeof __VLS_82) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean | "indeterminate") => any;

package/dist/components/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -2,16 +2,18 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { useFormField as n } from "../composables/form.js";
 import { checkboxTheme as r } from "../theme/checkbox.js";
-import { 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, renderSlot as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
-import { MinusSignIcon as y, Tick02Icon as b } from "@hugeicons/core-free-icons";
-import { CheckboxIndicator as x, CheckboxRoot as S, Label as C, useForwardPropsEmits as w, useId as T } from "reka-ui";
+import { 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, renderSlot as h, toDisplayString as g, unref as _, useSlots as v, withCtx as y } from "vue";
+import { MinusSignIcon as b, Tick02Icon as x } from "@hugeicons/core-free-icons";
+import { CheckboxIndicator as S, CheckboxRoot as C, Label as w, useForwardPropsEmits as T, useId as E } from "reka-ui";
 //#region src/components/Checkbox.vue?vue&type=script&setup=true&lang.ts
-var E = ["id"], D = /*@__PURE__*/ d({
+var D = ["id"], O = ["id"], k = ["id"], A = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Checkbox",
 	props: {
 		label: {},
 		description: {},
+		variant: {},
+		icon: {},
 		size: {},
 		id: {},
 		invalid: {
@@ -41,35 +43,80 @@ var E = ["id"], D = /*@__PURE__*/ d({
 		required: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(d, { emit: D }) {
-		let O = d, k = D, A = w(i(() => {
-			let { label: e, description: t, size: n, id: r, invalid: i, unstyled: a, class: o, ui: s, ...c } = O;
-			return c;
-		}), k), j = T(), M = n(), N = i(() => O.invalid ?? M?.invalid.value ?? !1), P = i(() => O.id ?? M?.id.value ?? j);
-		M && (M.id.value = P.value);
-		let F = i(() => !!(O.label || O.description)), I = e(), L = i(() => O.unstyled ?? I.unstyled), R = i(() => r({
-			size: O.size,
-			withText: F.value,
-			invalid: N.value
-		})), z = i(() => L.value ? O.ui?.wrapper : R.value.wrapper({ class: O.ui?.wrapper })), B = i(() => L.value ? [O.ui?.root, O.class] : R.value.root({ class: [O.ui?.root, O.class] })), V = i(() => L.value ? O.ui?.indicator : R.value.indicator({ class: O.ui?.indicator })), H = i(() => L.value ? O.ui?.content : R.value.content({ class: O.ui?.content })), U = i(() => L.value ? O.ui?.label : R.value.label({ class: O.ui?.label })), W = i(() => L.value ? O.ui?.description : R.value.description({ class: O.ui?.description }));
-		return (e, n) => F.value ? (m(), s("div", {
+	setup(d, { emit: A }) {
+		let j = d, M = A, N = T(i(() => {
+			let { label: e, description: t, variant: n, icon: r, size: i, id: a, invalid: o, unstyled: s, class: c, ui: l, ...u } = j;
+			return u;
+		}), M), P = v(), F = E(), I = n(), L = i(() => j.invalid ?? I?.invalid.value ?? !1), R = i(() => j.id ?? I?.id.value ?? F);
+		I && (I.id.value = R.value);
+		let z = i(() => !!(j.description || P.description)), B = i(() => !!(j.label || P.label || z.value)), V = i(() => z.value ? `${R.value}-description` : void 0), H = e(), U = i(() => j.unstyled ?? H.unstyled), W = i(() => (j.variant ?? "checkbox") !== "checkbox"), G = i(() => r({
+			variant: j.variant,
+			size: j.size,
+			withText: B.value,
+			invalid: L.value
+		})), K = i(() => U.value ? j.ui?.wrapper : G.value.wrapper({ class: j.ui?.wrapper })), q = i(() => U.value ? [j.ui?.root, j.class] : G.value.root({ class: [j.ui?.root, j.class] })), J = i(() => U.value ? j.ui?.indicator : G.value.indicator({ class: j.ui?.indicator })), Y = i(() => U.value ? j.ui?.content : G.value.content({ class: j.ui?.content })), X = i(() => U.value ? j.ui?.label : G.value.label({ class: j.ui?.label })), Z = i(() => U.value ? j.ui?.description : G.value.description({ class: j.ui?.description })), Q = i(() => U.value ? j.ui?.mark : G.value.mark({ class: j.ui?.mark })), $ = i(() => U.value ? j.ui?.icon : G.value.icon({ class: j.ui?.icon }));
+		return (e, n) => W.value ? (m(), a(_(C), f({
 			key: 0,
-			class: p(z.value)
-		}, [u(_(S), f({ id: P.value }, {
-			..._(A),
+			id: R.value
+		}, {
+			..._(N),
 			...e.$attrs
 		}, {
-			"aria-invalid": N.value || void 0,
-			"aria-describedby": O.description ? `${P.value}-description` : void 0,
-			class: B.value
+			"aria-invalid": L.value || void 0,
+			"aria-labelledby": `${R.value}-label`,
+			"aria-describedby": V.value,
+			class: [q.value, "group/item"]
 		}), {
-			default: v(() => [u(_(x), { class: p(V.value) }, {
-				default: v(() => [h(e.$slots, "default", {}, () => [O.modelValue === "indeterminate" ? (m(), a(t, {
+			default: y(() => [j.variant === "card" ? (m(), s("span", {
+				key: 0,
+				class: p(Q.value)
+			}, [u(_(S), { class: p(J.value) }, {
+				default: y(() => [h(e.$slots, "default", {}, () => [j.modelValue === "indeterminate" ? (m(), a(t, {
 					key: 0,
-					icon: _(y)
+					icon: _(b)
 				}, null, 8, ["icon"])) : (m(), a(t, {
 					key: 1,
+					icon: _(x)
+				}, null, 8, ["icon"]))])]),
+				_: 3
+			}, 8, ["class"])], 2)) : j.icon ? (m(), a(t, {
+				key: 1,
+				icon: j.icon,
+				"data-slot": "icon",
+				class: p($.value)
+			}, null, 8, ["icon", "class"])) : o("", !0), c("span", { class: p(Y.value) }, [c("span", {
+				id: `${R.value}-label`,
+				class: p(X.value)
+			}, [h(e.$slots, "label", {}, () => [l(g(j.label), 1)])], 10, D), z.value ? (m(), s("span", {
+				key: 0,
+				id: `${R.value}-description`,
+				class: p(Z.value)
+			}, [h(e.$slots, "description", {}, () => [l(g(j.description), 1)])], 10, O)) : o("", !0)], 2)]),
+			_: 3
+		}, 16, [
+			"id",
+			"aria-invalid",
+			"aria-labelledby",
+			"aria-describedby",
+			"class"
+		])) : B.value ? (m(), s("div", {
+			key: 1,
+			class: p(K.value)
+		}, [u(_(C), f({ id: R.value }, {
+			..._(N),
+			...e.$attrs
+		}, {
+			"aria-invalid": L.value || void 0,
+			"aria-describedby": V.value,
+			class: q.value
+		}), {
+			default: y(() => [u(_(S), { class: p(J.value) }, {
+				default: y(() => [h(e.$slots, "default", {}, () => [j.modelValue === "indeterminate" ? (m(), a(t, {
+					key: 0,
 					icon: _(b)
+				}, null, 8, ["icon"])) : (m(), a(t, {
+					key: 1,
+					icon: _(x)
 				}, null, 8, ["icon"]))])]),
 				_: 3
 			}, 8, ["class"])]),
@@ -79,33 +126,33 @@ var E = ["id"], D = /*@__PURE__*/ d({
 			"aria-invalid",
 			"aria-describedby",
 			"class"
-		]), c("div", { class: p(H.value) }, [u(_(C), {
-			for: P.value,
-			class: p(U.value)
+		]), c("div", { class: p(Y.value) }, [u(_(w), {
+			for: R.value,
+			class: p(X.value)
 		}, {
-			default: v(() => [h(e.$slots, "label", {}, () => [l(g(O.label), 1)])]),
+			default: y(() => [h(e.$slots, "label", {}, () => [l(g(j.label), 1)])]),
 			_: 3
-		}, 8, ["for", "class"]), O.description || e.$slots.description ? (m(), s("p", {
+		}, 8, ["for", "class"]), z.value ? (m(), s("p", {
 			key: 0,
-			id: `${P.value}-description`,
-			class: p(W.value)
-		}, [h(e.$slots, "description", {}, () => [l(g(O.description), 1)])], 10, E)) : o("", !0)], 2)], 2)) : (m(), a(_(S), f({
-			key: 1,
-			id: P.value
+			id: `${R.value}-description`,
+			class: p(Z.value)
+		}, [h(e.$slots, "description", {}, () => [l(g(j.description), 1)])], 10, k)) : o("", !0)], 2)], 2)) : (m(), a(_(C), f({
+			key: 2,
+			id: R.value
 		}, {
-			..._(A),
+			..._(N),
 			...e.$attrs
 		}, {
-			"aria-invalid": N.value || void 0,
-			class: B.value
+			"aria-invalid": L.value || void 0,
+			class: q.value
 		}), {
-			default: v(() => [u(_(x), { class: p(V.value) }, {
-				default: v(() => [h(e.$slots, "default", {}, () => [O.modelValue === "indeterminate" ? (m(), a(t, {
+			default: y(() => [u(_(S), { class: p(J.value) }, {
+				default: y(() => [h(e.$slots, "default", {}, () => [j.modelValue === "indeterminate" ? (m(), a(t, {
 					key: 0,
-					icon: _(y)
+					icon: _(b)
 				}, null, 8, ["icon"])) : (m(), a(t, {
 					key: 1,
-					icon: _(b)
+					icon: _(x)
 				}, null, 8, ["icon"]))])]),
 				_: 3
 			}, 8, ["class"])]),
@@ -118,4 +165,4 @@ var E = ["id"], D = /*@__PURE__*/ d({
 	}
 });
 //#endregion
-export { D as default };
+export { A as default };

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

@@ -11,6 +11,18 @@ export interface ProgressProps {
     /** Current value. `null` (or `indeterminate`) means unknown duration. */
     modelValue?: number | null;
     max?: number;
+    /**
+     * `linear` is a bar, `circle` a ring with the value in the middle. A ring
+     * ignores `segments` — a broken-up ring is a donut chart, and `IDonutChart`
+     * is the component for that.
+     */
+    shape?: 'linear' | 'circle';
+    /**
+     * How many degrees of the ring the track covers — `180` is a half circle,
+     * `270` a gauge. The arc is centred at the top, so the gap sits at the
+     * bottom. Circles only, and ignored by the bar.
+     */
+    angle?: number;
     variant?: ProgressVariant;
     /**
      * Break the bar into runs that share one track — storage by file type, a
@@ -46,17 +58,31 @@ export interface ProgressProps {
         legendItem?: string;
         legendSwatch?: string;
         legendValue?: string;
+        ring?: string;
+        ringTrack?: string;
+        ringIndicator?: string;
+        ringContent?: string;
+        ringValue?: string;
+        ringLabel?: string;
     };
 }
-declare var __VLS_1: {}, __VLS_3: {
+declare var __VLS_13: {
+    value: number | null;
+    percent: number;
+    formatted: string;
+}, __VLS_15: {}, __VLS_17: {}, __VLS_19: {
     value: number | null;
     percent: number;
     formatted: string;
 };
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_1) => any;
+    value?: (props: typeof __VLS_13) => any;
+} & {
+    label?: (props: typeof __VLS_15) => any;
+} & {
+    label?: (props: typeof __VLS_17) => any;
 } & {
-    value?: (props: typeof __VLS_3) => any;
+    value?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressProps> & Readonly<{}>, {
     unstyled: boolean;

package/dist/components/Progress.vue_vue_type_script_setup_true_lang.js

@@ -1,17 +1,19 @@
 import { useIryxUiConfig as e } from "../config.js";
 import { progressTheme as t } from "../theme/progress.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, normalizeStyle as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useSlots as y, withCtx as b } from "vue";
-import { ProgressIndicator as x, ProgressRoot as S, useId as C } from "reka-ui";
+import { ProgressIndicator as x, ProgressRoot as S, useId as ee } from "reka-ui";
 //#region src/components/Progress.vue?vue&type=script&setup=true&lang.ts
-var w = ["id"], T = {
+var C = ["transform"], w = ["stroke-linecap", "stroke-dasharray"], T = ["stroke-dasharray"], te = ["id"], E = ["id"], ne = {
 	key: 0,
 	class: "flex h-full w-full"
-}, E = /*@__PURE__*/ u({
+}, D = 8, O = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "Progress",
 	props: {
 		modelValue: {},
 		max: { default: 100 },
+		shape: {},
+		angle: {},
 		variant: {},
 		segments: {},
 		size: {},
@@ -32,60 +34,114 @@ var w = ["id"], T = {
 		ui: {}
 	},
 	setup(u) {
-		let E = u, D = y(), O = C(), k = r(() => !!(E.label || D.label)), A = r(() => (E.segments?.length ?? 0) > 0), j = r(() => !A.value && (E.indeterminate || E.modelValue == null)), M = r(() => {
+		let O = u, re = y(), k = ee(), A = r(() => !!(O.label || re.label)), j = r(() => O.shape === "circle"), M = r(() => !j.value && (O.segments?.length ?? 0) > 0), N = r(() => !M.value && (O.indeterminate || O.modelValue == null)), P = r(() => {
 			let e = 0;
-			return (E.segments ?? []).map((t) => {
-				let n = Math.max(t.value, 0), r = Math.max(E.max - e, 0), i = Math.min(n, r);
+			return (O.segments ?? []).map((t) => {
+				let n = Math.max(t.value, 0), r = Math.max(O.max - e, 0), i = Math.min(n, r);
 				return e += i, {
 					...t,
 					value: n,
-					percent: E.max > 0 ? i / E.max * 100 : 0
+					percent: O.max > 0 ? i / O.max * 100 : 0
 				};
 			});
-		}), N = r(() => M.value.reduce((e, t) => e + t.value, 0)), P = r(() => M.value.filter((e) => e.label)), F = r(() => j.value ? null : A.value ? Math.min(N.value, E.max) : Math.min(Math.max(E.modelValue ?? 0, 0), E.max)), I = r(() => F.value == null ? 0 : F.value / E.max * 100), L = r(() => {
-			if (F.value != null) return E.formatValue ? E.formatValue(F.value, E.max) : `${Math.round(I.value)}%`;
-		}), R = r(() => !!(E.label || E.showValue && L.value)), z = e(), B = r(() => E.unstyled ?? z.unstyled), V = r(() => t({
-			variant: E.variant,
-			size: E.size,
-			indeterminate: j.value
-		})), H = r(() => B.value ? [E.ui?.root, E.class] : V.value.root({ class: [E.ui?.root, E.class] })), U = r(() => B.value ? E.ui?.header : V.value.header({ class: E.ui?.header })), W = r(() => B.value ? E.ui?.label : V.value.label({ class: E.ui?.label })), G = r(() => B.value ? E.ui?.value : V.value.value({ class: E.ui?.value })), K = r(() => B.value ? E.ui?.track : V.value.track({ class: E.ui?.track })), q = r(() => B.value ? E.ui?.indicator : V.value.indicator({ class: E.ui?.indicator })), J = r(() => B.value ? E.ui?.legend : V.value.legend({ class: E.ui?.legend })), Y = r(() => B.value ? E.ui?.legendItem : V.value.legendItem({ class: E.ui?.legendItem })), X = r(() => B.value ? E.ui?.legendValue : V.value.legendValue({ class: E.ui?.legendValue }));
-		function Z(e) {
-			return B.value ? E.ui?.segment : t({ variant: e ?? "neutral" }).segment({ class: E.ui?.segment });
+		}), F = r(() => P.value.reduce((e, t) => e + t.value, 0)), I = r(() => P.value.filter((e) => e.label)), L = r(() => N.value ? null : M.value ? Math.min(F.value, O.max) : Math.min(Math.max(O.modelValue ?? 0, 0), O.max)), R = r(() => L.value == null ? 0 : L.value / O.max * 100), z = r(() => {
+			if (L.value != null) return O.formatValue ? O.formatValue(L.value, O.max) : `${Math.round(R.value)}%`;
+		}), B = r(() => !!(O.label || O.showValue && z.value)), V = e(), H = r(() => O.unstyled ?? V.unstyled), U = r(() => t({
+			shape: O.shape,
+			variant: O.variant,
+			size: O.size,
+			indeterminate: N.value
+		})), W = r(() => H.value ? [O.ui?.root, O.class] : U.value.root({ class: [O.ui?.root, O.class] })), G = r(() => H.value ? O.ui?.header : U.value.header({ class: O.ui?.header })), K = r(() => H.value ? O.ui?.label : U.value.label({ class: O.ui?.label })), q = r(() => H.value ? O.ui?.value : U.value.value({ class: O.ui?.value })), J = r(() => H.value ? O.ui?.track : U.value.track({ class: O.ui?.track })), Y = r(() => H.value ? O.ui?.indicator : U.value.indicator({ class: O.ui?.indicator })), ie = r(() => H.value ? O.ui?.ring : U.value.ring({ class: O.ui?.ring })), ae = r(() => H.value ? O.ui?.ringTrack : U.value.ringTrack({ class: O.ui?.ringTrack })), oe = r(() => H.value ? O.ui?.ringIndicator : U.value.ringIndicator({ class: O.ui?.ringIndicator })), se = r(() => H.value ? O.ui?.ringContent : U.value.ringContent({ class: O.ui?.ringContent })), ce = r(() => H.value ? O.ui?.ringValue : U.value.ringValue({ class: O.ui?.ringValue })), le = r(() => H.value ? O.ui?.ringLabel : U.value.ringLabel({ class: O.ui?.ringLabel })), ue = r(() => H.value ? O.ui?.legend : U.value.legend({ class: O.ui?.legend })), de = r(() => H.value ? O.ui?.legendItem : U.value.legendItem({ class: O.ui?.legendItem })), fe = r(() => H.value ? O.ui?.legendValue : U.value.legendValue({ class: O.ui?.legendValue }));
+		function pe(e) {
+			return H.value ? O.ui?.segment : t({ variant: e ?? "neutral" }).segment({ class: O.ui?.segment });
 		}
-		function Q(e) {
-			return B.value ? E.ui?.legendSwatch : t({ variant: e ?? "neutral" }).legendSwatch({ class: E.ui?.legendSwatch });
+		function me(e) {
+			return H.value ? O.ui?.legendSwatch : t({ variant: e ?? "neutral" }).legendSwatch({ class: O.ui?.legendSwatch });
 		}
-		let $ = r(() => j.value ? void 0 : { transform: `translateX(-${100 - I.value}%)` });
-		return (e, t) => (m(), o("div", { class: f(H.value) }, [
-			R.value ? (m(), o("div", {
+		let X = (100 - D) / 2, Z = 2 * Math.PI * X, Q = r(() => Math.min(Math.max(O.angle ?? 360, 1), 360)), $ = r(() => Z * (Q.value / 360)), he = r(() => Q.value === 360 ? -90 : -(90 + Q.value / 2)), ge = r(() => `${N.value ? $.value * .25 : $.value * (R.value / 100)} ${Z}`), _e = r(() => `${$.value} ${Z}`), ve = r(() => N.value ? void 0 : { transform: `translateX(-${100 - R.value}%)` });
+		return (e, t) => j.value ? (m(), o("div", {
+			key: 0,
+			class: f(W.value)
+		}, [l(v(S), d({
+			"model-value": L.value,
+			max: O.max,
+			"get-value-label": () => z.value ?? "",
+			"aria-labelledby": A.value ? v(k) : void 0
+		}, e.$attrs, { "as-child": "" }), {
+			default: b(() => [(m(), o("svg", {
+				class: f(ie.value),
+				viewBox: "0 0 100 100",
+				"aria-hidden": "true"
+			}, [s("g", { transform: `rotate(${he.value} 50 50)` }, [s("circle", {
+				class: f(ae.value),
+				cx: "50",
+				cy: "50",
+				r: X,
+				"stroke-width": D,
+				"stroke-linecap": Q.value === 360 ? void 0 : "round",
+				"stroke-dasharray": _e.value
+			}, null, 10, w), l(v(x), { "as-child": "" }, {
+				default: b(() => [s("circle", {
+					class: f(oe.value),
+					cx: "50",
+					cy: "50",
+					r: X,
+					"stroke-width": D,
+					"stroke-linecap": "round",
+					"stroke-dasharray": ge.value
+				}, null, 10, T)]),
+				_: 1
+			})], 8, C)], 2))]),
+			_: 1
+		}, 16, [
+			"model-value",
+			"max",
+			"get-value-label",
+			"aria-labelledby"
+		]), s("div", { class: f(se.value) }, [O.showValue && z.value ? (m(), o("span", {
+			key: 0,
+			class: f(ce.value)
+		}, [g(e.$slots, "value", {
+			value: L.value,
+			percent: R.value,
+			formatted: z.value
+		}, () => [c(_(z.value), 1)])], 2)) : a("", !0), A.value ? (m(), o("span", {
+			key: 1,
+			id: v(k),
+			class: f(le.value)
+		}, [g(e.$slots, "label", {}, () => [c(_(O.label), 1)])], 10, te)) : a("", !0)], 2)], 2)) : (m(), o("div", {
+			key: 1,
+			class: f(W.value)
+		}, [
+			B.value ? (m(), o("div", {
 				key: 0,
-				class: f(U.value)
-			}, [k.value ? (m(), o("span", {
+				class: f(G.value)
+			}, [A.value ? (m(), o("span", {
 				key: 0,
-				id: v(O),
-				class: f(W.value)
-			}, [g(e.$slots, "label", {}, () => [c(_(E.label), 1)])], 10, w)) : a("", !0), E.showValue && L.value ? (m(), o("span", {
+				id: v(k),
+				class: f(K.value)
+			}, [g(e.$slots, "label", {}, () => [c(_(O.label), 1)])], 10, E)) : a("", !0), O.showValue && z.value ? (m(), o("span", {
 				key: 1,
-				class: f(G.value)
+				class: f(q.value)
 			}, [g(e.$slots, "value", {
-				value: F.value,
-				percent: I.value,
-				formatted: L.value
-			}, () => [c(_(L.value), 1)])], 2)) : a("", !0)], 2)) : a("", !0),
+				value: L.value,
+				percent: R.value,
+				formatted: z.value
+			}, () => [c(_(z.value), 1)])], 2)) : a("", !0)], 2)) : a("", !0),
 			l(v(S), d({
-				"model-value": F.value,
-				max: E.max,
-				"get-value-label": () => L.value ?? "",
-				"aria-labelledby": k.value ? v(O) : void 0
-			}, e.$attrs, { class: K.value }), {
-				default: b(() => [A.value ? (m(), o("div", T, [(m(!0), o(n, null, h(M.value, (e, t) => (m(), o("div", {
+				"model-value": L.value,
+				max: O.max,
+				"get-value-label": () => z.value ?? "",
+				"aria-labelledby": A.value ? v(k) : void 0
+			}, e.$attrs, { class: J.value }), {
+				default: b(() => [M.value ? (m(), o("div", ne, [(m(!0), o(n, null, h(P.value, (e, t) => (m(), o("div", {
 					key: e.label ?? t,
-					class: f(Z(e.variant)),
+					class: f(pe(e.variant)),
 					style: p({ width: `${e.percent}%` })
 				}, null, 6))), 128))])) : (m(), i(v(x), {
 					key: 1,
-					class: f(q.value),
-					style: p($.value)
+					class: f(Y.value),
+					style: p(ve.value)
 				}, null, 8, ["class", "style"]))]),
 				_: 1
 			}, 16, [
@@ -95,19 +151,19 @@ var w = ["id"], T = {
 				"aria-labelledby",
 				"class"
 			]),
-			P.value.length ? (m(), o("ul", {
+			I.value.length ? (m(), o("ul", {
 				key: 1,
-				class: f(J.value)
-			}, [(m(!0), o(n, null, h(P.value, (e, t) => (m(), o("li", {
+				class: f(ue.value)
+			}, [(m(!0), o(n, null, h(I.value, (e, t) => (m(), o("li", {
 				key: e.label ?? t,
-				class: f(Y.value)
+				class: f(de.value)
 			}, [
-				s("span", { class: f(Q(e.variant)) }, null, 2),
+				s("span", { class: f(me(e.variant)) }, null, 2),
 				s("span", null, _(e.label), 1),
-				s("span", { class: f(X.value) }, _(E.formatValue ? E.formatValue(e.value, E.max) : `${Math.round(e.value / E.max * 100)}%`), 3)
+				s("span", { class: f(fe.value) }, _(O.formatValue ? O.formatValue(e.value, O.max) : `${Math.round(e.value / O.max * 100)}%`), 3)
 			], 2))), 128))], 2)) : a("", !0)
 		], 2));
 	}
 });
 //#endregion
-export { E as default };
+export { O as default };

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

@@ -1,15 +1,24 @@
 import type { RadioGroupRootProps } from 'reka-ui';
 import type { ClassValue } from '../class-value';
+import type { IconLike } from '../composables/icon';
 export interface RadioGroupItemOption {
     label: string;
     value: string;
     /** Secondary text under the label. */
     description?: string;
+    /** Shown above the label by the `tile` variant, ignored by the others. */
+    icon?: IconLike;
     disabled?: boolean;
 }
 export interface RadioGroupProps extends RadioGroupRootProps {
     /** Options to render. Strings are expanded to `{ label, value }`. */
     items?: (RadioGroupItemOption | string)[];
+    /**
+     * How each option is drawn. `radio` is a circle beside its label, `card`
+     * makes the whole bordered surface the control, and `tile` centres an icon
+     * above the label.
+     */
+    variant?: 'radio' | 'card' | 'tile';
     size?: 'sm' | 'md' | 'lg';
     /** Mark as failing validation. Taken from the enclosing `IFormField` when omitted. */
     invalid?: boolean;
@@ -19,6 +28,9 @@ export interface RadioGroupProps extends RadioGroupRootProps {
     ui?: {
         root?: string;
         item?: string;
+        mark?: string;
+        icon?: string;
+        content?: string;
         label?: string;
         description?: string;
     };