@ac-design/design-system 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,139 @@
+/** How a value is shown. `auto` picks one from the value itself. */
+export type CellType = "auto" | "string" | "number" | "integer" | "boolean" | "date" | "object" | "array" | "labels" | "status";
+/** One cell of a server-side resource table (the old `AcTableCell`). */
+export interface ResourceCell {
+    /** The value: a string, number, boolean, map, list or null. */
+    data: unknown;
+    /** Value to sort by, when it differs from `data` (e.g. a Unix time for an age). */
+    sort?: string | number;
+    /** Where the value links to. May hold `${placeholders}`; resolve them with `resolveLink`. */
+    link?: string;
+    /** Hover text for the value. */
+    tooltip?: string;
+    /** URL of a 16px image shown before the value. */
+    icon?: string;
+    /** Status colour, e.g. `success` or `danger`. Shows the value as a badge. */
+    color?: string;
+    /** Shows the value in bold. */
+    isBold?: boolean;
+}
+/** One column of a server-side resource table (the old `AcTableCol`). */
+export interface ResourceColumn {
+    /** Header text. Also titles the JSON viewer. */
+    name: string;
+    /** OpenAPI type from the server (`string`, `integer`, `number`, `boolean`, `date`, `object`), or any `CellType`. */
+    type?: CellType | "string" | "integer" | "number" | "boolean" | "date" | "object";
+    /** OpenAPI format. `name` marks the resource-name column, which is shown bold. */
+    format?: string;
+    /** Lower numbers matter more. Hide high numbers on narrow screens. */
+    priority?: number;
+    /** Server template the value came from. Not used by the UI. */
+    pathTemplate?: string;
+    /** Alignment of the value. */
+    textAlign?: "left" | "center" | "right" | string;
+    /** Badge shape for coloured cells: `Pill` (default) or `Rectangle`. */
+    shape?: "Pill" | "Rectangle" | string;
+    /** Column width in pixels. */
+    width?: number;
+    /** Server-side sort settings. */
+    sort?: {
+        enable?: boolean;
+        template?: string;
+        type?: string;
+    };
+    /** Present when cells in this column carry links. */
+    link?: boolean | Record<string, unknown>;
+    /** Present when cells in this column carry tooltips. */
+    tooltip?: boolean | Record<string, unknown>;
+    /** Present when cells in this column carry icons. */
+    icon?: boolean | Record<string, unknown>;
+    /** A Grafana dashboard for the row. The app renders the button, e.g. in an AcTable cell slot. */
+    dashboard?: {
+        status: string;
+        title: string;
+        message?: string;
+    };
+    /** A shell into the row's pod or service. The app renders the button. */
+    exec?: Record<string, unknown>;
+}
+/** One row of a server-side resource table (the old `AcTableRow`). */
+export interface ResourceRow {
+    cells: ResourceCell[];
+    namespace?: string;
+    ctx?: Record<string, unknown>;
+}
+/** A server-side resource table: column descriptors and rows of cells (the old `AcTable` type). */
+export interface ResourceTable {
+    columns: ResourceColumn[];
+    rows: ResourceRow[];
+    name?: string;
+}
+/** @deprecated Use `ResourceCell`. */
+export type AcTableCell = ResourceCell;
+/** @deprecated Use `ResourceColumn`. */
+export type AcTableCol = ResourceColumn;
+/** @deprecated Use `ResourceRow`. */
+export type AcTableRow = ResourceRow;
+export interface Props {
+    /** The value to show: text, a number, a boolean, a date, a map, a list, or null for a dash. */
+    value?: unknown;
+    /** How to show it. `auto` detects booleans, numbers, ISO dates, lists and maps (a map of plain values becomes label chips). */
+    type?: CellType;
+    /** A server-side cell `{ data, link, tooltip, icon, color, isBold }` (the old `cellValue`). Its fields fill in the props of the same meaning. */
+    cell?: ResourceCell;
+    /** A server-side column `{ name, type, format, textAlign, shape }` (the old `cellDescriptor`). Fills in `type`, `title` and `align`. */
+    column?: ResourceColumn;
+    /** What the value is, e.g. the column name. Titles the JSON viewer and labels its button. */
+    title?: string;
+    /** Makes the value a link. `http(s)` links open in a new tab; paths starting with `/` use `RouterLink` when vue-router is installed. */
+    href?: string;
+    /** Turns a link template into a URL, e.g. to fill `${username}` and `${clustername}` from the current route. */
+    resolveLink?: (link: string) => string;
+    /** Status colour. Shows the value as a badge. Accepts the old Bulma names too (`is-success`, `light`, `dark`). */
+    color?: string;
+    /** Hover and focus text. Truncated values show their full text when this is empty. */
+    tooltip?: string;
+    /** URL of a 16px image before the value, e.g. a cloud provider logo. */
+    icon?: string;
+    /** Shows the value in bold heading colour, e.g. a resource name. */
+    bold?: boolean;
+    /** Shows text in the monospace font, for IDs, images and hashes. */
+    mono?: boolean;
+    /** Alignment inside a wider container. Tables align through their column instead. */
+    align?: "left" | "center" | "right";
+    /** CSS max width. Longer text is cut with an ellipsis and a tooltip shows it in full. */
+    maxWidth?: string;
+    /** How many label or list chips show before a “+N more” button. */
+    maxItems?: number;
+    /** Text after a number, e.g. `%` or ` GiB`. */
+    unit?: string;
+    /** Shows dates as “3d ago” with the exact time on hover. Turn off to show the exact time. */
+    relative?: boolean;
+    /** Shown for null, empty text, empty lists and maps, and the server's `<none>` / `<unknown>`. */
+    emptyText?: string;
+    /** Shows a placeholder bar while the value loads. */
+    loading?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    type: CellType;
+    bold: boolean;
+    title: string;
+    value: undefined;
+    icon: string;
+    color: string;
+    href: string;
+    loading: boolean;
+    align: "left" | "center" | "right";
+    maxItems: number;
+    tooltip: string;
+    column: ResourceColumn;
+    relative: boolean;
+    emptyText: string;
+    cell: ResourceCell;
+    resolveLink: (link: string) => string;
+    mono: boolean;
+    maxWidth: string;
+    unit: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,386 @@
+import e from "./AcBadge.js";
+import t from "./AcModal.js";
+import n from "./AcSkeleton.js";
+import r from "./AcTag.js";
+import i from "./AcTooltip.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as ee, createVNode as d, defineAsyncComponent as f, defineComponent as p, getCurrentInstance as te, h as ne, mergeProps as m, nextTick as re, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ie, onMounted as ae, openBlock as _, ref as v, renderList as oe, resolveDynamicComponent as y, toDisplayString as b, unref as x, watch as S, withCtx as C, withModifiers as w } from "vue";
+import { Braces as se, Check as ce, Minus as le } from "@lucide/vue";
+//#region src/lib/components/AcCellValue.vue?vue&type=script&setup=true&lang.ts
+var ue = ["src"], de = {
+	key: 1,
+	class: "text-muted"
+}, fe = ["tabindex"], pe = {
+	key: 4,
+	class: "inline-flex items-center gap-1"
+}, me = ["datetime"], he = ["datetime", "tabindex"], ge = ["aria-expanded", "aria-label"], _e = ["tabindex"], ve = ["aria-label"], T = v(Date.now()), E = 0, D;
+function ye() {
+	E++ === 0 && (D = setInterval(() => T.value = Date.now(), 3e4));
+}
+function O() {
+	--E === 0 && clearInterval(D);
+}
+var k = /* @__PURE__ */ new WeakMap(), A;
+function be(e, t) {
+	if (typeof ResizeObserver > "u") return t();
+	A ??= new ResizeObserver((e) => e.forEach((e) => k.get(e.target)?.())), k.set(e, t), A.observe(e);
+}
+function j(e) {
+	k.delete(e), A?.unobserve(e);
+}
+var M = /*@__PURE__*/ p({
+	__name: "AcCellValue",
+	props: {
+		value: { default: void 0 },
+		type: { default: "auto" },
+		cell: { default: void 0 },
+		column: { default: void 0 },
+		title: { default: "" },
+		href: { default: "" },
+		resolveLink: {
+			type: Function,
+			default: void 0
+		},
+		color: { default: "" },
+		tooltip: { default: "" },
+		icon: { default: "" },
+		bold: {
+			type: Boolean,
+			default: !1
+		},
+		mono: {
+			type: Boolean,
+			default: !1
+		},
+		align: { default: void 0 },
+		maxWidth: { default: "calc(280px * var(--ac-scale))" },
+		maxItems: { default: 3 },
+		unit: { default: "" },
+		relative: {
+			type: Boolean,
+			default: !0
+		},
+		emptyText: { default: "—" },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(p) {
+		let E = p, D = /* @__PURE__ */ new Set([
+			"",
+			"<none>",
+			"<unknown>",
+			"<nil>",
+			"null",
+			"undefined"
+		]), k = {
+			primary: "primary",
+			secondary: "secondary",
+			info: "info",
+			link: "info",
+			success: "success",
+			warning: "warning",
+			danger: "danger",
+			dark: "dark",
+			black: "dark",
+			light: "default",
+			white: "default",
+			gray: "default",
+			default: "default",
+			neutral: "default"
+		}, A = [
+			["success", /^(ready|running|succeeded|success|successful|healthy|active|available|approved|bound|completed?|current|provisioned|synced|true)$/],
+			["danger", /^(failed|failure|error|critical|notready|not ready|unhealthy|crashloopbackoff|lost|rejected|false)$/],
+			["warning", /^(pending|provisioning|progressing|updating|degraded|warning|halted|paused|terminating|waiting|suspended)$/]
+		], M = /^-?[\d.]+\s?[a-zA-Z%]{0,3}$/, xe = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/, Se = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }), Ce = new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }), N = new Intl.DateTimeFormat(void 0, {
+			dateStyle: "medium",
+			timeStyle: "long"
+		}), we = f({
+			loader: () => import("../editor/index.js").then((e) => e.AcCodeEditor),
+			loadingComponent: () => ne(n, {
+				shape: "editor",
+				height: "240px"
+			}),
+			delay: 150
+		}), P = te()?.appContext.components.RouterLink, F = v(null), I = v(!1), L = v(!1), R = v(!1), z = v(!1), B = o(() => E.cell ? E.cell.data : E.value), V = o(() => E.title || E.column?.name || ""), H = o(() => E.tooltip || E.cell?.tooltip || ""), Te = o(() => E.icon || E.cell?.icon || ""), Ee = o(() => E.bold || !!E.cell?.isBold || E.column?.format === "name"), U = o(() => E.align ?? E.column?.textAlign), W = o(() => {
+			let e = E.href || E.cell?.link || "";
+			return e && E.resolveLink ? E.resolveLink(e) : e;
+		}), De = o(() => /^https?:\/\//.test(W.value)), G = o(() => P && W.value.startsWith("/") ? P : "a"), K = o(() => W.value ? De.value ? {
+			href: W.value,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		} : G.value === "a" ? { href: W.value } : { to: W.value } : null), Oe = o(() => {
+			let e = (E.color || E.cell?.color || "").trim().split(/\s+/)[0].replace(/^is-/, "");
+			if (e) return k[e] ?? "default";
+			if (q.value !== "status") return null;
+			let t = String(B.value).trim().toLowerCase();
+			return A.find(([, e]) => e.test(t))?.[0] ?? "default";
+		}), q = o(() => {
+			let e = B.value;
+			if (Fe(e)) return "empty";
+			if (E.color || E.cell?.color) return "status";
+			if (E.type !== "auto") return E.type;
+			let t = typeof e == "object" ? void 0 : E.column?.type;
+			return t && t !== "auto" && t !== "object" ? t : typeof e == "boolean" ? "boolean" : typeof e == "number" ? "number" : Array.isArray(e) ? "array" : typeof e == "object" ? Ie(e) ? "labels" : "object" : typeof e == "string" && xe.test(e) && !Number.isNaN(Date.parse(e)) ? "date" : "string";
+		}), J = o(() => q.value === "date" ? Le(B.value) : null), Y = o(() => {
+			let e = B.value;
+			switch (q.value) {
+				case "number":
+				case "integer": {
+					let t = typeof e == "number" ? e : Number(e);
+					return Number.isNaN(t) ? `${String(e)}${E.unit}` : `${(q.value === "integer" ? Ce : Se).format(t)}${E.unit}`;
+				}
+				case "boolean": return $(e) ? "true" : "false";
+				case "date": return J.value ? E.relative ? Re(J.value, T.value) : N.format(J.value) : String(e);
+				case "object": return Be(e);
+				default: return typeof e == "object" ? JSON.stringify(e) : String(e);
+			}
+		}), X = o(() => J.value ? H.value || (E.relative ? N.format(J.value) : Re(J.value, T.value)) : H.value), ke = o(() => H.value || (I.value ? Y.value : "")), Z = o(() => {
+			let e = B.value;
+			return q.value === "labels" ? Object.entries(e).map(([e, t]) => ({
+				key: e,
+				value: String(t ?? ""),
+				text: `${e}=${t ?? ""}`
+			})) : q.value === "array" ? e.map((e) => {
+				let t = Ve(e);
+				return {
+					key: "",
+					value: t,
+					text: t
+				};
+			}) : [];
+		}), Ae = o(() => L.value ? Z.value : Z.value.slice(0, E.maxItems)), Q = o(() => Z.value.length - Math.min(Z.value.length, E.maxItems)), je = o(() => q.value === "object" || q.value === "array" && B.value.some((e) => typeof e == "object" && !!e)), Me = o(() => R.value ? JSON.stringify(B.value, null, 2) : ""), Ne = o(() => q.value === "number" || q.value === "integer" || q.value === "string" && M.test(Y.value)), Pe = o(() => q.value === "labels" ? "labels" : "items");
+		function Fe(e) {
+			return e == null ? !0 : typeof e == "string" ? D.has(e.trim()) : Array.isArray(e) ? e.length === 0 : typeof e == "object" && Object.keys(e).length === 0;
+		}
+		function Ie(e) {
+			return Object.values(e).every((e) => e === null || [
+				"string",
+				"number",
+				"boolean"
+			].includes(typeof e));
+		}
+		function $(e) {
+			return e === !0 || String(e).toLowerCase() === "true";
+		}
+		function Le(e) {
+			if (e instanceof Date) return Number.isNaN(e.getTime()) ? null : e;
+			if (typeof e == "number") return new Date(e < 0xe8d4a51000 ? e * 1e3 : e);
+			if (typeof e == "string" && /^\d+$/.test(e)) return Le(Number(e));
+			let t = typeof e == "string" ? Date.parse(e) : NaN;
+			return Number.isNaN(t) ? null : new Date(t);
+		}
+		function Re(e, t) {
+			let n = Math.round((t - e.getTime()) / 1e3), r = Math.abs(n);
+			if (r < 45) return "just now";
+			let i = [
+				[60, "m"],
+				[3600, "h"],
+				[86400, "d"],
+				[2592e3, "mo"],
+				[31536e3, "y"]
+			], a = i[0];
+			for (let e of i) r >= e[0] && (a = e);
+			let o = Math.floor(r / a[0]);
+			return n >= 0 ? `${o}${a[1]} ago` : `in ${o}${a[1]}`;
+		}
+		function ze(e) {
+			return Array.isArray(e) ? `[${e.length}]` : typeof e == "object" && e ? "{…}" : typeof e == "string" ? e : String(e);
+		}
+		function Be(e) {
+			return Object.entries(e).map(([e, t]) => `${e}: ${ze(t)}`).join(", ");
+		}
+		function Ve(e) {
+			if (typeof e != "object" || !e) return String(e);
+			let t = e, n = t.name ?? t.Name ?? Object.values(t)[0];
+			return n === void 0 || typeof n == "object" ? "{…}" : String(n);
+		}
+		function He(e) {
+			F.value = e && "$el" in e ? e.$el : e;
+		}
+		function Ue() {
+			let e = F.value;
+			I.value = !!e && e.scrollWidth > e.clientWidth + 1;
+		}
+		function We() {
+			R.value = !0, z.value = !0;
+		}
+		return S(F, (e, t) => {
+			t && j(t), e && be(e, Ue);
+		}), S(Y, () => re(Ue)), S(() => q.value === "date", (e, t) => {
+			e && !t ? ye() : !e && t && O();
+		}), ae(() => {
+			q.value === "date" && ye();
+		}), ie(() => {
+			q.value === "date" && O(), F.value && j(F.value);
+		}), (o, f) => (_(), l("span", {
+			class: h(["max-w-full min-w-0 items-center gap-1.5 align-middle", [
+				U.value ? "flex w-full" : "inline-flex",
+				U.value === "center" && "justify-center",
+				U.value === "right" && "justify-end",
+				Ee.value && "font-semibold text-heading"
+			]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-cell-value"
+		}, [p.loading ? (_(), s(n, {
+			key: 0,
+			width: "96px"
+		})) : (_(), l(a, { key: 1 }, [
+			Te.value ? (_(), l("img", {
+				key: 0,
+				src: Te.value,
+				alt: "",
+				class: "size-4 shrink-0 object-contain"
+			}, null, 8, ue)) : c("", !0),
+			q.value === "empty" ? (_(), l("span", de, b(p.emptyText), 1)) : q.value === "status" && K.value ? (_(), s(y(G.value), m({ key: 2 }, K.value, {
+				class: "inline-flex rounded-6 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				onClick: f[0] ||= w(() => {}, ["stop"])
+			}), {
+				default: C(() => [d(e, {
+					label: Y.value,
+					color: Oe.value ?? "default",
+					variant: "light",
+					rounded: p.column?.shape !== "Rectangle",
+					dot: ""
+				}, null, 8, [
+					"label",
+					"color",
+					"rounded"
+				])]),
+				_: 1
+			}, 16)) : q.value === "status" ? (_(), s(i, {
+				key: 3,
+				content: H.value
+			}, {
+				default: C(() => [u("span", {
+					tabindex: H.value ? 0 : void 0,
+					class: "inline-flex rounded-6 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+				}, [d(e, {
+					label: Y.value,
+					color: Oe.value ?? "default",
+					variant: "light",
+					rounded: p.column?.shape !== "Rectangle",
+					dot: ""
+				}, null, 8, [
+					"label",
+					"color",
+					"rounded"
+				])], 8, fe)]),
+				_: 1
+			}, 8, ["content"])) : q.value === "boolean" ? (_(), l("span", pe, [$(B.value) ? (_(), s(x(ce), {
+				key: 0,
+				class: "size-3.5 text-success",
+				"aria-hidden": "true"
+			})) : (_(), s(x(le), {
+				key: 1,
+				class: "size-3.5 text-muted",
+				"aria-hidden": "true"
+			})), u("span", { class: h(!$(B.value) && "text-muted") }, b(Y.value), 3)])) : q.value === "date" ? (_(), s(i, {
+				key: 5,
+				content: X.value
+			}, {
+				default: C(() => [K.value ? (_(), s(y(G.value), m({ key: 0 }, K.value, {
+					class: "font-medium whitespace-nowrap text-primary-20 tabular-nums underline-offset-2 hover:underline focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					onClick: f[1] ||= w(() => {}, ["stop"])
+				}), {
+					default: C(() => [u("time", { datetime: J.value?.toISOString() }, b(Y.value), 9, me)]),
+					_: 1
+				}, 16)) : (_(), l("time", {
+					key: 1,
+					datetime: J.value?.toISOString(),
+					tabindex: X.value ? 0 : void 0,
+					class: h(["whitespace-nowrap tabular-nums focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", X.value && "cursor-default decoration-border-dark decoration-dotted underline-offset-4 hover:underline"])
+				}, b(Y.value), 11, he))]),
+				_: 1
+			}, 8, ["content"])) : q.value === "labels" || q.value === "array" ? (_(), l("span", {
+				key: 6,
+				class: "flex w-max min-w-0 flex-wrap items-center gap-1",
+				style: g({ maxWidth: p.maxWidth })
+			}, [(_(!0), l(a, null, oe(Ae.value, (e, t) => (_(), s(i, {
+				key: `${e.text}-${t}`,
+				content: e.text.length > 28 && !L.value ? e.text : "",
+				class: h(!L.value && "max-w-48")
+			}, {
+				default: C(() => [e.key ? (_(), s(r, {
+					key: 0,
+					"key-label": e.key,
+					"value-label": e.value
+				}, null, 8, ["key-label", "value-label"])) : (_(), s(r, {
+					key: 1,
+					label: e.value
+				}, null, 8, ["label"]))]),
+				_: 2
+			}, 1032, ["content", "class"]))), 128)), Q.value > 0 ? (_(), l("button", {
+				key: 0,
+				type: "button",
+				class: "inline-flex h-6 shrink-0 cursor-pointer items-center rounded-6 px-1.5 text-xs font-medium whitespace-nowrap text-label transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				"aria-expanded": L.value,
+				"aria-label": L.value ? `Show fewer ${Pe.value}` : `Show ${Q.value} more ${Pe.value}`,
+				onClick: f[2] ||= w((e) => L.value = !L.value, ["stop"])
+			}, b(L.value ? "Show less" : `+${Q.value} more`), 9, ge)) : c("", !0)], 4)) : (_(), s(i, {
+				key: 7,
+				content: ke.value,
+				class: "min-w-0"
+			}, {
+				default: C(() => [K.value ? (_(), s(y(G.value), m({
+					key: 0,
+					ref: He
+				}, K.value, {
+					class: ["block truncate font-medium text-primary-20 underline-offset-2 hover:underline focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [(p.mono || q.value === "object") && "font-mono text-xs", Ne.value && "tabular-nums"]],
+					style: { maxWidth: p.maxWidth },
+					onClick: f[3] ||= w(() => {}, ["stop"])
+				}), {
+					default: C(() => [ee(b(Y.value), 1)]),
+					_: 1
+				}, 16, ["class", "style"])) : (_(), l("span", {
+					key: 1,
+					ref: He,
+					tabindex: ke.value ? 0 : void 0,
+					class: h(["block truncate focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [
+						(p.mono || q.value === "object") && "font-mono text-xs",
+						Ne.value && "tabular-nums",
+						q.value === "object" && "text-label"
+					]]),
+					style: g({ maxWidth: p.maxWidth })
+				}, b(Y.value), 15, _e))]),
+				_: 1
+			}, 8, ["content"])),
+			je.value ? (_(), s(i, {
+				key: 8,
+				content: "View as JSON"
+			}, {
+				default: C(() => [u("button", {
+					type: "button",
+					class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					"aria-label": V.value ? `View ${V.value} as JSON` : "View as JSON",
+					"aria-haspopup": "dialog",
+					onClick: w(We, ["stop"])
+				}, [d(x(se), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				})], 8, ve)]),
+				_: 1
+			})) : c("", !0),
+			R.value ? (_(), s(t, {
+				key: 9,
+				open: z.value,
+				"onUpdate:open": f[4] ||= (e) => z.value = e,
+				title: V.value || "Value",
+				size: "medium"
+			}, {
+				default: C(() => [d(x(we), {
+					"model-value": Me.value,
+					language: "json",
+					readonly: "",
+					copyable: "",
+					height: "auto",
+					"max-height": "60vh",
+					label: `${V.value || "Value"} as JSON`
+				}, null, 8, ["model-value", "label"])]),
+				_: 1
+			}, 8, ["open", "title"])) : c("", !0)
+		], 64))], 2));
+	}
+});
+//#endregion
+export { M as default };

package/dist/lib/components/AcCheckBox.js

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

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

@@ -0,0 +1,31 @@
+import type { Option } from "./types";
+export interface Props<V> {
+    /** The checkboxes to render: `{ value, label, disabled? }`. */
+    options: Option<V>[];
+    /** Native `name` shared by every checkbox. */
+    name?: string;
+    /** Error text under the group. */
+    errorMsg?: string;
+}
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T> & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: T[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,49 @@
+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";
+//#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 = [
+	"id",
+	"name",
+	"value",
+	"disabled"
+], x = {
+	key: 0,
+	class: "text-xs text-red-30"
+}, S = /*@__PURE__*/ a({
+	__name: "AcCheckBox",
+	props: /*@__PURE__*/ o({
+		options: {},
+		name: { default: "checkbox" },
+		errorMsg: { default: "" }
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	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", {
+			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,
+			type: "checkbox",
+			name: a.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,
+			"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)]));
+	}
+});
+//#endregion
+export { S as default };

package/dist/lib/components/AcCheckRadio.js

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

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

@@ -0,0 +1,35 @@
+import type { Option } from "./types";
+export interface Props<V> {
+    /** The radios to render: `{ value, label, description?, disabled? }`. */
+    options: Option<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. */
+    cards?: boolean;
+    /** Error text under the group. */
+    errorMsg?: string;
+}
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T> & {
+        modelValue?: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: T | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};