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

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

@@ -0,0 +1,41 @@
+export interface SearchFilterOption {
+    value: string | number;
+    label: string;
+}
+export interface Props {
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Milliseconds to wait after typing before emitting `search`. `0` emits on every key. */
+    debounce?: number;
+    /** `small` 32px or `normal` 36px tall. */
+    size?: "small" | "normal";
+    /** Options for a filter select attached to the right of the field, such as cluster status. Bind the choice with `v-model:filter`. No options, no filter. */
+    filterOptions?: SearchFilterOption[];
+    /** Accessible name of the filter select. */
+    filterLabel?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The search text. */
+    modelValue?: string;
+    /** The selected filter value. Starts at the first option when unset. */
+    "filter"?: string | number | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "update:filter": (value: string | number | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:filter"?: ((value: string | number | undefined) => any) | undefined;
+}>, {
+    size: "small" | "normal";
+    placeholder: string;
+    debounce: number;
+    filterOptions: SearchFilterOption[];
+    filterLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,76 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, toDisplayString as p, unref as m, useModel as h, vModelSelect as g, vModelText as _, watch as v, withDirectives as y, withKeys as b } from "vue";
+import { ChevronDown as x, Search as S, X as C } from "@lucide/vue";
+//#region src/lib/components/AcSearchBar.vue?vue&type=script&setup=true&lang.ts
+var w = {
+	class: "flex w-full",
+	"data-ac-ds": "",
+	"data-testid": "ac-search-bar"
+}, T = { class: "relative min-w-0 flex-1" }, E = ["placeholder", "aria-label"], D = {
+	key: 0,
+	class: "relative -ml-px shrink-0"
+}, O = ["aria-label"], k = ["value"], A = /*@__PURE__*/ o({
+	__name: "AcSearchBar",
+	props: /*@__PURE__*/ s({
+		placeholder: { default: "Search" },
+		debounce: { default: 300 },
+		size: { default: "small" },
+		filterOptions: { default: () => [] },
+		filterLabel: { default: "Filter" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {},
+		filter: { default: void 0 },
+		filterModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["search"], ["update:modelValue", "update:filter"]),
+	setup(o, { emit: s }) {
+		let A = o, j = h(o, "modelValue"), M = h(o, "filter"), N = s, P = d(null), F = t(() => A.filterOptions.length > 0), I = t(() => A.size === "small" ? "h-8" : "h-9"), L;
+		function R() {
+			j.value = "", P.value?.focus();
+		}
+		return v(j, (e) => {
+			clearTimeout(L), A.debounce ? L = setTimeout(() => N("search", e), A.debounce) : N("search", e);
+		}), v(() => A.filterOptions, (e) => {
+			e.length && !e.some((e) => e.value === M.value) && (M.value = e[0].value);
+		}, { immediate: !0 }), l(() => clearTimeout(L)), (t, s) => (u(), r("div", w, [i("div", T, [
+			a(m(S), {
+				class: "pointer-events-none absolute top-1/2 left-2.5 z-20 size-3.5 -translate-y-1/2 text-muted",
+				"aria-hidden": "true"
+			}),
+			y(i("input", {
+				ref_key: "input",
+				ref: P,
+				"onUpdate:modelValue": s[0] ||= (e) => j.value = e,
+				type: "search",
+				placeholder: o.placeholder,
+				"aria-label": o.placeholder,
+				class: c(["relative block w-full border border-border bg-surface pr-8 pl-8 text-base text-heading shadow-xs transition-[border-color,box-shadow] outline-none placeholder:text-muted hover:border-border-dark focus:z-10 focus:focus-ring [&::-webkit-search-cancel-button]:hidden", [I.value, F.value ? "rounded-l-6" : "rounded-6"]]),
+				onKeydown: s[1] ||= b((e) => j.value && (R(), e.stopPropagation()), ["esc"])
+			}, null, 42, E), [[_, j.value]]),
+			j.value ? (u(), r("button", {
+				key: 0,
+				type: "button",
+				class: "absolute top-1/2 right-1.5 z-20 inline-flex size-5.5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading",
+				"aria-label": "Clear search",
+				onClick: R
+			}, [a(m(C), {
+				class: "size-3",
+				"aria-hidden": "true"
+			})])) : n("", !0)
+		]), F.value ? (u(), r("div", D, [y(i("select", {
+			"onUpdate:modelValue": s[2] ||= (e) => M.value = e,
+			"aria-label": o.filterLabel,
+			class: c(["relative block max-w-48 cursor-pointer appearance-none truncate rounded-r-6 border border-border bg-surface-muted pr-8 pl-3 text-base font-medium text-heading shadow-xs transition-[border-color,box-shadow,background-color] outline-none hover:border-border-dark hover:bg-surface-sunken focus:z-10 focus:focus-ring", I.value]),
+			"data-ac-ds": "",
+			"data-testid": "ac-search-bar-filter"
+		}, [(u(!0), r(e, null, f(o.filterOptions, (e) => (u(), r("option", {
+			key: e.value,
+			value: e.value
+		}, p(e.label), 9, k))), 128))], 10, O), [[g, M.value]]), a(m(x), {
+			class: "pointer-events-none absolute top-1/2 right-2.5 z-20 size-3.5 -translate-y-1/2 text-muted",
+			"aria-hidden": "true"
+		})])) : n("", !0)]));
+	}
+});
+//#endregion
+export { A as default };

package/dist/lib/components/AcSectionContent.js

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

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

@@ -0,0 +1,55 @@
+export interface Props {
+    /** Section title. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Shows a back button that emits `back`. */
+    backButton?: boolean;
+    /** Lets people collapse the body with a chevron button. */
+    collapsible?: boolean;
+    /** Pads the body. Turn off for flush tables and lists; the body then clips to the card's rounded corners. */
+    padded?: boolean;
+    /** Drops the card surface so the section blends into its parent. */
+    plain?: boolean;
+    /** `danger` draws a red border and title, for irreversible actions like deleting a database. */
+    tone?: "default" | "danger";
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Replaces the title area. */
+    header?: () => unknown;
+    /** Next to the title, e.g. a badge. */
+    "title-extra"?: () => unknown;
+    /** Buttons on the right of the header. */
+    actions?: () => unknown;
+    /** Section body. */
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the body is shown. 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;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {
+    title: string;
+    tone: "default" | "danger";
+    subtitle: string;
+    padded: boolean;
+    collapsible: boolean;
+    backButton: boolean;
+    plain: 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/AcSectionContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,74 @@
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, useId as d, useModel as f, vShow as p, withDirectives as m } from "vue";
+import { ArrowLeft as h, ChevronDown as g } from "@lucide/vue";
+//#region src/lib/components/AcSectionContent.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "flex min-w-0 items-center gap-2.5" }, v = { class: "min-w-0" }, y = { class: "flex items-center gap-2" }, b = {
+	key: 0,
+	class: "mt-0.5 truncate text-xs text-muted"
+}, x = { class: "flex shrink-0 items-center gap-2" }, S = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-label"
+], C = ["id"], w = /*@__PURE__*/ i({
+	__name: "AcSectionContent",
+	props: /*@__PURE__*/ a({
+		title: { default: "" },
+		subtitle: { default: "" },
+		backButton: {
+			type: Boolean,
+			default: !1
+		},
+		collapsible: {
+			type: Boolean,
+			default: !1
+		},
+		padded: {
+			type: Boolean,
+			default: !0
+		},
+		plain: {
+			type: Boolean,
+			default: !1
+		},
+		tone: { default: "default" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ a(["back"], ["update:open"]),
+	setup(i, { emit: a }) {
+		let w = a, T = f(i, "open"), E = d();
+		return (a, d) => (s(), t("section", {
+			class: o(!i.plain && ["rounded-10 border bg-surface shadow-xs", i.tone === "danger" ? "border-red-80" : "border-border"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-section-content"
+		}, [n("header", { class: o(["flex items-center justify-between gap-4", [i.plain ? "mb-3" : "px-5 py-3.5", !i.plain && T.value && (i.tone === "danger" ? "border-b border-red-90" : "border-b border-border-light")]]) }, [n("div", _, [i.backButton ? (s(), t("button", {
+			key: 0,
+			type: "button",
+			class: "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 text-label transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			"aria-label": "Back",
+			onClick: d[0] ||= (e) => w("back")
+		}, [r(u(h), {
+			class: "size-4",
+			"aria-hidden": "true"
+		})])) : e("", !0), n("div", v, [c(a.$slots, "header", {}, () => [n("div", y, [n("h5", { class: o(["truncate", i.tone === "danger" && "text-red-30"]) }, l(i.title), 3), c(a.$slots, "title-extra")]), i.subtitle ? (s(), t("p", b, l(i.subtitle), 1)) : e("", !0)])])]), n("div", x, [c(a.$slots, "actions"), i.collapsible ? (s(), t("button", {
+			key: 0,
+			type: "button",
+			class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-label shadow-xs transition hover:border-border-dark hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			"aria-expanded": T.value,
+			"aria-controls": u(E),
+			"aria-label": T.value ? "Collapse section" : "Expand section",
+			onClick: d[1] ||= (e) => T.value = !T.value
+		}, [r(u(g), {
+			class: o(["size-4 transition-transform duration-200", !T.value && "-rotate-90"]),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])], 8, S)) : e("", !0)])], 2), m(n("div", {
+			id: u(E),
+			class: o(i.plain ? void 0 : i.padded ? "p-5" : "overflow-hidden rounded-b-10")
+		}, [c(a.$slots, "default")], 10, C), [[p, T.value]])], 2));
+	}
+});
+//#endregion
+export { w as default };

package/dist/lib/components/AcSegmentedControl.js

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

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

@@ -0,0 +1,46 @@
+import type { Component } from "vue";
+export interface SegmentedOption<T extends string | number = string> {
+    value: T;
+    label: string;
+    /** A Lucide (or any) icon component shown before the label. */
+    icon?: Component;
+    disabled?: boolean;
+}
+export interface Props<T extends string | number> {
+    /** The choices, 2–5 of them: `{ value, label, icon?, disabled? }`. Plain strings are accepted too. */
+    options: (SegmentedOption<T> | T)[];
+    /** Accessible name for the group, e.g. "Chart range". Required when nothing nearby labels it. */
+    label?: string;
+    /** Height: `small` 28px (toolbars, cards) or `normal` 32px. */
+    size?: "small" | "normal";
+    /** Shows only the icons; each option's `label` becomes its accessible name and hover title. */
+    iconOnly?: boolean;
+    /** Stretches to fill the row with equal-width segments. */
+    block?: boolean;
+    /** Disables every segment. */
+    disabled?: boolean;
+}
+declare const __VLS_export: <V extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<V> & {
+        /** The selected option's `value`. */
+        modelValue?: V | null;
+    }) & {
+        "onUpdate:modelValue"?: ((value: V | null) => any) | undefined;
+        onChange?: ((value: V) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "change", value: V) => void) & ((event: "update:modelValue", value: V | null) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,104 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, mergeModels as o, normalizeClass as s, openBlock as c, ref as l, renderList as u, resolveDynamicComponent as d, toDisplayString as f, useModel as p } from "vue";
+//#region src/lib/components/AcSegmentedControl.vue?vue&type=script&setup=true&lang.ts
+var m = ["aria-label", "aria-disabled"], h = [
+	"aria-checked",
+	"aria-label",
+	"title",
+	"tabindex",
+	"disabled",
+	"onClick",
+	"onKeydown"
+], g = {
+	key: 1,
+	class: "truncate"
+}, _ = /*@__PURE__*/ a({
+	__name: "AcSegmentedControl",
+	props: /*@__PURE__*/ o({
+		options: {},
+		label: { default: "" },
+		size: { default: "normal" },
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
+	setup(a, { emit: o }) {
+		let _ = a, v = p(a, "modelValue"), y = o, b = l([]), x = t(() => _.options.map((e) => typeof e == "object" ? e : {
+			value: e,
+			label: String(e)
+		})), S = t(() => {
+			let e = x.value.findIndex((e) => e.value === v.value && !e.disabled);
+			return e >= 0 ? e : x.value.findIndex((e) => !e.disabled);
+		});
+		function C(e) {
+			_.disabled || e.disabled || e.value === v.value || (v.value = e.value, y("change", e.value));
+		}
+		function w(e) {
+			let t = x.value[e];
+			t && (b.value[e]?.focus(), C(t));
+		}
+		function T(e, t) {
+			let n = x.value.length, r = e;
+			for (let e = 0; e < n; e++) if (r = (r + t + n) % n, !x.value[r].disabled) return r;
+			return e;
+		}
+		function E(e, t) {
+			let n = {
+				ArrowRight: () => T(t, 1),
+				ArrowDown: () => T(t, 1),
+				ArrowLeft: () => T(t, -1),
+				ArrowUp: () => T(t, -1),
+				Home: () => T(-1, 1),
+				End: () => T(x.value.length, -1)
+			}[e.key];
+			n && (e.preventDefault(), w(n()));
+		}
+		return (t, o) => (c(), i("div", {
+			role: "radiogroup",
+			"aria-label": a.label || void 0,
+			"aria-disabled": a.disabled || void 0,
+			class: s(["items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5", [a.block ? "flex w-full" : "inline-flex max-w-full", a.disabled && "opacity-50"]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-segmented-control"
+		}, [(c(!0), i(e, null, u(x.value, (e, t) => (c(), i("button", {
+			key: String(e.value),
+			ref_for: !0,
+			ref_key: "buttons",
+			ref: b,
+			type: "button",
+			role: "radio",
+			"aria-checked": e.value === v.value,
+			"aria-label": a.iconOnly ? e.label : void 0,
+			title: a.iconOnly ? e.label : void 0,
+			tabindex: t === S.value ? 0 : -1,
+			disabled: a.disabled || e.disabled,
+			class: s(["inline-flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-6 font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed", [
+				a.size === "small" ? "h-6 text-xs [&_svg]:size-3.5" : "h-7 text-base [&_svg]:size-4",
+				a.iconOnly ? a.size === "small" ? "w-7" : "w-8" : a.size === "small" ? "px-2.5" : "px-3",
+				a.block && "flex-1",
+				e.disabled && !a.disabled && "opacity-50",
+				e.value === v.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted enabled:hover:text-heading"
+			]]),
+			onClick: (t) => C(e),
+			onKeydown: (e) => E(e, t)
+		}, [e.icon ? (c(), n(d(e.icon), {
+			key: 0,
+			class: "shrink-0",
+			"aria-hidden": "true"
+		})) : r("", !0), a.iconOnly ? r("", !0) : (c(), i("span", g, f(e.label), 1))], 42, h))), 128))], 10, m));
+	}
+});
+//#endregion
+export { _ as default };

package/dist/lib/components/AcSelect.js

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

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

@@ -0,0 +1,78 @@
+import type { SelectOption } from "./types";
+export interface Props<T> {
+    /** The choices: `{ value, label, description?, disabled?, group? }`. */
+    options: SelectOption<T>[];
+    /** How to tell whether two values are the same, for option values that are objects. A property name (`"id"`) or a function `(a, b) => boolean`. Without it values are compared with `===`, which is right for strings and numbers. */
+    by?: (T extends object ? keyof T & string : never) | ((a: T, b: T) => boolean);
+    /** Floating label. It rests inside the field and rises when a value is chosen or the list opens. */
+    label?: string;
+    /** Text shown in the field when there's no label and nothing is selected. */
+    placeholder?: string;
+    /** Allow several values; `v-model` becomes an array. */
+    multiple?: boolean;
+    /** Adds a search box to the list. Emits `search` so you can load options from an API. */
+    searchable?: boolean;
+    /** With `searchable`, lets the viewer add a value that isn't in the list: an "Add" row appears for text that matches no option, and Enter takes it. The text becomes the value, so use it with string values. Emits `create`. */
+    creatable?: boolean;
+    /** Word at the start of the add row, which reads `Add “text”`. */
+    createText?: string;
+    /** Shows a clear button when a value is selected. */
+    clearable?: boolean;
+    /** Shows a spinner and blocks the field while options load. */
+    loading?: boolean;
+    /** Shows a refresh button that emits `refresh`. */
+    refreshable?: boolean;
+    /** Disables the field. */
+    disabled?: boolean;
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Error text under the field. */
+    errorMsg?: string;
+    /** Helper text under the field (hidden while `errorMsg` is set). */
+    hint?: string;
+    /** `compact` 32px (toolbars and filters, no label), `small` 36px (forms) or `normal` 40px. */
+    size?: "compact" | "small" | "normal";
+    /** Text shown when no option matches the search. */
+    noResultText?: string;
+}
+declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<V> & {
+        modelValue?: V | V[] | null;
+    }) & {
+        onSearch?: ((query: string) => any) | undefined;
+        onSelect?: ((option: SelectOption<V>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: V | V[] | null) => any) | undefined;
+        onRemove?: ((option: SelectOption<V>) => any) | undefined;
+        onCreate?: ((text: string) => any) | undefined;
+        onRefresh?: (() => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Moves focus to the select. */
+        focus: () => void | undefined;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Custom option row. Receives the option and whether it's selected or highlighted. */
+        option?: (props: {
+            option: SelectOption<V>;
+            selected: boolean;
+            active: boolean;
+        }) => unknown;
+        /** Content shown when the list is empty or nothing matches. */
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+    };
+    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "refresh") => void)) & ((event: "update:modelValue", value: V | V[] | null) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};