@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/morph-select/morph-select.js

@@ -0,0 +1,712 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "../lib/motion.js";
+import { labelVariants } from "../label/label.js";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/morph-select/morph-select.tsx
+const TYPEAHEAD_RESET = 600;
+const PAGE = 8;
+const isGroup = (item) => "options" in item;
+/** Loose options between groups gather into unlabelled sections, so the list keeps the order it was given. */
+function normalize(items) {
+	const out = [];
+	items.forEach((item, index) => {
+		if (isGroup(item)) {
+			out.push({
+				key: `group-${index}`,
+				label: item.label,
+				options: item.options
+			});
+			return;
+		}
+		const last = out[out.length - 1];
+		if (last && !last.label) last.options.push(item);
+		else out.push({
+			key: `loose-${index}`,
+			options: [item]
+		});
+	});
+	return out;
+}
+const matches = (option, needle) => `${option.label} ${option.meta ?? ""} ${option.keywords ?? ""}`.toLowerCase().includes(needle);
+/** The closed trigger's width, rounded up. offsetWidth rounds to the nearest pixel, and half a pixel short is enough to ellipsize the label. */
+function triggerWidth(node) {
+	const exact = node.getBoundingClientRect().width;
+	const rounded = node.offsetWidth;
+	return Math.abs(exact - rounded) <= .5 ? Math.ceil(exact - .01) : rounded + 1;
+}
+/** The layout the closed trigger and its invisible measuring copy share, so the copy's width is the trigger's. */
+const triggerLayout = "box-border flex h-(--ms-h) items-center gap-2 ps-(--ms-pad) pe-10 font-medium whitespace-nowrap";
+const iconClass = "grid size-5 flex-none place-items-center text-text-secondary [&>svg]:size-4 [&>img]:size-5 [&>img]:rounded-full [&>img]:object-cover";
+/** The label a layer shows: the icon, then the text, or the placeholder. */
+function Value({ option, placeholder }) {
+	if (!option) return /* @__PURE__ */ jsx("span", {
+		className: "font-normal text-muted-foreground",
+		children: placeholder
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [option.icon ? /* @__PURE__ */ jsx("span", {
+		className: iconClass,
+		"aria-hidden": "true",
+		children: option.icon
+	}) : null, /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate",
+		children: option.label
+	})] });
+}
+/** A replaced label on its way out, popped out of flow where it stood and lifting away. */
+function LeavingLayer({ id, rect, dir, fly, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-leaving": "",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: {
+			...rect,
+			"--dir": fly ? 1 : dir * 1.5
+		},
+		className: "absolute flex min-w-0 items-center gap-2 motion-safe:animate-field-swap-out motion-reduce:animate-fade-out",
+		children
+	});
+}
+function MorphSelect({ label, labelHidden = false, items, value, defaultValue = null, onValueChange, placeholder = "Select", searchable = "auto", searchPlaceholder, panelWidth = 272, maxListHeight = 296, align = "start", size = "md", name, disabled = false, id, isInvalid = false, errorMessage, className }) {
+	const uid = useId();
+	const labelId = `${uid}-label`;
+	const errorId = `${uid}-error`;
+	const showError = isInvalid && errorMessage != null;
+	const listId = `${uid}-list`;
+	const optionId = (index) => `${uid}-option-${index}`;
+	const rootRef = useRef(null);
+	const anchorRef = useRef(null);
+	const shapeRef = useRef(null);
+	const measureRef = useRef(null);
+	const faceRef = useRef(null);
+	const scrollRef = useRef(null);
+	const triggerRef = useRef(null);
+	const [outsideLabel, setOutsideLabel] = useState(false);
+	const inputRef = useRef(null);
+	const slotRef = useRef(null);
+	const layerRef = useRef(null);
+	const highlightRef = useRef(null);
+	const searchRowRef = useRef(null);
+	const optionRefs = useRef(/* @__PURE__ */ new Map());
+	const sections = useMemo(() => normalize(items), [items]);
+	const all = useMemo(() => sections.flatMap((section) => section.options), [sections]);
+	const indexOf = useMemo(() => new Map(all.map((option, index) => [option.value, index])), [all]);
+	const canSearch = searchable === "auto" ? all.length > 8 : searchable;
+	const [inner, setInner] = useState(defaultValue);
+	const selected = value !== void 0 ? value : inner;
+	const selectedOption = selected === null ? void 0 : all.find((option) => option.value === selected);
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const [active, setActive] = useState(null);
+	const [change, setChange] = useState({
+		value: null,
+		dir: 1,
+		fly: null
+	});
+	const needle = query.trim().toLowerCase();
+	const visibleSections = useMemo(() => needle ? sections.map((section) => ({
+		...section,
+		options: section.options.filter((option) => matches(option, needle))
+	})).filter((section) => section.options.length) : sections, [needle, sections]);
+	const enabled = useMemo(() => visibleSections.flatMap((section) => section.options).filter((option) => !option.disabled), [visibleSections]);
+	const current = active !== null && enabled.some((option) => option.value === active) ? active : enabled[0]?.value ?? null;
+	const resultCount = visibleSections.reduce((sum, section) => sum + section.options.length, 0);
+	const sizes = useRef({
+		trigger: 0,
+		lid: 0,
+		listW: 0,
+		listH: 0
+	});
+	const live = useRef({
+		open: false,
+		anchorW: 0
+	});
+	const place = useCallback(() => {
+		const { trigger, lid, listW, listH } = sizes.current;
+		const shape = shapeRef.current;
+		const anchor = anchorRef.current;
+		if (!trigger || !lid || !shape || !anchor) return;
+		const isOpen = live.current.open;
+		if (trigger !== live.current.anchorW) {
+			anchor.toggleAttribute("data-widening", trigger > live.current.anchorW);
+			live.current.anchorW = trigger;
+		}
+		anchor.style.width = `${trigger}px`;
+		shape.style.width = `${isOpen ? Math.max(trigger, listW) : trigger}px`;
+		shape.style.height = `${isOpen ? lid + listH : lid}px`;
+	}, []);
+	const read = useCallback(() => {
+		const measure = measureRef.current;
+		const face = faceRef.current;
+		const root = rootRef.current;
+		if (!measure || !face || !root) return;
+		const trigger = triggerWidth(measure);
+		root.style.setProperty("--ms-trigger-w", `${trigger}px`);
+		sizes.current = {
+			trigger,
+			lid: measure.offsetHeight,
+			listW: face.offsetWidth,
+			listH: face.offsetHeight
+		};
+		place();
+	}, [place]);
+	useIsomorphicLayoutEffect(() => {
+		const measure = measureRef.current;
+		const face = faceRef.current;
+		const root = rootRef.current;
+		if (!measure || !face || !root) return;
+		read();
+		shapeRef.current?.offsetWidth;
+		root.setAttribute("data-ready", "");
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(measure);
+		observer.observe(face);
+		return () => observer.disconnect();
+	}, [read]);
+	useIsomorphicLayoutEffect(() => {
+		if (live.current.open === open) return;
+		live.current.open = open;
+		read();
+	}, [open, read]);
+	const scrollIntent = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		const highlight = highlightRef.current;
+		if (!highlight) return;
+		const node = open && current !== null ? optionRefs.current.get(current) : void 0;
+		if (!node) {
+			highlight.removeAttribute("data-on");
+			return;
+		}
+		const top = node.offsetTop;
+		const height = node.offsetHeight;
+		highlight.toggleAttribute("data-jump", !highlight.hasAttribute("data-on") || prefersReducedMotion());
+		highlight.style.translate = `0 ${top}px`;
+		highlight.style.height = `${height}px`;
+		highlight.setAttribute("data-on", "");
+		const scroller = scrollRef.current;
+		if (scroller && scrollIntent.current) {
+			scrollIntent.current = false;
+			const pad = 6;
+			if (top < scroller.scrollTop + pad) scroller.scrollTop = top - pad;
+			else if (top + height > scroller.scrollTop + scroller.clientHeight - pad) scroller.scrollTop = top + height - scroller.clientHeight + pad;
+		}
+	}, [
+		current,
+		open,
+		visibleSections
+	]);
+	useIsomorphicLayoutEffect(() => {
+		setOutsideLabel(id != null && (triggerRef.current?.labels?.length ?? 0) > 0);
+	}, [id]);
+	const showSearch = open && canSearch;
+	useIsomorphicLayoutEffect(() => {
+		triggerRef.current?.toggleAttribute("inert", showSearch);
+		searchRowRef.current?.toggleAttribute("inert", !showSearch);
+		const face = faceRef.current;
+		if (!face) return;
+		face.toggleAttribute("inert", !open);
+		if (open) face.removeAttribute("aria-hidden");
+		else face.setAttribute("aria-hidden", "true");
+	}, [open, showSearch]);
+	const pendingFocus = useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		const target = pendingFocus.current;
+		pendingFocus.current = null;
+		if (target === "input") inputRef.current?.focus({ preventScroll: true });
+		if (target === "trigger") triggerRef.current?.focus({ preventScroll: true });
+	}, [open]);
+	const typeahead = useRef({
+		buffer: "",
+		at: 0
+	});
+	/** Space opens and picks on keydown; the click a button fires on the matching keyup must not undo it. */
+	const suppressClick = useRef(false);
+	const [announcement, setAnnouncement] = useState("");
+	function openList(focus, seed = "") {
+		if (disabled || open) return;
+		setQuery(seed);
+		setActive(focus !== void 0 ? focus : selected);
+		scrollIntent.current = true;
+		pendingFocus.current = canSearch ? "input" : "trigger";
+		setAnnouncement("");
+		setOpen(true);
+	}
+	const close = useCallback((restoreFocus) => {
+		typeahead.current.buffer = "";
+		if (restoreFocus) pendingFocus.current = "trigger";
+		setOpen(false);
+	}, []);
+	function commit(option, source) {
+		if (!option || option.disabled) return;
+		if (option.value !== selected) {
+			let fly = null;
+			const slot = slotRef.current;
+			const part = source?.querySelector("[data-part='value']");
+			if (!prefersReducedMotion() && part && slot) {
+				const from = part.getBoundingClientRect();
+				const to = slot.getBoundingClientRect();
+				fly = {
+					x: from.left - to.left,
+					y: from.top + from.height / 2 - (to.top + to.height / 2)
+				};
+			}
+			const from = selected === null ? -1 : indexOf.get(selected) ?? -1;
+			const to = indexOf.get(option.value) ?? 0;
+			setChange({
+				value: option.value,
+				dir: from < 0 ? 1 : Math.sign(to - from) || 1,
+				fly
+			});
+			if (value === void 0) setInner(option.value);
+			onValueChange?.(option.value, option);
+		}
+		close(true);
+	}
+	function typeTo(char) {
+		const now = performance.now();
+		const state = typeahead.current;
+		state.buffer = now - state.at > TYPEAHEAD_RESET ? char : state.buffer + char;
+		state.at = now;
+		const buffer = state.buffer.toLowerCase();
+		const repeated = buffer.split("").every((letter) => letter === buffer[0]);
+		const search = repeated ? buffer[0] : buffer;
+		const pool = all.filter((option) => !option.disabled);
+		const from = open ? current : selected;
+		const at = pool.findIndex((option) => option.value === from);
+		const offset = repeated || buffer.length === 1 ? 1 : 0;
+		return [...pool.slice(at + offset), ...pool.slice(0, at + offset)].find((option) => option.label.toLowerCase().startsWith(search));
+	}
+	function move(to) {
+		if (to === void 0 || to === null) return;
+		scrollIntent.current = true;
+		setActive(to);
+	}
+	function onKey(event, fromInput) {
+		const { key } = event;
+		if (key === " " && !fromInput) suppressClick.current = true;
+		const printable = key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey;
+		const typing = performance.now() - typeahead.current.at < TYPEAHEAD_RESET && typeahead.current.buffer.length > 0;
+		if (!open) {
+			if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " " && !typing) {
+				event.preventDefault();
+				openList();
+				return;
+			}
+			if (key === "Home" || key === "End") {
+				event.preventDefault();
+				const pool = all.filter((option) => !option.disabled);
+				openList((key === "Home" ? pool[0] : pool[pool.length - 1])?.value ?? null);
+				return;
+			}
+			if (printable) {
+				event.preventDefault();
+				if (canSearch) openList(void 0, key);
+				else openList(typeTo(key)?.value ?? selected);
+			}
+			return;
+		}
+		const at = enabled.findIndex((option) => option.value === current);
+		const caretKeys = fromInput && query.length > 0;
+		const pick = () => commit(enabled[at], optionRefs.current.get(current ?? ""));
+		switch (key) {
+			case "ArrowDown":
+				event.preventDefault();
+				move(enabled[Math.min(enabled.length - 1, at + 1)]?.value);
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				if (event.altKey) {
+					pick();
+					return;
+				}
+				move(enabled[Math.max(0, at - 1)]?.value);
+				return;
+			case "PageDown":
+				event.preventDefault();
+				move(enabled[Math.min(enabled.length - 1, at + PAGE)]?.value);
+				return;
+			case "PageUp":
+				event.preventDefault();
+				move(enabled[Math.max(0, at - PAGE)]?.value);
+				return;
+			case "Home":
+				if (caretKeys) return;
+				event.preventDefault();
+				move(enabled[0]?.value);
+				return;
+			case "End":
+				if (caretKeys) return;
+				event.preventDefault();
+				move(enabled[enabled.length - 1]?.value);
+				return;
+			case "Enter":
+				event.preventDefault();
+				pick();
+				return;
+			case "Escape":
+				event.preventDefault();
+				event.stopPropagation();
+				close(true);
+				return;
+			case "Tab":
+				close(false);
+				return;
+		}
+		if (fromInput) return;
+		if (key === " " && !typing) {
+			event.preventDefault();
+			pick();
+			return;
+		}
+		if (printable) {
+			event.preventDefault();
+			move(typeTo(key)?.value);
+		}
+	}
+	useEffect(() => {
+		if (!open) return;
+		const down = (event) => {
+			if (!rootRef.current?.contains(event.target)) close(false);
+		};
+		document.addEventListener("pointerdown", down);
+		return () => document.removeEventListener("pointerdown", down);
+	}, [close, open]);
+	function onBlur(event) {
+		const next = event.relatedTarget;
+		if (open && next && !event.currentTarget.contains(next)) close(false);
+	}
+	function onQuery(next) {
+		setQuery(next);
+		setActive(null);
+		scrollIntent.current = true;
+		if (scrollRef.current) scrollRef.current.scrollTop = 0;
+		const text = next.trim().toLowerCase();
+		const count = text ? all.filter((option) => matches(option, text)).length : all.length;
+		setAnnouncement(text ? count ? `${count} ${count === 1 ? "option" : "options"}` : "No matches" : "");
+	}
+	const layerKey = selected ?? "__empty";
+	const flying = change.value === selected ? change.fly : null;
+	const { leaving, changed, remove } = useLeavingItems(layerKey, {
+		key: layerKey,
+		node: /* @__PURE__ */ jsx(Value, {
+			option: selectedOption,
+			placeholder
+		}),
+		dir: change.dir,
+		fly: Boolean(flying)
+	}, () => layerRef.current);
+	const rootStyle = {
+		"--ms-panel-w": `${panelWidth}px`,
+		"--ms-list-max": `${maxListHeight}px`
+	};
+	const layerStyle = {
+		"--dir": change.dir,
+		...flying ? {
+			"--fly-x": `${flying.x}px`,
+			"--fly-y": `${flying.y}px`
+		} : {}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		"data-slot": "morph-select",
+		"data-open": open || void 0,
+		"data-align": align,
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		style: rootStyle,
+		onBlur,
+		className: cn("morph-select-root group/ms relative inline-grid min-w-0 justify-items-start gap-2 font-sans leading-(--leading-normal) text-foreground data-[align=end]:justify-items-end data-[open]:z-30 data-[size=sm]:text-sm data-[size=md]:text-base data-[size=lg]:text-base", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				"data-slot": "morph-select-label",
+				className: cnAll(labelVariants(), labelHidden && "sr-only"),
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: anchorRef,
+				className: "morph-select-anchor",
+				children: [/* @__PURE__ */ jsx("span", {
+					ref: measureRef,
+					"aria-hidden": "true",
+					className: cnAll(triggerLayout, "morph-select-measure"),
+					children: /* @__PURE__ */ jsx(Value, {
+						option: selectedOption,
+						placeholder
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					ref: shapeRef,
+					"data-slot": "morph-select-shape",
+					"data-open": open || void 0,
+					"data-disabled": disabled || void 0,
+					"data-invalid": isInvalid || void 0,
+					className: "morph-select-shape",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "absolute inset-x-0 top-0 z-10 h-(--ms-h)",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								ref: triggerRef,
+								id,
+								type: "button",
+								role: "combobox",
+								"data-slot": "morph-select-trigger",
+								"aria-labelledby": outsideLabel ? void 0 : labelId,
+								"aria-invalid": isInvalid || void 0,
+								"aria-describedby": showError ? errorId : void 0,
+								"aria-haspopup": "listbox",
+								"aria-expanded": open,
+								"aria-controls": listId,
+								"aria-activedescendant": open && !canSearch && current !== null ? optionId(indexOf.get(current) ?? 0) : void 0,
+								disabled,
+								tabIndex: showSearch ? -1 : 0,
+								onClick: () => {
+									if (suppressClick.current) {
+										suppressClick.current = false;
+										return;
+									}
+									if (open) close(true);
+									else openList();
+								},
+								onKeyDown: (event) => onKey(event, false),
+								onKeyUp: (event) => {
+									if (event.key === " ") window.setTimeout(() => {
+										suppressClick.current = false;
+									});
+								},
+								className: cnAll(triggerLayout, "absolute inset-0 w-full cursor-pointer border-0 bg-transparent text-start text-foreground outline-none [font-family:inherit] [font-size:inherit] [line-height:inherit] [letter-spacing:inherit] [-webkit-tap-highlight-color:transparent] [touch-action:manipulation] disabled:cursor-not-allowed"),
+								children: /* @__PURE__ */ jsxs("span", {
+									ref: slotRef,
+									"data-hidden": showSearch || void 0,
+									className: "relative block h-full min-w-0 flex-1 data-[hidden]:opacity-0 motion-safe:transition-opacity motion-safe:duration-(--duration-instant) motion-safe:ease-settle",
+									children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingLayer, {
+										id: item.id,
+										rect: item.rect,
+										dir: item.value.dir,
+										fly: item.value.fly,
+										onDone: remove,
+										children: item.value.node
+									}, item.id)), /* @__PURE__ */ jsx("span", {
+										ref: layerRef,
+										style: layerStyle,
+										className: cnAll("absolute inset-0 flex min-w-0 items-center gap-2", changed && (flying ? "motion-safe:animate-morph-select-fly motion-reduce:animate-fade-in" : "motion-safe:animate-select-value-in motion-reduce:animate-fade-in")),
+										children: /* @__PURE__ */ jsx(Value, {
+											option: selectedOption,
+											placeholder
+										})
+									}, layerKey)]
+								})
+							}),
+							canSearch ? /* @__PURE__ */ jsxs("div", {
+								ref: searchRowRef,
+								className: cnAll("absolute inset-0 flex items-center gap-2 ps-(--ms-pad) pe-1.5 motion-safe:transition-opacity motion-safe:duration-(--duration-quick) motion-safe:ease-settle", showSearch ? "opacity-100" : "pointer-events-none opacity-0"),
+								children: [
+									/* @__PURE__ */ jsxs("svg", {
+										"aria-hidden": "true",
+										viewBox: "0 0 16 16",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "1.75",
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										className: "size-4 flex-none text-muted-foreground",
+										children: [/* @__PURE__ */ jsx("circle", {
+											cx: "7",
+											cy: "7",
+											r: "4.25"
+										}), /* @__PURE__ */ jsx("path", { d: "m10.5 10.5 3 3" })]
+									}),
+									/* @__PURE__ */ jsx("input", {
+										ref: inputRef,
+										type: "text",
+										role: "combobox",
+										"data-slot": "morph-select-search",
+										"aria-label": `Search ${label.toLowerCase()}`,
+										"aria-invalid": isInvalid || void 0,
+										"aria-describedby": showError ? errorId : void 0,
+										"aria-expanded": open,
+										"aria-controls": listId,
+										"aria-autocomplete": "list",
+										"aria-activedescendant": open && current !== null ? optionId(indexOf.get(current) ?? 0) : void 0,
+										placeholder: searchPlaceholder ?? selectedOption?.label ?? "Search",
+										value: query,
+										autoComplete: "off",
+										spellCheck: false,
+										onChange: (event) => onQuery(event.target.value),
+										onKeyDown: (event) => onKey(event, true),
+										className: "h-full min-w-0 flex-1 border-0 bg-transparent p-0 [font:inherit] text-foreground outline-none placeholder:text-muted-foreground"
+									}),
+									query ? /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": "Clear search",
+										onPointerDown: (event) => event.preventDefault(),
+										onClick: () => {
+											onQuery("");
+											inputRef.current?.focus();
+										},
+										className: "grid size-6 flex-none cursor-pointer place-items-center rounded-pill border-0 bg-muted p-0 text-text-secondary outline-none motion-safe:animate-field-clear-in motion-reduce:animate-fade-in hover:text-foreground",
+										children: /* @__PURE__ */ jsx("svg", {
+											"aria-hidden": "true",
+											viewBox: "0 0 16 16",
+											fill: "none",
+											stroke: "currentColor",
+											strokeWidth: "1.75",
+											strokeLinecap: "round",
+											className: "size-3.5",
+											children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" })
+										})
+									}) : null,
+									/* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-label": `Close ${label.toLowerCase()}`,
+										onClick: () => close(true),
+										className: "size-9 flex-none cursor-pointer rounded-pill border-0 bg-transparent p-0 outline-none motion-safe:transition-[background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle hover:bg-muted"
+									})
+								]
+							}) : null,
+							/* @__PURE__ */ jsx("svg", {
+								"aria-hidden": "true",
+								viewBox: "0 0 16 16",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.75",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								className: "pointer-events-none absolute end-4 top-1/2 -mt-2 size-4 text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-data-[open]/ms:rotate-180",
+								children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", {
+						ref: faceRef,
+						"data-open": open || void 0,
+						className: "morph-select-face",
+						children: /* @__PURE__ */ jsx("div", {
+							ref: scrollRef,
+							className: "max-h-(--ms-list-max) overflow-y-auto overscroll-contain pt-1.5 [scrollbar-width:thin]",
+							children: /* @__PURE__ */ jsxs("div", {
+								id: listId,
+								role: "listbox",
+								"aria-labelledby": labelId,
+								className: "relative grid grid-cols-1 gap-0.5",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										ref: highlightRef,
+										"aria-hidden": "true",
+										className: "morph-select-highlight"
+									}),
+									visibleSections.map((section) => {
+										const rows = section.options.map((option) => {
+											const index = indexOf.get(option.value) ?? 0;
+											const isSelected = option.value === selected;
+											return /* @__PURE__ */ jsxs("div", {
+												id: optionId(index),
+												role: "option",
+												"aria-selected": isSelected,
+												"aria-disabled": option.disabled || void 0,
+												"data-slot": "morph-select-option",
+												"data-active": option.value === current || void 0,
+												ref: (node) => {
+													if (node) optionRefs.current.set(option.value, node);
+													else optionRefs.current.delete(option.value);
+												},
+												onPointerMove: (event) => {
+													if (event.pointerType === "mouse" && !option.disabled && option.value !== current) setActive(option.value);
+												},
+												onPointerDown: (event) => event.preventDefault(),
+												onClick: (event) => commit(option, event.currentTarget),
+												className: "morph-select-option relative box-border flex min-h-9 cursor-pointer select-none items-center gap-2 rounded-lg text-text-secondary outline-none data-[active]:text-foreground aria-selected:text-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-(--opacity-disabled) motion-safe:transition-colors motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+												children: [
+													/* @__PURE__ */ jsxs("span", {
+														"data-part": "value",
+														className: "flex min-w-0 flex-1 items-center gap-2 font-medium",
+														children: [option.icon ? /* @__PURE__ */ jsx("span", {
+															className: iconClass,
+															"aria-hidden": "true",
+															children: option.icon
+														}) : null, /* @__PURE__ */ jsx("span", {
+															className: "min-w-0 truncate",
+															children: option.label
+														})]
+													}),
+													option.meta ? /* @__PURE__ */ jsx("span", {
+														className: "flex-none text-xs tabular-nums text-muted-foreground",
+														children: option.meta
+													}) : null,
+													/* @__PURE__ */ jsx("span", {
+														"aria-hidden": "true",
+														"data-on": isSelected || void 0,
+														className: "grid size-4 flex-none scale-60 place-items-center text-foreground opacity-0 data-[on]:scale-100 data-[on]:opacity-100 motion-safe:transition-[opacity,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+														children: /* @__PURE__ */ jsx("svg", {
+															viewBox: "0 0 16 16",
+															fill: "none",
+															stroke: "currentColor",
+															strokeWidth: "1.75",
+															strokeLinecap: "round",
+															strokeLinejoin: "round",
+															className: "size-4",
+															children: /* @__PURE__ */ jsx("path", { d: "m3.5 8.5 3 3 6-6" })
+														})
+													})
+												]
+											}, option.value);
+										});
+										return section.label ? /* @__PURE__ */ jsxs("div", {
+											role: "group",
+											"aria-labelledby": `${uid}-${section.key}`,
+											className: "grid grid-cols-1 gap-0.5 not-first:mt-1",
+											children: [/* @__PURE__ */ jsx("div", {
+												id: `${uid}-${section.key}`,
+												role: "presentation",
+												className: "px-2.5 pt-2 pb-1 text-xs text-muted-foreground",
+												children: section.label
+											}), rows]
+										}, section.key) : /* @__PURE__ */ jsx("div", {
+											role: "presentation",
+											className: "grid grid-cols-1 gap-0.5 not-first:mt-1",
+											children: rows
+										}, section.key);
+									}),
+									resultCount === 0 ? /* @__PURE__ */ jsxs("p", {
+										className: "m-0 px-2.5 pt-3 pb-3.5 text-sm text-muted-foreground",
+										children: [
+											"No matches for “",
+											query.trim(),
+											"”"
+										]
+									}) : null
+								]
+							})
+						})
+					})]
+				})]
+			}),
+			showError ? /* @__PURE__ */ jsx("span", {
+				id: errorId,
+				"data-slot": "morph-select-error",
+				className: "text-sm leading-(--leading-normal) text-destructive-strong",
+				children: errorMessage
+			}) : null,
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: selected ?? ""
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { MorphSelect };
+
+//# sourceMappingURL=morph-select.js.map