@passui/react 0.1.46 → 0.2.0

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

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

@@ -1,66 +0,0 @@
-import { forwardRef, type InputHTMLAttributes } from "react";
-import { SearchIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { ExpandingSearchField } from "./expanding-search-field";
-
-export type SearchFieldSize = "sm" | "md" | "lg";
-
-const pillSizes: Record<SearchFieldSize, string> = {
-	sm: "control-field flex items-center gap-1.5 rounded-full px-2.5 py-1 text-caption text-label-tertiary",
-	md: "control-field flex items-center gap-2 rounded-full px-3 py-2 text-subheadline text-label-tertiary",
-	lg: "control-field flex items-center gap-2.5 rounded-full px-4 py-2.5 text-body text-label-tertiary",
-};
-const iconSizes: Record<SearchFieldSize, number> = {
-	sm: 13,
-	md: 15,
-	lg: 17,
-};
-
-export interface SearchFieldProps
-	extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
-	/** Expand a single pill from its search icon on focus. @default false */
-	collapsible?: boolean;
-	/** Pill height, icon size and text scale (non-collapsible variant). @default "md" */
-	size?: SearchFieldSize;
-}
-
-export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
-	function SearchField(
-		{
-			className,
-			placeholder = "Search",
-			collapsible = false,
-			size = "md",
-			...props
-		},
-		ref,
-	) {
-		if (collapsible)
-			return (
-				<ExpandingSearchField
-					{...props}
-					inputRef={ref}
-					className={className}
-					placeholder={placeholder}
-				/>
-			);
-		const accessibleName = props["aria-labelledby"]
-			? undefined
-			: (props["aria-label"] ?? placeholder);
-		return (
-			<label className={cn(pillSizes[size], className)}>
-				<span aria-hidden="true" className="shrink-0">
-					<SearchIcon size={iconSizes[size]} strokeWidth={2} />
-				</span>
-				<input
-					ref={ref}
-					type="search"
-					placeholder={placeholder}
-					aria-label={accessibleName}
-					className="text-label placeholder:text-label-tertiary min-w-0 grow bg-transparent outline-none"
-					{...props}
-				/>
-			</label>
-		);
-	},
-);

package/src/components/search-list/search-list.tsx

@@ -1,276 +0,0 @@
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useId,
-	useRef,
-	useState,
-	useEffect,
-	type ComponentProps,
-} from "react";
-import { cn } from "../../lib/class-names";
-
-export type SearchListSize = "sm" | "md" | "lg";
-
-const fieldSizes: Record<SearchListSize, string> = {
-	sm: "min-h-8 w-full rounded-full border border-separator bg-fill/60 px-3 text-caption text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
-	md: "min-h-11 w-full rounded-full border border-separator bg-fill/60 px-4 text-subheadline text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
-	lg: "min-h-13 w-full rounded-full border border-separator bg-fill/60 px-5 text-body text-label outline-none focus-visible:ring-2 focus-visible:ring-accent-text/50",
-};
-const headingSizes: Record<SearchListSize, string> = {
-	sm: "px-1.5 py-1.5 text-caption2 font-medium text-label-tertiary",
-	md: "px-2 py-2 text-caption font-medium text-label-tertiary",
-	lg: "px-2.5 py-2.5 text-subheadline font-medium text-label-tertiary",
-};
-const itemSizes: Record<SearchListSize, string> = {
-	sm: "flex min-h-8 w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-footnote text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-10",
-	md: "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-subheadline text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-11",
-	lg: "flex min-h-11 w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-body text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-13",
-};
-
-type SearchState = {
-	query: string;
-	setQuery: (query: string) => void;
-	active: string;
-	listId: string;
-	open: boolean;
-	visible: number;
-	register: (id: string, visible: boolean | null) => void;
-	size: SearchListSize;
-};
-const SearchContext = createContext<SearchState | null>(null);
-function useSearch() {
-	const search = useContext(SearchContext);
-	if (!search) throw new Error("Search list controls need a SearchList parent");
-	return search;
-}
-
-export function SearchList({
-	loop = true,
-	open = true,
-	size = "md",
-	onKeyDown,
-	className,
-	...props
-}: ComponentProps<"div"> & {
-	loop?: boolean;
-	open?: boolean;
-	/** Field, item and heading density. @default "md" */
-	size?: SearchListSize;
-}) {
-	const [query, setQuery] = useState("");
-	const updateQuery = useCallback((next: string) => {
-		setQuery(next);
-		setActive("");
-	}, []);
-	const [active, setActive] = useState("");
-	const [results, setResults] = useState<Record<string, boolean>>({});
-	const listId = useId();
-	const ref = useRef<HTMLDivElement>(null);
-	const register = useCallback(
-		(id: string, visible: boolean | null) =>
-			setResults((previous) => {
-				if (visible === null) {
-					const next = { ...previous };
-					delete next[id];
-					return next;
-				}
-				if (previous[id] === visible) return previous;
-				return { ...previous, [id]: visible };
-			}),
-		[],
-	);
-	useEffect(() => {
-		if (!open) return;
-		const available = Object.keys(results).filter((id) => results[id]);
-		if (!available.includes(active)) setActive(available[0] ?? "");
-	}, [open, results, active]);
-	return (
-		<SearchContext
-			value={{
-				query,
-				setQuery: updateQuery,
-				active,
-				listId,
-				open,
-				visible: Object.values(results).filter(Boolean).length,
-				register,
-				size,
-			}}
-		>
-			<div
-				{...props}
-				ref={ref}
-				role="presentation"
-				className={cn("relative", className)}
-				onKeyDown={(event) => {
-					onKeyDown?.(event);
-					if (event.defaultPrevented || !open || event.nativeEvent.isComposing)
-						return;
-					const items = Array.from(
-						ref.current?.querySelectorAll<HTMLButtonElement>(
-							"[data-search-result]:not([hidden]):not(:disabled)",
-						) ?? [],
-					);
-					if (!items.length || event.altKey || event.ctrlKey || event.metaKey)
-						return;
-					const index = items.findIndex((item) => item.id === active);
-					if (event.key === "Enter") {
-						if (
-							event.target instanceof HTMLElement &&
-							event.target.closest("button, a")
-						)
-							return;
-						event.preventDefault();
-						(items[index] ?? items[0])?.click();
-						return;
-					}
-					if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
-					event.preventDefault();
-					const delta = event.key === "ArrowDown" ? 1 : -1;
-					const next =
-						index < 0
-							? delta === 1
-								? 0
-								: items.length - 1
-							: loop
-								? (index + delta + items.length) % items.length
-								: Math.max(0, Math.min(items.length - 1, index + delta));
-					const item = items[next];
-					if (!item) return;
-					setActive(item.id);
-					item.scrollIntoView({
-						block: "nearest",
-					});
-				}}
-			/>
-		</SearchContext>
-	);
-}
-export function SearchListField({
-	value,
-	onValueChange,
-	className,
-	...props
-}: Omit<ComponentProps<"input">, "value" | "onChange"> & {
-	value?: string;
-	onValueChange?: (value: string) => void;
-}) {
-	const search = useSearch();
-	useEffect(() => {
-		if (value !== undefined) search.setQuery(value);
-	}, [value, search.setQuery]);
-	return (
-		<input
-			{...props}
-			role="combobox"
-			aria-autocomplete="list"
-			aria-expanded={search.open}
-			aria-controls={search.open ? search.listId : undefined}
-			aria-activedescendant={
-				search.open && search.active ? search.active : undefined
-			}
-			aria-label={props["aria-label"] ?? props.placeholder}
-			value={value ?? search.query}
-			onChange={(event) => {
-				search.setQuery(event.target.value);
-				onValueChange?.(event.target.value);
-			}}
-			className={cn(fieldSizes[search.size], className)}
-		/>
-	);
-}
-export function SearchListResults({
-	className,
-	...props
-}: ComponentProps<"div">) {
-	const search = useSearch();
-	return (
-		<div
-			{...props}
-			id={search.listId}
-			role="listbox"
-			hidden={!search.open}
-			className={cn("overflow-y-auto p-1", className)}
-		/>
-	);
-}
-export function SearchListEmpty(props: ComponentProps<"div">) {
-	const search = useSearch();
-	return search.visible ? null : <div {...props} role="status" />;
-}
-export function SearchListGroup({
-	heading,
-	children,
-	className,
-	...props
-}: ComponentProps<"div"> & {
-	heading?: React.ReactNode;
-}) {
-	const search = useSearch();
-	const id = useId();
-	return (
-		<div
-			{...props}
-			role="group"
-			className={cn(
-				"not-has-[[data-search-result]:not([hidden])]:hidden",
-				className,
-			)}
-			aria-labelledby={heading ? id : undefined}
-		>
-			{heading && (
-				<div id={id} className={headingSizes[search.size]}>
-					{heading}
-				</div>
-			)}
-			{children}
-		</div>
-	);
-}
-export function SearchListItem({
-	value,
-	keywords = [],
-	onSelect,
-	className,
-	...props
-}: Omit<ComponentProps<"button">, "value" | "onSelect"> & {
-	value: string;
-	keywords?: string[];
-	onSelect?: (value: string) => void;
-}) {
-	const search = useSearch();
-	const id = useId();
-	const haystack = [value, ...keywords].join(" ").toLocaleLowerCase();
-	const visible = search.query
-		.toLocaleLowerCase()
-		.trim()
-		.split(/\s+/)
-		.every((word) => haystack.includes(word));
-	useEffect(() => {
-		search.register(id, visible && !props.disabled);
-		return () => search.register(id, null);
-	}, [id, visible, props.disabled, search.register]);
-	return (
-		<button
-			{...props}
-			type="button"
-			id={id}
-			role="option"
-			tabIndex={-1}
-			hidden={!visible}
-			data-search-result=""
-			aria-selected={search.active === id}
-			data-selected={search.active === id ? "true" : undefined}
-			className={cn(itemSizes[search.size], className)}
-			onMouseDown={(event) => {
-				props.onMouseDown?.(event);
-				if (!event.defaultPrevented) event.preventDefault();
-			}}
-			onClick={(event) => {
-				props.onClick?.(event);
-				if (!event.defaultPrevented) onSelect?.(value);
-			}}
-		/>
-	);
-}

package/src/components/section/section.tsx

@@ -1,75 +0,0 @@
-import { useId, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export type SectionSize = "sm" | "md" | "lg";
-
-const titleSizes: Record<SectionSize, string> = {
-	sm: "px-3 text-caption",
-	md: "px-4 text-footnote",
-	lg: "px-5 text-subheadline",
-};
-
-const footerSizes: Record<SectionSize, string> = {
-	sm: "px-3",
-	md: "px-4",
-	lg: "px-5",
-};
-
-export interface SectionProps extends HTMLAttributes<HTMLElement> {
-	/** Optional group heading and accessible name. */
-	title?: string;
-	/** Supporting text below the grouped rows. */
-	footer?: ReactNode;
-	/** Rows, typically LabeledContent. */
-	children?: ReactNode;
-	/** Title and footer text scale + padding. @default "md" */
-	size?: SectionSize;
-}
-
-/**
- * A titled, inset group of rows with an optional footer, as in iOS Settings
- * and SwiftUI's grouped `List` with `Section(header:footer:)`. Rows are
- * usually `LabeledContent`; dividers between them come for free.
- */
-export function Section({
-	title,
-	footer,
-	children,
-	className,
-	size = "md",
-	...props
-}: SectionProps) {
-	const headingId = useId();
-	return (
-		<section
-			aria-labelledby={title ? headingId : undefined}
-			className={cn("flex flex-col gap-2", className)}
-			{...props}
-		>
-			{title && (
-				<h2
-					id={headingId}
-					className={cn(titleSizes[size], "text-label-tertiary font-medium")}
-				>
-					{title}
-				</h2>
-			)}
-			{/* A group can be only a note, e.g. where to find something on this device. */}
-			{children ? (
-				<div className="divide-separator/60 border-separator/60 bg-elevated flex flex-col divide-y overflow-hidden rounded-3xl border">
-					{children}
-				</div>
-			) : null}
-			{footer && (
-				<div
-					className={cn(
-						footerSizes[size],
-						"text-caption text-label-tertiary leading-snug",
-					)}
-				>
-					{footer}
-				</div>
-			)}
-		</section>
-	);
-}

package/src/components/secure-field/secure-field.tsx

@@ -1,8 +0,0 @@
-import { TextField, type TextFieldProps } from "../text-field/text-field";
-
-/** TextField's native input props, with the password type managed by SecureField. */
-export type SecureFieldProps = Omit<TextFieldProps, "type">;
-
-export function SecureField(props: SecureFieldProps) {
-	return <TextField {...props} type="password" />;
-}