@passui/react 0.1.19 → 0.1.21

package/src/components/popover/anchored-surface.tsx

@@ -0,0 +1,223 @@
+import { springs } from "@passui/tokens/motion"
+import { useMediaQuery } from "../../hooks/use-media-query"
+import { forwardRef, type HTMLAttributes, useLayoutEffect, useRef, useState } from "react"
+import { useAnchoredPlacement } from "../../hooks/use-anchored-placement"
+import { FLOATING_LAYER } from "../../hooks/use-dismiss"
+import { useFloatingDismiss } from "../../hooks/use-floating-dismiss"
+import { cn } from "../../lib/class-names"
+import { registerFloatingLayer } from "../../lib/floating-layers"
+import { concealMenuSource } from "../context-menu/conceal-menu-source"
+import { menuSurfaceReveal } from "../context-menu/menu-reveal"
+
+interface AnchoredSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    open: boolean
+    onExited: () => void
+    anchor: HTMLElement
+    width: number
+    needed: number
+    onClose: (restoreFocus: boolean) => void
+    contentClassName?: string
+}
+
+/** Shared material and lifetime for portaled pickers; their content owns selection. */
+export const AnchoredSurface = forwardRef<HTMLDivElement, AnchoredSurfaceProps>(
+    function AnchoredSurface(
+        {
+            open: present,
+            onExited: remove,
+            anchor,
+            width,
+            needed,
+            onClose,
+            children,
+            className,
+            contentClassName,
+            ...props
+        },
+        forwardedRef
+    ) {
+        const root = useRef<HTMLDivElement>(null)
+        const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
+        const material = useRef<HTMLDivElement>(null)
+        const content = useRef<HTMLDivElement>(null)
+        const animated = useRef<{ values: number[]; velocities: number[]; opacity: number } | null>(
+            null
+        )
+        const placement = useAnchoredPlacement(anchor, width, needed, true)
+        const [geometry, setGeometry] = useState<{
+            source: ReturnType<typeof menuSurfaceReveal>
+            width: number
+            height: number
+            radius: number
+        } | null>(null)
+
+        // biome-ignore lint/correctness/useExhaustiveDependencies: Placement can move without resizing; remeasure the source-relative reveal.
+        useLayoutEffect(() => {
+            const panel = root.current
+            if (!panel || !present) return
+            const measure = () => {
+                const target = panel.getBoundingClientRect()
+                const source = anchor.getBoundingClientRect()
+                const radius = Number.parseFloat(getComputedStyle(panel).borderTopLeftRadius) || 0
+                const reveal = menuSurfaceReveal(source, target)
+                setGeometry((current) =>
+                    current &&
+                    current.width === target.width &&
+                    current.height === target.height &&
+                    current.radius === radius &&
+                    current.source.x === reveal.x &&
+                    current.source.y === reveal.y &&
+                    current.source.width === reveal.width &&
+                    current.source.height === reveal.height
+                        ? current
+                        : { source: reveal, width: target.width, height: target.height, radius }
+                )
+            }
+            measure()
+            const observer = new ResizeObserver(measure)
+            observer.observe(panel)
+            return () => observer.disconnect()
+        }, [anchor, present, placement.left, placement.top, placement.bottom, placement.width])
+
+        useLayoutEffect(() => {
+            if (!root.current) return
+            const unregister = registerFloatingLayer(root.current, anchor)
+            const restore = concealMenuSource(anchor, false)
+            return () => {
+                unregister()
+                restore()
+            }
+        }, [anchor])
+
+        useLayoutEffect(() => {
+            if (!geometry || !material.current || !content.current) {
+                if (!present) remove?.()
+                return
+            }
+            const pane = material.current,
+                body = content.current
+            const source = [
+                geometry.source.x,
+                geometry.source.y,
+                geometry.source.width,
+                geometry.source.height,
+                geometry.source.borderRadius,
+            ]
+            const target = present
+                ? [0, 0, geometry.width, geometry.height, geometry.radius]
+                : source
+            const state = animated.current ?? {
+                values: [...source],
+                velocities: source.map(() => 0),
+                opacity: 0,
+            }
+            animated.current = state
+            let frame = 0,
+                previous = 0
+            const paint = () => {
+                const [x, y, width, height, radius] = state.values
+                pane.style.transform = `translate(${x}px, ${y}px)`
+                pane.style.width = `${Math.max(0, width)}px`
+                pane.style.height = `${Math.max(0, height)}px`
+                pane.style.borderRadius = `${Math.max(0, radius)}px`
+                body.style.opacity = String(state.opacity)
+            }
+            const tick = (now: number) => {
+                const dt = previous ? Math.min(0.032, (now - previous) / 1000) : 1 / 60
+                previous = now
+                const { stiffness, damping, mass } = springs.smooth
+                let resting = true
+                for (let index = 0; index < target.length; index++) {
+                    state.velocities[index] +=
+                        (((target[index] - state.values[index]) * stiffness -
+                            state.velocities[index] * damping) /
+                            mass) *
+                        dt
+                    state.values[index] += state.velocities[index] * dt
+                    if (
+                        Math.abs(target[index] - state.values[index]) > 0.05 ||
+                        Math.abs(state.velocities[index]) > 0.05
+                    )
+                        resting = false
+                }
+                const progress = Math.max(
+                    0,
+                    Math.min(
+                        1,
+                        1 -
+                            Math.abs(geometry.height - state.values[3]) /
+                                Math.max(1, Math.abs(geometry.height - source[3]))
+                    )
+                )
+                const opacity = present ? Math.max(0, (progress - 0.25) / 0.75) : 0
+                state.opacity += (opacity - state.opacity) * (1 - Math.exp(-dt / 0.04))
+                paint()
+                if (resting && Math.abs(opacity - state.opacity) < 0.01) {
+                    state.values = [...target]
+                    state.velocities.fill(0)
+                    state.opacity = present ? 1 : 0
+                    paint()
+                    if (!present) remove?.()
+                    return
+                }
+                frame = requestAnimationFrame(tick)
+            }
+            if (reducedMotion) {
+                state.values = [...target]
+                state.velocities.fill(0)
+                state.opacity = present ? 1 : 0
+                paint()
+                if (!present) remove?.()
+            } else {
+                paint()
+                frame = requestAnimationFrame(tick)
+            }
+            return () => cancelAnimationFrame(frame)
+        }, [geometry, present, remove, reducedMotion])
+
+        useFloatingDismiss(root, anchor, (restore) => {
+            if (present) onClose(restore)
+        })
+
+        return (
+            <div
+                {...props}
+                ref={(node) => {
+                    root.current = node
+                    if (typeof forwardedRef === "function") forwardedRef(node)
+                    else if (forwardedRef) forwardedRef.current = node
+                }}
+                {...{ [FLOATING_LAYER]: "" }}
+                inert={!present}
+                className={cn(
+                    "fixed z-[80] isolate flex min-w-0 flex-col rounded-3xl outline-none",
+                    !present && "pointer-events-none",
+                    className
+                )}
+                style={{
+                    left: placement.left,
+                    top: placement.top,
+                    bottom: placement.bottom,
+                    width: placement.width,
+                    maxHeight: placement.maxHeight ?? 420,
+                }}
+            >
+                <div
+                    ref={material}
+                    aria-hidden="true"
+                    className="glass-menu pointer-events-none absolute top-0 left-0 -z-10"
+                />
+                <div
+                    ref={content}
+                    style={{ opacity: 0 }}
+                    className={cn(
+                        "flex min-h-0 flex-col overflow-y-auto overscroll-contain",
+                        contentClassName
+                    )}
+                >
+                    {children}
+                </div>
+            </div>
+        )
+    }
+)

package/src/components/popover/popover.tsx

@@ -1,16 +1,27 @@
-import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion } from "motion/react"
-import { useLayoutEffect, useRef, useState } from "react"
+import {
+    AnimatePresence,
+    type HTMLMotionProps,
+    motion,
+    useIsPresent,
+    useReducedMotion,
+} from "motion/react"
+import { type ReactNode, type RefObject, useLayoutEffect, useRef, useState } from "react"
+import { concealMenuSource } from "../context-menu/conceal-menu-source"
+import { menuSurfaceReveal } from "../context-menu/menu-reveal"
 import { cn } from "../../lib/class-names"
 import { screenEdges } from "../../lib/screen-edges"
-import { floatingPanelMotion } from "../../motion/transitions"
+import { floatingPanelMotion, spring } from "../../motion/transitions"
 import { fitPopover, type PopoverFit } from "./popover-fit"
 
 export type PopoverOrigin = "top-left" | "top-right"
 
-export interface PopoverProps extends HTMLMotionProps<"div"> {
+export interface PopoverProps extends Omit<HTMLMotionProps<"div">, "children"> {
     open: boolean
+    children?: ReactNode
     /** Which corner the popover grows from. */
     origin?: PopoverOrigin
+    /** Trigger whose shape the popover uses during its opening and closing motion. */
+    anchorRef?: RefObject<HTMLElement | null>
 }
 
 /**
@@ -25,6 +36,7 @@ export function Popover({ open, ...props }: PopoverProps) {
 
 function OpenPopover({
     origin = "top-left",
+    anchorRef,
     className,
     style,
     children,
@@ -32,12 +44,16 @@ function OpenPopover({
 }: Omit<PopoverProps, "open">) {
     const ref = useRef<HTMLDivElement>(null)
     const reducedMotion = useReducedMotion()
+    const present = useIsPresent()
+    const [settled, setSettled] = useState(false)
+    const [material, setMaterial] = useState({ width: 0, height: 0, radius: 0 })
     const [fit, setFit] = useState<PopoverFit>({
         shiftX: 0,
         shiftY: 0,
         maxWidth: 0,
         above: false,
     })
+    const [reveal, setReveal] = useState<ReturnType<typeof menuSurfaceReveal> | null>(null)
     const popoverMotion = floatingPanelMotion(fit.above ? "above" : "below")
 
     useLayoutEffect(() => {
@@ -56,6 +72,14 @@ function OpenPopover({
             element.style.maxWidth = "none"
             const rect = element.getBoundingClientRect()
             const neededHeight = Math.max(rect.height, element.scrollHeight)
+            const radius = Number.parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0
+            setMaterial((current) =>
+                current.width === rect.width &&
+                current.height === neededHeight &&
+                current.radius === radius
+                    ? current
+                    : { width: rect.width, height: neededHeight, radius }
+            )
             element.style.transform = transform
             element.style.translate = translate
             element.style.maxHeight = maxHeight
@@ -70,14 +94,20 @@ function OpenPopover({
                 offsetParent instanceof HTMLElement && offsetParent !== document.body
                     ? offsetParent.getBoundingClientRect()
                     : undefined
+            const trigger = anchorRef?.current?.getBoundingClientRect()
+            const target = {
+                left: trigger
+                    ? origin === "top-right"
+                        ? trigger.right - rect.width
+                        : trigger.left
+                    : rect.left,
+                top: trigger?.top ?? rect.top,
+                width: rect.width,
+                height: neededHeight,
+            }
             const next = fitPopover(
-                {
-                    left: rect.left,
-                    top: rect.top,
-                    width: rect.width,
-                    height: neededHeight,
-                },
-                anchor,
+                target,
+                trigger ?? anchor,
                 {
                     viewport: {
                         width: offsetLeft + (visualViewport?.width ?? window.innerWidth),
@@ -89,9 +119,11 @@ function OpenPopover({
                         top: offsetTop + edges.top,
                     },
                 },
-                6,
+                trigger ? -trigger.height : 6,
                 origin
             )
+            next.shiftX += target.left - rect.left
+            next.shiftY += target.top - rect.top
             setFit((current) => {
                 if (
                     current.shiftX === next.shiftX &&
@@ -125,16 +157,75 @@ function OpenPopover({
             window.removeEventListener("resize", scheduleRefit)
             window.removeEventListener("scroll", scheduleRefit, true)
         }
-    }, [origin])
+    }, [origin, anchorRef])
+
+    useLayoutEffect(() => {
+        const source = anchorRef?.current
+        const panel = ref.current
+        if (!source || !panel) return
+        const sourceRect = source.getBoundingClientRect()
+        const panelRect = panel.getBoundingClientRect()
+        setReveal(
+            menuSurfaceReveal(
+                {
+                    left: sourceRect.left,
+                    top: sourceRect.top,
+                    width: sourceRect.width,
+                    height: sourceRect.height,
+                },
+                {
+                    left: panelRect.left,
+                    top: panelRect.top,
+                    width: fit.maxWidth || panelRect.width,
+                    height: fit.maxHeight
+                        ? Math.min(fit.maxHeight, panelRect.height)
+                        : panelRect.height,
+                }
+            )
+        )
+        const restoreSource = concealMenuSource(source, false)
+        return () => {
+            restoreSource()
+        }
+    }, [anchorRef, fit])
 
     return (
         <motion.div
             ref={ref}
-            {...popoverMotion}
-            initial={reducedMotion ? { opacity: 0 } : popoverMotion.initial}
-            animate={reducedMotion ? { opacity: 1 } : popoverMotion.animate}
-            exit={reducedMotion ? { opacity: 0 } : popoverMotion.exit}
-            transition={reducedMotion ? { duration: 0 } : popoverMotion.transition}
+            {...(!anchorRef && popoverMotion)}
+            initial={
+                anchorRef
+                    ? { "--popover-content-opacity": reducedMotion ? 1 : 0 }
+                    : reducedMotion
+                      ? { opacity: 0 }
+                      : popoverMotion.initial
+            }
+            animate={
+                anchorRef
+                    ? { "--popover-content-opacity": 1 }
+                    : reducedMotion
+                      ? { opacity: 1 }
+                      : popoverMotion.animate
+            }
+            exit={
+                anchorRef
+                    ? {
+                          "--popover-content-opacity": 0,
+                          transition: { duration: reducedMotion ? 0 : 0.06 },
+                      }
+                    : reducedMotion
+                      ? { opacity: 0 }
+                      : popoverMotion.exit
+            }
+            transition={
+                anchorRef
+                    ? reducedMotion
+                        ? { duration: 0 }
+                        : { duration: 0.16, delay: 0.06 }
+                    : reducedMotion
+                      ? { duration: 0 }
+                      : popoverMotion.transition
+            }
             style={{
                 transformOrigin:
                     origin === "top-left"
@@ -143,12 +234,50 @@ function OpenPopover({
                 translate: `${fit.shiftX}px ${fit.shiftY}px`,
                 maxWidth: fit.maxWidth || undefined,
                 maxHeight: fit.maxHeight,
-                overflowY: fit.maxHeight !== undefined ? "auto" : undefined,
+                overflowY:
+                    fit.maxHeight !== undefined && (!anchorRef || (present && settled))
+                        ? "auto"
+                        : undefined,
                 ...style,
             }}
-            className={cn("glass-menu absolute z-40 rounded-5xl", className)}
+            className={cn(
+                anchorRef
+                    ? "isolate [&>:not([data-popover-surface])]:opacity-[var(--popover-content-opacity)]"
+                    : "glass-menu",
+                "absolute z-40 rounded-5xl outline-none",
+                className
+            )}
             {...props}
         >
+            {anchorRef && (
+                <motion.div
+                    key={reveal ? "surface" : "measure"}
+                    aria-hidden="true"
+                    data-popover-surface=""
+                    onAnimationComplete={() => {
+                        if (reveal) setSettled(true)
+                    }}
+                    className="glass-menu pointer-events-none absolute top-0 left-0 -z-10 rounded-5xl"
+                    style={{ width: "100%", height: "100%" }}
+                    initial={reducedMotion || !reveal ? false : reveal}
+                    animate={
+                        reveal
+                            ? {
+                                  x: 0,
+                                  y: 0,
+                                  width: material.width,
+                                  height: fit.maxHeight
+                                      ? Math.min(material.height, fit.maxHeight)
+                                      : material.height,
+                                  opacity: 1,
+                                  borderRadius: material.radius,
+                              }
+                            : undefined
+                    }
+                    exit={reducedMotion ? { opacity: 0 } : (reveal ?? { opacity: 0 })}
+                    transition={reducedMotion ? { duration: 0 } : spring.smooth}
+                />
+            )}
             {children}
         </motion.div>
     )

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

@@ -1,4 +1,5 @@
-import type { HTMLAttributes } from "react"
+import { type HTMLAttributes, useRef } from "react"
+import { useLiquidProgress } from "./use-liquid-progress"
 import { cn } from "../../lib/class-names"
 import { clampRange } from "../../lib/range-value"
 
@@ -33,6 +34,8 @@ export function ProgressView({
     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)}>
@@ -52,9 +55,11 @@ export function ProgressView({
                 )}
             >
                 <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}%` }}

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>
+    )
+}