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

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

@@ -0,0 +1,65 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, mergeProps as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, withCtx as p } from "vue";
+//#region src/lib/components/AcNavbarItem.vue?vue&type=script&setup=true&lang.ts
+var m = { key: 1 }, h = {
+	key: 0,
+	class: "absolute -top-0.5 left-4 inline-flex h-4 min-w-4 items-center justify-center rounded-50 bg-danger px-1 text-xm font-semibold text-white tabular-nums ring-2 ring-surface",
+	"aria-hidden": "true"
+}, g = {
+	key: 1,
+	class: "inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 bg-slate-90 px-1.5 text-sm font-medium text-label tabular-nums ring-1 ring-border ring-inset"
+}, _ = /*@__PURE__*/ o({
+	__name: "AcNavbarItem",
+	props: {
+		label: {},
+		icon: { default: void 0 },
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		to: { default: void 0 },
+		href: { default: void 0 },
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		badge: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["click"],
+	setup(o, { emit: _ }) {
+		let v = o, y = _, b = s()?.appContext.components.RouterLink, x = t(() => v.to && b && !v.disabled ? b : v.to || v.href ? "a" : "button"), S = t(() => v.badge === void 0 || v.badge === "" || v.badge === 0 ? "" : typeof v.badge == "number" && v.badge > 999 ? "999+" : String(v.badge)), C = t(() => {
+			let e = {};
+			return x.value === b ? e.to = v.to : x.value === "a" ? v.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = v.href ?? (typeof v.to == "string" ? v.to : void 0) : (e.type = "button", e.disabled = v.disabled || void 0), v.active && (e["aria-current"] = "page"), v.iconOnly && (e["aria-label"] = S.value ? `${v.label} (${S.value})` : v.label), e;
+		});
+		function w(e) {
+			if (v.disabled) {
+				e.preventDefault();
+				return;
+			}
+			y("click", e);
+		}
+		return (t, s) => (l(), n(d(x.value), c(C.value, {
+			class: ["relative inline-flex h-8 shrink-0 items-center justify-center gap-2 rounded-6 text-base font-medium whitespace-nowrap text-label no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring aria-[current=page]:bg-surface-sunken aria-[current=page]:text-heading", [o.iconOnly ? "w-8" : "px-3", o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-surface-sunken hover:text-heading"]],
+			title: o.iconOnly ? o.label : void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-navbar-item",
+			onClick: w
+		}), {
+			default: p(() => [
+				o.icon ? (l(), n(d(o.icon), {
+					key: 0,
+					class: "size-4 shrink-0",
+					"aria-hidden": "true"
+				})) : r("", !0),
+				o.iconOnly ? r("", !0) : (l(), i("span", m, [u(t.$slots, "default", {}, () => [a(f(o.label), 1)])])),
+				S.value ? (l(), i(e, { key: 2 }, [o.iconOnly ? (l(), i("span", h, f(S.value), 1)) : (l(), i("span", g, f(S.value), 1))], 64)) : r("", !0)
+			]),
+			_: 3
+		}, 16, ["class", "title"]));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/lib/components/AcNotificationMenu.js

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

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

@@ -0,0 +1,90 @@
+import type { Component } from "vue";
+export interface NotificationItem {
+    /** Unique id. */
+    id: string | number;
+    /** When it happened: a `Date`, an ISO string, or epoch milliseconds (epoch seconds also work). */
+    time: number | string | Date;
+    /** Bold first line. Without it, `msg` is the first line. */
+    title?: string;
+    /** The message. Old `msg`. */
+    msg?: string;
+    /** Event status, e.g. `Success`, `Failed`, `Running`, `Pending`. Shown next to the time and picks the icon. */
+    status?: string;
+    /** Overrides the tone that `status` picks. */
+    type?: "success" | "danger" | "warning" | "info" | "neutral";
+    /** Read items lose the unread dot and the bold title. */
+    read?: boolean;
+    /** Plain URL to open. */
+    href?: string;
+    /** Route to open; rendered as `RouterLink` when vue-router is installed. */
+    to?: string | object;
+    /** A Lucide icon to replace the status icon. */
+    icon?: Component;
+}
+export interface Props {
+    /** Recent events, newest first. */
+    notifications?: NotificationItem[];
+    /** Number on the bell. Defaults to the items without `read: true`. Old `unreadNotification`. */
+    unreadCount?: number;
+    /** Shows skeleton rows in the panel. */
+    loading?: boolean;
+    /** Accessible name of the bell, and the panel heading. */
+    label?: string;
+    /** Heading of the empty state. */
+    emptyText?: string;
+    /** Text of the footer link. */
+    viewAllLabel?: string;
+    /** Plain URL of the full notifications page. Shows the footer link. */
+    viewAllHref?: string;
+    /** Route of the full notifications page; rendered as `RouterLink` when vue-router is installed. Shows the footer link. */
+    viewAllTo?: string | object;
+    /** Which edge of the bell the panel lines up with. */
+    align?: "start" | "end";
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Custom row content. */
+    item?: (props: {
+        item: NotificationItem;
+    }) => unknown;
+    /** Replaces the empty state. */
+    empty?: () => unknown;
+    /** Replaces the footer link. Receives `close`. */
+    footer?: (props: {
+        close: () => void;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the panel is open. Bind with `v-model:open`; watch it to mark items read when the panel opens. Old `isActive` event. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: NotificationItem) => any;
+    "update:open": (value: boolean) => any;
+    markAllRead: () => any;
+    viewAll: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: NotificationItem) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onMarkAllRead?: (() => any) | undefined;
+    onViewAll?: (() => any) | undefined;
+}>, {
+    label: string;
+    loading: boolean;
+    align: "start" | "end";
+    emptyText: string;
+    notifications: NotificationItem[];
+    unreadCount: number;
+    viewAllLabel: string;
+    viewAllHref: string;
+    viewAllTo: string | object;
+}, {}, {}, {}, 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/AcNotificationMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,345 @@
+import e from "./AcNavbarItem.js";
+import t from "./AcSkeleton.js";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, mergeModels as m, mergeProps as h, nextTick as g, normalizeClass as _, normalizeStyle as ee, onBeforeUnmount as te, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useId as ne, useModel as re, watch as T, withCtx as E } from "vue";
+import { ArrowRight as ie, Bell as ae, BellOff as oe, CheckCheck as se, CircleCheck as ce, CircleX as le, Info as ue, LoaderCircle as de, TriangleAlert as fe } from "@lucide/vue";
+//#region src/lib/components/AcNotificationMenu.vue?vue&type=script&setup=true&lang.ts
+var pe = {
+	class: "inline-flex",
+	"data-ac-ds": "",
+	"data-testid": "ac-notification-menu"
+}, me = { class: "flex h-12 shrink-0 items-center gap-2 border-b border-border-light pr-2 pl-4" }, he = {
+	key: 0,
+	class: "inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 bg-primary-95 px-1.5 text-sm font-semibold text-primary-20 tabular-nums"
+}, ge = {
+	key: 0,
+	class: "flex flex-col gap-4 px-4 py-4",
+	"aria-busy": "true",
+	role: "status",
+	"aria-label": "Loading notifications"
+}, _e = {
+	key: 1,
+	class: "flex flex-col items-center gap-3 px-6 py-10 text-center"
+}, ve = {
+	class: "inline-flex size-10 items-center justify-center rounded-10 border border-border bg-surface-muted text-muted",
+	"aria-hidden": "true"
+}, ye = { class: "text-lg font-medium text-heading" }, be = {
+	key: 2,
+	role: "list",
+	class: "ac-scrollbar min-h-0 flex-1 divide-y divide-border-light",
+	"data-ac-ds": "",
+	"data-testid": "ac-notification-menu-list"
+}, xe = { class: "min-w-0 flex-1" }, Se = {
+	key: 0,
+	class: "mt-0.5 line-clamp-2 text-xs text-body"
+}, Ce = { class: "mt-1 flex items-center gap-1.5 text-xs text-muted" }, we = {
+	key: 1,
+	"aria-hidden": "true"
+}, Te = ["datetime", "title"], Ee = {
+	key: 0,
+	class: "mt-2 size-2 shrink-0 rounded-full bg-primary",
+	"aria-hidden": "true"
+}, De = {
+	key: 1,
+	class: "sr-only"
+}, Oe = {
+	key: 3,
+	class: "shrink-0 border-t border-border-light p-1"
+}, ke = "[data-notification-item]", Ae = 6048e5, D = /*@__PURE__*/ f({
+	__name: "AcNotificationMenu",
+	props: /*@__PURE__*/ m({
+		notifications: { default: () => [] },
+		unreadCount: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: "Notifications" },
+		emptyText: { default: "You're all caught up" },
+		viewAllLabel: { default: "View all" },
+		viewAllHref: { default: "" },
+		viewAllTo: { default: void 0 },
+		align: { default: "end" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ m([
+		"select",
+		"markAllRead",
+		"viewAll"
+	], ["update:open"]),
+	setup(f, { emit: m }) {
+		let D = f, O = re(f, "open"), k = m, je = {
+			success: "success",
+			succeeded: "success",
+			completed: "success",
+			complete: "success",
+			ready: "success",
+			active: "success",
+			failed: "danger",
+			failure: "danger",
+			error: "danger",
+			critical: "danger",
+			warning: "warning",
+			pending: "warning",
+			waiting: "warning",
+			running: "info",
+			started: "info",
+			inprogress: "info",
+			progressing: "info",
+			info: "info"
+		}, A = {
+			success: {
+				icon: ce,
+				tile: "bg-green-95 text-green-40",
+				text: "text-green-30"
+			},
+			danger: {
+				icon: le,
+				tile: "bg-red-95 text-red-40",
+				text: "text-red-30"
+			},
+			warning: {
+				icon: fe,
+				tile: "bg-yellow-95 text-yellow-40",
+				text: "text-yellow-30"
+			},
+			info: {
+				icon: de,
+				tile: "bg-blue-95 text-blue-40",
+				text: "text-blue-30"
+			},
+			neutral: {
+				icon: ue,
+				tile: "bg-slate-90 text-label",
+				text: "text-muted"
+			}
+		}, j = new Intl.RelativeTimeFormat(void 0, {
+			numeric: "auto",
+			style: "narrow"
+		}), Me = new Intl.DateTimeFormat(void 0, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		}), Ne = new Intl.DateTimeFormat(void 0, {
+			month: "short",
+			day: "numeric"
+		}), M = p()?.appContext.components.RouterLink, N = ne(), P = `${N}-panel`, F = `${N}-heading`, I = y(null), L = y(null), R = y({}), z = y(!0), B = y(Date.now()), V, H = a(() => D.unreadCount ?? D.notifications.filter((e) => !e.read).length), Pe = a(() => D.notifications.some((e) => !e.read)), Fe = a(() => !!(D.viewAllHref || D.viewAllTo));
+		function U(e) {
+			return e.type ? e.type : je[(e.status ?? "").toLowerCase().replace(/[^a-z]/g, "")] ?? "neutral";
+		}
+		function W(e) {
+			return e instanceof Date ? e.getTime() : typeof e == "number" ? e < 1e11 ? e * 1e3 : e : new Date(e).getTime();
+		}
+		function Ie(e) {
+			let t = W(e);
+			if (Number.isNaN(t)) return "";
+			let n = t - B.value, r = Math.abs(n);
+			return r < 45e3 ? "Just now" : r >= Ae ? Ne.format(t) : r < 36e5 ? j.format(Math.round(n / 6e4), "minute") : r < 864e5 ? j.format(Math.round(n / 36e5), "hour") : j.format(Math.round(n / 864e5), "day");
+		}
+		function Le(e) {
+			let t = W(e);
+			return Number.isNaN(t) ? "" : Me.format(t);
+		}
+		function Re(e) {
+			let t = W(e);
+			return Number.isNaN(t) ? void 0 : new Date(t).toISOString();
+		}
+		function G(e, t) {
+			return e && M ? M : e || t ? "a" : "button";
+		}
+		function K(e, t) {
+			let n = G(e, t);
+			return n === M ? { to: e } : n === "a" ? { href: t || (typeof e == "string" ? e : void 0) } : { type: "button" };
+		}
+		function q() {
+			return I.value?.$el ?? null;
+		}
+		function J() {
+			return [...L.value?.querySelectorAll(ke) ?? []];
+		}
+		function Y(e) {
+			let t = J();
+			t.length && t[(e + t.length) % t.length].focus();
+		}
+		function X() {
+			let e = q();
+			if (!e || !L.value) return;
+			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = L.value, i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i, s = D.align === "end" ? t.right - n : t.left;
+			z.value = !o, R.value = {
+				[o ? "bottom" : "top"]: `${o ? window.innerHeight - t.top + 6 : t.bottom + 6}px`,
+				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
+				maxHeight: `${Math.max(o ? a : i, 200)}px`
+			};
+		}
+		function Z(e = !0) {
+			O.value && (O.value = !1, e && q()?.focus());
+		}
+		function ze() {
+			O.value ? Z() : O.value = !0;
+		}
+		function Be(e) {
+			k("select", e), Z(!1);
+		}
+		function Ve() {
+			k("viewAll"), Z(!1);
+		}
+		function He(e) {
+			e.key !== "ArrowDown" || O.value || (e.preventDefault(), O.value = !0);
+		}
+		function Ue(e) {
+			let t = J(), n = t.indexOf(document.activeElement);
+			(e.key === "ArrowDown" || e.key === "ArrowUp") && t.length ? (e.preventDefault(), Y(n < 0 ? e.key === "ArrowDown" ? 0 : -1 : n + (e.key === "ArrowDown" ? 1 : -1))) : (e.key === "Home" || e.key === "End") && n >= 0 ? (e.preventDefault(), Y(e.key === "Home" ? 0 : -1)) : e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && We(e);
+		}
+		function We(e) {
+			let t = [...L.value?.querySelectorAll("a[href], button:not([disabled])") ?? []], n = t[0], r = t[t.length - 1];
+			e.shiftKey && (document.activeElement === n || document.activeElement === L.value) ? (e.preventDefault(), Z()) : !e.shiftKey && (document.activeElement === r || !t.length) && Z();
+		}
+		function Ge(e) {
+			let t = e.target;
+			q()?.contains(t) || L.value?.contains(t) || Z(!1);
+		}
+		function Q(e) {
+			e && L.value?.contains(e.target) || X();
+		}
+		function $(e) {
+			let t = e ? "addEventListener" : "removeEventListener";
+			document[t]("pointerdown", Ge, !0), window[t]("scroll", Q, !0), window[t]("resize", Q), clearInterval(V), e && (V = setInterval(() => B.value = Date.now(), 3e4));
+		}
+		return T(O, async (e) => {
+			if ($(e), !e) return;
+			B.value = Date.now(), await g(), X();
+			let t = J()[0];
+			t ? t.focus() : L.value?.focus();
+		}), T(() => [D.notifications.length, D.loading], () => O.value && g(X)), te(() => $(!1)), (a, p) => (v(), c("div", pe, [d(e, {
+			ref_key: "trigger",
+			ref: I,
+			label: f.label,
+			icon: w(ae),
+			"icon-only": "",
+			badge: H.value,
+			"aria-haspopup": "dialog",
+			"aria-expanded": O.value,
+			"aria-controls": O.value ? P : void 0,
+			class: _(O.value && "bg-surface-sunken text-heading"),
+			"data-ac-ds": "",
+			"data-testid": "ac-notification-menu-trigger",
+			onClick: ze,
+			onKeydown: He
+		}, null, 8, [
+			"label",
+			"icon",
+			"badge",
+			"aria-expanded",
+			"aria-controls",
+			"class"
+		]), (v(), o(r, { to: "body" }, [d(i, {
+			"enter-active-class": "transition duration-150 ease-out",
+			"enter-from-class": `opacity-0 motion-safe:scale-[0.98] ${z.value ? "motion-safe:-translate-y-1" : "motion-safe:translate-y-1"}`,
+			"leave-active-class": "transition duration-100 ease-in",
+			"leave-to-class": "opacity-0"
+		}, {
+			default: E(() => [O.value ? (v(), c("div", {
+				key: 0,
+				id: P,
+				ref_key: "panel",
+				ref: L,
+				role: "dialog",
+				tabindex: "-1",
+				"aria-labelledby": F,
+				class: _(["fixed z-[90] flex w-[calc(380px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-10 border border-border bg-surface shadow-lg outline-none", z.value ? "origin-top-right" : "origin-bottom-right"]),
+				style: ee(R.value),
+				"data-ac-ds": "",
+				"data-testid": "ac-notification-menu-panel",
+				onKeydown: Ue
+			}, [
+				l("div", me, [
+					l("h2", {
+						id: F,
+						class: "text-lg font-semibold tracking-normal text-heading"
+					}, C(f.label), 1),
+					H.value ? (v(), c("span", he, [u(C(H.value > 999 ? "999+" : H.value), 1), p[1] ||= l("span", { class: "sr-only" }, "\xA0unread", -1)])) : s("", !0),
+					Pe.value || H.value ? (v(), c("button", {
+						key: 1,
+						type: "button",
+						class: "ml-auto inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-6 px-2 text-xs font-medium text-label transition-colors hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+						"data-ac-ds": "",
+						"data-testid": "ac-notification-menu-mark-all",
+						onClick: p[0] ||= (e) => k("markAllRead")
+					}, [d(w(se), {
+						class: "size-3.5",
+						"aria-hidden": "true"
+					}), p[2] ||= u(" Mark all as read ", -1)])) : s("", !0)
+				]),
+				f.loading ? (v(), c("div", ge, [(v(), c(n, null, b(3, (e) => l("div", {
+					key: e,
+					class: "flex gap-3"
+				}, [d(t, {
+					shape: "rect",
+					width: "28px",
+					height: "28px",
+					label: "",
+					class: "shrink-0"
+				}), d(t, {
+					shape: "text",
+					lines: 2,
+					height: "10px",
+					label: "",
+					class: "flex-1"
+				})])), 64))])) : f.notifications.length ? (v(), c("ul", be, [(v(!0), c(n, null, b(f.notifications, (e) => (v(), c("li", { key: e.id }, [(v(), o(S(G(e.to, e.href)), h({ ref_for: !0 }, K(e.to, e.href), {
+					"data-notification-item": "",
+					class: ["relative flex w-full cursor-pointer gap-3 px-4 py-3 text-left no-underline outline-none transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-inset", !e.read && "bg-primary-97"],
+					"data-ac-ds": "",
+					"data-testid": "ac-notification-menu-item",
+					onClick: (t) => Be(e)
+				}), {
+					default: E(() => [x(a.$slots, "item", { item: e }, () => [
+						l("span", {
+							class: _(["mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-8", A[U(e)].tile]),
+							"aria-hidden": "true"
+						}, [(v(), o(S(e.icon ?? A[U(e)].icon), { class: "size-4" }))], 2),
+						l("span", xe, [
+							l("span", { class: _(["line-clamp-2 text-base text-heading", !e.read && "font-medium"]) }, C(e.title || e.msg), 3),
+							e.title && e.msg ? (v(), c("span", Se, C(e.msg), 1)) : s("", !0),
+							l("span", Ce, [
+								e.status ? (v(), c("span", {
+									key: 0,
+									class: _(["font-medium", A[U(e)].text])
+								}, C(e.status), 3)) : s("", !0),
+								e.status ? (v(), c("span", we, "·")) : s("", !0),
+								l("time", {
+									datetime: Re(e.time),
+									title: Le(e.time)
+								}, C(Ie(e.time)), 9, Te)
+							])
+						]),
+						e.read ? s("", !0) : (v(), c("span", Ee)),
+						e.read ? s("", !0) : (v(), c("span", De, "(unread)"))
+					])]),
+					_: 2
+				}, 1040, ["class", "onClick"]))]))), 128))])) : (v(), c("div", _e, [x(a.$slots, "empty", {}, () => [
+					l("span", ve, [d(w(oe), { class: "size-4.5" })]),
+					l("p", ye, C(f.emptyText), 1),
+					p[3] ||= l("p", { class: "max-w-64 text-base text-muted" }, "Backups, upgrades and alerts from your clusters show up here.", -1)
+				])])),
+				a.$slots.footer || Fe.value ? (v(), c("div", Oe, [x(a.$slots, "footer", { close: Z }, () => [(v(), o(S(G(f.viewAllTo, f.viewAllHref)), h(K(f.viewAllTo, f.viewAllHref), {
+					class: "flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-6 text-base font-medium text-heading no-underline outline-none transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:ring-[3px] focus-visible:ring-ring",
+					"data-ac-ds": "",
+					"data-testid": "ac-notification-menu-view-all",
+					onClick: Ve
+				}), {
+					default: E(() => [u(C(f.viewAllLabel) + " ", 1), d(w(ie), {
+						class: "size-3.5",
+						"aria-hidden": "true"
+					})]),
+					_: 1
+				}, 16))])])) : s("", !0)
+			], 38)) : s("", !0)]),
+			_: 3
+		}, 8, ["enter-from-class"])]))]));
+	}
+});
+//#endregion
+export { D as default };

package/dist/lib/components/AcPage.js

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

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

@@ -0,0 +1,25 @@
+export interface Props {
+    /** Pads the page on all sides (20px). Turn off when a parent already pads it. */
+    padded?: boolean;
+    /** Space between the page's direct children: `small` 12px, `normal` 20px, `large` 32px. */
+    gap?: "small" | "normal" | "large";
+    /** Caps the content width and centres it: `narrow` 768px, `normal` 1024px, `wide` 1280px, `full` fills the area. */
+    width?: "full" | "wide" | "normal" | "narrow";
+}
+type __VLS_Slots = {
+    /** The page's sections: `AcCard`, `AcSectionContent`, `AcTable`, a form. Each direct child is spaced by `gap`. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    width: "full" | "wide" | "normal" | "narrow";
+    gap: "small" | "normal" | "large";
+    padded: 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/AcPage.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { createElementBlock as e, defineComponent as t, normalizeClass as n, openBlock as r, renderSlot as i } from "vue";
+//#region src/lib/components/AcPage.vue?vue&type=script&setup=true&lang.ts
+var a = /*@__PURE__*/ t({
+	__name: "AcPage",
+	props: {
+		padded: {
+			type: Boolean,
+			default: !0
+		},
+		gap: { default: "normal" },
+		width: { default: "full" }
+	},
+	setup(t) {
+		let a = {
+			small: "gap-3",
+			normal: "gap-5",
+			large: "gap-8"
+		}, o = {
+			full: "",
+			wide: "mx-auto max-w-7xl",
+			normal: "mx-auto max-w-5xl",
+			narrow: "mx-auto max-w-3xl"
+		};
+		return (s, c) => (r(), e("div", {
+			class: n(["flex w-full min-w-0 flex-col", [
+				a[t.gap],
+				o[t.width],
+				t.padded && "p-5"
+			]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-page"
+		}, [i(s.$slots, "default")], 2));
+	}
+});
+//#endregion
+export { a as default };

package/dist/lib/components/AcPagination.js

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

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

@@ -0,0 +1,51 @@
+export interface Props {
+    /** Total number of items across all pages. */
+    total: number;
+    /** Choices in the page-size select. */
+    pageSizes?: number[];
+    /** Hides the "Rows per page" select. */
+    hidePageSize?: boolean;
+    /** How many page numbers to show on each side of the current one before an ellipsis. */
+    siblings?: number;
+    /** Always use the compact "‹ 3 / 6 ›" control. It's used automatically below 640px. */
+    compact?: boolean;
+    /** Noun after the count: "Showing 1–10 of 57 databases". */
+    itemLabel?: string;
+    /** Disables every control, e.g. while a page loads. */
+    disabled?: boolean;
+    /** `small` makes the page buttons 28px (default `normal` is 32px). Use it inside cards and dense tables. */
+    size?: "normal" | "small";
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The current page, starting at 1. Bind with `v-model:page`. */
+    "page"?: number;
+    /** Items per page. Bind with `v-model:page-size`. */
+    "pageSize"?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    range: (range: {
+        start: number;
+        end: number;
+    }) => any;
+    "update:page": (value: number) => any;
+    "update:pageSize": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onRange?: ((range: {
+        start: number;
+        end: number;
+    }) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
+    "onUpdate:pageSize"?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: "normal" | "small";
+    compact: boolean;
+    pageSizes: number[];
+    hidePageSize: boolean;
+    siblings: number;
+    itemLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;