@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,16 +1,23 @@
 import e from "../charts/ChartFrame.js";
-import { CURVES as t, chartDuration as n } from "../charts/shared.js";
-import { useXYChart as r } from "../charts/xy.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createSlots as s, createVNode as c, defineComponent as l, guardReactiveProps as u, isRef as d, normalizeProps as f, openBlock as p, ref as m, renderSlot as h, unref as g, withCtx as _ } from "vue";
-import { ChartLine as v } from "@lucide/vue";
-import { VisAxis as y, VisCrosshair as b, VisLine as x, VisXYContainer as S } from "@unovis/vue";
-import { Scale as C } from "@unovis/ts";
+import { bindAxisHover as t, useEChart as n } from "../charts/echarts.js";
+import { readNumber as r } from "../charts/shared.js";
+import { LARGE_DATA as i, useXYChart as a } from "../charts/xy.js";
+import { cartesianOption as o, locateRow as s, prepareZoom as c } from "../charts/cartesian.js";
+import { createBlock as l, createElementVNode as u, createSlots as d, defineComponent as f, guardReactiveProps as p, isRef as m, normalizeProps as h, openBlock as g, ref as _, renderSlot as v, unref as y, withCtx as b } from "vue";
+import { ChartLine as x } from "@lucide/vue";
+import { use as S } from "echarts/core";
+import { LineChart as C } from "echarts/charts";
+import { AxisPointerComponent as w, GridComponent as T } from "echarts/components";
 //#region src/lib/components/AcLineChart.vue?vue&type=script&setup=true&lang.ts
-var w = /*@__PURE__*/ l({
+var E = /*@__PURE__*/ f({
 	__name: "AcLineChart",
 	props: {
 		curve: { default: "monotone" },
 		lineWidth: { default: 2 },
+		points: {
+			type: [Boolean, String],
+			default: "auto"
+		},
 		data: {},
 		index: {},
 		categories: {},
@@ -41,128 +48,109 @@ var w = /*@__PURE__*/ l({
 		},
 		emptyText: { default: "No data to show yet" },
 		title: { default: "" },
-		description: { default: "" }
+		description: { default: "" },
+		zoom: {
+			type: Boolean,
+			default: !1
+		},
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
 	},
-	setup(l) {
-		let w = l, T = n(), { hidden: E, width: D, colors: O, legendItems: k, xKind: A, byPosition: j, x: M, yAccessors: N, xTickValues: P, maxXTicks: F, yTicks: I, xTickFormat: L, formatY: R, rowLabel: z, yDomain: B, tooltipItems: V, table: H, ariaLabel: U } = r(w, { stacked: () => !1 }), W = m(null), G = i(() => A.value === "time" && !j.value ? C.scaleTime() : void 0);
-		function K(e, t, n, r) {
-			if (!t || n === void 0 || !r || r.type === "wheel") {
-				W.value = null;
-				return;
-			}
-			W.value = {
-				clientX: r.clientX,
-				clientY: r.clientY,
-				title: z(n),
-				items: V(t),
-				datum: t,
-				index: n
-			};
+	setup(f) {
+		S([
+			C,
+			T,
+			w
+		]);
+		let E = f, D = a(E, { stacked: () => !1 }), { hidden: O, width: k, legendItems: A, rowLabel: j, tooltipItems: M, table: N, ariaLabel: P } = D, F = _(), I = _(null);
+		function L(e) {
+			let t = E.data.length > i, n = E.points === "auto" ? E.data.length <= 60 : E.points;
+			return D.visibleKeys.value.map((i) => {
+				let a = e.color(D.colorOf.value[i]), o = E.data.map((e) => r(e, i));
+				return {
+					id: i,
+					type: "line",
+					name: E.categories[i]?.name ?? i,
+					data: D.byPosition.value ? o : o.map((e, t) => [D.xNumbers.value[t], e]),
+					smooth: E.curve === "monotone" && .4,
+					smoothMonotone: E.curve === "monotone" ? "x" : void 0,
+					step: E.curve === "step" && "middle",
+					showSymbol: n && !t,
+					symbol: "circle",
+					symbolSize: 6,
+					lineStyle: {
+						width: E.lineWidth,
+						color: a
+					},
+					itemStyle: {
+						color: a,
+						borderColor: e.surface,
+						borderWidth: 2
+					},
+					emphasis: {
+						scale: 1.4,
+						lineStyle: { width: E.lineWidth }
+					},
+					sampling: t ? "lttb" : void 0,
+					progressive: t ? 4e3 : 0,
+					connectNulls: !1
+				};
+			});
 		}
-		return (n, r) => (p(), a(e, {
-			hidden: g(E),
-			"onUpdate:hidden": r[0] ||= (e) => d(E) ? E.value = e : null,
-			width: g(D),
-			"onUpdate:width": r[1] ||= (e) => d(D) ? D.value = e : null,
+		return n({
+			host: F,
+			renderer: () => E.renderer,
+			prepare: () => c(E),
+			option: (e) => ({
+				...o(e, E, D, {
+					boundaryGap: !1,
+					pointer: "line"
+				}),
+				series: L(e)
+			}),
+			setup: (e) => t(e, (t) => s(e, t, D), (e, t, n) => {
+				let r = E.data[e];
+				r && E.tooltip && (I.value = {
+					clientX: t,
+					clientY: n,
+					title: j(e),
+					items: M(r),
+					datum: r,
+					index: e
+				});
+			}, () => I.value = null)
+		}), (t, n) => (g(), l(e, {
+			hidden: y(O),
+			"onUpdate:hidden": n[0] ||= (e) => m(O) ? O.value = e : null,
+			width: y(k),
+			"onUpdate:width": n[1] ||= (e) => m(k) ? k.value = e : null,
 			testid: "ac-line-chart",
-			height: l.height,
-			loading: l.loading,
-			empty: !l.data.length,
-			"empty-text": l.emptyText,
-			"empty-icon": g(v),
-			legend: l.legend,
-			"legend-items": g(k),
-			summary: g(U),
-			title: l.title,
-			description: l.description,
-			table: g(H),
-			tip: W.value,
-			tooltip: l.tooltip
-		}, s({
-			default: _(() => [c(g(S), {
-				data: l.data,
-				height: l.height,
-				duration: g(T),
-				"x-scale": G.value,
-				"y-domain": g(B),
-				padding: {
-					top: 8,
-					right: 8
-				}
-			}, {
-				default: _(() => [
-					c(g(x), {
-						x: g(M),
-						y: g(N),
-						color: g(O),
-						"curve-type": g(t)[l.curve],
-						"line-width": l.lineWidth
-					}, null, 8, [
-						"x",
-						"y",
-						"color",
-						"curve-type",
-						"line-width"
-					]),
-					c(g(y), {
-						type: "x",
-						label: l.xLabel || void 0,
-						"tick-format": g(L),
-						"tick-values": g(P),
-						"num-ticks": g(F),
-						"min-max-ticks-only-when-width-is-less": 160,
-						"grid-line": !1,
-						"tick-line": !1,
-						"tick-text-hide-overlapping": !0
-					}, null, 8, [
-						"label",
-						"tick-format",
-						"tick-values",
-						"num-ticks"
-					]),
-					c(g(y), {
-						type: "y",
-						label: l.yLabel || void 0,
-						"tick-format": g(R),
-						"num-ticks": g(I),
-						"grid-line": l.gridLines,
-						"tick-line": !1,
-						"domain-line": !1
-					}, null, 8, [
-						"label",
-						"tick-format",
-						"num-ticks",
-						"grid-line"
-					]),
-					l.tooltip ? (p(), a(g(b), {
-						key: 0,
-						x: g(M),
-						y: g(N),
-						color: g(O),
-						circleRadius: 4,
-						strokeColor: "var(--color-surface)",
-						strokeWidth: 2,
-						hideWhenFarFromPointer: !1,
-						duration: 0,
-						onCrosshairMove: K
-					}, null, 8, [
-						"x",
-						"y",
-						"color"
-					])) : o("", !0)
-				]),
-				_: 1
-			}, 8, [
-				"data",
-				"height",
-				"duration",
-				"x-scale",
-				"y-domain"
-			])]),
+			height: f.height,
+			loading: f.loading,
+			empty: !f.data.length,
+			"empty-text": f.emptyText,
+			"empty-icon": y(x),
+			legend: f.legend,
+			"legend-items": y(A),
+			summary: y(P),
+			title: f.title,
+			description: f.description,
+			table: y(N),
+			tip: I.value,
+			tooltip: f.tooltip
+		}, d({
+			default: b(() => [u("div", {
+				ref_key: "host",
+				ref: F,
+				class: "size-full"
+			}, null, 512)]),
 			_: 2
-		}, [n.$slots.tooltip ? {
+		}, [t.$slots.tooltip ? {
 			name: "tooltip",
-			fn: _((e) => [h(n.$slots, "tooltip", f(u(e)))]),
+			fn: b((e) => [v(t.$slots, "tooltip", h(p(e)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"hidden",
@@ -184,4 +172,4 @@ var w = /*@__PURE__*/ l({
 	}
 });
 //#endregion
-export { w as default };
+export { E as default };

package/dist/lib/components/AcLoader.js

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

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

@@ -0,0 +1,15 @@
+export interface Props {
+    /** Ring diameter: `small` 28px, `normal` 40px, `large` 60px, `xlarge` 80px. cloud-ui's `sm`, `md`, `lg` and `xl`. */
+    size?: "small" | "normal" | "large" | "xlarge";
+    /** Read by screen readers, and shown under the dots with `show-label`. */
+    label?: string;
+    /** Shows `label` under the dots, e.g. "Loading databases…". */
+    showLabel?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    label: string;
+    size: "small" | "normal" | "large" | "xlarge";
+    showLabel: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,66 @@
+import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderList as o, toDisplayString as s } from "vue";
+//#region src/lib/components/AcLoader.vue?vue&type=script&setup=true&lang.ts
+var c = {
+	class: "flex size-full flex-col items-center justify-center",
+	role: "status",
+	"data-ac-ds": "",
+	"data-testid": "ac-loader"
+}, l = {
+	class: "mt-4 flex justify-center gap-1.5",
+	"aria-hidden": "true"
+}, u = {
+	key: 0,
+	class: "mt-3 text-base text-muted"
+}, d = {
+	key: 1,
+	class: "sr-only"
+}, f = /*@__PURE__*/ r({
+	__name: "AcLoader",
+	props: {
+		size: { default: "large" },
+		label: { default: "Loading" },
+		showLabel: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(r) {
+		let f = {
+			small: "size-7",
+			normal: "size-10",
+			large: "size-15",
+			xlarge: "size-20"
+		}, p = {
+			small: "border-2",
+			normal: "border-2",
+			large: "border-[3px]",
+			xlarge: "border-4"
+		}, m = {
+			small: "size-1",
+			normal: "size-1.5",
+			large: "size-2",
+			xlarge: "size-2.5"
+		}, h = [
+			"animate-loader-dot-1",
+			"animate-loader-dot-2",
+			"animate-loader-dot-3"
+		];
+		return (g, _) => (a(), t("div", c, [
+			n("div", {
+				class: i(["relative shrink-0", f[r.size]]),
+				"aria-hidden": "true"
+			}, [
+				_[0] ||= n("div", { class: "absolute inset-0 animate-loader-glow rounded-full bg-primary/20 blur-md motion-reduce:animate-none" }, null, -1),
+				n("div", { class: i(["absolute inset-0 rounded-full border-primary/15", p[r.size]]) }, null, 2),
+				n("div", { class: i(["absolute inset-0 animate-loader-spin rounded-full border-transparent border-t-primary border-r-primary/50", p[r.size]]) }, null, 2)
+			], 2),
+			n("div", l, [(a(), t(e, null, o(h, (e) => n("span", {
+				key: e,
+				class: i(["rounded-full bg-primary motion-reduce:animate-none", [e, m[r.size]]])
+			}, null, 2)), 64))]),
+			r.showLabel ? (a(), t("p", u, s(r.label), 1)) : (a(), t("span", d, s(r.label), 1))
+		]));
+	}
+});
+//#endregion
+export { f as default };

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

@@ -5,11 +5,13 @@ export interface LocaleOption {
     label: string;
     /** A muted second line, e.g. the name in English: "Bengali". */
     description?: string;
+    /** A flag emoji shown before the name at 20px, as in cloud-ui's language menu. */
+    flag?: string;
 }
 export interface Props {
     /** Languages to offer, each named in its own language. With fewer than two, nothing renders. */
     locales: LocaleOption[];
-    /** `icon` is a 36px icon button for the navbar; `button` adds the current code (EN) and a chevron. */
+    /** `icon` is cloud-ui's bare 20px icon trigger for the navbar; `button` adds the current code (EN) and a chevron. */
     variant?: "icon" | "button";
     /** Accessible name of the trigger. The current language is added after it. */
     ariaLabel?: string;

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

@@ -1,13 +1,21 @@
 import e from "./AcDropdown.js";
 import t from "./AcDropdownItem.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
-import { Check as v, ChevronDown as y, Languages as b } from "@lucide/vue";
+import { ChevronDown as v, Languages as y } from "@lucide/vue";
 //#region src/lib/components/AcLocaleSwitcher.vue?vue&type=script&setup=true&lang.ts
-var x = ["aria-label"], S = ["aria-label"], C = { class: "font-mono text-xs tracking-wide uppercase" }, w = {
+var b = ["aria-label"], x = ["aria-label"], S = { class: "font-mono text-xs tracking-wide uppercase" }, C = {
 	key: 0,
-	class: "mb-1 border-b border-border px-3 pt-1 pb-2 text-xs font-semibold text-muted",
+	class: "mb-2 border-b border-border px-4 py-2 text-xs font-semibold text-muted",
 	"aria-hidden": "true"
-}, T = { class: "flex items-center gap-3" }, E = ["lang"], D = /*@__PURE__*/ l({
+}, w = { class: "flex items-center gap-2" }, T = {
+	key: 0,
+	class: "shrink-0 text-xl leading-none",
+	"aria-hidden": "true"
+}, E = ["lang"], D = {
+	key: 1,
+	class: "size-2 shrink-0 rounded-full bg-primary",
+	"aria-hidden": "true"
+}, O = /*@__PURE__*/ l({
 	__name: "AcLocaleSwitcher",
 	props: /*@__PURE__*/ u({
 		locales: {},
@@ -26,22 +34,22 @@ var x = ["aria-label"], S = ["aria-label"], C = { class: "font-mono text-xs trac
 	}),
 	emits: /*@__PURE__*/ u(["change"], ["update:modelValue"]),
 	setup(l, { emit: u }) {
-		let D = l, O = g(l, "modelValue"), k = u, A = r(() => D.locales.find((e) => e.value === O.value)), j = r(() => A.value ? `${D.ariaLabel} (${A.value.label})` : D.ariaLabel);
-		function M() {
+		let O = l, k = g(l, "modelValue"), A = u, j = r(() => O.locales.find((e) => e.value === k.value)), M = r(() => j.value ? `${O.ariaLabel} (${j.value.label})` : O.ariaLabel);
+		function N() {
 			try {
-				return localStorage.getItem(D.storageKey);
+				return localStorage.getItem(O.storageKey);
 			} catch {
 				return null;
 			}
 		}
-		function N(e) {
-			if (e !== O.value && (O.value = e, k("change", e), D.persist)) try {
-				localStorage.setItem(D.storageKey, e);
+		function P(e) {
+			if (e !== k.value && (k.value = e, A("change", e), O.persist)) try {
+				localStorage.setItem(O.storageKey, e);
 			} catch {}
 		}
-		if (D.persist && typeof window < "u") {
-			let e = M();
-			e && e !== O.value && D.locales.some((t) => t.value === e) && N(e);
+		if (O.persist && typeof window < "u") {
+			let e = N();
+			e && e !== k.value && O.locales.some((t) => t.value === e) && P(e);
 		}
 		return (r, u) => l.locales.length > 1 ? (f(), i(e, {
 			key: 0,
@@ -52,42 +60,42 @@ var x = ["aria-label"], S = ["aria-label"], C = { class: "font-mono text-xs trac
 			trigger: _(({ open: e }) => [l.variant === "icon" ? (f(), o("button", {
 				key: 0,
 				type: "button",
-				"aria-label": j.value,
-				class: d(["inline-flex size-9 cursor-pointer items-center justify-center rounded-10 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e && "bg-surface-sunken text-heading"])
-			}, [c(h(b), {
+				"aria-label": M.value,
+				class: d(["inline-flex cursor-pointer items-center gap-2 rounded-10 px-2 py-0.5 transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e ? "text-heading" : "text-muted"])
+			}, [c(h(y), {
 				class: "size-5",
 				"aria-hidden": "true"
-			})], 10, x)) : (f(), o("button", {
+			})], 10, b)) : (f(), o("button", {
 				key: 1,
 				type: "button",
-				"aria-label": j.value,
-				class: d(["inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-10 border border-border bg-surface px-3 text-base font-medium text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e && "bg-surface-sunken/70"])
+				"aria-label": M.value,
+				class: d(["inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-10 border border-border bg-surface px-3 text-base font-medium text-heading transition-colors duration-200 hover:bg-surface-sunken/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e && "bg-surface-sunken/50"])
 			}, [
-				c(h(b), {
+				c(h(y), {
 					class: "size-4 text-muted",
 					"aria-hidden": "true"
 				}),
-				s("span", C, m(A.value?.value ?? ""), 1),
-				c(h(y), {
+				s("span", S, m(j.value?.value ?? ""), 1),
+				c(h(v), {
 					class: d(["size-4 text-muted transition-transform duration-200 motion-reduce:transition-none", e && "rotate-180"]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"])
-			], 10, S))]),
-			default: _(() => [l.menuTitle ? (f(), o("p", w, m(l.menuTitle), 1)) : a("", !0), (f(!0), o(n, null, p(l.locales, (e) => (f(), i(t, {
+			], 10, x))]),
+			default: _(() => [l.menuTitle ? (f(), o("p", C, m(l.menuTitle), 1)) : a("", !0), (f(!0), o(n, null, p(l.locales, (e) => (f(), i(t, {
 				key: e.value,
 				description: e.description,
-				"aria-current": e.value === O.value ? "true" : void 0,
-				class: d(e.value === O.value && "bg-surface-sunken/50 font-medium"),
-				onClick: (t) => N(e.value)
+				"aria-current": e.value === k.value ? "true" : void 0,
+				class: d(e.value === k.value && "bg-surface-sunken/50"),
+				onClick: (t) => P(e.value)
 			}, {
-				default: _(() => [s("span", T, [s("span", {
-					class: "min-w-0 flex-1 truncate",
-					lang: e.value
-				}, m(e.label), 9, E), e.value === O.value ? (f(), i(h(v), {
-					key: 0,
-					class: "size-4 shrink-0 text-primary",
-					"aria-hidden": "true"
-				})) : a("", !0)])]),
+				default: _(() => [s("span", w, [
+					e.flag ? (f(), o("span", T, m(e.flag), 1)) : a("", !0),
+					s("span", {
+						class: "min-w-0 flex-1 truncate font-medium text-heading",
+						lang: e.value
+					}, m(e.label), 9, E),
+					e.value === k.value ? (f(), o("span", D)) : a("", !0)
+				])]),
 				_: 2
 			}, 1032, [
 				"description",
@@ -100,4 +108,4 @@ var x = ["aria-label"], S = ["aria-label"], C = { class: "font-mono text-xs trac
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

package/dist/lib/components/AcMapChart.js

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

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

@@ -0,0 +1,136 @@
+import type { ChartRenderer } from "../charts/echarts";
+import type { ChartColor, ChartLegendPosition } from "../charts/shared";
+/** The statuses with a built-in colour and label. Any other string is matched like AcBadge's `status`: `running` is green, `down` red. */
+export type MapPointStatus = "success" | "info" | "warning" | "danger" | "pending" | "neutral";
+/** One location on the map. */
+export interface MapPoint {
+    /** Unique key, e.g. the datacenter slug `nyc1`. */
+    id: string;
+    /** Name in the tooltip, data table and `labels`, e.g. "New York 1". */
+    label: string;
+    /** Degrees north; negative is south. */
+    latitude: number;
+    /** Degrees east; negative is west. */
+    longitude: number;
+    /** Sets the colour and legend group: `success`, `warning`, `danger`, `info`, `pending`, `neutral`, or a raw state such as `RUNNING` or `down`. Defaults to `neutral`. */
+    status?: MapPointStatus | (string & {});
+    /** A line under the label in the tooltip, e.g. "New York, United States". */
+    description?: string;
+    /** A number shown in the tooltip and data table, e.g. the cluster count. */
+    value?: number;
+    /** Colour of this point only. Wins over the status colour. */
+    color?: ChartColor;
+    /** Other fields, read by your `tooltip` slot. */
+    [key: string]: any;
+}
+/** A GeoJSON `FeatureCollection` of the areas to draw, in longitude and latitude, e.g. countries or regions. */
+export interface MapGeoJson {
+    type: "FeatureCollection";
+    features: {
+        type: "Feature";
+        geometry: {
+            type: string;
+            coordinates?: unknown;
+        } | null;
+        properties?: Record<string, any> | null;
+        id?: string | number;
+    }[];
+}
+export interface MapChartTooltipSlotProps {
+    /** The hovered point. */
+    point: MapPoint;
+    /** Its status as shown in the legend, e.g. "Healthy". */
+    statusLabel: string;
+    /** Its colour as CSS, e.g. `var(--color-success)`. */
+    color: string;
+    /** `value` run through `valueFormatter`; empty when the point has none. */
+    formattedValue: string;
+}
+export interface Props {
+    /** The locations to plot: `{ id, label, latitude, longitude, status?, description?, value? }`. */
+    points: MapPoint[];
+    /** Map height in px. The width fills the container; on narrow screens the world view shrinks to keep its shape. */
+    height?: number;
+    /** Point diameter in px, or a function of the point, e.g. to size by `value`. cloud-ui uses 10px. */
+    pointSize?: number | ((point: MapPoint) => number);
+    /** Legend names per status, e.g. `{ success: "Live", danger: "Disabled" }`. Defaults: success "Healthy", warning "Degraded", danger "Down", info "Info", pending "Pending", neutral "Unknown"; other states are humanized. */
+    statusLabels?: Record<string, string>;
+    /** Colour per status, overriding the status colour: `{ maintenance: "chart-4" }`. */
+    statusColors?: Record<string, ChartColor>;
+    /** Legend of statuses above or below the map, or `none`. Hidden anyway when every point shares one status; clicking an entry hides or shows those points. */
+    legend?: ChartLegendPosition;
+    /** Shows how many points have each status in the legend. */
+    legendValues?: boolean;
+    /** Pulses a ring around points to show they're live: `true` for healthy (`success`) points, or a list of statuses, e.g. `["danger"]`. Points stay still when the viewer asks for reduced motion. */
+    pulse?: boolean | string[];
+    /** Prints each point's `label` under it. Labels that would overlap are hidden. */
+    labels?: boolean;
+    /** Lets viewers drag to pan and scroll to zoom, and shows zoom buttons. Off by default, so the wheel keeps scrolling the page. */
+    zoom?: boolean;
+    /** Smallest and largest zoom, as multiples of the whole-world view. */
+    zoomExtent?: [number, number];
+    /** Starts zoomed to fit the points instead of the whole world. */
+    fitToPoints?: boolean;
+    /** Your own map in place of the built-in world, e.g. one your API serves. Without it, a 110m Natural Earth world (no Antarctica) loads on first use, about 40 KB gzipped. */
+    geoJson?: MapGeoJson;
+    /** Name of `value` in the tooltip and data table, e.g. "Clusters". */
+    valueLabel?: string;
+    /** Formats `value` in the tooltip and data table. Defaults to compact numbers: `1.2K`. */
+    valueFormatter?: (value: number) => string;
+    /** Plural noun for the points in the screen-reader summary: "World map, 10 datacenters: 8 healthy, 2 down." */
+    pointsLabel?: string;
+    /** Shows a tooltip with the point's label, description, status and value on hover. Customise it with the `tooltip` slot. */
+    tooltip?: boolean;
+    /** Shows a skeleton of the same height while data loads. */
+    loading?: boolean;
+    /** Text shown in place of the map when `points` is empty. */
+    emptyText?: string;
+    /** Accessible name, e.g. "Datacenters". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the map shows. Defaults to the point count per status. */
+    description?: string;
+    /** `canvas` (default) or `svg`, which is crisper when printed or zoomed. */
+    renderer?: ChartRenderer;
+    /** Fades the points in and animates changes. Always off when the viewer asks for reduced motion. */
+    animation?: boolean;
+}
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered point. */
+    tooltip?: (props: MapChartTooltipSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "point-click": (point: MapPoint) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onPoint-click"?: ((point: MapPoint) => any) | undefined;
+}>, {
+    legend: ChartLegendPosition;
+    title: string;
+    description: string;
+    height: number;
+    loading: boolean;
+    animation: boolean;
+    pulse: boolean | string[];
+    tooltip: boolean;
+    emptyText: string;
+    labels: boolean;
+    valueLabel: string;
+    renderer: ChartRenderer;
+    zoom: boolean;
+    valueFormatter: (value: number) => string;
+    legendValues: boolean;
+    pointSize: number | ((point: MapPoint) => number);
+    statusLabels: Record<string, string>;
+    statusColors: Record<string, ChartColor>;
+    zoomExtent: [number, number];
+    fitToPoints: boolean;
+    geoJson: MapGeoJson;
+    pointsLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};