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

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

@@ -0,0 +1,142 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderList as l, toDisplayString as u } from "vue";
+//#region src/lib/components/AcSkeleton.vue?vue&type=script&setup=true&lang.ts
+var d = ["aria-busy", "aria-hidden"], f = {
+	key: 2,
+	class: "flex flex-col gap-2",
+	"aria-hidden": "true"
+}, p = {
+	key: 3,
+	class: "w-full",
+	"aria-hidden": "true"
+}, m = { class: "flex h-9 items-center gap-4 border-b border-border px-4" }, h = {
+	key: 4,
+	class: "flex size-full overflow-hidden rounded-10 border border-border bg-surface shadow-xs",
+	"aria-hidden": "true"
+}, g = { class: "flex w-11 shrink-0 flex-col items-end gap-2 border-r border-border-light bg-surface-muted px-2.5 py-3" }, _ = { class: "flex min-w-0 flex-1 flex-col gap-2 px-3 py-3" }, v = {
+	key: 5,
+	class: "rounded-10 border border-border bg-surface p-5 shadow-xs",
+	"aria-hidden": "true"
+}, y = { class: "mt-5 flex flex-col gap-2" }, b = {
+	key: 6,
+	class: "rounded-10 border border-border bg-surface p-4 shadow-xs",
+	"aria-hidden": "true"
+}, x = { class: "flex items-center gap-3" }, S = { class: "min-w-0 flex-1" }, C = { class: "mt-4 grid grid-cols-2 gap-x-4 gap-y-2.5 border-t border-border-light pt-4" }, w = {
+	key: 7,
+	class: "sr-only"
+}, T = "ac-skeleton-bone block rounded-4", E = /*@__PURE__*/ a({
+	__name: "AcSkeleton",
+	props: {
+		shape: { default: "text" },
+		lines: { default: 1 },
+		rows: { default: 5 },
+		cols: { default: 4 },
+		width: { default: "" },
+		height: { default: "" },
+		label: { default: "Loading" }
+	},
+	setup(a) {
+		let E = a, D = [
+			"70%",
+			"45%",
+			"60%",
+			"35%",
+			"55%",
+			"40%"
+		], O = [
+			[0, 30],
+			[1, 40],
+			[1, 25],
+			[2, 45],
+			[2, 35],
+			[1, 30],
+			[0, 20],
+			[1, 50],
+			[1, 35],
+			[2, 40],
+			[2, 30],
+			[0, 25],
+			[1, 45],
+			[1, 30],
+			[2, 50],
+			[0, 35]
+		], k = t(() => {
+			if (E.shape === "circle") {
+				let e = E.height || E.width || "40px";
+				return {
+					width: e,
+					height: e
+				};
+			}
+			return E.shape === "rect" ? {
+				width: E.width || "100%",
+				height: E.height || "80px"
+			} : E.shape === "editor" ? {
+				width: E.width || void 0,
+				height: E.height || "320px"
+			} : E.width ? { width: E.width } : void 0;
+		}), A = t(() => E.height || "12px"), j = t(() => {
+			let e = Math.max(1, E.lines);
+			return Array.from({ length: e }, (t, n) => e > 1 && n === e - 1 ? "60%" : "100%");
+		});
+		return (t, E) => (c(), r("div", {
+			"aria-busy": a.label ? "true" : void 0,
+			"aria-hidden": !a.label || void 0,
+			class: o(["max-w-full", a.shape === "circle" ? "shrink-0" : !k.value?.width && "w-full"]),
+			style: s(k.value),
+			"data-ac-ds": "",
+			"data-testid": "ac-skeleton"
+		}, [a.shape === "circle" ? (c(), r("span", {
+			key: 0,
+			class: o([T, "size-full rounded-full"]),
+			"aria-hidden": "true"
+		})) : a.shape === "rect" ? (c(), r("span", {
+			key: 1,
+			class: o([T, "size-full rounded-6"]),
+			"aria-hidden": "true"
+		})) : a.shape === "text" ? (c(), r("div", f, [(c(!0), r(e, null, l(j.value, (e, t) => (c(), r("span", {
+			key: t,
+			class: o(T),
+			style: s({
+				width: e,
+				height: A.value
+			})
+		}, null, 4))), 128))])) : a.shape === "table" ? (c(), r("div", p, [i("div", m, [(c(!0), r(e, null, l(a.cols, (e) => (c(), r("span", {
+			key: e,
+			class: "flex-1"
+		}, [i("span", { class: o([T, "h-2.5 w-1/2 opacity-70"]) })]))), 128))]), (c(!0), r(e, null, l(a.rows, (t) => (c(), r("div", {
+			key: t,
+			class: "flex h-12 items-center gap-4 border-b border-border-light px-4 last:border-0"
+		}, [(c(!0), r(e, null, l(a.cols, (e) => (c(), r("span", {
+			key: e,
+			class: "flex-1"
+		}, [i("span", {
+			class: o([T, "h-3"]),
+			style: s({ width: D[(t + e) % D.length] })
+		}, null, 4)]))), 128))]))), 128))])) : a.shape === "editor" ? (c(), r("div", h, [i("div", g, [(c(), r(e, null, l(O, (e, t) => i("span", {
+			key: t,
+			class: o([T, "h-2 w-3 shrink-0 opacity-60"])
+		})), 64))]), i("div", _, [(c(), r(e, null, l(O, ([e, t], n) => i("span", {
+			key: n,
+			class: o([T, "h-2 shrink-0"]),
+			style: s({
+				marginLeft: `${e * 16}px`,
+				width: `${t}%`
+			})
+		}, null, 4)), 64))])])) : a.shape === "card" ? (c(), r("div", v, [
+			i("span", { class: o([T, "h-4 w-2/5"]) }),
+			i("span", { class: o([T, "mt-2 h-3 w-1/4"]) }),
+			i("div", y, [
+				i("span", { class: o([T, "h-3 w-full"]) }),
+				i("span", { class: o([T, "h-3 w-full"]) }),
+				i("span", { class: o([T, "h-3 w-3/5"]) })
+			])
+		])) : (c(), r("div", b, [i("div", x, [i("span", { class: o([T, "size-10 shrink-0 rounded-8"]) }), i("div", S, [i("span", { class: o([T, "h-3.5 w-1/2"]) }), i("span", { class: o([T, "mt-2 h-2.5 w-1/3"]) })])]), i("div", C, [
+			i("span", { class: o([T, "h-2.5 w-3/5"]) }),
+			i("span", { class: o([T, "h-2.5 w-2/5 justify-self-end"]) }),
+			i("span", { class: o([T, "h-2.5 w-1/2"]) }),
+			i("span", { class: o([T, "h-2.5 w-1/3 justify-self-end"]) })
+		])])), a.label ? (c(), r("span", w, u(a.label), 1)) : n("", !0)], 14, d));
+	}
+});
+//#endregion
+export { E as default };

package/dist/lib/components/AcSlider.js

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

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

@@ -0,0 +1,72 @@
+export interface SliderMark {
+    /** Where the mark sits, between `min` and `max`. */
+    value: number;
+    /** Text under the mark. Defaults to the value with its unit. */
+    label?: string;
+}
+export interface Props {
+    /** Label above the slider. It also names the thumbs for screen readers, so set it even when the context seems obvious. */
+    label?: string;
+    /** A second line under the label, like the old `subtitle`: what the value controls. */
+    description?: string;
+    /** Smallest value. */
+    min?: number;
+    /** Largest value. */
+    max?: number;
+    /** Distance between allowed values. Decimals such as `0.5` work. */
+    step?: number;
+    /** Two thumbs; `v-model` becomes `[from, to]`. The thumbs can meet but not cross. */
+    range?: boolean;
+    /** Ticks with labels under the track. Pass numbers, or `{ value, label }` for custom text. Clicking a label jumps there. */
+    marks?: (number | SliderMark)[];
+    /** Unit shown after every value, e.g. `%` or `GiB`. Words get a space before them; symbols don't. */
+    unit?: string;
+    /** Formats a value for the bubble, marks, header and `aria-valuetext`. Overrides `unit`. */
+    formatValue?: (value: number) => string;
+    /** Adds a number input for typing an exact value (two for `range`). */
+    showInput?: boolean;
+    /** Value bubble over the thumb: `auto` on hover, focus and drag; `always`; or `never`. */
+    tooltip?: "auto" | "always" | "never";
+    /** Disables the slider and its inputs. */
+    disabled?: boolean;
+    /** Adds a red asterisk to the label. */
+    required?: boolean;
+    /** Error text under the slider. Turns the track red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Helper text under the slider (hidden while `errorMsg` is set). */
+    hint?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The value: a number, or `[from, to]` with `range`. Out-of-range values are shown clamped. */
+    modelValue?: number | [number, number] | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the first thumb. */
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | [number, number] | null) => any;
+    change: (value: number | [number, number]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | [number, number] | null) => any) | undefined;
+    onChange?: ((value: number | [number, number]) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    description: string;
+    disabled: boolean;
+    max: number;
+    min: number;
+    step: number;
+    tooltip: "auto" | "always" | "never";
+    hint: string;
+    range: boolean;
+    errorMsg: string;
+    unit: string;
+    marks: (number | SliderMark)[];
+    formatValue: (value: number) => string;
+    showInput: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,327 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h, useId as g, useModel as ee } from "vue";
+import { CircleAlert as te } from "@lucide/vue";
+//#region src/lib/components/AcSlider.vue?vue&type=script&setup=true&lang.ts
+var ne = {
+	key: 0,
+	class: "mb-2 flex items-start justify-between gap-3"
+}, _ = { class: "min-w-0" }, v = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, y = {
+	key: 1,
+	class: "mt-0.5 text-xs text-muted"
+}, b = {
+	key: 0,
+	class: "shrink-0 text-base font-medium text-heading tabular-nums",
+	"aria-hidden": "true"
+}, x = {
+	key: 1,
+	class: "mb-2 text-right text-base font-medium text-heading tabular-nums",
+	"aria-hidden": "true"
+}, re = [
+	"value",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"aria-label",
+	"aria-invalid"
+], ie = { class: "relative min-w-0 flex-1" }, ae = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-labelledby",
+	"aria-label",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-invalid",
+	"aria-required",
+	"onKeydown"
+], oe = {
+	key: 0,
+	class: "absolute inset-x-0 top-full mt-1 h-4",
+	"aria-hidden": "true"
+}, se = ["onClick"], ce = {
+	key: 1,
+	class: "relative shrink-0"
+}, S = [
+	"value",
+	"min",
+	"max",
+	"step",
+	"disabled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby"
+], C = {
+	key: 0,
+	class: "pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 text-xs text-muted",
+	"aria-hidden": "true"
+}, w = "h-9 rounded-6 border bg-surface px-2.5 text-base text-heading tabular-nums shadow-xs transition-[border-color,box-shadow] outline-none [appearance:textfield] disabled:cursor-not-allowed disabled:bg-surface-muted [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", T = /*@__PURE__*/ s({
+	__name: "AcSlider",
+	props: /*@__PURE__*/ c({
+		label: { default: "" },
+		description: { default: "" },
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		range: {
+			type: Boolean,
+			default: !1
+		},
+		marks: { default: () => [] },
+		unit: { default: "" },
+		formatValue: {
+			type: Function,
+			default: void 0
+		},
+		showInput: {
+			type: Boolean,
+			default: !1
+		},
+		tooltip: { default: "auto" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change"], ["update:modelValue"]),
+	setup(s, { expose: c, emit: T }) {
+		let E = s, D = ee(s, "modelValue"), O = T, k = g(), A = `${k}-label`, j = `${k}-msg`, M = f(null), N = f([]), P = f(null), F = t(() => Math.max(E.max - E.min, 2 ** -52)), I = t(() => Math.max(H(E.step), H(E.min))), L = t(() => Math.max(E.step, Math.round(F.value / 10 / E.step) * E.step)), R = t(() => {
+			let e = D.value;
+			if (E.range) {
+				let [t, n] = Array.isArray(e) ? e : [E.min, E.max];
+				return [U(Math.min(t, n)), U(Math.max(t, n))];
+			}
+			return [U(typeof e == "number" ? e : Array.isArray(e) ? e[0] : E.min)];
+		}), z = t(() => E.range ? {
+			left: `${G(R.value[0])}%`,
+			width: `${G(R.value[1]) - G(R.value[0])}%`
+		} : {
+			left: "0%",
+			width: `${G(R.value[0])}%`
+		}), B = t(() => E.marks.map((e) => typeof e == "number" ? {
+			value: e,
+			label: K(e)
+		} : {
+			value: e.value,
+			label: e.label ?? K(e.value)
+		}).filter((e) => e.value >= E.min && e.value <= E.max)), V = t(() => E.errorMsg || E.hint ? j : void 0);
+		function H(e) {
+			let t = String(e);
+			return t.includes(".") ? t.split(".")[1].length : 0;
+		}
+		function U(e) {
+			return Math.min(E.max, Math.max(E.min, Number.isFinite(e) ? e : E.min));
+		}
+		function W(e) {
+			let t = Math.round((U(e) - E.min) / E.step) * E.step + E.min;
+			return U(Number(t.toFixed(I.value)));
+		}
+		function G(e) {
+			return (e - E.min) / F.value * 100;
+		}
+		function K(e) {
+			return E.formatValue ? E.formatValue(e) : E.unit ? /^[a-z]/i.test(E.unit) ? `${e} ${E.unit}` : `${e}${E.unit}` : String(e);
+		}
+		function q() {
+			return E.range ? [R.value[0], R.value[1]] : R.value[0];
+		}
+		function J(e) {
+			return E.range ? e === 0 ? {
+				lo: E.min,
+				hi: R.value[1]
+			} : {
+				lo: R.value[0],
+				hi: E.max
+			} : {
+				lo: E.min,
+				hi: E.max
+			};
+		}
+		function Y(e, t) {
+			let { lo: n, hi: r } = J(e), i = Math.min(r, Math.max(n, W(t)));
+			if (!E.range) {
+				i !== R.value[0] && (D.value = i);
+				return;
+			}
+			let a = [R.value[0], R.value[1]];
+			a[e] = i, (a[0] !== R.value[0] || a[1] !== R.value[1] || !Array.isArray(D.value)) && (D.value = a);
+		}
+		function X(e) {
+			let t = M.value.getBoundingClientRect(), n = t.width ? (e - t.left) / t.width : 0;
+			return E.min + Math.min(1, Math.max(0, n)) * F.value;
+		}
+		function Z(e) {
+			if (!E.range) return 0;
+			let [t, n] = R.value;
+			return t === n ? e < t ? 0 : 1 : Math.abs(e - t) <= Math.abs(e - n) ? 0 : 1;
+		}
+		function le(e) {
+			if (E.disabled || e.button !== 0 || !M.value) return;
+			e.preventDefault();
+			let t = X(e.clientX), n = Z(t);
+			P.value = n, Y(n, t), M.value.setPointerCapture(e.pointerId), N.value[n]?.focus({ preventScroll: !0 });
+		}
+		function ue(e) {
+			P.value !== null && Y(P.value, X(e.clientX));
+		}
+		function Q(e) {
+			P.value !== null && (P.value = null, M.value?.hasPointerCapture(e.pointerId) && M.value.releasePointerCapture(e.pointerId), O("change", q()));
+		}
+		function de(e, t) {
+			if (E.disabled) return;
+			let n = R.value[t], { lo: r, hi: i } = J(t), a = {
+				ArrowRight: n + E.step,
+				ArrowUp: n + E.step,
+				ArrowLeft: n - E.step,
+				ArrowDown: n - E.step,
+				PageUp: n + L.value,
+				PageDown: n - L.value,
+				Home: r,
+				End: i
+			};
+			e.key in a && (e.preventDefault(), Y(t, a[e.key]), O("change", q()));
+		}
+		function fe(e) {
+			if (E.disabled) return;
+			let t = Z(e);
+			Y(t, e), N.value[t]?.focus(), O("change", q());
+		}
+		function $(e, t) {
+			let n = e.target, r = n.valueAsNumber;
+			Number.isFinite(r) && (Y(t, r), O("change", q())), n.value = String(R.value[t]);
+		}
+		function pe(e) {
+			let t = E.label || "Value";
+			return E.range ? `${t}, ${e === 0 ? "minimum" : "maximum"}` : E.label ? void 0 : t;
+		}
+		function me(e, t) {
+			e && (N.value[t] = e);
+		}
+		return c({ focus: () => N.value[0]?.focus() }), (t, c) => (d(), r("div", {
+			class: l(["w-full", s.disabled && "opacity-60"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-slider"
+		}, [
+			s.label || s.description || !s.showInput && !s.range ? (d(), r("div", ne, [i("div", _, [s.label ? (d(), r("p", {
+				key: 0,
+				id: A,
+				class: "text-base font-medium text-heading"
+			}, [a(m(s.label), 1), s.required ? (d(), r("span", v, " *")) : n("", !0)])) : n("", !0), s.description ? (d(), r("p", y, m(s.description), 1)) : n("", !0)]), s.showInput ? n("", !0) : (d(), r("span", b, m(s.range ? `${K(R.value[0])} – ${K(R.value[1])}` : K(R.value[0])), 1))])) : !s.showInput && s.range ? (d(), r("div", x, m(K(R.value[0])) + " – " + m(K(R.value[1])), 1)) : n("", !0),
+			i("div", { class: l(["flex items-center gap-3", B.value.length > 0 && "pb-5"]) }, [
+				s.showInput && s.range ? (d(), r("input", {
+					key: 0,
+					type: "number",
+					value: R.value[0],
+					min: s.min,
+					max: R.value[1],
+					step: s.step,
+					disabled: s.disabled,
+					"aria-label": `${s.label || "Value"}, minimum`,
+					"aria-invalid": !!s.errorMsg || void 0,
+					class: l(["shrink-0", [
+						w,
+						"w-16",
+						s.errorMsg ? "border-red-60" : "border-border hover:border-border-dark focus:focus-ring"
+					]]),
+					onChange: c[0] ||= (e) => $(e, 0)
+				}, null, 42, re)) : n("", !0),
+				i("div", ie, [i("div", { class: l(s.tooltip === "always" && "pt-8") }, [i("div", {
+					ref_key: "track",
+					ref: M,
+					class: l(["relative flex h-5 touch-none items-center select-none", s.disabled ? "cursor-not-allowed" : "cursor-pointer"]),
+					onPointerdown: le,
+					onPointermove: ue,
+					onPointerup: Q,
+					onPointercancel: Q
+				}, [i("div", { class: l(["relative h-1.5 w-full rounded-full", s.errorMsg ? "bg-red-90" : "bg-slate-90"]) }, [i("div", {
+					class: l(["absolute inset-y-0 rounded-full", s.errorMsg ? "bg-danger" : "bg-primary"]),
+					style: u(z.value)
+				}, null, 6), (d(!0), r(e, null, p(B.value, (e) => (d(), r("span", {
+					key: e.value,
+					class: l(["absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", (s.range ? e.value >= R.value[0] && e.value <= R.value[1] : e.value <= R.value[0]) ? "bg-primary-90" : "bg-slate-70"]),
+					style: u({ left: `${G(e.value)}%` }),
+					"aria-hidden": "true"
+				}, null, 6))), 128))], 2), (d(!0), r(e, null, p(R.value, (e, t) => (d(), r("div", {
+					key: t,
+					ref_for: !0,
+					ref: (e) => me(e, t),
+					role: "slider",
+					tabindex: s.disabled ? -1 : 0,
+					"aria-valuemin": J(t).lo,
+					"aria-valuemax": J(t).hi,
+					"aria-valuenow": e,
+					"aria-valuetext": K(e),
+					"aria-orientation": "horizontal",
+					"aria-labelledby": !s.range && s.label ? A : void 0,
+					"aria-label": pe(t),
+					"aria-describedby": V.value,
+					"aria-disabled": s.disabled || void 0,
+					"aria-invalid": !!s.errorMsg || void 0,
+					"aria-required": s.required || void 0,
+					class: l(["group/thumb absolute top-1/2 size-4.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-surface shadow-sm transition-[box-shadow,scale] duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring motion-safe:hover:scale-110", [
+						s.errorMsg ? "border-danger" : "border-primary",
+						P.value === t && "ring-[3px] ring-ring motion-safe:scale-110",
+						s.range && R.value[0] === R.value[1] && t === 1 && "z-10"
+					]]),
+					style: u({ left: `${G(e)}%` }),
+					onKeydown: (e) => de(e, t)
+				}, [s.tooltip === "never" ? n("", !0) : (d(), r("span", {
+					key: 0,
+					class: l(["pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 rounded-6 bg-slate-10 px-2 py-1 text-xs font-medium whitespace-nowrap text-slate-95 tabular-nums shadow-md transition-opacity duration-100 dark:bg-slate-80 dark:text-slate-10 dark:ring-1 dark:ring-slate-70", s.tooltip === "always" || P.value === t ? "opacity-100" : "opacity-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100"]),
+					"aria-hidden": "true"
+				}, m(K(e)), 3))], 46, ae))), 128))], 34)], 2), B.value.length ? (d(), r("div", oe, [(d(!0), r(e, null, p(B.value, (e, t) => (d(), r("span", {
+					key: e.value,
+					class: l(["absolute top-0 text-xs whitespace-nowrap text-muted tabular-nums transition-colors", [t === 0 && G(e.value) < 5 ? "" : t === B.value.length - 1 && G(e.value) > 95 ? "-translate-x-full" : "-translate-x-1/2", !s.disabled && "cursor-pointer hover:text-heading"]]),
+					style: u({ left: `${G(e.value)}%` }),
+					onClick: (t) => fe(e.value)
+				}, m(e.label), 15, se))), 128))])) : n("", !0)]),
+				s.showInput ? (d(), r("div", ce, [i("input", {
+					type: "number",
+					value: R.value[+!!s.range],
+					min: s.range ? R.value[0] : s.min,
+					max: s.max,
+					step: s.step,
+					disabled: s.disabled,
+					"aria-label": s.range ? `${s.label || "Value"}, maximum` : s.label || "Value",
+					"aria-invalid": !!s.errorMsg || void 0,
+					"aria-describedby": V.value,
+					class: l([
+						w,
+						s.range ? "w-16" : "w-20",
+						s.errorMsg ? "border-red-60" : "border-border hover:border-border-dark focus:focus-ring",
+						s.unit && !s.formatValue && !s.range && "pr-8"
+					]),
+					onChange: c[1] ||= (e) => $(e, +!!s.range)
+				}, null, 42, S), s.unit && !s.formatValue && !s.range ? (d(), r("span", C, m(s.unit.trim()), 1)) : n("", !0)])) : n("", !0)
+			], 2),
+			s.errorMsg ? (d(), r("p", {
+				key: 2,
+				id: j,
+				class: "mt-1.5 flex items-center gap-1 text-xs text-red-30"
+			}, [o(h(te), {
+				class: "size-3.5 shrink-0",
+				"aria-hidden": "true"
+			}), a(" " + m(s.errorMsg), 1)])) : s.hint ? (d(), r("p", {
+				key: 3,
+				id: j,
+				class: "mt-1.5 text-xs text-muted"
+			}, m(s.hint), 1)) : n("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { T as default };

package/dist/lib/components/AcSpinner.js

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

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

@@ -0,0 +1,12 @@
+export interface Props {
+    /** Diameter: `xs` 12px, `small` 16px, `normal` 20px, `large` 32px. */
+    size?: "xs" | "small" | "normal" | "large";
+    /** Read by screen readers. Pass an empty string when a visible label sits next to it. */
+    label?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    size: "xs" | "small" | "normal" | "large";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,45 @@
+import { createElementBlock as e, createElementVNode as t, defineComponent as n, normalizeClass as r, openBlock as i } from "vue";
+//#region src/lib/components/AcSpinner.vue?vue&type=script&setup=true&lang.ts
+var a = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+], o = /*@__PURE__*/ n({
+	__name: "AcSpinner",
+	props: {
+		size: { default: "small" },
+		label: { default: "Loading" }
+	},
+	setup(n) {
+		let o = {
+			xs: "size-3",
+			small: "size-4",
+			normal: "size-5",
+			large: "size-8"
+		};
+		return (s, c) => (i(), e("svg", {
+			class: r(["inline-block shrink-0 animate-spin", o[n.size]]),
+			viewBox: "0 0 16 16",
+			fill: "none",
+			role: n.label ? "status" : void 0,
+			"aria-label": n.label || void 0,
+			"aria-hidden": !n.label || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-spinner"
+		}, [...c[0] ||= [t("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6",
+			stroke: "currentColor",
+			"stroke-opacity": "0.2",
+			"stroke-width": "2"
+		}, null, -1), t("path", {
+			d: "M14 8a6 6 0 0 0-6-6",
+			stroke: "currentColor",
+			"stroke-width": "2",
+			"stroke-linecap": "round"
+		}, null, -1)]], 10, a));
+	}
+});
+//#endregion
+export { o as default };

package/dist/lib/components/AcStatCard.js

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