@passui/react 0.1.47 → 0.2.0

package/src/components/popover/anchored-surface.tsx

@@ -1,264 +0,0 @@
-import { springs } from "@passui/tokens/motion";
-import { useMediaQuery } from "../../hooks/use-media-query";
-import {
-	forwardRef,
-	type HTMLAttributes,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
-import { useAnchoredPlacement } from "../../hooks/use-anchored-placement";
-import { FLOATING_LAYER } from "../../hooks/use-dismiss";
-import { useFloatingDismiss } from "../../hooks/use-floating-dismiss";
-import { cn } from "../../lib/class-names";
-import { registerFloatingLayer } from "../../lib/floating-layers";
-import { concealMenuSource } from "../context-menu/conceal-menu-source";
-import { menuSurfaceReveal } from "../context-menu/menu-reveal";
-
-interface AnchoredSurfaceProps extends HTMLAttributes<HTMLDivElement> {
-	open: boolean;
-	onExited: () => void;
-	anchor: HTMLElement;
-	width: number;
-	needed: number;
-	onClose: (restoreFocus: boolean) => void;
-	contentClassName?: string;
-}
-
-/**
- * Shared material and lifetime for portaled
- *  pickers; their content owns
- * selection.
- * */
-export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
-	function AnchoredSurface(
-		{
-			open: present,
-			onExited: remove,
-			anchor,
-			width,
-			needed,
-			onClose,
-			children,
-			className,
-			contentClassName,
-			...props
-		},
-		forwardedRef,
-	) {
-		const root = useRef<HTMLDivElement>(null);
-		const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
-		const material = useRef<HTMLDivElement>(null);
-		const content = useRef<HTMLDivElement>(null);
-		const animated = useRef<{
-			values: number[];
-			velocities: number[];
-			opacity: number;
-			materialOpacity: number;
-		} | null>(null);
-		const placement = useAnchoredPlacement(anchor, width, needed, true);
-		const [geometry, setGeometry] = useState<{
-			source: ReturnType<typeof menuSurfaceReveal>;
-			width: number;
-			height: number;
-			radius: number;
-		} | null>(null);
-
-		// biome-ignore lint/correctness/useExhaustiveDependencies: Placement can move without resizing; remeasure the source-relative reveal.
-		useLayoutEffect(() => {
-			const panel = root.current;
-			if (!panel || !present) return;
-			const measure = () => {
-				const target = panel.getBoundingClientRect();
-				const source = anchor.getBoundingClientRect();
-				const radius =
-					Number.parseFloat(getComputedStyle(panel).borderTopLeftRadius) || 0;
-				const reveal = menuSurfaceReveal(source, target);
-				setGeometry((current) =>
-					current &&
-					current.width === target.width &&
-					current.height === target.height &&
-					current.radius === radius &&
-					current.source.x === reveal.x &&
-					current.source.y === reveal.y &&
-					current.source.width === reveal.width &&
-					current.source.height === reveal.height
-						? current
-						: {
-								source: reveal,
-								width: target.width,
-								height: target.height,
-								radius,
-							},
-				);
-			};
-			measure();
-			const observer = new ResizeObserver(measure);
-			observer.observe(panel);
-			return () => observer.disconnect();
-		}, [
-			anchor,
-			present,
-			placement.left,
-			placement.top,
-			placement.bottom,
-			placement.width,
-		]);
-
-		useLayoutEffect(() => {
-			if (!root.current) return;
-			const unregister = registerFloatingLayer(root.current, anchor);
-			return unregister;
-		}, [anchor]);
-
-		useLayoutEffect(() => {
-			if (!present) return;
-			const restore = concealMenuSource(anchor, false);
-			return () => {
-				restore();
-			};
-		}, [anchor, present]);
-
-		useLayoutEffect(() => {
-			if (!geometry || !material.current || !content.current) {
-				if (!present) remove?.();
-				return;
-			}
-			const pane = material.current;
-			const body = content.current;
-			const source = [
-				geometry.source.x,
-				geometry.source.y,
-				geometry.source.width,
-				geometry.source.height,
-				geometry.source.borderRadius,
-			];
-			const target = present
-				? [0, 0, geometry.width, geometry.height, geometry.radius]
-				: source;
-			const state = animated.current ?? {
-				values: [...source],
-				velocities: source.map(() => 0),
-				opacity: 0,
-				materialOpacity: 1,
-			};
-			animated.current = state;
-			let frame = 0;
-			let previous = 0;
-			const paint = () => {
-				const [x, y, width, height, radius] = state.values;
-				pane.style.transform = `translate(${x}px, ${y}px)`;
-				pane.style.width = `${Math.max(0, width)}px`;
-				pane.style.height = `${Math.max(0, height)}px`;
-				pane.style.borderRadius = `${Math.max(0, radius)}px`;
-				pane.style.opacity = String(state.materialOpacity);
-				body.style.opacity = String(state.opacity);
-			};
-			const tick = (now: number) => {
-				const dt = previous ? Math.min(0.032, (now - previous) / 1000) : 1 / 60;
-				previous = now;
-				const { stiffness, damping, mass } = springs.smooth;
-				let resting = true;
-				for (let index = 0; index < target.length; index++) {
-					state.velocities[index] +=
-						(((target[index] - state.values[index]) * stiffness -
-							state.velocities[index] * damping) /
-							mass) *
-						dt;
-					state.values[index] += state.velocities[index] * dt;
-					if (
-						Math.abs(target[index] - state.values[index]) > 0.05 ||
-						Math.abs(state.velocities[index]) > 0.05
-					)
-						resting = false;
-				}
-				const progress = Math.max(
-					0,
-					Math.min(
-						1,
-						1 -
-							Math.abs(geometry.height - state.values[3]) /
-								Math.max(1, Math.abs(geometry.height - source[3])),
-					),
-				);
-				const opacity = present ? Math.max(0, (progress - 0.25) / 0.75) : 0;
-				state.opacity += (opacity - state.opacity) * (1 - Math.exp(-dt / 0.04));
-				state.materialOpacity +=
-					((present ? 1 : 0) - state.materialOpacity) *
-					(1 - Math.exp(-dt / 0.04));
-				paint();
-				if (
-					resting &&
-					Math.abs(opacity - state.opacity) < 0.01 &&
-					Math.abs((present ? 1 : 0) - state.materialOpacity) < 0.01
-				) {
-					state.values = [...target];
-					state.velocities.fill(0);
-					state.opacity = present ? 1 : 0;
-					state.materialOpacity = present ? 1 : 0;
-					paint();
-					if (!present) remove?.();
-					return;
-				}
-				frame = requestAnimationFrame(tick);
-			};
-			if (reducedMotion) {
-				state.values = [...target];
-				state.velocities.fill(0);
-				state.opacity = present ? 1 : 0;
-				state.materialOpacity = present ? 1 : 0;
-				paint();
-				if (!present) remove?.();
-			} else {
-				paint();
-				frame = requestAnimationFrame(tick);
-			}
-			return () => cancelAnimationFrame(frame);
-		}, [geometry, present, remove, reducedMotion]);
-
-		useFloatingDismiss(root, anchor, (restore) => {
-			if (present) onClose(restore);
-		});
-
-		return (
-			<div
-				{...props}
-				ref={(node) => {
-					root.current = node;
-					if (typeof forwardedRef === "function") forwardedRef(node);
-					else if (forwardedRef) forwardedRef.current = node;
-				}}
-				{...{ [FLOATING_LAYER]: "" }}
-				inert={!present}
-				className={cn(
-					"fixed isolate z-[80] flex min-w-0 flex-col rounded-3xl outline-none",
-					!present && "pointer-events-none",
-					className,
-				)}
-				style={{
-					left: placement.left,
-					top: placement.top,
-					bottom: placement.bottom,
-					width: placement.width,
-					maxHeight: placement.maxHeight ?? 420,
-				}}
-			>
-				<div
-					ref={material}
-					aria-hidden="true"
-					className="glass-menu pointer-events-none absolute top-0 left-0 -z-10"
-				/>
-				<div
-					ref={content}
-					style={{ opacity: 0 }}
-					className={cn(
-						"flex min-h-0 flex-col overflow-y-auto overscroll-contain",
-						contentClassName,
-					)}
-				>
-					{children}
-				</div>
-			</div>
-		);
-	},
-);

package/src/components/popover/index.ts

@@ -1,50 +0,0 @@
-/**
- * Popover — a glass surface that springs open from its trigger.
- *
- * Compound API (the only API):
- *
- * ```tsx
- * <Popover>
- *   <Popover.Trigger render={(props) => <Button {...props}>Open</Button>} />
- *   <Popover.Content origin="top-left" className="top-full left-0 mt-2 w-64 p-4">
- *     …content…
- *   </Popover.Content>
- * </Popover>
- * ```
- *
- * The `Popover.Trigger` clones its child (or uses a `render` prop) and wires
- * up aria-haspopup, aria-expanded, aria-controls, click + keyboard toggling.
- * The `Popover.Content` portals out of the authored layout, morphs its glass
- * surface from the trigger's rect, and keeps itself inside the viewport as
- * it resizes or scrolls. `origin` picks the corner it grows from; pass
- * `placement="center"` for a modal center-screen variant.
- *
- * State is driven by a small pure machine (`popover.machine.ts`) that
- * translates directly to a Rust enum — see the architecture plan.
- */
-export { PopoverRoot as Root } from "./popover-root";
-export {
-	PopoverTrigger as Trigger,
-	type PopoverTriggerRenderProps,
-} from "./popover-trigger";
-export {
-	PopoverContent as Content,
-	type PopoverOrigin,
-} from "./popover-content";
-
-import { PopoverRoot } from "./popover-root";
-import { PopoverTrigger } from "./popover-trigger";
-import { PopoverContent } from "./popover-content";
-
-/**
- * Compound Popover. Use as `<Popover>` with `.Trigger` and `.Content` parts,
- * or import `Root` / `Trigger` / `Content` directly from the barrel.
- */
-export const Popover = Object.assign(PopoverRoot, {
-	Trigger: PopoverTrigger,
-	Content: PopoverContent,
-});
-
-export type { PopoverRootProps } from "./popover-root";
-export type { PopoverTriggerProps } from "./popover-trigger";
-export type { PopoverContentProps } from "./popover-content";

package/src/components/popover/popover-content.tsx

@@ -1,374 +0,0 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { type ReactNode, 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 { screenEdges } from "../../lib/screen-edges";
-import { fluidCollapse, fluidOvershoot } from "../../motion/transitions";
-import { usePopover } from "./popover-root";
-
-export type PopoverOrigin = "top-left" | "top-right";
-
-export interface PopoverContentProps {
-	children: ReactNode;
-	/** Extra classes for the panel (sizing, padding, max-height). */
-	className?: string;
-	/** Accessible name (used when there is no labelledBy). */
-	label?: string;
-	/** ID of a visible heading inside the content. */
-	labelledBy?: string;
-	/** Allow tapping outside to close. Escape always closes. */
-	dismissOnOutsidePress?: boolean;
-	/**
-	 * Where the content rests once expanded:
-	 * - "anchor" positions relative to the trigger (default)
-	 * - "center" floats in the middle of the viewport (modal)
-	 */
-	placement?: "anchor" | "center";
-	/**
-	 * Which corner the popover grows from when placement="anchor".
-	 * top-left: panel's left edge aligns to the trigger's left.
-	 * top-right: panel's right edge aligns to the trigger's right.
-	 * @default "top-left"
-	 */
-	origin?: PopoverOrigin;
-	/**
-	 * Gap between the trigger and the panel, in pixels.
-	 * @default 8
-	 */
-	gap?: number;
-	/**
-	 * ARIA role for the panel. Use "menu" for action menus, "dialog"
-	 * (the default) for free-form content, "tooltip" for tips.
-	 * @default "dialog"
-	 */
-	role?: "dialog" | "menu" | "tooltip";
-}
-
-interface Placement {
-	/** Fixed left in viewport px. */
-	left: number;
-	/** Fixed top in viewport px. */
-	top: number;
-	/** Width cap so the panel never crosses the right safe edge. */
-	maxWidth: number;
-	/** Height cap; when set, the panel scrolls inside it. */
-	maxHeight?: number;
-	/** True when the panel opens above the trigger. */
-	above: boolean;
-}
-
-const NO_PLACEMENT: Placement = {
-	left: 0,
-	top: 0,
-	maxWidth: 0,
-	above: false,
-};
-
-/**
- * Place the panel below (or above) the trigger, aligned to the chosen
- * corner, kept inside the screen's safe edges. Pure: no DOM, just math.
- */
-function placePanel(
-	trigger: DOMRect,
-	panel: { width: number; height: number },
-	origin: PopoverOrigin,
-	gap: number,
-): Placement {
-	const edges = screenEdges();
-	const vv = window.visualViewport;
-	const vw = (vv?.width ?? window.innerWidth) + (vv?.offsetLeft ?? 0);
-	const vh = (vv?.height ?? window.innerHeight) + (vv?.offsetTop ?? 0);
-	const safeLeft = edges.left + (vv?.offsetLeft ?? 0);
-	const safeRight = vw - edges.right;
-	const safeTop = edges.top + (vv?.offsetTop ?? 0);
-	const safeBottom = vh - edges.bottom;
-
-	// Horizontal: align the chosen edge to the trigger, then clamp into view.
-	const maxWidth = Math.max(0, safeRight - safeLeft);
-	const width = Math.min(panel.width, maxWidth);
-	const left =
-		origin === "top-right"
-			? Math.max(safeLeft, Math.min(trigger.right - width, safeRight - width))
-			: Math.max(safeLeft, Math.min(trigger.left, safeRight - width));
-
-	// Vertical: prefer below; flip above when there isn't room below but
-	// there is above (matching the legacy popover's behaviour).
-	const roomBelow = safeBottom - trigger.bottom - gap;
-	const roomAbove = trigger.top - gap - safeTop;
-	const above = roomBelow < panel.height && roomAbove > roomBelow;
-	const room = above ? roomAbove : roomBelow;
-	const top = above
-		? trigger.top - gap - Math.min(panel.height, room)
-		: trigger.bottom + gap;
-	const maxHeight = panel.height > room ? room : undefined;
-
-	return { left, top, maxWidth, maxHeight, above };
-}
-
-export function PopoverContent({
-	children,
-	className,
-	label,
-	labelledBy,
-	dismissOnOutsidePress = true,
-	placement = "anchor",
-	origin = "top-left",
-	gap = 8,
-	role = "dialog",
-}: PopoverContentProps) {
-	const { state, send, triggerRef, contentId } = usePopover();
-	const panel = useRef<HTMLDivElement>(null);
-	const reducedMotion = useReducedMotion();
-	const [settled, setSettled] = useState(false);
-	const [material, setMaterial] = useState({ width: 0, height: 0, radius: 0 });
-	const [placementState, setPlacement] = useState<Placement>(NO_PLACEMENT);
-	const [reveal, setReveal] = useState<ReturnType<
-		typeof menuSurfaceReveal
-	> | null>(null);
-
-	useSheetFocus(panel, () => send("CLOSE"));
-
-	// Re-measure on every layout pass: trigger position, panel size, scroll,
-	// viewport resize. Recompute the fixed placement + the morph source rect.
-	useLayoutEffect(() => {
-		const surface = panel.current;
-		const source = triggerRef.current;
-		if (!surface) return;
-
-		const refit = () => {
-			const trigger = source?.getBoundingClientRect();
-			// Measure the authored size (padding/width from className) so the
-			// morph target is the natural panel the author styled.
-			const natural = surface.getBoundingClientRect();
-			const radius =
-				Number.parseFloat(getComputedStyle(surface).borderTopLeftRadius) || 0;
-			setMaterial((prev) =>
-				prev.width === natural.width &&
-				prev.height === natural.height &&
-				prev.radius === radius
-					? prev
-					: { width: natural.width, height: natural.height, radius },
-			);
-
-			if (trigger && trigger.width > 0 && trigger.height > 0) {
-				const next = placePanel(
-					trigger,
-					{ width: natural.width, height: natural.height },
-					origin,
-					gap,
-				);
-				setPlacement((current) =>
-					current.left === next.left &&
-					current.top === next.top &&
-					current.maxWidth === next.maxWidth &&
-					current.maxHeight === next.maxHeight &&
-					current.above === next.above
-						? current
-						: next,
-				);
-				const sourceArg: MenuRect = {
-					left: trigger.left,
-					top: trigger.top,
-					width: trigger.width,
-					height: trigger.height,
-				};
-				setReveal(
-					menuSurfaceReveal(sourceArg, {
-						left: next.left,
-						top: next.top,
-						width: Math.min(natural.width, next.maxWidth),
-						height: next.maxHeight
-							? Math.min(natural.height, next.maxHeight)
-							: natural.height,
-						radius,
-					}),
-				);
-			}
-		};
-
-		refit();
-		let frame = 0;
-		const schedule = () => {
-			cancelAnimationFrame(frame);
-			frame = requestAnimationFrame(refit);
-		};
-		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);
-		};
-	}, [triggerRef, origin, gap]);
-
-	// Conceal the trigger while the surface is morphing out of it.
-	useLayoutEffect(() => {
-		const source = triggerRef.current;
-		if (!source) return;
-		const restore = concealMenuSource(source, false);
-		return () => {
-			restore();
-		};
-	}, [triggerRef]);
-
-	const anchored = placement === "anchor";
-	const scrollable = settled && placementState.maxHeight !== undefined;
-
-	return (
-		<AnimatePresence>
-			{state !== "closed" && (
-				<SheetPortal>
-					{placement === "center" && (
-						<motion.div
-							aria-hidden="true"
-							className="fixed inset-0 z-[75] bg-black/30 backdrop-blur-md"
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							exit={{ opacity: 0 }}
-							transition={reducedMotion ? { duration: 0 } : { duration: 0.18 }}
-							onClick={dismissOnOutsidePress ? () => send("CLOSE") : undefined}
-						/>
-					)}
-					<motion.div
-						ref={panel}
-						id={contentId}
-						role={role}
-						aria-modal={placement === "center" || undefined}
-						aria-label={labelledBy ? undefined : label}
-						aria-labelledby={labelledBy}
-						tabIndex={-1}
-						data-state={state}
-						data-placement={
-							anchored ? (placementState.above ? "top" : "bottom") : "center"
-						}
-						className={cn(
-							"isolate flex flex-col outline-none",
-							anchored
-								? "rounded-5xl absolute z-40 [&>:not([data-popover-surface])]:opacity-[var(--popover-content-opacity)]"
-								: "rounded-5xl fixed z-[76] max-h-[92%] w-full max-w-[560px] p-6",
-							scrollable ? "overflow-hidden" : undefined,
-							className,
-						)}
-						style={
-							anchored
-								? {
-										position: "fixed",
-										left: placementState.left,
-										top: placementState.top,
-										maxWidth: placementState.maxWidth || undefined,
-										maxHeight: placementState.maxHeight,
-										overflowY: scrollable ? "auto" : undefined,
-										transformOrigin:
-											origin === "top-left"
-												? `0% ${placementState.above ? "100%" : "0%"}`
-												: `100% ${placementState.above ? "100%" : "0%"}`,
-									}
-								: undefined
-						}
-						initial={
-							anchored
-								? { "--popover-content-opacity": reducedMotion ? 1 : 0 }
-								: { opacity: 0 }
-						}
-						animate={
-							anchored ? { "--popover-content-opacity": 1 } : { opacity: 1 }
-						}
-						exit={
-							anchored
-								? {
-										"--popover-content-opacity": 0,
-										transition: { duration: reducedMotion ? 0 : 0.06 },
-									}
-								: { opacity: 0 }
-						}
-						transition={
-							anchored
-								? reducedMotion
-									? { duration: 0 }
-									: { duration: 0.16, delay: 0.06 }
-								: reducedMotion
-									? { duration: 0 }
-									: { duration: 0.16, delay: 0.06 }
-						}
-					>
-						{/* The morphing glass surface — starts at the trigger's rect
-						    and grows to fill the panel, with the fluid overshoot bounce. */}
-						<motion.div
-							key={reveal ? "surface" : "measure"}
-							aria-hidden="true"
-							data-popover-surface=""
-							onAnimationComplete={() => {
-								if (state === "opening") send("OPENED");
-								if (state === "closing") send("CLOSED");
-								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={
-								material.width > 0
-									? {
-											x: 0,
-											y: 0,
-											width: material.width,
-											height: placementState.maxHeight
-												? Math.min(material.height, placementState.maxHeight)
-												: material.height,
-											opacity: 1,
-											borderRadius: material.radius,
-										}
-									: undefined
-							}
-							exit={
-								reducedMotion || !reveal
-									? { opacity: 0 }
-									: {
-											...menuSurfaceExit(reveal),
-											transition: fluidCollapse,
-										}
-							}
-							transition={
-								reducedMotion
-									? { duration: 0 }
-									: { ...fluidOvershoot, opacity: { duration: 0.16 } }
-							}
-						/>
-						{/* Content fades in after the surface arrives. */}
-						<motion.div
-							initial={reducedMotion ? false : { opacity: 0 }}
-							animate={reducedMotion ? undefined : { opacity: 1 }}
-							exit={
-								reducedMotion
-									? undefined
-									: { opacity: 0, transition: { duration: 0.12 } }
-							}
-							transition={
-								reducedMotion
-									? { duration: 0 }
-									: { duration: 0.16, delay: 0.06 }
-							}
-						>
-							{state !== "closing" && children}
-						</motion.div>
-					</motion.div>
-				</SheetPortal>
-			)}
-		</AnimatePresence>
-	);
-}