@passui/react 0.1.46 → 0.2.0

package/src/components/popover/popover-fit.ts

@@ -1,74 +0,0 @@
-import {
-	type PlacementFrame,
-	placeInViewport,
-} from "../../lib/anchored-placement";
-
-interface PanelRect {
-	left: number;
-	top: number;
-	width: number;
-	height: number;
-}
-
-interface AnchorRect {
-	top: number;
-	bottom: number;
-}
-
-export interface PopoverFit {
-	shiftX: number;
-	shiftY: number;
-	maxWidth: number;
-	maxHeight?: number;
-	above: boolean;
-}
-
-/** Keep an absolutely positioned popover visible without scaling its contents. */
-export function fitPopover(
-	panel: PanelRect,
-	anchor: AnchorRect | undefined,
-	frame: Pick<PlacementFrame, "viewport" | "edges">,
-	gap = 6,
-	origin: "top-left" | "top-right" = "top-left",
-): PopoverFit {
-	const { viewport, edges } = frame;
-	const topEdge = edges.top;
-	const bottomEdge = viewport.height - edges.bottom;
-	const availableHeight = Math.max(0, bottomEdge - topEdge);
-	const placement = placeInViewport(
-		{
-			...frame,
-			anchor: {
-				left: panel.left,
-				top: anchor?.top ?? panel.top,
-				bottom: anchor?.bottom ?? panel.top,
-			},
-		},
-		panel.width,
-		panel.height,
-		gap,
-	);
-
-	const above = Boolean(
-		anchor && panel.top + panel.height > bottomEdge && placement.above,
-	);
-	const aboveHeight = anchor ? Math.max(0, anchor.top - topEdge - gap) : 0;
-	const visibleHeight = above
-		? Math.min(panel.height, aboveHeight)
-		: Math.min(panel.height, availableHeight);
-	const desiredTop = above
-		? (anchor?.top ?? panel.top) - gap - visibleHeight
-		: Math.max(topEdge, Math.min(panel.top, bottomEdge - visibleHeight));
-	const heightRoom = above ? aboveHeight : Math.max(0, bottomEdge - desiredTop);
-
-	return {
-		shiftX:
-			placement.left -
-			panel.left -
-			(origin === "top-right" ? panel.width - placement.width : 0),
-		shiftY: desiredTop - panel.top,
-		maxWidth: Math.max(0, viewport.width - edges.left - edges.right),
-		maxHeight: panel.height > heightRoom ? heightRoom : undefined,
-		above,
-	};
-}

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>
-	);
-}