@passui/react 0.1.19 → 0.1.20

package/src/components/one-time-code/one-time-code.tsx

@@ -0,0 +1,168 @@
+import { type CSSProperties, type InputHTMLAttributes, useEffect, useId, useRef } from "react"
+import { CheckIcon } from "../../icons/icons"
+import { cn } from "../../lib/class-names"
+
+export type OneTimeCodeStatus = "idle" | "verifying" | "success" | "error"
+export interface OneTimeCodeProps
+    extends Omit<
+        InputHTMLAttributes<HTMLInputElement>,
+        "value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size"
+    > {
+    label: string
+    value: string
+    onChange: (value: string) => void
+    /** Called when a complete code is entered, including paste and autofill. */
+    onComplete?: (value: string) => void
+    /** Number of digits, 3–8. @default 6 */
+    length?: number
+    status?: OneTimeCodeStatus
+    /** Localized verification feedback announced without reading decorative cells. */
+    statusLabel?: string
+}
+
+/** Normalize common numeric keyboards without splitting the browser's input into cells. */
+export function normalizeCode(value: string, length: number) {
+    return Array.from(value, (digit) => {
+        const point = digit.codePointAt(0) ?? 0
+        for (const base of [0x30, 0x660, 0x6f0, 0xff10]) {
+            if (point >= base && point < base + 10) return String(point - base)
+        }
+        return ""
+    })
+        .join("")
+        .slice(0, length)
+}
+
+/** Six cells, one field: paste, autofill, selection and Backspace stay native. */
+export function OneTimeCode({
+    label,
+    value,
+    onChange,
+    onComplete,
+    length = 6,
+    status = "idle",
+    statusLabel,
+    className,
+    disabled,
+    id: suppliedId,
+    ...props
+}: OneTimeCodeProps) {
+    const generated = useId()
+    const id = suppliedId ?? generated
+    const filter = `otp-goo-${generated.replace(/:/g, "")}`
+    const input = useRef<HTMLInputElement>(null)
+    const count = Number.isFinite(length) ? Math.max(3, Math.min(8, Math.round(length))) : 6
+    const code = normalizeCode(value, count)
+    const locked = disabled || props.readOnly || status === "verifying" || status === "success"
+    useEffect(() => {
+        if (status === "error") input.current?.select()
+    }, [status])
+    const update = (next: string) => {
+        const normalized = normalizeCode(next, count)
+        onChange(normalized)
+        if (normalized.length === count && normalized !== code) onComplete?.(normalized)
+    }
+    return (
+        <div
+            className={cn("passui-one-time-code not-typeset", className)}
+            data-status={status}
+            style={{ "--otp-length": count, "--otp-middle": (count - 1) / 2 } as CSSProperties}
+        >
+            <svg aria-hidden="true" width="0" height="0" className="absolute">
+                <defs>
+                    <filter
+                        id={filter}
+                        x="-20%"
+                        y="-50%"
+                        width="140%"
+                        height="200%"
+                        colorInterpolationFilters="sRGB"
+                    >
+                        <feGaussianBlur stdDeviation="3" result="smear" />
+                        <feColorMatrix
+                            in="smear"
+                            type="matrix"
+                            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -10"
+                        />
+                    </filter>
+                </defs>
+            </svg>
+            <div className="passui-otp-row" dir="ltr">
+                {/* A right code fuses: cells converge on one point while a capsule
+                grows there. The filter joins the material, never the digits. */}
+                <div
+                    aria-hidden="true"
+                    className="passui-otp-materials"
+                    style={{ filter: `url(#${filter})` }}
+                >
+                    {Array.from({ length: count }, (_, index) => (
+                        <span
+                            key={index}
+                            className="passui-otp-cell"
+                            style={{ "--otp-index": index } as CSSProperties}
+                        />
+                    ))}
+                    <span className="passui-otp-capsule" />
+                </div>
+                <div aria-hidden="true" className="passui-otp-digits">
+                    {Array.from({ length: count }, (_, index) => (
+                        <span
+                            key={index}
+                            className="passui-otp-digit"
+                            data-active={index === Math.min(code.length, count - 1) || undefined}
+                            style={{ "--otp-index": index } as CSSProperties}
+                        >
+                            {code[index] && (
+                                <span key={`${index}-${code[index]}`} className="passui-otp-glyph">
+                                    {code[index]}
+                                </span>
+                            )}
+                        </span>
+                    ))}
+                </div>
+                <CheckIcon aria-hidden="true" className="passui-otp-check" size={24} />
+                <input
+                    {...props}
+                    ref={input}
+                    id={id}
+                    type="text"
+                    inputMode="numeric"
+                    autoComplete="one-time-code"
+                    pattern="[0-9]*"
+                    maxLength={count}
+                    aria-label={label}
+                    value={code}
+                    disabled={disabled}
+                    readOnly={locked}
+                    aria-busy={status === "verifying" || undefined}
+                    aria-invalid={status === "error" || props["aria-invalid"]}
+                    aria-describedby={statusLabel ? `${id}-status` : props["aria-describedby"]}
+                    onChange={(event) => update(event.target.value)}
+                    onPaste={(event) => {
+                        props.onPaste?.(event)
+                        if (event.defaultPrevented || locked) return
+                        const pasted = event.clipboardData.getData("text")
+                        const normalized = normalizeCode(pasted, count)
+                        if (normalized && normalized !== pasted) {
+                            event.preventDefault()
+                            update(normalized)
+                        }
+                    }}
+                    className="passui-otp-input"
+                />
+            </div>
+            {statusLabel && (
+                <p
+                    id={`${id}-status`}
+                    role="status"
+                    className={cn(
+                        "mt-2 text-footnote",
+                        status === "error" ? "text-danger" : "text-label-secondary"
+                    )}
+                >
+                    {statusLabel}
+                </p>
+            )}
+        </div>
+    )
+}

package/src/components/picker/picker.tsx

@@ -1,29 +1,18 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import {
-    type KeyboardEvent,
-    useCallback,
-    useEffect,
-    useId,
-    useLayoutEffect,
-    useMemo,
-    useRef,
-    useState,
-} from "react"
+import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure"
+import { type KeyboardEvent, useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
 import { createPortal } from "react-dom"
-import { useAnchoredPlacement } from "../../hooks/use-anchored-placement"
-import { useFloatingDismiss } from "../../hooks/use-floating-dismiss"
-import { FLOATING_LAYER } from "../../hooks/use-dismiss"
 import { CheckIcon, SearchIcon, SelectorIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
-import { registerFloatingLayer } from "../../lib/floating-layers"
 import { haptic } from "../../lib/haptics"
-import { floatingPanelMotion } from "../../motion/transitions"
+import { AnchoredSurface } from "../popover/anchored-surface"
 import { pickerTriggerStyle } from "./picker-trigger"
 
 export interface PickerOption<T extends string> {
     value: T
     label: string
     /** A quieter second line or trailing note, such as "Free" or a region. */
+    disabled?: boolean
+    keywords?: string[]
     detail?: string
     /** The option's own language, so it is spoken and shaped right. */
     lang?: string
@@ -47,6 +36,10 @@ export interface PickerProps<T extends string> {
     searchPlaceholder?: string
     /** Shown when the filter matches nothing. @default "No matches" */
     emptyLabel?: string
+    /** Offers a new value when no option has the same label or value. */
+    onCreate?: (query: string) => void
+    /** Localized creation action; receives the trimmed query. */
+    createLabel?: (query: string) => string
     className?: string
     /** Prevents opening or choosing an option. @default false */
     disabled?: boolean
@@ -71,22 +64,28 @@ export function Picker<T extends string>({
     searchPlaceholder = "Search",
     emptyLabel = "No matches",
     className,
+    onCreate,
+    createLabel,
     disabled = false,
 }: PickerProps<T>) {
-    const [open, setOpen] = useState(false)
+    const panel = useAnchoredDisclosure(disabled)
+    const { open } = panel
     const trigger = useRef<HTMLButtonElement>(null)
     const listId = useId()
     const selected = options.find((option) => option.value === value)
 
-    const close = useCallback((refocus: boolean) => {
-        setOpen(false)
-        if (refocus) trigger.current?.focus({ preventScroll: true })
-    }, [])
+    const close = useCallback(
+        (refocus: boolean) => {
+            panel.close()
+            if (refocus) trigger.current?.focus({ preventScroll: true })
+        },
+        [panel.close]
+    )
 
     const onTriggerKey = (event: KeyboardEvent<HTMLButtonElement>) => {
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
             event.preventDefault()
-            setOpen(true)
+            panel.show()
         }
     }
 
@@ -101,7 +100,7 @@ export function Picker<T extends string>({
                 aria-expanded={open && !disabled}
                 aria-controls={open && !disabled ? listId : undefined}
                 disabled={disabled}
-                onClick={() => setOpen((current) => !current)}
+                onClick={() => panel.toggle()}
                 onKeyDown={onTriggerKey}
                 className={pickerTriggerStyle(className)}
             >
@@ -115,27 +114,31 @@ export function Picker<T extends string>({
             </button>
             {typeof document !== "undefined" &&
                 createPortal(
-                    <AnimatePresence>
-                        {open && !disabled && trigger.current && (
-                            <SelectList
-                                id={listId}
-                                anchor={trigger.current}
-                                options={options}
-                                value={value}
-                                label={label}
-                                searchable={searchable ?? options.length > SEARCH_FROM}
-                                searchPlaceholder={searchPlaceholder}
-                                emptyLabel={emptyLabel}
-                                onPick={(next) => {
-                                    close(true)
-                                    if (next === value) return
-                                    haptic("selection")
-                                    onChange(next)
-                                }}
-                                onClose={close}
-                            />
-                        )}
-                    </AnimatePresence>,
+                    panel.mounted && trigger.current ? (
+                        <SelectList
+                            open={open}
+                            onExited={panel.onExited}
+                            id={listId}
+                            anchor={trigger.current}
+                            options={options}
+                            value={value}
+                            label={label}
+                            searchable={
+                                searchable ?? (Boolean(onCreate) || options.length >= SEARCH_FROM)
+                            }
+                            searchPlaceholder={searchPlaceholder}
+                            emptyLabel={emptyLabel}
+                            onCreate={onCreate}
+                            createLabel={createLabel}
+                            onPick={(next) => {
+                                close(true)
+                                if (next === value) return
+                                haptic("selection")
+                                onChange(next)
+                            }}
+                            onClose={close}
+                        />
+                    ) : null,
                     document.body
                 )}
         </>
@@ -143,6 +146,8 @@ export function Picker<T extends string>({
 }
 
 function SelectList<T extends string>({
+    open,
+    onExited,
     id,
     anchor,
     options,
@@ -153,7 +158,11 @@ function SelectList<T extends string>({
     emptyLabel,
     onPick,
     onClose,
+    onCreate,
+    createLabel,
 }: {
+    open: boolean
+    onExited: () => void
     id: string
     anchor: HTMLElement
     options: ReadonlyArray<PickerOption<T>>
@@ -162,18 +171,13 @@ function SelectList<T extends string>({
     searchable: boolean
     searchPlaceholder: string
     emptyLabel: string
+    onCreate?: (query: string) => void
+    createLabel?: (query: string) => string
     onPick: (value: T) => void
     onClose: (refocus: boolean) => void
 }) {
-    const root = useRef<HTMLDivElement>(null)
-    const reducedMotion = useReducedMotion()
     const list = useRef<HTMLDivElement>(null)
     const search = useRef<HTMLInputElement>(null)
-    const placement = useAnchoredPlacement(
-        anchor,
-        Math.min(Math.max(anchor.getBoundingClientRect().width, 220), 360),
-        240
-    )
     const [query, setQuery] = useState("")
     const typed = useRef({ text: "", at: 0 })
 
@@ -181,27 +185,48 @@ function SelectList<T extends string>({
         const needle = query.trim().toLocaleLowerCase()
         if (!needle) return options
         return options.filter((option) =>
-            `${option.label} ${option.detail ?? ""} ${option.value}`
+            `${option.label} ${option.detail ?? ""} ${option.value} ${(option.keywords ?? []).join(" ")}`
                 .toLocaleLowerCase()
                 .includes(needle)
         )
     }, [options, query])
 
+    const enabled = shown.filter((option) => !option.disabled)
+    const trimmed = query.trim()
+    const canCreate = Boolean(
+        onCreate &&
+            trimmed &&
+            !options.some(
+                (option) =>
+                    option.label.toLocaleLowerCase() === trimmed.toLocaleLowerCase() ||
+                    option.value.toLocaleLowerCase() === trimmed.toLocaleLowerCase()
+            )
+    )
+    const create = () => {
+        if (!canCreate) return
+        onClose(true)
+        onCreate?.(trimmed)
+    }
     const [active, setActive] = useState(() =>
         Math.max(
             0,
-            options.findIndex((option) => option.value === value)
+            options
+                .filter((option) => !option.disabled)
+                .findIndex((option) => option.value === value)
         )
     )
-    const activeOption = shown[Math.min(active, shown.length - 1)]
+    const last = enabled.length + (canCreate ? 1 : 0) - 1
+    const activeOption = enabled[Math.min(active, last)]
+    const activeId = activeOption
+        ? `${id}-${activeOption.value}`
+        : canCreate
+          ? `${id}-create`
+          : undefined
 
-    useLayoutEffect(() => {
-        if (!root.current) return
-        const unregister = registerFloatingLayer(root.current, anchor)
+    useEffect(() => {
         if (searchable) search.current?.focus()
         else list.current?.focus()
-        return unregister
-    }, [searchable, anchor])
+    }, [searchable])
 
     // The chosen option starts in view, then follows the keyboard.
     useEffect(() => {
@@ -211,10 +236,7 @@ function SelectList<T extends string>({
             ?.scrollIntoView({ block: "nearest" })
     }, [activeOption])
 
-    useFloatingDismiss(root, anchor, onClose)
-
     const onKeyDown = (event: KeyboardEvent) => {
-        const last = shown.length - 1
         const step = (to: number) => {
             event.preventDefault()
             setActive(Math.max(0, Math.min(last, to)))
@@ -229,6 +251,7 @@ function SelectList<T extends string>({
         else if (event.key === "Enter" || (event.key === " " && !searchable)) {
             event.preventDefault()
             if (activeOption) onPick(activeOption.value)
+            else if (canCreate) create()
         } else if (event.key === "Escape") {
             event.preventDefault()
             event.stopPropagation()
@@ -240,7 +263,7 @@ function SelectList<T extends string>({
             const now = Date.now()
             const text = (now - typed.current.at < 700 ? typed.current.text : "") + event.key
             typed.current = { text, at: now }
-            const match = shown.findIndex((option) =>
+            const match = enabled.findIndex((option) =>
                 option.label.toLocaleLowerCase().startsWith(text.toLocaleLowerCase())
             )
             if (match >= 0) setActive(match)
@@ -248,43 +271,15 @@ function SelectList<T extends string>({
     }
 
     return (
-        <motion.div
-            ref={root}
-            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: Math.min(placement.maxHeight ?? 420, 420),
-                transformOrigin: placement.above ? "50% 100%" : "50% 0%",
-            }}
-            className="glass-menu fixed z-[80] flex flex-col overflow-hidden rounded-3xl"
-            {...{ [FLOATING_LAYER]: "" }}
+        <AnchoredSurface
+            open={open}
+            onExited={onExited}
+            anchor={anchor}
+            width={Math.min(Math.max(anchor.getBoundingClientRect().width, 220), 360)}
+            needed={240}
+            onClose={onClose}
             onKeyDown={onKeyDown}
+            contentClassName="overflow-hidden"
         >
             {searchable && (
                 <div className="flex shrink-0 items-center gap-2 border-b border-separator/70 px-3 py-2">
@@ -295,9 +290,7 @@ function SelectList<T extends string>({
                         placeholder={searchPlaceholder}
                         aria-label={searchPlaceholder}
                         aria-controls={id}
-                        aria-activedescendant={
-                            activeOption ? `${id}-${activeOption.value}` : undefined
-                        }
+                        aria-activedescendant={activeId}
                         onChange={(event) => {
                             setQuery(event.target.value)
                             setActive(0)
@@ -312,10 +305,10 @@ function SelectList<T extends string>({
                 role="listbox"
                 aria-label={label}
                 tabIndex={-1}
-                aria-activedescendant={activeOption ? `${id}-${activeOption.value}` : undefined}
+                aria-activedescendant={activeId}
                 className="no-scrollbar flex min-h-0 flex-col overflow-y-auto overscroll-contain p-1.5 outline-none"
             >
-                {shown.map((option, index) => {
+                {shown.map((option) => {
                     const chosen = option.value === value
                     const focused = option === activeOption
                     return (
@@ -326,12 +319,16 @@ function SelectList<T extends string>({
                             role="option"
                             tabIndex={-1}
                             aria-selected={chosen}
+                            aria-disabled={option.disabled || undefined}
                             lang={option.lang}
-                            onPointerMove={() => setActive(index)}
-                            onClick={() => onPick(option.value)}
+                            onPointerMove={() =>
+                                !option.disabled && setActive(enabled.indexOf(option))
+                            }
+                            onClick={() => !option.disabled && onPick(option.value)}
                             className={cn(
                                 "flex min-h-8 cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-subheadline [@media(pointer:coarse)]:min-h-11",
                                 focused ? "bg-fill" : "",
+                                option.disabled && "opacity-40",
                                 chosen ? "font-semibold text-label" : "text-label"
                             )}
                         >
@@ -353,10 +350,26 @@ function SelectList<T extends string>({
                         </div>
                     )
                 })}
-                {shown.length === 0 && (
+                {canCreate && (
+                    <div
+                        id={`${id}-create`}
+                        role="option"
+                        aria-selected={false}
+                        tabIndex={-1}
+                        onPointerMove={() => setActive(enabled.length)}
+                        onClick={create}
+                        className={cn(
+                            "flex min-h-9 cursor-default items-center rounded-lg px-2 py-1.5 text-subheadline text-accent-text",
+                            !activeOption && "bg-fill"
+                        )}
+                    >
+                        {createLabel?.(trimmed) ?? trimmed}
+                    </div>
+                )}
+                {shown.length === 0 && !canCreate && (
                     <p className="px-3 py-2 text-footnote text-label-tertiary">{emptyLabel}</p>
                 )}
             </div>
-        </motion.div>
+        </AnchoredSurface>
     )
 }