@passui/react 0.1.16 → 0.1.19

package/src/components/context-menu/use-context-menu.ts

@@ -1,13 +1,6 @@
-import {
-    type MouseEvent,
-    type PointerEvent,
-    useRef,
-} from "react"
+import { type MouseEvent, type PointerEvent, useRef } from "react"
 import { haptic } from "../../lib/haptics"
-import {
-    type ContextMenuItem,
-    openContextMenu,
-} from "./context-menu-store"
+import { type ContextMenuItem, openContextMenu } from "./context-menu-store"
 
 const LONG_PRESS_MS = 480
 const MOVE_TOLERANCE = 10
@@ -16,9 +9,7 @@ const MOVE_TOLERANCE = 10
  * Right-click on desktop, long-press on touch screens: both open the same
  * menu of actions. Spread the returned handlers onto the element.
  */
-export function useContextMenu(
-    items: () => ContextMenuItem[]
-) {
+export function useContextMenu(items: () => ContextMenuItem[]) {
     const press = useRef<{
         x: number
         y: number
@@ -35,13 +26,7 @@ export function useContextMenu(
         onContextMenu(event: MouseEvent) {
             event.preventDefault()
             cancel()
-            openContextMenu(
-                event.clientX,
-                event.clientY,
-                items(),
-                false,
-                event.currentTarget
-            )
+            openContextMenu(event.clientX, event.clientY, items(), false, event.currentTarget)
         },
         onPointerDown(event: PointerEvent) {
             if (event.pointerType !== "touch") return
@@ -55,13 +40,7 @@ export function useContextMenu(
                     press.current = null
                     suppressClick.current = true
                     haptic("medium")
-                    openContextMenu(
-                        x,
-                        y,
-                        items(),
-                        true,
-                        anchor
-                    )
+                    openContextMenu(x, y, items(), true, anchor)
                 }, LONG_PRESS_MS),
             }
         },
@@ -69,10 +48,7 @@ export function useContextMenu(
             const start = press.current
             if (
                 start &&
-                Math.hypot(
-                    event.clientX - start.x,
-                    event.clientY - start.y
-                ) > MOVE_TOLERANCE
+                Math.hypot(event.clientX - start.x, event.clientY - start.y) > MOVE_TOLERANCE
             ) {
                 cancel()
             }

package/src/components/conversation/conversation.tsx

@@ -1,6 +1,5 @@
-import { IconButton } from "@passui/react/icon-button"
-import { ArrowUp02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
+import { IconButton } from "../button/icon-button"
+import { SendIcon } from "../../icons/icons"
 import type { ReactNode } from "react"
 import { useState } from "react"
 import { formatTime } from "../../lib/date"
@@ -43,10 +42,7 @@ function dayLabel(iso: string, locale?: string) {
     const word = new Intl.RelativeTimeFormat(locale, {
         numeric: "auto",
     }).format(offset, "day")
-    return (
-        word.charAt(0).toLocaleUpperCase(locale) +
-        word.slice(1)
-    )
+    return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1)
 }
 
 const clock = (iso: string, locale?: string) =>
@@ -75,90 +71,64 @@ function Messages({
                 const next = messages[index + 1]
                 const newDay =
                     !prev ||
-                    new Date(
-                        prev.createdAt
-                    ).toDateString() !==
-                        new Date(
-                            message.createdAt
-                        ).toDateString()
+                    new Date(prev.createdAt).toDateString() !==
+                        new Date(message.createdAt).toDateString()
                 const startsGroup =
                     newDay ||
                     prev.mine !== message.mine ||
-                    new Date(message.createdAt).getTime() -
-                        new Date(prev.createdAt).getTime() >
+                    new Date(message.createdAt).getTime() - new Date(prev.createdAt).getTime() >
                         GROUP_GAP_MS
                 const endsGroup =
                     !next ||
                     next.mine !== message.mine ||
-                    new Date(next.createdAt).getTime() -
-                        new Date(
-                            message.createdAt
-                        ).getTime() >
+                    new Date(next.createdAt).getTime() - new Date(message.createdAt).getTime() >
                         GROUP_GAP_MS
 
                 return (
-                    <li
-                        key={message.id}
-                        className="flex flex-col"
-                    >
+                    <li key={message.id} className="flex flex-col">
                         {newDay && (
                             // the reader's own day and clock, which a server can't know
                             <span
                                 suppressHydrationWarning
                                 className="my-4 text-center text-caption2 font-medium text-label-secondary"
                             >
-                                {dayLabel(
-                                    message.createdAt,
-                                    locale
-                                )}
+                                {dayLabel(message.createdAt, locale)}
                             </span>
                         )}
                         <div
                             className={cn(
                                 "flex items-end gap-2",
-                                message.mine
-                                    ? "justify-end"
-                                    : "justify-start",
-                                startsGroup
-                                    ? "mt-3"
-                                    : "mt-0.5"
+                                message.mine ? "justify-end" : "justify-start",
+                                startsGroup ? "mt-3" : "mt-0.5"
                             )}
                         >
                             {!message.mine && (
                                 <span className="flex size-7 shrink-0 items-center justify-center">
-                                    {endsGroup &&
-                                        message.avatar}
+                                    {endsGroup && message.avatar}
                                 </span>
                             )}
                             <div
                                 className={cn(
                                     "flex max-w-[78%] flex-col gap-1",
-                                    message.mine
-                                        ? "items-end"
-                                        : "items-start"
+                                    message.mine ? "items-end" : "items-start"
                                 )}
                             >
-                                {startsGroup &&
-                                    message.author && (
-                                        <span className="px-3 text-caption2 text-label-secondary">
-                                            {message.author}
-                                        </span>
-                                    )}
+                                {startsGroup && message.author && (
+                                    <span className="px-3 text-caption2 text-label-secondary">
+                                        {message.author}
+                                    </span>
+                                )}
                                 {/* text only: a message can never become markup */}
                                 <p
                                     suppressHydrationWarning
-                                    title={formatTime(
-                                        message.createdAt
-                                    )}
+                                    title={formatTime(message.createdAt)}
                                     className={cn(
                                         "rounded-4xl px-3.5 py-2 text-subheadline leading-snug whitespace-pre-wrap wrap-break-word",
                                         message.mine
                                             ? "bg-inverse text-on-inverse"
                                             : "bg-fill text-label",
                                         endsGroup &&
-                                            (message.mine
-                                                ? "rounded-br-md"
-                                                : "rounded-bl-md")
+                                            (message.mine ? "rounded-br-md" : "rounded-bl-md")
                                     )}
                                 >
                                     {message.body}
@@ -166,15 +136,10 @@ function Messages({
                                 {endsGroup && (
                                     <time
                                         suppressHydrationWarning
-                                        dateTime={
-                                            message.createdAt
-                                        }
+                                        dateTime={message.createdAt}
                                         className="px-3 text-caption2 text-label-secondary tabular-nums"
                                     >
-                                        {clock(
-                                            message.createdAt,
-                                            locale
-                                        )}
+                                        {clock(message.createdAt, locale)}
                                     </time>
                                 )}
                             </div>
@@ -232,14 +197,9 @@ function Composer({
             <div className="flex items-end gap-2 rounded-5xl border border-separator bg-elevated py-1.5 pr-1.5 pl-4 transition-colors focus-within:border-accent-text/60">
                 <textarea
                     value={body}
-                    onChange={(event) =>
-                        setBody(event.target.value)
-                    }
+                    onChange={(event) => setBody(event.target.value)}
                     onKeyDown={(event) => {
-                        if (
-                            event.key === "Enter" &&
-                            (event.metaKey || event.ctrlKey)
-                        ) {
+                        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
                             event.preventDefault()
                             void send()
                         }
@@ -256,20 +216,14 @@ function Composer({
                     label={sendLabel}
                     className="size-8 shrink-0 rounded-full"
                 >
-                    <HugeiconsIcon
-                        icon={ArrowUp02Icon}
-                        strokeWidth={2.5}
-                    />
+                    <SendIcon size={18} strokeWidth={2.5} />
                 </IconButton>
             </div>
             <div className="flex min-h-6 items-center gap-2 px-1">
                 {actions}
                 <span className="ml-auto text-caption2 text-label-secondary tabular-nums">
                     {body.length > maxLength * 0.8 &&
-                        (remaining?.(
-                            maxLength - body.length
-                        ) ??
-                            maxLength - body.length)}
+                        (remaining?.(maxLength - body.length) ?? maxLength - body.length)}
                 </span>
             </div>
         </form>

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

@@ -17,26 +17,15 @@ type DatePickerProps = {
 }
 
 /** Segmented date entry suited to birthdays, without a native calendar dialog. */
-export function DatePicker({
-    value,
-    onChange,
-    label,
-    labels,
-    locale,
-    max,
-}: DatePickerProps) {
+export function DatePicker({ value, onChange, label, labels, locale, max }: DatePickerProps) {
     const [year, month, day] = value.split("-")
     const [parts, setParts] = useState({
         year: year ?? "",
         month: month ?? "",
         day: day ?? "",
     })
-    const complete =
-        parts.year.length === 4 &&
-        Boolean(parts.month && parts.day)
-    const invalid =
-        complete &&
-        !dateValue(parts.year, parts.month, parts.day, max)
+    const complete = parts.year.length === 4 && Boolean(parts.month && parts.day)
+    const invalid = complete && !dateValue(parts.year, parts.month, parts.day, max)
     const order = new Intl.DateTimeFormat(locale, {
         year: "numeric",
         month: "2-digit",
@@ -49,16 +38,11 @@ export function DatePicker({
                 part
             ): part is Intl.DateTimeFormatPart & {
                 type: "year" | "month" | "day"
-            } =>
-                part.type === "year" ||
-                part.type === "month" ||
-                part.type === "day"
+            } => part.type === "year" || part.type === "month" || part.type === "day"
         )
     return (
         <fieldset className="flex min-w-0 flex-col gap-3">
-            <legend className="mb-3 text-subheadline font-medium">
-                {label}
-            </legend>
+            <legend className="mb-3 text-subheadline font-medium">{label}</legend>
             <div className="grid grid-cols-3 gap-3">
                 {order.map(({ type }) => (
                     <TextField
@@ -72,29 +56,16 @@ export function DatePicker({
                         onChange={(event) => {
                             const next = {
                                 ...parts,
-                                [type]: event.target.value.replace(
-                                    /\D/g,
-                                    ""
-                                ),
+                                [type]: event.target.value.replace(/\D/g, ""),
                             }
                             setParts(next)
-                            onChange(
-                                dateValue(
-                                    next.year,
-                                    next.month,
-                                    next.day,
-                                    max
-                                )
-                            )
+                            onChange(dateValue(next.year, next.month, next.day, max))
                         }}
                     />
                 ))}
             </div>
             {invalid && (
-                <p
-                    role="status"
-                    className="text-footnote text-danger"
-                >
+                <p role="status" className="text-footnote text-danger">
                     {labels.invalid}
                 </p>
             )}

package/src/components/date-picker/date-value.ts

@@ -1,37 +1,12 @@
 /** Returns a date-only value without timezone conversion or date rollover. */
-export function dateValue(
-    year: string,
-    month: string,
-    day: string,
-    max?: string
-) {
-    if (
-        !/^\d{4}$/.test(year) ||
-        !/^\d{1,2}$/.test(month) ||
-        !/^\d{1,2}$/.test(day)
-    )
-        return ""
+export function dateValue(year: string, month: string, day: string, max?: string) {
+    if (!/^\d{4}$/.test(year) || !/^\d{1,2}$/.test(month) || !/^\d{1,2}$/.test(day)) return ""
     const y = Number(year)
     const m = Number(month)
     const d = Number(day)
-    const leap =
-        y % 4 === 0 && (y % 100 !== 0 || y % 400 === 0)
-    const days = [
-        31,
-        leap ? 29 : 28,
-        31,
-        30,
-        31,
-        30,
-        31,
-        31,
-        30,
-        31,
-        30,
-        31,
-    ]
-    if (y < 1 || m < 1 || m > 12 || d < 1 || d > days[m - 1]!)
-        return ""
+    const leap = y % 4 === 0 && (y % 100 !== 0 || y % 400 === 0)
+    const days = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
+    if (y < 1 || m < 1 || m > 12 || d < 1 || d > days[m - 1]!) return ""
     const value = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
     return max && value > max ? "" : value
 }

package/src/components/dialog/dialog-host.tsx

@@ -1,17 +1,8 @@
-import { AnimatePresence, motion } from "motion/react"
-import {
-    useEffect,
-    useRef,
-    useSyncExternalStore,
-} from "react"
-import { cn } from "../../lib/class-names"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import { useEffect, useRef, useSyncExternalStore } from "react"
+import { Button } from "../button/button"
 import { spring } from "../../motion/transitions"
-import {
-    getDialog,
-    type PendingDialog,
-    settleDialog,
-    subscribeDialogs,
-} from "./dialog-store"
+import { getDialog, type PendingDialog, settleDialog, subscribeDialogs } from "./dialog-store"
 
 /**
  * Renders confirmation dialogs: a glass card that springs up over blurred
@@ -19,36 +10,24 @@ import {
  * action is destructive, where the safe choice has focus.
  */
 export function DialogHost() {
-    const dialog = useSyncExternalStore(
-        subscribeDialogs,
-        getDialog,
-        () => null
-    )
+    const dialog = useSyncExternalStore(subscribeDialogs, getDialog, () => null)
     return (
         <AnimatePresence>
-            {dialog && (
-                <ConfirmCard
-                    key={dialog.id}
-                    dialog={dialog}
-                />
-            )}
+            {dialog && <ConfirmCard key={dialog.id} dialog={dialog} />}
         </AnimatePresence>
     )
 }
 
 function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
+    const reducedMotion = useReducedMotion()
     const confirmRef = useRef<HTMLButtonElement>(null)
     const cancelRef = useRef<HTMLButtonElement>(null)
     const titleId = `dialog-title-${dialog.id}`
     const messageId = `dialog-message-${dialog.id}`
 
     useEffect(() => {
-        const previous = window.document
-            .activeElement as HTMLElement | null
-        ;(dialog.destructive
-            ? cancelRef
-            : confirmRef
-        ).current?.focus()
+        const previous = window.document.activeElement as HTMLElement | null
+        ;(dialog.destructive ? cancelRef : confirmRef).current?.focus()
         const onKey = (event: KeyboardEvent) => {
             if (event.key === "Escape") {
                 event.preventDefault()
@@ -56,21 +35,12 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
             }
             // Keep focus inside the dialog.
             if (event.key === "Tab") {
-                const order = [
-                    cancelRef.current,
-                    confirmRef.current,
-                ].filter(Boolean) as HTMLElement[]
-                const at = order.indexOf(
-                    window.document
-                        .activeElement as HTMLElement
-                )
+                const order = [cancelRef.current, confirmRef.current].filter(
+                    Boolean
+                ) as HTMLElement[]
+                const at = order.indexOf(window.document.activeElement as HTMLElement)
                 event.preventDefault()
-                order[
-                    (at +
-                        (event.shiftKey ? -1 : 1) +
-                        order.length) %
-                        order.length
-                ]?.focus()
+                order[(at + (event.shiftKey ? -1 : 1) + order.length) % order.length]?.focus()
             }
         }
         window.addEventListener("keydown", onKey)
@@ -82,40 +52,28 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
 
     return (
         <div className="fixed inset-0 z-[70] flex items-center justify-center p-5">
-            <motion.button
-                type="button"
-                tabIndex={-1}
-                aria-label="Cancel"
+            <motion.div
+                aria-hidden="true"
                 className="absolute inset-0 bg-black/25 backdrop-blur-md"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
-                transition={spring.smooth}
+                transition={reducedMotion ? { duration: 0 } : spring.smooth}
                 onClick={() => settleDialog(false)}
             />
             <motion.div
                 role="alertdialog"
                 aria-modal="true"
                 aria-labelledby={titleId}
-                aria-describedby={
-                    dialog.message ? messageId : undefined
-                }
+                aria-describedby={dialog.message ? messageId : undefined}
                 className="glass-menu relative flex w-full max-w-[340px] flex-col gap-4 rounded-5xl p-5 text-center"
-                initial={{ opacity: 0, scale: 0.86, y: 12 }}
-                animate={{ opacity: 1, scale: 1, y: 0 }}
-                exit={{
-                    opacity: 0,
-                    scale: 0.94,
-                    y: 6,
-                    transition: spring.snappy,
-                }}
-                transition={spring.bouncy}
+                initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 6 }}
+                transition={reducedMotion ? { duration: 0 } : spring.smooth}
             >
                 <div className="flex flex-col gap-1.5 px-1 pt-1">
-                    <h2
-                        id={titleId}
-                        className="text-body font-semibold text-label"
-                    >
+                    <h2 id={titleId} className="text-body font-semibold text-label">
                         {dialog.title}
                     </h2>
                     {dialog.message && (
@@ -128,27 +86,24 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
                     )}
                 </div>
                 <div className="flex gap-2.5">
-                    <button
+                    <Button
                         ref={cancelRef}
                         type="button"
+                        variant="secondary"
                         onClick={() => settleDialog(false)}
-                        className="h-11 grow rounded-2xl bg-fill text-subheadline font-semibold text-label transition-[background-color,transform] hover:bg-separator/70 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
+                        className="min-w-0 grow rounded-2xl"
                     >
                         {dialog.cancelLabel ?? "Cancel"}
-                    </button>
-                    <button
+                    </Button>
+                    <Button
                         ref={confirmRef}
                         type="button"
+                        variant={dialog.destructive ? "destructive" : "default"}
                         onClick={() => settleDialog(true)}
-                        className={cn(
-                            "h-11 grow rounded-2xl text-subheadline font-semibold transition-[filter,transform] hover:brightness-105 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70",
-                            dialog.destructive
-                                ? "bg-danger text-white"
-                                : "bg-inverse text-on-inverse"
-                        )}
+                        className="min-w-0 grow rounded-2xl"
                     >
                         {dialog.confirmLabel ?? "OK"}
-                    </button>
+                    </Button>
                 </div>
             </motion.div>
         </div>

package/src/components/dialog/dialog-store.ts

@@ -26,9 +26,7 @@ const emit = () => {
     for (const listener of listeners) listener()
 }
 
-export function confirmDialog(
-    options: ConfirmOptions
-): Promise<boolean> {
+export function confirmDialog(options: ConfirmOptions): Promise<boolean> {
     return new Promise((resolve) => {
         const dialog = { ...options, id: nextId++, resolve }
         if (current) queue.push(dialog)