@passui/react 0.1.47 → 0.2.0

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

@@ -1,97 +0,0 @@
-import {
-	type ReactNode,
-	useEffect,
-	useId,
-	useReducer,
-	useRef,
-	type RefObject,
-} from "react";
-import { createContext, useContext } from "react";
-import {
-	popoverMachine,
-	type PopoverContextValue,
-	type PopoverEvent,
-	type PopoverState,
-} from "../../machines/popover.machine";
-
-const PopoverContext = createContext<PopoverContextValue | null>(null);
-
-export function usePopover(): PopoverContextValue {
-	const ctx = useContext(PopoverContext);
-	if (!ctx) throw new Error("Popover parts need a <Popover.Root> parent");
-	return ctx;
-}
-
-export interface PopoverRootProps {
-	children: ReactNode;
-	/**
-	 * Start open (uncontrolled) or set the initial state.
-	 * Ignored when `open` is provided.
-	 */
-	defaultOpen?: boolean;
-	/**
-	 * Controlled open state. When provided, the popover is driven by this
-	 * prop: setting it to true opens, false closes. The internal machine
-	 * still runs the open/close transitions so the morph can play.
-	 */
-	open?: boolean;
-	/** Called when the popover finishes opening or closing. */
-	onOpenChange?: (open: boolean) => void;
-}
-
-export function PopoverRoot({
-	children,
-	defaultOpen = false,
-	open,
-	onOpenChange,
-}: PopoverRootProps) {
-	const [state, dispatch] = useReducer(
-		popoverMachine,
-		defaultOpen ? "opening" : ("closed" satisfies PopoverState),
-	);
-	const triggerRef = useRef<HTMLElement | null>(null);
-	const contentId = useId();
-	const surfaceId = useId();
-	const onOpenChangeRef = useRef(onOpenChange);
-
-	// Keep the latest callback without re-rendering the tree.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	onOpenChangeRef.current = onOpenChange;
-
-	const send = (event: PopoverEvent) => {
-		const next = popoverMachine(state, event);
-		if (next !== state) {
-			dispatch(event);
-			// Fire onOpenChange only when fully open or fully closed — not
-			// during transitions. This lets the consumer close the popover
-			// (set open=false) and have it animate out, rather than unmounting.
-			if (next === "open") onOpenChangeRef.current?.(true);
-			if (next === "closed") onOpenChangeRef.current?.(false);
-		}
-	};
-
-	// Controlled mode: drive OPEN/CLOSE from the `open` prop. The machine
-	// still runs the morph transitions; we only nudge it when the desired
-	// presence differs from the current presence.
-	const present = state !== "closed";
-	useEffect(() => {
-		if (open === undefined) return;
-		if (open && !present) send("OPEN");
-		if (!open && present) send("CLOSE");
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [open]);
-
-	const isPresent = present;
-
-	return (
-		<PopoverContext
-			value={{ state, send, triggerRef, contentId, surfaceId, isPresent }}
-		>
-			{children}
-		</PopoverContext>
-	);
-}
-
-// Re-export the context type for consumers that need it.
-export type { PopoverContextValue };
-export type { RefObject };

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

@@ -1,71 +0,0 @@
-import { type ReactNode, cloneElement, isValidElement } from "react";
-import { usePopover } from "./popover-root";
-
-export type PopoverTriggerRenderProps = {
-	ref: (node: HTMLElement | null) => void;
-	"aria-haspopup": "dialog";
-	"aria-expanded": boolean;
-	"aria-controls": string | undefined;
-	onClick: () => void;
-	onKeyDown: (event: React.KeyboardEvent) => void;
-};
-
-export interface PopoverTriggerProps {
-	/** The trigger content when using render prop. */
-	children?: ReactNode;
-	/**
-	 * Render prop: receives the trigger props (ref, aria, onClick) and
-	 * returns the trigger element. This prevents ref-passing conflicts
-	 * when multiple triggers exist — borrowed from Base UI.
-	 *
-	 * If you pass a single element as children instead, it will be
-	 * cloned with the trigger props merged in.
-	 */
-	render?: (props: PopoverTriggerRenderProps) => ReactNode;
-}
-
-export function PopoverTrigger({ children, render }: PopoverTriggerProps) {
-	const { state, send, triggerRef, contentId } = usePopover();
-
-	const triggerProps: PopoverTriggerRenderProps = {
-		ref: (node) => {
-			triggerRef.current = node;
-		},
-		"aria-haspopup": "dialog",
-		"aria-expanded": state === "open" || state === "opening",
-		"aria-controls": state !== "closed" ? contentId : undefined,
-		onClick: () => send("TOGGLE"),
-		onKeyDown: (event) => {
-			if (event.key === "Enter" || event.key === " ") {
-				event.preventDefault();
-				send("TOGGLE");
-			}
-		},
-	};
-
-	if (render) {
-		return render(triggerProps);
-	}
-
-	// Clone a single child element with the trigger props merged.
-	if (isValidElement(children)) {
-		const child = children as React.ReactElement<Record<string, unknown>>;
-		return cloneElement(child, {
-			ref: (node: HTMLElement | null) => {
-				triggerRef.current = node;
-			},
-			"aria-haspopup": "dialog",
-			"aria-expanded": state === "open" || state === "opening",
-			"aria-controls": state !== "closed" ? contentId : undefined,
-			onClick: () => send("TOGGLE"),
-			onKeyDown: (event: React.KeyboardEvent) => {
-				if (event.key === "Enter" || event.key === " ") {
-					event.preventDefault();
-					send("TOGGLE");
-				}
-			},
-		});
-	}
-
-	return null;
-}

package/src/components/profile-image/profile-image.tsx

@@ -1,96 +0,0 @@
-import {
-	createContext,
-	useContext,
-	useEffect,
-	useState,
-	type ComponentProps,
-} from "react";
-import { cn } from "../../lib/class-names";
-
-export type ProfileImageSize = "sm" | "md" | "lg";
-
-const diameters: Record<ProfileImageSize, string> = {
-	sm: "size-7",
-	md: "size-9",
-	lg: "size-12",
-};
-
-const fallbackTextSizes: Record<ProfileImageSize, string> = {
-	sm: "text-caption",
-	md: "text-footnote",
-	lg: "text-subheadline",
-};
-
-const ImageContext = createContext<{
-	loaded: boolean;
-	setLoaded: (loaded: boolean) => void;
-	size: ProfileImageSize;
-}>({ loaded: false, setLoaded: () => {}, size: "md" });
-
-export interface ProfileImageProps extends ComponentProps<"span"> {
-	/** Avatar diameter; fallback initials scale with it. @default "md" */
-	size?: ProfileImageSize;
-}
-
-export function ProfileImage({
-	size = "md",
-	className,
-	...props
-}: ProfileImageProps) {
-	const [loaded, setLoaded] = useState(false);
-	return (
-		<ImageContext value={{ loaded, setLoaded, size }}>
-			<span
-				{...props}
-				className={cn(
-					"bg-fill text-label-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
-					diameters[size],
-					className,
-				)}
-			/>
-		</ImageContext>
-	);
-}
-export function ProfileImageContent({
-	src,
-	className,
-	onLoad,
-	onError,
-	...props
-}: ComponentProps<"img">) {
-	const { setLoaded } = useContext(ImageContext);
-	useEffect(() => {
-		if (src) setLoaded(false);
-	}, [src, setLoaded]);
-	if (!src) return null;
-	return (
-		<img
-			key={src}
-			alt=""
-			{...props}
-			src={src}
-			className={cn("absolute inset-0 size-full object-cover", className)}
-			onLoad={(event) => {
-				setLoaded(true);
-				onLoad?.(event);
-			}}
-			onError={(event) => {
-				setLoaded(false);
-				onError?.(event);
-				event.currentTarget.style.visibility = "hidden";
-			}}
-		/>
-	);
-}
-export function ProfileImageFallback({
-	className,
-	...props
-}: ComponentProps<"span">) {
-	const { loaded, size } = useContext(ImageContext);
-	return loaded ? null : (
-		<span
-			{...props}
-			className={cn(fallbackTextSizes[size], "font-medium", className)}
-		/>
-	);
-}

package/src/components/progress-view/progress-view.tsx

@@ -1,72 +0,0 @@
-import { type HTMLAttributes, useRef } from "react";
-import { useLiquidProgress } from "./use-liquid-progress";
-import { cn } from "../../lib/class-names";
-import { clampRange } from "../../lib/range-value";
-
-export type ProgressViewSize = "sm" | "md" | "lg";
-
-export interface ProgressViewProps
-	extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
-	label: string;
-	/** Omit for an indeterminate operation. */
-	value?: number;
-	max?: number;
-	size?: ProgressViewSize;
-	/** Secondary text, such as bytes uploaded. */
-	detail?: string;
-}
-
-const trackHeight: Record<ProgressViewSize, string> = {
-	sm: "h-1",
-	md: "h-2",
-	lg: "h-3",
-};
-
-/** A determinate or indeterminate progress track respecting reduced motion. */
-export function ProgressView({
-	label,
-	value,
-	max = 100,
-	size = "md",
-	detail,
-	className,
-	...props
-}: ProgressViewProps) {
-	const limit = Number.isFinite(max) && max > 0 ? max : 100;
-	const current = value === undefined ? undefined : clampRange(value, 0, limit);
-	const progress = current === undefined ? undefined : (current / limit) * 100;
-	const fill = useRef<HTMLDivElement>(null);
-	useLiquidProgress(fill, progress);
-
-	return (
-		<div {...props} className={cn("flex min-w-0 flex-col gap-2", className)}>
-			<div className="text-footnote flex items-center justify-between gap-3">
-				<span className="text-label font-semibold">{label}</span>
-				{detail && <span className="text-label-secondary">{detail}</span>}
-			</div>
-			<div
-				role="progressbar"
-				aria-label={label}
-				aria-valuemin={current === undefined ? undefined : 0}
-				aria-valuemax={current === undefined ? undefined : limit}
-				aria-valuenow={current}
-				className={cn(
-					"bg-separator/70 relative w-full overflow-hidden rounded-full",
-					trackHeight[size],
-				)}
-			>
-				<div
-					ref={fill}
-					aria-hidden="true"
-					className={cn(
-						"bg-accent h-full rounded-full",
-						current !== undefined && "passui-progress-fill",
-						current === undefined &&
-							"w-1/3 animate-pulse motion-reduce:animate-none",
-					)}
-					style={progress === undefined ? undefined : { width: `${progress}%` }}
-				/>
-			</div>
-		</div>
-	);
-}

package/src/components/progress-view/use-liquid-progress.ts

@@ -1,43 +0,0 @@
-import { type RefObject, useLayoutEffect, useRef } from "react";
-import { useMediaQuery } from "../../hooks/use-media-query";
-import { clampRange } from "../../lib/range-value";
-import { stepLiquid } from "../slosh-slider/liquid-step";
-
-/** Read-only progress shares the liquid fill without acquiring slider semantics. */
-export function useLiquidProgress(
-	ref: RefObject<HTMLDivElement | null>,
-	target: number | undefined,
-) {
-	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
-	const state = useRef({ fill: target ?? 0, velocity: 0 });
-	useLayoutEffect(() => {
-		const element = ref.current;
-		if (!element || target === undefined) return;
-		let frame = 0;
-		let previous = 0;
-		const paint = () => {
-			element.style.width = `${state.current.fill}%`;
-			element.style.setProperty(
-				"--progress-lean",
-				`${reduced ? 0 : clampRange(state.current.velocity * 0.4, -4, 4)}px`,
-			);
-		};
-		if (reduced) {
-			state.current = { fill: target, velocity: 0 };
-			paint();
-			return;
-		}
-		const tick = (now: number) => {
-			const dt = previous ? Math.min(2.5, (now - previous) / 16.67) : 1;
-			previous = now;
-			state.current = stepLiquid(state.current, target, 15, dt);
-			paint();
-			if (state.current.fill !== target || state.current.velocity)
-				frame = requestAnimationFrame(tick);
-		};
-		paint();
-		if (state.current.fill !== target || state.current.velocity)
-			frame = requestAnimationFrame(tick);
-		return () => cancelAnimationFrame(frame);
-	}, [ref, target, reduced]);
-}

package/src/components/radio-group/radio-group.tsx

@@ -1,86 +0,0 @@
-import { useId } from "react";
-import { cn } from "../../lib/class-names";
-
-export type RadioGroupSize = "sm" | "md" | "lg";
-
-const legendSizes: Record<RadioGroupSize, string> = {
-	sm: "mb-1.5 text-caption2 font-medium text-label-secondary",
-	md: "mb-2 text-footnote font-medium text-label-secondary",
-	lg: "mb-2.5 text-subheadline font-medium text-label-secondary",
-};
-const rowSizes: Record<RadioGroupSize, string> = {
-	sm: "flex min-h-7 items-start gap-1.5 text-footnote text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-10",
-	md: "flex min-h-8 items-start gap-2 text-subheadline text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-11",
-	lg: "flex min-h-10 items-start gap-2.5 text-body text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-12",
-};
-const radioSizes: Record<RadioGroupSize, string> = {
-	sm: "mt-0.5 size-3.5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-	md: "mt-1 size-4 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-	lg: "mt-1 size-5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-};
-const descriptionSizes: Record<RadioGroupSize, string> = {
-	sm: "block text-caption2 text-label-secondary",
-	md: "block text-footnote text-label-secondary",
-	lg: "block text-subheadline text-label-secondary",
-};
-
-export interface RadioGroupOption<T extends string> {
-	value: T;
-	label: string;
-	description?: string;
-	disabled?: boolean;
-}
-export interface RadioGroupProps<T extends string> {
-	value: T;
-	onChange: (value: NoInfer<T>) => void;
-	label: string;
-	options: readonly RadioGroupOption<T>[];
-	disabled?: boolean;
-	name?: string;
-	className?: string;
-	/** Legend, row, radio glyph and description density. @default "md" */
-	size?: RadioGroupSize;
-}
-/** A labelled choice group using the browser's native radio keyboard behavior. */
-export function RadioGroup<T extends string>({
-	value,
-	onChange,
-	label,
-	options,
-	disabled,
-	name,
-	className,
-	size = "md",
-}: RadioGroupProps<T>) {
-	const id = useId();
-	return (
-		<fieldset
-			disabled={disabled}
-			className={cn("flex min-w-0 flex-col gap-2", className)}
-		>
-			<legend className={legendSizes[size]}>{label}</legend>
-			{options.map((option, index) => (
-				<label key={option.value} className={rowSizes[size]}>
-					<input
-						type="radio"
-						name={name ?? id}
-						value={option.value}
-						checked={value === option.value}
-						disabled={option.disabled}
-						onChange={() => onChange(option.value)}
-						aria-describedby={option.description ? `${id}-${index}` : undefined}
-						className={radioSizes[size]}
-					/>
-					<span>
-						{option.label}
-						{option.description && (
-							<span id={`${id}-${index}`} className={descriptionSizes[size]}>
-								{option.description}
-							</span>
-						)}
-					</span>
-				</label>
-			))}
-		</fieldset>
-	);
-}

package/src/components/search-field/expanding-search-field.tsx

@@ -1,197 +0,0 @@
-import {
-	type InputHTMLAttributes,
-	type Ref,
-	useEffect,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
-import { useMediaQuery } from "../../hooks/use-media-query";
-import { SearchIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { springs } from "@passui/tokens/motion";
-
-/** One object: the field stays inside the pill, and the lens never moves within it. */
-export function ExpandingSearchField({
-	inputRef,
-	className,
-	placeholder = "Search",
-	...props
-}: InputHTMLAttributes<HTMLInputElement> & {
-	inputRef: Ref<HTMLInputElement>;
-}) {
-	const [expanded, setExpanded] = useState(
-		Boolean(props.value ?? props.defaultValue),
-	);
-	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
-	const frame = useRef<HTMLDivElement>(null);
-	const pill = useRef<HTMLLabelElement>(null);
-	const input = useRef<HTMLInputElement>(null);
-	const geometry = useRef({
-		width: expanded ? 320 : 44,
-		velocity: 0,
-		x: 0,
-		y: 0,
-		vx: 0,
-		vy: 0,
-		pullX: 0,
-		pullY: 0,
-		capacity: 320,
-		raf: 0,
-	});
-	const current = useRef({ expanded, reduced });
-	const wake = useRef<() => void>(() => {});
-	useLayoutEffect(() => {
-		const box = frame.current;
-		const label = pill.current;
-		const field = input.current;
-		if (!box || !label || !field) return;
-		const s = geometry.current;
-		let previous = 0;
-		const tick = (now: number) => {
-			const dt = previous ? Math.min(0.032, (now - previous) / 1000) : 1 / 60;
-			previous = now;
-			const target = current.current.expanded
-				? s.capacity
-				: Math.min(44, s.capacity);
-			const pullX = current.current.expanded ? 0 : s.pullX;
-			const pullY = current.current.expanded ? 0 : s.pullY;
-			const { stiffness, damping, mass } = springs.smooth;
-			if (current.current.reduced) {
-				s.width = target;
-				s.x = 0;
-				s.y = 0;
-				s.velocity = 0;
-				s.vx = 0;
-				s.vy = 0;
-			} else {
-				s.velocity +=
-					(((target - s.width) * stiffness - s.velocity * damping) / mass) * dt;
-				s.width += s.velocity * dt;
-				s.vx += (((pullX - s.x) * stiffness - s.vx * damping) / mass) * dt;
-				s.vy += (((pullY - s.y) * stiffness - s.vy * damping) / mass) * dt;
-				s.x += s.vx * dt;
-				s.y += s.vy * dt;
-			}
-			label.style.width = `${Math.max(0, s.width)}px`;
-			label.style.transform = `translate(${s.x}px, ${s.y}px)`;
-			/* One number drives the field's reveal; focus lands with the
-               expansion, so the caret arrives while the shape is growing. */
-			const progress = (s.width - 44) / Math.max(1, s.capacity - 44);
-			field.style.opacity = String(
-				Math.max(0, Math.min(1, (progress - 0.55) / 0.45)),
-			);
-			if (
-				Math.abs(s.width - target) < 0.05 &&
-				Math.abs(s.velocity) < 0.05 &&
-				Math.abs(s.x - pullX) +
-					Math.abs(s.y - pullY) +
-					Math.abs(s.vx) +
-					Math.abs(s.vy) <
-					0.05
-			) {
-				label.style.width = `${target}px`;
-				s.raf = 0;
-				previous = 0;
-				return;
-			}
-			s.raf = requestAnimationFrame(tick);
-		};
-		wake.current = () => {
-			if (!s.raf) s.raf = requestAnimationFrame(tick);
-		};
-		const measure = () => {
-			s.capacity = Math.min(320, box.clientWidth);
-			wake.current();
-		};
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(box);
-		return () => {
-			observer.disconnect();
-			cancelAnimationFrame(s.raf);
-			s.raf = 0;
-		};
-	}, []);
-	useEffect(() => {
-		current.current = { expanded, reduced };
-		wake.current();
-	}, [expanded, reduced]);
-	return (
-		<div
-			ref={frame}
-			className={cn(
-				"relative flex h-11 w-full max-w-xs items-center justify-center",
-				className,
-			)}
-			onPointerMove={(event) => {
-				if (expanded || reduced || event.pointerType !== "mouse") return;
-				// Measure the frame, which stays still; measuring the object being
-				// moved creates a feedback loop and a visible shiver.
-				const rect = event.currentTarget.getBoundingClientRect();
-				const dx = event.clientX - rect.left - rect.width / 2;
-				const dy = event.clientY - rect.top - rect.height / 2;
-				const distance = Math.hypot(dx, dy);
-				const pull = Math.max(0, 1 - distance / 72) ** 1.4 * 7;
-				geometry.current.pullX = distance ? (dx / distance) * pull : 0;
-				geometry.current.pullY = distance ? (dy / distance) * pull : 0;
-				wake.current();
-			}}
-			onPointerLeave={() => {
-				geometry.current.pullX = 0;
-				geometry.current.pullY = 0;
-				wake.current();
-			}}
-		>
-			<label
-				ref={pill}
-				className={cn(
-					"passui-search-pill control-field relative block h-11 max-w-full overflow-hidden rounded-full",
-					props.disabled && "opacity-40",
-				)}
-				style={{ width: expanded ? 320 : 44 }}
-			>
-				<SearchIcon
-					aria-hidden="true"
-					size={18}
-					className="text-label-secondary pointer-events-none absolute start-[13px] top-1/2 -translate-y-1/2"
-				/>
-				<input
-					{...props}
-					ref={(node) => {
-						input.current = node;
-						if (typeof inputRef === "function") inputRef(node);
-						else if (inputRef) inputRef.current = node;
-					}}
-					type="search"
-					placeholder={placeholder}
-					aria-label={
-						props["aria-labelledby"]
-							? undefined
-							: (props["aria-label"] ?? placeholder)
-					}
-					className="text-subheadline text-label placeholder:text-label-tertiary h-11 w-full min-w-0 bg-transparent ps-11 pe-3 outline-none"
-					onFocus={(event) => {
-						setExpanded(true);
-						props.onFocus?.(event);
-					}}
-					onBlur={(event) => {
-						if (!event.currentTarget.value) setExpanded(false);
-						props.onBlur?.(event);
-					}}
-					onKeyDown={(event) => {
-						props.onKeyDown?.(event);
-						if (
-							!event.defaultPrevented &&
-							event.key === "Escape" &&
-							!event.currentTarget.value
-						) {
-							setExpanded(false);
-							event.currentTarget.blur();
-						}
-					}}
-				/>
-			</label>
-		</div>
-	);
-}