@passui/react 0.1.44 → 0.1.46

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

@@ -1,79 +1,90 @@
-import type { ReactNode } from "react"
-import { cn } from "../../lib/class-names"
+import type { ReactNode } from "react";
+import { cn } from "../../lib/class-names";
 
-export type StatTileTone = "critical"
-export type StatTileSize = "sm" | "md" | "lg"
+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" },
-}
+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
+	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",
+	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(
-                    "tabular-nums font-semibold",
-                    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(
-        "flex min-w-0 flex-col gap-2 rounded-2xl border border-separator/35 bg-elevated text-left shadow-xs",
-        dims.padding,
-        className
-    )
+	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,
-                "ring-1 ring-transparent transition-colors hover:bg-fill/60",
-                active && "bg-fill/70 ring-label/15"
-            )}
-        >
-            {body}
-        </button>
-    )
+	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,51 +1,54 @@
-import type { HTMLAttributes, ReactNode } from "react"
-import { cn } from "../../lib/class-names"
+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
+	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"
+export type StatusIndicatorState = keyof typeof dots;
+export type StatusIndicatorSize = "sm" | "md";
 
 const dotSizes: Record<StatusIndicatorSize, string> = {
-    sm: "size-[6px]",
-    md: "size-[7px]",
-}
+	sm: "size-[6px]",
+	md: "size-[7px]",
+};
 
 const textSizes: Record<StatusIndicatorSize, string> = {
-    sm: "text-caption",
-    md: "text-footnote",
-}
+	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
+	/** 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
+	state,
+	children,
+	size = "md",
+	className,
+	...props
 }: StatusIndicatorProps) {
-    return (
-        <span
-            className={cn(
-                "flex items-center gap-1.5 text-label-tertiary",
-                textSizes[size],
-                className
-            )}
-            {...props}
-        >
-            <span aria-hidden="true" className={cn(dotSizes[size], "rounded-full", dots[state])} />
-            {children}
-        </span>
-    )
+	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,77 +1,91 @@
-import { useEffect, useRef } from "react"
-import { useMediaQuery } from "../../hooks/use-media-query"
+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
+	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 }
+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]!.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>
-    )
+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>
+	);
 }