@passui/react 0.1.16 → 0.1.19

package/src/components/dialog/dialog.tsx

@@ -1,35 +1,22 @@
-import { Sheet } from "@passui/react/sheet"
-import {
-    AnimatePresence,
-    motion,
-    useReducedMotion,
-} from "motion/react"
-import { createPortal } from "react-dom"
-import { Button } from "@passui/react/button"
-import { cn } from "@passui/react/cn"
+import { Sheet } from "../sheet/sheet"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import { Button } from "../button/button"
+import { cn } from "../../lib/class-names"
 import { spring } from "../../motion/transitions"
-import {
-    createContext,
-    useContext,
-    useId,
-    type FormEvent,
-    type ReactNode,
-} from "react"
+import { createContext, useContext, useId, type FormEvent, type ReactNode } from "react"
 
 const CloseContext = createContext<() => void>(() => {})
-export type DialogPresentation =
-    | "drawer"
-    | "center"
-    | "inline"
+export type DialogPresentation = "drawer" | "center" | "inline"
 export type DialogTone = "default" | "destructive"
 
-type DialogProps = {
+export type DialogProps = {
     open: boolean
     onOpenChange: (open: boolean) => void
     title: ReactNode
     description?: ReactNode
     children?: ReactNode
     footer?: ReactNode
+    /** `drawer` (responsive sheet), `center` (floating panel), or `inline`. @default "drawer" */
     presentation?: DialogPresentation
     className?: string
     onSubmit?: (event: FormEvent<HTMLFormElement>) => void
@@ -60,28 +47,13 @@ export function Dialog({
     const content = (
         <>
             {presentation !== "inline" && (
-                <h2
-                    id={titleId}
-                    className="text-title3 font-semibold"
-                >
+                <h2 id={titleId} className="text-title3 font-semibold">
                     {title}
                 </h2>
             )}
-            {description && (
-                <p className="text-footnote text-label-secondary">
-                    {description}
-                </p>
-            )}
-            {children && (
-                <div className="flex flex-col gap-4">
-                    {children}
-                </div>
-            )}
-            {footer && (
-                <div className="flex flex-wrap justify-end gap-2 pt-3">
-                    {footer}
-                </div>
-            )}
+            {description && <div className="text-footnote text-label-secondary">{description}</div>}
+            {children && <div className="flex flex-col gap-4">{children}</div>}
+            {footer && <div className="flex flex-wrap justify-end gap-2 pt-3">{footer}</div>}
         </>
     )
     const body = (
@@ -89,20 +61,12 @@ export function Dialog({
             {onSubmit ? (
                 <form
                     onSubmit={onSubmit}
-                    className={cn(
-                        "flex min-h-0 flex-col gap-4 overflow-y-auto p-5",
-                        className
-                    )}
+                    className={cn("flex min-h-0 flex-col gap-4 overflow-y-auto p-5", className)}
                 >
                     {content}
                 </form>
             ) : (
-                <div
-                    className={cn(
-                        "flex min-h-0 flex-col gap-4 overflow-y-auto p-5",
-                        className
-                    )}
-                >
+                <div className={cn("flex min-h-0 flex-col gap-4 overflow-y-auto p-5", className)}>
                     {content}
                 </div>
             )}
@@ -115,9 +79,7 @@ export function Dialog({
                     <motion.div
                         key={titleId}
                         initial={{
-                            height: reducedMotion
-                                ? "auto"
-                                : 0,
+                            height: reducedMotion ? "auto" : 0,
                             opacity: 0,
                         }}
                         animate={{
@@ -125,16 +87,10 @@ export function Dialog({
                             opacity: 1,
                         }}
                         exit={{
-                            height: reducedMotion
-                                ? "auto"
-                                : 0,
+                            height: reducedMotion ? "auto" : 0,
                             opacity: 0,
                         }}
-                        transition={
-                            reducedMotion
-                                ? { duration: 0 }
-                                : spring.smooth
-                        }
+                        transition={reducedMotion ? { duration: 0 } : spring.smooth}
                         className="overflow-hidden"
                     >
                         {body}
@@ -142,17 +98,16 @@ export function Dialog({
                 )}
             </AnimatePresence>
         )
-    if (typeof document === "undefined") return null
-    return createPortal(
+    return (
         <Sheet
             open={open}
             onClose={close}
             label=""
             labelledBy={titleId}
+            placement={presentation === "center" ? "center" : "adaptive"}
         >
             {body}
-        </Sheet>,
-        document.body
+        </Sheet>
     )
 }
 
@@ -170,27 +125,15 @@ function Actions({
         <>
             <Button
                 type={onConfirm ? "button" : "submit"}
-                variant={
-                    tone === "destructive"
-                        ? "ghost"
-                        : "default"
-                }
-                className={
-                    tone === "destructive"
-                        ? "bg-danger/10 text-danger"
-                        : undefined
-                }
+                variant={tone === "destructive" ? "ghost" : "default"}
+                className={tone === "destructive" ? "bg-danger/10 text-danger" : undefined}
                 isPending={pending}
                 disabled={disabled}
                 onClick={onConfirm}
             >
                 {submitLabel}
             </Button>
-            <Button
-                type="button"
-                variant="secondary"
-                onClick={close}
-            >
+            <Button type="button" variant="secondary" onClick={close}>
                 {cancelLabel}
             </Button>
         </>

package/src/components/disclosure-group/disclosure-group.tsx

@@ -0,0 +1,70 @@
+import { type ReactNode, useId } from "react"
+import { ChevronDownIcon } from "../../icons/icons"
+import { cn } from "../../lib/class-names"
+import { InlineDisclosure } from "../inline-disclosure/inline-disclosure"
+
+export interface DisclosureGroupProps {
+    label: string
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    children: ReactNode
+    disabled?: boolean
+    className?: string
+    /** Supporting text beneath the title. */
+    description?: string
+}
+
+/** A controlled, accessible disclosure row with the shared inline reveal. */
+export function DisclosureGroup({
+    label,
+    open,
+    onOpenChange,
+    children,
+    disabled = false,
+    className,
+    description,
+}: DisclosureGroupProps) {
+    const id = useId()
+
+    return (
+        <div className={cn("min-w-0", className)}>
+            <h3 className="m-0">
+                <button
+                    type="button"
+                    id={`${id}-trigger`}
+                    aria-expanded={open}
+                    aria-controls={id}
+                    disabled={disabled}
+                    onClick={() => onOpenChange(!open)}
+                    className={cn(
+                        "flex min-h-11 w-full items-center justify-between gap-3 rounded-xl px-3 py-2 text-start",
+                        "text-subheadline text-label hover:bg-fill/60 focus-visible:outline-2 focus-visible:outline-offset-2",
+                        "focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-40"
+                    )}
+                >
+                    <span className="flex min-w-0 flex-col gap-0.5">
+                        <span className="font-semibold">{label}</span>
+                        {description && (
+                            <span className="text-footnote font-normal text-label-secondary">
+                                {description}
+                            </span>
+                        )}
+                    </span>
+                    <ChevronDownIcon
+                        size={17}
+                        aria-hidden="true"
+                        className={cn(
+                            "shrink-0 text-label-tertiary transition-transform duration-normal motion-reduce:transition-none",
+                            open && "rotate-180"
+                        )}
+                    />
+                </button>
+            </h3>
+            <section id={id} aria-labelledby={`${id}-trigger`}>
+                <InlineDisclosure open={open}>
+                    <div className="px-3 pb-3">{children}</div>
+                </InlineDisclosure>
+            </section>
+        </div>
+    )
+}

package/src/components/divider/divider.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from "react"
+import { cn } from "../../lib/class-names"
+
+export type DividerOrientation = "horizontal" | "vertical"
+
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    orientation?: DividerOrientation
+    /** Decorative separators are omitted from the accessibility tree. @default true */
+    decorative?: boolean
+}
+
+/** A semantic separator using the shared surface color. */
+export function Divider({
+    orientation = "horizontal",
+    decorative = true,
+    className,
+    ...props
+}: DividerProps) {
+    return (
+        <hr
+            {...props}
+            role={decorative ? "none" : "separator"}
+            aria-orientation={decorative ? undefined : orientation}
+            className={cn(
+                "shrink-0 border-0 bg-separator",
+                orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch",
+                className
+            )}
+        />
+    )
+}

package/src/components/inline-disclosure/inline-disclosure.tsx

@@ -0,0 +1,49 @@
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import type { ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+import { spring } from "../../motion/transitions"
+
+export interface InlineDisclosureProps {
+    /** Whether the content is expanded. */
+    open: boolean
+    children: ReactNode
+    className?: string
+}
+
+/**
+ * An inline, spring-driven reveal for settings editors and small details.
+ *
+ * Height and opacity animate together so following rows move continuously
+ * instead of jumping. Motion is disabled when the user requests less motion.
+ * The content unmounts after its exit animation completes.
+ */
+export function InlineDisclosure({ open, children, className }: InlineDisclosureProps) {
+    const reduceMotion = useReducedMotion()
+
+    return (
+        <AnimatePresence initial={false}>
+            {open && (
+                <motion.div
+                    key="inline-disclosure"
+                    initial={reduceMotion ? false : { height: 0, opacity: 0 }}
+                    animate={{ height: "auto", opacity: 1 }}
+                    exit={reduceMotion ? { opacity: 0 } : { height: 0, opacity: 0 }}
+                    transition={
+                        reduceMotion
+                            ? { duration: 0 }
+                            : {
+                                  height: spring.smooth,
+                                  opacity: {
+                                      duration: 0.18,
+                                      ease: "easeOut",
+                                  },
+                              }
+                    }
+                    className={cn("overflow-hidden", className)}
+                >
+                    {children}
+                </motion.div>
+            )}
+        </AnimatePresence>
+    )
+}

package/src/components/labeled-content/labeled-content.tsx

@@ -1,6 +1,19 @@
-import type { ReactNode } from "react"
+import type { HTMLAttributes, ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
+export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** The visible name of the row. */
+    label: string
+    /** Supporting text below the label. */
+    description?: string
+    /** The row's control or value. */
+    children: ReactNode
+    /** Places the control below the label at every width. @default false */
+    stacked?: boolean
+    /** Places a wide control below its label on phones. @default false */
+    wide?: boolean
+}
+
 /**
  * A row: a label, an optional description, and its control at the trailing
  * end, as SwiftUI's `LabeledContent`. Wide controls move under the label
@@ -12,38 +25,31 @@ export function LabeledContent({
     children,
     stacked,
     wide,
-}: {
-    label: string
-    description?: string
-    children: ReactNode
-    /** Put the control under the label, for wide controls. */
-    stacked?: boolean
-    /** A wide control (segmented) that moves under the label on phones. */
-    wide?: boolean
-}) {
+    className,
+    ...props
+}: LabeledContentProps) {
     return (
         <div
             className={cn(
-                "flex flex-wrap gap-x-4 gap-y-2.5 px-4 py-3",
+                "flex flex-wrap gap-x-4 gap-y-2 px-4 py-3",
                 stacked
                     ? "flex-col items-stretch"
                     : cn(
                           "items-center justify-between",
-                          wide &&
-                              "max-sm:flex-col max-sm:items-stretch max-sm:gap-2.5"
-                      )
+                          wide && "max-sm:flex-col max-sm:items-stretch max-sm:gap-2"
+                      ),
+                className
             )}
+            {...props}
         >
             <div
                 className={cn(
-                    "flex min-w-0 flex-1 flex-col break-normal",
+                    "flex min-w-0 flex-1 flex-col gap-2 break-normal",
                     !stacked && "basis-36",
                     wide && "max-sm:basis-auto"
                 )}
             >
-                <span className="text-subheadline text-label">
-                    {label}
-                </span>
+                <span className="text-subheadline text-label">{label}</span>
                 {description && (
                     <span className="text-footnote leading-snug text-label-secondary">
                         {description}

package/src/components/locale-switcher/locale-switcher.tsx

@@ -1,11 +1,6 @@
 import { getNativeLanguageName } from "../../lib/language"
 import { cn } from "../../lib/class-names"
-import {
-    AnimatePresence,
-    motion,
-    useDragControls,
-    useMotionValue,
-} from "motion/react"
+import { AnimatePresence, motion, useDragControls, useMotionValue } from "motion/react"
 import { useEffect, useRef, useState } from "react"
 
 type Side = "left" | "right"
@@ -31,10 +26,8 @@ function loadStoredAnchor(storageKey: string): Anchor | null {
         if (!raw) return null
         const parsed = JSON.parse(raw) as Partial<Anchor>
         if (
-            (parsed.side === "left" ||
-                parsed.side === "right") &&
-            (parsed.edge === "top" ||
-                parsed.edge === "bottom") &&
+            (parsed.side === "left" || parsed.side === "right") &&
+            (parsed.edge === "top" || parsed.edge === "bottom") &&
             typeof parsed.x === "number" &&
             typeof parsed.y === "number"
         ) {
@@ -49,15 +42,9 @@ function loadStoredAnchor(storageKey: string): Anchor | null {
     return null
 }
 
-function saveStoredAnchor(
-    storageKey: string,
-    anchor: Anchor
-) {
+function saveStoredAnchor(storageKey: string, anchor: Anchor) {
     try {
-        localStorage.setItem(
-            storageKey,
-            JSON.stringify(anchor)
-        )
+        localStorage.setItem(storageKey, JSON.stringify(anchor))
     } catch {}
 }
 
@@ -98,50 +85,25 @@ export function LocaleSwitcher<L extends string>({
     useEffect(() => {
         if (!open) return
         function handlePointerDown(e: PointerEvent) {
-            if (
-                containerRef.current &&
-                !containerRef.current.contains(
-                    e.target as Node
-                )
-            ) {
+            if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
                 setOpen(false)
             }
         }
-        document.addEventListener(
-            "pointerdown",
-            handlePointerDown
-        )
-        return () =>
-            document.removeEventListener(
-                "pointerdown",
-                handlePointerDown
-            )
+        document.addEventListener("pointerdown", handlePointerDown)
+        return () => document.removeEventListener("pointerdown", handlePointerDown)
     }, [open])
 
     function commitDraggedPosition() {
         const el = containerRef.current
         if (!el) return
         const rect = el.getBoundingClientRect()
-        const side: Side =
-            rect.left + rect.width / 2 < window.innerWidth / 2
-                ? "left"
-                : "right"
-        const edge: Edge =
-            rect.top + rect.height / 2 <
-            window.innerHeight / 2
-                ? "top"
-                : "bottom"
+        const side: Side = rect.left + rect.width / 2 < window.innerWidth / 2 ? "left" : "right"
+        const edge: Edge = rect.top + rect.height / 2 < window.innerHeight / 2 ? "top" : "bottom"
         const next: Anchor = {
             side,
             edge,
-            x:
-                side === "left"
-                    ? rect.left
-                    : window.innerWidth - rect.right,
-            y:
-                edge === "top"
-                    ? rect.top
-                    : window.innerHeight - rect.bottom,
+            x: side === "left" ? rect.left : window.innerWidth - rect.right,
+            y: edge === "top" ? rect.top : window.innerHeight - rect.bottom,
         }
         setAnchor(next)
         saveStoredAnchor(storageKey, next)
@@ -163,12 +125,8 @@ export function LocaleSwitcher<L extends string>({
                 position: "fixed",
                 x,
                 y,
-                ...(anchor.side === "left"
-                    ? { left: anchor.x }
-                    : { right: anchor.x }),
-                ...(anchor.edge === "top"
-                    ? { top: anchor.y }
-                    : { bottom: anchor.y }),
+                ...(anchor.side === "left" ? { left: anchor.x } : { right: anchor.x }),
+                ...(anchor.edge === "top" ? { top: anchor.y } : { bottom: anchor.y }),
             }}
             onDragEnd={commitDraggedPosition}
             onMouseLeave={() => open && setOpen(false)}
@@ -182,7 +140,7 @@ export function LocaleSwitcher<L extends string>({
                     stiffness: 380,
                 }}
                 className={cn(
-                    "overflow-hidden rounded-2xl border border-border/35 bg-popover/80 shadow-lg",
+                    "overflow-hidden rounded-2xl border border-separator/35 bg-elevated/80 shadow-lg",
                     "backdrop-blur-xl backdrop-saturate-150",
                     "flex",
                     growsUp ? "flex-col-reverse" : "flex-col",
@@ -193,16 +151,12 @@ export function LocaleSwitcher<L extends string>({
                     type="button"
                     aria-label={label}
                     aria-expanded={open}
-                    onPointerDown={(e) =>
-                        dragControls.start(e)
-                    }
+                    onPointerDown={(e) => dragControls.start(e)}
                     onClick={() => setOpen((prev) => !prev)}
                     className={cn(
                         "flex shrink-0 cursor-grab items-center justify-center",
                         "active:cursor-grabbing text-xs font-semibold",
-                        open
-                            ? "h-9 w-full rounded-lg hover:bg-accent"
-                            : "size-10 rounded-2xl"
+                        open ? "h-9 w-full rounded-lg hover:bg-accent" : "size-10 rounded-2xl"
                     )}
                 >
                     {locale.toUpperCase()}
@@ -218,8 +172,7 @@ export function LocaleSwitcher<L extends string>({
                             className="flex flex-col gap-px"
                         >
                             {langs.map((item) => {
-                                const active =
-                                    item.value === locale
+                                const active = item.value === locale
                                 return (
                                     <button
                                         key={item.value}
@@ -227,16 +180,13 @@ export function LocaleSwitcher<L extends string>({
                                         onClick={() => {
                                             setOpen(false)
                                             if (!active) {
-                                                onSelect(
-                                                    item.value
-                                                )
+                                                onSelect(item.value)
                                             }
                                         }}
                                         className={cn(
                                             "rounded-sm px-2 py-1.5 text-left text-sm",
                                             "hover:bg-accent transition-colors",
-                                            active &&
-                                                "text-primary font-medium"
+                                            active && "text-primary font-medium"
                                         )}
                                     >
                                         {item.label}

package/src/components/menu/menu.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, type ReactNode, useRef, useSyncExternalStore } from "react"
+import { Button, type ButtonProps } from "../button/button"
+import {
+    closeContextMenu,
+    getContextMenu,
+    openMenu,
+    subscribeContextMenu,
+    type ContextMenuEdge,
+    type ContextMenuItem,
+} from "../context-menu/context-menu-store"
+
+export interface MenuProps extends Omit<ButtonProps, "onClick" | "children"> {
+    /** Accessible name for the menu trigger. */
+    label: string
+    /** Items are rendered by the app's existing ContextMenuHost. */
+    items: readonly ContextMenuItem[]
+    children: ReactNode
+    /** Logical edge used to align the menu, including RTL. @default "leading" */
+    edge?: ContextMenuEdge
+    /** Open above the trigger instead of below it. @default false */
+    above?: boolean
+}
+
+/** A declarative menu button using the same native host as context menus. */
+export const Menu = forwardRef<HTMLButtonElement, MenuProps>(function Menu(
+    { label, items, children, edge = "leading", above = false, disabled, ...props },
+    forwardedRef
+) {
+    const trigger = useRef<HTMLButtonElement>(null)
+    const current = useSyncExternalStore(subscribeContextMenu, getContextMenu, () => null)
+    const expanded = Boolean(current && current.anchor === trigger.current)
+
+    const toggle = () => {
+        if (!trigger.current || disabled) return
+        if (expanded) closeContextMenu(false)
+        else openMenu(trigger.current, [...items], { edge, above })
+    }
+
+    return (
+        <Button
+            {...props}
+            ref={(node) => {
+                trigger.current = node
+                if (typeof forwardedRef === "function") forwardedRef(node)
+                else if (forwardedRef) forwardedRef.current = node
+            }}
+            type="button"
+            aria-label={label}
+            aria-haspopup="menu"
+            aria-expanded={expanded}
+            disabled={disabled}
+            onClick={toggle}
+            onKeyDown={(event) => {
+                props.onKeyDown?.(event)
+                if (event.defaultPrevented) return
+                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                    event.preventDefault()
+                    if (!expanded) toggle()
+                } else if (event.key === "Escape" && expanded) {
+                    event.preventDefault()
+                    closeContextMenu()
+                }
+            }}
+        >
+            {children}
+        </Button>
+    )
+})

package/src/components/picker/picker-trigger.ts

@@ -0,0 +1,10 @@
+import { cn } from "../../lib/class-names"
+
+/** Shared field treatment for the popup-based Picker, date and time controls. */
+export function pickerTriggerStyle(className?: string) {
+    return cn(
+        "flex w-full min-w-0 items-center gap-2 rounded-lg control-field px-3 py-2 text-start text-subheadline text-label",
+        "disabled:cursor-not-allowed disabled:opacity-40",
+        className
+    )
+}