@passui/react 0.1.19 → 0.1.21

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

@@ -0,0 +1,251 @@
+// 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 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
+    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,
+    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}
+        >
+            {/* 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),
+                        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,
+                        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/stepper/rolling-digit.tsx

@@ -0,0 +1,77 @@
+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]!.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,6 +1,8 @@
 import { useId } from "react"
+import { Button } from "../button/button"
 import { cn } from "../../lib/class-names"
 import { clampRange, stepRange } from "../../lib/range-value"
+import { RollingDigit } from "./rolling-digit"
 
 export interface StepperProps {
     value: number
@@ -35,45 +37,64 @@ export function Stepper({
     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 buttonStyle = cn(
-        "flex size-11 shrink-0 items-center justify-center rounded-xl text-title2 text-accent-text",
-        "transition-colors hover:bg-fill focus-visible:outline-2 focus-visible:outline-offset-2",
-        "focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-35"
-    )
+    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="min-w-0 text-subheadline font-semibold text-label">
+            <span id={id} className="min-w-0 text-subheadline text-label">
                 {label}
             </span>
-            <div className="flex shrink-0 items-center gap-1 rounded-2xl border border-separator bg-elevated p-1">
-                <button
-                    type="button"
-                    aria-label={labels.decrement}
-                    aria-describedby={id}
-                    disabled={disabled || decrement === current}
-                    onClick={() => onChange(decrement)}
-                    className={buttonStyle}
-                >
-                    −
-                </button>
+            <div className="flex shrink-0 items-center gap-3">
                 <output
                     aria-live="polite"
                     aria-labelledby={id}
-                    className="min-w-10 text-center text-subheadline tabular-nums text-label"
+                    className="text-subheadline tabular-nums text-label"
                 >
-                    {formatValue?.(current) ?? current}
+                    <span aria-hidden="true" className="inline-flex items-center">
+                        {Array.from(displayed).map((character, index) => {
+                            if (!/[0-9]/.test(character))
+                                return <span key={`separator-${index}`}>{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>
-                <button
-                    type="button"
-                    aria-label={labels.increment}
-                    aria-describedby={id}
-                    disabled={disabled || increment === current}
-                    onClick={() => onChange(increment)}
-                    className={buttonStyle}
-                >
-                    +
-                </button>
+                <div className="flex items-center divide-x divide-separator overflow-hidden rounded-lg bg-fill">
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        aria-label={labels.decrement}
+                        aria-describedby={id}
+                        disabled={disabled || decrement === current}
+                        onClick={() => onChange(decrement)}
+                        className="size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11"
+                    >
+                        −
+                    </Button>
+                    <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        aria-label={labels.increment}
+                        aria-describedby={id}
+                        disabled={disabled || increment === current}
+                        onClick={() => onChange(increment)}
+                        className="size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11"
+                    >
+                        +
+                    </Button>
+                </div>
             </div>
         </div>
     )

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

@@ -22,6 +22,8 @@ export type TextFieldProps = ComponentProps<"input"> & {
     /** An interactive control after the text, such as a clear button. Size it to the field: an `xs` or `icon-xs` button, never the default. */
     action?: ReactNode
     revealLabels?: { show: string; hide: string }
+    /** Float the label into the outline on focus or when filled. @default "above" */
+    labelPlacement?: "above" | "floating"
 }
 
 export function TextField({
@@ -32,6 +34,8 @@ export function TextField({
     trailingIcon,
     action,
     revealLabels,
+    labelPlacement = "above",
+    placeholder,
     type = "text",
     id: suppliedId,
     className,
@@ -43,11 +47,38 @@ export function TextField({
     const messages = Array.from(new Set(errors))
     const reveal = type === "password" && revealLabels
     return (
-        <div className="flex flex-col gap-2">
-            <label htmlFor={id} className="text-subheadline font-semibold">
-                {label}
-            </label>
-            <div className="flex items-center gap-2 rounded-xl border border-separator bg-elevated px-3 focus-within:ring-1 focus-within:ring-accent/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-text/70">
+        <div className="not-typeset flex flex-col gap-2">
+            {labelPlacement === "above" && (
+                <label htmlFor={id} className="text-subheadline font-semibold">
+                    {label}
+                </label>
+            )}
+            <div
+                className={cn(
+                    "relative flex items-center gap-2 rounded-xl bg-elevated px-3",
+                    labelPlacement === "floating"
+                        ? "passui-floating-field"
+                        : "border border-separator focus-within:ring-1 focus-within:ring-accent/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-text/70"
+                )}
+            >
+                {labelPlacement === "floating" && (
+                    <>
+                        <fieldset aria-hidden="true" className="passui-field-outline">
+                            <legend>
+                                <span>{label}</span>
+                            </legend>
+                        </fieldset>
+                        <label
+                            htmlFor={id}
+                            className={cn(
+                                "passui-floating-label",
+                                icon && "passui-floating-label-with-icon"
+                            )}
+                        >
+                            {label}
+                        </label>
+                    </>
+                )}
                 {icon && (
                     <span aria-hidden className={fieldIconClasses}>
                         {icon}
@@ -57,12 +88,19 @@ export function TextField({
                     {...props}
                     id={id}
                     type={reveal && revealed ? "text" : type}
-                    aria-invalid={messages.length > 0}
+                    placeholder={placeholder ?? (labelPlacement === "floating" ? " " : label)}
+                    aria-invalid={messages.length > 0 || props["aria-invalid"]}
                     aria-describedby={
-                        messages.length || description ? `${id}-description` : undefined
+                        [
+                            props["aria-describedby"],
+                            (messages.length || description) && `${id}-description`,
+                        ]
+                            .filter(Boolean)
+                            .join(" ") || undefined
                     }
                     className={cn(
                         "h-11 w-full min-w-0 bg-transparent text-body text-label outline-none",
+                        labelPlacement === "floating" && "h-12",
                         "placeholder:text-label-tertiary disabled:opacity-40",
                         className
                     )}