@passui/react 0.1.17 → 0.1.19

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/stat-tile/stat-tile.tsx

@@ -3,7 +3,7 @@ import { cn } from "../../lib/class-names"
 
 export type StatTileTone = "critical"
 
-type StatTileProps = {
+export interface StatTileProps {
     label: string
     value: number
     /** A quiet line under the number, like "3 signed in now". */
@@ -16,41 +16,20 @@ type StatTileProps = {
 }
 
 /** One number with its label, optionally a toggle. */
-export function StatTile({
-    label,
-    value,
-    caption,
-    tone,
-    onClick,
-    active = false,
-}: StatTileProps) {
+export function StatTile({ label, value, caption, tone, onClick, active = false }: StatTileProps) {
     const body = (
         <>
-            <span className="text-xs text-muted-foreground">
-                {label}
-            </span>
-            <span
-                className={cn(
-                    "text-lg font-semibold tabular-nums tracking-tight",
-                    tone === "critical" &&
-                        value > 0 &&
-                        "text-destructive"
-                )}
-            >
+            <span className="text-label-secondary">{label}</span>
+            <span className={cn("tabular-nums", tone === "critical" && value > 0 && "text-danger")}>
                 {value.toLocaleString("en-US")}
             </span>
-            {caption && (
-                <span className="text-xs text-muted-foreground">
-                    {caption}
-                </span>
-            )}
+            {caption && <span className="text-label-secondary">{caption}</span>}
         </>
     )
     const className =
-        "flex min-w-0 flex-col gap-1 rounded-2xl border border-border/35 bg-card p-4 text-left shadow-xs"
+        "flex min-w-0 flex-col gap-2 rounded-2xl border border-separator/35 bg-elevated p-4 text-left shadow-xs"
 
-    if (!onClick)
-        return <div className={className}>{body}</div>
+    if (!onClick) return <div className={className}>{body}</div>
     return (
         <button
             type="button"
@@ -58,8 +37,8 @@ export function StatTile({
             onClick={onClick}
             className={cn(
                 className,
-                "ring-1 ring-transparent transition-colors hover:bg-muted/60",
-                active && "bg-muted/70 ring-foreground/15"
+                "ring-1 ring-transparent transition-colors hover:bg-fill/60",
+                active && "bg-fill/70 ring-label/15"
             )}
         >
             {body}

package/src/components/status-indicator/status-indicator.tsx

@@ -1,3 +1,4 @@
+import type { HTMLAttributes, ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
 const dots = {
@@ -6,29 +7,21 @@ const dots = {
     offline: "bg-label-tertiary",
 } as const
 
-export function StatusIndicator({
-    state,
-    children,
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLSpanElement> & {
-    state: keyof typeof dots
-    children: React.ReactNode
-}) {
+export type StatusIndicatorState = keyof typeof dots
+
+export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Visual treatment of the status dot. */
+    state: StatusIndicatorState
+    children: ReactNode
+}
+
+export function StatusIndicator({ state, children, className, ...props }: StatusIndicatorProps) {
     return (
         <span
-            className={cn(
-                "flex items-center gap-1.5 text-footnote text-label-tertiary",
-                className
-            )}
+            className={cn("flex items-center gap-1.5 text-footnote text-label-tertiary", className)}
             {...props}
         >
-            <span
-                className={cn(
-                    "size-[7px] rounded-full",
-                    dots[state]
-                )}
-            />
+            <span aria-hidden="true" className={cn("size-[7px] rounded-full", dots[state])} />
             {children}
         </span>
     )

package/src/components/stepper/stepper.tsx

@@ -0,0 +1,80 @@
+import { useId } from "react"
+import { cn } from "../../lib/class-names"
+import { clampRange, stepRange } from "../../lib/range-value"
+
+export interface StepperProps {
+    value: number
+    onChange: (value: number) => void
+    label: string
+    /** Localized accessible names for each action. */
+    labels: { decrement: string; increment: string }
+    min?: number
+    max?: number
+    step?: number
+    disabled?: boolean
+    className?: string
+    /** Formats the displayed value. */
+    formatValue?: (value: number) => string
+}
+
+/** Discrete increments with disabled boundary actions and a spoken value. */
+export function Stepper({
+    value,
+    onChange,
+    label,
+    labels,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    className,
+    formatValue,
+}: StepperProps) {
+    const id = useId()
+    const upper = Math.max(min, max)
+    const current = clampRange(value, min, upper)
+    const decrement = stepRange(current, -1, min, upper, step > 0 ? step : 1)
+    const increment = stepRange(current, 1, min, upper, step > 0 ? step : 1)
+    const buttonStyle = cn(
+        "flex size-11 shrink-0 items-center justify-center rounded-xl text-title2 text-accent-text",
+        "transition-colors hover:bg-fill focus-visible:outline-2 focus-visible:outline-offset-2",
+        "focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-35"
+    )
+
+    return (
+        <div className={cn("flex min-w-0 items-center justify-between gap-3", className)}>
+            <span id={id} className="min-w-0 text-subheadline font-semibold text-label">
+                {label}
+            </span>
+            <div className="flex shrink-0 items-center gap-1 rounded-2xl border border-separator bg-elevated p-1">
+                <button
+                    type="button"
+                    aria-label={labels.decrement}
+                    aria-describedby={id}
+                    disabled={disabled || decrement === current}
+                    onClick={() => onChange(decrement)}
+                    className={buttonStyle}
+                >
+                    −
+                </button>
+                <output
+                    aria-live="polite"
+                    aria-labelledby={id}
+                    className="min-w-10 text-center text-subheadline tabular-nums text-label"
+                >
+                    {formatValue?.(current) ?? current}
+                </output>
+                <button
+                    type="button"
+                    aria-label={labels.increment}
+                    aria-describedby={id}
+                    disabled={disabled || increment === current}
+                    onClick={() => onChange(increment)}
+                    className={buttonStyle}
+                >
+                    +
+                </button>
+            </div>
+        </div>
+    )
+}

package/src/components/swatch-picker/swatch-picker.tsx

@@ -5,24 +5,30 @@ import { cn } from "../../lib/class-names"
 import { haptic } from "../../lib/haptics"
 import { spring } from "../../motion/transitions"
 
+export interface SwatchPickerOption<T extends string> {
+    value: T
+    label: string
+    /** Swatch background color. */
+    color: string
+    /** Color of the selected checkmark. */
+    ink: string
+}
+
+export interface SwatchPickerProps<T extends string> {
+    value: T
+    options: ReadonlyArray<SwatchPickerOption<T>>
+    onChange: (value: T) => void
+    /** Accessible name for the group. */
+    label: string
+}
+
 /** Colour swatches with a check on the chosen one. */
 export function SwatchPicker<T extends string>({
     value,
     options,
     onChange,
     label,
-}: {
-    value: T
-    /** `ink` colours the check drawn on the swatch. */
-    options: Array<{
-        value: T
-        label: string
-        color: string
-        ink: string
-    }>
-    onChange: (value: T) => void
-    label: string
-}) {
+}: SwatchPickerProps<T>) {
     const name = useId()
     return (
         <fieldset className="flex flex-wrap gap-3">
@@ -81,9 +87,7 @@ export function SwatchPicker<T extends string>({
                         <span
                             className={cn(
                                 "text-caption2",
-                                selected
-                                    ? "font-semibold text-label"
-                                    : "text-label-tertiary"
+                                selected ? "font-semibold text-label" : "text-label-tertiary"
                             )}
                         >
                             {option.label}

package/src/components/tab-bar/tab-bar.tsx

@@ -1,5 +1,5 @@
-import { motion } from "motion/react"
-import { type ReactNode, useId } from "react"
+import { motion, useReducedMotion } from "motion/react"
+import { Fragment, type ReactNode, useId } from "react"
 import { useMinimizeOnScroll } from "../../hooks/use-minimize-on-scroll"
 import { SearchIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
@@ -19,6 +19,22 @@ export interface TabBarLinkProps {
     children: ReactNode
 }
 
+export type TabBarMinimizeBehavior = "platform" | "scroll" | "never"
+
+export interface TabBarProps<Tab extends TabBarTab> {
+    /** `platform` follows the platform, `scroll` always minimizes, `never` stays expanded. @default "platform" */
+    minimizeBehavior?: TabBarMinimizeBehavior
+    tabs: readonly Tab[]
+    /** Active tab ID, or null for a destination outside the bar. */
+    active: Tab["id"] | null
+    /** Renders your router's link with the supplied appearance and accessibility props. */
+    renderLink: (tab: Tab, props: TabBarLinkProps) => ReactNode
+    search?: { label: string; onPress: () => void }
+    /** Accessible name for the navigation. */
+    label: string
+    className?: string
+}
+
 /**
  * The app's main places a thumb's reach away, drawn as iOS 26 draws them: a
  * floating glass capsule of tabs, with Search as its own round button at the
@@ -36,25 +52,12 @@ export function TabBar<Tab extends TabBarTab>({
     label,
     className,
     minimizeBehavior = "platform",
-}: {
-    minimizeBehavior?: "platform" | "scroll" | "never"
-    tabs: readonly Tab[]
-    /** Null in places the bar has no tab for. */
-    active: Tab["id"] | null
-    renderLink: (
-        tab: Tab,
-        props: TabBarLinkProps
-    ) => ReactNode
-    search?: { label: string; onPress: () => void }
-    /** Names the navigation for screen readers. */
-    label: string
-    className?: string
-}) {
+}: TabBarProps<Tab>) {
     // Scopes the sliding selection to this bar, so two bars on one
     // screen (a docs page, a split view) never trade their highlight.
     const selectionId = `${useId()}-tab-selection`
-    const [scrolledAway, setScrolledAway] =
-        useMinimizeOnScroll()
+    const reducedMotion = useReducedMotion()
+    const [scrolledAway, setScrolledAway] = useMinimizeOnScroll()
     // Platform behavior keeps Android expanded; apps can opt into scroll minimization.
     const minimized =
         scrolledAway &&
@@ -70,8 +73,8 @@ export function TabBar<Tab extends TabBarTab>({
             )}
         >
             <motion.div
-                layout
-                transition={spring.smooth}
+                layout={!reducedMotion}
+                transition={reducedMotion ? { duration: 0 } : spring.smooth}
                 // A tap on the shrunken capsule brings every tab back.
                 onClickCapture={(event) => {
                     if (!minimized) return
@@ -87,41 +90,41 @@ export function TabBar<Tab extends TabBarTab>({
                 {tabs.map((tab) => {
                     const current = tab.id === active
                     if (minimized && !current) return null
-                    return renderLink(tab, {
-                        "aria-current": current
-                            ? "page"
-                            : undefined,
-                        // Switching tabs is silent, as on Apple and Android: no haptic.
-                        onClick: () => {},
-                        className: cn(
-                            "relative isolate flex h-11 min-w-0 flex-col items-center justify-center gap-0.5 rounded-full font-semibold text-[10px] tracking-[0.01em] no-underline transition-[color,transform] duration-fast active:scale-[0.94]",
-                            minimized
-                                ? "w-11"
-                                : "flex-1 px-1",
-                            current
-                                ? "text-accent-text"
-                                : "text-label-secondary"
-                        ),
-                        children: (
-                            <>
-                                {current && (
-                                    <motion.span
-                                        layoutId={selectionId}
-                                        className="glass-lens absolute inset-0 -z-10 rounded-full"
-                                        transition={
-                                            spring.snappy
-                                        }
-                                    />
-                                )}
-                                {tab.icon}
-                                {!minimized && (
-                                    <span className="max-w-full truncate">
-                                        {tab.label}
-                                    </span>
-                                )}
-                            </>
-                        ),
-                    })
+                    return (
+                        <Fragment key={tab.id}>
+                            {renderLink(tab, {
+                                "aria-current": current ? "page" : undefined,
+                                // Switching tabs is silent, as on Apple and Android: no haptic.
+                                onClick: () => {},
+                                className: cn(
+                                    "relative isolate flex h-11 min-w-0 flex-col items-center justify-center gap-0.5 rounded-full font-semibold text-[10px] tracking-[0.01em] no-underline transition-[color,transform] duration-fast active:scale-[0.94]",
+                                    minimized ? "w-11" : "flex-1 px-1",
+                                    current ? "text-accent-text" : "text-label-secondary"
+                                ),
+                                children: (
+                                    <>
+                                        {current && (
+                                            <motion.span
+                                                layoutId={selectionId}
+                                                className="glass-lens absolute inset-0 -z-10 rounded-full"
+                                                transition={
+                                                    reducedMotion ? { duration: 0 } : spring.snappy
+                                                }
+                                            />
+                                        )}
+                                        {tab.icon}
+                                        <span
+                                            className={
+                                                minimized ? "sr-only" : "max-w-full truncate"
+                                            }
+                                        >
+                                            {tab.label}
+                                        </span>
+                                    </>
+                                ),
+                            })}
+                        </Fragment>
+                    )
                 })}
             </motion.div>
             {search && (
@@ -141,8 +144,5 @@ export function TabBar<Tab extends TabBarTab>({
 }
 
 function onAndroid() {
-    return (
-        typeof document !== "undefined" &&
-        document.documentElement.dataset.os === "android"
-    )
+    return typeof document !== "undefined" && document.documentElement.dataset.os === "android"
 }

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

@@ -1,11 +1,25 @@
-import {
-    useId,
-    useRef,
-    useState,
-    type ReactNode,
-} from "react"
+import { useId, useRef, useState, type ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
+export type TabViewAlign = "start" | "center"
+
+export interface TabViewProps<Value extends string> {
+    /** Available tabs, in keyboard navigation order. */
+    options: readonly { value: Value; label: string; disabled?: boolean }[]
+    /** Initial selection when value is not controlled. */
+    defaultValue: Value
+    /** Controlled selection; omit to keep selection inside TabView. */
+    value?: Value
+    onValueChange?: (value: Value) => void
+    /** Tab alignment: `start` or `center`. @default "center" */
+    align?: TabViewAlign
+    /** Accessible name for the tab list. */
+    label: string
+    /** Renders the selected tab's panel. */
+    children: (value: Value) => ReactNode
+    className?: string
+}
+
 /** Content tabs with native buttons, roving focus and automatic keyboard activation. */
 export function TabView<Value extends string>({
     options,
@@ -16,16 +30,7 @@ export function TabView<Value extends string>({
     label,
     children,
     className,
-}: {
-    options: readonly { value: Value; label: string }[]
-    defaultValue: Value
-    value?: Value
-    onValueChange?: (value: Value) => void
-    align?: "start" | "center"
-    label: string
-    children: (value: Value) => ReactNode
-    className?: string
-}) {
+}: TabViewProps<Value>) {
     const id = useId()
     const buttons = useRef<(HTMLButtonElement | null)[]>([])
     const [selected, setSelected] = useState(defaultValue)
@@ -34,28 +39,18 @@ export function TabView<Value extends string>({
         if (controlledValue === undefined) setSelected(next)
         onValueChange?.(next)
     }
-    const value = options.some(
-        (option) => option.value === current
-    )
-        ? current
-        : options[0]?.value
+    const enabled = options.filter((option) => !option.disabled)
+    const value = enabled.some((option) => option.value === current) ? current : enabled[0]?.value
     if (value === undefined) return null
 
     return (
-        <div
-            className={cn(
-                "flex w-full flex-col gap-5",
-                className
-            )}
-        >
+        <div className={cn("flex w-full flex-col gap-5", className)}>
             <div
                 role="tablist"
                 aria-label={label}
                 className={cn(
                     "inline-flex h-8 w-fit max-w-full items-center gap-5 p-[3px]",
-                    align === "start"
-                        ? "self-start"
-                        : "mx-auto justify-center"
+                    align === "start" ? "self-start" : "mx-auto justify-center"
                 )}
             >
                 {options.map((option, index) => (
@@ -66,38 +61,39 @@ export function TabView<Value extends string>({
                         id={`${id}-tab-${index}`}
                         aria-controls={`${id}-panel-${index}`}
                         aria-selected={option.value === value}
-                        tabIndex={
-                            option.value === value ? 0 : -1
-                        }
+                        aria-disabled={option.disabled || undefined}
+                        disabled={option.disabled}
+                        tabIndex={option.value === value ? 0 : -1}
                         ref={(element) => {
                             buttons.current[index] = element
                         }}
                         onClick={() => select(option.value)}
                         onKeyDown={(event) => {
-                            const rtl =
-                                getComputedStyle(
-                                    event.currentTarget
-                                ).direction === "rtl"
+                            const rtl = getComputedStyle(event.currentTarget).direction === "rtl"
                             let next: number
-                            if (event.key === "Home") next = 0
-                            else if (event.key === "End")
-                                next = options.length - 1
-                            else if (
-                                event.key === "ArrowRight"
-                            )
-                                next = index + (rtl ? -1 : 1)
-                            else if (
-                                event.key === "ArrowLeft"
-                            )
-                                next = index + (rtl ? 1 : -1)
-                            else return
+                            let step: number
+                            if (event.key === "Home") {
+                                next = -1
+                                step = 1
+                            } else if (event.key === "End") {
+                                next = options.length
+                                step = -1
+                            } else if (event.key === "ArrowRight") {
+                                step = rtl ? -1 : 1
+                                next = index
+                            } else if (event.key === "ArrowLeft") {
+                                step = rtl ? 1 : -1
+                                next = index
+                            } else return
                             event.preventDefault()
-                            next =
-                                (next + options.length) %
-                                options.length
-                            const option = options[next]
-                            if (option) select(option.value)
-                            buttons.current[next]?.focus()
+                            for (let offset = 0; offset < options.length; offset++) {
+                                next = (next + step + options.length) % options.length
+                                const option = options[next]
+                                if (!option || option.disabled) continue
+                                select(option.value)
+                                buttons.current[next]?.focus()
+                                break
+                            }
                         }}
                         className={cn(
                             "relative inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center border border-transparent p-0 text-sm font-medium whitespace-nowrap",
@@ -121,8 +117,7 @@ export function TabView<Value extends string>({
                     hidden={option.value !== value}
                     className="w-full outline-offset-4"
                 >
-                    {option.value === value &&
-                        children(option.value)}
+                    {option.value === value && children(option.value)}
                 </div>
             ))}
         </div>