@passui/react 0.1.17 → 0.1.20

package/src/components/toast/toast-store.ts

@@ -2,11 +2,7 @@
  * App-wide toasts: short messages that confirm, report progress or explain
  * a failure. Call `toast` from anywhere; render one `<Toaster />`.
  */
-export type ToastTone =
-    | "neutral"
-    | "success"
-    | "error"
-    | "loading"
+export type ToastTone = "neutral" | "success" | "error" | "loading"
 
 export interface ToastAction {
     label: string
@@ -41,11 +37,7 @@ const emit = () => {
     for (const listener of listeners) listener()
 }
 
-function show(
-    tone: ToastTone,
-    title: string,
-    options: ToastOptions = {}
-): number {
+function show(tone: ToastTone, title: string, options: ToastOptions = {}): number {
     const id = nextId++
     const duration =
         options.duration !== undefined
@@ -70,14 +62,8 @@ function show(
 }
 
 /** Changes a toast in place; it morphs to its new state. */
-function update(
-    id: number,
-    tone: ToastTone,
-    title: string,
-    options: ToastOptions = {}
-) {
-    if (!toasts.some((t) => t.id === id))
-        return show(tone, title, options)
+function update(id: number, tone: ToastTone, title: string, options: ToastOptions = {}) {
+    if (!toasts.some((t) => t.id === id)) return show(tone, title, options)
     toasts = toasts.map((t) =>
         t.id === id
             ? {
@@ -112,22 +98,15 @@ interface PromiseMessages<T> {
 }
 
 export const toast = Object.assign(
-    (title: string, options?: ToastOptions) =>
-        show("neutral", title, options),
+    (title: string, options?: ToastOptions) => show("neutral", title, options),
     {
-        success: (title: string, options?: ToastOptions) =>
-            show("success", title, options),
-        error: (title: string, options?: ToastOptions) =>
-            show("error", title, options),
-        loading: (title: string, options?: ToastOptions) =>
-            show("loading", title, options),
+        success: (title: string, options?: ToastOptions) => show("success", title, options),
+        error: (title: string, options?: ToastOptions) => show("error", title, options),
+        loading: (title: string, options?: ToastOptions) => show("loading", title, options),
         update,
         dismiss,
         /** Shows progress, then morphs into the outcome. Returns the promise. */
-        promise<T>(
-            promise: Promise<T>,
-            messages: PromiseMessages<T>
-        ): Promise<T> {
+        promise<T>(promise: Promise<T>, messages: PromiseMessages<T>): Promise<T> {
             const id = show("loading", messages.loading)
             promise.then(
                 (value) =>

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,11 +1,35 @@
-import { motion } 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"
 
 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,47 +38,82 @@ 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)
     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
-                    className={
-                        labelHidden ? "sr-only" : undefined
-                    }
-                >
-                    {label}
                 </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,23 +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
-                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]"
-            />
+            <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>
     )
 }