@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,15 +1,18 @@
 export interface Props {
-    /** Corner of the screen. On phones (under 640px) toasts span the width at the same top or bottom edge. */
-    position?: "bottom-right" | "bottom-center" | "top-right" | "top-center";
+    /** Corner of the screen. `top-right` sits 80px from the top, under an app navbar, as cloud-ui. On phones (under 640px) toasts span the width at the same edge. */
+    position?: "top-right" | "top-center" | "bottom-right" | "bottom-center";
     /** How many toasts show at once (phones show at most 3). Newer ones queue behind and their timers wait until they're shown. */
     max?: number;
+    /** Shows the shrinking 2px time bar on every toast. A toast's own `progress` option wins. */
+    progress?: boolean;
     /** Accessible name of the notification region. */
     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;
+    progress: boolean;
     max: number;
-    position: "bottom-right" | "bottom-center" | "top-right" | "top-center";
+    position: "top-right" | "top-center" | "bottom-right" | "bottom-center";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,166 +1,199 @@
 import e from "./AcButton.js";
 import { useToast as t } from "../composables/useToast.js";
 import { Fragment as n, Teleport as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, watch as x, withCtx as S } from "vue";
-import { CircleAlert as C, CircleCheck as w, Info as T, TriangleAlert as E, X as D } from "@lucide/vue";
+import { CircleCheck as C, CircleX as w, Info as T, TriangleAlert as E, X as D } from "@lucide/vue";
 //#region src/lib/components/AcToaster.vue?vue&type=script&setup=true&lang.ts
 var O = ["aria-label"], k = {
 	class: "sr-only",
 	role: "status",
 	"aria-live": "polite",
 	"aria-atomic": "true"
-}, A = {
+}, ee = {
 	class: "sr-only",
 	role: "alert",
 	"aria-live": "assertive",
 	"aria-atomic": "true"
-}, j = ["data-tone"], M = { class: "min-w-0 flex-1 py-px" }, N = ["aria-label", "onClick"], P = 3, F = /*@__PURE__*/ d({
+}, te = ["data-tone"], ne = { class: "flex min-w-0 flex-1 flex-col gap-0.5" }, re = { class: "text-base leading-[1.35] font-semibold break-words text-heading" }, ie = {
+	key: 0,
+	class: "text-[13px] leading-[1.45] break-words text-muted"
+}, ae = ["aria-label", "onClick"], A = ["data-toast-bar"], j = 3, M = "transition-[opacity,translate] duration-300 ease-[cubic-bezier(0.21,1.02,0.73,1)] motion-reduce:duration-150", N = /*@__PURE__*/ d({
 	__name: "AcToaster",
 	props: {
-		position: { default: "bottom-right" },
+		position: { default: "top-right" },
 		max: { default: 5 },
+		progress: {
+			type: Boolean,
+			default: !1
+		},
 		label: { default: "Notifications" }
 	},
 	setup(d) {
-		let F = d, I = (e) => `bg-surface bg-[image:linear-gradient(var(--color-${e}),var(--color-${e}))]`, L = {
+		let N = d, P = {
 			neutral: {
-				icon_class: "",
+				iconClass: "",
 				box: "border-border bg-surface",
-				title: "text-heading",
-				text: "text-muted"
+				bar: "bg-muted"
 			},
 			success: {
-				icon: w,
-				icon_class: "text-green-40",
-				box: `border-green-80 ${I("green-95")}`,
-				title: "text-green-10",
-				text: "text-green-20"
+				icon: C,
+				iconClass: "text-success",
+				box: "border-border bg-surface",
+				bar: "bg-success"
 			},
 			error: {
-				icon: C,
-				icon_class: "text-red-40",
-				box: `border-red-80 ${I("red-95")}`,
-				title: "text-red-10",
-				text: "text-red-20"
+				icon: w,
+				iconClass: "text-danger",
+				box: "border-danger/25 bg-[color-mix(in_srgb,var(--color-danger)_8%,var(--color-surface))]",
+				bar: "bg-danger"
 			},
 			warning: {
 				icon: E,
-				icon_class: "text-yellow-50",
-				box: `border-yellow-70 ${I("yellow-95")}`,
-				title: "text-yellow-10",
-				text: "text-yellow-20"
+				iconClass: "text-warning",
+				box: "border-border bg-surface",
+				bar: "bg-warning"
 			},
 			info: {
 				icon: T,
-				icon_class: "text-blue-50",
-				box: `border-blue-80 ${I("blue-95")}`,
-				title: "text-blue-10",
-				text: "text-blue-20"
+				iconClass: "text-info",
+				box: "border-border bg-surface",
+				bar: "bg-info"
 			}
-		}, R = {
-			"bottom-right": "bottom-3 sm:bottom-6 sm:right-6",
-			"bottom-center": "bottom-3 sm:bottom-6 sm:left-1/2 sm:-translate-x-1/2",
-			"top-right": "top-3 sm:top-6 sm:right-6",
-			"top-center": "top-3 sm:top-6 sm:left-1/2 sm:-translate-x-1/2"
-		}, { toasts: z, dismiss: B } = t(), V = g(""), H = g(""), U = /* @__PURE__ */ new Map(), W = !1, G = /* @__PURE__ */ new Set(), K = a(() => F.position.startsWith("top")), q = a(() => {
-			let e = z.value.slice(-F.max);
-			return K.value ? [...e].reverse() : e;
-		});
+		}, F = {
+			"top-right": "top-20 sm:right-5",
+			"top-center": "top-20 sm:left-1/2 sm:-translate-x-1/2",
+			"bottom-right": "bottom-5 sm:right-5",
+			"bottom-center": "bottom-5 sm:left-1/2 sm:-translate-x-1/2"
+		}, { toasts: I, dismiss: L } = t(), R = g(null), z = g(""), B = g(""), V = /* @__PURE__ */ new Map(), H = !1, U = /* @__PURE__ */ new Set(), W = a(() => N.position.startsWith("top")), G = a(() => I.value.slice(-N.max)), K = a(() => N.position.endsWith("right") ? "opacity-0 motion-safe:translate-x-[120%]" : W.value ? "opacity-0 motion-safe:-translate-y-2" : "opacity-0 motion-safe:translate-y-2");
+		function q(e) {
+			return e.duration > 0 && (e.progress ?? N.progress);
+		}
 		function J(e) {
-			let t = U.get(e);
-			t && !W && (t.started = Date.now(), t.handle = setTimeout(() => B(e), t.remaining));
+			let t = V.get(e);
+			t && !H && (t.started = Date.now(), t.handle = setTimeout(() => L(e), t.remaining), oe(e));
 		}
 		function Y(e) {
-			let t = U.get(e);
-			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started);
+			let t = V.get(e);
+			t?.handle && (clearTimeout(t.handle), t.handle = void 0, t.remaining -= Date.now() - t.started, t.bar?.pause());
+		}
+		async function oe(e) {
+			await f();
+			let t = V.get(e);
+			if (t?.handle) {
+				if (t.bar) return t.bar.play();
+				t.bar = (R.value?.querySelector(`[data-toast-bar="${CSS.escape(e)}"]`))?.animate([{ transform: "scaleX(1)" }, { transform: "scaleX(0)" }], {
+					duration: t.duration,
+					fill: "forwards"
+				});
+			}
 		}
-		function X() {
-			W = !0, U.forEach((e, t) => Y(t));
+		function X(e, t = !1) {
+			Y(e), t && V.get(e)?.bar?.cancel(), V.delete(e);
 		}
 		function Z() {
-			W = !1, U.forEach((e, t) => J(t));
+			H = !0, V.forEach((e, t) => Y(t));
 		}
-		function Q(e) {
-			e.currentTarget.contains(e.relatedTarget) || Z();
+		function Q() {
+			H = !1, V.forEach((e, t) => J(t));
 		}
 		function $(e) {
+			e.currentTarget.contains(e.relatedTarget) || Q();
+		}
+		function se(e) {
 			let t = new Set(e.map((e) => e.id));
-			for (let [e] of U) t.has(e) || (Y(e), U.delete(e));
-			for (let t of e) U.get(t.id)?.version !== t.version && (Y(t.id), U.delete(t.id), t.duration > 0 && (U.set(t.id, {
+			for (let [e] of V) t.has(e) || X(e);
+			for (let t of e) V.get(t.id)?.version !== t.version && (X(t.id, !0), t.duration > 0 && (V.set(t.id, {
 				version: t.version,
+				duration: t.duration,
 				remaining: t.duration,
 				started: 0
 			}), J(t.id)));
 		}
-		async function ee(e) {
-			let t = e.filter((e) => !G.has(`${e.id}:${e.version}`));
-			if (G = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
+		async function ce(e) {
+			let t = e.filter((e) => !U.has(`${e.id}:${e.version}`));
+			if (U = new Set(e.map((e) => `${e.id}:${e.version}`)), !t.length) return;
 			let n = (e) => /[.!?…]$/.test(e.trim()) ? e.trim() : `${e.trim()}.`, r = (e) => e.flatMap((e) => [e.title, e.description ?? ""].filter(Boolean).map(n)).join(" "), i = t.filter((e) => e.tone === "error"), a = t.filter((e) => e.tone !== "error");
-			V.value = "", H.value = "", await f(), a.length && (V.value = r(a)), i.length && (H.value = r(i));
+			z.value = "", B.value = "", await f(), a.length && (z.value = r(a)), i.length && (B.value = r(i));
 		}
-		function te(e) {
-			e.action?.onClick(), B(e.id);
+		function le(e) {
+			e.action?.onClick(), L(e.id);
 		}
-		return x(q, (e) => {
-			$(e), ee(e);
-		}, { immediate: !0 }), m(() => U.forEach((e) => clearTimeout(e.handle))), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
+		return x(G, (e) => {
+			se(e), ce(e);
+		}, { immediate: !0 }), m(() => V.forEach((e) => {
+			clearTimeout(e.handle), e.bar?.cancel();
+		})), (t, a) => (h(), o(r, { to: "body" }, [l("section", {
+			ref_key: "root",
+			ref: R,
 			"aria-label": d.label,
 			"data-ac-ds": "",
 			"data-testid": "ac-toaster"
 		}, [
-			l("div", k, y(V.value), 1),
-			l("div", A, y(H.value), 1),
+			l("div", k, y(z.value), 1),
+			l("div", ee, y(B.value), 1),
 			u(i, {
 				tag: "ol",
-				class: p(["pointer-events-none fixed inset-x-3 z-[100] flex flex-col gap-2 sm:inset-x-auto sm:w-89", R[d.position]]),
-				"enter-active-class": "transition duration-200 ease-out",
-				"enter-from-class": `opacity-0 ${K.value ? "motion-safe:-translate-y-2" : "motion-safe:translate-y-2"}`,
-				"leave-active-class": "transition duration-150 ease-in",
-				"leave-to-class": "opacity-0 motion-safe:scale-95",
+				class: p(["pointer-events-none fixed inset-x-5 z-[100] flex flex-col gap-3 sm:inset-x-auto sm:w-[384px]", F[d.position]]),
+				"enter-active-class": M,
+				"enter-from-class": K.value,
+				"leave-active-class": M,
+				"leave-to-class": K.value,
 				"move-class": "motion-safe:transition-transform motion-safe:duration-200",
-				onPointerenter: X,
-				onPointerleave: Z,
-				onFocusin: X,
-				onFocusout: Q
+				onPointerenter: Z,
+				onPointerleave: Q,
+				onFocusin: Z,
+				onFocusout: $
 			}, {
-				default: S(() => [(h(!0), c(n, null, _(q.value, (t, n) => (h(), c("li", {
+				default: S(() => [(h(!0), c(n, null, _(G.value, (t, n) => (h(), c("li", {
 					key: t.id,
-					class: p(["pointer-events-auto flex items-start gap-3 rounded-10 border py-3 pr-2.5 pl-3.5 shadow-lg", [L[t.tone].box, (K.value ? n : q.value.length - 1 - n) >= P && "max-sm:hidden"]]),
+					class: p(["pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-10 border py-3.5 pl-4 shadow-md", [
+						P[t.tone].box,
+						t.dismissible ? "pr-10" : "pr-4",
+						G.value.length - 1 - n >= j && "max-sm:hidden"
+					]]),
 					"data-ac-ds": "",
 					"data-testid": "ac-toast",
 					"data-tone": t.tone
 				}, [
-					L[t.tone].icon ? (h(), o(v(L[t.tone].icon), {
+					P[t.tone].icon ? (h(), o(v(P[t.tone].icon), {
 						key: 0,
-						class: p(["mt-0.5 size-4 shrink-0", L[t.tone].icon_class]),
+						class: p(["mt-px size-5 shrink-0", P[t.tone].iconClass]),
+						"stroke-width": 2.25,
 						"aria-hidden": "true"
 					}, null, 8, ["class"])) : s("", !0),
-					l("div", M, [l("p", { class: p(["text-base font-medium", L[t.tone].title]) }, y(t.title), 3), t.description ? (h(), c("p", {
-						key: 0,
-						class: p(["mt-0.5 text-base", L[t.tone].text])
-					}, y(t.description), 3)) : s("", !0)]),
+					l("div", ne, [l("p", re, y(t.title), 1), t.description ? (h(), c("p", ie, y(t.description), 1)) : s("", !0)]),
 					t.action ? (h(), o(e, {
 						key: 1,
 						title: t.action.label,
 						size: "small",
 						color: "white",
-						class: "shrink-0",
-						onClick: (e) => te(t)
+						class: "-my-1 shrink-0",
+						onClick: (e) => le(t)
 					}, null, 8, ["title", "onClick"])) : s("", !0),
 					t.dismissible ? (h(), c("button", {
 						key: 2,
 						type: "button",
-						class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-6 opacity-70 transition hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+						class: "absolute top-2 right-2 inline-flex size-6 cursor-pointer items-center justify-center rounded-6 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 						"aria-label": `Dismiss: ${t.title}`,
-						onClick: (e) => b(B)(t.id)
+						onClick: (e) => b(L)(t.id)
 					}, [u(b(D), {
 						class: "size-3.5",
 						"aria-hidden": "true"
-					})], 8, N)) : s("", !0)
-				], 10, j))), 128))]),
+					})], 8, ae)) : s("", !0),
+					q(t) ? (h(), c("span", {
+						key: 3,
+						"data-toast-bar": t.id,
+						class: p(["absolute bottom-0 left-0 h-0.5 w-full origin-left opacity-70 motion-reduce:hidden", P[t.tone].bar]),
+						"aria-hidden": "true"
+					}, null, 10, A)) : s("", !0)
+				], 10, te))), 128))]),
 				_: 1
-			}, 8, ["class", "enter-from-class"])
+			}, 8, [
+				"class",
+				"enter-from-class",
+				"leave-to-class"
+			])
 		], 8, O)]));
 	}
 });
 //#endregion
-export { F as default };
+export { N as default };

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

@@ -1,28 +1,48 @@
+type Side = "top" | "bottom" | "left" | "right";
 export interface Props {
-    /** The hint text. Keep it to a few words; use the `content` slot for richer text. */
+    /** The hint text, in a dark bubble up to `max-width` wide. Keep it to a few words; use the `content` slot for richer text. */
     content?: string;
+    /** Bold first line above `content`, for a hint that needs a heading: "Read-only replica". */
+    title?: string;
     /** Preferred side of the trigger. It flips to the opposite side when there isn't room. */
-    placement?: "top" | "bottom" | "left" | "right";
-    /** Milliseconds to wait on hover before showing. Keyboard focus shows it immediately. */
+    placement?: Side;
+    /** Lines the bubble up with the trigger's start, centre or end. The arrow keeps pointing at the trigger's centre. */
+    align?: "start" | "center" | "end";
+    /** Adds a status icon before the text: `info`, `success`, `warning` or `danger`. */
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
+    /** Keyboard keys shown as small chips after the text, e.g. `["⌘", "K"]`. */
+    shortcut?: string[];
+    /** Milliseconds to wait on hover before showing. Keyboard focus, and a pointer moving over from another open tooltip, show it at once. */
     delay?: number;
     /** Turns the tooltip off, e.g. while a menu from the same button is open. */
     disabled?: boolean;
+    /** Lets the pointer move onto the bubble without closing it, e.g. to select and copy an ID. */
+    interactive?: boolean;
+    /** Shows the tooltip only when the trigger's text is cut off, for truncated names in tables. */
+    overflowOnly?: boolean;
+    /** Widest the bubble grows before wrapping, as a CSS length. */
+    maxWidth?: string;
 }
-type __VLS_Slots = {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    title: string;
+    disabled: boolean;
+    tone: "neutral" | "info" | "success" | "warning" | "danger";
+    align: "start" | "center" | "end";
+    content: string;
+    placement: Side;
+    shortcut: string[];
+    delay: number;
+    interactive: boolean;
+    overflowOnly: boolean;
+    maxWidth: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** The trigger: a button, icon button, link or any focusable element. It gets `aria-describedby`. */
     default?: () => unknown;
     /** Tooltip content instead of the `content` prop. Text only; no links or buttons, since it can't be reached by Tab. */
     content?: () => unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    disabled: boolean;
-    content: string;
-    placement: "top" | "bottom" | "left" | "right";
-    delay: number;
-}, {}, {}, {}, 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;