@passui/react 0.1.46 → 0.2.0

package/src/components/locale-switcher/locale-switcher.tsx

@@ -1,311 +0,0 @@
-import { getNativeLanguageName } from "../../lib/language";
-import { cn } from "../../lib/class-names";
-import { motion, useDragControls, useMotionValue } from "motion/react";
-import { useEffect, useRef, useState } from "react";
-import { useDismiss } from "../../hooks/use-dismiss";
-import { CheckIcon, GlobeIcon } from "../../icons/icons";
-import { Popover } from "../popover";
-
-export type LocaleSwitcherSize = "sm" | "md" | "lg";
-
-const triggerSizes: Record<LocaleSwitcherSize, string> = {
-	sm: "glass-menu flex h-9 min-w-16 touch-none cursor-grab items-center justify-center gap-1.5 rounded-full px-3 text-caption2 font-semibold text-label active:cursor-grabbing",
-	md: "glass-menu flex h-12 min-w-20 touch-none cursor-grab items-center justify-center gap-2 rounded-full px-4 text-caption font-semibold text-label active:cursor-grabbing",
-	lg: "glass-menu flex h-14 min-w-24 touch-none cursor-grab items-center justify-center gap-2.5 rounded-full px-5 text-subheadline font-semibold text-label active:cursor-grabbing",
-};
-const iconSizes: Record<LocaleSwitcherSize, string> = {
-	sm: "size-4",
-	md: "size-5",
-	lg: "size-6",
-};
-const popoverWidths: Record<LocaleSwitcherSize, string> = {
-	sm: "w-44",
-	md: "w-52",
-	lg: "w-60",
-};
-const headerSizes: Record<LocaleSwitcherSize, string> = {
-	sm: "flex min-h-9 w-full items-center justify-center gap-1.5 rounded-4xl bg-fill/50 text-caption2 font-semibold text-label",
-	md: "flex min-h-12 w-full items-center justify-center gap-2 rounded-4xl bg-fill/50 text-caption font-semibold text-label",
-	lg: "flex min-h-14 w-full items-center justify-center gap-2.5 rounded-4xl bg-fill/50 text-subheadline font-semibold text-label",
-};
-const itemSizes: Record<LocaleSwitcherSize, string> = {
-	sm: "flex min-h-9 items-center justify-between gap-2 rounded-4xl px-3 py-2 text-left text-caption text-label outline-none",
-	md: "flex min-h-11 items-center justify-between gap-3 rounded-4xl px-3.5 py-2.5 text-left text-footnote text-label outline-none",
-	lg: "flex min-h-13 items-center justify-between gap-3 rounded-4xl px-4 py-3 text-left text-subheadline text-label outline-none",
-};
-const checkIconSizes: Record<LocaleSwitcherSize, string> = {
-	sm: "size-3.5 shrink-0",
-	md: "size-4 shrink-0",
-	lg: "size-5 shrink-0",
-};
-
-type Side = "left" | "right";
-type Edge = "top" | "bottom";
-
-type Anchor = {
-	side: Side;
-	edge: Edge;
-	x: number;
-	y: number;
-};
-
-const DEFAULT_ANCHOR: Anchor = {
-	side: "right",
-	edge: "bottom",
-	x: 20,
-	y: 20,
-};
-
-function loadStoredAnchor(storageKey: string): Anchor | null {
-	try {
-		const raw = localStorage.getItem(storageKey);
-		if (!raw) return null;
-		const parsed = JSON.parse(raw) as Partial<Anchor>;
-		if (
-			(parsed.side === "left" || parsed.side === "right") &&
-			(parsed.edge === "top" || parsed.edge === "bottom") &&
-			typeof parsed.x === "number" &&
-			typeof parsed.y === "number"
-		) {
-			return {
-				side: parsed.side,
-				edge: parsed.edge,
-				x: parsed.x,
-				y: parsed.y,
-			};
-		}
-	} catch {}
-	return null;
-}
-
-function saveStoredAnchor(storageKey: string, anchor: Anchor) {
-	try {
-		localStorage.setItem(storageKey, JSON.stringify(anchor));
-	} catch {}
-}
-
-export type LocaleSwitcherProps<L extends string> = {
-	locales: readonly L[];
-	locale: L;
-	onSelect: (locale: L) => void;
-	/** localStorage key for where the person dragged it. */
-	storageKey: string;
-	label: string;
-	/** Trigger, header, list item and icon scale. @default "md" */
-	size?: LocaleSwitcherSize;
-};
-
-/** A draggable floating language picker that snaps to the nearest corner. */
-export function LocaleSwitcher<L extends string>({
-	locales,
-	locale,
-	onSelect,
-	storageKey,
-	label,
-	size = "md",
-}: LocaleSwitcherProps<L>) {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const triggerRef = useRef<HTMLButtonElement>(null);
-	const dragControls = useDragControls();
-	const x = useMotionValue(0);
-	const y = useMotionValue(0);
-	const [open, setOpen] = useState(false);
-	const [anchor, setAnchor] = useState(DEFAULT_ANCHOR);
-
-	const langs = Array.from(locales, (value) => ({
-		value: value,
-		label: getNativeLanguageName(value),
-	}));
-
-	useEffect(() => {
-		const stored = loadStoredAnchor(storageKey);
-		if (stored) setAnchor(stored);
-	}, [storageKey]);
-
-	useDismiss(containerRef, open, () => setOpen(false));
-	useEffect(() => {
-		if (open)
-			containerRef.current
-				?.querySelector<HTMLButtonElement>(
-					'[role="menuitemradio"][aria-checked="true"]',
-				)
-				?.focus();
-	}, [open]);
-
-	function commitDraggedPosition() {
-		const el = containerRef.current;
-		if (!el) return;
-		const rect = el.getBoundingClientRect();
-		const side: Side =
-			rect.left + rect.width / 2 < window.innerWidth / 2 ? "left" : "right";
-		const edge: Edge =
-			rect.top + rect.height / 2 < window.innerHeight / 2 ? "top" : "bottom";
-		const next: Anchor = {
-			side,
-			edge,
-			x: side === "left" ? rect.left : window.innerWidth - rect.right,
-			y: edge === "top" ? rect.top : window.innerHeight - rect.bottom,
-		};
-		setAnchor(next);
-		saveStoredAnchor(storageKey, next);
-		x.set(0);
-		y.set(0);
-	}
-
-	const growsUp = anchor.edge === "bottom";
-
-	return (
-		<motion.div
-			ref={containerRef}
-			drag
-			dragControls={dragControls}
-			dragListener={false}
-			dragMomentum={false}
-			dragElastic={0}
-			style={{
-				position: "fixed",
-				x,
-				y,
-				...(anchor.side === "left" ? { left: anchor.x } : { right: anchor.x }),
-				...(anchor.edge === "top" ? { top: anchor.y } : { bottom: anchor.y }),
-			}}
-			onDragEnd={commitDraggedPosition}
-			onDragStart={() => setOpen(false)}
-			onKeyDown={(event) => {
-				if (!open) return;
-				if (event.key === "Escape") {
-					event.preventDefault();
-					setOpen(false);
-					triggerRef.current?.focus();
-					return;
-				}
-				if (event.key === "Tab") {
-					setOpen(false);
-					return;
-				}
-				if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
-					return;
-				const options = Array.from(
-					containerRef.current?.querySelectorAll<HTMLButtonElement>(
-						'[role="menuitemradio"]',
-					) ?? [],
-				);
-				if (!options.length) return;
-				event.preventDefault();
-				const current = options.indexOf(
-					document.activeElement as HTMLButtonElement,
-				);
-				const next =
-					event.key === "Home"
-						? 0
-						: event.key === "End"
-							? options.length - 1
-							: (current +
-									(event.key === "ArrowDown" ? 1 : -1) +
-									options.length) %
-								options.length;
-				options[next]?.focus();
-			}}
-			className="z-60"
-		>
-			<Popover open={open} onOpenChange={setOpen}>
-				<Popover.Trigger
-					render={({
-						ref,
-						"aria-haspopup": ariaHasPopup,
-						"aria-expanded": ariaExpanded,
-						"aria-controls": ariaControls,
-						onClick,
-						onKeyDown,
-					}) => (
-						<button
-							ref={(node) => {
-								ref(node);
-								triggerRef.current = node;
-							}}
-							type="button"
-							aria-label={label}
-							aria-haspopup={ariaHasPopup}
-							aria-expanded={ariaExpanded}
-							aria-controls={ariaControls}
-							onPointerDown={(e) => dragControls.start(e)}
-							onClick={onClick}
-							onKeyDown={(event) => {
-								onKeyDown(event);
-								if (
-									!open &&
-									(event.key === "ArrowDown" || event.key === "ArrowUp")
-								) {
-									event.preventDefault();
-									setOpen(true);
-								}
-							}}
-							className={triggerSizes[size]}
-						>
-							<GlobeIcon aria-hidden="true" className={iconSizes[size]} />
-							{locale.toUpperCase()}
-						</button>
-					)}
-				/>
-				<Popover.Content
-					origin={anchor.side === "right" ? "top-right" : "top-left"}
-					role="menu"
-					label={label}
-					className={cn(
-						"top-0 flex max-w-[calc(100vw-2.5rem)] gap-2 p-2",
-						popoverWidths[size],
-						anchor.side === "right" ? "right-0" : "left-0",
-						growsUp ? "flex-col-reverse" : "flex-col",
-					)}
-				>
-					<button
-						type="button"
-						aria-label={label}
-						onClick={() => {
-							setOpen(false);
-							triggerRef.current?.focus();
-						}}
-						className={headerSizes[size]}
-					>
-						<GlobeIcon aria-hidden="true" className={iconSizes[size]} />
-						{locale.toUpperCase()}
-					</button>
-					<div className="flex flex-col gap-1">
-						{langs.map((item) => {
-							const active = item.value === locale;
-							return (
-								<button
-									key={item.value}
-									type="button"
-									role="menuitemradio"
-									aria-checked={active}
-									tabIndex={-1}
-									onClick={() => {
-										setOpen(false);
-										triggerRef.current?.focus();
-										if (!active) {
-											onSelect(item.value);
-										}
-									}}
-									className={cn(
-										itemSizes[size],
-										"hover:bg-fill/65 focus-visible:bg-fill/65 transition-colors",
-										active && "bg-accent/12 font-medium",
-									)}
-								>
-									{item.label}
-									{active && (
-										<CheckIcon
-											aria-hidden="true"
-											className={checkIconSizes[size]}
-										/>
-									)}
-								</button>
-							);
-						})}
-					</div>
-				</Popover.Content>
-			</Popover>
-		</motion.div>
-	);
-}

package/src/components/menu/menu.tsx

@@ -1,85 +0,0 @@
-import {
-	forwardRef,
-	type ReactNode,
-	useRef,
-	useSyncExternalStore,
-} from "react";
-import { Button, type ButtonProps } from "../button/button";
-import {
-	closeContextMenu,
-	getContextMenu,
-	openMenu,
-	subscribeContextMenu,
-	type ContextMenuEdge,
-	type ContextMenuItem,
-} from "../context-menu/context-menu-store";
-
-export interface MenuProps extends Omit<ButtonProps, "onClick" | "children"> {
-	/** Accessible name for the menu trigger. */
-	label: string;
-	/** Items are rendered by the app's existing ContextMenuHost. */
-	items: readonly ContextMenuItem[];
-	children: ReactNode;
-	/** Logical edge used to align the menu, including RTL. @default "leading" */
-	edge?: ContextMenuEdge;
-	/** Expand upward from the trigger instead of downward. @default false */
-	above?: boolean;
-}
-
-/** A declarative menu button using the same native host as context menus. */
-export const Menu = forwardRef<HTMLButtonElement, MenuProps>(function Menu(
-	{
-		label,
-		items,
-		children,
-		edge = "leading",
-		above = false,
-		disabled,
-		...props
-	},
-	forwardedRef,
-) {
-	const trigger = useRef<HTMLButtonElement>(null);
-	const current = useSyncExternalStore(
-		subscribeContextMenu,
-		getContextMenu,
-		() => null,
-	);
-	const expanded = Boolean(current && current.anchor === trigger.current);
-
-	const toggle = () => {
-		if (!trigger.current || disabled) return;
-		if (expanded) closeContextMenu(false);
-		else openMenu(trigger.current, [...items], { edge, above });
-	};
-
-	return (
-		<Button
-			{...props}
-			ref={(node) => {
-				trigger.current = node;
-				if (typeof forwardedRef === "function") forwardedRef(node);
-				else if (forwardedRef) forwardedRef.current = node;
-			}}
-			type="button"
-			aria-label={label}
-			aria-haspopup="menu"
-			aria-expanded={expanded}
-			disabled={disabled}
-			onClick={toggle}
-			onKeyDown={(event) => {
-				props.onKeyDown?.(event);
-				if (event.defaultPrevented) return;
-				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-					event.preventDefault();
-					if (!expanded) toggle();
-				} else if (event.key === "Escape" && expanded) {
-					event.preventDefault();
-					closeContextMenu();
-				}
-			}}
-		>
-			{children}
-		</Button>
-	);
-});

package/src/components/morph/index.ts

@@ -1,2 +0,0 @@
-export * from "./morph";
-export * from "./use-morph-disclosure";

package/src/components/morph/morph.tsx

@@ -1,258 +0,0 @@
-import {
-	AnimatePresence,
-	type HTMLMotionProps,
-	motion,
-	useReducedMotion,
-} from "motion/react";
-import {
-	type ReactNode,
-	type RefObject,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
-import { concealMenuSource } from "../context-menu/conceal-menu-source";
-import {
-	menuSurfaceExit,
-	menuSurfaceReveal,
-	type MenuRect,
-} from "../context-menu/menu-reveal";
-import { useSheetFocus } from "../sheet/use-sheet-focus";
-import { SheetPortal } from "../sheet/sheet-portal";
-import { cn } from "../../lib/class-names";
-import {
-	contentCrossfade,
-	fluidCollapse,
-	fluidOvershoot,
-} from "../../motion/transitions";
-
-export type MorphSize = "sm" | "md" | "lg";
-
-const outerPaddings: Record<MorphSize, string> = {
-	sm: "p-4",
-	md: "p-6",
-	lg: "p-8",
-};
-const panelMaxWidths: Record<MorphSize, string> = {
-	sm: "max-w-sm",
-	md: "max-w-[720px]",
-	lg: "max-w-3xl",
-};
-
-export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
-	/** Controls whether the overlay is presented. */
-	open: boolean;
-	/** Called on Escape or outside press. */
-	onClose: () => void;
-	/** The element whose rect the overlay grows from and collapses back to. */
-	sourceRef: RefObject<HTMLElement | null>;
-	/** Accessible name (used when there is no labelledBy). */
-	label: string;
-	/** ID of a visible heading inside the overlay. */
-	labelledBy?: string;
-	/** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
-	dismissOnOutsidePress?: boolean;
-	/** Outer padding and panel max-width. @default "md" */
-	size?: MorphSize;
-	className?: string;
-	children?: ReactNode;
-}
-
-/**
- * A modal overlay that morphs its glass material from a source element's
- * rect to its own resting rect, then collapses back — Apple's
- * matched-geometry effect. The source is concealed while the overlay is
- * mounted so the material reads as the source itself springing open.
- *
- * Reuses `SheetPortal` (theme inheritance), `useSheetFocus` (focus trap,
- * Escape, modal environment) and the same `menuSurfaceReveal` FLIP
- * primitive that powers anchored `Popover` and `ContextMenu`.
- */
-export function Morph({ open, ...props }: MorphProps) {
-	return <AnimatePresence>{open && <OpenMorph {...props} />}</AnimatePresence>;
-}
-
-function OpenMorph({
-	onClose,
-	sourceRef,
-	label,
-	labelledBy,
-	dismissOnOutsidePress = true,
-	size = "md",
-	className,
-	children,
-	...props
-}: Omit<MorphProps, "open">) {
-	const panel = useRef<HTMLDivElement>(null);
-	const reducedMotion = useReducedMotion();
-	const [settled, setSettled] = useState(false);
-	const [target, setTarget] = useState<{
-		width: number;
-		height: number;
-		radius: number;
-	} | null>(null);
-	const [reveal, setReveal] = useState<ReturnType<
-		typeof menuSurfaceReveal
-	> | null>(null);
-	useSheetFocus(panel, onClose);
-
-	// Measure the panel's resting rect and the source's rect, then compute
-	// the reveal (initial material state) from menuSurfaceReveal. Re-measures
-	// on resize/scroll so the morph stays aligned if either moves.
-	useLayoutEffect(() => {
-		const surface = panel.current;
-		const source = sourceRef.current;
-		if (!surface) return;
-		const measure = () => {
-			const panelRect = surface.getBoundingClientRect();
-			const radius =
-				Number.parseFloat(getComputedStyle(surface).borderTopLeftRadius) || 0;
-			setTarget((current) =>
-				current &&
-				current.width === panelRect.width &&
-				current.height === panelRect.height &&
-				current.radius === radius
-					? current
-					: { width: panelRect.width, height: panelRect.height, radius },
-			);
-			const sourceRect = source?.getBoundingClientRect();
-			const sourceArg: MenuRect | undefined =
-				sourceRect && sourceRect.width > 0 && sourceRect.height > 0
-					? {
-							left: sourceRect.left,
-							top: sourceRect.top,
-							width: sourceRect.width,
-							height: sourceRect.height,
-						}
-					: undefined;
-			setReveal(
-				menuSurfaceReveal(sourceArg, {
-					left: panelRect.left,
-					top: panelRect.top,
-					width: panelRect.width,
-					height: panelRect.height,
-					radius,
-				}),
-			);
-		};
-		measure();
-		let frame = 0;
-		const schedule = () => {
-			cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(measure);
-		};
-		const observer = new ResizeObserver(schedule);
-		observer.observe(surface);
-		if (source) observer.observe(source);
-		const viewport = window.visualViewport;
-		viewport?.addEventListener("resize", schedule);
-		viewport?.addEventListener("scroll", schedule);
-		window.addEventListener("resize", schedule);
-		window.addEventListener("scroll", schedule, true);
-		return () => {
-			observer.disconnect();
-			cancelAnimationFrame(frame);
-			viewport?.removeEventListener("resize", schedule);
-			viewport?.removeEventListener("scroll", schedule);
-			window.removeEventListener("resize", schedule);
-			window.removeEventListener("scroll", schedule, true);
-		};
-	}, [sourceRef]);
-
-	// Conceal the source while the morph is mounted; restore on unmount.
-	useLayoutEffect(() => {
-		const source = sourceRef.current;
-		if (!source) return;
-		const restore = concealMenuSource(source, false);
-		return () => {
-			restore();
-		};
-	}, [sourceRef]);
-
-	return (
-		<SheetPortal>
-			<div
-				className={cn(
-					"fixed inset-0 z-[75] flex items-center justify-center",
-					outerPaddings[size],
-				)}
-			>
-				<motion.div
-					aria-hidden="true"
-					className="absolute inset-0 bg-black/30 backdrop-blur-md"
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					exit={{ opacity: 0 }}
-					transition={reducedMotion ? { duration: 0 } : { duration: 0.18 }}
-					onClick={dismissOnOutsidePress ? onClose : undefined}
-				/>
-				<motion.div
-					ref={panel}
-					role="dialog"
-					aria-modal="true"
-					aria-label={labelledBy ? undefined : label}
-					aria-labelledby={labelledBy}
-					tabIndex={-1}
-					className={cn(
-						"rounded-5xl relative isolate flex w-full flex-col outline-none",
-						"max-h-[92%]",
-						panelMaxWidths[size],
-						settled && "overflow-hidden",
-						className,
-					)}
-					{...props}
-				>
-					{/* The morphing material — mirrors Popover's data-popover-surface
-                        pattern. Starts at the source's rect (offset relative to the
-                        panel) and grows to fill the panel, with the fluid overshoot
-                        bounce. Border radius interpolates from the source's
-                        "pillified" radius to the panel's authored radius. */}
-					<motion.div
-						key={reveal ? "surface" : "measure"}
-						aria-hidden="true"
-						data-morph-surface=""
-						onAnimationComplete={() => {
-							if (reveal) setSettled(true);
-						}}
-						className="glass-menu rounded-5xl pointer-events-none absolute top-0 left-0 -z-10"
-						style={{ width: "100%", height: "100%" }}
-						initial={reducedMotion || !reveal ? { opacity: 0 } : reveal}
-						animate={
-							target
-								? {
-										x: 0,
-										y: 0,
-										width: target.width,
-										height: target.height,
-										opacity: 1,
-										borderRadius: target.radius,
-									}
-								: undefined
-						}
-						exit={
-							reducedMotion || !reveal
-								? { opacity: 0 }
-								: { ...menuSurfaceExit(reveal), transition: fluidCollapse }
-						}
-						transition={
-							reducedMotion
-								? { duration: 0 }
-								: { ...fluidOvershoot, opacity: { duration: 0.18 } }
-						}
-					/>
-					<motion.div
-						className="flex min-h-0 flex-1 flex-col overflow-y-auto"
-						initial={reducedMotion ? false : contentCrossfade.initial}
-						animate={reducedMotion ? undefined : contentCrossfade.animate}
-						exit={reducedMotion ? undefined : contentCrossfade.exit}
-						transition={
-							reducedMotion ? { duration: 0 } : contentCrossfade.transition
-						}
-					>
-						{children}
-					</motion.div>
-				</motion.div>
-			</div>
-		</SheetPortal>
-	);
-}

package/src/components/morph/use-morph-disclosure.ts

@@ -1,27 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-
-/**
- * Disclosure state that keeps the overlay mounted through its exit animation,
- * mirroring `useAnchoredDisclosure`. Pair with a `useRef<HTMLElement>(null)`
- * for the source.
- */
-export function useMorphDisclosure(disabled = false) {
-	const [open, setOpen] = useState(false);
-	const [mounted, setMounted] = useState(false);
-	useEffect(() => {
-		if (disabled) setOpen(false);
-	}, [disabled]);
-	const show = useCallback(() => {
-		setMounted(true);
-		setOpen(true);
-	}, []);
-	const toggle = useCallback(() => {
-		setMounted(true);
-		setOpen((value) => !value);
-	}, []);
-	const close = useCallback(() => setOpen(false), []);
-	const onExited = useCallback(() => {
-		if (!open || disabled) setMounted(false);
-	}, [open, disabled]);
-	return { open: open && !disabled, mounted, show, toggle, close, onExited };
-}