@passui/react 0.1.19 → 0.1.20

package/src/components/toggle/toggle.tsx

@@ -1,5 +1,13 @@
-import { motion, useReducedMotion } from "motion/react"
-import { useEffect, useRef } from "react"
+import { CheckIcon } from "../../icons/icons"
+import {
+    animate,
+    motion,
+    useMotionValue,
+    useSpring,
+    useTransform,
+    useReducedMotion,
+} from "motion/react"
+import { useEffect, useId, useRef } from "react"
 import { cn } from "../../lib/class-names"
 import { haptic } from "../../lib/haptics"
 import { spring } from "../../motion/transitions"
@@ -32,29 +40,80 @@ export function Toggle({
     labelHidden = false,
 }: ToggleProps) {
     const input = useRef<HTMLInputElement>(null)
-    const reducedMotion = useReducedMotion()
     useEffect(() => {
         if (input.current) input.current.indeterminate = mixed
     }, [mixed])
     if (style === "checkbox") {
         return (
-            <label className="flex cursor-pointer items-center gap-3 text-subheadline">
-                <input
-                    ref={input}
-                    type="checkbox"
-                    aria-checked={mixed ? "mixed" : checked}
-                    checked={checked}
-                    disabled={disabled}
-                    onChange={(event) => onChange(event.target.checked)}
-                    className={cn(
-                        "size-5 accent-accent",
-                        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text disabled:opacity-40"
+            <label
+                className={cn(
+                    "flex cursor-pointer items-center gap-3 text-subheadline",
+                    disabled && "cursor-not-allowed opacity-40"
+                )}
+            >
+                <span className="relative inline-flex size-5 shrink-0">
+                    <input
+                        ref={input}
+                        type="checkbox"
+                        aria-checked={mixed ? "mixed" : checked}
+                        checked={checked}
+                        disabled={disabled}
+                        onChange={(event) => onChange(event.target.checked)}
+                        className={cn(
+                            "peer size-5 cursor-inherit appearance-none rounded-sm border border-separator/80 bg-elevated transition-colors checked:border-transparent checked:bg-accent indeterminate:border-transparent indeterminate:bg-accent motion-reduce:transition-none",
+                            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text"
+                        )}
+                    />
+                    {mixed ? (
+                        <span
+                            aria-hidden="true"
+                            className="pointer-events-none absolute inset-0 m-auto h-0.5 w-2.5 rounded-full bg-on-accent"
+                        />
+                    ) : (
+                        <CheckIcon
+                            aria-hidden="true"
+                            size={14}
+                            strokeWidth={2.5}
+                            className="pointer-events-none absolute inset-0 m-auto text-on-accent opacity-0 peer-checked:opacity-100"
+                        />
                     )}
-                />
+                </span>
                 <span className={labelHidden ? "sr-only" : undefined}>{label}</span>
             </label>
         )
     }
+    return <SwitchToggle checked={checked} onChange={onChange} label={label} disabled={disabled} />
+}
+
+function SwitchToggle({
+    checked,
+    onChange,
+    label,
+    disabled,
+}: Pick<ToggleProps, "checked" | "onChange" | "label" | "disabled">) {
+    const reducedMotion = useReducedMotion()
+    const id = `toggle-goo-${useId().replace(/:/g, "")}`
+    const x = useMotionValue(checked ? 22 : 2)
+    // One position owns the thumb. The drop follows that position, not a delayed target.
+    const chase = useSpring(x, spring.snappy)
+    const dropX = useTransform(chase, (value) => value + 5)
+    const gesture = useRef({ start: 0, x: 0, moved: false, skipClick: false, held: false })
+    useEffect(() => {
+        if (reducedMotion) {
+            x.set(checked ? 22 : 2)
+            return
+        }
+        const animation = animate(x, checked ? 22 : 2, spring.snappy)
+        return () => animation.stop()
+    }, [checked, reducedMotion, x])
+    const choose = (next: boolean) => {
+        if (disabled) return
+        haptic("selection")
+        if (next !== checked) onChange(next)
+        // Releasing on the current side still needs a settling spring.
+        if (reducedMotion) x.set(next ? 22 : 2)
+        else animate(x, next ? 22 : 2, spring.snappy)
+    }
     return (
         <button
             type="button"
@@ -63,27 +122,85 @@ export function Toggle({
             aria-label={label}
             disabled={disabled}
             onClick={() => {
-                haptic("selection")
-                onChange(!checked)
+                if (gesture.current.skipClick) {
+                    gesture.current.skipClick = false
+                    return
+                }
+                choose(!checked)
+            }}
+            onPointerDown={(event) => {
+                if (event.button !== 0 || disabled) return
+                event.currentTarget.setPointerCapture(event.pointerId)
+                gesture.current = {
+                    start: event.clientX,
+                    x: x.get(),
+                    moved: false,
+                    skipClick: false,
+                    held: true,
+                }
+            }}
+            onPointerMove={(event) => {
+                const drag = gesture.current
+                if (!drag.held || disabled) return
+                const direction = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+                const delta = (event.clientX - drag.start) * direction
+                if (Math.abs(delta) > 3) drag.moved = true
+                if (drag.moved) x.set(Math.max(2, Math.min(22, drag.x + delta)))
+            }}
+            onPointerUp={() => {
+                const drag = gesture.current
+                if (!drag.held) return
+                drag.held = false
+                if (!drag.moved) return
+                drag.skipClick = true
+                choose(x.get() >= 12)
+            }}
+            onPointerCancel={() => {
+                gesture.current.held = false
+                gesture.current.skipClick = false
+                choose(checked)
             }}
             className={cn(
-                "group/switch flex h-[30px] w-[50px] shrink-0 items-center rounded-full p-[2px] transition-colors duration-normal",
+                "relative h-[30px] w-[50px] shrink-0 touch-pan-y rounded-full transition-colors duration-normal motion-reduce:transition-none",
                 "shadow-[inset_0_1px_2px_rgb(0_0_0/0.10)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:opacity-45",
-                checked
-                    ? "justify-end bg-accent ring-1 ring-accent-text"
-                    : "justify-start bg-separator/80"
+                checked ? "bg-accent" : "bg-separator/80"
             )}
         >
-            {/* The thumb stretches while pressed, as on iOS. */}
-            <motion.span
-                layout={!reducedMotion}
-                transition={reducedMotion ? { duration: 0 } : spring.snappy}
-                className={cn(
-                    "h-[26px] w-[26px] rounded-full bg-white shadow-[0_0_0_0.5px_rgb(0_0_0/0.04),0_2px_4px_rgb(0_0_0/0.16),0_3px_8px_rgb(0_0_0/0.10)]",
-                    !reducedMotion &&
-                        "transition-[width] duration-fast group-active/switch:w-[32px]"
+            <svg aria-hidden="true" width="0" height="0" className="absolute">
+                <defs>
+                    <filter
+                        id={id}
+                        x="-50%"
+                        y="-100%"
+                        width="200%"
+                        height="300%"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feGaussianBlur stdDeviation="2.5" result="smear" />
+                        <feColorMatrix
+                            in="smear"
+                            type="matrix"
+                            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
+                        />
+                    </filter>
+                </defs>
+            </svg>
+            <span
+                aria-hidden="true"
+                className="pointer-events-none absolute inset-0 rtl:-scale-x-100"
+                style={{ filter: reducedMotion ? undefined : `url(#${id})` }}
+            >
+                {!reducedMotion && (
+                    <motion.span
+                        className="absolute top-[7px] left-0 size-4 rounded-full bg-white"
+                        style={{ x: dropX }}
+                    />
                 )}
-            />
+                <motion.span
+                    className="absolute top-0.5 left-0 size-[26px] rounded-full bg-white"
+                    style={{ x }}
+                />
+            </span>
         </button>
     )
 }

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

@@ -0,0 +1,237 @@
+import { clampRange as clamp } from "../../lib/range-value"
+// Adapted from Bencho. See THIRD_PARTY_NOTICES.md for the MIT notice.
+import { type CSSProperties, useEffect, useRef, useState } from "react"
+import { useMediaQuery } from "../../hooks/use-media-query"
+import { cn } from "../../lib/class-names"
+
+/* ══ Wake slider ══════════════════════════════════════════
+   A range with no thumb: a row of thin bars, solid up to the
+   value and faint after it, with the reading beside them. Drag
+   anywhere along it. Drag slowly and the bars simply fill; drag
+   fast and every bar the value sweeps past springs up, taller the
+   faster you went, and settles back — a wake left behind the hand.
+
+   ── EACH BAR HOLDS A LITTLE ENERGY ──────────────────────
+   When the value crosses a bar, that bar takes energy from the
+   speed of the drag. Every frame all of it decays at the same
+   rate, so the bars crossed longest ago have fallen furthest: the
+   tallest ones are always at the hand and the run tails off
+   behind it. That falloff IS the wake; nothing draws it.
+
+   ── WRITTEN, NOT RENDERED ───────────────────────────────
+   The heights change every frame, so they go straight onto each
+   bar's transform from a ref. React renders when the value
+   changes, which is what the reading and the colours need, and
+   the loop runs only while some bar still has energy. */
+
+const H = 20 // a bar at rest, px
+
+export interface WakeSliderProps {
+    label: string
+    value?: number
+    defaultValue?: number
+    onChange?: (value: number) => void
+    bars?: number
+    wake?: number
+    disabled?: boolean
+    className?: string
+    formatValue?: (value: number) => string
+}
+
+export function WakeSlider({
+    label,
+    value: controlledValue,
+    defaultValue = 50,
+    onChange,
+    disabled = false,
+    className,
+    formatValue,
+    /* how many bars make the track */
+    bars = 36,
+    /* how high the wake rises, 0..100 */
+    wake = 60,
+}: WakeSliderProps) {
+    const n = Math.round(clamp(Number.isFinite(bars) ? bars : 36, 12, 64))
+    const reduced = useMediaQuery("(prefers-reduced-motion: reduce)")
+    const [value, setValue] = useState(() => clamp(controlledValue ?? defaultValue, 0, 100))
+    const track = useRef<HTMLDivElement | null>(null)
+    const els = useRef<(HTMLSpanElement | null)[]>([])
+    const st = useRef({
+        energy: new Float32Array(n),
+        down: false,
+        lastX: 0,
+        lastT: 0,
+        speed: 0,
+        raf: 0,
+        at: value / 100, // the value as a fraction, without React in the way
+        lastBar: -1,
+    })
+    const knob = useRef(wake)
+    knob.current = reduced ? 0 : clamp(wake, 0, 100)
+    useEffect(() => {
+        if (controlledValue === undefined) return
+        const next = clamp(controlledValue, 0, 100)
+        st.current.at = next / 100
+        setValue(next)
+    }, [controlledValue])
+
+    useEffect(() => {
+        if (!reduced) return
+        cancelAnimationFrame(st.current.raf)
+        st.current.raf = 0
+        st.current.energy.fill(0)
+        for (const bar of els.current) if (bar) bar.style.transform = "none"
+    }, [reduced])
+
+    /* a new bar count is a new row */
+    useEffect(() => {
+        st.current.energy = new Float32Array(n)
+    }, [n])
+
+    const loop = () => {
+        const s = st.current
+        if (s.raf) return
+        let prev = performance.now()
+        const run = (now: number) => {
+            const dt = Math.min(0.05, (now - prev) / 1000)
+            prev = now
+            let live = false
+            const fall = Math.exp(-dt * 6.5)
+            for (let i = 0; i < s.energy.length; i++) {
+                s.energy[i] *= fall
+                if (s.energy[i] < 0.002) s.energy[i] = 0
+                else live = true
+                const b = els.current[i]
+                /* up to 2.6 times as tall at the very top of the knob */
+                if (b) b.style.transform = `scaleY(${(1 + s.energy[i] * 1.6).toFixed(3)})`
+            }
+            s.raf = live ? requestAnimationFrame(run) : 0
+        }
+        s.raf = requestAnimationFrame(run)
+    }
+
+    useEffect(() => () => cancelAnimationFrame(st.current.raf), [])
+
+    /* move the value to a fraction, waking every bar it passes */
+    const to = (f: number, speed: number) => {
+        const s = st.current
+        f = clamp(f, 0, 1)
+        const from = s.at
+        s.at = f
+        const a = Math.round(from * (n - 1)),
+            b = Math.round(f * (n - 1))
+        /* how hard: the drag's speed in bars per second, through a
+       curve that saturates, scaled by the knob */
+        const push = (1 - Math.exp(-speed / 900)) * (knob.current / 60)
+        const lo = Math.min(a, b),
+            hi = Math.max(a, b)
+        for (let i = lo; i <= hi; i++) s.energy[i] = Math.max(s.energy[i], push)
+        if (b !== s.lastBar) {
+            s.lastBar = b
+        }
+        const next = Math.round(f * 100)
+        setValue(next)
+        onChange?.(next)
+        if (!reduced && knob.current > 0) loop()
+    }
+
+    const frac = (clientX: number) => {
+        const r = track.current!.getBoundingClientRect()
+        const fraction = r.width ? (clientX - r.left) / r.width : 0
+        return getComputedStyle(track.current!).direction === "rtl" ? 1 - fraction : fraction
+    }
+
+    const lit = Math.round((value / 100) * (n - 1))
+
+    return (
+        <div className={cn("passui-wake-slider not-typeset", disabled && "opacity-40", className)}>
+            <div
+                ref={track}
+                className="passui-wake-track"
+                role="slider"
+                tabIndex={disabled ? -1 : 0}
+                aria-label={label}
+                aria-disabled={disabled || undefined}
+                aria-valuetext={formatValue?.(value)}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={value}
+                style={{ height: H * 2.6, "--wake-bars": n } as CSSProperties}
+                onPointerDown={(e) => {
+                    if (disabled || e.button !== 0) return
+                    e.currentTarget.focus()
+                    const s = st.current
+                    try {
+                        e.currentTarget.setPointerCapture(e.pointerId)
+                    } catch {
+                        /* a scripted pointer */
+                    }
+                    s.down = true
+                    s.lastX = e.clientX
+                    s.lastT = performance.now()
+                    s.speed = 0
+                    to(frac(e.clientX), 0)
+                }}
+                onPointerMove={(e) => {
+                    const s = st.current
+                    if (!s.down || disabled) return
+                    const now = performance.now()
+                    const dt = Math.max(0.008, (now - s.lastT) / 1000)
+                    /* speed in px per second, smoothed so one jittery frame
+             cannot fake a fling */
+                    const v = Math.abs(e.clientX - s.lastX) / dt
+                    s.speed = s.speed * 0.5 + v * 0.5
+                    s.lastX = e.clientX
+                    s.lastT = now
+                    to(frac(e.clientX), s.speed)
+                }}
+                onPointerUp={(e) => {
+                    st.current.down = false
+                    try {
+                        e.currentTarget.releasePointerCapture(e.pointerId)
+                    } catch {
+                        /* never captured */
+                    }
+                }}
+                onLostPointerCapture={() => {
+                    st.current.down = false
+                }}
+                onPointerCancel={() => {
+                    st.current.down = false
+                }}
+                onKeyDown={(e) => {
+                    if (disabled) return
+                    const step = e.shiftKey ? 10 : 1
+                    let next: number | null = null
+                    const rtl = getComputedStyle(e.currentTarget).direction === "rtl"
+                    if (e.key === "ArrowUp" || e.key === (rtl ? "ArrowLeft" : "ArrowRight"))
+                        next = value + step
+                    if (e.key === "ArrowDown" || e.key === (rtl ? "ArrowRight" : "ArrowLeft"))
+                        next = value - step
+                    if (e.key === "Home") next = 0
+                    if (e.key === "End") next = 100
+                    if (next === null) return
+                    e.preventDefault()
+                    /* a key press is a small, quick step: a little wake */
+                    to(clamp(next, 0, 100) / 100, 600)
+                }}
+            >
+                {Array.from({ length: n }, (_, i) => (
+                    <span
+                        key={i}
+                        ref={(b) => {
+                            els.current[i] = b
+                        }}
+                        aria-hidden="true"
+                        className="passui-wake-bar"
+                        data-on={(value > 0 && i <= lit) || undefined}
+                        style={{ height: H }}
+                    />
+                ))}
+            </div>
+            <span aria-hidden="true" className="passui-wake-value">
+                {formatValue?.(value) ?? value}
+            </span>
+        </div>
+    )
+}

package/src/hooks/use-anchored-disclosure.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useState } from "react"
+
+/** Keep the panel mounted until its material has returned to the trigger. */
+export function useAnchoredDisclosure(disabled = false) {
+    const [open, setOpen] = useState(false)
+    const [mounted, setMounted] = useState(false)
+    useEffect(() => {
+        if (disabled) setOpen(false)
+    }, [disabled])
+    const show = useCallback(() => {
+        setMounted(true)
+        setOpen(true)
+    }, [])
+    const toggle = useCallback(() => {
+        setMounted(true)
+        setOpen((current) => !current)
+    }, [])
+    const close = useCallback(() => setOpen(false), [])
+    const onExited = useCallback(() => {
+        if (!open || disabled) setMounted(false)
+    }, [open, disabled])
+    return { open: open && !disabled, mounted, show, toggle, close, onExited }
+}

package/src/hooks/use-anchored-placement.ts

@@ -9,12 +9,15 @@ import { type AnchoredPlacement, placeAnchored } from "../lib/anchored-placement
 export function useAnchoredPlacement(
     anchor: HTMLElement,
     width: number,
-    needed: number
+    needed: number,
+    overlap = false
 ): AnchoredPlacement {
-    const [placement, setPlacement] = useState(() => placeAnchored(anchor, width, needed))
+    const [placement, setPlacement] = useState(() =>
+        placeAnchored(anchor, width, needed, 6, overlap)
+    )
 
     useLayoutEffect(() => {
-        const replace = () => setPlacement(placeAnchored(anchor, width, needed))
+        const replace = () => setPlacement(placeAnchored(anchor, width, needed, 6, overlap))
         replace()
         const viewport = window.visualViewport
         viewport?.addEventListener("resize", replace)
@@ -27,7 +30,7 @@ export function useAnchoredPlacement(
             window.removeEventListener("resize", replace)
             window.removeEventListener("scroll", replace, true)
         }
-    }, [anchor, width, needed])
+    }, [anchor, width, needed, overlap])
 
     return placement
 }