@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/phone-input/phone-input.js

@@ -0,0 +1,440 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { SelectItem, selectPopoverVariants } from "../select/select.js";
+import { useFlagEmoji } from "../lib/flag-emoji.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
+import { PHONE_COUNTRIES, capDigits, caretAfterDigits, flagOf, formatNational, lengthsOf, matchesCountry, onlyDigits, parsePhoneNumber, phoneCountryByIso, phoneStatus, splitTrunk, toE164 } from "./phone-countries.js";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { Autocomplete, Button, Dialog, DialogTrigger, Group, Input, ListBox, Popover, SearchField } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/phone-input/phone-input.tsx
+const focusRing = "data-[focus-visible]:not-data-[invalid]:border-foreground forced-colors:data-[focus-visible]:outline-solid forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width) forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)";
+const shellClass = cnAll(fieldSurfaceVariants(), "flex h-(--density-control-h-md) items-center", "has-[input:focus]:not-data-[invalid]:border-foreground", "forced-colors:has-[input:focus]:outline-solid forced-colors:has-[input:focus]:outline-(length:--focus-ring-width) forced-colors:has-[input:focus]:outline-offset-(--focus-ring-offset)", focusRing);
+const triggerClass = cnAll("group/trigger m-1 inline-flex h-[calc(100%-0.5rem)] flex-none cursor-pointer items-center gap-1.5 rounded-control border-0 bg-transparent ps-2.5 pe-2 font-sans text-base font-medium tabular-nums text-foreground outline-none", "motion-safe:transition-[background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle", "data-[hovered]:bg-muted data-[pressed]:bg-muted data-[disabled]:cursor-not-allowed", focusRing);
+/** A native `<input>` styled flat: the shell draws the surface. */
+const numberClass = "relative z-10 m-0 h-full w-full min-w-0 appearance-none border-0 bg-transparent px-3 pe-10 font-sans text-base tabular-nums text-foreground outline-none selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed";
+const searchClass = "relative flex h-(--density-control-h-sm) items-center gap-2 border-b-(length:--border-width) border-border px-2.5 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-(--focus-ring-width) after:bg-transparent has-[input:focus]:after:bg-(--color-control-edge)";
+const rowClass = "group/row rounded-control data-[hovered]:bg-muted data-[focus-visible]:outline-(--color-control-edge)";
+const nameClass = "min-w-0 flex-1 truncate font-medium text-text-secondary group-data-[selected]/row:text-foreground group-data-[focused]/row:text-foreground group-data-[hovered]/row:text-foreground";
+const flagClass = "w-6 flex-none text-center text-base leading-none";
+const codeClass = "w-6 flex-none text-center text-xs font-semibold leading-none tracking-wide text-muted-foreground";
+const emptyClass = "px-3 py-3 text-sm text-muted-foreground";
+const SORTED = [...PHONE_COUNTRIES].sort((a, b) => a.name.localeCompare(b.name));
+const textValueOf = (entry) => `${entry.name} ${entry.iso} +${entry.dial}`;
+const PhoneInput = forwardRef(function PhoneInput({ label, labelHidden = false, value, defaultValue, onValueChange, country: countryProp, defaultCountry = "US", onCountryChange, countries, description, error, validate = true, flags = "auto", disabled = false, required, name, id, className, onBlur }, forwardedRef) {
+	const pool = useMemo(() => countries?.length ? PHONE_COUNTRIES.filter((entry) => countries.includes(entry.iso)) : PHONE_COUNTRIES, [countries]);
+	const list = useMemo(() => SORTED.filter((entry) => pool.includes(entry)), [pool]);
+	const items = useMemo(() => list.map((entry) => ({
+		...entry,
+		id: entry.iso
+	})), [list]);
+	const canDrawFlags = useFlagEmoji();
+	const flagEmoji = flags === "auto" ? canDrawFlags : flags === "emoji";
+	const fallback = phoneCountryByIso(defaultCountry) ?? PHONE_COUNTRIES[0];
+	const [state, setState] = useState(() => {
+		const parsed = parsePhoneNumber(value ?? defaultValue ?? "", pool);
+		return parsed ? {
+			iso: parsed.country.iso,
+			digits: parsed.national
+		} : {
+			iso: fallback.iso,
+			digits: ""
+		};
+	});
+	const iso = countryProp ?? state.iso;
+	const current = phoneCountryByIso(iso) ?? fallback;
+	const digits = state.digits;
+	const e164 = toE164(current, digits);
+	const [seenValue, setSeenValue] = useState(value);
+	if (value !== seenValue) {
+		setSeenValue(value);
+		if (value !== void 0 && value !== e164) {
+			const parsed = parsePhoneNumber(value, pool);
+			setState(parsed ? {
+				iso: parsed.country.iso,
+				digits: parsed.national
+			} : {
+				iso,
+				digits: ""
+			});
+		}
+	}
+	const formatted = formatNational(current, digits);
+	const status = phoneStatus(current, digits);
+	const [touched, setTouched] = useState(false);
+	const [edited, setEdited] = useState(false);
+	const lengths = lengthsOf(current);
+	const lengthCopy = lengths.length === 1 ? `${lengths[0]}` : `${lengths.slice(0, -1).join(", ")} or ${lengths[lengths.length - 1]}`;
+	const builtIn = validate && touched && (status === "incomplete" || status === "too-long") ? `Numbers in ${current.name} have ${lengthCopy} digits` : void 0;
+	const message = error ?? builtIn;
+	const guide = useMemo(() => {
+		const [trunk, rest] = splitTrunk(current, digits);
+		if (rest.length >= current.example.length) return "";
+		const full = formatNational(current, trunk + rest + current.example.slice(rest.length));
+		return full.startsWith(formatted) ? full.slice(formatted.length) : "";
+	}, [
+		current,
+		digits,
+		formatted
+	]);
+	const inputRef = useRef(null);
+	useImperativeHandle(forwardedRef, () => inputRef.current);
+	const shellRef = useRef(null);
+	const pendingCaret = useRef(null);
+	const [, rerender] = useReducer((count) => count + 1, 0);
+	const [announcement, setAnnouncement] = useState("");
+	const emit = useCallback((entry, nextDigits) => {
+		const nextStatus = phoneStatus(entry, nextDigits);
+		onValueChange?.(toE164(entry, nextDigits), {
+			country: entry,
+			formatted: formatNational(entry, nextDigits),
+			status: nextStatus,
+			valid: nextStatus === "valid"
+		});
+	}, [onValueChange]);
+	function setNumber(nextDigits, caretDigits, entry = current) {
+		const capped = capDigits(entry, nextDigits);
+		pendingCaret.current = caretDigits === null ? null : Math.min(caretDigits, capped.length);
+		if (entry.iso !== current.iso) onCountryChange?.(entry.iso);
+		if (capped === digits && entry.iso === current.iso) {
+			rerender();
+			return;
+		}
+		setEdited(true);
+		setState({
+			iso: entry.iso,
+			digits: capped
+		});
+		emit(entry, capped);
+	}
+	useIsomorphicLayoutEffect(() => {
+		const input = inputRef.current;
+		const count = pendingCaret.current;
+		pendingCaret.current = null;
+		if (!input || count === null || document.activeElement !== input) return;
+		const position = caretAfterDigits(input.value, count);
+		input.setSelectionRange(position, position);
+	});
+	function onNumberChange(input) {
+		const raw = input.value;
+		if (raw.includes("+") || /^\s*00/.test(raw) && onlyDigits(raw).length > 6) {
+			const parsed = parsePhoneNumber(raw.slice(Math.max(0, raw.indexOf("+"))), pool);
+			if (parsed?.national) {
+				if (parsed.country.iso !== current.iso) setAnnouncement(`Country set to ${parsed.country.name}`);
+				setNumber(parsed.national, parsed.national.length, parsed.country);
+				return;
+			}
+		}
+		const caret = input.selectionStart ?? raw.length;
+		setNumber(onlyDigits(raw), onlyDigits(raw.slice(0, caret)).length);
+	}
+	function onNumberKeyDown(event) {
+		const input = event.currentTarget;
+		if (event.key === "+" && !event.metaKey && !event.ctrlKey) {
+			event.preventDefault();
+			setQuery("+");
+			setOpen(true);
+			return;
+		}
+		const start = input.selectionStart ?? 0;
+		if (start !== (input.selectionEnd ?? 0) || event.metaKey || event.ctrlKey || event.altKey) return;
+		if (event.key === "Backspace" && start > 0 && !/\d/.test(input.value[start - 1])) {
+			event.preventDefault();
+			const index = onlyDigits(input.value.slice(0, start)).length;
+			if (index > 0) setNumber(digits.slice(0, index - 1) + digits.slice(index), index - 1);
+		}
+		if (event.key === "Delete" && start < input.value.length && !/\d/.test(input.value[start])) {
+			event.preventDefault();
+			const index = onlyDigits(input.value.slice(0, start)).length;
+			setNumber(digits.slice(0, index) + digits.slice(index + 1), index);
+		}
+	}
+	function onPaste(event) {
+		const text = event.clipboardData.getData("text");
+		if (!text) return;
+		event.preventDefault();
+		const input = event.currentTarget;
+		const parsed = /^\s*(\+|00)/.test(text) ? parsePhoneNumber(text, pool) : null;
+		if (parsed) {
+			if (parsed.country.iso !== current.iso) setAnnouncement(`Country set to ${parsed.country.name}`);
+			setNumber(parsed.national, parsed.national.length, parsed.country);
+			return;
+		}
+		let pasted = onlyDigits(text);
+		if (pasted.startsWith(current.dial) && pasted.length > capDigits(current, pasted).length) pasted = pasted.slice(current.dial.length);
+		if (pasted.length >= Math.min(...lengthsOf(current))) {
+			setNumber(pasted, pasted.length);
+			return;
+		}
+		const from = onlyDigits(input.value.slice(0, input.selectionStart ?? 0)).length;
+		const to = onlyDigits(input.value.slice(0, input.selectionEnd ?? 0)).length;
+		setNumber(digits.slice(0, from) + pasted + digits.slice(to), from + pasted.length);
+	}
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const openRef = useRef(false);
+	openRef.current = open;
+	function pick(key) {
+		const entry = list.find((item) => item.iso === key);
+		if (!entry) return;
+		if (entry.iso !== current.iso) {
+			const nextDigits = capDigits(entry, digits);
+			if (countryProp === void 0) setState({
+				iso: entry.iso,
+				digits: nextDigits
+			});
+			else setState((last) => ({
+				...last,
+				digits: nextDigits
+			}));
+			onCountryChange?.(entry.iso);
+			emit(entry, nextDigits);
+			setEdited(true);
+			setAnnouncement(`${entry.name}, +${entry.dial}`);
+		}
+		setOpen(false);
+		requestAnimationFrame(() => {
+			if (!openRef.current) inputRef.current?.focus({ preventScroll: true });
+		});
+	}
+	const filter = useCallback((textValue, inputValue) => {
+		const entry = SORTED.find((item) => textValueOf(item) === textValue);
+		return entry ? matchesCountry(entry, inputValue) : true;
+	}, []);
+	const field = useFieldWiring({
+		enabled: true,
+		id,
+		describedBy: void 0,
+		invalid: void 0,
+		description,
+		error: message
+	});
+	const showCheck = status === "valid";
+	const control = /* @__PURE__ */ jsxs(Group, {
+		ref: shellRef,
+		role: "presentation",
+		isDisabled: disabled,
+		isInvalid: Boolean(message),
+		"data-slot": "phone-input-shell",
+		className: shellClass,
+		children: [/* @__PURE__ */ jsxs(DialogTrigger, {
+			isOpen: open,
+			onOpenChange: (next) => {
+				setOpen(next);
+				if (next) setQuery("");
+			},
+			children: [/* @__PURE__ */ jsxs(Button, {
+				isDisabled: disabled,
+				"aria-label": `Country, ${current.name} +${current.dial}`,
+				"data-slot": "phone-input-country",
+				className: triggerClass,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-slot": "phone-input-flag",
+						"data-glyph": flagEmoji ? "flag" : "code",
+						className: flagEmoji ? flagClass : codeClass,
+						children: flagEmoji ? flagOf(current.iso) : current.iso
+					}),
+					/* @__PURE__ */ jsx(SwapText, {
+						swapKey: current.iso,
+						motion: "roll",
+						className: "inline-flex",
+						children: /* @__PURE__ */ jsxs("span", {
+							"data-slot": "phone-input-dial",
+							children: ["+", current.dial]
+						})
+					}),
+					/* @__PURE__ */ jsx("svg", {
+						"aria-hidden": "true",
+						viewBox: "0 0 16 16",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "1.75",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						className: "size-4 text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180",
+						children: /* @__PURE__ */ jsx("path", { d: "m4 6 4 4 4-4" })
+					})
+				]
+			}), /* @__PURE__ */ jsx(Popover, {
+				triggerRef: shellRef,
+				placement: "bottom start",
+				offset: 8,
+				"data-slot": "phone-input-popover",
+				className: cnAll(selectPopoverVariants({ reveal: "fade" }), "flex w-80 max-w-[calc(100vw-2rem)] flex-col overflow-hidden"),
+				children: /* @__PURE__ */ jsx(Dialog, {
+					"aria-label": "Country",
+					className: "flex min-h-0 flex-col gap-1 outline-none",
+					children: /* @__PURE__ */ jsxs(Autocomplete, {
+						filter,
+						inputValue: query,
+						onInputChange: setQuery,
+						children: [/* @__PURE__ */ jsxs(SearchField, {
+							"aria-label": "Search countries or calling codes",
+							autoFocus: true,
+							className: searchClass,
+							children: [
+								/* @__PURE__ */ jsxs("svg", {
+									"aria-hidden": "true",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: 2,
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									className: "size-4 flex-none text-muted-foreground",
+									children: [/* @__PURE__ */ jsx("circle", {
+										cx: "11",
+										cy: "11",
+										r: "8"
+									}), /* @__PURE__ */ jsx("path", { d: "m21 21-4.34-4.34" })]
+								}),
+								/* @__PURE__ */ jsx(Input, {
+									placeholder: "Country or code",
+									"data-slot": "phone-input-search",
+									className: "min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-sans text-sm text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden"
+								}),
+								/* @__PURE__ */ jsx("svg", {
+									"aria-hidden": "true",
+									"data-slot": "phone-input-search-chevron",
+									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("path", { d: "m4 10 4-4 4 4" })
+								})
+							]
+						}), /* @__PURE__ */ jsx(ScrollArea, {
+							label: "Country list",
+							className: "max-h-72 rounded-control",
+							viewportClassName: "rounded-control focus-visible:outline-(--color-control-edge)",
+							children: /* @__PURE__ */ jsx(ListBox, {
+								"aria-label": "Countries",
+								selectionMode: "single",
+								selectedKeys: [current.iso],
+								escapeKeyBehavior: "none",
+								onSelectionChange: (keys) => {
+									if (keys === "all") return;
+									pick([...keys][0] ?? current.iso);
+								},
+								items,
+								renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+									className: emptyClass,
+									children: "No countries match"
+								}),
+								className: "outline-none",
+								children: (entry) => /* @__PURE__ */ jsxs(SelectItem, {
+									id: entry.id,
+									textValue: textValueOf(entry),
+									className: rowClass,
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											"data-slot": "phone-input-row-flag",
+											"data-glyph": flagEmoji ? "flag" : "code",
+											className: flagEmoji ? flagClass : codeClass,
+											children: flagEmoji ? flagOf(entry.iso) : entry.iso
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: nameClass,
+											children: entry.name
+										}),
+										/* @__PURE__ */ jsxs("span", {
+											className: "flex-none text-xs tabular-nums text-muted-foreground",
+											children: ["+", entry.dial]
+										})
+									]
+								})
+							})
+						})]
+					})
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "relative flex h-full min-w-0 flex-1 items-center border-s-(length:--border-width) border-border",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					"data-slot": "phone-input-guide",
+					className: "pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-pre px-3 font-sans text-base tabular-nums text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "invisible",
+						children: formatted
+					}), guide]
+				}),
+				/* @__PURE__ */ jsx(Input, {
+					ref: inputRef,
+					...field.controlProps,
+					"data-slot": "phone-input-number",
+					type: "tel",
+					inputMode: "tel",
+					autoComplete: "tel",
+					value: formatted,
+					disabled,
+					required,
+					"aria-label": labelHidden ? label : void 0,
+					onChange: (event) => onNumberChange(event.currentTarget),
+					onKeyDown: onNumberKeyDown,
+					onPaste,
+					onBlur: (event) => {
+						setTouched(digits.length > 0);
+						onBlur?.(event);
+					},
+					className: numberClass
+				}),
+				showCheck ? /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					"data-slot": "phone-input-valid",
+					viewBox: "0 0 16 16",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					className: cn("pointer-events-none absolute end-3 size-4 text-success-strong", edited && "motion-safe:animate-select-check-in"),
+					children: /* @__PURE__ */ jsx("path", { d: "m3.5 8.5 3 3 6-6" })
+				}) : null
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full min-w-0 font-sans", className),
+		"data-slot": "phone-input",
+		"data-country": current.iso,
+		children: [
+			/* @__PURE__ */ jsx(FieldShell, {
+				label: labelHidden ? null : label,
+				controlId: field.controlId,
+				description,
+				hintId: field.hintId,
+				error: message,
+				errorId: field.errorId,
+				children: control
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: e164
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: announcement || (showCheck ? `Valid ${current.name} number` : "")
+			})
+		]
+	});
+});
+PhoneInput.displayName = "PhoneInput";
+//#endregion
+export { PhoneInput };
+
+//# sourceMappingURL=phone-input.js.map

package/dist/phone-input/phone-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input.js","names":["AriaGroup","AriaDialogTrigger","AriaButton","AriaPopover","AriaDialog","AriaAutocomplete","AriaSearchField","AriaInput","AriaListBox"],"sources":["../../src/phone-input/phone-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type FocusEvent,\n  type KeyboardEvent,\n} from \"react\";\nimport {\n  Autocomplete as AriaAutocomplete,\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  DialogTrigger as AriaDialogTrigger,\n  Group as AriaGroup,\n  Input as AriaInput,\n  ListBox as AriaListBox,\n  Popover as AriaPopover,\n  SearchField as AriaSearchField,\n  type Key,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { FieldShell, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\nimport { useFlagEmoji } from \"../lib/flag-emoji.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { ScrollArea } from \"../scroll-area/scroll-area.js\";\nimport { SelectItem, selectPopoverVariants } from \"../select/select.js\";\nimport {\n  PHONE_COUNTRIES,\n  capDigits,\n  caretAfterDigits,\n  flagOf,\n  formatNational,\n  lengthsOf,\n  matchesCountry,\n  onlyDigits,\n  parsePhoneNumber,\n  phoneCountryByIso,\n  phoneStatus,\n  splitTrunk,\n  toE164,\n  type PhoneCountry,\n  type PhoneStatus,\n} from \"./phone-countries.js\";\n\n/** What `onValueChange` hands over beside the E.164 number. */\nexport interface PhoneInputDetails {\n  country: PhoneCountry;\n  /** The number as shown in the field, without the calling code. */\n  formatted: string;\n  status: PhoneStatus;\n  valid: boolean;\n}\n\n/**\n * PhoneInput: a phone number with a country picker. The number formats as it is\n * typed (grouping follows the country, the caret stays on the digit it was on, a\n * faint guide shows the rest of the expected shape), a pasted or autofilled\n * international number such as \"+44 7400 123456\" picks its own country, and the\n * value comes out in E.164. The picker is a searchable list (React Aria\n * Autocomplete) that matches names, ISO codes and calling codes; typing \"+\" in\n * the number opens it with a calling code search.\n *\n * Formatting and length checks come from a compact country table in this\n * package, not a phone-number library: it knows the usual digit count and\n * grouping of about fifty countries, not which prefixes a carrier has assigned.\n * Use a full library on the server when a number must be a real, assigned line.\n */\nexport interface PhoneInputProps {\n  /** What the number is for, and the field's accessible name. */\n  label: string;\n  /** Keep the label for assistive technology only. */\n  labelHidden?: boolean;\n  /** The number in E.164, such as \"+14155550132\". An empty string clears the field. */\n  value?: string;\n  defaultValue?: string;\n  /** Fires on every edit with the E.164 number (empty when there are no digits) and its parsed details. */\n  onValueChange?: (value: string, details: PhoneInputDetails) => void;\n  /** ISO code of the selected country. Controlled when given. */\n  country?: string;\n  /** ISO code used until someone picks a country or enters an international number. @default \"US\" */\n  defaultCountry?: string;\n  onCountryChange?: (iso: string) => void;\n  /** Limit the picker to these ISO codes. */\n  countries?: string[];\n  /** Helper text under the field. A string, because the copy is animated word by word. */\n  description?: string;\n  /** Replaces the built-in length message. */\n  error?: string;\n  /** Show a message after blur when the number is incomplete. @default true */\n  validate?: boolean;\n  /**\n   * How a country is marked in the field and the list. `auto` draws the flag emoji where the platform can (Windows\n   * cannot) and the two-letter ISO code where it cannot; `emoji` and `code` force one.\n   * @default \"auto\"\n   */\n  flags?: \"auto\" | \"emoji\" | \"code\";\n  disabled?: boolean;\n  required?: boolean;\n  /** Adds a hidden input carrying the E.164 value for native form submission. */\n  name?: string;\n  id?: string;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n}\n\n/*\n * Focus turns the shell's own border dark (the foreground colour), as every text field does: no separate ring.\n * The outline comes back only under forced colours, where a border colour is overridden.\n */\nconst focusRing =\n  \"data-[focus-visible]:not-data-[invalid]:border-foreground forced-colors:data-[focus-visible]:outline-solid forced-colors:data-[focus-visible]:outline-(length:--focus-ring-width) forced-colors:data-[focus-visible]:outline-offset-(--focus-ring-offset)\";\n\nconst shellClass = cnAll(\n  fieldSurfaceVariants(),\n  \"flex h-(--density-control-h-md) items-center\",\n  // Focus turns the box's own border dark whenever the number holds focus; no separate ring.\n  \"has-[input:focus]:not-data-[invalid]:border-foreground\",\n  \"forced-colors:has-[input:focus]:outline-solid forced-colors:has-[input:focus]:outline-(length:--focus-ring-width) forced-colors:has-[input:focus]:outline-offset-(--focus-ring-offset)\",\n  focusRing,\n);\n\nconst triggerClass = cnAll(\n  \"group/trigger m-1 inline-flex h-[calc(100%-0.5rem)] flex-none cursor-pointer items-center gap-1.5 rounded-control border-0 bg-transparent ps-2.5 pe-2 font-sans text-base font-medium tabular-nums text-foreground outline-none\",\n  \"motion-safe:transition-[background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n  \"data-[hovered]:bg-muted data-[pressed]:bg-muted data-[disabled]:cursor-not-allowed\",\n  focusRing,\n);\n\n/** A native `<input>` styled flat: the shell draws the surface. */\nconst numberClass =\n  \"relative z-10 m-0 h-full w-full min-w-0 appearance-none border-0 bg-transparent px-3 pe-10 font-sans text-base tabular-nums text-foreground outline-none selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed\";\n\n/*\n * The search is a flat top row of the panel, not a boxed pill: icon, text, a decorative chevron at the end and a hairline\n * divider below. Focus is a 2px neutral underline (control-edge, 3:1 on the surface) drawn over the divider, so it can\n * never read as a second ring around a border.\n */\nconst searchClass =\n  \"relative flex h-(--density-control-h-sm) items-center gap-2 border-b-(length:--border-width) border-border px-2.5 after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-(--focus-ring-width) after:bg-transparent has-[input:focus]:after:bg-(--color-control-edge)\";\n\n/*\n * Rows read quietly: secondary ink for the name, a soft pill under the row the pointer or the arrows reached, and\n * full ink once a row is the chosen country or the highlighted one. The list sits in an Autocomplete, which marks the\n * keyboard row data-focused but the pointer row only data-hovered, so both states are styled. The tick sits at the end (SelectItem draws it).\n */\nconst rowClass =\n  \"group/row rounded-control data-[hovered]:bg-muted data-[focus-visible]:outline-(--color-control-edge)\";\nconst nameClass =\n  \"min-w-0 flex-1 truncate font-medium text-text-secondary group-data-[selected]/row:text-foreground group-data-[focused]/row:text-foreground group-data-[hovered]/row:text-foreground\";\n\n/* A flag glyph, or (where the platform draws none) the ISO code in the same slot. */\nconst flagClass = \"w-6 flex-none text-center text-base leading-none\";\nconst codeClass = \"w-6 flex-none text-center text-xs font-semibold leading-none tracking-wide text-muted-foreground\";\n\nconst emptyClass = \"px-3 py-3 text-sm text-muted-foreground\";\n\nconst SORTED = [...PHONE_COUNTRIES].sort((a, b) => a.name.localeCompare(b.name));\nconst textValueOf = (entry: PhoneCountry) => `${entry.name} ${entry.iso} +${entry.dial}`;\n\nexport const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(function PhoneInput(\n  {\n    label,\n    labelHidden = false,\n    value,\n    defaultValue,\n    onValueChange,\n    country: countryProp,\n    defaultCountry = \"US\",\n    onCountryChange,\n    countries,\n    description,\n    error,\n    validate = true,\n    flags = \"auto\",\n    disabled = false,\n    required,\n    name,\n    id,\n    className,\n    onBlur,\n  },\n  forwardedRef,\n) {\n  const pool = useMemo(\n    () =>\n      countries?.length ? PHONE_COUNTRIES.filter((entry) => countries.includes(entry.iso)) : PHONE_COUNTRIES,\n    [countries],\n  );\n  const list = useMemo(() => SORTED.filter((entry) => pool.includes(entry)), [pool]);\n  const items = useMemo(() => list.map((entry) => ({ ...entry, id: entry.iso })), [list]);\n  const canDrawFlags = useFlagEmoji();\n  const flagEmoji = flags === \"auto\" ? canDrawFlags : flags === \"emoji\";\n  const fallback = phoneCountryByIso(defaultCountry) ?? PHONE_COUNTRIES[0]!;\n\n  const [state, setState] = useState(() => {\n    const parsed = parsePhoneNumber(value ?? defaultValue ?? \"\", pool);\n    return parsed\n      ? { iso: parsed.country.iso, digits: parsed.national }\n      : { iso: fallback.iso, digits: \"\" };\n  });\n  const iso = countryProp ?? state.iso;\n  const current = phoneCountryByIso(iso) ?? fallback;\n  const digits = state.digits;\n  const e164 = toE164(current, digits);\n\n  // A controlled value that differs from what the field last produced is read back in.\n  const [seenValue, setSeenValue] = useState(value);\n  if (value !== seenValue) {\n    setSeenValue(value);\n    if (value !== undefined && value !== e164) {\n      const parsed = parsePhoneNumber(value, pool);\n      setState(parsed ? { iso: parsed.country.iso, digits: parsed.national } : { iso, digits: \"\" });\n    }\n  }\n\n  const formatted = formatNational(current, digits);\n  const status = phoneStatus(current, digits);\n  const [touched, setTouched] = useState(false);\n  // The check animates in only for a number that became valid after mount.\n  const [edited, setEdited] = useState(false);\n  const lengths = lengthsOf(current);\n  const lengthCopy =\n    lengths.length === 1\n      ? `${lengths[0]}`\n      : `${lengths.slice(0, -1).join(\", \")} or ${lengths[lengths.length - 1]}`;\n  const builtIn =\n    validate && touched && (status === \"incomplete\" || status === \"too-long\")\n      ? `Numbers in ${current.name} have ${lengthCopy} digits`\n      : undefined;\n  const message = error ?? builtIn;\n\n  /* The guide: the rest of the example number in the shape this country expects, drawn faintly after what was typed. */\n  const guide = useMemo(() => {\n    const [trunk, rest] = splitTrunk(current, digits);\n    if (rest.length >= current.example.length) return \"\";\n    const full = formatNational(current, trunk + rest + current.example.slice(rest.length));\n    return full.startsWith(formatted) ? full.slice(formatted.length) : \"\";\n  }, [current, digits, formatted]);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(forwardedRef, () => inputRef.current as HTMLInputElement);\n  const shellRef = useRef<HTMLDivElement>(null);\n  const pendingCaret = useRef<number | null>(null);\n  const [, rerender] = useReducer((count: number) => count + 1, 0);\n  const [announcement, setAnnouncement] = useState(\"\");\n\n  const emit = useCallback(\n    (entry: PhoneCountry, nextDigits: string) => {\n      const nextStatus = phoneStatus(entry, nextDigits);\n      onValueChange?.(toE164(entry, nextDigits), {\n        country: entry,\n        formatted: formatNational(entry, nextDigits),\n        status: nextStatus,\n        valid: nextStatus === \"valid\",\n      });\n    },\n    [onValueChange],\n  );\n\n  function setNumber(nextDigits: string, caretDigits: number | null, entry = current) {\n    const capped = capDigits(entry, nextDigits);\n    pendingCaret.current = caretDigits === null ? null : Math.min(caretDigits, capped.length);\n    if (entry.iso !== current.iso) onCountryChange?.(entry.iso);\n    // Nothing changed (a refused digit): React restores the old text after this handler, so the caret is placed on the next render.\n    if (capped === digits && entry.iso === current.iso) {\n      rerender();\n      return;\n    }\n    setEdited(true);\n    setState({ iso: entry.iso, digits: capped });\n    emit(entry, capped);\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    const input = inputRef.current;\n    const count = pendingCaret.current;\n    pendingCaret.current = null;\n    if (!input || count === null || document.activeElement !== input) return;\n    const position = caretAfterDigits(input.value, count);\n    input.setSelectionRange(position, position);\n  });\n\n  /* ---------------------------------------------- Number entry ---------------------------------------------- */\n\n  function onNumberChange(input: HTMLInputElement) {\n    const raw = input.value;\n    // Autofill and dropped text arrive as a change: an international number chooses its own country.\n    if (raw.includes(\"+\") || (/^\\s*00/.test(raw) && onlyDigits(raw).length > 6)) {\n      const parsed = parsePhoneNumber(raw.slice(Math.max(0, raw.indexOf(\"+\"))), pool);\n      if (parsed?.national) {\n        if (parsed.country.iso !== current.iso) setAnnouncement(`Country set to ${parsed.country.name}`);\n        setNumber(parsed.national, parsed.national.length, parsed.country);\n        return;\n      }\n    }\n    const caret = input.selectionStart ?? raw.length;\n    setNumber(onlyDigits(raw), onlyDigits(raw.slice(0, caret)).length);\n  }\n\n  function onNumberKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n    if (event.key === \"+\" && !event.metaKey && !event.ctrlKey) {\n      event.preventDefault();\n      setQuery(\"+\");\n      setOpen(true);\n      return;\n    }\n    const start = input.selectionStart ?? 0;\n    const end = input.selectionEnd ?? 0;\n    if (start !== end || event.metaKey || event.ctrlKey || event.altKey) return;\n    // Deleting a separator deletes the digit beside it instead of doing nothing.\n    if (event.key === \"Backspace\" && start > 0 && !/\\d/.test(input.value[start - 1]!)) {\n      event.preventDefault();\n      const index = onlyDigits(input.value.slice(0, start)).length;\n      if (index > 0) setNumber(digits.slice(0, index - 1) + digits.slice(index), index - 1);\n    }\n    if (event.key === \"Delete\" && start < input.value.length && !/\\d/.test(input.value[start]!)) {\n      event.preventDefault();\n      const index = onlyDigits(input.value.slice(0, start)).length;\n      setNumber(digits.slice(0, index) + digits.slice(index + 1), index);\n    }\n  }\n\n  function onPaste(event: ClipboardEvent<HTMLInputElement>) {\n    const text = event.clipboardData.getData(\"text\");\n    if (!text) return;\n    event.preventDefault();\n    const input = event.currentTarget;\n    const parsed = /^\\s*(\\+|00)/.test(text) ? parsePhoneNumber(text, pool) : null;\n    if (parsed) {\n      if (parsed.country.iso !== current.iso) setAnnouncement(`Country set to ${parsed.country.name}`);\n      setNumber(parsed.national, parsed.national.length, parsed.country);\n      return;\n    }\n    let pasted = onlyDigits(text);\n    // \"1 415 555 0132\" pasted into a US field: the leading calling code goes when the number would not fit otherwise.\n    if (pasted.startsWith(current.dial) && pasted.length > capDigits(current, pasted).length) {\n      pasted = pasted.slice(current.dial.length);\n    }\n    // A whole number replaces what was there; a fragment goes in at the caret.\n    if (pasted.length >= Math.min(...lengthsOf(current))) {\n      setNumber(pasted, pasted.length);\n      return;\n    }\n    const from = onlyDigits(input.value.slice(0, input.selectionStart ?? 0)).length;\n    const to = onlyDigits(input.value.slice(0, input.selectionEnd ?? 0)).length;\n    setNumber(digits.slice(0, from) + pasted + digits.slice(to), from + pasted.length);\n  }\n\n  /* ---------------------------------------------- Country picker ---------------------------------------------- */\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const openRef = useRef(false);\n  openRef.current = open;\n\n  function pick(key: Key | undefined) {\n    const entry = list.find((item) => item.iso === key);\n    if (!entry) return;\n    if (entry.iso !== current.iso) {\n      const nextDigits = capDigits(entry, digits);\n      if (countryProp === undefined) setState({ iso: entry.iso, digits: nextDigits });\n      else setState((last) => ({ ...last, digits: nextDigits }));\n      onCountryChange?.(entry.iso);\n      emit(entry, nextDigits);\n      setEdited(true);\n      setAnnouncement(`${entry.name}, +${entry.dial}`);\n    }\n    setOpen(false);\n    // Back to the number, where the next keystroke belongs.\n    requestAnimationFrame(() => {\n      if (!openRef.current) inputRef.current?.focus({ preventScroll: true });\n    });\n  }\n\n  const filter = useCallback((textValue: string, inputValue: string) => {\n    const entry = SORTED.find((item) => textValueOf(item) === textValue);\n    return entry ? matchesCountry(entry, inputValue) : true;\n  }, []);\n\n  /* ---------------------------------------------- Field wiring ---------------------------------------------- */\n\n  const field = useFieldWiring({\n    enabled: true,\n    id,\n    describedBy: undefined,\n    invalid: undefined,\n    description,\n    error: message,\n  });\n  const showCheck = status === \"valid\";\n\n  const control = (\n    <AriaGroup\n      ref={shellRef}\n      role=\"presentation\"\n      isDisabled={disabled}\n      isInvalid={Boolean(message)}\n      data-slot=\"phone-input-shell\"\n      className={shellClass}\n    >\n      <AriaDialogTrigger\n        isOpen={open}\n        onOpenChange={(next) => {\n          setOpen(next);\n          if (next) setQuery(\"\");\n        }}\n      >\n        <AriaButton\n          isDisabled={disabled}\n          aria-label={`Country, ${current.name} +${current.dial}`}\n          data-slot=\"phone-input-country\"\n          className={triggerClass}\n        >\n          <span\n            aria-hidden=\"true\"\n            data-slot=\"phone-input-flag\"\n            data-glyph={flagEmoji ? \"flag\" : \"code\"}\n            className={flagEmoji ? flagClass : codeClass}\n          >\n            {flagEmoji ? flagOf(current.iso) : current.iso}\n          </span>\n          <SwapText swapKey={current.iso} motion=\"roll\" className=\"inline-flex\">\n            <span data-slot=\"phone-input-dial\">+{current.dial}</span>\n          </SwapText>\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.75\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className=\"size-4 text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n          >\n            <path d=\"m4 6 4 4 4-4\" />\n          </svg>\n        </AriaButton>\n        <AriaPopover\n          triggerRef={shellRef}\n          placement=\"bottom start\"\n          offset={8}\n          data-slot=\"phone-input-popover\"\n          className={cnAll(selectPopoverVariants({ reveal: \"fade\" }), \"flex w-80 max-w-[calc(100vw-2rem)] flex-col overflow-hidden\")}\n        >\n          <AriaDialog aria-label=\"Country\" className=\"flex min-h-0 flex-col gap-1 outline-none\">\n            <AriaAutocomplete filter={filter} inputValue={query} onInputChange={setQuery}>\n              <AriaSearchField\n                aria-label=\"Search countries or calling codes\"\n                autoFocus\n                className={searchClass}\n              >\n                <svg\n                  aria-hidden=\"true\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"size-4 flex-none text-muted-foreground\"\n                >\n                  <circle cx=\"11\" cy=\"11\" r=\"8\" />\n                  <path d=\"m21 21-4.34-4.34\" />\n                </svg>\n                <AriaInput\n                  placeholder=\"Country or code\"\n                  data-slot=\"phone-input-search\"\n                  className=\"min-w-0 flex-1 appearance-none border-0 bg-transparent p-0 font-sans text-sm text-foreground outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden\"\n                />\n                <svg\n                  aria-hidden=\"true\"\n                  data-slot=\"phone-input-search-chevron\"\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.75\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"size-4 flex-none text-muted-foreground\"\n                >\n                  <path d=\"m4 10 4-4 4 4\" />\n                </svg>\n              </AriaSearchField>\n              {/* The list scrolls, and a scrolling region must be reachable by keyboard (the search field drives the options with arrow keys; this stop is for scrolling). */}\n              <ScrollArea\n                label=\"Country list\"\n                className=\"max-h-72 rounded-control\"\n                viewportClassName=\"rounded-control focus-visible:outline-(--color-control-edge)\"\n              >\n              <AriaListBox\n                aria-label=\"Countries\"\n                selectionMode=\"single\"\n                selectedKeys={[current.iso]}\n                // Escape closes the list instead of clearing the chosen country. Choosing the chosen country again\n                // empties the selection, which is read as \"keep it\": the list just closes.\n                escapeKeyBehavior=\"none\"\n                onSelectionChange={(keys) => {\n                  if (keys === \"all\") return;\n                  pick([...keys][0] ?? current.iso);\n                }}\n                items={items}\n                renderEmptyState={() => <p className={emptyClass}>No countries match</p>}\n                className=\"outline-none\"\n              >\n                {(entry) => (\n                  <SelectItem id={entry.id} textValue={textValueOf(entry)} className={rowClass}>\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"phone-input-row-flag\"\n                      data-glyph={flagEmoji ? \"flag\" : \"code\"}\n                      className={flagEmoji ? flagClass : codeClass}\n                    >\n                      {flagEmoji ? flagOf(entry.iso) : entry.iso}\n                    </span>\n                    <span className={nameClass}>{entry.name}</span>\n                    <span className=\"flex-none text-xs tabular-nums text-muted-foreground\">\n                      +{entry.dial}\n                    </span>\n                  </SelectItem>\n                )}\n              </AriaListBox>\n              </ScrollArea>\n            </AriaAutocomplete>\n          </AriaDialog>\n        </AriaPopover>\n      </AriaDialogTrigger>\n\n      <div className=\"relative flex h-full min-w-0 flex-1 items-center border-s-(length:--border-width) border-border\">\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"phone-input-guide\"\n          className=\"pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-pre px-3 font-sans text-base tabular-nums text-muted-foreground\"\n        >\n          <span className=\"invisible\">{formatted}</span>\n          {guide}\n        </span>\n        <AriaInput\n          ref={inputRef}\n          {...field.controlProps}\n          data-slot=\"phone-input-number\"\n          type=\"tel\"\n          inputMode=\"tel\"\n          autoComplete=\"tel\"\n          value={formatted}\n          disabled={disabled}\n          required={required}\n          aria-label={labelHidden ? label : undefined}\n          onChange={(event) => onNumberChange(event.currentTarget)}\n          onKeyDown={onNumberKeyDown}\n          onPaste={onPaste}\n          onBlur={(event) => {\n            setTouched(digits.length > 0);\n            onBlur?.(event);\n          }}\n          className={numberClass}\n        />\n        {showCheck ? (\n          <svg\n            aria-hidden=\"true\"\n            data-slot=\"phone-input-valid\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className={cn(\n              \"pointer-events-none absolute end-3 size-4 text-success-strong\",\n              edited && \"motion-safe:animate-select-check-in\",\n            )}\n          >\n            <path d=\"m3.5 8.5 3 3 6-6\" />\n          </svg>\n        ) : null}\n      </div>\n    </AriaGroup>\n  );\n\n  return (\n    <div className={cn(\"w-full min-w-0 font-sans\", className)} data-slot=\"phone-input\" data-country={current.iso}>\n      <FieldShell\n        label={labelHidden ? null : label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={message}\n        errorId={field.errorId}\n      >\n        {control}\n      </FieldShell>\n      {name ? <input type=\"hidden\" name={name} value={e164} /> : null}\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {announcement || (showCheck ? `Valid ${current.name} number` : \"\")}\n      </span>\n    </div>\n  );\n});\n\nPhoneInput.displayName = \"PhoneInput\";\n"],"mappings":"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"}

package/dist/popover/index.d.ts

@@ -1,2 +1,2 @@
-import { Popover, PopoverProps, PopoverTrigger, popoverVariants } from "./popover.js";
-export { Popover, type PopoverProps, PopoverTrigger, popoverVariants };
+import { Popover, PopoverHoverTrigger, PopoverHoverTriggerProps, PopoverProps, PopoverTrigger, popoverVariants } from "./popover.js";
+export { Popover, PopoverHoverTrigger, type PopoverHoverTriggerProps, type PopoverProps, PopoverTrigger, popoverVariants };

package/dist/popover/index.js

@@ -1,2 +1,2 @@
-import { Popover, PopoverTrigger, popoverVariants } from "./popover.js";
-export { Popover, PopoverTrigger, popoverVariants };
+import { Popover, PopoverHoverTrigger, PopoverTrigger, popoverVariants } from "./popover.js";
+export { Popover, PopoverHoverTrigger, PopoverTrigger, popoverVariants };

package/dist/popover/popover.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { DialogTrigger as PopoverTrigger, PopoverProps } from "react-aria-components";
+import { JSX, ReactNode } from "react";
+import { DialogTrigger as PopoverTrigger, PopoverProps, PreviewTriggerProps } from "react-aria-components";
 //#region src/popover/popover.d.ts
 /**
  * Popover, ported from the legacy shadcn/Radix component.
@@ -51,8 +51,57 @@ interface PopoverProps$1 extends Omit<PopoverProps, "className" | "style" | "chi
    * @default "rise"
    */
   entrance?: "rise" | "none";
+  /**
+   * A heading at the top of the panel. Together with `description` and
+   * `actionLabel` it makes the message popover: a dark title, grey body text
+   * and a full-width button, with `children` rendered below them.
+   */
+  title?: ReactNode;
+  /** Grey body text under the title. */
+  description?: ReactNode;
+  /** The label of the full-width button at the bottom. Pressing it runs `onAction` and closes the popover. */
+  actionLabel?: ReactNode;
+  /** Runs when the action button is pressed, before the popover closes. */
+  onAction?: () => void;
 }
 declare const Popover$1: import("react").ForwardRefExoticComponent<PopoverProps$1 & import("react").RefAttributes<HTMLElement>>;
+export interface PopoverHoverTriggerProps extends Omit<PreviewTriggerProps, "delay" | "closeDelay"> {
+  /** The trigger, then the `Popover`. The trigger must be focusable (a `Button` or `Link`). */
+  children: ReactNode;
+  /**
+   * Milliseconds the pointer rests on the trigger, or keyboard focus sits on
+   * it, before the card opens.
+   * @default 600
+   */
+  delay?: number;
+  /**
+   * Milliseconds after the pointer leaves the trigger and the card, or focus
+   * leaves both, before it closes. Moving onto the card keeps it open.
+   * @default 200
+   */
+  closeDelay?: number;
+}
+/**
+ * Opens a popover on hover instead of press: a hover card.
+ *
+ * React Aria's `PreviewTrigger`. The card opens after `delay` when the pointer
+ * rests on the trigger or keyboard focus reaches it, and on a long press on
+ * touch. It stays open while the pointer travels onto it (a safe area covers
+ * the gap) and closes `closeDelay` after the pointer or focus leaves both.
+ * Escape closes it; Tab from the trigger moves into it. It is non-modal: no
+ * focus trap and no underlay, and the page behind stays usable.
+ *
+ * The trigger keeps its own press action, so a Link still navigates and a
+ * Button still runs `onPress`. Content anyone needs must not live only in the
+ * card: touch without a long press never sees it.
+ *
+ * @example
+ * <PopoverHoverTrigger delay={300}>
+ *   <Button variant="ghost" aria-label="3 more sources">+3</Button>
+ *   <Popover placement="bottom start">...</Popover>
+ * </PopoverHoverTrigger>
+ */
+export declare function PopoverHoverTrigger({ delay, closeDelay, ...props }: PopoverHoverTriggerProps): JSX.Element;
 //#endregion
 export { Popover$1 as Popover, PopoverProps$1 as PopoverProps, PopoverTrigger };
 //# sourceMappingURL=popover.d.ts.map