@passui/react 0.1.46 → 0.2.0

package/src/components/skeleton/skeleton.tsx

@@ -1,38 +0,0 @@
-import type { ComponentProps } from "react";
-import { cn } from "../../lib/class-names";
-
-export type SkeletonSize = "sm" | "md" | "lg";
-
-const minHeights: Record<SkeletonSize, string> = {
-	sm: "min-h-3 rounded-md",
-	md: "min-h-4 rounded-md",
-	lg: "min-h-6 rounded-lg",
-};
-
-export interface SkeletonProps extends ComponentProps<"div"> {
-	label?: string;
-	/** Minimum height and rounding. @default "md" */
-	size?: SkeletonSize;
-}
-/** A loading placeholder that becomes still when Reduce Motion is enabled. */
-export function Skeleton({
-	label,
-	size = "md",
-	className,
-	...props
-}: SkeletonProps) {
-	return (
-		<div
-			{...props}
-			role={label ? "status" : undefined}
-			aria-hidden={label ? undefined : true}
-			className={cn(
-				"bg-fill motion-safe:animate-pulse",
-				minHeights[size],
-				className,
-			)}
-		>
-			{label && <span className="sr-only">{label}</span>}
-		</div>
-	);
-}

package/src/components/slider/slider.tsx

@@ -1,134 +0,0 @@
-import { type ComponentProps, useId } from "react";
-import { cn } from "../../lib/class-names";
-import { clampRange } from "../../lib/range-value";
-
-export type SliderSize = "sm" | "md" | "lg";
-
-const labelSizes: Record<SliderSize, string> = {
-	sm: "text-footnote font-semibold text-label",
-	md: "text-subheadline font-semibold text-label",
-	lg: "text-body font-semibold text-label",
-};
-const inputHeights: Record<SliderSize, string> = {
-	sm: "h-9",
-	md: "h-11",
-	lg: "h-13",
-};
-const descriptionSizes: Record<SliderSize, string> = {
-	sm: "text-caption2 text-label-secondary",
-	md: "text-footnote text-label-secondary",
-	lg: "text-subheadline text-label-secondary",
-};
-// Track height, thumb size, and the webkit thumb's -mt offset (derived from
-// (thumb - track) / 2: md (20-6)/2=7, sm (16-4)/2=6, lg (24-8)/2=8).
-const webkitTrack: Record<SliderSize, string> = {
-	sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-	md: "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-	lg: "[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-};
-const webkitThumb: Record<SliderSize, string> = {
-	sm: "[&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-	md: "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-	lg: "[&::-webkit-slider-thumb]:-mt-[8px] [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-};
-const mozTrack: Record<SliderSize, string> = {
-	sm: "[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-	md: "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-	lg: "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-};
-const mozProgress: Record<SliderSize, string> = {
-	sm: "[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-	md: "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-	lg: "[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-};
-const mozThumb: Record<SliderSize, string> = {
-	sm: "[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-	md: "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-	lg: "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-};
-
-export interface SliderProps
-	extends Omit<
-		ComponentProps<"input">,
-		| "type"
-		| "value"
-		| "defaultValue"
-		| "onChange"
-		| "min"
-		| "max"
-		| "step"
-		| "size"
-	> {
-	value: number;
-	onChange: (value: number) => void;
-	label: string;
-	min?: number;
-	max?: number;
-	step?: number;
-	description?: string;
-	/** Provides a localized, spoken description of the current value. */
-	formatValue?: (value: number) => string;
-	/** Track height, thumb size and label/description text scale. @default "md" */
-	size?: SliderSize;
-}
-
-/** Native keyboard, touch and pointer behavior with Passui's control treatment. */
-export function Slider({
-	value,
-	onChange,
-	label,
-	min = 0,
-	max = 100,
-	step = 1,
-	description,
-	formatValue,
-	size = "md",
-	id: suppliedId,
-	className,
-	disabled,
-	...props
-}: SliderProps) {
-	const generatedId = useId();
-	const id = suppliedId ?? generatedId;
-	const upper = Math.max(min, max);
-	const current = clampRange(value, min, upper);
-
-	return (
-		<div
-			className={cn("flex min-w-0 flex-col gap-2", disabled && "opacity-45")}
-		>
-			<label htmlFor={id} className={labelSizes[size]}>
-				{label}
-			</label>
-			<input
-				{...props}
-				id={id}
-				type="range"
-				min={min}
-				max={upper}
-				step={step > 0 ? step : 1}
-				value={current}
-				disabled={disabled || upper === min}
-				aria-valuetext={formatValue?.(current)}
-				aria-describedby={description ? `${id}-description` : undefined}
-				onChange={(event) => onChange(Number(event.currentTarget.value))}
-				className={cn(
-					"accent-accent w-full min-w-0 cursor-pointer appearance-none bg-transparent",
-					inputHeights[size],
-					"focus-visible:outline-accent-text focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2",
-					webkitTrack[size],
-					webkitThumb[size],
-					mozTrack[size],
-					mozProgress[size],
-					mozThumb[size],
-					className,
-				)}
-			/>
-			{description && (
-				<p id={`${id}-description`} className={descriptionSizes[size]}>
-					{description}
-				</p>
-			)}
-		</div>
-	);
-}

package/src/components/slosh-slider/liquid-step.ts

@@ -1,43 +0,0 @@
-import { clampRange } from "../../lib/range-value";
-
-export interface LiquidState {
-	fill: number;
-	velocity: number;
-}
-
-/** Bencho's frame-normalized liquid spring. See THIRD_PARTY_NOTICES.md. */
-export function stepLiquid(
-	state: LiquidState,
-	target: number,
-	viscosity: number,
-	dt: number,
-): LiquidState {
-	const soft = clampRange(viscosity, 0, 100) / 100;
-	target = clampRange(target, 0, 100);
-	dt = clampRange(dt, 0, 2.5);
-	if (soft === 0) {
-		/* 0 is an ordinary slider and has to be exactly that,
-           not a very stiff spring that still rings. */
-		return { fill: target, velocity: 0 };
-	}
-	/* Stiffness falls and damping rises together: thin liquid is slow to
-       answer and slow to forget, which is why these are one knob. */
-	const stiff = 0.34 - soft * 0.29;
-	const damp = 0.74 + soft * 0.22;
-	let velocity =
-		(state.velocity + (target - state.fill) * stiff * dt) * damp ** dt;
-	let fill = state.fill + velocity * dt;
-	/* The end stop is a wall, and a wall gives some back. Without this
-       the overshoot is swallowed exactly where you are looking at it. */
-	if (fill > 100) {
-		fill = 100;
-		velocity = -velocity * 0.42;
-	}
-	if (fill < 0) {
-		fill = 0;
-		velocity = -velocity * 0.42;
-	}
-	if (Math.abs(target - fill) < 0.02 && Math.abs(velocity) < 0.02)
-		return { fill: target, velocity: 0 };
-	return { fill, velocity };
-}

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