@passui/react 0.1.46 → 0.2.0

package/src/components/stepper/rolling-digit.tsx

@@ -1,91 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useMediaQuery } from "../../hooks/use-media-query";
-
-/** Counts at a place retain carries: the tens column of 1284 targets 128. */
-export function digitAt(count: number) {
-	return ((Math.floor(count) % 10) + 10) % 10;
-}
-
-export function advanceDigit(
-	position: number,
-	velocity: number,
-	target: number,
-	frames: number,
-) {
-	const nextVelocity =
-		(velocity + (target - position) * 0.16 * frames) * 0.7 ** frames;
-	return { position: position + nextVelocity * frames, velocity: nextVelocity };
-}
-
-/** Three recycled cells keep the strip continuous through either side of zero. */
-export function RollingDigit({
-	count,
-	place,
-}: {
-	count: number;
-	place: number;
-}) {
-	const strip = useRef<HTMLSpanElement>(null);
-	const state = useRef({ position: count, velocity: 0 });
-	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
-	useEffect(() => {
-		let frame = 0;
-		let previous = 0;
-		let due = 0;
-		const paint = (position: number, velocity: number) => {
-			const node = strip.current;
-			if (!node) return;
-			const base = Math.floor(position);
-			for (let index = 0; index < node.children.length; index++) {
-				(node.children[index] as HTMLElement).textContent = String(
-					digitAt(base + index - 1),
-				);
-			}
-			node.style.transform = `translateY(${(-(position - base + 1) * 100) / 3}%)`;
-			node.style.filter = `blur(${Math.min(2, Math.abs(velocity) * 1.4)}px)`;
-		};
-		if (reduced) {
-			state.current = { position: count, velocity: 0 };
-			paint(count, 0);
-			return;
-		}
-		const tick = (now: number) => {
-			if (!due) due = now + place * 28;
-			const frames = previous ? Math.min((now - previous) / (1000 / 60), 2) : 1;
-			previous = now;
-			if (now >= due) {
-				state.current = advanceDigit(
-					state.current.position,
-					state.current.velocity,
-					count,
-					frames,
-				);
-				if (
-					Math.abs(count - state.current.position) < 0.002 &&
-					Math.abs(state.current.velocity) < 0.002
-				) {
-					state.current = { position: count, velocity: 0 };
-					paint(count, 0);
-					return;
-				}
-				paint(state.current.position, state.current.velocity);
-			}
-			frame = requestAnimationFrame(tick);
-		};
-		frame = requestAnimationFrame(tick);
-		return () => cancelAnimationFrame(frame);
-	}, [count, place, reduced]);
-	return (
-		<span className="relative inline-block h-[1.5em] w-[1ch] overflow-hidden align-middle">
-			<span
-				ref={strip}
-				className="absolute inset-x-0 top-0 flex flex-col leading-[1.5em]"
-				style={{ transform: "translateY(-33.333333%)" }}
-			>
-				<span>{digitAt(count - 1)}</span>
-				<span>{digitAt(count)}</span>
-				<span>{digitAt(count + 1)}</span>
-			</span>
-		</span>
-	);
-}

package/src/components/stepper/stepper.tsx

@@ -1,136 +0,0 @@
-import { useId } from "react";
-import { Button, type ButtonSize } from "../button/button";
-import { cn } from "../../lib/class-names";
-import { clampRange, stepRange } from "../../lib/range-value";
-import { RollingDigit } from "./rolling-digit";
-
-export type StepperSize = "sm" | "md" | "lg";
-
-const labelText: Record<StepperSize, string> = {
-	sm: "min-w-0 text-footnote text-label",
-	md: "min-w-0 text-subheadline text-label",
-	lg: "min-w-0 text-body text-label",
-};
-const outputText: Record<StepperSize, string> = {
-	sm: "text-footnote tabular-nums text-label",
-	md: "text-subheadline tabular-nums text-label",
-	lg: "text-body tabular-nums text-label",
-};
-const buttonSizes: Record<StepperSize, { size: ButtonSize; cls: string }> = {
-	sm: {
-		size: "icon-sm",
-		cls: "size-7 rounded-none text-subheadline text-accent-text [@media(pointer:coarse)]:size-10",
-	},
-	md: {
-		size: "icon",
-		cls: "size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11",
-	},
-	lg: {
-		size: "icon-lg",
-		cls: "size-9 rounded-none text-title2 text-accent-text [@media(pointer:coarse)]:size-12",
-	},
-};
-
-export interface StepperProps {
-	value: number;
-	onChange: (value: number) => void;
-	label: string;
-	/** Localized accessible names for each action. */
-	labels: { decrement: string; increment: string };
-	min?: number;
-	max?: number;
-	step?: number;
-	disabled?: boolean;
-	className?: string;
-	/** Formats the displayed value. */
-	formatValue?: (value: number) => string;
-	/** Label, output and +/- button scale. @default "md" */
-	size?: StepperSize;
-}
-
-/** Discrete increments with disabled boundary actions and a spoken value. */
-export function Stepper({
-	value,
-	onChange,
-	label,
-	labels,
-	min = 0,
-	max = 100,
-	step = 1,
-	disabled = false,
-	className,
-	formatValue,
-	size = "md",
-}: StepperProps) {
-	const id = useId();
-	const upper = Math.max(min, max);
-	const current = clampRange(value, min, upper);
-	const decrement = stepRange(current, -1, min, upper, step > 0 ? step : 1);
-	const increment = stepRange(current, 1, min, upper, step > 0 ? step : 1);
-	const displayed = formatValue?.(current) ?? String(current);
-	const digits = displayed.replace(/[^0-9]/g, "");
-	let digitIndex = 0;
-
-	return (
-		<div
-			className={cn(
-				"flex min-w-0 items-center justify-between gap-3",
-				className,
-			)}
-		>
-			<span id={id} className={labelText[size]}>
-				{label}
-			</span>
-			<div className="flex shrink-0 items-center gap-3">
-				<output
-					aria-live="polite"
-					aria-labelledby={id}
-					className={outputText[size]}
-				>
-					<span aria-hidden="true" className="inline-flex items-center">
-						{Array.from(displayed).map((character) => {
-							if (!/[0-9]/.test(character))
-								return <span key={`sep-${character}`}>{character}</span>;
-							const prefix = digits.slice(0, ++digitIndex);
-							const place = digits.length - digitIndex;
-							return (
-								<RollingDigit
-									key={`place-${place}`}
-									count={Number(prefix)}
-									place={place}
-								/>
-							);
-						})}
-					</span>
-					<span className="sr-only">{displayed}</span>
-				</output>
-				<div className="divide-separator bg-fill flex items-center divide-x overflow-hidden rounded-lg">
-					<Button
-						type="button"
-						variant="ghost"
-						size={buttonSizes[size].size}
-						aria-label={labels.decrement}
-						aria-describedby={id}
-						disabled={disabled || decrement === current}
-						onClick={() => onChange(decrement)}
-						className={buttonSizes[size].cls}
-					>
-						−
-					</Button>
-					<Button
-						type="button"
-						variant="ghost"
-						size={buttonSizes[size].size}
-						aria-label={labels.increment}
-						aria-describedby={id}
-						disabled={disabled || increment === current}
-						onClick={() => onChange(increment)}
-						className={buttonSizes[size].cls}
-					>
-						+
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}

package/src/components/swatch-picker/swatch-picker.tsx

@@ -1,138 +0,0 @@
-import { motion } from "motion/react";
-import { useId } from "react";
-import { CheckIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { haptic } from "../../lib/haptics";
-import { spring } from "../../motion/transitions";
-
-export interface SwatchPickerOption<T extends string> {
-	value: T;
-	label: string;
-	/** Swatch background color. */
-	color: string;
-	/** Color of the selected checkmark. */
-	ink: string;
-}
-
-export type SwatchPickerSize = "sm" | "md" | "lg";
-
-const swatchSizes: Record<SwatchPickerSize, string> = {
-	sm: "size-6",
-	md: "size-8",
-	lg: "size-10",
-};
-const checkSizes: Record<SwatchPickerSize, number> = {
-	sm: 13,
-	md: 16,
-	lg: 19,
-};
-const captionText: Record<SwatchPickerSize, string> = {
-	sm: "text-caption2",
-	md: "text-caption2",
-	lg: "text-caption",
-};
-const fieldsetGaps: Record<SwatchPickerSize, string> = {
-	sm: "gap-2",
-	md: "gap-3",
-	lg: "gap-4",
-};
-const labelGaps: Record<SwatchPickerSize, string> = {
-	sm: "gap-1",
-	md: "gap-1.5",
-	lg: "gap-2",
-};
-
-export interface SwatchPickerProps<T extends string> {
-	value: T;
-	options: ReadonlyArray<SwatchPickerOption<T>>;
-	onChange: (value: T) => void;
-	/** Accessible name for the group. */
-	label: string;
-	/** Custom classes for the swatch container. */
-	className?: string;
-	/** Swatch diameter, check icon and caption scale. @default "md" */
-	size?: SwatchPickerSize;
-}
-
-/** Colour swatches with a check on the chosen one. */
-export function SwatchPicker<T extends string>({
-	value,
-	options,
-	onChange,
-	label,
-	className,
-	size = "md",
-}: SwatchPickerProps<T>) {
-	const name = useId();
-	return (
-		<fieldset className={cn("flex flex-wrap", fieldsetGaps[size], className)}>
-			<legend className="sr-only">{label}</legend>
-			{options.map((option) => {
-				const selected = option.value === value;
-				return (
-					<label
-						key={option.value}
-						className={cn(
-							"group flex cursor-pointer flex-col items-center",
-							labelGaps[size],
-						)}
-					>
-						<input
-							type="radio"
-							name={name}
-							value={option.value}
-							checked={selected}
-							onChange={() => {
-								haptic("selection");
-								onChange(option.value);
-							}}
-							className="peer sr-only"
-						/>
-						<span
-							className={cn(
-								"ring-offset-elevated duration-fast peer-focus-visible:ring-accent flex items-center justify-center rounded-full ring-offset-1 transition-[box-shadow,transform] group-active:scale-95 peer-focus-visible:ring-2",
-								swatchSizes[size],
-								selected
-									? "ring-label/70 ring-[1.5px]"
-									: "group-hover:ring-separator ring-0 group-hover:ring-[1.5px]",
-							)}
-							style={{
-								background: option.color,
-							}}
-						>
-							{selected && (
-								<motion.span
-									initial={{
-										scale: 0.4,
-										opacity: 0,
-									}}
-									animate={{
-										scale: 1,
-										opacity: 1,
-									}}
-									transition={spring.bouncy}
-								>
-									<CheckIcon
-										size={checkSizes[size]}
-										strokeWidth={2.6}
-										style={{
-											color: option.ink,
-										}}
-									/>
-								</motion.span>
-							)}
-						</span>
-						<span
-							className={cn(
-								captionText[size],
-								selected ? "text-label font-semibold" : "text-label-tertiary",
-							)}
-						>
-							{option.label}
-						</span>
-					</label>
-				);
-			})}
-		</fieldset>
-	);
-}

package/src/components/tab-bar/tab-bar.tsx

@@ -1,182 +0,0 @@
-import { motion, useReducedMotion } from "motion/react";
-import { Fragment, type ReactNode, useId } from "react";
-import { useMinimizeOnScroll } from "../../hooks/use-minimize-on-scroll";
-import { SearchIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { spring } from "../../motion/transitions";
-
-export interface TabBarTab<Id extends string = string> {
-	id: Id;
-	label: string;
-	icon: ReactNode;
-}
-
-/** What a tab's link receives; spread it onto the router's own link. */
-export interface TabBarLinkProps {
-	className: string;
-	"aria-current": "page" | undefined;
-	onClick: () => void;
-	children: ReactNode;
-}
-
-export type TabBarMinimizeBehavior = "platform" | "scroll" | "never";
-export type TabBarSize = "sm" | "md" | "lg";
-
-const tabHeights: Record<TabBarSize, string> = {
-	sm: "h-9",
-	md: "h-11",
-	lg: "h-13",
-};
-const tabMinimizedWidths: Record<TabBarSize, string> = {
-	sm: "w-9",
-	md: "w-11",
-	lg: "w-13",
-};
-const tabText: Record<TabBarSize, string> = {
-	sm: "text-caption",
-	md: "text-caption2",
-	lg: "text-subheadline",
-};
-const searchButtonSizes: Record<TabBarSize, string> = {
-	sm: "size-10",
-	md: "size-12",
-	lg: "size-14",
-};
-const searchIconSizes: Record<TabBarSize, number> = {
-	sm: 17,
-	md: 19,
-	lg: 21,
-};
-
-export interface TabBarProps<Tab extends TabBarTab> {
-	/** `platform` follows the platform, `scroll` always minimizes, `never` stays expanded. @default "platform" */
-	minimizeBehavior?: TabBarMinimizeBehavior;
-	tabs: readonly Tab[];
-	/** Active tab ID, or null for a destination outside the bar. */
-	active: Tab["id"] | null;
-	/** Renders your router's link with the supplied appearance and accessibility props. */
-	renderLink: (tab: Tab, props: TabBarLinkProps) => ReactNode;
-	search?: { label: string; onPress: () => void };
-	/** Accessible name for the navigation. */
-	label: string;
-	/** Tab height, label text, minimized width and search button diameter. @default "md" */
-	size?: TabBarSize;
-	className?: string;
-}
-
-/**
- * The app's main places a thumb's reach away, drawn as iOS 26 draws them: a
- * floating glass capsule of tabs, with Search as its own round button at the
- * trailing end. Scrolling down through content shrinks the capsule to the
- * current tab; scrolling back up, or a tap, restores it. Android shares the
- * glass, but its bar stays full size, as Android's own bars do.
- *
- * Links stay the app's own (`renderLink`), so the bar works with any router.
- */
-export function TabBar<Tab extends TabBarTab>({
-	tabs,
-	active,
-	renderLink,
-	search,
-	label,
-	className,
-	size = "md",
-	minimizeBehavior = "platform",
-}: TabBarProps<Tab>) {
-	// Scopes the sliding selection to this bar, so two bars on one
-	// screen (a docs page, a split view) never trade their highlight.
-	const selectionId = `${useId()}-tab-selection`;
-	const reducedMotion = useReducedMotion();
-	const [scrolledAway, setScrolledAway] = useMinimizeOnScroll();
-	// Platform behavior keeps Android expanded; apps can opt into scroll minimization.
-	const minimized =
-		scrolledAway &&
-		active !== null &&
-		minimizeBehavior !== "never" &&
-		(minimizeBehavior === "scroll" || !onAndroid());
-	return (
-		<nav
-			aria-label={label}
-			className={cn(
-				"fixed inset-x-4 bottom-[max(14px,env(safe-area-inset-bottom))] z-30 flex items-center gap-3",
-				className,
-			)}
-		>
-			<motion.div
-				layout={!reducedMotion}
-				transition={reducedMotion ? { duration: 0 } : spring.smooth}
-				// A tap on the shrunken capsule brings every tab back.
-				onClickCapture={(event) => {
-					if (!minimized) return;
-					event.preventDefault();
-					event.stopPropagation();
-					setScrolledAway(false);
-				}}
-				className={cn(
-					"glass flex min-w-0 items-center rounded-full p-0.5",
-					minimized ? "grow-0" : "grow",
-				)}
-			>
-				{tabs.map((tab) => {
-					const current = tab.id === active;
-					if (minimized && !current) return null;
-					return (
-						<Fragment key={tab.id}>
-							{renderLink(tab, {
-								"aria-current": current ? "page" : undefined,
-								// Switching tabs is silent, as on Apple and Android: no haptic.
-								onClick: () => {},
-								className: cn(
-									"duration-fast relative isolate flex min-w-0 flex-col items-center justify-center gap-0.5 rounded-full font-semibold tracking-[0.01em] no-underline transition-[color,transform] active:scale-[0.94]",
-									tabHeights[size],
-									tabText[size],
-									minimized ? tabMinimizedWidths[size] : "flex-1 px-1",
-									current ? "text-accent-text" : "text-label-secondary",
-								),
-								children: (
-									<>
-										{current && (
-											<motion.span
-												layoutId={selectionId}
-												className="glass-lens absolute inset-0 -z-10 rounded-full"
-												transition={
-													reducedMotion ? { duration: 0 } : spring.snappy
-												}
-											/>
-										)}
-										{tab.icon}
-										<span
-											className={minimized ? "sr-only" : "max-w-full truncate"}
-										>
-											{tab.label}
-										</span>
-									</>
-								),
-							})}
-						</Fragment>
-					);
-				})}
-			</motion.div>
-			{search && (
-				<button
-					type="button"
-					aria-label={search.label}
-					onClick={search.onPress}
-					className={cn(
-						"glass text-label duration-fast ms-auto flex shrink-0 items-center justify-center rounded-full transition-transform active:scale-[0.92]",
-						searchButtonSizes[size],
-					)}
-				>
-					<SearchIcon size={searchIconSizes[size]} strokeWidth={2} />
-				</button>
-			)}
-		</nav>
-	);
-}
-
-function onAndroid() {
-	return (
-		typeof document !== "undefined" &&
-		document.documentElement.dataset.os === "android"
-	);
-}

package/src/components/tab-view/tab-view.tsx

@@ -1,155 +0,0 @@
-import { useId, useRef, useState, type ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export type TabViewAlign = "start" | "center";
-export type TabViewSize = "sm" | "md" | "lg";
-
-const containerGaps: Record<TabViewSize, string> = {
-	sm: "gap-4",
-	md: "gap-5",
-	lg: "gap-6",
-};
-const tablistClasses: Record<TabViewSize, string> = {
-	sm: "inline-flex h-7 w-fit max-w-full items-center gap-4 p-[2px]",
-	md: "inline-flex h-8 w-fit max-w-full items-center gap-5 p-[3px]",
-	lg: "inline-flex h-10 w-fit max-w-full items-center gap-6 p-[4px]",
-};
-const tabText: Record<TabViewSize, string> = {
-	sm: "text-footnote",
-	md: "text-subheadline",
-	lg: "text-body",
-};
-const underlineOffset: Record<TabViewSize, string> = {
-	sm: "after:bottom-[-4px] after:h-0.5",
-	md: "after:bottom-[-5px] after:h-0.5",
-	lg: "after:bottom-[-6px] after:h-1",
-};
-
-export interface TabViewProps<Value extends string> {
-	/** Available tabs, in keyboard navigation order. */
-	options: readonly { value: Value; label: string; disabled?: boolean }[];
-	/** Initial selection when value is not controlled. */
-	defaultValue: Value;
-	/** Controlled selection; omit to keep selection inside TabView. */
-	value?: Value;
-	onValueChange?: (value: Value) => void;
-	/** Tab alignment: `start` or `center`. @default "center" */
-	align?: TabViewAlign;
-	/** Accessible name for the tab list. */
-	label: string;
-	/** Renders the selected tab's panel. */
-	children: (value: Value) => ReactNode;
-	/** Tablist height, tab text scale and underline offset. @default "md" */
-	size?: TabViewSize;
-	className?: string;
-}
-
-/** Content tabs with native buttons, roving focus and automatic keyboard activation. */
-export function TabView<Value extends string>({
-	options,
-	defaultValue,
-	value: controlledValue,
-	onValueChange,
-	align = "center",
-	label,
-	children,
-	size = "md",
-	className,
-}: TabViewProps<Value>) {
-	const id = useId();
-	const buttons = useRef<(HTMLButtonElement | null)[]>([]);
-	const [selected, setSelected] = useState(defaultValue);
-	const current = controlledValue ?? selected;
-	function select(next: Value) {
-		if (controlledValue === undefined) setSelected(next);
-		onValueChange?.(next);
-	}
-	const enabled = options.filter((option) => !option.disabled);
-	const value = enabled.some((option) => option.value === current)
-		? current
-		: enabled[0]?.value;
-	if (value === undefined) return null;
-
-	return (
-		<div className={cn("flex w-full flex-col", containerGaps[size], className)}>
-			<div
-				role="tablist"
-				aria-label={label}
-				className={cn(
-					tablistClasses[size],
-					align === "start" ? "self-start" : "mx-auto justify-center",
-				)}
-			>
-				{options.map((option, index) => (
-					<button
-						key={option.value}
-						type="button"
-						role="tab"
-						id={`${id}-tab-${index}`}
-						aria-controls={`${id}-panel-${index}`}
-						aria-selected={option.value === value}
-						aria-disabled={option.disabled || undefined}
-						disabled={option.disabled}
-						tabIndex={option.value === value ? 0 : -1}
-						ref={(element) => {
-							buttons.current[index] = element;
-						}}
-						onClick={() => select(option.value)}
-						onKeyDown={(event) => {
-							const rtl =
-								getComputedStyle(event.currentTarget).direction === "rtl";
-							let next: number;
-							let step: number;
-							if (event.key === "Home") {
-								next = -1;
-								step = 1;
-							} else if (event.key === "End") {
-								next = options.length;
-								step = -1;
-							} else if (event.key === "ArrowRight") {
-								step = rtl ? -1 : 1;
-								next = index;
-							} else if (event.key === "ArrowLeft") {
-								step = rtl ? 1 : -1;
-								next = index;
-							} else return;
-							event.preventDefault();
-							for (let offset = 0; offset < options.length; offset++) {
-								next = (next + step + options.length) % options.length;
-								const option = options[next];
-								if (!option || option.disabled) continue;
-								select(option.value);
-								buttons.current[next]?.focus();
-								break;
-							}
-						}}
-						className={cn(
-							"relative inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center border border-transparent p-0 font-medium whitespace-nowrap",
-							tabText[size],
-							"focus-visible:outline-2 focus-visible:outline-offset-2",
-							"after:absolute after:inset-x-0 after:bg-current",
-							underlineOffset[size],
-							option.value === value
-								? "after:opacity-100"
-								: "opacity-60 after:opacity-0 hover:opacity-100",
-						)}
-					>
-						{option.label}
-					</button>
-				))}
-			</div>
-			{options.map((option, index) => (
-				<div
-					key={option.value}
-					role="tabpanel"
-					id={`${id}-panel-${index}`}
-					aria-labelledby={`${id}-tab-${index}`}
-					hidden={option.value !== value}
-					className="w-full outline-offset-4"
-				>
-					{option.value === value && children(option.value)}
-				</div>
-			))}
-		</div>
-	);
-}