@passui/react 0.1.17 → 0.1.20

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>

package/src/components/table/table.tsx

@@ -2,63 +2,39 @@ import type * as React from "react"
 
 import { cn } from "../../lib/class-names"
 
-function Table({
-    className,
-    ...props
-}: React.ComponentProps<"table">) {
+function Table({ className, ...props }: React.ComponentProps<"table">) {
     return (
-        <div
-            data-slot="table-container"
-            className="relative w-full overflow-x-auto"
-        >
+        <div data-slot="table-container" className="relative w-full overflow-x-auto">
             <table
                 data-slot="table"
-                className={cn(
-                    "w-full caption-bottom text-subheadline text-label",
-                    className
-                )}
+                className={cn("w-full caption-bottom text-subheadline text-label", className)}
                 {...props}
             />
         </div>
     )
 }
 
-function TableHeader({
-    className,
-    ...props
-}: React.ComponentProps<"thead">) {
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
     return (
         <thead
             data-slot="table-header"
-            className={cn(
-                "[&_tr]:border-separator [&_tr]:border-b",
-                className
-            )}
+            className={cn("[&_tr]:border-separator [&_tr]:border-b", className)}
             {...props}
         />
     )
 }
 
-function TableBody({
-    className,
-    ...props
-}: React.ComponentProps<"tbody">) {
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
     return (
         <tbody
             data-slot="table-body"
-            className={cn(
-                "[&_tr:last-child]:border-0",
-                className
-            )}
+            className={cn("[&_tr:last-child]:border-0", className)}
             {...props}
         />
     )
 }
 
-function TableFooter({
-    className,
-    ...props
-}: React.ComponentProps<"tfoot">) {
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     return (
         <tfoot
             data-slot="table-footer"
@@ -71,10 +47,7 @@ function TableFooter({
     )
 }
 
-function TableRow({
-    className,
-    ...props
-}: React.ComponentProps<"tr">) {
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     return (
         <tr
             data-slot="table-row"
@@ -88,10 +61,7 @@ function TableRow({
     )
 }
 
-function TableHead({
-    className,
-    ...props
-}: React.ComponentProps<"th">) {
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     return (
         <th
             data-slot="table-head"
@@ -105,10 +75,7 @@ function TableHead({
     )
 }
 
-function TableCell({
-    className,
-    ...props
-}: React.ComponentProps<"td">) {
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     return (
         <td
             data-slot="table-cell"
@@ -121,29 +88,14 @@ function TableCell({
     )
 }
 
-function TableCaption({
-    className,
-    ...props
-}: React.ComponentProps<"caption">) {
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
     return (
         <caption
             data-slot="table-caption"
-            className={cn(
-                "mt-4 text-footnote text-label-secondary",
-                className
-            )}
+            className={cn("mt-4 text-footnote text-label-secondary", className)}
             {...props}
         />
     )
 }
 
-export {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableFooter,
-    TableHead,
-    TableHeader,
-    TableRow,
-}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

package/src/components/text-editor/text-editor.tsx

@@ -2,18 +2,8 @@ import type { ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 import { textControlClasses } from "../text-field/text-field"
 
-export function TextEditor({
-    className,
-    ...props
-}: ComponentProps<"textarea">) {
+export function TextEditor({ className, ...props }: ComponentProps<"textarea">) {
     return (
-        <textarea
-            {...props}
-            className={cn(
-                textControlClasses,
-                "min-h-28 resize-y",
-                className
-            )}
-        />
+        <textarea {...props} className={cn(textControlClasses, "min-h-28 resize-y", className)} />
     )
 }

package/src/components/text-field/text-field.tsx

@@ -1,9 +1,4 @@
-import {
-    type ComponentProps,
-    type ReactNode,
-    useId,
-    useState,
-} from "react"
+import { type ComponentProps, type ReactNode, useId, useState } from "react"
 import { Button } from "../button/button"
 import { cn } from "../../lib/class-names"
 
@@ -14,8 +9,7 @@ export const textControlClasses = cn(
     "disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger"
 )
 
-const fieldIconClasses =
-    "flex shrink-0 items-center text-label-secondary"
+const fieldIconClasses = "flex shrink-0 items-center text-label-secondary"
 
 export type TextFieldProps = ComponentProps<"input"> & {
     label: string
@@ -28,6 +22,8 @@ export type TextFieldProps = ComponentProps<"input"> & {
     /** An interactive control after the text, such as a clear button. Size it to the field: an `xs` or `icon-xs` button, never the default. */
     action?: ReactNode
     revealLabels?: { show: string; hide: string }
+    /** Float the label into the outline on focus or when filled. @default "above" */
+    labelPlacement?: "above" | "floating"
 }
 
 export function TextField({
@@ -38,6 +34,8 @@ export function TextField({
     trailingIcon,
     action,
     revealLabels,
+    labelPlacement = "above",
+    placeholder,
     type = "text",
     id: suppliedId,
     className,
@@ -49,19 +47,40 @@ export function TextField({
     const messages = Array.from(new Set(errors))
     const reveal = type === "password" && revealLabels
     return (
-        <div className="flex flex-col gap-2">
-            <label
-                htmlFor={id}
-                className="text-subheadline font-semibold"
+        <div className="not-typeset flex flex-col gap-2">
+            {labelPlacement === "above" && (
+                <label htmlFor={id} className="text-subheadline font-semibold">
+                    {label}
+                </label>
+            )}
+            <div
+                className={cn(
+                    "relative flex items-center gap-2 rounded-xl bg-elevated px-3",
+                    labelPlacement === "floating"
+                        ? "passui-floating-field"
+                        : "border border-separator focus-within:ring-1 focus-within:ring-accent/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-text/70"
+                )}
             >
-                {label}
-            </label>
-            <div className="flex items-center gap-2 rounded-xl border border-separator bg-elevated px-3 focus-within:ring-1 focus-within:ring-accent/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-text/70">
+                {labelPlacement === "floating" && (
+                    <>
+                        <fieldset aria-hidden="true" className="passui-field-outline">
+                            <legend>
+                                <span>{label}</span>
+                            </legend>
+                        </fieldset>
+                        <label
+                            htmlFor={id}
+                            className={cn(
+                                "passui-floating-label",
+                                icon && "passui-floating-label-with-icon"
+                            )}
+                        >
+                            {label}
+                        </label>
+                    </>
+                )}
                 {icon && (
-                    <span
-                        aria-hidden
-                        className={fieldIconClasses}
-                    >
+                    <span aria-hidden className={fieldIconClasses}>
                         {icon}
                     </span>
                 )}
@@ -69,23 +88,25 @@ export function TextField({
                     {...props}
                     id={id}
                     type={reveal && revealed ? "text" : type}
-                    aria-invalid={messages.length > 0}
+                    placeholder={placeholder ?? (labelPlacement === "floating" ? " " : label)}
+                    aria-invalid={messages.length > 0 || props["aria-invalid"]}
                     aria-describedby={
-                        messages.length || description
-                            ? `${id}-description`
-                            : undefined
+                        [
+                            props["aria-describedby"],
+                            (messages.length || description) && `${id}-description`,
+                        ]
+                            .filter(Boolean)
+                            .join(" ") || undefined
                     }
                     className={cn(
                         "h-11 w-full min-w-0 bg-transparent text-body text-label outline-none",
+                        labelPlacement === "floating" && "h-12",
                         "placeholder:text-label-tertiary disabled:opacity-40",
                         className
                     )}
                 />
                 {trailingIcon && (
-                    <span
-                        aria-hidden
-                        className={fieldIconClasses}
-                    >
+                    <span aria-hidden className={fieldIconClasses}>
                         {trailingIcon}
                     </span>
                 )}
@@ -97,17 +118,11 @@ export function TextField({
                         // wider invisible area keeps a 44px target
                         className="-mr-1.5 shrink-0 whitespace-nowrap [@media(pointer:coarse)]:before:absolute [@media(pointer:coarse)]:before:-inset-1.5 [@media(pointer:coarse)]:before:content-['']"
                         aria-controls={id}
-                        aria-label={
-                            revealed
-                                ? revealLabels.hide
-                                : revealLabels.show
-                        }
+                        aria-label={revealed ? revealLabels.hide : revealLabels.show}
                         aria-pressed={revealed}
                         onClick={() => setRevealed(!revealed)}
                     >
-                        {revealed
-                            ? revealLabels.hide
-                            : revealLabels.show}
+                        {revealed ? revealLabels.hide : revealLabels.show}
                     </Button>
                 )}
                 {action}
@@ -115,19 +130,13 @@ export function TextField({
             {(messages.length > 0 || description) && (
                 <div
                     id={`${id}-description`}
-                    role={
-                        messages.length ? "alert" : undefined
-                    }
+                    role={messages.length ? "alert" : undefined}
                     className={cn(
                         "text-footnote",
-                        messages.length
-                            ? "text-danger"
-                            : "text-label-secondary"
+                        messages.length ? "text-danger" : "text-label-secondary"
                     )}
                 >
-                    {messages.length
-                        ? messages.join(". ")
-                        : description}
+                    {messages.length ? messages.join(". ") : description}
                 </div>
             )}
         </div>