@passui/react 0.1.19 → 0.1.21

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,31 +1,47 @@
 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 }, ref) {
-        const accessibleName = props["aria-labelledby"]
-            ? undefined
-            : (props["aria-label"] ?? placeholder)
+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 (
-            <label
-                className={cn(
-                    "control-field flex items-center gap-2 rounded-lg px-2.5 py-2 text-subheadline text-label-tertiary",
-                    className
-                )}
-            >
-                <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}
-                />
-            </label>
+            <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-full px-3 py-2 text-subheadline text-label-tertiary",
+                className
+            )}
+        >
+            <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}
+            />
+        </label>
+    )
+})

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

@@ -37,6 +37,10 @@ export function SearchList({
     open?: boolean
 }) {
     const [query, setQuery] = useState("")
+    const updateQuery = useCallback((next: string) => {
+        setQuery(next)
+        setActive("")
+    }, [])
     const [active, setActive] = useState("")
     const [results, setResults] = useState<Record<string, boolean>>({})
     const listId = useId()
@@ -54,14 +58,16 @@ export function SearchList({
             }),
         []
     )
+    useEffect(() => {
+        if (!open) return
+        const available = Object.keys(results).filter((id) => results[id])
+        if (!available.includes(active)) setActive(available[0] ?? "")
+    }, [open, results, active])
     return (
         <SearchContext
             value={{
                 query,
-                setQuery: (next) => {
-                    setQuery(next)
-                    setActive("")
-                },
+                setQuery: updateQuery,
                 active,
                 listId,
                 open,
@@ -75,7 +81,7 @@ export function SearchList({
                 className={cn("relative", className)}
                 onKeyDown={(event) => {
                     onKeyDown?.(event)
-                    if (event.defaultPrevented || !open) return
+                    if (event.defaultPrevented || !open || event.nativeEvent.isComposing) return
                     const items = Array.from(
                         ref.current?.querySelectorAll<HTMLButtonElement>(
                             "[data-search-result]:not([hidden]):not(:disabled)"
@@ -125,13 +131,16 @@ export function SearchListField({
     onValueChange?: (value: string) => void
 }) {
     const search = useSearch()
+    useEffect(() => {
+        if (value !== undefined) search.setQuery(value)
+    }, [value, search.setQuery])
     return (
         <input
             {...props}
             role="combobox"
             aria-autocomplete="list"
             aria-expanded={search.open}
-            aria-controls={search.listId}
+            aria-controls={search.open ? search.listId : undefined}
             aria-activedescendant={search.open && search.active ? search.active : undefined}
             aria-label={props["aria-label"] ?? props.placeholder}
             value={value ?? search.query}
@@ -223,7 +232,7 @@ export function SearchListItem({
             aria-selected={search.active === id}
             data-selected={search.active === id ? "true" : undefined}
             className={cn(
-                "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left hover:bg-fill aria-selected:bg-accent-soft",
+                "flex min-h-9 w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-subheadline text-label hover:bg-fill aria-selected:bg-fill [@media(pointer:coarse)]:min-h-11",
                 className
             )}
             onMouseDown={(event) => {

package/src/components/sheet/sheet.tsx

@@ -13,6 +13,8 @@ export interface SheetProps {
     open: boolean
     /** Called on Escape or an outside press. */
     onClose: () => void
+    /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
+    dismissOnOutsidePress?: boolean
     /** Read out by screen readers as the sheet's name. */
     label: string
     /** ID of a visible heading to use instead of label for the accessible name. */
@@ -41,6 +43,7 @@ export function Sheet({ open, ...props }: SheetProps) {
 
 function OpenSheet({
     onClose,
+    dismissOnOutsidePress = true,
     label,
     labelledBy,
     placement = "adaptive",
@@ -77,7 +80,7 @@ function OpenSheet({
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
-                onClick={onClose}
+                onClick={dismissOnOutsidePress ? onClose : undefined}
             />
             <motion.div
                 ref={panel}

package/src/components/sidebar/sidebar.tsx

@@ -8,7 +8,7 @@ export interface SidebarSectionProps {
 }
 
 export interface SidebarItemContentProps {
-    icon: ReactNode
+    icon?: ReactNode
     /** Optional trailing count. */
     count?: number
     /** Matches the router link's active state. */
@@ -32,24 +32,33 @@ export function SidebarSection({ title, children }: SidebarSectionProps) {
 }
 
 /** Classes for a sidebar row; apply to the app's router link. */
-export function sidebarItemClass(active?: boolean): string {
+export type SidebarDensity = "regular" | "compact"
+
+export function sidebarItemClass(active?: boolean, density: SidebarDensity = "regular"): string {
     return cn(
-        "group flex items-center gap-2.5 rounded-2xl px-2.5 py-[7px] text-subheadline text-label no-underline transition-colors duration-fast",
-        active ? "bg-accent-soft font-medium text-label" : "hover:bg-fill/70"
+        "group flex w-full items-center gap-2.5 text-label no-underline transition-colors duration-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+        density === "compact"
+            ? "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10"
+            : "rounded-2xl px-2.5 py-[7px] text-subheadline",
+        active
+            ? "bg-fill font-medium"
+            : "font-normal text-label-secondary hover:bg-fill/70 hover:text-label"
     )
 }
 
 export function SidebarItemContent({ icon, count, active, children }: SidebarItemContentProps) {
     return (
         <>
-            <span
-                className={cn(
-                    "flex transition-colors",
-                    active ? "text-accent-text" : "text-label-secondary"
-                )}
-            >
-                {icon}
-            </span>
+            {icon && (
+                <span
+                    className={cn(
+                        "flex transition-colors",
+                        active ? "text-accent-text" : "text-label-secondary"
+                    )}
+                >
+                    {icon}
+                </span>
+            )}
             <span className="grow truncate">{children}</span>
             {count !== undefined && (
                 <span

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface SkeletonProps extends ComponentProps<"div"> {
+    label?: string
+}
+/** A loading placeholder that becomes still when Reduce Motion is enabled. */
+export function Skeleton({ label, className, ...props }: SkeletonProps) {
+    return (
+        <div
+            {...props}
+            role={label ? "status" : undefined}
+            aria-hidden={label ? undefined : true}
+            className={cn("min-h-4 rounded-md bg-fill motion-safe:animate-pulse", className)}
+        >
+            {label && <span className="sr-only">{label}</span>}
+        </div>
+    )
+}

package/src/components/slosh-slider/liquid-step.ts

@@ -0,0 +1,42 @@
+import { clampRange } from "../../lib/range-value"
+
+export interface LiquidState {
+    fill: number
+    velocity: number
+}
+
+/** Bencho's frame-normalized liquid spring. See THIRD_PARTY_NOTICES.md. */
+export function stepLiquid(
+    state: LiquidState,
+    target: number,
+    viscosity: number,
+    dt: number
+): LiquidState {
+    const soft = clampRange(viscosity, 0, 100) / 100
+    target = clampRange(target, 0, 100)
+    dt = clampRange(dt, 0, 2.5)
+    if (soft === 0) {
+        /* 0 is an ordinary slider and has to be exactly that,
+           not a very stiff spring that still rings. */
+        return { fill: target, velocity: 0 }
+    }
+    /* Stiffness falls and damping rises together: thin liquid is slow to
+       answer and slow to forget, which is why these are one knob. */
+    const stiff = 0.34 - soft * 0.29
+    const damp = 0.74 + soft * 0.22
+    let velocity = (state.velocity + (target - state.fill) * stiff * dt) * damp ** dt
+    let fill = state.fill + velocity * dt
+    /* The end stop is a wall, and a wall gives some back. Without this
+       the overshoot is swallowed exactly where you are looking at it. */
+    if (fill > 100) {
+        fill = 100
+        velocity = -velocity * 0.42
+    }
+    if (fill < 0) {
+        fill = 0
+        velocity = -velocity * 0.42
+    }
+    if (Math.abs(target - fill) < 0.02 && Math.abs(velocity) < 0.02)
+        return { fill: target, velocity: 0 }
+    return { fill, velocity }
+}