@passui/react 0.1.47 → 0.2.0

package/dist/lib/water-drop.js

@@ -0,0 +1,412 @@
+import { useEffect, useMemo, useRef } from "react";
+// src/lib/water-drop.ts
+/** Fallback spring when the motion tokens are not loaded: a soft settle with a little overshoot. */
+const OPEN_EASING = "cubic-bezier(0.2, 0.9, 0.25, 1.12)";
+const OPEN_MS = 480;
+/** Closing is quicker and never overshoots, so the glass does not shrink past its trigger. */
+const CLOSE_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+const CLOSE_MS = 320;
+/** The trigger's own face gives way as the drop leaves it. */
+const HIDE_MS = 140;
+/** Frames to wait for the positioner to place the panel before measuring it anyway. */
+const SETTLE_FRAMES = 8;
+/** Whether the browser can run the morph. jsdom, old engines and Reduce Motion cannot or should not. */
+function canMorph() {
+	if (typeof window === "undefined") return false;
+	if (typeof Element === "undefined") return false;
+	if (typeof Element.prototype.animate !== "function") return false;
+	return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+const isSide = (value) => value === "top" || value === "bottom" || value === "left" || value === "right";
+/**
+* Positioning for a panel that opens on its trigger instead of beside it. The
+* water drop swells out of the trigger, so the panel's near edge belongs on the
+* trigger's near edge, not a gap away: iOS lays the menu over the button and
+* grows it from there. Pass the gap the machine adds so it cancels out.
+*
+* Works on all four sides: above and below the anchor is a flat line on the
+* trigger's top or bottom edge; left and right it is a line on the left or
+* right edge, as tall as the trigger so start and end alignment still hold.
+*
+* Give it to a machine's `positioning.getAnchorRect`. It stands down (`null`
+* means the trigger's own rectangle) wherever the morph does not run, so the
+* panel then sits beside the trigger as usual.
+*/
+function anchorOnTrigger(placement, gap, state) {
+	return (element) => {
+		const asked = placement.split("-")[0];
+		if (!element || !isSide(asked) || !canMorph()) return null;
+		const side = state?.flipped ? OPPOSITE[asked] : asked;
+		const rect = element.getBoundingClientRect();
+		switch (side) {
+			case "bottom": {
+				const shift = state?.shift?.() ?? 0;
+				return {
+					x: rect.left,
+					y: rect.top - gap + shift,
+					width: rect.width,
+					height: 0
+				};
+			}
+			case "top": return {
+				x: rect.left,
+				y: rect.bottom + gap,
+				width: rect.width,
+				height: 0
+			};
+			case "right": return {
+				x: rect.left - gap,
+				y: rect.top,
+				width: 0,
+				height: rect.height
+			};
+			case "left": return {
+				x: rect.right + gap,
+				y: rect.top,
+				width: 0,
+				height: rect.height
+			};
+		}
+	};
+}
+/** The side a machine placed its panel on, from the positioner's props. */
+function positionerSide(props) {
+	const side = props["data-side"];
+	return typeof side === "string" ? side : void 0;
+}
+/**
+* `anchorOnTrigger` that survives a flip. The machine decides the side after the
+* anchor is read, so a panel pushed to the other side of the trigger would float
+* a gap away from it. Pass the result to `useAnchorFollow` once the machine's
+* api exists.
+*/
+function useTriggerAnchor(placement, gap) {
+	return useMemo(() => {
+		const state = {};
+		return {
+			getAnchorRect: anchorOnTrigger(placement, gap, state),
+			state,
+			base: placement.split("-")[0] ?? placement
+		};
+	}, [placement, gap]);
+}
+/**
+* Re-aims the anchor at the trigger's opposite edge the first time the machine
+* opens on the other side, then repositions. The panel is still hidden while
+* the drop waits for it to settle, so the correction is never seen. It flips at
+* most once per opening, so a panel that fits neither side cannot loop.
+*/
+function useAnchorFollow(anchor, open, side, reposition) {
+	const again = useRef(reposition);
+	again.current = reposition;
+	useEffect(() => {
+		if (!open) {
+			anchor.state.flipped = false;
+			return;
+		}
+		if (anchor.state.flipped || !isSide(side) || side === anchor.base) return;
+		anchor.state.flipped = true;
+		again.current();
+	}, [
+		anchor,
+		open,
+		side
+	]);
+}
+/**
+* How far to move a downward list so its selected option lands on the trigger's
+* value, as macOS and iOS pickers do. Measured from the open list, which is
+* already in the DOM when the machine positions it. Returns 0 (the list sits
+* below the trigger) when nothing is selected or the list scrolls, because a
+* scrolled list cannot keep the option and the trigger together.
+*/
+function alignSelectedOption(trigger, list, selector = "[role=\"option\"][data-state=\"checked\"]") {
+	const option = list?.querySelector(selector);
+	if (!trigger || !list || !option) return 0;
+	if (list.scrollHeight > list.clientHeight + 1) return 0;
+	const optionCenter = option.offsetTop - list.offsetTop + option.offsetHeight / 2;
+	return trigger.getBoundingClientRect().height / 2 - optionCenter;
+}
+/** Reads an element's viewport rectangle and the radius it is drawn with, capped to a full pill. */
+function readBox(el) {
+	const rect = el.getBoundingClientRect();
+	const corner = getComputedStyle(el).borderTopLeftRadius;
+	const pill = Math.min(rect.width, rect.height) / 2;
+	const raw = Number.parseFloat(corner);
+	const radius = corner.includes("%") ? pill : Number.isFinite(raw) ? raw : 0;
+	return {
+		left: rect.left,
+		top: rect.top,
+		width: rect.width,
+		height: rect.height,
+		radius: Math.min(radius, pill)
+	};
+}
+/** One animation frame of the drop: where it sits, how big it is and how round. */
+function boxKeyframe(box) {
+	return {
+		transform: `translate(${box.left}px, ${box.top}px)`,
+		width: `${box.width}px`,
+		height: `${box.height}px`,
+		borderRadius: `${box.radius}px`
+	};
+}
+/** Converts a CSS time such as `0.5s` or `450ms` to milliseconds. */
+function toMs(value, fallback) {
+	const text = value.trim();
+	const n = Number.parseFloat(text);
+	if (!Number.isFinite(n)) return fallback;
+	return text.endsWith("ms") ? n : text.endsWith("s") ? n * 1e3 : fallback;
+}
+/** The smooth spring from the motion tokens, falling back when they are absent. */
+function openSpring(el) {
+	const style = getComputedStyle(el);
+	return {
+		easing: style.getPropertyValue("--spring-smooth").trim() || OPEN_EASING,
+		ms: toMs(style.getPropertyValue("--spring-smooth-duration"), OPEN_MS)
+	};
+}
+/** Glass that grows from the source. It sits just under the panel's positioner, above any backdrop. */
+function makeGhost(panel, material) {
+	const positioner = panel.parentElement;
+	const ghost = document.createElement("div");
+	ghost.setAttribute("aria-hidden", "true");
+	ghost.setAttribute("data-slot", "water-drop");
+	ghost.className = material;
+	Object.assign(ghost.style, {
+		position: "fixed",
+		left: "0",
+		top: "0",
+		margin: "0",
+		boxSizing: "border-box",
+		pointerEvents: "none",
+		zIndex: getComputedStyle(positioner).zIndex
+	});
+	positioner.parentNode?.insertBefore(ghost, positioner);
+	return ghost;
+}
+/** Half the size of the bead of glass a point origin starts as and lands on. */
+const POINT_RADIUS = 6;
+/** A small round bead centered on a point, where a context menu's glass starts and lands. */
+function pointBox(x, y) {
+	return {
+		left: x - POINT_RADIUS,
+		top: y - POINT_RADIUS,
+		width: 12,
+		height: 12,
+		radius: POINT_RADIUS
+	};
+}
+/**
+* The water drop. A panel does not pop in at a distance from its trigger: the
+* trigger's own glass swells into the panel, and on close it drops back into
+* the trigger, like the three dot menu in iOS Notes.
+*
+* Only a separate layer of glass changes size, so the panel's content never
+* stretches. The content fades in once the glass has nearly arrived and out
+* before it leaves. Pass the returned hooks to `usePresence`.
+*/
+function useWaterDrop(options) {
+	const latest = useRef(options);
+	latest.current = options;
+	const controller = useMemo(() => createController(latest), []);
+	useEffect(() => controller.dispose, [controller]);
+	return controller;
+}
+function createController(latest) {
+	let animations = [];
+	let ghosts = [];
+	let frame = 0;
+	/** The element the glass grows from, when there is one. */
+	const source = () => {
+		const id = latest.current.sourceId;
+		return id ? document.getElementById(id) : null;
+	};
+	/** Stops everything this controller started, which also hands the trigger back. */
+	const reset = () => {
+		cancelAnimationFrame(frame);
+		frame = 0;
+		for (const animation of animations) animation.cancel();
+		animations = [];
+		for (const ghost of ghosts) ghost.remove();
+		ghosts = [];
+	};
+	const track = (animation) => {
+		animations.push(animation);
+		return animation;
+	};
+	/** Where the glass starts and lands: the source's box, or a flat line on its bottom edge. */
+	const sourceBox = (from) => {
+		const box = readBox(from);
+		return latest.current.keepSource ? {
+			...box,
+			top: box.top + box.height,
+			height: 0
+		} : box;
+	};
+	/** Where the glass starts and lands: the source element, or else a bead at the point. */
+	const origin = () => {
+		const el = source();
+		if (el) return {
+			el,
+			box: sourceBox(el)
+		};
+		const at = latest.current.point?.();
+		return at ? {
+			el: null,
+			box: pointBox(at.x, at.y)
+		} : null;
+	};
+	/** Drops the ghost once its fade ends. A cancelled fade rejects, which is fine. */
+	const retireOnFinish = (fade, ghost) => {
+		fade.finished.then(() => {
+			ghost.remove();
+			ghosts = ghosts.filter((g) => g !== ghost);
+		}, () => {});
+	};
+	const open = (panel, from) => {
+		const { easing, ms } = openSpring(panel);
+		const content = track(panel.animate([
+			{ opacity: 0 },
+			{
+				opacity: 0,
+				offset: .45
+			},
+			{ opacity: 1 }
+		], {
+			duration: ms,
+			easing: "linear",
+			fill: "both"
+		}));
+		content.pause();
+		let previous = "";
+		let frames = 0;
+		const settle = () => {
+			frame = 0;
+			const rect = panel.getBoundingClientRect();
+			const key = `${rect.left},${rect.top},${rect.width},${rect.height}`;
+			if (!(rect.width > 0 && rect.bottom > 0 && key === previous) && ++frames < SETTLE_FRAMES) {
+				previous = key;
+				frame = requestAnimationFrame(settle);
+				return;
+			}
+			try {
+				const ghost = makeGhost(panel, latest.current.material);
+				ghosts.push(ghost);
+				track(ghost.animate([boxKeyframe(from.box), boxKeyframe(readBox(panel))], {
+					duration: ms,
+					easing,
+					fill: "forwards"
+				}));
+				const fade = track(ghost.animate([
+					{ opacity: 1 },
+					{
+						opacity: 1,
+						offset: .7
+					},
+					{ opacity: 0 }
+				], {
+					duration: ms,
+					easing: "linear",
+					fill: "forwards"
+				}));
+				retireOnFinish(fade, ghost);
+				if (from.el && !latest.current.keepSource) track(from.el.animate([{ opacity: 1 }, { opacity: 0 }], {
+					duration: HIDE_MS,
+					easing: "ease-out",
+					fill: "forwards"
+				}));
+				content.play();
+				content.onfinish = () => content.cancel();
+			} catch {
+				reset();
+				panel.removeAttribute("data-morph");
+			}
+		};
+		frame = requestAnimationFrame(settle);
+	};
+	return {
+		enter(panel) {
+			reset();
+			const from = origin();
+			if (!from || !canMorph()) return;
+			panel.setAttribute("data-morph", "");
+			try {
+				open(panel, from);
+			} catch {
+				reset();
+				panel.removeAttribute("data-morph");
+			}
+		},
+		exit(panel) {
+			if (!panel.hasAttribute("data-morph")) return;
+			const to = origin();
+			const live = ghosts[0];
+			const start = readBox(live ?? panel);
+			const opacity = Number.parseFloat(getComputedStyle(panel).opacity);
+			reset();
+			if (!to) {
+				panel.animate([{ opacity }, { opacity: 0 }], {
+					duration: 160,
+					fill: "forwards"
+				});
+				return;
+			}
+			try {
+				const ghost = makeGhost(panel, latest.current.material);
+				ghosts.push(ghost);
+				track(ghost.animate([boxKeyframe(start), boxKeyframe(to.box)], {
+					duration: CLOSE_MS,
+					easing: CLOSE_EASING,
+					fill: "forwards"
+				}));
+				const fade = track(ghost.animate([
+					{ opacity: 1 },
+					{
+						opacity: 1,
+						offset: .75
+					},
+					{ opacity: 0 }
+				], {
+					duration: CLOSE_MS,
+					easing: "linear",
+					fill: "forwards"
+				}));
+				retireOnFinish(fade, ghost);
+				track(panel.animate([
+					{ opacity },
+					{
+						opacity: 0,
+						offset: .3
+					},
+					{ opacity: 0 }
+				], {
+					duration: CLOSE_MS,
+					easing: "linear",
+					fill: "forwards"
+				}));
+				if (to.el && !latest.current.keepSource) track(to.el.animate([
+					{ opacity: 0 },
+					{
+						opacity: 0,
+						offset: .7
+					},
+					{ opacity: 1 }
+				], {
+					duration: CLOSE_MS,
+					easing: "linear"
+				}));
+			} catch {
+				reset();
+			}
+		},
+		dispose: reset
+	};
+}
+export { alignSelectedOption, anchorOnTrigger, boxKeyframe, canMorph, pointBox, positionerSide, readBox, toMs, useAnchorFollow, useTriggerAnchor, useWaterDrop };

package/dist/lib/wheel.js

@@ -0,0 +1,125 @@
+"use client";
+import { cx } from "./cx.js";
+import { haptic } from "./haptics.js";
+import { useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+/**
+* A snapping column of choices, like the wheels in iOS date pickers: scroll,
+* flick or tap a row and it settles in the middle. Rows fade and shrink away
+* from the middle, and each row passed ticks the haptic. Up and Down arrows,
+* Home and End also move it, so it works without a pointer.
+*/
+function Wheel({ options, value, onValueChange, label, className }) {
+	const id = useId();
+	const scroller = useRef(null);
+	const frame = useRef(0);
+	const settle = useRef(0);
+	const lastTick = useRef(-1);
+	const index = Math.max(0, options.findIndex((option) => option.value === value));
+	const latest = useRef({
+		options,
+		index,
+		onValueChange
+	});
+	latest.current = {
+		options,
+		index,
+		onValueChange
+	};
+	/** Fades and shrinks each row by its distance from the middle. */
+	const shape = () => {
+		const node = scroller.current;
+		if (!node) return;
+		const middle = node.scrollTop / 32;
+		const rows = node.children;
+		const from = Math.max(0, Math.floor(middle) - 4);
+		const to = Math.min(rows.length - 1, Math.ceil(middle) + 4);
+		for (let row = from; row <= to; row++) {
+			const element = rows[row];
+			const distance = Math.abs(row - middle);
+			element.style.opacity = String(Math.max(.2, 1 - distance * .28));
+			element.style.transform = `scale(${1 - Math.min(distance, 3) * .05})`;
+		}
+	};
+	const goTo = (target, smooth) => {
+		scroller.current?.scrollTo({
+			top: target * 32,
+			behavior: smooth ? "smooth" : "instant"
+		});
+	};
+	useEffect(() => {
+		const node = scroller.current;
+		if (!node) return;
+		if (Math.round(node.scrollTop / 32) !== index) goTo(index, node.scrollTop > 0);
+		shape();
+	}, [index]);
+	useEffect(() => () => {
+		cancelAnimationFrame(frame.current);
+		clearTimeout(settle.current);
+	}, []);
+	const onScroll = () => {
+		cancelAnimationFrame(frame.current);
+		frame.current = requestAnimationFrame(shape);
+		const node = scroller.current;
+		if (!node) return;
+		const row = Math.round(node.scrollTop / 32);
+		if (row !== lastTick.current) {
+			if (lastTick.current !== -1) haptic("selection");
+			lastTick.current = row;
+		}
+		clearTimeout(settle.current);
+		settle.current = window.setTimeout(() => {
+			const { options: all, index: current, onValueChange: emit } = latest.current;
+			const chosen = all[Math.min(all.length - 1, Math.max(0, row))];
+			if (chosen && !chosen.disabled && row !== current) emit(chosen.value);
+		}, 90);
+	};
+	const onKeyDown = (event) => {
+		const step = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : event.key === "PageDown" ? 5 : event.key === "PageUp" ? -5 : 0;
+		const target = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : Math.min(options.length - 1, Math.max(0, index + step));
+		if (!step && event.key !== "Home" && event.key !== "End") return;
+		event.preventDefault();
+		const option = options[target];
+		if (option && !option.disabled) onValueChange(option.value);
+	};
+	const edge = 96;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "wheel",
+		className: cx("relative", className),
+		style: { height: 224 },
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "bg-fill/70 pointer-events-none absolute inset-x-0 rounded-xl",
+			style: {
+				top: edge,
+				height: 32
+			}
+		}), /* @__PURE__ */ jsx("div", {
+			ref: scroller,
+			role: "listbox",
+			tabIndex: 0,
+			"aria-label": label,
+			"aria-activedescendant": `${id}-${index}`,
+			onScroll,
+			onKeyDown,
+			className: "no-scrollbar focus-visible:ring-accent/70 relative h-full snap-y snap-mandatory overflow-y-auto overscroll-contain rounded-xl [mask-image:linear-gradient(transparent,black_28%,black_72%,transparent)] outline-none focus-visible:ring-2",
+			style: { paddingBlock: edge },
+			children: options.map((option, row) => /* @__PURE__ */ jsx("div", {
+				id: `${id}-${row}`,
+				role: "option",
+				"aria-selected": row === index,
+				"aria-disabled": option.disabled || void 0,
+				tabIndex: -1,
+				onClick: () => {
+					if (option.disabled) return;
+					onValueChange(option.value);
+					goTo(row, true);
+				},
+				className: cx("text-footnote text-label flex cursor-pointer snap-center items-center justify-center px-3 tabular-nums select-none", row === index && "font-semibold", option.disabled && "pointer-events-none opacity-30"),
+				style: { height: 32 },
+				children: option.label
+			}, option.value))
+		})]
+	});
+}
+export { Wheel };

package/dist/list.d.ts

@@ -0,0 +1,26 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+/** iOS inset grouped list: rows on one rounded plate with hairlines inset from the leading edge. */
+export declare function List({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export interface ListSectionProps extends Omit<ComponentProps<"section">, "title"> {
+  /** Small caps heading above the plate. */
+  title?: ReactNode;
+  /** Quiet explanation below the plate. */
+  footer?: ReactNode;
+}
+/** A titled group: heading, the list plate, and a footer note. */
+export declare function ListSection({ title, footer, className, children, ...props }: ListSectionProps): import("react").JSX.Element;
+export interface ListItemProps extends Omit<ComponentProps<"li">, "title"> {
+  /** An icon or avatar at the start. The hairline insets past it. */
+  leading?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** A value, switch or badge at the end. */
+  trailing?: ReactNode;
+  /** Shows the disclosure chevron, for rows that open something. */
+  chevron?: boolean;
+  /** Makes the whole row your own element, such as a router link. */
+  render?: RenderProp;
+}
+/** One row. With `render`, `href` or `onClick` the whole row presses like iOS. */
+export declare function ListItem({ leading, title, description, trailing, chevron, render, className, ...props }: ListItemProps): import("react").JSX.Element;

package/dist/list.js

@@ -0,0 +1,80 @@
+import { cx } from "./lib/cx.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/components/list.tsx
+/** iOS inset grouped list: rows on one rounded plate with hairlines inset from the leading edge. */
+function List({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "list",
+		className: cx("inset-group squircle m-0 list-none p-0 [--squircle-radius:1.25rem]", className),
+		...props
+	});
+}
+/** A titled group: heading, the list plate, and a footer note. */
+function ListSection({ title, footer, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "list-section",
+		className: cx("flex flex-col gap-1.5", className),
+		...props,
+		children: [
+			title ? /* @__PURE__ */ jsx("h3", {
+				className: "text-footnote text-label-secondary px-4 font-normal tracking-wide uppercase",
+				children: title
+			}) : null,
+			children,
+			footer ? /* @__PURE__ */ jsx("p", {
+				className: "text-footnote text-label-secondary px-4",
+				children: footer
+			}) : null
+		]
+	});
+}
+/** One row. With `render`, `href` or `onClick` the whole row presses like iOS. */
+function ListItem({ leading, title, description, trailing, chevron, render, className, ...props }) {
+	const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+		leading ? /* @__PURE__ */ jsx("span", {
+			className: "text-accent-text flex size-8 shrink-0 items-center justify-center [&_svg]:size-5",
+			children: leading
+		}) : null,
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-body truncate",
+				children: title
+			}), description ? /* @__PURE__ */ jsx("span", {
+				className: "text-footnote text-label-secondary truncate",
+				children: description
+			}) : null]
+		}),
+		trailing ? /* @__PURE__ */ jsx("span", {
+			className: "text-body text-label-secondary shrink-0",
+			children: trailing
+		}) : null,
+		chevron ? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 16 16",
+			"aria-hidden": "true",
+			className: "text-label-tertiary size-4 shrink-0",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+		}) : null
+	] });
+	const rowClass = "relative flex min-h-11 w-full items-center gap-3 px-4 py-2 text-left text-label outline-none transition-colors duration-(--duration-instant) after:absolute after:right-0 after:bottom-0 after:left-4 after:h-px after:bg-separator";
+	const inset = leading ? "after:left-14" : "";
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "list-item",
+		className: cx("relative [&:last-child>*]:after:hidden", className),
+		...props,
+		children: render ? renderPart("a", mergeProps({
+			className: cx(rowClass, inset, "hover:bg-fill/70 active:bg-fill"),
+			children: row
+		}, {}), render) : /* @__PURE__ */ jsx("div", {
+			className: cx(rowClass, inset),
+			children: row
+		})
+	});
+}
+export { List, ListItem, ListSection };

package/dist/locales.d.ts

@@ -0,0 +1,18 @@
+export type LocalesSize = "sm" | "md" | "lg";
+export type LocalesProps<L extends string> = {
+  /** Language tags to offer, such as `["en", "fr"]`. Each is named in its own language. */
+  locales: readonly L[];
+  locale: L;
+  onSelect: (locale: L) => void;
+  /** Accessible name for the control. */
+  label: string;
+  /** Width of the control. @default "md" */
+  size?: LocalesSize;
+  className?: string;
+};
+/**
+ * A language list: the current language on a globe trigger, every choice named
+ * in its own language. It sits in the page where you put it and opens like a
+ * Select, so keyboard, typeahead and dismissal come from the same parts.
+ */
+export declare function Locales<L extends string>({ locales, locale, onSelect, label, size, className }: LocalesProps<L>): import("react").JSX.Element;

package/dist/locales.js

@@ -0,0 +1,36 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { getNativeLanguageName } from "./language.js";
+import { Select } from "./select.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { GlobeIcon } from "@passui/icons/globe";
+// src/components/locales.tsx
+const widths = {
+	sm: "w-36",
+	md: "w-44",
+	lg: "w-56"
+};
+/**
+* A language list: the current language on a globe trigger, every choice named
+* in its own language. It sits in the page where you put it and opens like a
+* Select, so keyboard, typeahead and dismissal come from the same parts.
+*/
+function Locales({ locales, locale, onSelect, label, size = "md", className }) {
+	const items = useMemo(() => Array.from(locales, (value) => ({
+		value,
+		label: getNativeLanguageName(value)
+	})), [locales]);
+	return /* @__PURE__ */ jsx(Select, {
+		"data-slot": "locales",
+		"aria-label": label,
+		icon: /* @__PURE__ */ jsx(GlobeIcon, { size: 16 }),
+		items,
+		value: locale,
+		onValueChange: (next) => {
+			if (next && next !== locale) onSelect(next);
+		},
+		className: cx(widths[size], className)
+	});
+}
+export { Locales };