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

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

@@ -0,0 +1,38 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createTextVNode as i, defineComponent as a, inject as o, normalizeClass as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d, useId as f } from "vue";
+//#region src/lib/components/AcFormSection.vue?vue&type=script&setup=true&lang.ts
+var p = ["aria-labelledby", "aria-describedby"], m = { class: "min-w-0 flex-1" }, h = ["id"], g = ["id"], _ = {
+	key: 0,
+	class: "flex shrink-0 items-center gap-2"
+}, v = /*@__PURE__*/ a({
+	__name: "AcFormSection",
+	props: {
+		title: { default: "" },
+		description: { default: "" },
+		layout: { default: void 0 },
+		columns: { default: 1 }
+	},
+	setup(a) {
+		let v = a, y = o("ac-form", null), b = f(), x = e(() => v.layout ?? y?.layout.value ?? "stacked");
+		return (e, o) => (c(), n("div", {
+			role: "group",
+			"aria-labelledby": a.title ? `${d(b)}-title` : void 0,
+			"aria-describedby": a.description || e.$slots.description ? `${d(b)}-desc` : void 0,
+			class: s(["border-t border-border-light py-7 first:border-t-0 first:pt-0", x.value === "aside" && "md:grid md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] md:gap-10"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-form-section"
+		}, [a.title || a.description || e.$slots.description || e.$slots.actions ? (c(), n("div", {
+			key: 0,
+			class: s(["mb-5 flex items-start gap-4", x.value === "aside" && "md:mb-0"])
+		}, [r("div", m, [a.title ? (c(), n("h3", {
+			key: 0,
+			id: `${d(b)}-title`,
+			class: "text-xl leading-6 font-semibold tracking-[-0.01em] text-heading"
+		}, u(a.title), 9, h)) : t("", !0), a.description || e.$slots.description ? (c(), n("div", {
+			key: 1,
+			id: `${d(b)}-desc`,
+			class: "mt-1 text-base text-muted [&_a]:font-medium [&_a]:text-primary-20 [&_a]:underline [&_a]:underline-offset-2"
+		}, [l(e.$slots, "description", {}, () => [i(u(a.description), 1)])], 8, g)) : t("", !0)]), e.$slots.actions && x.value === "stacked" ? (c(), n("div", _, [l(e.$slots, "actions")])) : t("", !0)], 2)) : t("", !0), r("div", { class: s(["grid min-w-0 gap-5", [a.columns === 2 && "sm:grid-cols-2", x.value === "aside" && "md:col-start-2"]]) }, [l(e.$slots, "default")], 2)], 10, p));
+	}
+});
+//#endregion
+export { v as default };

package/dist/lib/components/AcHeader.js

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

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

@@ -0,0 +1,46 @@
+export interface Props {
+    /** Page title. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Shows a back button that emits `back`. */
+    backButton?: boolean;
+    /** Sticks to the top while the page scrolls. */
+    sticky?: boolean;
+    /** Distance from the top when sticky, e.g. `"56px"` under an app navbar. */
+    top?: string;
+    /** `normal` suits a page's main header. `compact` has a 14px title and less padding, for dense pages and forms. */
+    size?: "normal" | "compact";
+}
+type __VLS_Slots = {
+    /** A logo or icon before the title, e.g. the database engine's logo on a resource page. Shown in a 40px tile. */
+    icon?: () => unknown;
+    /** Breadcrumb above the title. */
+    breadcrumb?: () => unknown;
+    /** Replaces the title and subtitle. */
+    title?: () => unknown;
+    /** Next to the title, e.g. a status badge. */
+    "title-extra"?: () => unknown;
+    /** Right side: the page's actions. The primary action goes last. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onBack?: (() => any) | undefined;
+}>, {
+    title: string;
+    size: "normal" | "compact";
+    top: string;
+    subtitle: string;
+    sticky: boolean;
+    backButton: 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/AcHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,60 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d } from "vue";
+import { ArrowLeft as f } from "@lucide/vue";
+//#region src/lib/components/AcHeader.vue?vue&type=script&setup=true&lang.ts
+var p = { class: "flex min-w-0 items-center gap-3.5" }, m = {
+	key: 1,
+	class: "inline-flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-10 border border-border-light bg-surface p-2 text-label shadow-xs ring-1 ring-black/[0.02] [&_img]:size-full [&_img]:object-contain [&_svg]:size-5",
+	"aria-hidden": "true"
+}, h = { class: "min-w-0" }, g = {
+	key: 0,
+	class: "mb-1 text-xs text-muted"
+}, _ = { class: "flex min-w-0 items-center gap-2.5" }, v = {
+	key: 0,
+	class: "mt-px truncate text-sm leading-5 text-muted"
+}, y = {
+	key: 0,
+	class: "flex flex-wrap items-center gap-2"
+}, b = /*@__PURE__*/ a({
+	__name: "AcHeader",
+	props: {
+		title: { default: "" },
+		subtitle: { default: "" },
+		backButton: {
+			type: Boolean,
+			default: !1
+		},
+		sticky: {
+			type: Boolean,
+			default: !1
+		},
+		top: { default: "0px" },
+		size: { default: "normal" }
+	},
+	emits: ["back"],
+	setup(a, { emit: b }) {
+		let x = a, S = e(() => x.size === "compact"), C = b;
+		return (e, b) => (c(), n("header", {
+			class: o(["z-20 border-b border-border-light bg-surface/85 shadow-[0_1px_2px_0_rgb(15_23_42/0.03)] backdrop-blur-md backdrop-saturate-150", a.sticky && "sticky"]),
+			style: s(a.sticky ? { top: a.top } : void 0),
+			"data-ac-ds": "",
+			"data-testid": "ac-header"
+		}, [r("div", { class: o(["flex flex-wrap items-center justify-between gap-x-6 gap-y-3", S.value ? "px-5 py-2.5" : "px-6 py-3.5"]) }, [r("div", p, [
+			a.backButton ? (c(), n("button", {
+				key: 0,
+				type: "button",
+				class: "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-8 border border-border bg-surface text-label shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading active:scale-95 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				"aria-label": "Back",
+				"data-ac-ds": "",
+				"data-testid": "ac-header-back",
+				onClick: b[0] ||= (e) => C("back")
+			}, [i(d(f), {
+				class: "size-4",
+				"aria-hidden": "true"
+			})])) : t("", !0),
+			e.$slots.icon ? (c(), n("span", m, [l(e.$slots, "icon")])) : t("", !0),
+			r("div", h, [e.$slots.breadcrumb ? (c(), n("div", g, [l(e.$slots, "breadcrumb")])) : t("", !0), l(e.$slots, "title", {}, () => [r("div", _, [r("h4", { class: o(["truncate font-semibold text-heading", S.value ? "text-lg leading-6 tracking-[-0.01em]" : "text-xl leading-7 tracking-tight"]) }, u(a.title), 3), l(e.$slots, "title-extra")]), a.subtitle ? (c(), n("p", v, u(a.subtitle), 1)) : t("", !0)])])
+		]), e.$slots.default ? (c(), n("div", y, [l(e.$slots, "default")])) : t("", !0)], 2)], 6));
+	}
+});
+//#endregion
+export { b as default };

package/dist/lib/components/AcHeaderItem.js

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

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

@@ -0,0 +1,13 @@
+type __VLS_Slots = {
+    /** One control in a header row. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/AcHeaderItem.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,14 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/lib/components/AcHeaderItem.vue?vue&type=script&setup=true&lang.ts
+var i = {
+	class: "flex items-center",
+	"data-ac-ds": "",
+	"data-testid": "ac-header-item"
+}, a = /*@__PURE__*/ t({
+	__name: "AcHeaderItem",
+	setup(t) {
+		return (t, a) => (n(), e("div", i, [r(t.$slots, "default")]));
+	}
+});
+//#endregion
+export { a as default };

package/dist/lib/components/AcHeaderItems.js

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

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

@@ -0,0 +1,13 @@
+type __VLS_Slots = {
+    /** `AcHeaderItem`s or controls, laid out in a row with an 8px gap. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/AcHeaderItems.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,14 @@
+import { createElementBlock as e, defineComponent as t, openBlock as n, renderSlot as r } from "vue";
+//#region src/lib/components/AcHeaderItems.vue?vue&type=script&setup=true&lang.ts
+var i = {
+	class: "flex flex-wrap items-center gap-2",
+	"data-ac-ds": "",
+	"data-testid": "ac-header-items"
+}, a = /*@__PURE__*/ t({
+	__name: "AcHeaderItems",
+	setup(t) {
+		return (t, a) => (n(), e("div", i, [r(t.$slots, "default")]));
+	}
+});
+//#endregion
+export { a as default };

package/dist/lib/components/AcInfoTable.js

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

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

@@ -0,0 +1,59 @@
+export interface InfoItem {
+    /** Names the slots for this row: `#value-<key>` and `#label-<key>`. Defaults to `label`. */
+    key?: string;
+    /** Text in the label column. */
+    label: string;
+    /** The value. Empty values show a dash. */
+    value?: string | number | null;
+    /** Adds a copy-to-clipboard button after the value. */
+    copyable?: boolean;
+    /** Shows the value in the monospace font, for IDs, hashes, endpoints and resource names. */
+    mono?: boolean;
+    /** Hides the value behind dots with a show/hide button, e.g. a password. Copy still copies the real value. */
+    secret?: boolean;
+}
+export interface Props {
+    /** The rows: `{ key?, label, value?, copyable?, mono?, secret? }`. */
+    items?: InfoItem[];
+    /** Heading above the rows. */
+    title?: string;
+    /** Lays the rows out in two columns from 768px up. */
+    columns?: 1 | 2;
+    /** `horizontal` puts the label to the left of the value; `stacked` puts it above, for narrow cards. */
+    layout?: "horizontal" | "stacked";
+    /** Draws a bordered card around the table. Turn off inside an AcCard or panel. */
+    bordered?: boolean;
+    /** Shows placeholder bars in place of the values while data loads. */
+    loading?: boolean;
+    /** Text shown when `items` is empty. */
+    emptyText?: string;
+}
+type __VLS_Slots = {
+    /** Content at the right of the title, e.g. an Edit button. */
+    actions?: () => unknown;
+    /** Custom value for the row with that key, e.g. `#value-status` for a badge or `#value-cluster` for a link. */
+    [name: `value-${string}`]: (props: {
+        item: InfoItem;
+    }) => unknown;
+    /** Custom label for the row with that key, e.g. to add an icon or a tooltip. */
+    [name: `label-${string}`]: (props: {
+        item: InfoItem;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    bordered: boolean;
+    title: string;
+    loading: boolean;
+    items: InfoItem[];
+    emptyText: string;
+    layout: "horizontal" | "stacked";
+    columns: 1 | 2;
+}, {}, {}, {}, 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/AcInfoTable.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,125 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g } from "vue";
+import { Check as _, Copy as v, Eye as y, EyeOff as b } from "@lucide/vue";
+//#region src/lib/components/AcInfoTable.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	key: 0,
+	class: "text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+}, S = {
+	key: 1,
+	class: "ml-auto flex shrink-0 items-center gap-2"
+}, C = ["aria-busy"], w = { class: "flex h-5 items-center" }, T = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-base text-heading" }, E = {
+	key: 0,
+	class: "text-muted"
+}, D = {
+	key: 1,
+	class: "flex min-w-0 items-start gap-1.5"
+}, O = [
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], k = [
+	"aria-label",
+	"title",
+	"onClick"
+], A = /*@__PURE__*/ s({
+	__name: "AcInfoTable",
+	props: {
+		items: { default: () => [] },
+		title: { default: "" },
+		columns: { default: 1 },
+		layout: { default: "horizontal" },
+		bordered: {
+			type: Boolean,
+			default: !0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No details available" }
+	},
+	setup(s) {
+		let A = s, j = [
+			"w-40",
+			"w-28",
+			"w-52",
+			"w-32",
+			"w-44",
+			"w-24"
+		], M = d(null), N = d(/* @__PURE__ */ new Set()), P, F = t(() => A.items.map((e) => ({
+			item: e,
+			key: e.key ?? e.label
+		}))), I = t(() => [
+			"min-w-0 border-t border-border-light py-2.5 first:border-t-0",
+			A.columns === 2 && "md:[&:nth-child(2)]:border-t-0",
+			A.layout === "horizontal" ? "flex flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-4" : "flex flex-col gap-1"
+		]), L = t(() => ["flex items-center gap-1.5 text-base text-muted", A.layout === "horizontal" && (A.columns === 2 ? "sm:w-36 sm:shrink-0" : "sm:w-48 sm:shrink-0")]);
+		function R(e) {
+			return e == null || e === "";
+		}
+		function z(e) {
+			let t = new Set(N.value);
+			t.delete(e) || t.add(e), N.value = t;
+		}
+		async function B(e, t) {
+			try {
+				await navigator.clipboard.writeText(String(t ?? "")), M.value = e, clearTimeout(P), P = setTimeout(() => M.value = null, 1500);
+			} catch {}
+		}
+		return l(() => clearTimeout(P)), (t, l) => (u(), i("div", {
+			class: c(s.bordered && "rounded-10 border border-border bg-surface shadow-xs"),
+			"data-ac-ds": "",
+			"data-testid": "ac-info-table"
+		}, [s.title || t.$slots.actions ? (u(), i("div", {
+			key: 0,
+			class: c(["flex items-center justify-between gap-4", s.bordered ? "border-b border-border-light px-5 py-3.5" : "mb-2"])
+		}, [s.title ? (u(), i("h3", x, h(s.title), 1)) : r("", !0), t.$slots.actions ? (u(), i("div", S, [p(t.$slots, "actions")])) : r("", !0)], 2)) : r("", !0), !s.loading && !s.items.length ? (u(), i("p", {
+			key: 1,
+			class: c(["py-6 text-center text-base text-muted", s.bordered && "px-5"])
+		}, h(s.emptyText), 3)) : (u(), i("dl", {
+			key: 2,
+			class: c(["grid", [s.columns === 2 && "md:grid-cols-2 md:gap-x-10", s.bordered ? "px-5 py-2" : ""]]),
+			"aria-busy": s.loading || void 0
+		}, [s.loading && !s.items.length ? (u(), i(e, { key: 0 }, f(j, (e, t) => a("div", {
+			key: t,
+			class: c(I.value)
+		}, [a("dt", { class: c(L.value) }, [...l[0] ||= [a("span", { class: "h-3 w-20 animate-pulse rounded-4 bg-surface-sunken" }, null, -1)]], 2), a("dd", w, [a("span", { class: c(["h-3 animate-pulse rounded-4 bg-surface-sunken", e]) }, null, 2)])], 2)), 64)) : r("", !0), (u(!0), i(e, null, f(F.value, ({ item: e, key: l }, d) => (u(), i("div", {
+			key: l,
+			class: c(I.value)
+		}, [a("dt", { class: c(L.value) }, [p(t.$slots, `label-${l}`, { item: e }, () => [o(h(e.label), 1)])], 2), a("dd", T, [s.loading ? (u(), i("span", {
+			key: 0,
+			class: c(["h-3 animate-pulse rounded-4 bg-surface-sunken", j[d % j.length]])
+		}, null, 2)) : p(t.$slots, `value-${l}`, { item: e }, () => [R(e.value) ? (u(), i("span", E, "—")) : (u(), i("span", D, [
+			a("span", { class: c(["min-w-0 [overflow-wrap:anywhere]", (e.mono || e.secret) && "font-mono text-xs leading-5"]) }, h(e.secret && !N.value.has(l) ? "••••••••••••" : e.value), 3),
+			e.secret ? (u(), i("button", {
+				key: 0,
+				type: "button",
+				class: "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				"aria-label": N.value.has(l) ? `Hide ${e.label}` : `Show ${e.label}`,
+				"aria-pressed": N.value.has(l),
+				onClick: (e) => z(l)
+			}, [(u(), n(m(N.value.has(l) ? g(b) : g(y)), {
+				class: "size-3.5",
+				"aria-hidden": "true"
+			}))], 8, O)) : r("", !0),
+			e.copyable ? (u(), i("button", {
+				key: 1,
+				type: "button",
+				class: "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				"aria-label": M.value === l ? `${e.label} copied` : `Copy ${e.label}`,
+				title: M.value === l ? "Copied" : "Copy",
+				onClick: (t) => B(l, e.value)
+			}, [M.value === l ? (u(), n(g(_), {
+				key: 0,
+				class: "size-3.5 text-success",
+				"aria-hidden": "true"
+			})) : (u(), n(g(v), {
+				key: 1,
+				class: "size-3.5",
+				"aria-hidden": "true"
+			}))], 8, k)) : r("", !0)
+		]))], void 0, 1)])], 2))), 128))], 10, C))], 2));
+	}
+});
+//#endregion
+export { A as default };

package/dist/lib/components/AcInput.js

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

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

@@ -0,0 +1,68 @@
+import type { Component } from "vue";
+export interface Props {
+    /** Floating label. It rests inside the field and rises on focus or when filled. With a `prefix`, it always sits on the top edge. */
+    label: string;
+    /** Native `name` attribute. */
+    name?: string;
+    /** Native input type. `password` adds a show/hide toggle. */
+    type?: "text" | "password" | "email" | "number" | "url" | "search";
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Read-only field with a gray background. */
+    readonly?: boolean;
+    /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Helper text under the field (hidden while `errorMsg` is set). */
+    hint?: string;
+    /** `small` 36px or `normal` 40px tall. */
+    size?: "small" | "normal";
+    /** Text of a button attached to the right edge, such as "Copy", "Generate" or "Browse". It emits `addon` when clicked. Also its accessible name when `addon-icon-only` is set. */
+    addonLabel?: string;
+    /** A Lucide icon component shown in the attached button, before `addon-label`. */
+    addonIcon?: Component;
+    /** Shows only `addon-icon` in the attached button; `addon-label` becomes its `aria-label` and tooltip. */
+    addonIconOnly?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content inside the field before the value: a 16px icon or fixed text such as `https://`. */
+    prefix?: () => unknown;
+    /** Content inside the field after the value: a unit such as `Gi` or `%`, or a status icon. */
+    suffix?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the input. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+    addon: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    onAddon?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    type: "text" | "password" | "email" | "number" | "url" | "search";
+    required: boolean;
+    disabled: boolean;
+    name: string;
+    size: "small" | "normal";
+    hint: string;
+    readonly: boolean;
+    errorMsg: string;
+    addonLabel: string;
+    addonIcon: Component;
+    addonIconOnly: 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/AcInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,143 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useAttrs as _, useId as v, useModel as y, useSlots as b, vModelDynamic as x, withDirectives as S } from "vue";
+import { CircleAlert as C, Eye as w, EyeOff as T } from "@lucide/vue";
+//#region src/lib/components/AcInput.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "flex" }, D = {
+	key: 0,
+	class: "flex h-full shrink-0 items-center pl-3 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4"
+}, O = [
+	"id",
+	"name",
+	"type",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+], k = ["for"], A = {
+	key: 0,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, j = ["aria-label"], M = [
+	"disabled",
+	"aria-label",
+	"title"
+], N = { key: 1 }, P = ["id"], F = ["id"], I = /*@__PURE__*/ s({
+	inheritAttrs: !1,
+	__name: "AcInput",
+	props: /*@__PURE__*/ c({
+		label: {},
+		name: { default: "" },
+		type: { default: "text" },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "small" },
+		addonLabel: { default: "" },
+		addonIcon: { default: void 0 },
+		addonIconOnly: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["addon"], ["update:modelValue"]),
+	setup(s, { expose: c, emit: I }) {
+		let L = s, R = y(s, "modelValue"), z = I, B = v(), V = _(), H = b(), U = e(() => ({
+			class: V.class,
+			style: V.style
+		})), W = e(() => {
+			let { class: e, style: t, ...n } = V;
+			return n;
+		}), G = f(null), K = f(!1), q = e(() => L.type === "password" && K.value ? "text" : L.type), J = e(() => L.errorMsg || L.hint ? `${B}-msg` : void 0), Y = e(() => !!L.addonLabel || !!L.addonIcon), X = e(() => !!H.suffix || L.type === "password");
+		function Z(e) {
+			L.disabled || z("addon", e);
+		}
+		return c({ focus: () => G.value?.focus() }), (e, c) => (d(), r("div", l(U.value, {
+			class: ["w-full", s.disabled && "opacity-60"],
+			"data-ac-ds": "",
+			"data-testid": "ac-input"
+		}), [i("div", E, [i("div", { class: u(["relative flex min-w-0 flex-1 items-center border shadow-xs transition-[border-color,box-shadow] duration-150", [
+			s.size === "small" ? "h-9" : "h-10",
+			Y.value ? "rounded-l-6" : "rounded-6",
+			s.disabled || s.readonly ? "bg-surface-muted" : "bg-surface",
+			s.readonly && "shadow-none",
+			s.errorMsg ? "border-red-60 focus-within:border-danger focus-within:shadow-[0_0_0_3px_var(--color-red-90)]" : "border-border hover:border-border-dark focus-within:focus-ring"
+		]]) }, [
+			e.$slots.prefix ? (d(), r("span", D, [p(e.$slots, "prefix")])) : n("", !0),
+			S(i("input", l({
+				id: g(B),
+				ref_key: "input",
+				ref: G
+			}, W.value, {
+				"onUpdate:modelValue": c[0] ||= (e) => R.value = e,
+				name: s.name,
+				type: q.value,
+				disabled: s.disabled,
+				readonly: s.readonly,
+				required: s.required,
+				"aria-invalid": !!s.errorMsg || void 0,
+				"aria-describedby": J.value,
+				placeholder: " ",
+				class: ["peer block h-full w-full min-w-0 flex-1 rounded-6 bg-transparent text-base text-heading outline-none placeholder:text-transparent disabled:cursor-not-allowed", [e.$slots.prefix ? "pl-1" : "pl-3", X.value ? "pr-1.5" : "pr-3"]]
+			}), null, 16, O), [[x, R.value]]),
+			i("label", {
+				for: g(B),
+				class: u(["pointer-events-none absolute -top-px left-2.25 max-w-[calc(100%-20px)] -translate-y-1/2 truncate rounded-2 bg-surface px-1 text-xs font-medium whitespace-nowrap text-label transition-all duration-150 ease-out peer-focus:text-primary-20 peer-read-only:bg-linear-to-b peer-read-only:from-surface peer-read-only:from-50% peer-read-only:to-surface-muted peer-read-only:to-50% peer-disabled:bg-linear-to-b peer-disabled:from-surface peer-disabled:from-50% peer-disabled:to-surface-muted peer-disabled:to-50%", [!e.$slots.prefix && "peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-placeholder-shown:font-normal peer-placeholder-shown:text-muted peer-focus:-top-px peer-focus:text-xs peer-focus:font-medium", s.errorMsg && "text-red-30! peer-focus:text-red-30!"]])
+			}, [a(h(s.label), 1), s.required ? (d(), r("span", A, " *")) : n("", !0)], 10, k),
+			e.$slots.suffix ? (d(), r("span", {
+				key: 1,
+				class: u(["relative flex h-full shrink-0 items-center bg-inherit text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", s.type === "password" ? "pr-1" : "pr-3"])
+			}, [p(e.$slots, "suffix")], 2)) : n("", !0),
+			s.type === "password" ? (d(), r("button", {
+				key: 2,
+				type: "button",
+				class: "relative mr-1.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading",
+				"aria-label": K.value ? "Hide value" : "Show value",
+				onClick: c[1] ||= (e) => K.value = !K.value
+			}, [(d(), t(m(K.value ? g(T) : g(w)), {
+				class: "size-4",
+				"aria-hidden": "true"
+			}))], 8, j)) : n("", !0)
+		], 2), Y.value ? (d(), r("button", {
+			key: 0,
+			type: "button",
+			class: u(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-6 border border-border bg-surface-muted text-base font-medium whitespace-nowrap text-heading shadow-xs transition-[background-color,border-color,box-shadow] duration-150 hover:bg-surface-sunken focus-visible:z-10 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:hover:bg-surface-muted", [s.size === "small" ? "h-9" : "h-10", s.addonIconOnly ? "w-9" : "px-3"]]),
+			disabled: s.disabled,
+			"aria-label": s.addonIconOnly ? s.addonLabel : void 0,
+			title: s.addonIconOnly ? s.addonLabel : void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-input-addon",
+			onClick: Z
+		}, [s.addonIcon ? (d(), t(m(s.addonIcon), {
+			key: 0,
+			class: "size-4 text-label",
+			"aria-hidden": "true"
+		})) : n("", !0), s.addonIconOnly ? n("", !0) : (d(), r("span", N, h(s.addonLabel), 1))], 10, M)) : n("", !0)]), s.errorMsg ? (d(), r("p", {
+			key: 0,
+			id: `${g(B)}-msg`,
+			class: "mt-1.5 flex items-center gap-1 text-xs text-red-30"
+		}, [o(g(C), {
+			class: "size-3.5 shrink-0",
+			"aria-hidden": "true"
+		}), a(" " + h(s.errorMsg), 1)], 8, P)) : s.hint ? (d(), r("p", {
+			key: 1,
+			id: `${g(B)}-msg`,
+			class: "mt-1.5 text-xs text-muted"
+		}, h(s.hint), 9, F)) : n("", !0)], 16));
+	}
+});
+//#endregion
+export { I as default };

package/dist/lib/components/AcKbd.js

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