@passui/react 0.1.16 → 0.1.19

package/src/components/toast/toaster.tsx

@@ -1,11 +1,5 @@
-import { AnimatePresence, motion } from "motion/react"
-import {
-    useEffect,
-    useLayoutEffect,
-    useRef,
-    useState,
-    useSyncExternalStore,
-} from "react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import { useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react"
 import { CheckIcon, CloseIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 import { spring } from "../../motion/transitions"
@@ -19,7 +13,6 @@ import {
 } from "./toast-store"
 
 const PILL = 40
-const GOO_FILTER_ID = "nt-toast-goo"
 const EMPTY: Toast[] = []
 /** A little loose, so the body overshoots and settles like a drop of honey. */
 const BODY_SPRING = {
@@ -37,22 +30,22 @@ const BODY_SPRING = {
  */
 export function Toaster({
     className,
+    label = "Notifications",
 }: {
     className?: string
+    label?: string
 }) {
-    const toasts = useSyncExternalStore(
-        subscribeToasts,
-        getToasts,
-        () => EMPTY
-    )
+    const toasts = useSyncExternalStore(subscribeToasts, getToasts, () => EMPTY)
+    const filterId = useId()
+    const reducedMotion = useReducedMotion()
     const [hovered, setHovered] = useState(false)
     const visible = toasts.slice(0, toastLimits.visible)
 
     return (
         <>
-            <GooFilter />
+            <GooFilter id={filterId} />
             <section
-                aria-label="Notifications"
+                aria-label={label}
                 aria-live="polite"
                 className={cn(
                     "pointer-events-none fixed inset-x-0 top-[max(10px,env(safe-area-inset-top))] z-[60] flex justify-center px-3",
@@ -72,6 +65,8 @@ export function Toaster({
                                 index={index}
                                 expanded={hovered}
                                 paused={hovered}
+                                filterId={filterId}
+                                reducedMotion={Boolean(reducedMotion)}
                             />
                         ))}
                     </AnimatePresence>
@@ -81,30 +76,19 @@ export function Toaster({
     )
 }
 
-function GooFilter() {
+function GooFilter({ id }: { id: string }) {
     return (
-        <svg
-            aria-hidden="true"
-            className="pointer-events-none absolute size-0"
-        >
+        <svg aria-hidden="true" className="pointer-events-none absolute size-0">
             <defs>
-                <filter id={GOO_FILTER_ID}>
-                    <feGaussianBlur
-                        in="SourceGraphic"
-                        stdDeviation="7"
-                        result="blur"
-                    />
+                <filter id={id}>
+                    <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
                     <feColorMatrix
                         in="blur"
                         mode="matrix"
                         values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10"
                         result="goo"
                     />
-                    <feComposite
-                        in="SourceGraphic"
-                        in2="goo"
-                        operator="atop"
-                    />
+                    <feComposite in="SourceGraphic" in2="goo" operator="atop" />
                 </filter>
             </defs>
         </svg>
@@ -116,11 +100,15 @@ function ToastItem({
     index,
     expanded,
     paused,
+    filterId,
+    reducedMotion,
 }: {
     toast: Toast
     index: number
     expanded: boolean
     paused: boolean
+    filterId: string
+    reducedMotion: boolean
 }) {
     const content = useRef<HTMLDivElement>(null)
     const [size, setSize] = useState({
@@ -131,9 +119,9 @@ function ToastItem({
 
     // The body flows out of the pill a beat after it lands.
     useEffect(() => {
-        const timer = setTimeout(() => setOpen(true), 140)
+        const timer = setTimeout(() => setOpen(true), reducedMotion ? 0 : 140)
         return () => clearTimeout(timer)
-    }, [])
+    }, [reducedMotion])
 
     useLayoutEffect(() => {
         const element = content.current
@@ -151,10 +139,7 @@ function ToastItem({
 
     useEffect(() => {
         if (toast.duration === null || paused) return
-        const timer = setTimeout(
-            () => toastApi.dismiss(toast.id),
-            toast.duration
-        )
+        const timer = setTimeout(() => toastApi.dismiss(toast.id), toast.duration)
         return () => clearTimeout(timer)
     }, [toast.id, toast.duration, paused])
 
@@ -165,33 +150,31 @@ function ToastItem({
 
     return (
         <motion.li
-            layout
+            layout={!reducedMotion}
             className="pointer-events-none absolute inset-x-0 top-0 flex justify-center"
             style={{ zIndex: 10 - index }}
-            initial={{ opacity: 0, y: -24, scale: 0.6 }}
+            initial={reducedMotion ? false : { opacity: 0, y: -24, scale: 0.6 }}
             animate={{
                 opacity: stacked ? 1 - index * 0.25 : 1,
-                y: stacked
-                    ? index * 9
-                    : index * (PILL + 14) + index * 6,
+                y: stacked ? index * 9 : index * (PILL + 14) + index * 6,
                 scale: stacked ? 1 - index * 0.05 : 1,
             }}
-            exit={{
-                opacity: 0,
-                y: -18,
-                scale: 0.6,
-                transition: spring.snappy,
-            }}
-            transition={spring.bouncy}
-            drag="y"
+            exit={
+                reducedMotion
+                    ? { opacity: 0 }
+                    : {
+                          opacity: 0,
+                          y: -18,
+                          scale: 0.6,
+                          transition: spring.snappy,
+                      }
+            }
+            transition={reducedMotion ? { duration: 0 } : spring.bouncy}
+            drag={reducedMotion ? false : "y"}
             dragConstraints={{ top: 0, bottom: 0 }}
             dragElastic={{ top: 0.6, bottom: 0.1 }}
             onDragEnd={(_, info) => {
-                if (
-                    info.offset.y < -30 ||
-                    info.velocity.y < -300
-                )
-                    toastApi.dismiss(toast.id)
+                if (info.offset.y < -30 || info.velocity.y < -300) toastApi.dismiss(toast.id)
             }}
         >
             <motion.div
@@ -199,21 +182,21 @@ function ToastItem({
                 className="pointer-events-auto relative"
                 initial={{ width: PILL, height: PILL }}
                 animate={{ width, height }}
-                transition={BODY_SPRING}
+                transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
             >
                 {/* Shapes, under the goo filter; padded so the blur isn't clipped. */}
                 <div
                     aria-hidden="true"
                     className="absolute -inset-3"
                     style={{
-                        filter: `url(#${GOO_FILTER_ID})`,
+                        filter: reducedMotion ? undefined : `url(#${filterId})`,
                     }}
                 >
                     <motion.span
                         className="absolute top-3 left-3 rounded-full bg-inverse shadow-xl"
                         style={{ width: PILL, height: PILL }}
                         animate={{ scale: open ? 1 : 1.06 }}
-                        transition={spring.bouncy}
+                        transition={reducedMotion ? { duration: 0 } : spring.bouncy}
                     />
                     <motion.span
                         className="absolute top-3 left-3 bg-inverse"
@@ -225,13 +208,9 @@ function ToastItem({
                         animate={{
                             width,
                             height,
-                            borderRadius: Math.min(
-                                PILL / 2,
-                                height / 2,
-                                22
-                            ),
+                            borderRadius: Math.min(PILL / 2, height / 2, 22),
                         }}
-                        transition={BODY_SPRING}
+                        transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
                     />
                 </div>
 
@@ -241,36 +220,45 @@ function ToastItem({
                     className="absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2.5 py-[10px] pr-4 pl-[10px] text-on-inverse"
                     style={{ minHeight: PILL }}
                     animate={{ opacity: open ? 1 : 0 }}
-                    transition={{
-                        duration: open ? 0.22 : 0.1,
-                        delay: open ? 0.08 : 0,
-                    }}
+                    transition={
+                        reducedMotion
+                            ? { duration: 0 }
+                            : {
+                                  duration: open ? 0.22 : 0.1,
+                                  delay: open ? 0.08 : 0,
+                              }
+                    }
                 >
-                    <ToneIcon tone={toast.tone} />
+                    <ToneIcon tone={toast.tone} reducedMotion={reducedMotion} />
                     <div className="flex min-w-0 flex-col py-px">
-                        <AnimatePresence
-                            mode="popLayout"
-                            initial={false}
-                        >
+                        <AnimatePresence mode="popLayout" initial={false}>
                             <motion.span
                                 key={toast.title}
                                 className="text-subheadline leading-5 font-semibold"
-                                initial={{
-                                    opacity: 0,
-                                    y: 6,
-                                    filter: "blur(4px)",
-                                }}
+                                initial={
+                                    reducedMotion
+                                        ? false
+                                        : {
+                                              opacity: 0,
+                                              y: 6,
+                                              filter: "blur(4px)",
+                                          }
+                                }
                                 animate={{
                                     opacity: 1,
                                     y: 0,
                                     filter: "blur(0px)",
                                 }}
-                                exit={{
-                                    opacity: 0,
-                                    y: -6,
-                                    filter: "blur(4px)",
-                                }}
-                                transition={spring.snappy}
+                                exit={
+                                    reducedMotion
+                                        ? { opacity: 0 }
+                                        : {
+                                              opacity: 0,
+                                              y: -6,
+                                              filter: "blur(4px)",
+                                          }
+                                }
+                                transition={reducedMotion ? { duration: 0 } : spring.snappy}
                             >
                                 {toast.title}
                             </motion.span>
@@ -306,7 +294,7 @@ const toneColors: Record<ToastTone, string> = {
     loading: "bg-on-inverse/15 text-on-inverse",
 }
 
-function ToneIcon({ tone }: { tone: ToastTone }) {
+function ToneIcon({ tone, reducedMotion }: { tone: ToastTone; reducedMotion: boolean }) {
     return (
         <AnimatePresence mode="popLayout" initial={false}>
             <motion.span
@@ -315,37 +303,35 @@ function ToneIcon({ tone }: { tone: ToastTone }) {
                     "flex size-5 shrink-0 items-center justify-center rounded-full",
                     toneColors[tone]
                 )}
-                initial={{
-                    scale: 0.3,
-                    opacity: 0,
-                    rotate: -40,
-                }}
+                initial={
+                    reducedMotion
+                        ? false
+                        : {
+                              scale: 0.3,
+                              opacity: 0,
+                              rotate: -40,
+                          }
+                }
                 animate={{ scale: 1, opacity: 1, rotate: 0 }}
                 exit={{ scale: 0.3, opacity: 0 }}
-                transition={spring.bouncy}
+                transition={reducedMotion ? { duration: 0 } : spring.bouncy}
             >
-                {tone === "success" && (
-                    <CheckIcon size={13} strokeWidth={3} />
-                )}
-                {tone === "error" && (
-                    <CloseIcon size={12} strokeWidth={3} />
-                )}
+                {tone === "success" && <CheckIcon size={13} strokeWidth={3} />}
+                {tone === "error" && <CloseIcon size={12} strokeWidth={3} />}
                 {/* The full stop from the Notables mark. */}
-                {tone === "neutral" && (
-                    <span className="size-2 rounded-full bg-[#EE8A2A]" />
-                )}
-                {tone === "loading" && <Spinner />}
+                {tone === "neutral" && <span className="size-2 rounded-full bg-[#EE8A2A]" />}
+                {tone === "loading" && <Spinner reducedMotion={reducedMotion} />}
             </motion.span>
         </AnimatePresence>
     )
 }
 
-function Spinner() {
+function Spinner({ reducedMotion }: { reducedMotion: boolean }) {
     return (
         <motion.svg
             viewBox="0 0 20 20"
             className="size-4"
-            animate={{ rotate: 360 }}
+            animate={reducedMotion ? undefined : { rotate: 360 }}
             transition={{
                 repeat: Number.POSITIVE_INFINITY,
                 duration: 0.8,

package/src/components/toggle/toggle.tsx

@@ -1,4 +1,4 @@
-import { motion } from "motion/react"
+import { motion, useReducedMotion } from "motion/react"
 import { useEffect, useRef } from "react"
 import { cn } from "../../lib/class-names"
 import { haptic } from "../../lib/haptics"
@@ -6,6 +6,22 @@ import { spring } from "../../motion/transitions"
 
 export type ToggleStyle = "switch" | "checkbox"
 
+export interface ToggleProps {
+    /** Current on or off state. */
+    checked: boolean
+    /** Called with the next checked state. */
+    onChange: (checked: boolean) => void
+    /** Accessible name, including when the visible label is hidden. */
+    label: string
+    disabled?: boolean
+    /** `switch` for a setting, `checkbox` for a selection. @default "switch" */
+    style?: ToggleStyle
+    /** Reports a mixed selection to assistive technology. @default false */
+    mixed?: boolean
+    /** Keeps the accessible name while hiding the visible label. @default false */
+    labelHidden?: boolean
+}
+
 export function Toggle({
     checked,
     onChange,
@@ -14,17 +30,9 @@ export function Toggle({
     style = "switch",
     mixed = false,
     labelHidden = false,
-}: {
-    checked: boolean
-    onChange: (checked: boolean) => void
-    label: string
-    /** Shown but not yet usable, as iOS dims a switch it can't change. */
-    disabled?: boolean
-    style?: ToggleStyle
-    mixed?: boolean
-    labelHidden?: boolean
-}) {
+}: ToggleProps) {
     const input = useRef<HTMLInputElement>(null)
+    const reducedMotion = useReducedMotion()
     useEffect(() => {
         if (input.current) input.current.indeterminate = mixed
     }, [mixed])
@@ -37,21 +45,13 @@ export function Toggle({
                     aria-checked={mixed ? "mixed" : checked}
                     checked={checked}
                     disabled={disabled}
-                    onChange={(event) =>
-                        onChange(event.target.checked)
-                    }
+                    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"
                     )}
                 />
-                <span
-                    className={
-                        labelHidden ? "sr-only" : undefined
-                    }
-                >
-                    {label}
-                </span>
+                <span className={labelHidden ? "sr-only" : undefined}>{label}</span>
             </label>
         )
     }
@@ -76,9 +76,13 @@ export function Toggle({
         >
             {/* The thumb stretches while pressed, as on iOS. */}
             <motion.span
-                layout
-                transition={spring.snappy}
-                className="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)] transition-[width] duration-fast group-active/switch:w-[32px]"
+                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]"
+                )}
             />
         </button>
     )

package/src/components/tooltip/tooltip-host.tsx

@@ -1,5 +1,6 @@
-import { AnimatePresence, motion } from "motion/react"
-import { useEffect, useState } from "react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import { spring } from "../../motion/transitions"
+import { useEffect, useId, useState } from "react"
 
 interface Tip {
     text: string
@@ -21,30 +22,33 @@ const MARGIN = 8
  */
 export function TooltipHost() {
     const [tip, setTip] = useState<Tip | null>(null)
+    const tooltipId = useId()
+    const reducedMotion = useReducedMotion()
 
     useEffect(() => {
-        if (
-            !window.matchMedia(
-                "(hover: hover) and (pointer: fine)"
-            ).matches
-        )
-            return
+        const canHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches
         let timer: ReturnType<typeof setTimeout> | undefined
         let current: Element | null = null
         let lastShown = 0
+        let described: Element | null = null
+        let previousDescription: string | null = null
+
+        const restoreDescription = () => {
+            if (!described) return
+            if (previousDescription === null) described.removeAttribute("aria-describedby")
+            else described.setAttribute("aria-describedby", previousDescription)
+            described = null
+        }
 
         const show = (element: Element) => {
             const text = element.getAttribute("data-tooltip")
             if (!text) return
             const rect = element.getBoundingClientRect()
-            const above =
-                rect.bottom + 40 > window.innerHeight
+            const above = rect.bottom + 40 > window.innerHeight
             setTip({
                 text,
                 x: rect.left + rect.width / 2,
-                y: above
-                    ? rect.top - MARGIN
-                    : rect.bottom + MARGIN,
+                y: above ? rect.top - MARGIN : rect.bottom + MARGIN,
                 above,
             })
             lastShown = Date.now()
@@ -53,13 +57,12 @@ export function TooltipHost() {
             clearTimeout(timer)
             if (current) lastShown = Date.now()
             current = null
+            restoreDescription()
             setTip(null)
         }
         const onOver = (event: PointerEvent) => {
-            const element =
-                (event.target as Element | null)?.closest?.(
-                    "[data-tooltip]"
-                ) ?? null
+            if (!canHover) return
+            const element = (event.target as Element | null)?.closest?.("[data-tooltip]") ?? null
             if (element === current) return
             clearTimeout(timer)
             current = element
@@ -71,82 +74,81 @@ export function TooltipHost() {
             if (warm) show(element)
             else {
                 setTip(null)
-                timer = setTimeout(
-                    () =>
-                        current === element && show(element),
-                    DELAY
-                )
+                timer = setTimeout(() => current === element && show(element), DELAY)
             }
         }
+        const onFocus = (event: FocusEvent) => {
+            const element = (event.target as Element | null)?.closest?.("[data-tooltip]") ?? null
+            if (!element) return
+            hide()
+            current = element
+            described = element
+            previousDescription = element.getAttribute("aria-describedby")
+            element.setAttribute(
+                "aria-describedby",
+                [previousDescription, tooltipId].filter(Boolean).join(" ")
+            )
+            show(element)
+        }
+        const onBlur = (event: FocusEvent) => {
+            if (described && !described.contains(event.relatedTarget as Node | null)) hide()
+        }
 
-        window.document.addEventListener(
-            "pointerover",
-            onOver
-        )
-        window.document.addEventListener(
-            "pointerdown",
-            hide,
-            true
-        )
-        window.document.addEventListener(
-            "keydown",
-            hide,
-            true
-        )
+        window.document.addEventListener("pointerover", onOver)
+        window.document.addEventListener("focusin", onFocus)
+        window.document.addEventListener("focusout", onBlur)
+        window.document.addEventListener("pointerdown", hide, true)
+        window.document.addEventListener("keydown", hide, true)
         window.addEventListener("scroll", hide, true)
         window.addEventListener("blur", hide)
         return () => {
             clearTimeout(timer)
-            window.document.removeEventListener(
-                "pointerover",
-                onOver
-            )
-            window.document.removeEventListener(
-                "pointerdown",
-                hide,
-                true
-            )
-            window.document.removeEventListener(
-                "keydown",
-                hide,
-                true
-            )
+            restoreDescription()
+            window.document.removeEventListener("pointerover", onOver)
+            window.document.removeEventListener("focusin", onFocus)
+            window.document.removeEventListener("focusout", onBlur)
+            window.document.removeEventListener("pointerdown", hide, true)
+            window.document.removeEventListener("keydown", hide, true)
             window.removeEventListener("scroll", hide, true)
             window.removeEventListener("blur", hide)
         }
-    }, [])
+    }, [tooltipId])
 
     return (
         <AnimatePresence>
             {tip && (
                 <motion.div
+                    id={tooltipId}
                     key={tip.text + tip.x}
                     role="tooltip"
                     className="pointer-events-none fixed z-[80] max-w-[240px] rounded-md bg-inverse px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-on-inverse shadow-lg"
                     style={{
-                        left: Math.min(
-                            Math.max(tip.x, 128),
-                            window.innerWidth - 128
-                        ),
+                        left: Math.min(Math.max(tip.x, 128), window.innerWidth - 128),
                         top: tip.y,
                         translateX: "-50%",
                         translateY: tip.above ? "-100%" : 0,
                     }}
-                    initial={{
-                        opacity: 0,
-                        scale: 0.92,
-                        y: tip.above ? 4 : -4,
-                    }}
+                    initial={
+                        reducedMotion
+                            ? false
+                            : {
+                                  opacity: 0,
+                                  scale: 0.92,
+                                  y: tip.above ? 4 : -4,
+                              }
+                    }
                     animate={{ opacity: 1, scale: 1, y: 0 }}
-                    exit={{
-                        opacity: 0,
-                        transition: { duration: 0.08 },
-                    }}
-                    transition={{
-                        type: "spring",
-                        stiffness: 520,
-                        damping: 34,
-                    }}
+                    exit={
+                        reducedMotion
+                            ? { opacity: 0 }
+                            : {
+                                  opacity: 0,
+                                  scale: 0.96,
+                                  y: tip.above ? 2 : -2,
+                                  transition: spring.snappy,
+                              }
+                    }
+                    transition={reducedMotion ? { duration: 0 } : spring.snappy}
                 >
                     {tip.text}
                 </motion.div>