@passui/react 0.1.17 → 0.1.20

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

@@ -1,20 +1,11 @@
-import {
-    createContext,
-    useContext,
-    useEffect,
-    useState,
-    type ComponentProps,
-} from "react"
+import { createContext, useContext, useEffect, useState, type ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 
 const ImageContext = createContext<{
     loaded: boolean
     setLoaded: (loaded: boolean) => void
 }>({ loaded: false, setLoaded: () => {} })
-export function ProfileImage({
-    className,
-    ...props
-}: ComponentProps<"span">) {
+export function ProfileImage({ className, ...props }: ComponentProps<"span">) {
     const [loaded, setLoaded] = useState(false)
     return (
         <ImageContext value={{ loaded, setLoaded }}>
@@ -46,10 +37,7 @@ export function ProfileImageContent({
             alt=""
             {...props}
             src={src}
-            className={cn(
-                "absolute inset-0 size-full object-cover",
-                className
-            )}
+            className={cn("absolute inset-0 size-full object-cover", className)}
             onLoad={(event) => {
                 setLoaded(true)
                 onLoad?.(event)
@@ -57,24 +45,14 @@ export function ProfileImageContent({
             onError={(event) => {
                 setLoaded(false)
                 onError?.(event)
-                event.currentTarget.style.visibility =
-                    "hidden"
+                event.currentTarget.style.visibility = "hidden"
             }}
         />
     )
 }
-export function ProfileImageFallback({
-    className,
-    ...props
-}: ComponentProps<"span">) {
+export function ProfileImageFallback({ className, ...props }: ComponentProps<"span">) {
     const { loaded } = useContext(ImageContext)
     return loaded ? null : (
-        <span
-            {...props}
-            className={cn(
-                "text-footnote font-medium",
-                className
-            )}
-        />
+        <span {...props} className={cn("text-footnote font-medium", className)} />
     )
 }

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

@@ -0,0 +1,70 @@
+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 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",
+}
+
+/** A determinate or indeterminate progress track respecting reduced motion. */
+export function ProgressView({
+    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)
+
+    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>
+    )
+}

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

@@ -0,0 +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"
+
+/** Read-only progress shares the liquid fill without acquiring slider semantics. */
+export function useLiquidProgress(
+    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])
+}

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

@@ -0,0 +1,63 @@
+import { useId } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface RadioGroupOption<T extends string> {
+    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
+}
+/** 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,
+}: RadioGroupProps<T>) {
+    const id = useId()
+    return (
+        <fieldset disabled={disabled} className={cn("flex min-w-0 flex-col gap-2", className)}>
+            <legend className="mb-2 text-footnote font-medium text-label-secondary">{label}</legend>
+            {options.map((option, index) => (
+                <label
+                    key={option.value}
+                    className="flex min-h-8 items-start gap-2 text-subheadline text-label has-disabled:opacity-40 [@media(pointer:coarse)]:min-h-11"
+                >
+                    <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="mt-1 size-4 shrink-0 accent-accent-text focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text"
+                    />
+                    <span>
+                        {option.label}
+                        {option.description && (
+                            <span
+                                id={`${id}-${index}`}
+                                className="block text-footnote text-label-secondary"
+                            >
+                                {option.description}
+                            </span>
+                        )}
+                    </span>
+                </label>
+            ))}
+        </fieldset>
+    )
+}

package/src/components/search-field/expanding-search-field.tsx

@@ -0,0 +1,183 @@
+import {
+    type InputHTMLAttributes,
+    type Ref,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react"
+import { useMediaQuery } from "../../hooks/use-media-query"
+import { SearchIcon } from "../../icons/icons"
+import { cn } from "../../lib/class-names"
+import { springs } from "@passui/tokens/motion"
+
+/** One object: the field stays inside the pill, and the lens never moves within it. */
+export function ExpandingSearchField({
+    inputRef,
+    className,
+    placeholder = "Search",
+    ...props
+}: InputHTMLAttributes<HTMLInputElement> & { inputRef: Ref<HTMLInputElement> }) {
+    const [expanded, setExpanded] = useState(Boolean(props.value ?? props.defaultValue))
+    const reduced = useMediaQuery("(prefers-reduced-motion: reduce)")
+    const frame = useRef<HTMLDivElement>(null)
+    const pill = useRef<HTMLLabelElement>(null)
+    const input = useRef<HTMLInputElement>(null)
+    const geometry = useRef({
+        width: expanded ? 320 : 44,
+        velocity: 0,
+        x: 0,
+        y: 0,
+        vx: 0,
+        vy: 0,
+        pullX: 0,
+        pullY: 0,
+        capacity: 320,
+        raf: 0,
+    })
+    const current = useRef({ expanded, reduced })
+    const wake = useRef<() => void>(() => {})
+    useLayoutEffect(() => {
+        const box = frame.current,
+            label = pill.current,
+            field = input.current
+        if (!box || !label || !field) return
+        const s = geometry.current
+        let previous = 0
+        const tick = (now: number) => {
+            const dt = previous ? Math.min(0.032, (now - previous) / 1000) : 1 / 60
+            previous = now
+            const target = current.current.expanded ? s.capacity : Math.min(44, s.capacity)
+            const pullX = current.current.expanded ? 0 : s.pullX
+            const pullY = current.current.expanded ? 0 : s.pullY
+            const { stiffness, damping, mass } = springs.smooth
+            if (current.current.reduced) {
+                s.width = target
+                s.x = 0
+                s.y = 0
+                s.velocity = 0
+                s.vx = 0
+                s.vy = 0
+            } else {
+                s.velocity += (((target - s.width) * stiffness - s.velocity * damping) / mass) * dt
+                s.width += s.velocity * dt
+                s.vx += (((pullX - s.x) * stiffness - s.vx * damping) / mass) * dt
+                s.vy += (((pullY - s.y) * stiffness - s.vy * damping) / mass) * dt
+                s.x += s.vx * dt
+                s.y += s.vy * dt
+            }
+            label.style.width = `${Math.max(0, s.width)}px`
+            label.style.transform = `translate(${s.x}px, ${s.y}px)`
+            /* One number drives the field's reveal; focus lands with the
+               expansion, so the caret arrives while the shape is growing. */
+            const progress = (s.width - 44) / Math.max(1, s.capacity - 44)
+            field.style.opacity = String(Math.max(0, Math.min(1, (progress - 0.55) / 0.45)))
+            if (
+                Math.abs(s.width - target) < 0.05 &&
+                Math.abs(s.velocity) < 0.05 &&
+                Math.abs(s.x - pullX) + Math.abs(s.y - pullY) + Math.abs(s.vx) + Math.abs(s.vy) <
+                    0.05
+            ) {
+                label.style.width = `${target}px`
+                s.raf = 0
+                previous = 0
+                return
+            }
+            s.raf = requestAnimationFrame(tick)
+        }
+        wake.current = () => {
+            if (!s.raf) s.raf = requestAnimationFrame(tick)
+        }
+        const measure = () => {
+            s.capacity = Math.min(320, box.clientWidth)
+            wake.current()
+        }
+        measure()
+        const observer = new ResizeObserver(measure)
+        observer.observe(box)
+        return () => {
+            observer.disconnect()
+            cancelAnimationFrame(s.raf)
+            s.raf = 0
+        }
+    }, [])
+    useEffect(() => {
+        current.current = { expanded, reduced }
+        wake.current()
+    }, [expanded, reduced])
+    return (
+        <div
+            ref={frame}
+            className={cn(
+                "relative flex h-11 w-full max-w-xs items-center justify-center",
+                className
+            )}
+            onPointerMove={(event) => {
+                if (expanded || reduced || event.pointerType !== "mouse") return
+                // Measure the frame, which stays still; measuring the object being
+                // moved creates a feedback loop and a visible shiver.
+                const rect = event.currentTarget.getBoundingClientRect()
+                const dx = event.clientX - rect.left - rect.width / 2,
+                    dy = event.clientY - rect.top - rect.height / 2
+                const distance = Math.hypot(dx, dy),
+                    pull = Math.max(0, 1 - distance / 72) ** 1.4 * 7
+                geometry.current.pullX = distance ? (dx / distance) * pull : 0
+                geometry.current.pullY = distance ? (dy / distance) * pull : 0
+                wake.current()
+            }}
+            onPointerLeave={() => {
+                geometry.current.pullX = 0
+                geometry.current.pullY = 0
+                wake.current()
+            }}
+        >
+            <label
+                ref={pill}
+                className={cn(
+                    "passui-search-pill control-field relative block h-11 max-w-full overflow-hidden rounded-full",
+                    props.disabled && "opacity-40"
+                )}
+                style={{ width: expanded ? 320 : 44 }}
+            >
+                <SearchIcon
+                    aria-hidden="true"
+                    size={18}
+                    className="pointer-events-none absolute top-1/2 start-[13px] -translate-y-1/2 text-label-secondary"
+                />
+                <input
+                    {...props}
+                    ref={(node) => {
+                        input.current = node
+                        if (typeof inputRef === "function") inputRef(node)
+                        else if (inputRef) inputRef.current = node
+                    }}
+                    type="search"
+                    placeholder={placeholder}
+                    aria-label={
+                        props["aria-labelledby"] ? undefined : (props["aria-label"] ?? placeholder)
+                    }
+                    className="h-11 w-full min-w-0 bg-transparent ps-11 pe-3 text-subheadline text-label outline-none placeholder:text-label-tertiary"
+                    onFocus={(event) => {
+                        setExpanded(true)
+                        props.onFocus?.(event)
+                    }}
+                    onBlur={(event) => {
+                        if (!event.currentTarget.value) setExpanded(false)
+                        props.onBlur?.(event)
+                    }}
+                    onKeyDown={(event) => {
+                        props.onKeyDown?.(event)
+                        if (
+                            !event.defaultPrevented &&
+                            event.key === "Escape" &&
+                            !event.currentTarget.value
+                        ) {
+                            setExpanded(false)
+                            event.currentTarget.blur()
+                        }
+                    }}
+                />
+            </label>
+        </div>
+    )
+}

package/src/components/search-field/search-field.tsx

@@ -1,26 +1,44 @@
 import { forwardRef, type InputHTMLAttributes } from "react"
 import { SearchIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
+import { ExpandingSearchField } from "./expanding-search-field"
 
-export const SearchField = forwardRef<
-    HTMLInputElement,
-    InputHTMLAttributes<HTMLInputElement>
->(function SearchField(
-    { className, placeholder = "Search", ...props },
+export interface SearchFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Expand a single pill from its search icon on focus. @default false */
+    collapsible?: boolean
+}
+
+export const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(function SearchField(
+    { className, placeholder = "Search", collapsible = false, ...props },
     ref
 ) {
+    if (collapsible)
+        return (
+            <ExpandingSearchField
+                {...props}
+                inputRef={ref}
+                className={className}
+                placeholder={placeholder}
+            />
+        )
+    const accessibleName = props["aria-labelledby"]
+        ? undefined
+        : (props["aria-label"] ?? placeholder)
     return (
         <label
             className={cn(
-                "control-field flex items-center gap-2 rounded-lg px-2.5 py-2 text-subheadline text-label-tertiary",
+                "control-field flex items-center gap-2 rounded-full px-3 py-2 text-subheadline text-label-tertiary",
                 className
             )}
         >
-            <SearchIcon size={15} strokeWidth={2} />
+            <span aria-hidden="true" className="shrink-0">
+                <SearchIcon size={15} strokeWidth={2} />
+            </span>
             <input
                 ref={ref}
                 type="search"
                 placeholder={placeholder}
+                aria-label={accessibleName}
                 className="min-w-0 grow bg-transparent text-label outline-none placeholder:text-label-tertiary"
                 {...props}
             />