@passui/react 0.1.19 → 0.1.20

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react"
+import { DisclosureGroup } from "../disclosure-group/disclosure-group"
+import { cn } from "../../lib/class-names"
+
+export interface AccordionItem {
+    /** Stable value used to identify the expanded item. */
+    value: string
+    title: string
+    content: ReactNode
+    description?: string
+    disabled?: boolean
+}
+
+export interface AccordionProps {
+    items: readonly AccordionItem[]
+    /** The expanded item, or `null` when all items are closed. */
+    value: string | null
+    /** Selecting the open item reports `null`, so every item can collapse. */
+    onValueChange: (value: string | null) => void
+    className?: string
+}
+
+/** A single-open, collapsible accordion with labelled animated content regions. */
+export function Accordion({ items, value, onValueChange, className }: AccordionProps) {
+    return (
+        <div
+            className={cn(
+                "flex w-full min-w-0 flex-col overflow-hidden rounded-2xl border border-separator/60 bg-elevated",
+                className
+            )}
+        >
+            {items.map((item, index) => (
+                <DisclosureGroup
+                    key={item.value}
+                    label={item.title}
+                    description={item.description}
+                    open={value === item.value}
+                    disabled={item.disabled}
+                    triggerClassName="rounded-none"
+                    onOpenChange={(open) => onValueChange(open ? item.value : null)}
+                    className={cn(index > 0 && "border-t border-separator/60")}
+                >
+                    {item.content}
+                </DisclosureGroup>
+            ))}
+        </div>
+    )
+}

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /** Width divided by height. @default 1.3333333333333333 */
+    ratio?: number
+}
+
+/** A crop frame: size its geometry, while images cover without distortion. */
+export function AspectRatio({ ratio = 4 / 3, className, style, ...props }: AspectRatioProps) {
+    const aspect = Number.isFinite(ratio) && ratio > 0 ? ratio : 4 / 3
+    return (
+        <div
+            {...props}
+            className={cn(
+                "relative w-full overflow-hidden [&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover",
+                className
+            )}
+            style={{ aspectRatio: aspect, ...style }}
+        />
+    )
+}

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface BreadcrumbItem {
+    label: string
+    href?: string
+}
+export interface BreadcrumbProps {
+    label: string
+    items: readonly BreadcrumbItem[]
+    className?: string
+    /** Integrate a client router without nesting interactive elements. */
+    renderLink?: (item: BreadcrumbItem & { href: string }) => ReactNode
+}
+/** Ancestors stay links; the final item identifies the current page. */
+export function Breadcrumb({ label, items, className, renderLink }: BreadcrumbProps) {
+    return (
+        <nav aria-label={label} className={cn("not-typeset", className)}>
+            <ol className="m-0 flex list-none flex-wrap items-center gap-x-2 gap-y-1 p-0 text-footnote text-label-secondary">
+                {items.map((item, index) => (
+                    <li
+                        key={`${index}-${item.label}`}
+                        className="m-0 flex min-w-0 items-center gap-2 p-0"
+                    >
+                        {index > 0 && (
+                            <span aria-hidden="true" className="text-label-tertiary">
+                                /
+                            </span>
+                        )}
+                        {index === items.length - 1 ? (
+                            <span aria-current="page" className="font-medium text-label">
+                                {item.label}
+                            </span>
+                        ) : item.href ? (
+                            (renderLink?.({ ...item, href: item.href }) ?? (
+                                <a
+                                    href={item.href}
+                                    className={cn(
+                                        "rounded-sm hover:text-label focus-visible:outline-2 focus-visible:outline-accent-text"
+                                    )}
+                                >
+                                    {item.label}
+                                </a>
+                            ))
+                        ) : (
+                            <span>{item.label}</span>
+                        )}
+                    </li>
+                ))}
+            </ol>
+        </nav>
+    )
+}

package/src/components/button/button.tsx

@@ -28,6 +28,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * @default false
      */
     isPending?: boolean
+    /** Layout classes for the content wrapper, such as a full-width disclosure row. */
+    contentClassName?: string
 }
 
 /** Shares native button appearance with semantic links without nesting a button. */
@@ -53,6 +55,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         variant = "default",
         size = "default",
         isPending = false,
+        contentClassName,
         disabled,
         children,
         className,
@@ -85,7 +88,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
             <span
                 className={cn(
                     "inline-flex items-center justify-center gap-2 transition-opacity duration-200",
-                    showPendingIndicator && "opacity-0"
+                    showPendingIndicator && "opacity-0",
+                    contentClassName
                 )}
             >
                 {children}

package/src/components/code-block/code-block.tsx

@@ -0,0 +1,41 @@
+import { Fragment, type ComponentProps, type ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+export interface CodeBlockProps extends Omit<ComponentProps<"div">, "children"> {
+    code: string
+    /** Supply a highlighter's rendered pre/code element; source remains the fallback. */
+    children?: ReactNode
+    /** Show a nonselectable line gutter. @default true */
+    lineNumbers?: boolean
+}
+
+/** Code presentation without shipping a highlighter or formatter to consumers. */
+export function CodeBlock({
+    code,
+    children,
+    lineNumbers = true,
+    className,
+    ...props
+}: CodeBlockProps) {
+    const lines = code.split("\n")
+    return (
+        <div
+            {...props}
+            className={cn("passui-code-block", className)}
+            data-line-numbers={lineNumbers || undefined}
+        >
+            {children ?? (
+                <pre>
+                    <code>
+                        {lines.map((line, index) => (
+                            <Fragment key={`${index}-${line}`}>
+                                <span className="line">{line || " "}</span>
+                                {index < lines.length - 1 ? "\n" : null}
+                            </Fragment>
+                        ))}
+                    </code>
+                </pre>
+            )}
+        </div>
+    )
+}

package/src/components/combo-box/combo-box.tsx

@@ -0,0 +1,13 @@
+import { Picker, type PickerOption, type PickerProps } from "../picker/picker"
+
+export interface ComboBoxOption<T extends string> extends PickerOption<T> {}
+export interface ComboBoxProps<T extends string>
+    extends Omit<PickerProps<T>, "searchable" | "options"> {
+    options: readonly ComboBoxOption<T>[]
+    emptyLabel: string
+}
+
+/** A searchable Picker, with optional creation from the person's typed query. */
+export function ComboBox<T extends string>(props: ComboBoxProps<T>) {
+    return <Picker {...props} searchable />
+}

package/src/components/command/command.tsx

@@ -0,0 +1,119 @@
+import { type ComponentProps, useEffect, useRef } from "react"
+import { SearchIcon } from "../../icons/icons"
+import { cn } from "../../lib/class-names"
+import { KeyboardShortcut } from "../keyboard-shortcut/keyboard-shortcut"
+import {
+    SearchList,
+    SearchListField,
+    SearchListResults,
+    SearchListEmpty,
+    SearchListGroup,
+    SearchListItem,
+} from "../search-list/search-list"
+import { Sheet, type SheetProps } from "../sheet/sheet"
+
+export interface CommandProps extends ComponentProps<typeof SearchList> {}
+export interface CommandDialogProps extends Omit<SheetProps, "placement"> {}
+
+/** An inline command palette. SearchList owns filtering and keyboard selection. */
+export function Command({ className, ...props }: CommandProps) {
+    return (
+        <SearchList
+            {...props}
+            className={cn(
+                "not-typeset glass-menu flex min-h-0 w-full flex-col overflow-hidden rounded-3xl",
+                className
+            )}
+        />
+    )
+}
+
+/** A modal command palette with Sheet's focus isolation and restoration. */
+export function CommandDialog({ children, className, ...props }: CommandDialogProps) {
+    return (
+        <Sheet
+            {...props}
+            placement="center"
+            className={cn("max-w-lg rounded-3xl outline-none", className)}
+        >
+            <SearchList className="not-typeset flex min-h-0 flex-col">{children}</SearchList>
+        </Sheet>
+    )
+}
+
+export function CommandInput({
+    className,
+    autoFocus,
+    ref: forwardedRef,
+    ...props
+}: ComponentProps<typeof SearchListField>) {
+    const input = useRef<HTMLInputElement>(null)
+    useEffect(() => {
+        if (autoFocus) input.current?.focus({ preventScroll: true })
+    }, [autoFocus])
+    return (
+        <div className="flex shrink-0 items-center gap-2 border-b border-separator/50 px-4">
+            <SearchIcon size={17} className="shrink-0 text-label-tertiary" />
+            <SearchListField
+                {...props}
+                ref={(node) => {
+                    input.current = node
+                    if (typeof forwardedRef === "function") forwardedRef(node)
+                    else if (forwardedRef) forwardedRef.current = node
+                }}
+                className={cn(
+                    "min-h-12 rounded-none border-0 bg-transparent px-0 focus-visible:ring-0",
+                    className
+                )}
+            />
+        </div>
+    )
+}
+
+export function CommandList({ className, ...props }: ComponentProps<typeof SearchListResults>) {
+    return (
+        <SearchListResults {...props} className={cn("max-h-[min(60svh,24rem)] p-1.5", className)} />
+    )
+}
+
+export function CommandEmpty({ className, ...props }: ComponentProps<typeof SearchListEmpty>) {
+    return (
+        <SearchListEmpty
+            {...props}
+            className={cn("px-3 py-8 text-center text-footnote text-label-secondary", className)}
+        />
+    )
+}
+
+export function CommandShortcut({ className, ...props }: ComponentProps<typeof KeyboardShortcut>) {
+    return (
+        <KeyboardShortcut
+            {...props}
+            className={cn("ms-auto border-0 bg-transparent text-label-tertiary", className)}
+        />
+    )
+}
+
+export function CommandGroup({ className, ...props }: ComponentProps<typeof SearchListGroup>) {
+    return (
+        <SearchListGroup
+            {...props}
+            className={cn(
+                "border-separator/50 not-first:mt-1 not-first:border-t not-first:pt-1",
+                className
+            )}
+        />
+    )
+}
+
+export function CommandItem({ className, ...props }: ComponentProps<typeof SearchListItem>) {
+    return (
+        <SearchListItem
+            {...props}
+            className={cn(
+                "[&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-label-secondary",
+                className
+            )}
+        />
+    )
+}

package/src/components/compact-date-picker/compact-date-picker.tsx

@@ -1,22 +1,10 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import {
-    type KeyboardEvent,
-    useEffect,
-    useId,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react"
+import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure"
+import { AnchoredSurface } from "../popover/anchored-surface"
+import { type KeyboardEvent, useEffect, useId, useMemo, useRef, useState } from "react"
 import { createPortal } from "react-dom"
-import { FLOATING_LAYER } from "../../hooks/use-dismiss"
-import { useFloatingDismiss } from "../../hooks/use-floating-dismiss"
 import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
-import { registerFloatingLayer } from "../../lib/floating-layers"
 import { haptic } from "../../lib/haptics"
-import { useAnchoredPlacement } from "../../hooks/use-anchored-placement"
-import { floatingPanelMotion } from "../../motion/transitions"
 import { IconButton } from "../button/icon-button"
 import { pickerTriggerStyle } from "../picker/picker-trigger"
 import {
@@ -82,7 +70,8 @@ export function CompactDatePicker({
     className,
     disabled = false,
 }: CompactDatePickerProps) {
-    const [open, setOpen] = useState(false)
+    const panel = useAnchoredDisclosure(disabled)
+    const { open } = panel
     const trigger = useRef<HTMLButtonElement>(null)
     const calendarId = useId()
     const chosen = parseDay(value)
@@ -94,7 +83,7 @@ export function CompactDatePicker({
         : (placeholder ?? "")
 
     const close = (restoreFocus: boolean) => {
-        setOpen(false)
+        panel.close()
         if (restoreFocus) trigger.current?.focus({ preventScroll: true })
     }
 
@@ -108,7 +97,7 @@ export function CompactDatePicker({
                 aria-expanded={open && !disabled}
                 aria-controls={open && !disabled ? calendarId : undefined}
                 disabled={disabled}
-                onClick={() => setOpen((current) => !current)}
+                onClick={() => panel.toggle()}
                 className={pickerTriggerStyle(className)}
             >
                 <span
@@ -123,26 +112,26 @@ export function CompactDatePicker({
             </button>
             {typeof document !== "undefined" &&
                 createPortal(
-                    <AnimatePresence>
-                        {open && !disabled && trigger.current && (
-                            <MonthCalendar
-                                id={calendarId}
-                                anchor={trigger.current}
-                                label={label}
-                                locale={locale}
-                                value={value}
-                                min={min}
-                                max={max}
-                                labels={labels}
-                                onChoose={(next) => {
-                                    haptic("selection")
-                                    onChange(next)
-                                    close(true)
-                                }}
-                                onClose={close}
-                            />
-                        )}
-                    </AnimatePresence>,
+                    panel.mounted && trigger.current ? (
+                        <MonthCalendar
+                            open={open}
+                            onExited={panel.onExited}
+                            id={calendarId}
+                            anchor={trigger.current}
+                            label={label}
+                            locale={locale}
+                            value={value}
+                            min={min}
+                            max={max}
+                            labels={labels}
+                            onChoose={(next) => {
+                                haptic("selection")
+                                onChange(next)
+                                close(true)
+                            }}
+                            onClose={close}
+                        />
+                    ) : null,
                     document.body
                 )}
         </>
@@ -150,6 +139,8 @@ export function CompactDatePicker({
 }
 
 function MonthCalendar({
+    open,
+    onExited,
     id,
     anchor,
     label,
@@ -161,6 +152,8 @@ function MonthCalendar({
     onChoose,
     onClose,
 }: {
+    open: boolean
+    onExited: () => void
     id: string
     anchor: HTMLElement
     label: string
@@ -173,8 +166,6 @@ function MonthCalendar({
     onClose: (restoreFocus: boolean) => void
 }) {
     const root = useRef<HTMLDivElement>(null)
-    const reducedMotion = useReducedMotion()
-    const placement = useAnchoredPlacement(anchor, WIDTH, 360)
     const today = todayDay()
     const [focused, setFocused] = useState<CalendarDay>(() => parseDay(value) ?? today)
     const firstDay = useMemo(() => firstWeekday(locale), [locale])
@@ -195,11 +186,6 @@ function MonthCalendar({
         timeZone: "UTC",
     })
 
-    useLayoutEffect(() => {
-        if (!root.current) return
-        return registerFloatingLayer(root.current, anchor)
-    }, [anchor])
-
     // The focused day takes keyboard focus as it moves.
     useEffect(() => {
         root.current
@@ -207,8 +193,6 @@ function MonthCalendar({
             ?.focus()
     }, [focused])
 
-    useFloatingDismiss(root, anchor, onClose)
-
     const move = (next: CalendarDay) => setFocused(next)
 
     const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
@@ -230,46 +214,18 @@ function MonthCalendar({
     }
 
     return (
-        <motion.div
+        <AnchoredSurface
+            open={open}
+            onExited={onExited}
             ref={root}
+            anchor={anchor}
+            width={WIDTH}
+            needed={360}
+            onClose={onClose}
             id={id}
             role="dialog"
             aria-label={label}
-            initial={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : {
-                          opacity: 0,
-                          scale: 1,
-                          y: placement.above ? 6 : -6,
-                      }
-            }
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={
-                reducedMotion
-                    ? { opacity: 0 }
-                    : {
-                          opacity: 0,
-                          scale: 1,
-                          y: placement.above ? 4 : -4,
-                      }
-            }
-            transition={
-                reducedMotion
-                    ? { duration: 0 }
-                    : floatingPanelMotion(placement.above ? "above" : "below").transition
-            }
-            style={{
-                left: placement.left,
-                width: placement.width,
-                top: placement.top,
-                bottom: placement.bottom,
-                maxHeight: placement.maxHeight,
-                overflowY: placement.maxHeight ? "auto" : undefined,
-                transformOrigin: placement.above ? "50% 100%" : "50% 0%",
-            }}
-            className="glass-menu fixed z-[80] flex flex-col gap-2 rounded-3xl p-3"
-            {...{ [FLOATING_LAYER]: "" }}
+            contentClassName="gap-2 p-3"
             onKeyDown={onKeyDown}
         >
             <div className="flex items-center justify-between gap-2 ps-2">
@@ -354,6 +310,6 @@ function MonthCalendar({
                     {labels.clear}
                 </button>
             )}
-        </motion.div>
+        </AnchoredSurface>
     )
 }