@passui/react 0.1.17 → 0.1.20

package/src/components/sheet/sheet.tsx

@@ -1,8 +1,4 @@
-import {
-    AnimatePresence,
-    motion,
-    useReducedMotion,
-} from "motion/react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import { type ReactNode, useRef } from "react"
 import { useVisualViewport } from "../../hooks/use-visual-viewport"
 import { cn } from "../../lib/class-names"
@@ -10,12 +6,19 @@ import { spring } from "../../motion/transitions"
 import { SheetPortal } from "./sheet-portal"
 import { useSheetFocus } from "./use-sheet-focus"
 
-interface SheetProps {
+export type SheetPlacement = "adaptive" | "center"
+
+export interface SheetProps {
+    /** Controls whether the sheet is presented. */
     open: boolean
+    /** Called on Escape or an outside press. */
     onClose: () => void
     /** 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. */
     labelledBy?: string
+    /** `adaptive` rises from the bottom on phones; `center` always floats. @default "adaptive" */
+    placement?: SheetPlacement
     className?: string
     children: ReactNode
 }
@@ -40,6 +43,7 @@ function OpenSheet({
     onClose,
     label,
     labelledBy,
+    placement = "adaptive",
     className,
     children,
 }: Omit<SheetProps, "open">) {
@@ -51,8 +55,8 @@ function OpenSheet({
     return (
         <div
             className={cn(
-                "fixed inset-0 z-[65] flex items-end justify-center",
-                "sm:items-center sm:p-6"
+                "fixed inset-0 z-[65] flex justify-center",
+                placement === "center" ? "items-center p-6" : "items-end sm:items-center sm:p-6"
             )}
             style={
                 viewport
@@ -85,25 +89,13 @@ function OpenSheet({
                 className={cn(
                     "glass-menu relative flex w-full flex-col overflow-hidden",
                     "max-h-[92%] max-w-[560px]",
-                    "rounded-t-sheet sm:rounded-sheet",
+                    placement === "center" ? "rounded-sheet" : "rounded-t-sheet sm:rounded-sheet",
                     className
                 )}
-                initial={
-                    reducedMotion
-                        ? { opacity: 0 }
-                        : { y: 40, opacity: 0, scale: 0.98 }
-                }
-                animate={{ y: 0, opacity: 1, scale: 1 }}
-                exit={
-                    reducedMotion
-                        ? { opacity: 0 }
-                        : { y: 30, opacity: 0 }
-                }
-                transition={
-                    reducedMotion
-                        ? { duration: 0 }
-                        : spring.smooth
-                }
+                initial={reducedMotion ? { opacity: 0 } : { y: 40, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={reducedMotion ? { opacity: 0 } : { y: 30, opacity: 0 }}
+                transition={reducedMotion ? { duration: 0 } : spring.smooth}
             >
                 {children}
             </motion.div>

package/src/components/sheet/use-sheet-focus.ts

@@ -1,10 +1,4 @@
-import {
-    type RefObject,
-    useEffect,
-    useLayoutEffect,
-    useRef,
-    useState,
-} from "react"
+import { type RefObject, useEffect, useLayoutEffect, useRef, useState } from "react"
 import { ownsFloatingLayer } from "../../lib/floating-layers"
 import { enterModalEnvironment } from "./modal-environment"
 
@@ -19,12 +13,8 @@ const focusableSelector = [
     "[contenteditable=true]",
 ].join(",")
 
-function focusableElements(
-    panel: HTMLElement
-): HTMLElement[] {
-    return Array.from(
-        panel.querySelectorAll<HTMLElement>(focusableSelector)
-    ).filter(
+function focusableElements(panel: HTMLElement): HTMLElement[] {
+    return Array.from(panel.querySelectorAll<HTMLElement>(focusableSelector)).filter(
         (element) =>
             element.tabIndex >= 0 &&
             !element.matches(":disabled") &&
@@ -35,15 +25,10 @@ function focusableElements(
 }
 
 /** Keeps keyboard focus in the foremost sheet, including its floating pickers. */
-export function useSheetFocus(
-    panel: RefObject<HTMLDivElement | null>,
-    onClose: () => void
-) {
+export function useSheetFocus(panel: RefObject<HTMLDivElement | null>, onClose: () => void) {
     // Capture before children mount, since a child may use autoFocus.
     const [opener] = useState(() =>
-        typeof document === "undefined"
-            ? null
-            : document.activeElement
+        typeof document === "undefined" ? null : document.activeElement
     )
     const close = useRef(onClose)
     useEffect(() => {
@@ -55,34 +40,22 @@ export function useSheetFocus(
         if (!surface) return
         sheets.push(surface)
         const foremost = () => sheets.at(-1) === surface
-        const focusFirst = () =>
-            (focusableElements(surface)[0] ?? surface).focus()
-        const inFloatingLayer = (element: Element | null) =>
-            ownsFloatingLayer(surface, element)
+        const focusFirst = () => (focusableElements(surface)[0] ?? surface).focus()
+        const inFloatingLayer = (element: Element | null) => ownsFloatingLayer(surface, element)
         const belongsToSheet = (element: Element | null) =>
-            surface.contains(element) ||
-            inFloatingLayer(element)
+            surface.contains(element) || inFloatingLayer(element)
 
-        if (!surface.contains(document.activeElement))
-            surface.focus({ preventScroll: true })
-        const leaveModalEnvironment =
-            enterModalEnvironment(surface)
+        if (!surface.contains(document.activeElement)) surface.focus({ preventScroll: true })
+        const leaveModalEnvironment = enterModalEnvironment(surface)
 
         const onFocus = (event: FocusEvent) => {
-            if (
-                foremost() &&
-                !belongsToSheet(
-                    event.target as Element | null
-                )
-            )
-                focusFirst()
+            if (foremost() && !belongsToSheet(event.target as Element | null)) focusFirst()
         }
         const onKey = (event: KeyboardEvent) => {
             if (!foremost() || event.defaultPrevented) return
             if (event.key === "Escape") {
                 // Floating controls handle their own Escape before the sheet.
-                if (inFloatingLayer(document.activeElement))
-                    return
+                if (inFloatingLayer(document.activeElement)) return
                 event.preventDefault()
                 event.stopPropagation()
                 close.current()
@@ -94,17 +67,13 @@ export function useSheetFocus(
             const active = document.activeElement
             if (
                 event.shiftKey &&
-                (active === surface ||
-                    active === first ||
-                    !surface.contains(active))
+                (active === surface || active === first || !surface.contains(active))
             ) {
                 event.preventDefault()
                 last.focus()
             } else if (
                 !event.shiftKey &&
-                (active === last ||
-                    !surface.contains(active) ||
-                    active === surface)
+                (active === last || !surface.contains(active) || active === surface)
             ) {
                 event.preventDefault()
                 first.focus()
@@ -119,12 +88,7 @@ export function useSheetFocus(
             document.removeEventListener("focusin", onFocus)
             window.removeEventListener("keydown", onKey)
             leaveModalEnvironment()
-            if (
-                wasForemost &&
-                opener instanceof HTMLElement &&
-                opener.isConnected
-            )
-                opener.focus()
+            if (wasForemost && opener instanceof HTMLElement && opener.isConnected) opener.focus()
         }
     }, [panel, opener])
 }

package/src/components/sidebar/sidebar.tsx

@@ -1,64 +1,70 @@
-import type { ReactNode } from "react"
+import { useId, type ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
-export function SidebarSection({
-    title,
-    children,
-}: {
+export interface SidebarSectionProps {
+    /** Visible heading for this group of navigation rows. */
     title: string
     children: ReactNode
-}) {
+}
+
+export interface SidebarItemContentProps {
+    icon?: ReactNode
+    /** Optional trailing count. */
+    count?: number
+    /** Matches the router link's active state. */
+    active?: boolean
+    children: ReactNode
+}
+
+export function SidebarSection({ title, children }: SidebarSectionProps) {
+    const headingId = useId()
     return (
-        <div className="flex flex-col gap-0.5">
-            <span className="px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary">
+        <section aria-labelledby={headingId} className="flex flex-col gap-0.5">
+            <h2
+                id={headingId}
+                className="px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary"
+            >
                 {title}
-            </span>
+            </h2>
             {children}
-        </div>
+        </section>
     )
 }
 
 /** 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",
+        "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-accent-soft font-medium text-label"
-            : "hover:bg-fill/70"
+            ? "bg-fill font-medium"
+            : "font-normal text-label-secondary hover:bg-fill/70 hover:text-label"
     )
 }
 
-export function SidebarItemContent({
-    icon,
-    count,
-    active,
-    children,
-}: {
-    icon: ReactNode
-    count?: number
-    active?: boolean
-    children: ReactNode
-}) {
+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
                     className={cn(
                         "text-footnote tabular-nums",
-                        active
-                            ? "text-accent-text"
-                            : "text-label-tertiary"
+                        active ? "text-accent-text" : "text-label-tertiary"
                     )}
                 >
                     {count}

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/slider/slider.tsx

@@ -0,0 +1,76 @@
+import { type ComponentProps, useId } from "react"
+import { cn } from "../../lib/class-names"
+import { clampRange } from "../../lib/range-value"
+
+export interface SliderProps
+    extends Omit<
+        ComponentProps<"input">,
+        "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"
+    > {
+    value: number
+    onChange: (value: number) => void
+    label: string
+    min?: number
+    max?: number
+    step?: number
+    description?: string
+    /** Provides a localized, spoken description of the current value. */
+    formatValue?: (value: number) => string
+}
+
+/** Native keyboard, touch and pointer behavior with Passui's control treatment. */
+export function Slider({
+    value,
+    onChange,
+    label,
+    min = 0,
+    max = 100,
+    step = 1,
+    description,
+    formatValue,
+    id: suppliedId,
+    className,
+    disabled,
+    ...props
+}: SliderProps) {
+    const generatedId = useId()
+    const id = suppliedId ?? generatedId
+    const upper = Math.max(min, max)
+    const current = clampRange(value, min, upper)
+
+    return (
+        <div className={cn("flex min-w-0 flex-col gap-2", disabled && "opacity-45")}>
+            <label htmlFor={id} className="text-subheadline font-semibold text-label">
+                {label}
+            </label>
+            <input
+                {...props}
+                id={id}
+                type="range"
+                min={min}
+                max={upper}
+                step={step > 0 ? step : 1}
+                value={current}
+                disabled={disabled || upper === min}
+                aria-valuetext={formatValue?.(current)}
+                aria-describedby={description ? `${id}-description` : undefined}
+                onChange={(event) => onChange(Number(event.currentTarget.value))}
+                className={cn(
+                    "h-11 w-full min-w-0 cursor-pointer appearance-none bg-transparent accent-accent",
+                    "focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
+                    "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
+                    "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
+                    "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
+                    "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
+                    "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+                    className
+                )}
+            />
+            {description && (
+                <p id={`${id}-description`} className="text-footnote text-label-secondary">
+                    {description}
+                </p>
+            )}
+        </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 }
+}