@passui/react 0.1.47 → 0.2.0

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" />;
-}

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