@passui/react 0.1.46 → 0.2.0

package/src/components/segmented-control/segmented-control.tsx

@@ -1,157 +0,0 @@
-import { motion, useReducedMotion } from "motion/react";
-import { useId, useLayoutEffect, useRef, useState } from "react";
-import { cn } from "../../lib/class-names";
-import { haptic } from "../../lib/haptics";
-import { spring } from "../../motion/transitions";
-import { Picker } from "../picker/picker";
-
-export type SegmentedControlSize = "sm" | "md" | "lg";
-
-const segmentPaddings: Record<SegmentedControlSize, string> = {
-	sm: "p-[2px]",
-	md: "p-[3px]",
-	lg: "p-[4px]",
-};
-const segmentLabelClasses: Record<SegmentedControlSize, string> = {
-	sm: "min-w-[52px] px-2 py-0.5 text-caption2 whitespace-nowrap",
-	md: "min-w-[64px] px-3 py-1 text-footnote whitespace-nowrap",
-	lg: "min-w-[80px] px-4 py-1.5 text-subheadline whitespace-nowrap",
-};
-const segmentRadius: Record<SegmentedControlSize, string> = {
-	sm: "rounded-sm",
-	md: "rounded-md",
-	lg: "rounded-lg",
-};
-const fallbackPickerSizes: Record<SegmentedControlSize, string> = {
-	sm: "rounded-md py-1 text-caption2 font-semibold",
-	md: "rounded-lg py-1.5 text-footnote font-semibold",
-	lg: "rounded-lg py-2 text-subheadline font-semibold",
-};
-
-export interface SegmentedControlProps<T extends string> {
-	/** Value of the selected segment. */
-	value: T;
-	/** The choices, in display order. */
-	options: ReadonlyArray<{ value: T; label: string }>;
-	/** Called with the selected segment's value. */
-	onChange: (value: NoInfer<T>) => void;
-	/** Accessible name for the group and its compact picker. */
-	label: string;
-	/** Custom classes for the control container. */
-	className?: string;
-	/** Segment padding, label text scale and min-width. @default "md" */
-	size?: SegmentedControlSize;
-}
-
-/**
- * Mutually exclusive choices with a sliding selection, as on Apple
- * platforms. When the labels can't all fit the space it is given (a long
- * translation, a narrow pane) it becomes a pop-up button instead of
- * squeezing or spilling its text.
- */
-export function SegmentedControl<T extends string>({
-	value,
-	options,
-	onChange,
-	label,
-	className,
-	size = "md",
-}: SegmentedControlProps<T>) {
-	const id = useId();
-	const reducedMotion = useReducedMotion();
-	const frame = useRef<HTMLDivElement>(null);
-	const measure = useRef<HTMLDivElement>(null);
-	const [fits, setFits] = useState(true);
-
-	useLayoutEffect(() => {
-		const box = frame.current;
-		const natural = measure.current;
-		if (!box || !natural) return;
-		const check = () => setFits(natural.offsetWidth <= box.clientWidth + 0.5);
-		check();
-		const observer = new ResizeObserver(check);
-		observer.observe(box);
-		observer.observe(natural);
-		return () => observer.disconnect();
-	}, []);
-
-	return (
-		<div ref={frame} className={cn("relative w-full min-w-0", className)}>
-			{/* The control at its natural size, to know whether it fits. */}
-			<div
-				ref={measure}
-				aria-hidden="true"
-				className={cn(
-					"pointer-events-none invisible absolute top-0 flex w-max font-semibold",
-					segmentPaddings[size],
-					segmentLabelClasses[size].replace(/min-w-\[[^\]]+\]\s*/, ""),
-				)}
-			>
-				{options.map((option) => (
-					<span key={option.value} className={segmentLabelClasses[size]}>
-						{option.label}
-					</span>
-				))}
-			</div>
-			{fits ? (
-				<fieldset
-					className={cn(
-						"bg-fill flex w-full rounded-lg shadow-[inset_0_1px_2px_rgb(40_30_0/0.06)]",
-						segmentPaddings[size],
-					)}
-				>
-					<legend className="sr-only">{label}</legend>
-					{options.map((option) => {
-						const selected = option.value === value;
-						return (
-							<label
-								key={option.value}
-								className={cn(
-									"has-[:focus-visible]:ring-accent/60 relative isolate flex-1 cursor-pointer text-center whitespace-nowrap transition-colors has-[:focus-visible]:ring-2",
-									segmentLabelClasses[size].replace("whitespace-nowrap", ""),
-									segmentRadius[size],
-									selected
-										? "text-label font-semibold"
-										: "text-label-secondary hover:text-label font-medium",
-								)}
-							>
-								<input
-									type="radio"
-									name={id}
-									value={option.value}
-									checked={selected}
-									onChange={() => {
-										haptic("selection");
-										onChange(option.value);
-									}}
-									className="sr-only"
-								/>
-								{selected && (
-									<motion.span
-										layoutId={`segment-${id}`}
-										className={cn(
-											"bg-elevated absolute inset-0 -z-10 shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.08),0_3px_8px_-2px_rgb(0_0_0/0.10)]",
-											segmentRadius[size],
-										)}
-										transition={reducedMotion ? { duration: 0 } : spring.snappy}
-									/>
-								)}
-								{option.label}
-							</label>
-						);
-					})}
-				</fieldset>
-			) : (
-				<Picker<T>
-					label={label}
-					value={value}
-					options={options}
-					onChange={onChange}
-					searchable={false}
-					className={fallbackPickerSizes[size]}
-					size={size === "sm" ? "sm" : size === "lg" ? "lg" : "md"}
-				/>
-			)}
-		</div>
-	);
-}

package/src/components/sheet/modal-environment.ts

@@ -1,82 +0,0 @@
-import { FLOATING_LAYER, ownsFloatingLayer } from "../../lib/floating-layers";
-
-const surfaces: HTMLElement[] = [];
-const isolated = new Map<HTMLElement, boolean>();
-let overflow = "";
-let overflowPriority = "";
-
-function restoreBackground() {
-	for (const [element, inert] of isolated) element.inert = inert;
-	isolated.clear();
-}
-
-function isolateBackground() {
-	restoreBackground();
-	const surface = surfaces.at(-1);
-	if (!surface) return;
-	const roots = [surface.parentElement ?? surface];
-	for (const layer of document.querySelectorAll<HTMLElement>(
-		`[${FLOATING_LAYER}]`,
-	)) {
-		if (ownsFloatingLayer(surface, layer)) roots.push(layer);
-	}
-	const visit = (parent: HTMLElement) => {
-		for (const child of parent.children) {
-			if (!(child instanceof HTMLElement)) continue;
-			if (roots.includes(child)) continue;
-			if (roots.some((root) => child.contains(root))) {
-				visit(child);
-			} else if (!child.matches("script, style, link")) {
-				isolated.set(child, child.inert);
-				child.inert = true;
-			}
-		}
-	};
-	visit(document.body);
-}
-
-/** Keeps nested sheets and their portaled controls above an inactive background. */
-export function enterModalEnvironment(surface: HTMLElement): () => void {
-	if (!surfaces.length) {
-		overflow = document.body.style.getPropertyValue("overflow");
-		overflowPriority = document.body.style.getPropertyPriority("overflow");
-		document.body.style.setProperty("overflow", "hidden");
-	}
-	surfaces.push(surface);
-	isolateBackground();
-	const preventBackgroundScroll = (event: WheelEvent | TouchEvent) => {
-		if (surfaces.at(-1) !== surface) return;
-		const target = event.target;
-		if (
-			target instanceof Element &&
-			(surface.contains(target) || ownsFloatingLayer(surface, target))
-		)
-			return;
-		event.preventDefault();
-	};
-	document.addEventListener("wheel", preventBackgroundScroll, {
-		passive: false,
-	});
-	document.addEventListener("touchmove", preventBackgroundScroll, {
-		passive: false,
-	});
-	const observer = new MutationObserver(() => {
-		if (surfaces.at(-1) === surface) isolateBackground();
-	});
-	observer.observe(document.body, {
-		childList: true,
-		subtree: true,
-	});
-	return () => {
-		observer.disconnect();
-		document.removeEventListener("wheel", preventBackgroundScroll);
-		document.removeEventListener("touchmove", preventBackgroundScroll);
-		surfaces.splice(surfaces.indexOf(surface), 1);
-		isolateBackground();
-		if (!surfaces.length) {
-			if (overflow)
-				document.body.style.setProperty("overflow", overflow, overflowPriority);
-			else document.body.style.removeProperty("overflow");
-		}
-	};
-}

package/src/components/sheet/sheet-portal.tsx

@@ -1,62 +0,0 @@
-import { type ReactNode, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
-/** Escape transformed page layers while retaining the source's scoped appearance. */
-export function SheetPortal({ children }: { children: ReactNode }) {
-	const source = useRef<HTMLSpanElement>(null);
-	const [host, setHost] = useState<HTMLDivElement | null>(null);
-	useLayoutEffect(() => {
-		const marker = source.current;
-		if (!marker) return;
-		const document = marker.ownerDocument;
-		const layer = document.createElement("div");
-		layer.dataset.passuiOverlay = "";
-		layer.style.display = "contents";
-		const attributes = ["data-theme", "data-accent", "data-os", "dir"];
-		let properties = new Set<string>();
-		const inherit = () => {
-			for (const name of attributes) {
-				const value = marker.closest(`[${name}]`)?.getAttribute(name);
-				if (value === null || value === undefined) layer.removeAttribute(name);
-				else layer.setAttribute(name, value);
-			}
-			const computed = getComputedStyle(marker);
-			const next = new Set<string>();
-			for (const name of computed) {
-				if (!name.startsWith("--")) continue;
-				next.add(name);
-				layer.style.setProperty(name, computed.getPropertyValue(name));
-			}
-			for (const name of properties)
-				if (!next.has(name)) layer.style.removeProperty(name);
-			properties = next;
-			layer.style.colorScheme = computed.colorScheme;
-			layer.style.fontFamily = computed.fontFamily;
-			layer.style.direction = computed.direction;
-		};
-		inherit();
-		document.body.appendChild(layer);
-		setHost(layer);
-		const observer = new MutationObserver(inherit);
-		for (
-			let ancestor = marker.parentElement;
-			ancestor;
-			ancestor = ancestor.parentElement
-		) {
-			observer.observe(ancestor, {
-				attributes: true,
-				attributeFilter: [...attributes, "style", "class"],
-			});
-		}
-		return () => {
-			observer.disconnect();
-			layer.remove();
-		};
-	}, []);
-	return (
-		<>
-			<span ref={source} hidden aria-hidden="true" />
-			{host && createPortal(children, host)}
-		</>
-	);
-}

package/src/components/sheet/sheet.tsx

@@ -1,165 +0,0 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { type ReactNode, useRef } from "react";
-import { useVisualViewport } from "../../hooks/use-visual-viewport";
-import { cn } from "../../lib/class-names";
-import { contentCrossfade, spring, zoomReveal } from "../../motion/transitions";
-import { SheetPortal } from "./sheet-portal";
-import { useSheetFocus } from "./use-sheet-focus";
-
-export type SheetPlacement = "adaptive" | "center";
-export type SheetSize = "sm" | "md" | "lg";
-
-const outerPaddings: Record<SheetSize, string> = {
-	sm: "p-4",
-	md: "p-6",
-	lg: "p-8",
-};
-const panelMaxWidths: Record<SheetSize, string> = {
-	sm: "max-w-sm",
-	md: "max-w-[560px]",
-	lg: "max-w-2xl",
-};
-
-export interface SheetProps {
-	/** Controls whether the sheet is presented. */
-	open: boolean;
-	/** Called on Escape or an outside press. */
-	onClose: () => void;
-	/** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
-	dismissOnOutsidePress?: boolean;
-	/** Read out by screen readers as the sheet's name. */
-	label: string;
-	/** ID of a visible heading to use instead of label for the accessible name. */
-	labelledBy?: string;
-	/** `adaptive` rises from the bottom on phones; `center` always floats. @default "adaptive" */
-	placement?: SheetPlacement;
-	/** Outer padding and panel max-width. @default "md" */
-	size?: SheetSize;
-	className?: string;
-	children: ReactNode;
-}
-
-/**
- * A modal card: rises from the bottom edge on phones and floats in the
- * middle on larger screens. Escape or a tap outside closes it.
- */
-export function Sheet({ open, ...props }: SheetProps) {
-	return (
-		<AnimatePresence>
-			{open && (
-				<SheetPortal>
-					<OpenSheet {...props} />
-				</SheetPortal>
-			)}
-		</AnimatePresence>
-	);
-}
-
-function OpenSheet({
-	onClose,
-	dismissOnOutsidePress = true,
-	label,
-	labelledBy,
-	placement = "adaptive",
-	size = "md",
-	className,
-	children,
-}: Omit<SheetProps, "open">) {
-	const panel = useRef<HTMLDivElement>(null);
-	const reducedMotion = useReducedMotion();
-	const viewport = useVisualViewport();
-	useSheetFocus(panel, onClose);
-
-	return (
-		<div
-			className={cn(
-				"fixed inset-0 z-[65] flex justify-center",
-				placement === "center"
-					? cn("items-center", outerPaddings[size])
-					: cn("items-end sm:items-center", `sm:${outerPaddings[size]}`),
-			)}
-			style={
-				viewport
-					? {
-							top: viewport.top,
-							left: viewport.left,
-							width: viewport.width,
-							height: viewport.height,
-							bottom: "auto",
-							right: "auto",
-						}
-					: undefined
-			}
-		>
-			<motion.div
-				aria-hidden="true"
-				className="absolute inset-0 bg-black/30 backdrop-blur-md"
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1 }}
-				exit={{ opacity: 0 }}
-				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(
-					"glass-menu relative flex w-full flex-col overflow-hidden",
-					"max-h-[92%]",
-					panelMaxWidths[size],
-					placement === "center"
-						? "rounded-sheet"
-						: "rounded-t-sheet sm:rounded-sheet",
-					className,
-				)}
-				style={{
-					transformOrigin:
-						placement === "center" ? "center center" : "bottom center",
-				}}
-				initial={
-					reducedMotion
-						? { opacity: 0 }
-						: placement === "center"
-							? zoomReveal.initial
-							: { y: 40, opacity: 0, scale: 0.96 }
-				}
-				animate={
-					reducedMotion
-						? { opacity: 1 }
-						: placement === "center"
-							? zoomReveal.animate
-							: { y: 0, opacity: 1, scale: 1 }
-				}
-				exit={
-					reducedMotion
-						? { opacity: 0 }
-						: placement === "center"
-							? zoomReveal.exit
-							: { y: 30, opacity: 0, scale: 0.98 }
-				}
-				transition={
-					reducedMotion
-						? { duration: 0 }
-						: placement === "center"
-							? zoomReveal.transition
-							: { ...spring.bouncy, 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>
-	);
-}

package/src/components/sheet/use-sheet-focus.ts

@@ -1,109 +0,0 @@
-import {
-	type RefObject,
-	useEffect,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from "react";
-import { ownsFloatingLayer } from "../../lib/floating-layers";
-import { enterModalEnvironment } from "./modal-environment";
-
-const sheets: HTMLElement[] = [];
-const focusableSelector = [
-	"a[href]",
-	"button",
-	"input:not([type=hidden])",
-	"select",
-	"textarea",
-	"[tabindex]",
-	"[contenteditable=true]",
-].join(",");
-
-function focusableElements(panel: HTMLElement): HTMLElement[] {
-	return Array.from(
-		panel.querySelectorAll<HTMLElement>(focusableSelector),
-	).filter(
-		(element) =>
-			element.tabIndex >= 0 &&
-			!element.matches(":disabled") &&
-			!element.closest("[inert]") &&
-			element.getClientRects().length > 0 &&
-			getComputedStyle(element).visibility !== "hidden",
-	);
-}
-
-/** Keeps keyboard focus in the foremost sheet, including its floating pickers. */
-export function useSheetFocus(
-	panel: RefObject<HTMLDivElement | null>,
-	onClose: () => void,
-) {
-	// Capture before children mount, since a child may use autoFocus.
-	const [opener] = useState(() =>
-		typeof document === "undefined" ? null : document.activeElement,
-	);
-	const close = useRef(onClose);
-	useEffect(() => {
-		close.current = onClose;
-	}, [onClose]);
-
-	useLayoutEffect(() => {
-		const surface = panel.current;
-		if (!surface) return;
-		sheets.push(surface);
-		const foremost = () => sheets.at(-1) === surface;
-		const focusFirst = () => (focusableElements(surface)[0] ?? surface).focus();
-		const inFloatingLayer = (element: Element | null) =>
-			ownsFloatingLayer(surface, element);
-		const belongsToSheet = (element: Element | null) =>
-			surface.contains(element) || inFloatingLayer(element);
-
-		if (!surface.contains(document.activeElement))
-			surface.focus({ preventScroll: true });
-		const leaveModalEnvironment = enterModalEnvironment(surface);
-
-		const onFocus = (event: FocusEvent) => {
-			if (foremost() && !belongsToSheet(event.target as Element | null))
-				focusFirst();
-		};
-		const onKey = (event: KeyboardEvent) => {
-			if (!foremost() || event.defaultPrevented) return;
-			if (event.key === "Escape") {
-				// Floating controls handle their own Escape before the sheet.
-				if (inFloatingLayer(document.activeElement)) return;
-				event.preventDefault();
-				event.stopPropagation();
-				close.current();
-			}
-			if (event.key !== "Tab") return;
-			const controls = focusableElements(surface);
-			const first = controls[0] ?? surface;
-			const last = controls.at(-1) ?? surface;
-			const active = document.activeElement;
-			if (
-				event.shiftKey &&
-				(active === surface || active === first || !surface.contains(active))
-			) {
-				event.preventDefault();
-				last.focus();
-			} else if (
-				!event.shiftKey &&
-				(active === last || !surface.contains(active) || active === surface)
-			) {
-				event.preventDefault();
-				first.focus();
-			}
-		};
-
-		document.addEventListener("focusin", onFocus);
-		window.addEventListener("keydown", onKey);
-		return () => {
-			const wasForemost = foremost();
-			sheets.splice(sheets.indexOf(surface), 1);
-			document.removeEventListener("focusin", onFocus);
-			window.removeEventListener("keydown", onKey);
-			leaveModalEnvironment();
-			if (wasForemost && opener instanceof HTMLElement && opener.isConnected)
-				opener.focus();
-		};
-	}, [panel, opener]);
-}

package/src/components/sidebar/sidebar.tsx

@@ -1,102 +0,0 @@
-import { useId, type ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export interface SidebarSectionProps {
-	/** Visible heading for this group of navigation rows. */
-	title: string;
-	children: ReactNode;
-}
-
-export interface SidebarItemContentProps {
-	icon?: ReactNode;
-	/** Optional trailing count. */
-	count?: number;
-	/** Matches the router link's active state. */
-	active?: boolean;
-	children: ReactNode;
-}
-
-export function SidebarSection({
-	title,
-	children,
-	size = "md",
-}: SidebarSectionProps & { size?: SidebarSize }) {
-	const headingId = useId();
-	return (
-		<section aria-labelledby={headingId} className="flex flex-col gap-0.5">
-			<h2 id={headingId} className={sidebarHeadingSizes[size]}>
-				{title}
-			</h2>
-			{children}
-		</section>
-	);
-}
-
-/** Classes for a sidebar row; apply to the app's router link. */
-export type SidebarDensity = "regular" | "compact";
-export type SidebarSize = "sm" | "md" | "lg";
-
-const sidebarItemSizes: Record<SidebarSize, string> = {
-	sm: "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10",
-	md: "rounded-2xl px-2.5 py-[7px] text-subheadline",
-	lg: "rounded-2xl px-3 py-2.5 text-body [@media(pointer:coarse)]:min-h-13",
-};
-const sidebarHeadingSizes: Record<SidebarSize, string> = {
-	sm: "px-2 pb-1 text-caption2 font-semibold text-label-tertiary",
-	md: "px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary",
-	lg: "px-3 pb-2 text-subheadline font-semibold text-label-tertiary",
-};
-const sidebarCountSizes: Record<SidebarSize, string> = {
-	sm: "text-caption2 tabular-nums",
-	md: "text-footnote tabular-nums",
-	lg: "text-subheadline tabular-nums",
-};
-
-export function sidebarItemClass(
-	active?: boolean,
-	density: SidebarDensity = "regular",
-	size?: SidebarSize,
-): string {
-	const resolved = size ?? (density === "compact" ? "sm" : "md");
-	return cn(
-		"group text-label duration-fast focus-visible:outline-accent-text flex w-full items-center gap-2.5 no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
-		sidebarItemSizes[resolved],
-		active
-			? "bg-fill font-medium"
-			: "text-label-secondary hover:bg-fill/70 hover:text-label font-normal",
-	);
-}
-
-export function SidebarItemContent({
-	icon,
-	count,
-	active,
-	size = "md",
-	children,
-}: SidebarItemContentProps & { size?: SidebarSize }) {
-	return (
-		<>
-			{icon && (
-				<span
-					className={cn(
-						"flex transition-colors",
-						active ? "text-accent-text" : "text-label-secondary",
-					)}
-				>
-					{icon}
-				</span>
-			)}
-			<span className="grow truncate">{children}</span>
-			{count !== undefined && (
-				<span
-					className={cn(
-						sidebarCountSizes[size],
-						active ? "text-accent-text" : "text-label-tertiary",
-					)}
-				>
-					{count}
-				</span>
-			)}
-		</>
-	);
-}