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

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

@@ -0,0 +1,160 @@
+import e from "./AcSelect.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderList as f, toDisplayString as p, unref as m, useModel as h, watch as g } from "vue";
+import { ChevronLeft as _, ChevronRight as v } from "@lucide/vue";
+//#region src/lib/components/AcPagination.vue?vue&type=script&setup=true&lang.ts
+var y = {
+	class: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3 text-base",
+	"data-ac-ds": "",
+	"data-testid": "ac-pagination"
+}, b = { class: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2" }, x = {
+	key: 0,
+	class: "flex items-center gap-2"
+}, S = { class: "w-18" }, C = {
+	class: "text-xs whitespace-nowrap text-muted tabular-nums",
+	"aria-live": "polite"
+}, w = {
+	"aria-label": "Pagination",
+	class: "ml-auto"
+}, T = { class: "flex items-center gap-1" }, E = ["disabled"], D = { class: "px-2 text-xs whitespace-nowrap text-body tabular-nums" }, O = { class: "font-medium text-heading" }, k = [
+	"aria-label",
+	"aria-current",
+	"disabled",
+	"onClick"
+], A = ["disabled"], j = /*@__PURE__*/ c({
+	__name: "AcPagination",
+	props: /*@__PURE__*/ l({
+		total: {},
+		pageSizes: { default: () => [
+			10,
+			20,
+			50,
+			100
+		] },
+		hidePageSize: {
+			type: Boolean,
+			default: !1
+		},
+		siblings: { default: 1 },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		itemLabel: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "normal" }
+	}, {
+		page: { default: 1 },
+		pageModifiers: {},
+		pageSize: { default: 10 },
+		pageSizeModifiers: {}
+	}),
+	emits: /*@__PURE__*/ l(["range"], ["update:page", "update:pageSize"]),
+	setup(c, { emit: l }) {
+		let j = c, M = h(c, "page"), N = h(c, "pageSize"), P = l, F = n(() => j.size === "small" ? "size-7" : "size-8"), I = n(() => j.size === "small" ? "h-7 min-w-7 text-sm" : "h-8 min-w-8 text-base"), L = n(() => Math.max(1, Math.ceil(j.total / Math.max(1, N.value)))), R = n(() => Math.min(Math.max(1, M.value), L.value)), z = n(() => ({
+			start: Math.min((R.value - 1) * N.value, j.total),
+			end: Math.min(R.value * N.value, j.total)
+		})), B = n(() => {
+			let e = j.itemLabel ? ` ${j.itemLabel}` : "";
+			return j.total ? `Showing ${z.value.start + 1}–${z.value.end} of ${j.total}${e}` : `0${e || " items"}`;
+		}), V = n(() => (j.pageSizes.includes(N.value) ? j.pageSizes : [...j.pageSizes, N.value].sort((e, t) => e - t)).map((e) => ({
+			value: e,
+			label: String(e)
+		}))), H = n(() => {
+			let e = L.value, t = R.value, n = Math.max(0, j.siblings);
+			if (e <= 5 + 2 * n) return Array.from({ length: e }, (e, t) => t + 1);
+			let r = Math.max(t - n, 1), i = Math.min(t + n, e), a = r > 3, o = i < e - 2, s = (e, t) => Array.from({ length: t - e + 1 }, (t, n) => e + n);
+			return a ? o ? [
+				1,
+				"start-ellipsis",
+				...s(r, i),
+				"end-ellipsis",
+				e
+			] : [
+				1,
+				"start-ellipsis",
+				...s(e - (2 + 2 * n), e)
+			] : [
+				...s(1, 3 + 2 * n),
+				"end-ellipsis",
+				e
+			];
+		});
+		function U(e) {
+			j.disabled || (M.value = Math.min(Math.max(1, e), L.value));
+		}
+		function W(e) {
+			let t = Number(e);
+			if (!t || t === N.value) return;
+			let n = z.value.start;
+			N.value = t, M.value = Math.floor(n / t) + 1;
+		}
+		return g(L, (e) => {
+			M.value > e && (M.value = e);
+		}), g(z, (e) => P("range", { ...e }), { immediate: !0 }), (n, l) => (d(), i("div", y, [a("div", b, [c.hidePageSize ? r("", !0) : (d(), i("div", x, [l[2] ||= a("span", {
+			class: "text-xs whitespace-nowrap text-muted",
+			"aria-hidden": "true"
+		}, "Rows per page", -1), a("div", S, [s(e, {
+			"model-value": N.value,
+			options: V.value,
+			size: "compact",
+			placeholder: "Rows per page",
+			disabled: c.disabled,
+			"onUpdate:modelValue": W
+		}, null, 8, [
+			"model-value",
+			"options",
+			"disabled"
+		])])])), a("p", C, p(B.value), 1)]), a("nav", w, [a("ul", T, [
+			a("li", null, [a("button", {
+				type: "button",
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-body shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:bg-surface", F.value]),
+				"aria-label": "Previous page",
+				disabled: c.disabled || R.value <= 1,
+				"data-ac-ds": "",
+				"data-testid": "ac-pagination-prev",
+				onClick: l[0] ||= (e) => U(R.value - 1)
+			}, [s(m(_), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})], 10, E)]),
+			a("li", { class: u(c.compact ? "flex" : "flex sm:hidden") }, [a("span", D, [
+				l[3] ||= a("span", { class: "sr-only" }, "Page ", -1),
+				a("span", O, p(R.value), 1),
+				o(" / " + p(L.value), 1)
+			])], 2),
+			c.compact ? r("", !0) : (d(!0), i(t, { key: 0 }, f(H.value, (e) => (d(), i("li", {
+				key: e,
+				class: "hidden sm:flex"
+			}, [typeof e == "string" ? (d(), i("span", {
+				key: 0,
+				class: u(["inline-flex w-6 items-end justify-center text-xs text-muted", c.size === "small" ? "h-7 pb-1.5" : "h-8 pb-2"]),
+				"aria-hidden": "true"
+			}, "…", 2)) : (d(), i("button", {
+				key: 1,
+				type: "button",
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border px-2 font-medium tabular-nums transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40", [I.value, e === R.value ? "border-primary bg-primary-95 text-primary-20" : "border-transparent text-body hover:bg-surface-sunken hover:text-heading"]]),
+				"aria-label": `Page ${e}`,
+				"aria-current": e === R.value ? "page" : void 0,
+				disabled: c.disabled,
+				onClick: (t) => U(e)
+			}, p(e), 11, k))]))), 128)),
+			a("li", null, [a("button", {
+				type: "button",
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-body shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:bg-surface", F.value]),
+				"aria-label": "Next page",
+				disabled: c.disabled || R.value >= L.value,
+				"data-ac-ds": "",
+				"data-testid": "ac-pagination-next",
+				onClick: l[1] ||= (e) => U(R.value + 1)
+			}, [s(m(v), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})], 10, A)])
+		])])]));
+	}
+});
+//#endregion
+export { j as default };

package/dist/lib/components/AcPreloader.js

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

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

@@ -0,0 +1,28 @@
+export interface Props {
+    /** Text under the spinner, e.g. "Fetching resource layout". Also announced to screen readers. */
+    message?: string;
+    /** Shows the spinner. Turn off to show the message alone. */
+    showSpinner?: boolean;
+    /** Covers the whole viewport on a plain surface, for app start-up and sign-in checks. */
+    fullPage?: boolean;
+    /** CSS minimum height when not `fullPage`. The preloader also grows to fill its container. */
+    minHeight?: string;
+}
+type __VLS_Slots = {
+    /** Replaces the message, e.g. with a message and a Cancel button. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    message: string;
+    showSpinner: boolean;
+    fullPage: boolean;
+    minHeight: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,39 @@
+import e from "./AcSpinner.js";
+import { Teleport as t, createBlock as n, createCommentVNode as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+//#region src/lib/components/AcPreloader.vue?vue&type=script&setup=true&lang.ts
+var d = { class: "max-w-80 text-base text-muted" }, f = /*@__PURE__*/ o({
+	inheritAttrs: !1,
+	__name: "AcPreloader",
+	props: {
+		message: { default: "Loading…" },
+		showSpinner: {
+			type: Boolean,
+			default: !0
+		},
+		fullPage: {
+			type: Boolean,
+			default: !1
+		},
+		minHeight: { default: "240px" }
+	},
+	setup(o) {
+		return (f, p) => (c(), n(t, {
+			to: "body",
+			disabled: !o.fullPage
+		}, [i("div", s(f.$attrs, {
+			role: "status",
+			"aria-live": "polite",
+			class: ["flex flex-col items-center justify-center gap-3 px-4 text-center", o.fullPage ? "fixed inset-0 z-[80] bg-surface" : "size-full"],
+			style: o.fullPage ? void 0 : { minHeight: o.minHeight },
+			"data-ac-ds": "",
+			"data-testid": "ac-preloader"
+		}), [o.showSpinner ? (c(), n(e, {
+			key: 0,
+			size: "normal",
+			class: "text-primary",
+			label: ""
+		})) : r("", !0), i("div", d, [l(f.$slots, "default", {}, () => [a(u(o.message), 1)])])], 16)], 8, ["disabled"]));
+	}
+});
+//#endregion
+export { f as default };

package/dist/lib/components/AcProgress.js

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

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

@@ -0,0 +1,31 @@
+import type { Tone } from "./types";
+export interface Props {
+    /** Current amount, from 0 to `max`. Ignored while `indeterminate`. */
+    value?: number;
+    /** The amount that fills the bar. */
+    max?: number;
+    /** Text above the bar, e.g. "Storage". Also the bar's accessible name. */
+    label?: string;
+    /** Shows the value to the right of the label: the percentage, or `valueText` when set. */
+    showValue?: boolean;
+    /** Replaces the percentage, e.g. "7.2 GiB of 10 GiB". Also read by screen readers. */
+    valueText?: string;
+    /** Bar colour. `auto` is for quotas: primary, then warning from 80% and danger from 95%. */
+    color?: Tone | "auto";
+    /** For work of unknown length: a sliding bar with no value. */
+    indeterminate?: boolean;
+    /** Bar height: `small` 4px, `normal` 6px, `large` 10px. */
+    size?: "small" | "normal" | "large";
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    value: number;
+    color: Tone | "auto";
+    max: number;
+    size: "small" | "normal" | "large";
+    showValue: boolean;
+    valueText: string;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,76 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, toDisplayString as c, unref as l, useId as u } from "vue";
+//#region src/lib/components/AcProgress.vue?vue&type=script&setup=true&lang.ts
+var d = {
+	class: "w-full",
+	"data-ac-ds": "",
+	"data-testid": "ac-progress"
+}, f = {
+	key: 0,
+	class: "mb-1.5 flex items-baseline justify-between gap-3 text-xs"
+}, p = ["id"], m = [
+	"aria-labelledby",
+	"aria-label",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-busy"
+], h = /*@__PURE__*/ i({
+	__name: "AcProgress",
+	props: {
+		value: { default: 0 },
+		max: { default: 100 },
+		label: { default: "" },
+		showValue: {
+			type: Boolean,
+			default: !1
+		},
+		valueText: { default: "" },
+		color: { default: "primary" },
+		indeterminate: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "normal" }
+	},
+	setup(i) {
+		let h = i, g = {
+			primary: "bg-primary",
+			info: "bg-info",
+			success: "bg-success",
+			warning: "bg-warning",
+			danger: "bg-danger"
+		}, _ = {
+			small: "h-1",
+			normal: "h-1.5",
+			large: "h-2.5"
+		}, v = u(), y = e(() => h.max <= 0 ? 0 : Math.min(100, Math.max(0, h.value / h.max * 100))), b = e(() => h.color === "auto" ? y.value >= 95 ? "danger" : y.value >= 80 ? "warning" : "primary" : h.color), x = e(() => h.valueText || `${Math.round(y.value)}%`), S = e(() => !!h.label || h.showValue && !h.indeterminate);
+		return (e, u) => (s(), n("div", d, [S.value ? (s(), n("div", f, [i.label ? (s(), n("span", {
+			key: 0,
+			id: `${l(v)}-label`,
+			class: "min-w-0 truncate font-medium text-label"
+		}, c(i.label), 9, p)) : t("", !0), i.showValue && !i.indeterminate ? (s(), n("span", {
+			key: 1,
+			class: a(["ml-auto shrink-0 tabular-nums", i.color === "auto" && b.value !== "primary" ? b.value === "danger" ? "text-red-30" : "text-yellow-20" : "text-muted"]),
+			"aria-hidden": "true"
+		}, c(x.value), 3)) : t("", !0)])) : t("", !0), r("div", {
+			role: "progressbar",
+			"aria-labelledby": i.label ? `${l(v)}-label` : void 0,
+			"aria-label": i.label ? void 0 : "Progress",
+			"aria-valuemin": "0",
+			"aria-valuemax": i.indeterminate ? void 0 : i.max,
+			"aria-valuenow": i.indeterminate ? void 0 : Math.min(i.max, Math.max(0, i.value)),
+			"aria-valuetext": i.indeterminate ? void 0 : x.value,
+			"aria-busy": i.indeterminate || void 0,
+			class: a(["relative w-full overflow-hidden rounded-full bg-slate-90", _[i.size]])
+		}, [i.indeterminate ? (s(), n("div", {
+			key: 0,
+			class: a(["ac-progress-indeterminate absolute inset-y-0 left-0 w-2/5 rounded-full motion-reduce:w-full motion-reduce:opacity-40", g[b.value]])
+		}, null, 2)) : (s(), n("div", {
+			key: 1,
+			class: a(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", g[b.value]]),
+			style: o({ width: `${y.value}%` })
+		}, null, 6))], 10, m)]));
+	}
+});
+//#endregion
+export { h as default };

package/dist/lib/components/AcResourceCard.js

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

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

@@ -0,0 +1,106 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface ResourceTag {
+    /** Tag text, or the value of a key–value tag. */
+    label: string;
+    /** Makes it a key–value tag, e.g. `env` for `env=prod`. */
+    key?: string;
+    /** Tag colour, e.g. `warning` for an outdated version. */
+    color?: Tone | "neutral";
+    /** Shows a spinner before the text, e.g. while the status is still loading. */
+    loading?: boolean;
+}
+export interface ResourceDetail {
+    /** Name of the detail, e.g. "Provider" or "Nodes". Old `title`. */
+    label: string;
+    /** The value. Empty values show as "—". */
+    value?: string | number;
+    /** Slot name for a custom value: `#detail-<key>`. */
+    key?: string;
+    /** Sets the value in Geist Mono, for versions, IPs and IDs. */
+    mono?: boolean;
+}
+export interface Props {
+    /** Name of the cluster, database, node or organization. Also the card's accessible name. Old `clusterData.name`. */
+    name: string;
+    /** A muted line under the name, e.g. "Postgres 16.1 · demo" or "Last active 2 days ago". */
+    subtitle?: string;
+    /** Logo image URL, e.g. the cloud provider or database engine. Old `clusterData.providerIcon`. */
+    logo?: string;
+    /** Alt text for `logo`. Leave empty when `subtitle` or a detail already names it. */
+    logoAlt?: string;
+    /** A Lucide icon to show instead of a logo. */
+    icon?: Component;
+    /** Status shown as a badge before the tags, e.g. "Ready" or "Provisioning". */
+    status?: string;
+    /** Colour of the `status` badge. */
+    statusColor?: Tone | "default";
+    /** Shows a spinner in the status badge while the status is being worked out. */
+    statusLoading?: boolean;
+    /** Tags after the status: `{ label, key?, color?, loading? }`, or plain strings. Old `clusterData.tags`. */
+    tags?: (ResourceTag | string)[];
+    /** Key facts as label–value pairs: `{ label, value?, key?, mono? }`. Keep it to about four. Old `clusterData.details`. */
+    details?: ResourceDetail[];
+    /** Columns of the details grid. Three and four drop to two on phones. */
+    columns?: 1 | 2 | 3 | 4;
+    /** Sets `name` in Geist Mono, for Kubernetes object names. */
+    mono?: boolean;
+    /** Shows a skeleton card while the resource loads. */
+    loading?: boolean;
+    /** Greys the card out and turns off its link and click, e.g. for a cluster that isn't active yet. */
+    disabled?: 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 logo or icon. */
+    logo?: () => unknown;
+    /** Replaces the status badge and tags. */
+    tags?: () => unknown;
+    /** Buttons at the top right, e.g. a "Trigger drill" button. Old `custom-option` / `header-right`. */
+    actions?: () => unknown;
+    /** `AcDropdownItem`s for the ⋮ actions menu. The card renders the menu. Old `options` with `showOptions`. */
+    menu?: () => unknown;
+    /** Custom value for the detail with that key, e.g. `#detail-age`. */
+    [name: `detail-${string}`]: (props: {
+        detail: ResourceDetail;
+    }) => unknown;
+    /** Extra content under the details. */
+    default?: () => unknown;
+    /** A row at the bottom, above a divider, e.g. a compliance note and a link. */
+    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;
+}>, {
+    details: ResourceDetail[];
+    disabled: boolean;
+    icon: Component;
+    target: string;
+    href: string;
+    to: string | Record<string, unknown>;
+    status: string;
+    loading: boolean;
+    subtitle: string;
+    mono: boolean;
+    logo: string;
+    logoAlt: string;
+    statusColor: Tone | "default";
+    columns: 1 | 2 | 3 | 4;
+    statusLoading: boolean;
+    tags: (ResourceTag | string)[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,203 @@
+import e from "./AcSpinner.js";
+import t from "./AcBadge.js";
+import n from "./AcSkeleton.js";
+import r from "./AcTag.js";
+import i from "./AcDropdown.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as h, mergeProps as g, normalizeClass as _, openBlock as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as w, useSlots as T, withCtx as E } from "vue";
+//#region src/lib/components/AcResourceCard.vue?vue&type=script&setup=true&lang.ts
+var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-start gap-3 p-4" }, k = ["aria-hidden"], A = ["src", "alt"], j = { class: "min-w-0 flex-1" }, M = ["id", "title"], N = ["title"], P = {
+	key: 1,
+	class: "mt-2 flex flex-wrap items-center gap-1.5"
+}, F = {
+	key: 1,
+	class: "relative z-10 -mt-1 -mr-1.5 flex shrink-0 items-center gap-1.5"
+}, I = { class: "truncate text-xs text-muted" }, L = { class: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5 text-base font-medium text-heading" }, R = {
+	key: 0,
+	class: "text-muted",
+	"aria-label": "Not set"
+}, z = {
+	key: 2,
+	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border-light px-4 py-3 text-xs text-muted"
+}, B = /*@__PURE__*/ m({
+	__name: "AcResourceCard",
+	props: {
+		name: {},
+		subtitle: { default: "" },
+		logo: { default: "" },
+		logoAlt: { default: "" },
+		icon: { default: void 0 },
+		status: { default: "" },
+		statusColor: { default: "default" },
+		statusLoading: {
+			type: Boolean,
+			default: !1
+		},
+		tags: { default: () => [] },
+		details: { default: () => [] },
+		columns: { default: 2 },
+		mono: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		to: { default: void 0 },
+		href: { default: void 0 },
+		target: { default: void 0 }
+	},
+	emits: ["click"],
+	setup(m, { emit: B }) {
+		let V = m, H = B, U = T(), W = {
+			1: "",
+			2: "grid-cols-2",
+			3: "grid-cols-2 sm:grid-cols-3",
+			4: "grid-cols-2 sm:grid-cols-4"
+		}, G = h(), K = G?.appContext.components.RouterLink, q = w(), J = o(() => V.tags.map((e) => typeof e == "string" ? { label: e } : e)), Y = o(() => {
+			if (V.disabled) return null;
+			if (V.to !== void 0 && K) return {
+				is: K,
+				to: V.to
+			};
+			let e = V.href ?? (typeof V.to == "string" ? V.to : void 0);
+			return e ? {
+				is: "a",
+				href: e,
+				target: V.target,
+				rel: V.target === "_blank" ? "noopener noreferrer" : void 0
+			} : null;
+		});
+		function X() {
+			return !Y.value && !V.disabled && !!G?.vnode.props?.onClick;
+		}
+		function Z(e) {
+			return e == null || e === "";
+		}
+		function Q(e) {
+			H("click", e);
+		}
+		return (o, h) => m.loading ? (v(), s(n, {
+			key: 0,
+			shape: "info-card",
+			label: `Loading ${m.name || "resource"}`,
+			"data-ac-ds": "",
+			"data-testid": "ac-resource-card"
+		}, null, 8, ["label"])) : (v(), l("article", {
+			key: 1,
+			class: _(["group relative flex min-w-0 flex-col rounded-10 border border-border bg-surface 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", [(Y.value || X()) && "hover:border-border-dark hover:shadow-sm", m.disabled && "opacity-60"]]),
+			"aria-labelledby": `${C(q)}-name`,
+			"aria-disabled": m.disabled || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-resource-card"
+		}, [
+			u("div", O, [
+				U.logo || m.logo || m.icon ? (v(), l("span", {
+					key: 0,
+					class: _(["inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-8 border border-border-light bg-surface-muted", m.logo ? "p-1.5" : "text-label [&_svg]:size-5"]),
+					"aria-hidden": m.logo && m.logoAlt ? void 0 : "true"
+				}, [b(o.$slots, "logo", {}, () => [m.logo ? (v(), l("img", {
+					key: 0,
+					src: m.logo,
+					alt: m.logoAlt,
+					class: "size-full object-contain"
+				}, null, 8, A)) : (v(), s(x(m.icon), { key: 1 }))])], 10, k)) : c("", !0),
+				u("div", j, [
+					u("h3", {
+						id: `${C(q)}-name`,
+						class: _(["truncate text-lg leading-6 font-semibold tracking-[-0.01em] text-heading", m.mono && "font-mono text-base tracking-tight"]),
+						title: m.name
+					}, [Y.value ? (v(), s(x(Y.value.is), g({ key: 0 }, {
+						...Y.value,
+						is: void 0
+					}, {
+						"data-ac-card-link": "",
+						class: "outline-none after:absolute after:inset-0 after:rounded-10",
+						onClick: Q
+					}), {
+						default: E(() => [f(S(m.name), 1)]),
+						_: 1
+					}, 16)) : X() ? (v(), l("button", {
+						key: 1,
+						type: "button",
+						"data-ac-card-link": "",
+						class: "max-w-full cursor-pointer truncate text-left outline-none after:absolute after:inset-0 after:rounded-10",
+						onClick: Q
+					}, S(m.name), 1)) : (v(), l(a, { key: 2 }, [f(S(m.name), 1)], 64))], 10, M),
+					m.subtitle ? (v(), l("p", {
+						key: 0,
+						class: "line-clamp-2 text-xs text-muted",
+						title: m.subtitle
+					}, S(m.subtitle), 9, N)) : c("", !0),
+					U.tags || m.status || m.statusLoading || J.value.length ? (v(), l("div", P, [b(o.$slots, "tags", {}, () => [m.statusLoading ? (v(), s(t, {
+						key: 0,
+						color: "default",
+						variant: "light",
+						rounded: ""
+					}, {
+						default: E(() => [p(e, {
+							size: "xs",
+							label: ""
+						}), f(" " + S(m.status || "Loading"), 1)]),
+						_: 1
+					})) : m.status ? (v(), s(t, {
+						key: 1,
+						label: m.status,
+						color: m.statusColor,
+						variant: "light",
+						rounded: "",
+						dot: ""
+					}, null, 8, ["label", "color"])) : c("", !0), (v(!0), l(a, null, y(J.value, (t, n) => (v(), s(r, {
+						key: `${t.key ?? ""}${t.label}${n}`,
+						label: t.key ? "" : t.label,
+						"key-label": t.key ?? "",
+						"value-label": t.key ? t.label : "",
+						color: t.color ?? "neutral",
+						rounded: ""
+					}, d({ _: 2 }, [t.loading ? {
+						name: "icon",
+						fn: E(() => [p(e, {
+							size: "xs",
+							label: ""
+						})]),
+						key: "0"
+					} : void 0]), 1032, [
+						"label",
+						"key-label",
+						"value-label",
+						"color"
+					]))), 128))])])) : c("", !0)
+				]),
+				U.actions || U.menu ? (v(), l("div", F, [b(o.$slots, "actions"), U.menu ? (v(), s(i, {
+					key: 0,
+					align: "end",
+					"menu-label": `Actions for ${m.name}`
+				}, {
+					default: E(() => [b(o.$slots, "menu")]),
+					_: 3
+				}, 8, ["menu-label"])) : c("", !0)])) : c("", !0)
+			]),
+			m.details.length ? (v(), l("dl", {
+				key: 0,
+				class: _(["grid gap-x-4 gap-y-3 border-t border-border-light px-4 py-3.5", W[m.columns]])
+			}, [(v(!0), l(a, null, y(m.details, (e, t) => (v(), l("div", {
+				key: e.key ?? `${e.label}${t}`,
+				class: "min-w-0"
+			}, [u("dt", I, S(e.label), 1), u("dd", L, [b(o.$slots, `detail-${e.key}`, { detail: e }, () => [Z(e.value) ? (v(), l("span", R, "—")) : (v(), l("span", {
+				key: 1,
+				class: _(["min-w-0 break-words", e.mono && "font-mono text-[length:calc(12.5px*var(--ac-scale))]"])
+			}, S(e.value), 3))])])]))), 128))], 2)) : c("", !0),
+			U.default ? (v(), l("div", {
+				key: 1,
+				class: _(["border-t border-border-light px-4 py-3.5 text-base text-body", m.details.length > 0 && "border-t-0 pt-0"])
+			}, [b(o.$slots, "default")], 2)) : c("", !0),
+			U.footer ? (v(), l("div", z, [b(o.$slots, "footer")])) : c("", !0)
+		], 10, D));
+	}
+});
+//#endregion
+export { B as default };

package/dist/lib/components/AcSearchBar.js

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