@passui/react 0.1.47 → 0.2.0

package/src/components/slosh-slider/slosh-slider.tsx

@@ -1,294 +0,0 @@
-// Adapted from Bencho. See THIRD_PARTY_NOTICES.md for the MIT notice.
-import { type CSSProperties, useEffect, useRef } from "react";
-import { useMediaQuery } from "../../hooks/use-media-query";
-import { cn } from "../../lib/class-names";
-import { clampRange as clamp } from "../../lib/range-value";
-import { stepLiquid } from "./liquid-step";
-
-export type SloshSliderSize = "sm" | "md" | "lg";
-
-export interface SloshSliderProps {
-	label: string;
-	value?: number;
-	defaultValue?: number;
-	onChange?: (value: number) => void;
-	/** 0 is rigid; 100 is loose liquid. @default 15 */
-	viscosity?: number;
-	/** How far the handle coasts after release, 0–100. @default 55 */
-	momentum?: number;
-	/** Lean of the liquid's leading edge, 0–100. @default 45 */
-	tilt?: number;
-	/** Track corner, from square to a pill, 0–20. @default 20 */
-	corner?: number;
-	/** Track height and knob scale. @default "md" */
-	size?: SloshSliderSize;
-	disabled?: boolean;
-	className?: string;
-	formatValue?: (value: number) => string;
-}
-
-/* A slider whose value has mass.
-
-   The handle is rigid — it is under your finger and anything under a
-   finger that lags it is broken. The FILL is a second spring behind it,
-   softer and barely damped, so a fast drag throws it past the handle,
-   into the end stop, and rocks it back before it settles.
-
-   The tilt is what sells it as liquid. A bar that lags is a laggy bar;
-   a bar whose leading edge leans has a meniscus. Same lag, different object.
-
-   The loop writes geometry directly and parks as soon as it rests.
-   React receives only changed integer values for the application's state. */
-export function SloshSlider({
-	label,
-	value,
-	defaultValue = 62,
-	onChange,
-	viscosity = 15,
-	momentum = 55,
-	tilt = 45,
-	corner = 20,
-	size = "md",
-	disabled = false,
-	className,
-	formatValue,
-}: SloshSliderProps) {
-	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
-	const track = useRef<HTMLDivElement>(null);
-	const fillEl = useRef<HTMLDivElement>(null);
-	const knobEl = useRef<HTMLDivElement>(null);
-	const initial = clamp(value ?? defaultValue, 0, 100);
-	const state = useRef({
-		value: initial,
-		handleVelocity: 0,
-		fill: initial,
-		velocity: 0,
-		held: false,
-		raf: 0,
-		previous: 0,
-		last: { value: initial, time: 0 },
-		notified: Math.round(initial),
-	});
-	const settings = useRef({
-		viscosity,
-		momentum,
-		tilt,
-		reduced,
-		onChange,
-		formatValue,
-	});
-	settings.current = {
-		viscosity,
-		momentum,
-		tilt,
-		reduced,
-		onChange,
-		formatValue,
-	};
-	const run = useRef<() => void>(() => {});
-
-	useEffect(() => {
-		const s = state.current;
-		const paint = () => {
-			if (!track.current || !fillEl.current || !knobEl.current) return;
-			fillEl.current.style.width = `${s.fill.toFixed(2)}%`;
-			knobEl.current.style.insetInlineStart = `${s.value.toFixed(2)}%`;
-			/* Proportional to how fast the fill is actually moving: upright
-               at rest, so it cannot be decoration when nothing travels. */
-			const lean = settings.current.reduced
-				? 0
-				: clamp(
-						(clamp(settings.current.tilt, 0, 100) / 100) * s.velocity * 3,
-						-20,
-						20,
-					);
-			fillEl.current.style.setProperty("--slosh-lean", `${lean.toFixed(2)}px`);
-			const next = Math.round(s.value);
-			track.current.setAttribute("aria-valuenow", String(next));
-			const spoken = settings.current.formatValue?.(next);
-			if (spoken) track.current.setAttribute("aria-valuetext", spoken);
-			else track.current.removeAttribute("aria-valuetext");
-			if (s.notified !== next) {
-				s.notified = next;
-				settings.current.onChange?.(next);
-			}
-		};
-		const tick = (time: number) => {
-			const dt = s.previous ? clamp((time - s.previous) / 16.67, 0, 2.5) : 1;
-			s.previous = time;
-			const knobs = settings.current;
-			/* Friction is per frame, raised to dt: a dropped frame must
-               not double the deceleration. The release is a throw, not a stop. */
-			if (!s.held && s.handleVelocity) {
-				s.value += s.handleVelocity * dt;
-				s.handleVelocity *=
-					(0.86 + (clamp(knobs.momentum, 0, 100) / 100) * 0.115) ** dt;
-				if (s.value <= 0 || s.value >= 100) {
-					s.value = clamp(s.value, 0, 100);
-					s.handleVelocity = 0;
-				}
-				if (Math.abs(s.handleVelocity) < 0.01) s.handleVelocity = 0;
-			}
-			const next = stepLiquid(
-				s,
-				s.value,
-				knobs.reduced ? 0 : knobs.viscosity,
-				dt,
-			);
-			s.fill = next.fill;
-			s.velocity = next.velocity;
-			paint();
-			if (
-				!s.handleVelocity &&
-				!s.velocity &&
-				Math.abs(s.fill - s.value) < 0.02
-			) {
-				s.raf = 0;
-				s.previous = 0;
-				return;
-			}
-			s.raf = requestAnimationFrame(tick);
-		};
-		run.current = () => {
-			// The handle paints on the input event; it never waits for the fill.
-			paint();
-			if (!s.raf) s.raf = requestAnimationFrame(tick);
-		};
-		paint();
-		return () => {
-			cancelAnimationFrame(s.raf);
-			s.raf = 0;
-			s.previous = 0;
-		};
-	}, []);
-
-	// biome-ignore lint/correctness/useExhaustiveDependencies: Motion settings can wake a parked loop without changing its value.
-	useEffect(() => {
-		const s = state.current;
-		if (
-			value !== undefined &&
-			Math.round(clamp(value, 0, 100)) !== s.notified
-		) {
-			s.value = clamp(value, 0, 100);
-			s.notified = Math.round(s.value);
-			s.handleVelocity = 0;
-		}
-		if (reduced || disabled) {
-			s.handleVelocity = 0;
-			s.held = false;
-		}
-		run.current();
-	}, [value, reduced, disabled, viscosity, tilt, formatValue]);
-
-	const readAt = (clientX: number) => {
-		const t = track.current;
-		if (!t) return 0;
-		const box = t.getBoundingClientRect();
-		const fraction = box.width ? (clientX - box.left) / box.width : 0;
-		return clamp(
-			(getComputedStyle(t).direction === "rtl" ? 1 - fraction : fraction) * 100,
-			0,
-			100,
-		);
-	};
-	const release = (cancelled = false) => {
-		const s = state.current;
-		if (!s.held) return;
-		s.held = false;
-		/* Leaves along its measured velocity, capped so a full-track flick
-           does not simply pin it. A cancelled gesture never throws. */
-		s.handleVelocity =
-			cancelled || reduced ? 0 : clamp(s.handleVelocity, -6, 6);
-		if (performance.now() - s.last.time > 100) s.handleVelocity = 0;
-		run.current();
-	};
-	return (
-		<div
-			className={cn(
-				"passui-slosh-slider not-typeset",
-				disabled && "opacity-40",
-				className,
-			)}
-			style={{ "--slosh-radius": `${clamp(corner, 0, 20)}px` } as CSSProperties}
-			data-size={size}
-		>
-			{/* Nothing but the track: the liquid is the value's motion, not a
-            second numeric readout that lags and overshoots beside it. */}
-			<div
-				ref={track}
-				className="passui-slosh-track"
-				role="slider"
-				tabIndex={disabled ? -1 : 0}
-				aria-label={label}
-				aria-disabled={disabled || undefined}
-				aria-valuemin={0}
-				aria-valuemax={100}
-				aria-valuenow={Math.round(initial)}
-				aria-valuetext={formatValue?.(Math.round(initial))}
-				onPointerDown={(event) => {
-					if (disabled || event.button !== 0) return;
-					event.currentTarget.focus();
-					event.currentTarget.setPointerCapture(event.pointerId);
-					const s = state.current;
-					s.held = true;
-					s.handleVelocity = 0;
-					s.value = readAt(event.clientX);
-					s.last = { value: s.value, time: performance.now() };
-					run.current();
-				}}
-				onPointerMove={(event) => {
-					const s = state.current;
-					if (!s.held || disabled) return;
-					const next = readAt(event.clientX);
-					const now = performance.now();
-					/* Per frame, not per ms: the loop's release velocity must
-                   use the same unit as the spring. */
-					s.handleVelocity =
-						((next - s.last.value) / Math.max(1, now - s.last.time)) * 16.67;
-					s.last = { value: next, time: now };
-					s.value = next;
-					run.current();
-				}}
-				onPointerUp={() => release()}
-				onPointerCancel={() => release(true)}
-				onLostPointerCapture={() => release(true)}
-				onKeyDown={(event) => {
-					if (disabled) return;
-					const s = state.current;
-					const step = event.shiftKey ? 10 : 2;
-					const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
-					const next =
-						event.key === "ArrowUp" ||
-						event.key === (rtl ? "ArrowLeft" : "ArrowRight")
-							? s.value + step
-							: event.key === "ArrowDown" ||
-									event.key === (rtl ? "ArrowRight" : "ArrowLeft")
-								? s.value - step
-								: event.key === "Home"
-									? 0
-									: event.key === "End"
-										? 100
-										: null;
-					if (next === null) return;
-					event.preventDefault();
-					s.handleVelocity = 0;
-					s.value = clamp(next, 0, 100);
-					run.current();
-				}}
-			>
-				<div
-					aria-hidden="true"
-					ref={fillEl}
-					className="passui-slosh-fill"
-					style={{ width: `${initial}%` }}
-				/>
-				<div
-					aria-hidden="true"
-					ref={knobEl}
-					className="passui-slosh-knob"
-					style={{ insetInlineStart: `${initial}%` }}
-				/>
-			</div>
-		</div>
-	);
-}

package/src/components/stat-tile/index.ts

@@ -1 +0,0 @@
-export * from "./stat-tile";

package/src/components/stat-tile/stat-tile.tsx

@@ -1,90 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-export type StatTileTone = "critical";
-export type StatTileSize = "sm" | "md" | "lg";
-
-const tileSizes: Record<
-	StatTileSize,
-	{ padding: string; valueText: string; labelText: string }
-> = {
-	sm: { padding: "p-3", valueText: "text-title3", labelText: "text-caption" },
-	md: { padding: "p-4", valueText: "text-title1", labelText: "text-footnote" },
-	lg: {
-		padding: "p-5",
-		valueText: "text-title",
-		labelText: "text-subheadline",
-	},
-};
-
-export interface StatTileProps {
-	label: string;
-	value: number;
-	/** A quiet line under the number, like "3 signed in now". */
-	caption?: ReactNode;
-	/** Turns the number red once it's above zero. */
-	tone?: StatTileTone;
-	/** Makes the tile a toggle, e.g. a filter. */
-	onClick?: () => void;
-	active?: boolean;
-	/** Custom classes for the tile container. */
-	className?: string;
-	/** Tile padding and number scale. @default "md" */
-	size?: StatTileSize;
-}
-
-/** One number with its label, optionally a toggle. */
-export function StatTile({
-	label,
-	value,
-	caption,
-	tone,
-	onClick,
-	active = false,
-	className,
-	size = "md",
-}: StatTileProps) {
-	const dims = tileSizes[size];
-	const body = (
-		<>
-			<span className={cn(dims.labelText, "text-label-secondary")}>
-				{label}
-			</span>
-			<span
-				className={cn(
-					"font-semibold tabular-nums",
-					dims.valueText,
-					tone === "critical" && value > 0 && "text-danger",
-				)}
-			>
-				{value.toLocaleString("en-US")}
-			</span>
-			{caption && (
-				<span className={cn(dims.labelText, "text-label-tertiary")}>
-					{caption}
-				</span>
-			)}
-		</>
-	);
-	const tileClass = cn(
-		"border-separator/35 bg-elevated flex min-w-0 flex-col gap-2 rounded-2xl border text-left shadow-xs",
-		dims.padding,
-		className,
-	);
-
-	if (!onClick) return <div className={tileClass}>{body}</div>;
-	return (
-		<button
-			type="button"
-			aria-pressed={active}
-			onClick={onClick}
-			className={cn(
-				tileClass,
-				"hover:bg-fill/60 ring-1 ring-transparent transition-colors",
-				active && "bg-fill/70 ring-label/15",
-			)}
-		>
-			{body}
-		</button>
-	);
-}

package/src/components/status-indicator/status-indicator.tsx

@@ -1,54 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import { cn } from "../../lib/class-names";
-
-const dots = {
-	saved: "bg-success",
-	syncing: "bg-warning animate-pulse",
-	offline: "bg-label-tertiary",
-} as const;
-
-export type StatusIndicatorState = keyof typeof dots;
-export type StatusIndicatorSize = "sm" | "md";
-
-const dotSizes: Record<StatusIndicatorSize, string> = {
-	sm: "size-[6px]",
-	md: "size-[7px]",
-};
-
-const textSizes: Record<StatusIndicatorSize, string> = {
-	sm: "text-caption",
-	md: "text-footnote",
-};
-
-export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
-	/** Visual treatment of the status dot. */
-	state: StatusIndicatorState;
-	children: ReactNode;
-	/** Dot diameter and text scale. @default "md" */
-	size?: StatusIndicatorSize;
-}
-
-export function StatusIndicator({
-	state,
-	children,
-	size = "md",
-	className,
-	...props
-}: StatusIndicatorProps) {
-	return (
-		<span
-			className={cn(
-				"text-label-tertiary flex items-center gap-1.5",
-				textSizes[size],
-				className,
-			)}
-			{...props}
-		>
-			<span
-				aria-hidden="true"
-				className={cn(dotSizes[size], "rounded-full", dots[state])}
-			/>
-			{children}
-		</span>
-	);
-}

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