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

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

@@ -0,0 +1,84 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** What the number measures, in sentence case: "Databases", "Data RPO". Also the card's accessible name when it's a link. */
+    label: string;
+    /** The number or short text to show. Format it yourself, e.g. `"1,284"` or `"41s"`. */
+    value?: string | number;
+    /** Unit or context after the value, e.g. `GiB` or `/ 1m target`. Old `suffix`. */
+    suffix?: string;
+    /** Change since a previous period. A number is shown as a signed percentage (`12` → `+12%`); pass a string for other units, e.g. `"+19s"`. */
+    delta?: string | number;
+    /** The period `delta` compares with, e.g. "vs last week". */
+    deltaLabel?: string;
+    /** Direction of `delta`. Worked out from its sign when not set; set it for text such as "2m margin". */
+    trend?: "up" | "down" | "flat";
+    /** A rise is bad, e.g. error rate, latency or cost, so up is shown in red and down in green. */
+    invertTrend?: boolean;
+    /** Colours the value, and tints the whole card for `warning` and `danger`. Old SummaryCard item `type`. */
+    status?: "default" | "success" | "info" | "warning" | "danger";
+    /** Recent values, oldest first, drawn as a small line next to the value. About 7 to 30 points. */
+    sparkline?: number[];
+    /** Adds a bar under the value, from 0 to 100. */
+    progress?: number;
+    /** Colour of the `progress` bar. `auto` turns it warning from 80 and danger from 95. */
+    progressColor?: Tone | "auto";
+    /** A Lucide icon shown in a tinted tile at the top right. Or use the `icon` slot. */
+    icon?: Component;
+    /** `small` for dense grids and summaries (14px value); `normal` for overview rows (24px value). */
+    size?: "small" | "normal";
+    /** Label on the left and value on the right, in one compact row. Replaces the old OverviewCard. */
+    inline?: boolean;
+    /** Sets the value in Geist Mono, for IDs, timestamps and durations. */
+    mono?: boolean;
+    /** Shows a placeholder bar instead of the value while it loads. */
+    loading?: boolean;
+    /** Makes the card a `RouterLink` to this route. Needs vue-router in the app; without it a string is used as `href`. */
+    to?: string | Record<string, unknown>;
+    /** Makes the card a plain link. */
+    href?: string;
+    /** Link target for `href`, e.g. `_blank`. */
+    target?: string;
+}
+type __VLS_Slots = {
+    /** Replaces the value, e.g. a status badge or two lines of text. */
+    default?: () => unknown;
+    /** A badge or tag at the top right, e.g. "Optimal". */
+    badge?: () => unknown;
+    /** Replaces the `icon` tile. */
+    icon?: () => unknown;
+    /** A row of small text under the value, after the delta. Old StatCard `footer`. */
+    footer?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    progress: number;
+    value: string | number;
+    icon: Component;
+    target: string;
+    href: string;
+    to: string | Record<string, unknown>;
+    size: "small" | "normal";
+    status: "default" | "success" | "info" | "warning" | "danger";
+    loading: boolean;
+    inline: boolean;
+    mono: boolean;
+    suffix: string;
+    delta: string | number;
+    deltaLabel: string;
+    trend: "up" | "down" | "flat";
+    invertTrend: boolean;
+    sparkline: number[];
+    progressColor: Tone | "auto";
+}, {}, {}, {}, 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/AcStatCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,225 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, mergeProps as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useId as g, withCtx as _ } from "vue";
+import { ArrowDownRight as v, ArrowUpRight as y, Minus as b } from "@lucide/vue";
+//#region src/lib/components/AcStatCard.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-busy"], ee = {
+	key: 0,
+	class: "-mt-0.5 flex shrink-0 items-center gap-2"
+}, te = {
+	key: 0,
+	class: "inline-flex size-8 items-center justify-center rounded-8 bg-primary-95 text-primary-30 [&_svg]:size-4",
+	"aria-hidden": "true"
+}, ne = ["id"], S = {
+	key: 1,
+	class: "min-w-0"
+}, C = { class: "flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5" }, w = {
+	key: 0,
+	class: "text-base text-muted"
+}, T = ["viewBox", "aria-label"], E = ["d"], D = ["d"], O = ["cx", "cy"], k = ["aria-labelledby", "aria-valuenow"], A = {
+	key: 1,
+	class: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-muted"
+}, j = {
+	key: 0,
+	class: "inline-flex items-center gap-1"
+}, M = { class: "sr-only" }, N = { key: 0 }, P = 88, F = 28, I = /*@__PURE__*/ o({
+	__name: "AcStatCard",
+	props: {
+		label: {},
+		value: { default: "" },
+		suffix: { default: "" },
+		delta: { default: void 0 },
+		deltaLabel: { default: "" },
+		trend: { default: void 0 },
+		invertTrend: {
+			type: Boolean,
+			default: !1
+		},
+		status: { default: "default" },
+		sparkline: { default: () => [] },
+		progress: { default: void 0 },
+		progressColor: { default: "primary" },
+		icon: { default: void 0 },
+		size: { default: "normal" },
+		inline: {
+			type: Boolean,
+			default: !1
+		},
+		mono: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		to: { default: void 0 },
+		href: { default: void 0 },
+		target: { default: void 0 }
+	},
+	emits: ["click"],
+	setup(o, { emit: I }) {
+		let L = o, R = I, z = {
+			default: {
+				card: "border-border bg-surface",
+				value: "text-heading",
+				label: "text-muted"
+			},
+			success: {
+				card: "border-border bg-surface",
+				value: "text-green-30",
+				label: "text-muted"
+			},
+			info: {
+				card: "border-border bg-surface",
+				value: "text-blue-30",
+				label: "text-muted"
+			},
+			warning: {
+				card: "border-yellow-80 bg-yellow-97",
+				value: "text-yellow-20",
+				label: "text-yellow-20"
+			},
+			danger: {
+				card: "border-red-80 bg-red-97",
+				value: "text-red-30",
+				label: "text-red-30"
+			}
+		}, B = {
+			primary: "bg-primary",
+			info: "bg-info",
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger"
+		}, V = s(), H = V?.appContext.components.RouterLink, U = g(), W = e(() => z[L.status]), G = e(() => {
+			if (L.trend) return L.trend;
+			if (L.delta === void 0 || L.delta === "") return;
+			if (typeof L.delta == "number") return L.delta > 0 ? "up" : L.delta < 0 ? "down" : "flat";
+			let e = L.delta.trim()[0];
+			return e === "+" ? "up" : e === "-" || e === "−" ? "down" : "flat";
+		}), K = e(() => typeof L.delta == "number" ? `${L.delta > 0 ? "+" : L.delta < 0 ? "−" : ""}${Math.abs(L.delta).toLocaleString(void 0, { maximumFractionDigits: 1 })}%` : L.delta ?? ""), q = e(() => G.value === "flat" || !G.value ? "text-muted" : G.value === "up" === L.invertTrend ? "text-red-30" : "text-green-30"), J = e(() => !!G.value && K.value !== ""), Y = e(() => Math.min(100, Math.max(0, L.progress ?? 0))), X = e(() => L.progressColor === "auto" ? Y.value >= 95 ? B.danger : Y.value >= 80 ? B.warning : B.primary : B[L.progressColor]), re = e(() => G.value === "up" ? y : G.value === "down" ? v : b), Z = e(() => {
+			let e = L.sparkline.filter((e) => Number.isFinite(e));
+			if (e.length < 2) return null;
+			let t = Math.min(...e), n = Math.max(...e), r = n - t || 1, i = e.map((n, i) => [i / (e.length - 1) * 82 + 3, 25 - (n - t) / r * 22]), a = i.map(([e, t], n) => `${n ? "L" : "M"}${e.toFixed(1)} ${t.toFixed(1)}`).join(" "), o = i[i.length - 1], s = (e) => e.toLocaleString(), c = `Trend over ${e.length} points: from ${s(e[0])} to ${s(e[e.length - 1])}, low ${s(t)}, high ${s(n)}`;
+			return {
+				line: a,
+				area: `${a} L${o[0].toFixed(1)} ${F} L3 ${F} Z`,
+				last: o,
+				summary: c
+			};
+		}), ie = e(() => L.inline || L.size === "small" ? "text-lg font-semibold" : "text-3xl font-semibold"), Q = e(() => {
+			if (L.to !== void 0 && H) return {
+				is: H,
+				to: L.to
+			};
+			let e = L.href ?? (typeof L.to == "string" ? L.to : void 0);
+			return e ? {
+				is: "a",
+				href: e,
+				target: L.target,
+				rel: L.target === "_blank" ? "noopener noreferrer" : void 0
+			} : null;
+		});
+		function $() {
+			return !Q.value && !!V?.vnode.props?.onClick;
+		}
+		function ae(e) {
+			R("click", e);
+		}
+		return (e, s) => (d(), r("div", {
+			class: l(["relative flex min-w-0 rounded-10 border shadow-xs transition-[border-color,box-shadow] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", [
+				W.value.card,
+				o.inline ? "items-center justify-between gap-3 px-4 py-2.5" : "flex-col gap-2",
+				!o.inline && (o.size === "small" ? "px-3.5 py-3" : "p-4"),
+				(Q.value || $()) && "hover:border-border-dark hover:shadow-sm"
+			]]),
+			"aria-busy": o.loading || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-stat-card"
+		}, [
+			i("div", { class: l(["flex min-w-0 items-start justify-between gap-2", o.inline && "flex-1"]) }, [(d(), t(p(Q.value ? Q.value.is : $() ? "button" : "p"), c(Q.value ? {
+				...Q.value,
+				is: void 0
+			} : {}, {
+				id: `${h(U)}-label`,
+				type: $() ? "button" : void 0,
+				"aria-describedby": Q.value || $() ? `${h(U)}-value` : void 0,
+				"data-ac-card-link": Q.value || $() ? "" : void 0,
+				class: ["min-w-0 truncate text-left font-medium outline-none after:absolute after:inset-0 after:rounded-10", [
+					o.inline ? "text-base text-body" : o.size === "small" ? "text-sm tracking-wide uppercase" : "text-xs",
+					!o.inline && W.value.label,
+					(Q.value || $()) && "cursor-pointer"
+				]],
+				onClick: s[0] ||= (e) => Q.value || $() ? ae(e) : void 0
+			}), {
+				default: _(() => [a(m(o.label), 1)]),
+				_: 1
+			}, 16, [
+				"id",
+				"type",
+				"aria-describedby",
+				"data-ac-card-link",
+				"class"
+			])), !o.inline && (e.$slots.badge || e.$slots.icon || o.icon) ? (d(), r("div", ee, [f(e.$slots, "badge"), e.$slots.icon || o.icon ? (d(), r("span", te, [f(e.$slots, "icon", {}, () => [(d(), t(p(o.icon)))])])) : n("", !0)])) : n("", !0)], 2),
+			i("div", {
+				id: `${h(U)}-value`,
+				class: l(["flex min-w-0 items-end justify-between gap-3", o.inline ? "shrink-0" : "flex-1"])
+			}, [o.loading ? (d(), r("span", {
+				key: 0,
+				class: l(["ac-skeleton-bone block rounded-4", o.inline ? "h-4 w-12" : o.size === "small" ? "h-4 w-2/5" : "mt-1 h-6 w-1/2"])
+			}, null, 2)) : (d(), r("div", S, [f(e.$slots, "default", {}, () => [i("p", C, [i("span", { class: l(["min-w-0 break-words", [
+				ie.value,
+				W.value.value,
+				o.mono && "font-mono tracking-tight"
+			]]) }, m(o.value), 3), o.suffix ? (d(), r("span", w, m(o.suffix), 1)) : n("", !0)])])])), Z.value && !o.inline && !o.loading ? (d(), r("svg", {
+				key: 2,
+				width: P,
+				height: F,
+				viewBox: `0 0 ${P} ${F}`,
+				class: "mb-1 shrink-0 overflow-visible",
+				role: "img",
+				"aria-label": Z.value.summary
+			}, [
+				i("path", {
+					d: Z.value.area,
+					class: "fill-primary-97"
+				}, null, 8, E),
+				i("path", {
+					d: Z.value.line,
+					fill: "none",
+					class: "stroke-slate-60",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				}, null, 8, D),
+				i("circle", {
+					cx: Z.value.last[0],
+					cy: Z.value.last[1],
+					r: "3",
+					class: "fill-primary stroke-surface",
+					"stroke-width": "1.5"
+				}, null, 8, O)
+			], 8, T)) : n("", !0)], 10, ne),
+			o.progress !== void 0 && !o.inline ? (d(), r("div", {
+				key: 0,
+				role: "progressbar",
+				"aria-labelledby": `${h(U)}-label`,
+				"aria-valuemin": "0",
+				"aria-valuemax": "100",
+				"aria-valuenow": Math.round(Y.value),
+				class: "h-1 w-full overflow-hidden rounded-full bg-slate-90"
+			}, [i("div", {
+				class: l(["h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none", X.value]),
+				style: u({ width: `${Y.value}%` })
+			}, null, 6)], 8, k)) : n("", !0),
+			!o.inline && (J.value || e.$slots.footer) ? (d(), r("div", A, [J.value ? (d(), r("span", j, [i("span", { class: l(["inline-flex items-center gap-0.5 font-medium", q.value]) }, [
+				(d(), t(p(re.value), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				})),
+				i("span", M, m(G.value === "up" ? "Up" : G.value === "down" ? "Down" : "No change"), 1),
+				a(" " + m(K.value), 1)
+			], 2), o.deltaLabel ? (d(), r("span", N, m(o.deltaLabel), 1)) : n("", !0)])) : n("", !0), f(e.$slots, "footer")])) : n("", !0)
+		], 10, x));
+	}
+});
+//#endregion
+export { I as default };

package/dist/lib/components/AcStatusBar.js

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

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

@@ -0,0 +1,66 @@
+import type { Component } from "vue";
+export type StatusBarStatus = "success" | "warning" | "danger" | "info" | "pending" | "neutral";
+export interface StatusBarItem {
+    /** Unique key; falls back to the label. */
+    key?: string;
+    /** The name, e.g. `"Version"`. Shown muted before `value`, or on its own for a status such as `"TLS"`. */
+    label?: string;
+    /** The value, e.g. `"6.0.12"`. */
+    value?: string | number;
+    /** A Lucide icon component before the text. */
+    icon?: Component;
+    /** Colours the icon and picks a default one: check, warning, cross, info, spinner (`pending`) or minus. */
+    status?: StatusBarStatus;
+    /** Shows a status dot instead of an icon, e.g. for the connection. `pending` pulses. */
+    dot?: boolean;
+    /** A 0–100 usage meter after the text. It turns yellow at 75 and red at 90 unless `status` is set. */
+    meter?: number;
+    /** Which end of the bar the item sits at. */
+    align?: "left" | "right";
+    /** On narrow bars, `low` items hide first (under 768px), then `normal` ones (under 512px). `high` items always show. */
+    priority?: "high" | "normal" | "low";
+    /** Sets the value in the monospace font, for versions, names and IDs. */
+    mono?: boolean;
+    /** Shows only the icon; the label becomes the accessible name and hover title. */
+    iconOnly?: boolean;
+    /** Hover text. */
+    title?: string;
+    /** Route for `RouterLink` (needs vue-router in the app). */
+    to?: string | Record<string, unknown>;
+    /** Plain link. */
+    href?: string;
+    /** Makes the item a button. */
+    onClick?: (e: MouseEvent) => void;
+    /** Greys out an item that's a link or button. */
+    disabled?: boolean;
+}
+export interface Props {
+    /** The items: `{ label?, value?, icon?, status?, dot?, meter?, align?, priority?, mono?, iconOnly?, to?, href?, onClick? }`. */
+    items?: StatusBarItem[];
+    /** Accessible name of the bar. */
+    label?: string;
+    /** Dark bar on `bg-sidebar` in both themes, like the old footer. Everything inside uses the dark tokens. */
+    dark?: boolean;
+    /** Sticks the bar to the bottom of its scroll area. */
+    sticky?: boolean;
+}
+type __VLS_Slots = {
+    /** Extra content at the left end, after the left items. */
+    left?: () => unknown;
+    /** Extra content at the right end, after the right items: a badge or small buttons. */
+    right?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    dark: boolean;
+    items: StatusBarItem[];
+    sticky: boolean;
+}, {}, {}, {}, 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/AcStatusBar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,145 @@
+import e from "./AcSpinner.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, getCurrentInstance as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, withCtx as _ } from "vue";
+import { CircleCheck as v, CircleMinus as y, CircleX as b, Info as x, TriangleAlert as S } from "@lucide/vue";
+//#region src/lib/components/AcStatusBar.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-label"], w = { class: "flex h-7 items-center justify-between gap-4 px-2 @lg:px-3" }, T = {
+	key: 0,
+	class: "flex h-6 min-w-0 flex-wrap items-center gap-x-1 overflow-hidden @lg:gap-x-2",
+	role: "list"
+}, E = {
+	key: 0,
+	class: "relative inline-flex size-2 shrink-0",
+	"aria-hidden": "true"
+}, D = ["aria-valuenow", "aria-label"], O = /*@__PURE__*/ s({
+	__name: "AcStatusBar",
+	props: {
+		items: { default: () => [] },
+		label: { default: "Status bar" },
+		dark: {
+			type: Boolean,
+			default: !1
+		},
+		sticky: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(s) {
+		let O = s, k = {
+			success: v,
+			warning: S,
+			danger: b,
+			info: x,
+			neutral: y
+		}, A = {
+			success: "text-success",
+			warning: "text-warning",
+			danger: "text-danger",
+			info: "text-info",
+			pending: "text-muted",
+			neutral: "text-muted"
+		}, j = {
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger",
+			info: "bg-info",
+			pending: "bg-warning",
+			neutral: "bg-slate-60"
+		}, M = {
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger",
+			info: "bg-info",
+			pending: "bg-slate-60",
+			neutral: "bg-slate-60"
+		}, N = {
+			high: "",
+			normal: "@max-lg:hidden",
+			low: "@max-3xl:hidden"
+		}, P = c()?.appContext.components.RouterLink, F = n(() => O.items.filter((e) => e.align !== "right")), I = n(() => O.items.filter((e) => e.align === "right"));
+		function L(e, t) {
+			return e.key ?? `${e.label ?? ""}-${t}`;
+		}
+		function R(e) {
+			return e.to !== void 0 && P && !e.disabled ? P : e.href || typeof e.to == "string" ? "a" : e.onClick ? "button" : "span";
+		}
+		function z(e) {
+			return R(e) !== "span";
+		}
+		function B(e) {
+			let t = R(e), n = {
+				title: e.title ?? (e.iconOnly ? e.label : void 0),
+				"aria-label": e.iconOnly ? e.label : void 0
+			};
+			return t === P ? n.to = e.to : t === "a" ? e.disabled ? (n.role = "link", n["aria-disabled"] = "true") : n.href = e.href ?? e.to : t === "button" && (n.type = "button", n.disabled = e.disabled || void 0), n;
+		}
+		function V(e, t) {
+			if (e.disabled) {
+				t.preventDefault();
+				return;
+			}
+			e.onClick?.(t);
+		}
+		function H(e) {
+			if (e.status) return M[e.status];
+			let t = e.meter ?? 0;
+			return t >= 90 ? "bg-danger" : t >= 75 ? "bg-warning" : "bg-primary";
+		}
+		function U(e) {
+			return Math.min(100, Math.max(0, e));
+		}
+		return (n, c) => (f(), a("footer", {
+			"aria-label": s.label,
+			class: u(["@container z-10 w-full border-t", [s.dark ? "dark border-border-light bg-sidebar text-body" : "border-border-light bg-surface-muted text-body", s.sticky && "sticky bottom-0"]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-status-bar"
+		}, [o("div", w, [(f(), a(t, null, p(["left", "right"], (s) => o("div", {
+			key: s,
+			class: u(["flex min-w-0 items-center gap-1", s === "left" ? "flex-1" : "shrink-0"])
+		}, [(s === "left" ? F.value : I.value).length ? (f(), a("ul", T, [(f(!0), a(t, null, p(s === "left" ? F.value : I.value, (n, s) => (f(), a("li", {
+			key: L(n, s),
+			class: u(["flex min-w-0 shrink-0 items-center", N[n.priority ?? "normal"]])
+		}, [(f(), r(h(R(n)), l({ ref_for: !0 }, B(n), {
+			class: ["inline-flex h-6 min-w-0 items-center gap-1.5 rounded-4 px-1.5 text-xs whitespace-nowrap no-underline", z(n) && (n.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring")],
+			onClick: (e) => z(n) && V(n, e)
+		}), {
+			default: _(() => [
+				n.dot ? (f(), a("span", E, [n.status === "pending" ? (f(), a("span", {
+					key: 0,
+					class: u(["absolute inset-0 rounded-full opacity-60 motion-safe:animate-ping", j.pending])
+				}, null, 2)) : i("", !0), o("span", { class: u(["relative size-2 rounded-full", j[n.status ?? "neutral"]]) }, null, 2)])) : n.status === "pending" && !n.icon ? (f(), r(e, {
+					key: 1,
+					size: "xs",
+					label: "",
+					class: "text-muted"
+				})) : n.icon || n.status ? (f(), r(h(n.icon ?? k[n.status]), {
+					key: 2,
+					class: u(["size-3.5 shrink-0", n.status ? A[n.status] : "text-muted"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : i("", !0),
+				n.iconOnly ? i("", !0) : (f(), a(t, { key: 3 }, [n.label ? (f(), a("span", {
+					key: 0,
+					class: u(["shrink-0", n.value === void 0 ? "font-medium text-body" : "text-muted"])
+				}, g(n.label), 3)) : i("", !0), n.value === void 0 ? i("", !0) : (f(), a("span", {
+					key: 1,
+					class: u(["max-w-48 truncate font-medium text-heading", n.mono && "font-mono text-[length:calc(11.5px*var(--ac-scale))]"])
+				}, g(n.value), 3))], 64)),
+				n.meter === void 0 ? i("", !0) : (f(), a("span", {
+					key: 4,
+					role: "meter",
+					"aria-valuenow": U(n.meter),
+					"aria-valuemin": "0",
+					"aria-valuemax": "100",
+					"aria-label": n.label ? `${n.label} usage` : "Usage",
+					class: "h-1.5 w-8 shrink-0 overflow-hidden rounded-full bg-slate-80"
+				}, [o("span", {
+					class: u(["block h-full rounded-full", H(n)]),
+					style: d({ width: `${U(n.meter)}%` })
+				}, null, 6)], 8, D))
+			]),
+			_: 2
+		}, 1040, ["class", "onClick"]))], 2))), 128))])) : i("", !0), m(n.$slots, s)], 2)), 64))])], 10, C));
+	}
+});
+//#endregion
+export { O as default };

package/dist/lib/components/AcSteps.js

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

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

@@ -0,0 +1,28 @@
+export interface SubStep {
+    /** Unique across all steps, e.g. `"credentials"` or `3`. */
+    id: number | string;
+    title: string;
+}
+export interface Step {
+    id: number;
+    title: string;
+    description?: string;
+    /** Smaller steps inside this one. Only the current step lists them, and only with `orientation="vertical"`. */
+    substeps?: SubStep[];
+}
+export interface Props {
+    /** The steps: `{ id, title, description? }`, with ids 1…n in order. */
+    options: Step[];
+    /** Id of the current step. Lower ids show a check mark. */
+    active: number;
+    /** `horizontal` fits a wizard's header. `vertical` fits a side panel and can list `substeps`. */
+    orientation?: "horizontal" | "vertical";
+    /** With `orientation="vertical"`, the id of the current sub-step of the current step. Earlier sub-steps show a check mark. */
+    activeSubstep?: number | string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    activeSubstep: number | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,91 @@
+import { Fragment as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, renderList as c, toDisplayString as l, unref as u } from "vue";
+import { Check as d } from "@lucide/vue";
+//#region src/lib/components/AcSteps.vue?vue&type=script&setup=true&lang.ts
+var f = {
+	key: 0,
+	class: "flex w-full",
+	"data-ac-ds": "",
+	"data-testid": "ac-steps"
+}, p = ["aria-current"], m = { key: 1 }, h = {
+	key: 1,
+	class: "flex w-full flex-col",
+	"data-ac-ds": "",
+	"data-testid": "ac-steps"
+}, g = ["aria-current"], _ = { key: 1 }, v = { class: "min-w-0 flex-1 pt-1" }, y = {
+	key: 1,
+	class: "mt-2 space-y-0.5 border-l border-dashed border-border-dark pl-3",
+	"data-testid": "ac-steps-substeps"
+}, b = ["aria-current"], x = {
+	key: 1,
+	class: "size-1.5 rounded-full bg-primary"
+}, S = /*@__PURE__*/ a({
+	__name: "AcSteps",
+	props: {
+		options: {},
+		active: {},
+		orientation: { default: "horizontal" },
+		activeSubstep: { default: void 0 }
+	},
+	setup(a) {
+		let S = a, C = (e) => S.activeSubstep === void 0 ? -1 : (e.substeps ?? []).findIndex((e) => e.id === S.activeSubstep);
+		return (S, w) => a.orientation === "horizontal" ? (s(), r("ol", f, [(s(!0), r(e, null, c(a.options, (e, c) => (s(), r("li", {
+			key: e.id,
+			class: "relative flex flex-1 flex-col items-center px-2 text-center",
+			"aria-current": a.active === e.id ? "step" : void 0
+		}, [
+			c < a.options.length - 1 ? (s(), r("span", {
+				key: 0,
+				class: o(["absolute top-3.5 left-[calc(50%+22px)] h-0.5 w-[calc(100%-44px)] -translate-y-1/2 rounded-full transition-colors duration-300", a.active > e.id ? "bg-primary" : "bg-border"]),
+				"aria-hidden": "true"
+			}, null, 2)) : n("", !0),
+			i("span", { class: o(["relative inline-flex size-7 items-center justify-center rounded-full text-xs font-semibold tabular-nums transition-all duration-200", a.active > e.id ? "bg-primary text-white shadow-button" : a.active === e.id ? "bg-surface text-primary-20 ring-2 ring-primary shadow-[0_0_0_5px_var(--color-ring)]" : "bg-surface text-muted ring-1 ring-border-dark"]) }, [a.active > e.id ? (s(), t(u(d), {
+				key: 0,
+				class: "size-3.5",
+				"stroke-width": 2.5,
+				"aria-hidden": "true"
+			})) : (s(), r("span", m, l(e.id), 1))], 2),
+			i("p", { class: o(["mt-3 text-base font-medium", a.active >= e.id ? "text-heading" : "text-muted"]) }, l(e.title), 3),
+			e.description ? (s(), r("p", {
+				key: 1,
+				class: o(["mt-0.5 text-xs", a.active >= e.id ? "text-label" : "text-muted"])
+			}, l(e.description), 3)) : n("", !0)
+		], 8, p))), 128))])) : (s(), r("ol", h, [(s(!0), r(e, null, c(a.options, (f, p) => (s(), r("li", {
+			key: f.id,
+			class: "relative flex gap-3 pb-6 last:pb-0",
+			"aria-current": a.active === f.id ? "step" : void 0
+		}, [
+			p < a.options.length - 1 ? (s(), r("span", {
+				key: 0,
+				class: o(["absolute top-9 bottom-1 left-3.5 w-0.5 -translate-x-1/2 rounded-full transition-colors duration-300", a.active > f.id ? "bg-primary" : "bg-border"]),
+				"aria-hidden": "true"
+			}, null, 2)) : n("", !0),
+			i("span", { class: o(["relative inline-flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums transition-all duration-200", a.active > f.id ? "bg-primary text-white shadow-button" : a.active === f.id ? "bg-surface text-primary-20 ring-2 ring-primary shadow-[0_0_0_5px_var(--color-ring)]" : "bg-surface text-muted ring-1 ring-border-dark"]) }, [a.active > f.id ? (s(), t(u(d), {
+				key: 0,
+				class: "size-3.5",
+				"stroke-width": 2.5,
+				"aria-hidden": "true"
+			})) : (s(), r("span", _, l(f.id), 1))], 2),
+			i("div", v, [
+				i("p", { class: o(["text-base font-medium", a.active >= f.id ? "text-heading" : "text-muted"]) }, l(f.title), 3),
+				f.description ? (s(), r("p", {
+					key: 0,
+					class: o(["mt-0.5 text-xs", a.active >= f.id ? "text-label" : "text-muted"])
+				}, l(f.description), 3)) : n("", !0),
+				f.substeps?.length && a.active === f.id ? (s(), r("ul", y, [(s(!0), r(e, null, c(f.substeps, (e, c) => (s(), r("li", {
+					key: e.id,
+					class: "flex items-center gap-2 py-1",
+					"aria-current": e.id === a.activeSubstep ? "step" : void 0
+				}, [i("span", {
+					class: o(["inline-flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-200", c < C(f) ? "bg-primary text-white" : c === C(f) ? "bg-surface text-primary ring-2 ring-primary" : "bg-surface text-muted ring-1 ring-border-dark"]),
+					"aria-hidden": "true"
+				}, [c < C(f) ? (s(), t(u(d), {
+					key: 0,
+					class: "size-3",
+					"stroke-width": 3
+				})) : c === C(f) ? (s(), r("span", x)) : n("", !0)], 2), i("span", { class: o(["min-w-0 truncate text-base", c < C(f) ? "text-label" : c === C(f) ? "font-medium text-heading" : "text-muted"]) }, l(e.title), 3)], 8, b))), 128))])) : n("", !0)
+			])
+		], 8, g))), 128))]));
+	}
+});
+//#endregion
+export { S as default };

package/dist/lib/components/AcSwitch.js

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