@passui/react 0.1.45 → 0.1.47

package/src/components/profile-image/profile-image.tsx

@@ -1,80 +1,96 @@
-import { createContext, useContext, useEffect, useState, type ComponentProps } from "react"
-import { cn } from "../../lib/class-names"
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useState,
+	type ComponentProps,
+} from "react";
+import { cn } from "../../lib/class-names";
 
-export type ProfileImageSize = "sm" | "md" | "lg"
+export type ProfileImageSize = "sm" | "md" | "lg";
 
 const diameters: Record<ProfileImageSize, string> = {
-    sm: "size-7",
-    md: "size-9",
-    lg: "size-12",
-}
+	sm: "size-7",
+	md: "size-9",
+	lg: "size-12",
+};
 
 const fallbackTextSizes: Record<ProfileImageSize, string> = {
-    sm: "text-caption",
-    md: "text-footnote",
-    lg: "text-subheadline",
-}
+	sm: "text-caption",
+	md: "text-footnote",
+	lg: "text-subheadline",
+};
 
 const ImageContext = createContext<{
-    loaded: boolean
-    setLoaded: (loaded: boolean) => void
-    size: ProfileImageSize
-}>({ loaded: false, setLoaded: () => {}, size: "md" })
+	loaded: boolean;
+	setLoaded: (loaded: boolean) => void;
+	size: ProfileImageSize;
+}>({ loaded: false, setLoaded: () => {}, size: "md" });
 
 export interface ProfileImageProps extends ComponentProps<"span"> {
-    /** Avatar diameter; fallback initials scale with it. @default "md" */
-    size?: ProfileImageSize
+	/** Avatar diameter; fallback initials scale with it. @default "md" */
+	size?: ProfileImageSize;
 }
 
-export function ProfileImage({ size = "md", className, ...props }: ProfileImageProps) {
-    const [loaded, setLoaded] = useState(false)
-    return (
-        <ImageContext value={{ loaded, setLoaded, size }}>
-            <span
-                {...props}
-                className={cn(
-                    "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-fill text-label-secondary",
-                    diameters[size],
-                    className
-                )}
-            />
-        </ImageContext>
-    )
+export function ProfileImage({
+	size = "md",
+	className,
+	...props
+}: ProfileImageProps) {
+	const [loaded, setLoaded] = useState(false);
+	return (
+		<ImageContext value={{ loaded, setLoaded, size }}>
+			<span
+				{...props}
+				className={cn(
+					"bg-fill text-label-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+					diameters[size],
+					className,
+				)}
+			/>
+		</ImageContext>
+	);
 }
 export function ProfileImageContent({
-    src,
-    className,
-    onLoad,
-    onError,
-    ...props
+	src,
+	className,
+	onLoad,
+	onError,
+	...props
 }: ComponentProps<"img">) {
-    const { setLoaded } = useContext(ImageContext)
-    useEffect(() => {
-        if (src) setLoaded(false)
-    }, [src, setLoaded])
-    if (!src) return null
-    return (
-        <img
-            key={src}
-            alt=""
-            {...props}
-            src={src}
-            className={cn("absolute inset-0 size-full object-cover", className)}
-            onLoad={(event) => {
-                setLoaded(true)
-                onLoad?.(event)
-            }}
-            onError={(event) => {
-                setLoaded(false)
-                onError?.(event)
-                event.currentTarget.style.visibility = "hidden"
-            }}
-        />
-    )
+	const { setLoaded } = useContext(ImageContext);
+	useEffect(() => {
+		if (src) setLoaded(false);
+	}, [src, setLoaded]);
+	if (!src) return null;
+	return (
+		<img
+			key={src}
+			alt=""
+			{...props}
+			src={src}
+			className={cn("absolute inset-0 size-full object-cover", className)}
+			onLoad={(event) => {
+				setLoaded(true);
+				onLoad?.(event);
+			}}
+			onError={(event) => {
+				setLoaded(false);
+				onError?.(event);
+				event.currentTarget.style.visibility = "hidden";
+			}}
+		/>
+	);
 }
-export function ProfileImageFallback({ className, ...props }: ComponentProps<"span">) {
-    const { loaded, size } = useContext(ImageContext)
-    return loaded ? null : (
-        <span {...props} className={cn(fallbackTextSizes[size], "font-medium", className)} />
-    )
+export function ProfileImageFallback({
+	className,
+	...props
+}: ComponentProps<"span">) {
+	const { loaded, size } = useContext(ImageContext);
+	return loaded ? null : (
+		<span
+			{...props}
+			className={cn(fallbackTextSizes[size], "font-medium", className)}
+		/>
+	);
 }

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

@@ -1,70 +1,72 @@
-import { type HTMLAttributes, useRef } from "react"
-import { useLiquidProgress } from "./use-liquid-progress"
-import { cn } from "../../lib/class-names"
-import { clampRange } from "../../lib/range-value"
+import { type HTMLAttributes, useRef } from "react";
+import { useLiquidProgress } from "./use-liquid-progress";
+import { cn } from "../../lib/class-names";
+import { clampRange } from "../../lib/range-value";
 
-export type ProgressViewSize = "sm" | "md" | "lg"
+export type ProgressViewSize = "sm" | "md" | "lg";
 
-export interface ProgressViewProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
-    label: string
-    /** Omit for an indeterminate operation. */
-    value?: number
-    max?: number
-    size?: ProgressViewSize
-    /** Secondary text, such as bytes uploaded. */
-    detail?: string
+export interface ProgressViewProps
+	extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+	label: string;
+	/** Omit for an indeterminate operation. */
+	value?: number;
+	max?: number;
+	size?: ProgressViewSize;
+	/** Secondary text, such as bytes uploaded. */
+	detail?: string;
 }
 
 const trackHeight: Record<ProgressViewSize, string> = {
-    sm: "h-1",
-    md: "h-2",
-    lg: "h-3",
-}
+	sm: "h-1",
+	md: "h-2",
+	lg: "h-3",
+};
 
 /** A determinate or indeterminate progress track respecting reduced motion. */
 export function ProgressView({
-    label,
-    value,
-    max = 100,
-    size = "md",
-    detail,
-    className,
-    ...props
+	label,
+	value,
+	max = 100,
+	size = "md",
+	detail,
+	className,
+	...props
 }: ProgressViewProps) {
-    const limit = Number.isFinite(max) && max > 0 ? max : 100
-    const current = value === undefined ? undefined : clampRange(value, 0, limit)
-    const progress = current === undefined ? undefined : (current / limit) * 100
-    const fill = useRef<HTMLDivElement>(null)
-    useLiquidProgress(fill, progress)
+	const limit = Number.isFinite(max) && max > 0 ? max : 100;
+	const current = value === undefined ? undefined : clampRange(value, 0, limit);
+	const progress = current === undefined ? undefined : (current / limit) * 100;
+	const fill = useRef<HTMLDivElement>(null);
+	useLiquidProgress(fill, progress);
 
-    return (
-        <div {...props} className={cn("flex min-w-0 flex-col gap-2", className)}>
-            <div className="flex items-center justify-between gap-3 text-footnote">
-                <span className="font-semibold text-label">{label}</span>
-                {detail && <span className="text-label-secondary">{detail}</span>}
-            </div>
-            <div
-                role="progressbar"
-                aria-label={label}
-                aria-valuemin={current === undefined ? undefined : 0}
-                aria-valuemax={current === undefined ? undefined : limit}
-                aria-valuenow={current}
-                className={cn(
-                    "relative w-full overflow-hidden rounded-full bg-separator/70",
-                    trackHeight[size]
-                )}
-            >
-                <div
-                    ref={fill}
-                    aria-hidden="true"
-                    className={cn(
-                        "h-full rounded-full bg-accent",
-                        current !== undefined && "passui-progress-fill",
-                        current === undefined && "w-1/3 animate-pulse motion-reduce:animate-none"
-                    )}
-                    style={progress === undefined ? undefined : { width: `${progress}%` }}
-                />
-            </div>
-        </div>
-    )
+	return (
+		<div {...props} className={cn("flex min-w-0 flex-col gap-2", className)}>
+			<div className="text-footnote flex items-center justify-between gap-3">
+				<span className="text-label font-semibold">{label}</span>
+				{detail && <span className="text-label-secondary">{detail}</span>}
+			</div>
+			<div
+				role="progressbar"
+				aria-label={label}
+				aria-valuemin={current === undefined ? undefined : 0}
+				aria-valuemax={current === undefined ? undefined : limit}
+				aria-valuenow={current}
+				className={cn(
+					"bg-separator/70 relative w-full overflow-hidden rounded-full",
+					trackHeight[size],
+				)}
+			>
+				<div
+					ref={fill}
+					aria-hidden="true"
+					className={cn(
+						"bg-accent h-full rounded-full",
+						current !== undefined && "passui-progress-fill",
+						current === undefined &&
+							"w-1/3 animate-pulse motion-reduce:animate-none",
+					)}
+					style={progress === undefined ? undefined : { width: `${progress}%` }}
+				/>
+			</div>
+		</div>
+	);
 }

package/src/components/progress-view/use-liquid-progress.ts

@@ -1,43 +1,43 @@
-import { type RefObject, useLayoutEffect, useRef } from "react"
-import { useMediaQuery } from "../../hooks/use-media-query"
-import { clampRange } from "../../lib/range-value"
-import { stepLiquid } from "../slosh-slider/liquid-step"
+import { type RefObject, useLayoutEffect, useRef } from "react";
+import { useMediaQuery } from "../../hooks/use-media-query";
+import { clampRange } from "../../lib/range-value";
+import { stepLiquid } from "../slosh-slider/liquid-step";
 
 /** Read-only progress shares the liquid fill without acquiring slider semantics. */
 export function useLiquidProgress(
-    ref: RefObject<HTMLDivElement | null>,
-    target: number | undefined
+	ref: RefObject<HTMLDivElement | null>,
+	target: number | undefined,
 ) {
-    const reduced = useMediaQuery("(prefers-reduced-motion: reduce)")
-    const state = useRef({ fill: target ?? 0, velocity: 0 })
-    useLayoutEffect(() => {
-        const element = ref.current
-        if (!element || target === undefined) return
-        let frame = 0
-        let previous = 0
-        const paint = () => {
-            element.style.width = `${state.current.fill}%`
-            element.style.setProperty(
-                "--progress-lean",
-                `${reduced ? 0 : clampRange(state.current.velocity * 0.4, -4, 4)}px`
-            )
-        }
-        if (reduced) {
-            state.current = { fill: target, velocity: 0 }
-            paint()
-            return
-        }
-        const tick = (now: number) => {
-            const dt = previous ? Math.min(2.5, (now - previous) / 16.67) : 1
-            previous = now
-            state.current = stepLiquid(state.current, target, 15, dt)
-            paint()
-            if (state.current.fill !== target || state.current.velocity)
-                frame = requestAnimationFrame(tick)
-        }
-        paint()
-        if (state.current.fill !== target || state.current.velocity)
-            frame = requestAnimationFrame(tick)
-        return () => cancelAnimationFrame(frame)
-    }, [ref, target, reduced])
+	const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const state = useRef({ fill: target ?? 0, velocity: 0 });
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || target === undefined) return;
+		let frame = 0;
+		let previous = 0;
+		const paint = () => {
+			element.style.width = `${state.current.fill}%`;
+			element.style.setProperty(
+				"--progress-lean",
+				`${reduced ? 0 : clampRange(state.current.velocity * 0.4, -4, 4)}px`,
+			);
+		};
+		if (reduced) {
+			state.current = { fill: target, velocity: 0 };
+			paint();
+			return;
+		}
+		const tick = (now: number) => {
+			const dt = previous ? Math.min(2.5, (now - previous) / 16.67) : 1;
+			previous = now;
+			state.current = stepLiquid(state.current, target, 15, dt);
+			paint();
+			if (state.current.fill !== target || state.current.velocity)
+				frame = requestAnimationFrame(tick);
+		};
+		paint();
+		if (state.current.fill !== target || state.current.velocity)
+			frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [ref, target, reduced]);
 }

package/src/components/radio-group/radio-group.tsx

@@ -1,83 +1,86 @@
-import { useId } from "react"
-import { cn } from "../../lib/class-names"
+import { useId } from "react";
+import { cn } from "../../lib/class-names";
 
-export type RadioGroupSize = "sm" | "md" | "lg"
+export type RadioGroupSize = "sm" | "md" | "lg";
 
 const legendSizes: Record<RadioGroupSize, string> = {
-    sm: "mb-1.5 text-caption2 font-medium text-label-secondary",
-    md: "mb-2 text-footnote font-medium text-label-secondary",
-    lg: "mb-2.5 text-subheadline font-medium text-label-secondary",
-}
+	sm: "mb-1.5 text-caption2 font-medium text-label-secondary",
+	md: "mb-2 text-footnote font-medium text-label-secondary",
+	lg: "mb-2.5 text-subheadline font-medium text-label-secondary",
+};
 const rowSizes: Record<RadioGroupSize, string> = {
-    sm: "flex min-h-7 items-start gap-1.5 text-footnote text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-10",
-    md: "flex min-h-8 items-start gap-2 text-subheadline text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-11",
-    lg: "flex min-h-10 items-start gap-2.5 text-body text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-12",
-}
+	sm: "flex min-h-7 items-start gap-1.5 text-footnote text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-10",
+	md: "flex min-h-8 items-start gap-2 text-subheadline text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-11",
+	lg: "flex min-h-10 items-start gap-2.5 text-body text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-12",
+};
 const radioSizes: Record<RadioGroupSize, string> = {
-    sm: "mt-0.5 size-3.5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-    md: "mt-1 size-4 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-    lg: "mt-1 size-5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-}
+	sm: "mt-0.5 size-3.5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+	md: "mt-1 size-4 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+	lg: "mt-1 size-5 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+};
 const descriptionSizes: Record<RadioGroupSize, string> = {
-    sm: "block text-caption2 text-label-secondary",
-    md: "block text-footnote text-label-secondary",
-    lg: "block text-subheadline text-label-secondary",
-}
+	sm: "block text-caption2 text-label-secondary",
+	md: "block text-footnote text-label-secondary",
+	lg: "block text-subheadline text-label-secondary",
+};
 
 export interface RadioGroupOption<T extends string> {
-    value: T
-    label: string
-    description?: string
-    disabled?: boolean
+	value: T;
+	label: string;
+	description?: string;
+	disabled?: boolean;
 }
 export interface RadioGroupProps<T extends string> {
-    value: T
-    onChange: (value: NoInfer<T>) => void
-    label: string
-    options: readonly RadioGroupOption<T>[]
-    disabled?: boolean
-    name?: string
-    className?: string
-    /** Legend, row, radio glyph and description density. @default "md" */
-    size?: RadioGroupSize
+	value: T;
+	onChange: (value: NoInfer<T>) => void;
+	label: string;
+	options: readonly RadioGroupOption<T>[];
+	disabled?: boolean;
+	name?: string;
+	className?: string;
+	/** Legend, row, radio glyph and description density. @default "md" */
+	size?: RadioGroupSize;
 }
 /** A labelled choice group using the browser's native radio keyboard behavior. */
 export function RadioGroup<T extends string>({
-    value,
-    onChange,
-    label,
-    options,
-    disabled,
-    name,
-    className,
-    size = "md",
+	value,
+	onChange,
+	label,
+	options,
+	disabled,
+	name,
+	className,
+	size = "md",
 }: RadioGroupProps<T>) {
-    const id = useId()
-    return (
-        <fieldset disabled={disabled} className={cn("flex min-w-0 flex-col gap-2", className)}>
-            <legend className={legendSizes[size]}>{label}</legend>
-            {options.map((option, index) => (
-                <label key={option.value} className={rowSizes[size]}>
-                    <input
-                        type="radio"
-                        name={name ?? id}
-                        value={option.value}
-                        checked={value === option.value}
-                        disabled={option.disabled}
-                        onChange={() => onChange(option.value)}
-                        aria-describedby={option.description ? `${id}-${index}` : undefined}
-                        className={radioSizes[size]}
-                    />
-                    <span>
-                        {option.label}
-                        {option.description && (
-                            <span id={`${id}-${index}`} className={descriptionSizes[size]}>
-                                {option.description}
-                            </span>
-                        )}
-                    </span>
-                </label>
-            ))}
-        </fieldset>
-    )
+	const id = useId();
+	return (
+		<fieldset
+			disabled={disabled}
+			className={cn("flex min-w-0 flex-col gap-2", className)}
+		>
+			<legend className={legendSizes[size]}>{label}</legend>
+			{options.map((option, index) => (
+				<label key={option.value} className={rowSizes[size]}>
+					<input
+						type="radio"
+						name={name ?? id}
+						value={option.value}
+						checked={value === option.value}
+						disabled={option.disabled}
+						onChange={() => onChange(option.value)}
+						aria-describedby={option.description ? `${id}-${index}` : undefined}
+						className={radioSizes[size]}
+					/>
+					<span>
+						{option.label}
+						{option.description && (
+							<span id={`${id}-${index}`} className={descriptionSizes[size]}>
+								{option.description}
+							</span>
+						)}
+					</span>
+				</label>
+			))}
+		</fieldset>
+	);
 }