@passui/react 0.1.47 → 0.2.0

package/src/components/one-time-code/one-time-code.tsx

@@ -1,234 +0,0 @@
-import {
-	type CSSProperties,
-	type InputHTMLAttributes,
-	type Ref,
-	useEffect,
-	useId,
-	useRef,
-} from "react";
-import { CheckIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-
-export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error";
-export type OneTimeCodeFormat = "numeric" | "alphanumeric";
-export type OneTimeCodeSize = "sm" | "md" | "lg";
-
-const checkSizes: Record<OneTimeCodeSize, number> = {
-	sm: 20,
-	md: 24,
-	lg: 28,
-};
-const statusText: Record<OneTimeCodeSize, string> = {
-	sm: "mt-1.5 text-caption2",
-	md: "mt-2 text-footnote",
-	lg: "mt-2.5 text-subheadline",
-};
-export interface OneTimeCodeProps
-	extends Omit<
-		InputHTMLAttributes<HTMLInputElement>,
-		"value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size"
-	> {
-	label: string;
-	value: string;
-	onChange: (value: string) => void;
-	/** Called when a complete code is entered, including paste and autofill. */
-	onComplete?: (value: string) => void;
-	/** Number of characters, 3–8. @default 6 */
-	length?: number;
-	/** Accepted characters. Alphanumeric codes use uppercase ASCII letters and digits. @default "numeric" */
-	format?: OneTimeCodeFormat;
-	/** Ref to the single native input, for focus and selection. */
-	ref?: Ref<HTMLInputElement>;
-	status?: OneTimeCodeStatus;
-	/** Localized verification feedback announced without reading decorative cells. */
-	statusLabel?: string;
-	/** Cell height, digit text scale and check icon size. @default "md" */
-	size?: OneTimeCodeSize;
-}
-
-/** Normalize common numeric keyboards and optional ASCII letters in one native field. */
-export function normalizeCode(
-	value: string,
-	length: number,
-	format: OneTimeCodeFormat = "numeric",
-) {
-	return Array.from(value, (digit) => {
-		const point = digit.codePointAt(0) ?? 0;
-		for (const base of [0x30, 0x660, 0x6f0, 0xff10]) {
-			if (point >= base && point < base + 10) return String(point - base);
-		}
-		return format === "alphanumeric" && /^[a-z]$/i.test(digit)
-			? digit.toUpperCase()
-			: "";
-	})
-		.join("")
-		.slice(0, length);
-}
-
-/** Six cells, one field: paste, autofill, selection and Backspace stay native. */
-export function OneTimeCode({
-	label,
-	value,
-	onChange,
-	onComplete,
-	length = 6,
-	format = "numeric",
-	ref,
-	status = "idle",
-	statusLabel,
-	size = "md",
-	className,
-	disabled,
-	id: suppliedId,
-	...props
-}: OneTimeCodeProps) {
-	const generated = useId();
-	const id = suppliedId ?? generated;
-	const filter = `otp-goo-${generated.replace(/:/g, "")}`;
-	const input = useRef<HTMLInputElement>(null);
-	const count = Number.isFinite(length)
-		? Math.max(3, Math.min(8, Math.round(length)))
-		: 6;
-	const code = normalizeCode(value, count, format);
-	const locked =
-		disabled ||
-		props.readOnly ||
-		status === "verifying" ||
-		status === "success";
-	useEffect(() => {
-		if (status === "error") input.current?.select();
-	}, [status]);
-	const update = (next: string) => {
-		if (locked) return;
-		const normalized = normalizeCode(next, count, format);
-		onChange(normalized);
-		if (normalized.length === count && normalized !== code)
-			onComplete?.(normalized);
-	};
-	return (
-		<div
-			className={cn("passui-one-time-code not-typeset", className)}
-			data-status={status}
-			data-size={size}
-			style={
-				{
-					"--otp-length": count,
-					"--otp-middle": (count - 1) / 2,
-				} as CSSProperties
-			}
-		>
-			<svg aria-hidden="true" width="0" height="0" className="absolute">
-				<defs>
-					<filter
-						id={filter}
-						x="-20%"
-						y="-50%"
-						width="140%"
-						height="200%"
-						colorInterpolationFilters="sRGB"
-					>
-						<feGaussianBlur stdDeviation="3" result="smear" />
-						<feColorMatrix
-							in="smear"
-							type="matrix"
-							values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -10"
-						/>
-					</filter>
-				</defs>
-			</svg>
-			<div className="passui-otp-row" dir="ltr">
-				{/* A right code fuses: cells converge on one point while a capsule
-                grows there. The filter joins the material, never the digits. */}
-				<div
-					aria-hidden="true"
-					className="passui-otp-materials"
-					style={{ filter: `url(#${filter})` }}
-				>
-					{Array.from({ length: count }, (_, index) => (
-						<span
-							key={index}
-							className="passui-otp-cell"
-							style={{ "--otp-index": index } as CSSProperties}
-						/>
-					))}
-					<span className="passui-otp-capsule" />
-				</div>
-				<div aria-hidden="true" className="passui-otp-digits">
-					{Array.from({ length: count }, (_, index) => (
-						<span
-							key={index}
-							className="passui-otp-digit"
-							data-active={
-								index === Math.min(code.length, count - 1) || undefined
-							}
-							style={{ "--otp-index": index } as CSSProperties}
-						>
-							{code[index] && (
-								<span key={code[index] ?? index} className="passui-otp-glyph">
-									{code[index]}
-								</span>
-							)}
-						</span>
-					))}
-				</div>
-				<CheckIcon
-					aria-hidden="true"
-					className="passui-otp-check"
-					size={checkSizes[size]}
-				/>
-				<input
-					{...props}
-					ref={(node) => {
-						input.current = node;
-						if (typeof ref === "function") return ref(node);
-						if (ref) ref.current = node;
-					}}
-					id={id}
-					type="text"
-					inputMode={format === "numeric" ? "numeric" : "text"}
-					autoComplete={props.autoComplete ?? "one-time-code"}
-					autoCapitalize={format === "alphanumeric" ? "characters" : "off"}
-					spellCheck={false}
-					pattern={format === "numeric" ? "[0-9]*" : "[A-Za-z0-9]*"}
-					maxLength={count}
-					minLength={count}
-					aria-label={label}
-					value={code}
-					disabled={disabled}
-					readOnly={locked}
-					aria-busy={status === "verifying" || undefined}
-					aria-invalid={status === "error" || props["aria-invalid"]}
-					aria-describedby={
-						[props["aria-describedby"], statusLabel && `${id}-status`]
-							.filter(Boolean)
-							.join(" ") || undefined
-					}
-					onChange={(event) => update(event.target.value)}
-					onPaste={(event) => {
-						props.onPaste?.(event);
-						if (event.defaultPrevented || locked) return;
-						const pasted = event.clipboardData.getData("text");
-						const normalized = normalizeCode(pasted, count, format);
-						if (normalized && normalized !== pasted) {
-							event.preventDefault();
-							update(normalized);
-						}
-					}}
-					className="passui-otp-input"
-				/>
-			</div>
-			{statusLabel && (
-				<p
-					id={`${id}-status`}
-					role="status"
-					className={cn(
-						statusText[size],
-						status === "error" ? "text-danger" : "text-label-secondary",
-					)}
-				>
-					{statusLabel}
-				</p>
-			)}
-		</div>
-	);
-}

package/src/components/picker/picker-trigger.ts

@@ -1,22 +0,0 @@
-import { cn } from "../../lib/class-names";
-
-export type PickerSize = "sm" | "md" | "lg";
-
-const triggerSizes: Record<PickerSize, string> = {
-	sm: "px-2.5 py-1.5 text-caption rounded-lg",
-	md: "px-3 py-2 text-subheadline rounded-lg",
-	lg: "px-4 py-3 text-body rounded-xl",
-};
-
-/** Shared field treatment for the popup-based Picker, date and time controls. */
-export function pickerTriggerStyle(
-	className?: string,
-	size: PickerSize = "md",
-) {
-	return cn(
-		"control-field text-label flex w-full min-w-0 items-center gap-2 text-start",
-		"disabled:cursor-not-allowed disabled:opacity-40",
-		triggerSizes[size],
-		className,
-	);
-}

package/src/components/picker/picker.tsx

@@ -1,404 +0,0 @@
-import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure";
-import {
-	type KeyboardEvent,
-	useCallback,
-	useEffect,
-	useId,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { createPortal } from "react-dom";
-import { CheckIcon, SearchIcon, SelectorIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { haptic } from "../../lib/haptics";
-import { AnchoredSurface } from "../popover/anchored-surface";
-import { pickerTriggerStyle, type PickerSize } from "./picker-trigger";
-
-export interface PickerOption<T extends string> {
-	value: T;
-	label: string;
-	/** A quieter second line or trailing note, such as "Free" or a region. */
-	disabled?: boolean;
-	keywords?: string[];
-	detail?: string;
-	/** The option's own language, so it is spoken and shaped right. */
-	lang?: string;
-}
-
-/** Values and callbacks share the option value type, including literal unions. */
-export interface PickerProps<T extends string> {
-	/** The selected option's value. */
-	value: T;
-	/** Available choices. Use a literal union for a fixed set of values. */
-	options: ReadonlyArray<PickerOption<T>>;
-	/** Called with the selected option value. */
-	onChange: (value: NoInfer<T>) => void;
-	/** Accessible name for the trigger. */
-	label: string;
-	/** Shown when the selected value has no matching option. */
-	placeholder?: string;
-	/** Defaults to on for lists of ten or more options. */
-	searchable?: boolean;
-	/** Label for the filter field. @default "Search" */
-	searchPlaceholder?: string;
-	/** Shown when the filter matches nothing. @default "No matches" */
-	emptyLabel?: string;
-	/** Offers a new value when no option has the same label or value. */
-	onCreate?: (query: string) => void;
-	/** Localized creation action; receives the trimmed query. */
-	createLabel?: (query: string) => string;
-	className?: string;
-	/** Prevents opening or choosing an option. @default false */
-	disabled?: boolean;
-	/** Trigger height and text scale. @default "md" */
-	size?: PickerSize;
-}
-
-/** Long lists get a filter field, as in the system pickers. */
-const SEARCH_FROM = 10;
-
-/**
- * A pop-up button: shows the chosen value and opens a list that floats
- * above everything, flips upward near the bottom edge and filters long
- * lists. Replaces the browser's own select, which looks foreign on every
- * platform.
- */
-export function Picker<T extends string>({
-	value,
-	options,
-	onChange,
-	label,
-	placeholder,
-	searchable,
-	searchPlaceholder = "Search",
-	emptyLabel = "No matches",
-	className,
-	onCreate,
-	createLabel,
-	disabled = false,
-	size = "md",
-}: PickerProps<T>) {
-	const panel = useAnchoredDisclosure(disabled);
-	const { open } = panel;
-	const trigger = useRef<HTMLButtonElement>(null);
-	const listId = useId();
-	const selected = options.find((option) => option.value === value);
-
-	const close = useCallback(
-		(refocus: boolean) => {
-			panel.close();
-			if (refocus) trigger.current?.focus({ preventScroll: true });
-		},
-		[panel.close],
-	);
-
-	const onTriggerKey = (event: KeyboardEvent<HTMLButtonElement>) => {
-		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-			event.preventDefault();
-			panel.show();
-		}
-	};
-
-	return (
-		<>
-			<button
-				ref={trigger}
-				type="button"
-				role="combobox"
-				aria-label={label}
-				aria-haspopup="listbox"
-				aria-expanded={open && !disabled}
-				aria-controls={open && !disabled ? listId : undefined}
-				disabled={disabled}
-				onClick={() => panel.toggle()}
-				onKeyDown={onTriggerKey}
-				className={pickerTriggerStyle(className, size)}
-			>
-				<span
-					lang={selected?.lang}
-					className={cn(
-						"min-w-0 grow truncate",
-						!selected && "text-label-tertiary",
-					)}
-				>
-					{selected?.label ?? placeholder ?? ""}
-				</span>
-				<SelectorIcon
-					size={15}
-					strokeWidth={2}
-					className="text-label-tertiary shrink-0"
-				/>
-			</button>
-			{typeof document !== "undefined" &&
-				createPortal(
-					panel.mounted && trigger.current ? (
-						<SelectList
-							open={open}
-							onExited={panel.onExited}
-							id={listId}
-							anchor={trigger.current}
-							options={options}
-							value={value}
-							label={label}
-							searchable={
-								searchable ??
-								(Boolean(onCreate) || options.length >= SEARCH_FROM)
-							}
-							searchPlaceholder={searchPlaceholder}
-							emptyLabel={emptyLabel}
-							onCreate={onCreate}
-							createLabel={createLabel}
-							onPick={(next) => {
-								close(true);
-								if (next === value) return;
-								haptic("selection");
-								onChange(next);
-							}}
-							onClose={close}
-						/>
-					) : null,
-					document.body,
-				)}
-		</>
-	);
-}
-
-function SelectList<T extends string>({
-	open,
-	onExited,
-	id,
-	anchor,
-	options,
-	value,
-	label,
-	searchable,
-	searchPlaceholder,
-	emptyLabel,
-	onPick,
-	onClose,
-	onCreate,
-	createLabel,
-}: {
-	open: boolean;
-	onExited: () => void;
-	id: string;
-	anchor: HTMLElement;
-	options: ReadonlyArray<PickerOption<T>>;
-	value: T;
-	label: string;
-	searchable: boolean;
-	searchPlaceholder: string;
-	emptyLabel: string;
-	onCreate?: (query: string) => void;
-	createLabel?: (query: string) => string;
-	onPick: (value: T) => void;
-	onClose: (refocus: boolean) => void;
-}) {
-	const list = useRef<HTMLDivElement>(null);
-	const search = useRef<HTMLInputElement>(null);
-	const [query, setQuery] = useState("");
-	const typed = useRef({ text: "", at: 0 });
-
-	const shown = useMemo(() => {
-		const needle = query.trim().toLocaleLowerCase();
-		if (!needle) return options;
-		return options.filter((option) =>
-			`${option.label} ${option.detail ?? ""} ${option.value} ${(option.keywords ?? []).join(" ")}`
-				.toLocaleLowerCase()
-				.includes(needle),
-		);
-	}, [options, query]);
-
-	const enabled = shown.filter((option) => !option.disabled);
-	const trimmed = query.trim();
-	const canCreate = Boolean(
-		onCreate &&
-			trimmed &&
-			!options.some(
-				(option) =>
-					option.label.toLocaleLowerCase() === trimmed.toLocaleLowerCase() ||
-					option.value.toLocaleLowerCase() === trimmed.toLocaleLowerCase(),
-			),
-	);
-	const create = () => {
-		if (!canCreate) return;
-		onClose(true);
-		onCreate?.(trimmed);
-	};
-	const [active, setActive] = useState(() =>
-		Math.max(
-			0,
-			options
-				.filter((option) => !option.disabled)
-				.findIndex((option) => option.value === value),
-		),
-	);
-	const last = enabled.length + (canCreate ? 1 : 0) - 1;
-	const activeOption = enabled[Math.min(active, last)];
-	const activeId = activeOption
-		? `${id}-${activeOption.value}`
-		: canCreate
-			? `${id}-create`
-			: undefined;
-
-	useEffect(() => {
-		if (searchable) search.current?.focus();
-		else list.current?.focus();
-	}, [searchable]);
-
-	// The chosen option starts in view, then follows the keyboard.
-	useEffect(() => {
-		if (!activeOption) return;
-		list.current
-			?.querySelector(`[data-value="${CSS.escape(activeOption.value)}"]`)
-			?.scrollIntoView({ block: "nearest" });
-	}, [activeOption]);
-
-	const onKeyDown = (event: KeyboardEvent) => {
-		const step = (to: number) => {
-			event.preventDefault();
-			setActive(Math.max(0, Math.min(last, to)));
-		};
-		const current = Math.min(active, last);
-		if (event.key === "ArrowDown") step(current + 1);
-		else if (event.key === "ArrowUp") step(current - 1);
-		else if (event.key === "Home" && !searchable) step(0);
-		else if (event.key === "End" && !searchable) step(last);
-		else if (event.key === "PageDown") step(current + 8);
-		else if (event.key === "PageUp") step(current - 8);
-		else if (event.key === "Enter" || (event.key === " " && !searchable)) {
-			event.preventDefault();
-			if (activeOption) onPick(activeOption.value);
-			else if (canCreate) create();
-		} else if (event.key === "Escape") {
-			event.preventDefault();
-			event.stopPropagation();
-			onClose(true);
-		} else if (event.key === "Tab") {
-			onClose(false);
-		} else if (
-			!searchable &&
-			event.key.length === 1 &&
-			!event.metaKey &&
-			!event.ctrlKey
-		) {
-			// Type to jump, as in a native pop-up button.
-			const now = Date.now();
-			const text =
-				(now - typed.current.at < 700 ? typed.current.text : "") + event.key;
-			typed.current = { text, at: now };
-			const match = enabled.findIndex((option) =>
-				option.label.toLocaleLowerCase().startsWith(text.toLocaleLowerCase()),
-			);
-			if (match >= 0) setActive(match);
-		}
-	};
-
-	return (
-		<AnchoredSurface
-			open={open}
-			onExited={onExited}
-			anchor={anchor}
-			width={Math.min(Math.max(anchor.getBoundingClientRect().width, 220), 360)}
-			needed={240}
-			onClose={onClose}
-			onKeyDown={onKeyDown}
-			contentClassName="overflow-hidden"
-		>
-			{searchable && (
-				<div className="border-separator/70 flex shrink-0 items-center gap-2 border-b px-3 py-2">
-					<SearchIcon size={15} className="text-label-tertiary shrink-0" />
-					<input
-						ref={search}
-						value={query}
-						placeholder={searchPlaceholder}
-						aria-label={searchPlaceholder}
-						aria-controls={id}
-						aria-activedescendant={activeId}
-						onChange={(event) => {
-							setQuery(event.target.value);
-							setActive(0);
-						}}
-						className="text-subheadline text-label placeholder:text-label-tertiary min-w-0 grow bg-transparent outline-none"
-					/>
-				</div>
-			)}
-			<div
-				ref={list}
-				id={id}
-				role="listbox"
-				aria-label={label}
-				tabIndex={-1}
-				aria-activedescendant={activeId}
-				className="no-scrollbar flex min-h-0 flex-col overflow-y-auto overscroll-contain p-1.5 outline-none"
-			>
-				{shown.map((option) => {
-					const chosen = option.value === value;
-					const focused = option === activeOption;
-					return (
-						// biome-ignore lint/a11y/useKeyWithClickEvents: option div handles keyboard via role=option and aria-selected
-						<div
-							key={option.value}
-							id={`${id}-${option.value}`}
-							data-value={option.value}
-							role="option"
-							tabIndex={-1}
-							aria-selected={chosen}
-							aria-disabled={option.disabled || undefined}
-							lang={option.lang}
-							onPointerMove={() =>
-								!option.disabled && setActive(enabled.indexOf(option))
-							}
-							onClick={() => !option.disabled && onPick(option.value)}
-							className={cn(
-								"text-subheadline flex min-h-8 cursor-default items-center gap-2 rounded-lg px-2 py-1.5 [@media(pointer:coarse)]:min-h-11",
-								focused ? "bg-fill" : "",
-								option.disabled && "opacity-40",
-								chosen ? "text-label font-semibold" : "text-label",
-							)}
-						>
-							<span className="flex w-4 shrink-0 justify-center">
-								{chosen && (
-									<CheckIcon
-										size={15}
-										strokeWidth={2.4}
-										className="text-accent-text"
-									/>
-								)}
-							</span>
-							<span className="min-w-0 grow break-words">{option.label}</span>
-							{option.detail && (
-								<span className="text-caption text-label-tertiary shrink-0 font-normal">
-									{option.detail}
-								</span>
-							)}
-						</div>
-					);
-				})}
-				{canCreate && (
-					// biome-ignore lint/a11y/useKeyWithClickEvents: create div handles keyboard via role=option
-					<div
-						id={`${id}-create`}
-						role="option"
-						aria-selected={false}
-						tabIndex={-1}
-						onPointerMove={() => setActive(enabled.length)}
-						onClick={create}
-						className={cn(
-							"text-subheadline text-accent-text flex min-h-9 cursor-default items-center rounded-lg px-2 py-1.5",
-							!activeOption && "bg-fill",
-						)}
-					>
-						{createLabel?.(trimmed) ?? trimmed}
-					</div>
-				)}
-				{shown.length === 0 && !canCreate && (
-					<p className="text-footnote text-label-tertiary px-3 py-2">
-						{emptyLabel}
-					</p>
-				)}
-			</div>
-		</AnchoredSurface>
-	);
-}