@ac-design/design-system 1.0.3 → 2.1.0

package/dist/lib/components/AcCheckBox.vue_vue_type_script_setup_true_lang.js

@@ -1,49 +1,132 @@
-import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, renderList as l, toDisplayString as u, unref as d, useId as f, useModel as p, vModelCheckbox as m, withDirectives as h } from "vue";
-import { Check as g } from "@lucide/vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, nextTick as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, vModelCheckbox as y, withDirectives as b, withModifiers as x } from "vue";
+import { Check as S, Minus as C } from "@lucide/vue";
 //#region src/lib/components/AcCheckBox.vue?vue&type=script&setup=true&lang.ts
-var _ = {
-	class: "flex flex-col gap-2.5",
-	"data-ac-ds": "",
-	"data-testid": "ac-checkbox"
-}, v = ["for"], y = { class: "relative inline-flex size-4 shrink-0" }, b = [
+var w = { class: "flex flex-col gap-3" }, T = ["for"], E = [
 	"id",
 	"name",
 	"value",
 	"disabled"
-], x = {
+], D = { class: "flex min-w-0 flex-col gap-1" }, O = { class: "font-medium" }, k = {
 	key: 0,
-	class: "text-xs text-red-30"
-}, S = /*@__PURE__*/ a({
+	class: "text-xs text-muted"
+}, A = {
+	key: 0,
+	class: "mt-1 text-base text-danger-strong",
+	role: "alert"
+}, j = [
+	"name",
+	"checked",
+	"indeterminate",
+	"disabled",
+	"aria-invalid",
+	"aria-describedby"
+], M = {
+	key: 0,
+	class: "flex min-w-0 flex-col gap-1"
+}, N = {
+	key: 0,
+	class: "font-medium"
+}, P = {
+	key: 1,
+	class: "text-xs text-muted"
+}, F = ["id"], I = /*@__PURE__*/ o({
+	inheritAttrs: !1,
 	__name: "AcCheckBox",
-	props: /*@__PURE__*/ o({
-		options: {},
+	props: /*@__PURE__*/ s({
+		options: { default: void 0 },
 		name: { default: "checkbox" },
-		errorMsg: { default: "" }
+		errorMsg: { default: "" },
+		label: { default: "" },
+		description: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "normal" }
 	}, {
 		modelValue: { default: () => [] },
-		modelModifiers: {}
+		modelModifiers: {},
+		checked: {
+			type: Boolean,
+			default: !1
+		},
+		checkedModifiers: {}
 	}),
-	emits: ["update:modelValue"],
-	setup(a) {
-		let o = p(a, "modelValue"), S = f();
-		return (f, p) => (c(), n("div", _, [(c(!0), n(e, null, l(a.options, (e, t) => (c(), n("label", {
+	emits: ["update:modelValue", "update:checked"],
+	setup(o) {
+		let s = o, I = v(o, "modelValue"), L = v(o, "checked"), R = _(), z = g(), B = f(null), V = t(() => s.size === "small"), H = t(() => s.indeterminate && !L.value), U = t(() => s.options ? z : {
+			class: z.class,
+			style: z.style
+		}), W = t(() => {
+			let { class: e, style: t, ...n } = z;
+			return s.label || n["aria-label"] || n["aria-labelledby"] ? n : {
+				"aria-label": "Select",
+				...n
+			};
+		}), G = t(() => V.value ? "size-[18px]" : "size-6"), K = t(() => [
+			"peer cursor-pointer appearance-none rounded-4 border border-muted/70 transition-colors duration-200 group-hover:enabled:not-checked:not-indeterminate:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-surface-sunken",
+			G.value,
+			V.value ? "bg-background" : "bg-transparent"
+		]), q = t(() => ["pointer-events-none absolute inset-0 m-auto text-white opacity-0 transition-opacity duration-150 motion-reduce:transition-none", V.value ? "size-3.5" : "size-5"]), J = t(() => ["cursor-not-allowed", V.value ? "opacity-40" : "opacity-50"]);
+		async function Y(e) {
+			L.value = e.target.checked, await l(), B.value && (B.value.checked = L.value, B.value.indeterminate = H.value);
+		}
+		return (t, s) => o.options ? (d(), r("div", c({
+			key: 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-checkbox"
+		}, U.value), [i("div", w, [(d(!0), r(e, null, p(o.options, (e, t) => (d(), r("label", {
 			key: e.label,
-			for: `${d(S)}-${t}`,
-			class: s(["group inline-flex w-fit cursor-pointer items-center gap-2.5 text-base text-heading", e.disabled && "cursor-not-allowed opacity-50"])
-		}, [r("span", y, [h(r("input", {
-			id: `${d(S)}-${t}`,
-			"onUpdate:modelValue": p[0] ||= (e) => o.value = e,
+			for: `${h(R)}-${t}`,
+			class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [e.disabled && J.value, V.value ? "gap-2.5" : "gap-3"]])
+		}, [i("span", { class: u(["relative inline-flex shrink-0", G.value]) }, [b(i("input", {
+			id: `${h(R)}-${t}`,
+			"onUpdate:modelValue": s[0] ||= (e) => I.value = e,
 			type: "checkbox",
-			name: a.name,
+			name: o.name,
 			value: e.value,
 			disabled: e.disabled,
-			class: "peer size-4 cursor-pointer appearance-none rounded-4 border border-border-dark bg-surface shadow-xs transition-[background-color,border-color,box-shadow] duration-150 group-hover:border-slate-60 checked:border-primary checked:bg-primary checked:shadow-button focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed"
-		}, null, 8, b), [[m, o.value]]), i(d(g), {
-			class: "pointer-events-none absolute inset-0 m-auto size-3 scale-75 text-white opacity-0 transition duration-150 peer-checked:scale-100 peer-checked:opacity-100",
-			"stroke-width": 3,
+			class: u(K.value)
+		}, null, 10, E), [[y, I.value]]), a(h(S), {
+			class: u([q.value, "peer-checked:opacity-100"]),
 			"aria-hidden": "true"
-		})]), r("span", null, u(e.label), 1)], 10, v))), 128)), a.errorMsg ? (c(), n("p", x, u(a.errorMsg), 1)) : t("", !0)]));
+		}, null, 8, ["class"])], 2), i("span", D, [i("span", O, m(e.label), 1), e.description ? (d(), r("span", k, m(e.description), 1)) : n("", !0)])], 10, T))), 128))]), o.errorMsg ? (d(), r("p", A, m(o.errorMsg), 1)) : n("", !0)], 16)) : (d(), r("div", c({
+			key: 1,
+			class: "inline-flex flex-col",
+			"data-ac-ds": "",
+			"data-testid": "ac-checkbox"
+		}, U.value, { onClick: s[1] ||= x(() => {}, ["stop"]) }), [i("label", { class: u(["group inline-flex w-fit cursor-pointer items-start text-base text-heading select-none", [o.disabled && J.value, V.value ? "gap-2.5" : "gap-3"]]) }, [i("span", { class: u(["relative inline-flex shrink-0", G.value]) }, [
+			i("input", c({
+				ref_key: "single",
+				ref: B,
+				type: "checkbox",
+				name: o.name,
+				checked: L.value,
+				indeterminate: H.value,
+				disabled: o.disabled,
+				"aria-invalid": o.errorMsg ? !0 : void 0,
+				"aria-describedby": o.errorMsg ? `${h(R)}-error` : void 0,
+				class: K.value
+			}, W.value, { onChange: Y }), null, 16, j),
+			a(h(S), {
+				class: u([q.value, "peer-checked:opacity-100"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"]),
+			a(h(C), {
+				class: u([q.value, "peer-indeterminate:opacity-100"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])
+		], 2), o.label || o.description ? (d(), r("span", M, [o.label ? (d(), r("span", N, m(o.label), 1)) : n("", !0), o.description ? (d(), r("span", P, m(o.description), 1)) : n("", !0)])) : n("", !0)], 2), o.errorMsg ? (d(), r("p", {
+			key: 0,
+			id: `${h(R)}-error`,
+			class: "mt-1 text-base text-danger-strong",
+			role: "alert"
+		}, m(o.errorMsg), 9, F)) : n("", !0)], 16));
 	}
 });
 //#endregion
-export { S as default };
+export { I as default };

package/dist/lib/components/AcCheckList.js

@@ -0,0 +1,5 @@
+import e from "./AcCheckList.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcCheckList.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/lib/components/AcCheckList.vue.d.ts

@@ -0,0 +1,45 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface CheckListItem {
+    /** The benefit or feature, in sentence case. */
+    label: string;
+    /** A line of muted text under the label. */
+    description?: string;
+}
+export interface Props {
+    /** The lines to show. Pass strings, or `{ label, description }` for a line with a muted second line. */
+    items?: (string | CheckListItem)[];
+    /** A Lucide icon before each line. Defaults to `CircleCheck`, as cloud-ui's landing heroes; pass `Check` for the plain tick of the Create database card. */
+    icon?: Component;
+    /** Colour of the icon. `muted` is a grey tick for neutral lists. */
+    color?: Tone | "muted";
+    /** `normal` 14px text with 16px icons and 10px between lines; `small` 12px text with 14px icons and 6px between lines. */
+    size?: "small" | "normal";
+    /** Lays the lines out in two columns from 640px. Below that they stack in one. */
+    columns?: 1 | 2;
+    /** Sets the text in the muted grey, as on cloud-ui's landing heroes. Set `false` for the heading colour, as on the Create database card. */
+    muted?: boolean;
+}
+type __VLS_Slots = {
+    /** Replaces the text of each line; the icon stays. Gets `item` (always an object) and `index`. */
+    default?: (props: {
+        item: CheckListItem;
+        index: number;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    icon: Component;
+    color: Tone | "muted";
+    size: "small" | "normal";
+    items: (string | CheckListItem)[];
+    muted: boolean;
+    columns: 1 | 2;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/components/AcCheckList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,64 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderList as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, unref as p } from "vue";
+import { CircleCheck as m } from "@lucide/vue";
+//#region src/lib/components/AcCheckList.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "min-w-0" }, g = /*@__PURE__*/ o({
+	__name: "AcCheckList",
+	props: {
+		items: { default: () => [] },
+		icon: { default: void 0 },
+		color: { default: "primary" },
+		size: { default: "normal" },
+		columns: { default: 1 },
+		muted: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(o) {
+		let g = o, _ = {
+			primary: "text-primary",
+			info: "text-info",
+			success: "text-success",
+			warning: "text-warning",
+			danger: "text-danger",
+			muted: "text-muted"
+		}, v = {
+			normal: {
+				list: "gap-y-2.5 text-base",
+				icon: "mt-0.5 size-4",
+				item: "gap-2.5",
+				description: "text-base"
+			},
+			small: {
+				list: "gap-y-1.5 text-xs",
+				icon: "mt-[3px] size-3.5",
+				item: "gap-2",
+				description: "text-xs"
+			}
+		}, y = t(() => g.items.map((e) => typeof e == "string" ? { label: e } : e)), b = t(() => v[g.size]);
+		return (t, g) => (c(), i("ul", {
+			role: "list",
+			class: s(["m-0 grid list-none p-0 leading-relaxed", [
+				b.value.list,
+				o.columns === 2 && "gap-x-6 sm:grid-cols-2",
+				o.muted ? "text-muted" : "text-heading"
+			]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-check-list"
+		}, [(c(!0), i(e, null, l(y.value, (e, l) => (c(), i("li", {
+			key: `${l}-${e.label}`,
+			class: s(["flex min-w-0 items-start text-left", b.value.item])
+		}, [(c(), n(d(o.icon ?? p(m)), {
+			class: s(["shrink-0", [b.value.icon, _[o.color]]]),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])), a("span", h, [u(t.$slots, "default", {
+			item: e,
+			index: l
+		}, () => [a("span", { class: s(e.description && "font-medium text-heading") }, f(e.label), 3), e.description ? (c(), i("span", {
+			key: 0,
+			class: s(["block text-muted", b.value.description])
+		}, f(e.description), 3)) : r("", !0)])])], 2))), 128))], 2));
+	}
+});
+//#endregion
+export { g as default };

package/dist/lib/components/AcCheckRadio.vue.d.ts

@@ -1,13 +1,27 @@
-import type { Option } from "./types";
+import type { Component } from "vue";
+import type { Option, Tone } from "./types";
+/** A radio option with an optional icon or logo tile and a pill next to its label. */
+export interface CheckRadioOption<V = unknown> extends Option<V> {
+    /** Lucide icon shown in a 32px tile before the label. */
+    icon?: Component;
+    /** Image URL shown in a 32px tile before the label, e.g. an engine logo. Used when there's no `icon`. */
+    logo?: string;
+    /** Short pill after the label, e.g. "Recommended" or "Coming soon". */
+    badge?: string;
+    /** Pill colour. `neutral` is grey, for "Coming soon". Defaults to `primary`. */
+    badgeColor?: Tone | "neutral";
+}
 export interface Props<V> {
-    /** The radios to render: `{ value, label, description?, disabled? }`. */
-    options: Option<V>[];
+    /** The radios to render: `{ value, label, description?, disabled?, icon?, logo?, badge?, badgeColor? }`. */
+    options: CheckRadioOption<V>[];
     /** Base `name` for the radio group. */
     name?: string;
     /** Lays the options out horizontally. */
     row?: boolean;
-    /** Card style with each option's description, like the source's hasDescription. */
+    /** Shows each option as a card with its description underneath. The selected card gets a primary border and a check badge in its corner. */
     cards?: boolean;
+    /** Cards only: shows an 18px radio before each card's label instead of the check badge. Old cloud-ui RadioCard `is-radio-show`. */
+    showRadio?: boolean;
     /** Error text under the group. */
     errorMsg?: string;
 }
@@ -21,7 +35,18 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        /** Replaces an option's icon, label, badge and description. Clicking it still selects the option. */
+        option?: (props: {
+            option: CheckRadioOption<T>;
+            checked: boolean;
+        }) => unknown;
+        /** Content on the right of an option, e.g. a version select. Clicks and keys inside it don't select the option. Cards with it stack in one column and drop the check badge, so pair it with `show-radio`. */
+        "option-extra"?: (props: {
+            option: CheckRadioOption<T>;
+            checked: boolean;
+        }) => unknown;
+    };
     emit: (event: "update:modelValue", value: T | undefined) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;

package/dist/lib/components/AcCheckRadio.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,39 @@
-import { Fragment as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u, useId as d, useModel as f, vModelRadio as p, withDirectives as m } from "vue";
+import { Fragment as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useId as _, useModel as v, useSlots as y, vModelRadio as b, withCtx as x, withDirectives as S } from "vue";
+import { Check as C } from "@lucide/vue";
 //#region src/lib/components/AcCheckRadio.vue?vue&type=script&setup=true&lang.ts
-var h = {
+var w = {
 	role: "radiogroup",
 	"data-ac-ds": "",
 	"data-testid": "ac-check-radio"
-}, g = ["for"], _ = [
+}, T = [
 	"id",
 	"name",
 	"value",
 	"disabled"
-], v = { class: "flex flex-col" }, y = ["title"], b = {
+], E = {
 	key: 0,
-	class: "mt-2 text-xs text-red-30"
-}, x = /*@__PURE__*/ i({
+	class: "flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/20 bg-primary/10 text-primary-strong",
+	"aria-hidden": "true"
+}, D = ["src"], O = { class: "flex min-w-0 flex-col" }, k = {
+	key: 0,
+	class: "flex flex-wrap items-center gap-x-2 gap-y-1"
+}, A = {
+	key: 2,
+	class: "mt-0.5 text-xs leading-relaxed text-muted"
+}, j = {
+	key: 0,
+	class: "relative shrink-0 cursor-auto"
+}, M = {
+	key: 0,
+	class: "absolute top-2 right-2 flex size-4 items-center justify-center rounded-full bg-primary text-white shadow-sm",
+	"aria-hidden": "true"
+}, N = {
+	key: 0,
+	class: "mt-1 text-base text-danger-strong",
+	role: "alert"
+}, P = /*@__PURE__*/ c({
 	__name: "AcCheckRadio",
-	props: /*@__PURE__*/ a({
+	props: /*@__PURE__*/ l({
 		options: {},
 		name: { default: "radio" },
 		row: {
@@ -25,32 +44,89 @@ var h = {
 			type: Boolean,
 			default: !1
 		},
+		showRadio: {
+			type: Boolean,
+			default: !1
+		},
 		errorMsg: { default: "" }
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(i) {
-		let a = f(i, "modelValue"), x = d();
-		return (d, f) => (s(), n("div", h, [r("div", { class: o(i.cards ? "grid gap-3 sm:grid-cols-2" : i.row ? "flex flex-row flex-wrap gap-x-6 gap-y-2" : "flex flex-col gap-2.5") }, [(s(!0), n(e, null, c(i.options, (e, c) => (s(), n("label", {
+	setup(c) {
+		let l = v(c, "modelValue"), P = {
+			primary: "bg-primary/10 text-primary-strong",
+			info: "bg-info/10 text-info-strong",
+			success: "bg-success/10 text-success-strong",
+			warning: "bg-warning/10 text-warning-strong",
+			danger: "bg-danger/10 text-danger-strong",
+			neutral: "bg-surface-sunken text-muted"
+		}, F = y(), I = _(), L = n(() => !!F["option-extra"]);
+		return (n, _) => (d(), a("div", w, [o("div", { class: u(c.cards ? ["grid gap-3", !L.value && "sm:grid-cols-2"] : c.row ? "flex flex-row flex-wrap gap-x-6 gap-y-3" : "flex flex-col gap-3") }, [(d(!0), a(e, null, f(c.options, (e, f) => (d(), r(m(L.value ? "div" : "label"), {
 			key: e.label,
-			for: `${u(x)}-${c}`,
-			class: o(["group flex cursor-pointer gap-2.5 text-base text-heading", [e.disabled && "cursor-not-allowed opacity-50", i.cards && "rounded-10 border border-border bg-surface p-4 shadow-xs transition-[border-color,box-shadow,background-color] duration-150 hover:border-border-dark has-checked:border-primary has-checked:bg-primary-97/60 has-checked:shadow-[0_0_0_1px_var(--color-primary)] has-focus-visible:shadow-[0_0_0_3px_var(--color-ring)]"]])
-		}, [m(r("input", {
-			id: `${u(x)}-${c}`,
-			"onUpdate:modelValue": f[0] ||= (e) => a.value = e,
-			type: "radio",
-			name: `${i.name}-${u(x)}`,
-			value: e.value,
-			disabled: e.disabled,
-			class: "mt-0.5 size-4 shrink-0 cursor-pointer appearance-none rounded-full border border-border-dark bg-surface shadow-xs transition-[border-color,border-width] duration-150 group-hover:border-slate-60 checked:border-[5px] checked:border-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed"
-		}, null, 8, _), [[p, a.value]]), r("span", v, [r("span", { class: o(i.cards && "font-medium") }, l(e.label), 3), i.cards && e.description ? (s(), n("span", {
-			key: 0,
-			class: "mt-0.5 line-clamp-2 text-xs text-muted",
-			title: e.description
-		}, l(e.description), 9, y)) : t("", !0)])], 10, g))), 128))], 2), i.errorMsg ? (s(), n("p", b, l(i.errorMsg), 1)) : t("", !0)]));
+			for: L.value ? void 0 : `${g(I)}-${f}`,
+			class: u(["group flex cursor-pointer gap-3 text-base text-heading select-none", [
+				c.cards ? "relative items-start rounded-14 border border-border bg-surface p-3 transition-[border-color,background-color,box-shadow] duration-200 ease-out has-checked:border-primary has-checked:bg-primary/5 has-checked:shadow-[inset_0_0_0_1px_var(--color-primary)] has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background motion-reduce:transition-none" : L.value ? "relative items-center" : "w-fit items-center",
+				e.disabled && ["cursor-not-allowed", c.cards ? "opacity-60" : "opacity-50"],
+				L.value && "flex-wrap",
+				c.cards && !e.disabled && "hover:border-primary/40 hover:bg-accent-hover has-checked:hover:border-primary has-checked:hover:bg-primary/5"
+			]])
+		}, {
+			default: x(() => [
+				(d(), r(m(L.value ? "label" : "span"), {
+					for: L.value ? `${g(I)}-${f}` : void 0,
+					class: u(L.value ? [
+						"flex min-w-0 flex-1 basis-[240px] gap-3 after:absolute after:inset-0",
+						c.cards ? "items-start" : "items-center",
+						e.disabled ? "cursor-not-allowed" : "cursor-pointer"
+					] : "contents")
+				}, {
+					default: x(() => [o("span", { class: u(c.cards && !c.showRadio ? "sr-only" : ["relative inline-flex size-[18px] shrink-0", c.cards && "mt-0.5"]) }, [S(o("input", {
+						id: `${g(I)}-${f}`,
+						"onUpdate:modelValue": _[0] ||= (e) => l.value = e,
+						type: "radio",
+						name: `${c.name}-${g(I)}`,
+						value: e.value,
+						disabled: e.disabled,
+						class: u(["peer size-[18px] cursor-pointer appearance-none rounded-full border border-muted/70 bg-background transition-colors duration-200 group-hover:enabled:not-checked:border-primary/60 checked:border-primary checked:bg-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-surface-sunken motion-reduce:transition-none", !c.cards && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface"])
+					}, null, 10, T), [[b, l.value]]), _[1] ||= o("span", {
+						class: "pointer-events-none absolute inset-0 m-auto size-1.5 scale-0 rounded-full bg-white transition-transform duration-200 peer-checked:scale-100 motion-reduce:transition-none",
+						"aria-hidden": "true"
+					}, null, -1)], 2), p(n.$slots, "option", {
+						option: e,
+						checked: l.value === e.value
+					}, () => [e.icon ? (d(), a("span", E, [(d(), r(m(e.icon), { class: "size-5" }))])) : e.logo ? (d(), a("img", {
+						key: 1,
+						src: e.logo,
+						alt: "",
+						class: "size-8 shrink-0 rounded-10 border border-border bg-surface object-contain p-1"
+					}, null, 8, D)) : i("", !0), o("span", O, [e.badge ? (d(), a("span", k, [o("span", { class: u(c.cards ? "font-semibold" : "font-medium") }, h(e.label), 3), o("span", { class: u(["rounded-full px-2 py-0.5 text-xs font-medium", P[e.badgeColor ?? "primary"]]) }, h(e.badge), 3)])) : (d(), a("span", {
+						key: 1,
+						class: u(c.cards ? "font-semibold" : "font-medium")
+					}, h(e.label), 3)), c.cards && e.description ? (d(), a("span", A, h(e.description), 1)) : i("", !0)])])]),
+					_: 2
+				}, 1032, ["for", "class"])),
+				L.value ? (d(), a("div", j, [p(n.$slots, "option-extra", {
+					option: e,
+					checked: l.value === e.value
+				})])) : i("", !0),
+				s(t, {
+					"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
+					"enter-from-class": "scale-50 opacity-0",
+					"leave-active-class": "transition duration-100 ease-in motion-reduce:transition-none",
+					"leave-to-class": "scale-50 opacity-0"
+				}, {
+					default: x(() => [c.cards && !c.showRadio && !L.value && l.value === e.value ? (d(), a("span", M, [s(g(C), {
+						class: "size-2.5",
+						"stroke-width": 3.5
+					})])) : i("", !0)]),
+					_: 2
+				}, 1024)
+			]),
+			_: 2
+		}, 1032, ["for", "class"]))), 128))], 2), c.errorMsg ? (d(), a("p", N, h(c.errorMsg), 1)) : i("", !0)]));
 	}
 });
 //#endregion
-export { x as default };
+export { P as default };

package/dist/lib/components/AcCircularProgress.js

@@ -0,0 +1,5 @@
+import e from "./AcCircularProgress.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcCircularProgress.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/lib/components/AcCircularProgress.vue.d.ts

@@ -0,0 +1,44 @@
+import type { Tone } from "./types";
+export interface Props {
+    /** Current amount, from 0 to `max`. Values outside are clamped. Ignored while `indeterminate`. */
+    value?: number;
+    /** The amount that fills the ring. */
+    max?: number;
+    /** Diameter: `small` 32px, `normal` 44px (cloud-ui's default), `large` 80px, or a number of pixels. */
+    size?: "small" | "normal" | "large" | number;
+    /** Ring thickness in pixels. Defaults to 3, 4 and 6 for the named sizes, and about a tenth of a numeric size. */
+    strokeWidth?: number;
+    /** Shows the percentage, or `valueText`, in the centre. Turn it off below 40px. */
+    showLabel?: boolean;
+    /** Replaces the percentage in the centre and for screen readers, e.g. "3/5". Keep it to 4 characters. */
+    valueText?: string;
+    /** Ring colour. `progress` follows the value as in cloud-ui: danger below 30%, warning to 59%, info to 99%, success at 100%. `auto` is for quotas: primary, then warning from 80% and danger from 95%, as in AcProgress. */
+    color?: Tone | "auto" | "progress";
+    /** The accessible name, e.g. "CPU usage" or "Image sync to nyc1". Without it the ring is read as "Progress". */
+    label?: string;
+    /** For work of unknown length: a spinning quarter ring with no value. */
+    indeterminate?: boolean;
+}
+type __VLS_Slots = {
+    /** Custom centre content instead of the percentage, e.g. a 16px icon. Also shown while `indeterminate`. Hidden from screen readers; set `valueText` for them. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    value: number;
+    color: Tone | "auto" | "progress";
+    max: number;
+    size: "small" | "normal" | "large" | number;
+    strokeWidth: number;
+    indeterminate: boolean;
+    showLabel: boolean;
+    valueText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};