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

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

@@ -0,0 +1,441 @@
+import e from "./AcSpinner.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as ee, nextTick as te, normalizeClass as p, normalizeStyle as ne, onBeforeUnmount as re, openBlock as m, ref as h, renderList as g, renderSlot as ie, toDisplayString as _, unref as v, useAttrs as ae, useId as oe, useModel as se, vModelText as ce, watch as le, withCtx as ue, withDirectives as de, withModifiers as y } from "vue";
+import { Check as fe, ChevronDown as pe, CircleAlert as me, Plus as he, RefreshCw as ge, Search as _e, X as ve } from "@lucide/vue";
+//#region src/lib/components/AcSelect.vue?vue&type=script&setup=true&lang.ts
+var ye = { class: "relative" }, be = [
+	"id",
+	"tabindex",
+	"aria-expanded",
+	"aria-labelledby",
+	"aria-label",
+	"aria-disabled",
+	"aria-invalid",
+	"aria-required",
+	"aria-activedescendant"
+], xe = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-1" }, Se = { class: "truncate" }, Ce = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], we = {
+	key: 1,
+	class: "truncate"
+}, Te = {
+	key: 2,
+	class: "truncate text-muted"
+}, Ee = { class: "flex shrink-0 items-center gap-0.5 text-muted" }, De = ["disabled"], Oe = ["for"], ke = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, Ae = {
+	key: 0,
+	class: "mt-1.5 flex items-center gap-1 text-xs text-red-30"
+}, je = {
+	key: 1,
+	class: "mt-1.5 text-xs text-muted"
+}, Me = {
+	key: 0,
+	class: "border-b border-border-light p-1.5"
+}, Ne = { class: "relative" }, Pe = ["aria-activedescendant"], Fe = ["aria-multiselectable", "aria-labelledby"], Ie = {
+	key: 0,
+	role: "presentation",
+	class: "px-2.5 pt-2.5 pb-1 text-[11px] font-medium tracking-wide text-muted uppercase first:pt-1.5"
+}, Le = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"onMouseenter",
+	"onClick"
+], Re = { class: "min-w-0 flex-1" }, ze = {
+	key: 0,
+	class: "block truncate text-xs text-muted"
+}, Be = ["id"], Ve = { class: "min-w-0 flex-1 truncate" }, He = {
+	key: 1,
+	role: "presentation",
+	class: "px-3 py-6 text-center text-base text-muted"
+}, Ue = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "AcSelect",
+	props: /*@__PURE__*/ f({
+		options: {},
+		by: {
+			type: [String, Function],
+			default: void 0
+		},
+		label: { default: "" },
+		placeholder: { default: "Select…" },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		searchable: {
+			type: Boolean,
+			default: !1
+		},
+		creatable: {
+			type: Boolean,
+			default: !1
+		},
+		createText: { default: "Add" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		refreshable: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "small" },
+		noResultText: { default: "No results" }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f([
+		"select",
+		"create",
+		"remove",
+		"search",
+		"refresh"
+	], ["update:modelValue"]),
+	setup(d, { expose: f, emit: Ue }) {
+		let b = d, x = Ue, S = se(d, "modelValue"), C = oe(), w = ae(), We = i(() => ({
+			class: w.class,
+			style: w.style
+		})), Ge = i(() => {
+			let { class: e, style: t, ...n } = w;
+			return n;
+		}), T = `${C}-list`, E = `${C}-label`, Ke = h(null), D = h(null), O = h(null), qe = h(null), k = h(!1), A = h(""), j = h(-1), M = h({
+			left: 0,
+			width: 0,
+			maxHeight: 280
+		}), N = i(() => {
+			let e = S.value;
+			return e == null || e === "" ? [] : Array.isArray(e) ? e : [e];
+		}), P = (e, t) => {
+			let n = b.by;
+			return typeof n == "function" ? n(e, t) : n && e && t && typeof e == "object" && typeof t == "object" ? e[n] === t[n] : e === t;
+		}, F = (e) => {
+			let t = b.by;
+			return String(typeof t == "string" && e && typeof e == "object" ? e[t] : e);
+		}, Je = (e, t) => {
+			let n = b.by;
+			return e && typeof e == "object" ? typeof n == "string" ? String(e[n]) : `i${t}` : String(e);
+		}, I = (e) => N.value.some((t) => P(t, e.value)), L = i(() => N.value.map((e) => b.options.find((t) => P(t.value, e)) ?? {
+			value: e,
+			label: F(e)
+		})), R = i(() => N.value.length > 0), Ye = (e) => {
+			if (!e.some((e) => e.group)) return e;
+			let t = [];
+			return e.forEach((e) => {
+				let n = e.group ?? "";
+				t.includes(n) || t.push(n);
+			}), [...e].sort((e, n) => t.indexOf(e.group ?? "") - t.indexOf(n.group ?? ""));
+		}, z = i(() => {
+			let e = A.value.trim().toLowerCase();
+			return Ye(e ? b.options.filter((t) => t.label.toLowerCase().includes(e) || t.description?.toLowerCase().includes(e) || t.group?.toLowerCase().includes(e)) : b.options);
+		}), Xe = i(() => {
+			let e = [];
+			return z.value.forEach((t, n) => {
+				let r = t.group ?? "", i = e.find((e) => e.name === r);
+				i || e.push(i = {
+					name: r,
+					items: []
+				}), i.items.push({
+					option: t,
+					index: n
+				});
+			}), e;
+		}), B = (e) => `${C}-opt-${e}`, V = i(() => A.value.trim()), H = i(() => {
+			let e = V.value.toLowerCase();
+			if (!b.creatable || !b.searchable || !e) return !1;
+			let t = b.options.some((t) => t.label.toLowerCase() === e || F(t.value).toLowerCase() === e), n = N.value.some((t) => F(t).toLowerCase() === e);
+			return !t && !n;
+		}), U = i(() => z.value.length + +!!H.value - 1), W = i(() => z.value.length), Ze = () => {
+			let e = D.value;
+			if (!e) return;
+			let t = e.getBoundingClientRect(), n = window.innerHeight - t.bottom - 6 - 8, r = t.top - 6 - 8;
+			M.value = n < 180 && r > n ? {
+				bottom: window.innerHeight - t.top + 6,
+				left: t.left,
+				width: t.width,
+				maxHeight: Math.min(300, r)
+			} : {
+				top: t.bottom + 6,
+				left: t.left,
+				width: t.width,
+				maxHeight: Math.min(300, n)
+			};
+		}, G = (e = 0, t = 1) => {
+			for (let n = e; n >= 0 && n <= U.value; n += t) if (!z.value[n]?.disabled) return n;
+			return -1;
+		}, Qe = async () => {
+			if (b.disabled || b.loading || k.value) return;
+			k.value = !0, A.value = "", Ze();
+			let e = z.value.findIndex((e) => I(e));
+			j.value = e >= 0 ? e : G(), await te(), b.searchable && qe.value?.focus(), Y();
+		}, K = (e = !0) => {
+			k.value && (k.value = !1, j.value = -1, e && D.value?.focus());
+		}, $e = () => k.value ? K() : Qe(), et = (e) => {
+			if (!e.disabled) {
+				if (b.multiple) {
+					let t = [...N.value], n = t.findIndex((t) => P(t, e.value));
+					n >= 0 ? (t.splice(n, 1), x("remove", e)) : (t.push(e.value), x("select", e)), S.value = t;
+				} else S.value = e.value, x("select", e), K();
+			}
+		}, q = (e) => {
+			S.value = b.multiple ? N.value.filter((t) => !P(t, e.value)) : null, x("remove", e);
+		}, tt = () => {
+			let e = V.value;
+			if (!H.value || !e) return;
+			let t = e, n = {
+				value: t,
+				label: e
+			};
+			b.multiple ? (S.value = [...N.value, t], A.value = "") : (S.value = t, K()), x("select", n), x("create", e);
+		}, nt = () => {
+			L.value.forEach((e) => x("remove", e)), S.value = b.multiple ? [] : null, D.value?.focus();
+		}, J = "", rt, Y = () => te(() => O.value?.querySelector(`#${CSS.escape(B(j.value))}`)?.scrollIntoView({ block: "nearest" })), it = (e) => {
+			let t = U.value + 1;
+			if (!t) return;
+			let n = j.value;
+			for (let r = 0; r < t && (n = (n + e + t) % t, z.value[n]?.disabled); r++);
+			j.value = n, Y();
+		}, at = (e) => {
+			if (b.disabled) return;
+			let t = e.key;
+			if (!k.value) {
+				[
+					"Enter",
+					" ",
+					"ArrowDown",
+					"ArrowUp"
+				].includes(t) ? (e.preventDefault(), Qe()) : t === "Backspace" && b.multiple && R.value && e.target === D.value && q(L.value[L.value.length - 1]);
+				return;
+			}
+			if (t === "ArrowDown") e.preventDefault(), it(1);
+			else if (t === "ArrowUp") e.preventDefault(), it(-1);
+			else if (t === "Home") e.preventDefault(), j.value = G(), Y();
+			else if (t === "End") e.preventDefault(), j.value = G(U.value, -1), Y();
+			else if (t === "Enter" || t === " " && !b.searchable) {
+				e.preventDefault();
+				let t = z.value[j.value];
+				t ? et(t) : H.value && tt();
+			} else if (t === "Escape") e.preventDefault(), K();
+			else if (t === "Tab") K(!1);
+			else if (!b.searchable && t.length === 1 && !e.metaKey && !e.ctrlKey) {
+				J += t.toLowerCase(), clearTimeout(rt), rt = setTimeout(() => J = "", 500);
+				let e = z.value.findIndex((e) => !e.disabled && e.label.toLowerCase().startsWith(J));
+				e >= 0 && (j.value = e, Y());
+			}
+		}, ot = (e) => {
+			let t = e.target;
+			Ke.value?.contains(t) || O.value?.contains(t) || K(!1);
+		}, X = (e) => {
+			e && O.value?.contains(e.target) || Ze();
+		}, st = () => {
+			document.removeEventListener("pointerdown", ot, !0), window.removeEventListener("scroll", X, !0), window.removeEventListener("resize", X);
+		};
+		le(k, (e) => {
+			if (!e) return st();
+			document.addEventListener("pointerdown", ot, !0), window.addEventListener("scroll", X, !0), window.addEventListener("resize", X);
+		}), le(A, (e) => {
+			x("search", e), j.value = G();
+		}), re(st);
+		let Z = h(!1), Q = i(() => k.value || Z.value), ct = i(() => !!b.label && (R.value || Q.value)), $ = i(() => !b.multiple && L.value[0]?.label || "");
+		return f({ focus: () => D.value?.focus() }), (i, f) => (m(), s("div", ee({
+			ref_key: "root",
+			ref: Ke
+		}, We.value, {
+			class: ["w-full", d.disabled && "opacity-60"],
+			"data-ac-ds": "",
+			"data-testid": "ac-select"
+		}), [
+			c("div", ye, [c("div", ee({
+				id: `${v(C)}-trigger`,
+				ref_key: "trigger",
+				ref: D
+			}, Ge.value, {
+				role: "combobox",
+				tabindex: d.disabled ? -1 : 0,
+				"aria-haspopup": "listbox",
+				"aria-expanded": k.value,
+				"aria-controls": T,
+				"aria-labelledby": d.label ? E : void 0,
+				"aria-label": d.label ? void 0 : d.placeholder,
+				"aria-disabled": d.disabled || void 0,
+				"aria-invalid": !!d.errorMsg || void 0,
+				"aria-required": d.required || void 0,
+				"aria-activedescendant": k.value && !d.searchable && j.value >= 0 ? B(j.value) : void 0,
+				class: ["group flex w-full items-center gap-2 rounded-6 border bg-surface pr-2 pl-3 text-left text-base text-heading shadow-xs transition-[border-color,box-shadow] duration-150 outline-none", [
+					d.size === "compact" ? "min-h-8" : d.size === "small" ? "min-h-9" : "min-h-10",
+					d.multiple && R.value ? "py-1.5" : "",
+					d.label && R.value && d.multiple ? "pt-2.5" : "",
+					d.disabled || d.loading ? "cursor-not-allowed" : "cursor-pointer",
+					d.errorMsg ? ["border-red-60", Q.value && "border-danger shadow-[0_0_0_3px_var(--color-red-90)]"] : Q.value ? "focus-ring" : "border-border hover:border-border-dark"
+				]],
+				onClick: $e,
+				onKeydown: at,
+				onFocus: f[1] ||= (e) => Z.value = !0,
+				onBlur: f[2] ||= (e) => Z.value = !1
+			}), [c("div", xe, [d.multiple && R.value ? (m(!0), s(t, { key: 0 }, g(L.value, (e, t) => (m(), s("span", {
+				key: Je(e.value, t),
+				class: "inline-flex h-6 max-w-full items-center gap-1 rounded-4 bg-surface-sunken pr-0.5 pl-2 text-xs font-medium text-heading ring-1 ring-border ring-inset"
+			}, [c("span", Se, _(e.label), 1), c("button", {
+				type: "button",
+				class: "inline-flex size-4.5 cursor-pointer items-center justify-center rounded-2 text-muted transition hover:bg-slate-80 hover:text-heading",
+				"aria-label": `Remove ${e.label}`,
+				disabled: d.disabled,
+				onClick: y((t) => q(e), ["stop"])
+			}, [u(v(ve), {
+				class: "size-2.5",
+				"stroke-width": 2.5,
+				"aria-hidden": "true"
+			})], 8, Ce)]))), 128)) : $.value ? (m(), s("span", we, _($.value), 1)) : d.label ? o("", !0) : (m(), s("span", Te, _(d.placeholder), 1))]), c("span", Ee, [
+				d.loading ? (m(), a(e, {
+					key: 0,
+					class: "text-primary"
+				})) : d.refreshable ? (m(), s("button", {
+					key: 1,
+					type: "button",
+					class: "inline-flex size-6 cursor-pointer items-center justify-center rounded-4 transition hover:bg-surface-sunken hover:text-heading",
+					"aria-label": "Refresh options",
+					disabled: d.disabled,
+					onClick: f[0] ||= y((e) => x("refresh"), ["stop"])
+				}, [u(v(ge), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				})], 8, De)) : o("", !0),
+				d.clearable && R.value && !d.disabled && !d.loading ? (m(), s("button", {
+					key: 2,
+					type: "button",
+					class: "inline-flex size-6 cursor-pointer items-center justify-center rounded-4 transition hover:bg-surface-sunken hover:text-heading",
+					"aria-label": "Clear selection",
+					onClick: y(nt, ["stop"])
+				}, [u(v(ve), {
+					class: "size-3.5",
+					"aria-hidden": "true"
+				})])) : o("", !0),
+				u(v(pe), {
+					class: p(["size-4 transition-transform duration-200", k.value && "rotate-180 text-heading"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])
+			])], 16, be), d.label ? (m(), s("label", {
+				key: 0,
+				id: E,
+				for: `${v(C)}-trigger`,
+				class: p(["pointer-events-none absolute left-2.5 rounded-2 bg-surface px-1 transition-all duration-150 ease-out", [ct.value ? "top-0 -translate-y-1/2 text-xs font-medium" : "top-1/2 -translate-y-1/2 text-base text-muted", ct.value && (d.errorMsg ? "text-red-30" : Q.value ? "text-primary-20" : "text-label")]])
+			}, [l(_(d.label), 1), d.required ? (m(), s("span", ke, " *")) : o("", !0)], 10, Oe)) : o("", !0)]),
+			d.errorMsg ? (m(), s("p", Ae, [u(v(me), {
+				class: "size-3.5 shrink-0",
+				"aria-hidden": "true"
+			}), l(" " + _(d.errorMsg), 1)])) : d.hint ? (m(), s("p", je, _(d.hint), 1)) : o("", !0),
+			(m(), a(n, { to: "body" }, [u(r, {
+				"enter-active-class": "transition duration-150 ease-out",
+				"enter-from-class": "opacity-0 -translate-y-1 scale-[0.98]",
+				"leave-active-class": "transition duration-100 ease-in",
+				"leave-to-class": "opacity-0"
+			}, {
+				default: ue(() => [k.value ? (m(), s("div", {
+					key: 0,
+					ref_key: "panel",
+					ref: O,
+					class: "fixed z-[90] flex flex-col overflow-hidden rounded-8 border border-border bg-surface shadow-lg",
+					style: ne({
+						top: M.value.top === void 0 ? void 0 : `${M.value.top}px`,
+						bottom: M.value.bottom === void 0 ? void 0 : `${M.value.bottom}px`,
+						left: `${M.value.left}px`,
+						width: `${M.value.width}px`,
+						maxHeight: `${M.value.maxHeight}px`
+					}),
+					"data-ac-ds": "",
+					"data-testid": "ac-select-panel"
+				}, [d.searchable ? (m(), s("div", Me, [c("div", Ne, [u(v(_e), {
+					class: "pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted",
+					"aria-hidden": "true"
+				}), de(c("input", {
+					ref_key: "searchInput",
+					ref: qe,
+					"onUpdate:modelValue": f[3] ||= (e) => A.value = e,
+					type: "text",
+					placeholder: "Search…",
+					"aria-label": "Search options",
+					"aria-controls": T,
+					"aria-activedescendant": j.value >= 0 ? B(j.value) : void 0,
+					class: "h-8 w-full rounded-4 bg-surface-muted pr-2 pl-8 text-base text-heading outline-none placeholder:text-muted focus:bg-surface focus:ring-1 focus:ring-border",
+					onKeydown: at
+				}, null, 40, Pe), [[ce, A.value]])])])) : o("", !0), c("ul", {
+					id: T,
+					role: "listbox",
+					"aria-multiselectable": d.multiple || void 0,
+					"aria-labelledby": d.label ? E : void 0,
+					class: "ac-scrollbar min-h-0 flex-1 p-1"
+				}, [
+					(m(!0), s(t, null, g(Xe.value, (e) => (m(), s(t, { key: e.name }, [e.name ? (m(), s("li", Ie, _(e.name), 1)) : o("", !0), (m(!0), s(t, null, g(e.items, ({ option: e, index: t }) => (m(), s("li", {
+						id: B(t),
+						key: Je(e.value, t),
+						role: "option",
+						"aria-selected": I(e),
+						"aria-disabled": e.disabled || void 0,
+						class: p(["flex cursor-pointer items-start gap-2.5 rounded-6 px-2.5 py-1.5 text-base transition-colors duration-75", [e.disabled ? "cursor-not-allowed opacity-40" : "", t === j.value ? "bg-surface-muted text-heading" : "text-heading"]]),
+						onMouseenter: (n) => !e.disabled && (j.value = t),
+						onMousedown: f[4] ||= y(() => {}, ["prevent"]),
+						onClick: (t) => et(e)
+					}, [
+						d.multiple ? (m(), s("span", {
+							key: 0,
+							class: p(["mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-4 border transition-colors", I(e) ? "border-primary bg-primary text-white shadow-button" : "border-border-dark bg-surface"]),
+							"aria-hidden": "true"
+						}, [I(e) ? (m(), a(v(fe), {
+							key: 0,
+							class: "size-3",
+							"stroke-width": 3,
+							"aria-hidden": "true"
+						})) : o("", !0)], 2)) : o("", !0),
+						c("span", Re, [ie(i.$slots, "option", {
+							option: e,
+							selected: I(e),
+							active: t === j.value
+						}, () => [c("span", { class: p(["block truncate", I(e) && "font-medium"]) }, _(e.label), 3), e.description ? (m(), s("span", ze, _(e.description), 1)) : o("", !0)])]),
+						!d.multiple && I(e) ? (m(), a(v(fe), {
+							key: 1,
+							class: "mt-0.5 size-4 shrink-0 text-primary",
+							"aria-hidden": "true"
+						})) : o("", !0)
+					], 42, Le))), 128))], 64))), 128)),
+					H.value ? (m(), s("li", {
+						key: 0,
+						id: B(W.value),
+						role: "option",
+						"aria-selected": "false",
+						class: p(["flex cursor-pointer items-center gap-2 rounded-6 px-2.5 py-1.5 text-base text-heading transition-colors duration-75", W.value === j.value && "bg-surface-muted"]),
+						"data-testid": "ac-select-create",
+						onMouseenter: f[5] ||= (e) => j.value = W.value,
+						onMousedown: f[6] ||= y(() => {}, ["prevent"]),
+						onClick: tt
+					}, [u(v(he), {
+						class: "size-4 shrink-0 text-primary",
+						"aria-hidden": "true"
+					}), c("span", Ve, _(d.createText) + " “" + _(V.value) + "”", 1)], 42, Be)) : o("", !0),
+					!z.value.length && !H.value ? (m(), s("li", He, [ie(i.$slots, "empty", { query: A.value }, () => [l(_(A.value ? `${d.noResultText} for “${A.value}”` : "No options"), 1)])])) : o("", !0)
+				], 8, Fe)], 4)) : o("", !0)]),
+				_: 3
+			})]))
+		], 16));
+	}
+});
+//#endregion
+export { Ue as default };

package/dist/lib/components/AcSidePanel.js

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

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

@@ -0,0 +1,57 @@
+export interface Props {
+    /** Heading of the panel. */
+    title?: string;
+    /** Optional line under the title. */
+    description?: string;
+    /** Edge the panel slides in from. */
+    side?: "right" | "left";
+    /** Width: `small` 400px, `normal` 520px, `large` 800px, `full` the whole viewport. Phones always get the full width. */
+    size?: "small" | "normal" | "large" | "full";
+    /** Shows the close button and allows Escape to close. Turn off while a required action runs. Old `disable-modal-close` inverted. */
+    closable?: boolean;
+    /** Closes when the backdrop is clicked. Old `ignore-outside-click` inverted. */
+    closeOnOutsideClick?: boolean;
+    /** Hides the footer bar. Old `hide-action-footer`. */
+    hideFooter?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Panel body. Scrolls when it's taller than the viewport. Old `#custom-message`. */
+    default?: () => unknown;
+    /** Replaces the title and description. */
+    header?: () => unknown;
+    /** Buttons next to the close button, e.g. a docs link. */
+    "header-actions"?: () => unknown;
+    /** Right-aligned footer buttons: Cancel, then the primary action. Old `#footer-button`. */
+    footer?: () => unknown;
+    /** Left side of the footer, e.g. a status line. */
+    "footer-left"?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the panel is open. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    size: "small" | "normal" | "large" | "full";
+    closable: boolean;
+    closeOnOutsideClick: boolean;
+    hideFooter: boolean;
+    side: "right" | "left";
+}, {}, {}, {}, 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/AcSidePanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,128 @@
+import { Teleport as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, unref as g, useId as _, useModel as v, watch as y, withCtx as b, withModifiers as x } from "vue";
+import { X as S } from "@lucide/vue";
+//#region src/lib/components/AcSidePanel.vue?vue&type=script&setup=true&lang.ts
+var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 items-start gap-4 border-b border-border-light px-5 py-4" }, T = { class: "min-w-0 flex-1" }, E = ["id"], D = ["id"], O = { class: "-mt-0.5 -mr-1.5 flex shrink-0 items-center gap-1" }, k = {
+	"data-panel-body": "",
+	class: "ac-scrollbar min-h-0 flex-1 px-5 py-5"
+}, A = {
+	key: 0,
+	class: "flex shrink-0 flex-wrap items-center justify-between gap-3 border-t border-border-light bg-surface-muted px-5 py-3"
+}, j = { class: "flex min-w-0 items-center gap-2" }, M = { class: "ml-auto flex items-center gap-2" }, N = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", P = /*@__PURE__*/ s({
+	__name: "AcSidePanel",
+	props: /*@__PURE__*/ c({
+		title: { default: "" },
+		description: { default: "" },
+		side: { default: "right" },
+		size: { default: "normal" },
+		closable: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnOutsideClick: {
+			type: Boolean,
+			default: !0
+		},
+		hideFooter: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["close"], ["update:open"]),
+	setup(s, { emit: c }) {
+		let P = s, F = v(s, "open"), I = c, L = {
+			small: "sm:max-w-100",
+			normal: "sm:max-w-130",
+			large: "sm:max-w-200",
+			full: ""
+		}, R = _(), z = p(null), B = null;
+		function V() {
+			P.closable && (F.value = !1, I("close"));
+		}
+		function H(e) {
+			if (e.key === "Escape") {
+				if (e.defaultPrevented) return;
+				e.stopPropagation(), V();
+			} else if (e.key === "Tab" && z.value) {
+				let t = [...z.value.querySelectorAll(N)].filter((e) => e.offsetParent !== null);
+				if (!t.length) return;
+				let n = t[0], r = t[t.length - 1];
+				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
+			}
+		}
+		function U(e) {
+			let t = document.body, n = Number(t.dataset.acModals ?? 0) + (e ? 1 : -1);
+			if (t.dataset.acModals = String(Math.max(n, 0)), e && n === 1) {
+				let e = window.innerWidth - document.documentElement.clientWidth;
+				t.style.overflow = "hidden", e > 0 && (t.style.paddingRight = `${e}px`);
+			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
+		}
+		return y(F, async (e, t) => {
+			if (e) {
+				B = document.activeElement, U(!0), await l();
+				let e = z.value?.querySelector("[autofocus]");
+				((e && (e.matches(N) ? e : e.querySelector(N))) ?? z.value?.querySelector(`[data-panel-body] ${N}`) ?? z.value)?.focus();
+			} else t && (U(!1), B?.focus?.());
+		}, { immediate: !0 }), d(() => {
+			F.value && U(!1);
+		}), (c, l) => (f(), n(e, { to: "body" }, [o(t, {
+			"enter-active-class": "transition-opacity duration-300 ease-out",
+			"enter-from-class": s.side === "right" ? "opacity-0 [&_[data-panel]]:translate-x-full" : "opacity-0 [&_[data-panel]]:-translate-x-full",
+			"leave-active-class": "transition-opacity duration-200 ease-in",
+			"leave-to-class": s.side === "right" ? "opacity-0 [&_[data-panel]]:translate-x-full" : "opacity-0 [&_[data-panel]]:-translate-x-full"
+		}, {
+			default: b(() => [F.value ? (f(), i("div", {
+				key: 0,
+				class: "fixed inset-0 z-[80] bg-overlay backdrop-blur-[2px]",
+				"data-ac-ds": "",
+				"data-testid": "ac-side-panel",
+				onKeydown: H,
+				onMousedown: l[0] ||= x((e) => s.closeOnOutsideClick && V(), ["self"])
+			}, [a("div", {
+				ref_key: "panel",
+				ref: z,
+				"data-panel": "",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": s.title ? `${g(R)}-title` : void 0,
+				"aria-describedby": s.description ? `${g(R)}-desc` : void 0,
+				tabindex: "-1",
+				class: u(["absolute inset-y-0 flex w-full flex-col bg-surface shadow-xl outline-none transition-transform duration-300 ease-out-soft motion-reduce:transition-none", [
+					s.side === "right" ? "right-0" : "left-0",
+					s.size !== "full" && (s.side === "right" ? "border-border sm:border-l" : "border-border sm:border-r"),
+					L[s.size]
+				]])
+			}, [
+				a("header", w, [a("div", T, [m(c.$slots, "header", {}, () => [a("h4", {
+					id: `${g(R)}-title`,
+					class: "text-[16px] leading-6 tracking-[-0.015em]"
+				}, h(s.title), 9, E), s.description ? (f(), i("p", {
+					key: 0,
+					id: `${g(R)}-desc`,
+					class: "mt-0.5 text-base text-muted"
+				}, h(s.description), 9, D)) : r("", !0)])]), a("div", O, [m(c.$slots, "header-actions"), s.closable ? (f(), i("button", {
+					key: 0,
+					type: "button",
+					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					"aria-label": "Close",
+					"data-ac-ds": "",
+					"data-testid": "ac-side-panel-close",
+					onClick: V
+				}, [o(g(S), {
+					class: "size-4",
+					"aria-hidden": "true"
+				})])) : r("", !0)])]),
+				a("div", k, [m(c.$slots, "default")]),
+				!s.hideFooter && (c.$slots.footer || c.$slots["footer-left"]) ? (f(), i("footer", A, [a("div", j, [m(c.$slots, "footer-left")]), a("div", M, [m(c.$slots, "footer")])])) : r("", !0)
+			], 10, C)], 32)) : r("", !0)]),
+			_: 3
+		}, 8, ["enter-from-class", "leave-to-class"])]));
+	}
+});
+//#endregion
+export { P as default };

package/dist/lib/components/AcSideTabs.js

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