@passui/react 0.0.0-stage → 0.1.14

package/src/components/context-menu/examples/context-menu-checked.tsx

@@ -0,0 +1,37 @@
+import { useContextMenu } from "@passui/react"
+import { useState } from "react"
+
+const orders = {
+    recent: "Recently edited",
+    title: "Title",
+    created: "Date created",
+}
+
+type Order = keyof typeof orders
+
+export function ContextMenuChecked() {
+    const [order, setOrder] = useState<Order>("recent")
+    const menu = useContextMenu(() => [
+        { heading: "Sort by" },
+        ...(Object.keys(orders) as Order[]).map((key) => ({
+            label: orders[key],
+            checked: key === order,
+            onSelect: () => setOrder(key),
+        })),
+    ])
+
+    return (
+        <div
+            {...menu}
+            className="flex w-64 select-none flex-col items-center gap-1 rounded-4xl bg-elevated p-6 text-center shadow-sm ring-1 ring-separator/60"
+        >
+            <span className="text-subheadline font-medium text-label">
+                Notes
+            </span>
+            <span className="text-footnote text-label-secondary">
+                Sorted by {orders[order].toLowerCase()}.
+                Right-click to change.
+            </span>
+        </div>
+    )
+}

package/src/components/context-menu/examples/context-menu-list.tsx

@@ -0,0 +1,85 @@
+import { toast, useContextMenu } from "@passui/react"
+import { useState } from "react"
+
+type Note = { id: string; title: string; pinned: boolean }
+
+function NoteRow({
+    note,
+    onPin,
+    onDelete,
+}: {
+    note: Note
+    onPin: () => void
+    onDelete: () => void
+}) {
+    const menu = useContextMenu(() => [
+        { heading: note.title },
+        {
+            label: note.pinned ? "Unpin" : "Pin",
+            onSelect: onPin,
+        },
+        {
+            label: "Duplicate",
+            onSelect: () => toast(`Duplicated ${note.title}`),
+        },
+        "divider",
+        {
+            label: "Delete",
+            destructive: true,
+            onSelect: onDelete,
+        },
+    ])
+
+    return (
+        <li
+            {...menu}
+            className="flex select-none items-center justify-between rounded-2xl px-3 py-2.5 text-subheadline text-label hover:bg-fill/60"
+        >
+            {note.title}
+            {note.pinned && (
+                <span className="text-caption text-accent-text">
+                    Pinned
+                </span>
+            )}
+        </li>
+    )
+}
+
+export function ContextMenuList() {
+    const [notes, setNotes] = useState<Note[]>([
+        { id: "1", title: "Trip to Kyoto", pinned: true },
+        { id: "2", title: "Groceries", pinned: false },
+        { id: "3", title: "Book club picks", pinned: false },
+    ])
+
+    return (
+        <ul className="m-0 flex w-full max-w-xs list-none flex-col p-0">
+            {notes.map((note) => (
+                <NoteRow
+                    key={note.id}
+                    note={note}
+                    onPin={() =>
+                        setNotes((current) =>
+                            current.map((item) =>
+                                item.id === note.id
+                                    ? {
+                                          ...item,
+                                          pinned:
+                                              !item.pinned,
+                                      }
+                                    : item
+                            )
+                        )
+                    }
+                    onDelete={() =>
+                        setNotes((current) =>
+                            current.filter(
+                                (item) => item.id !== note.id
+                            )
+                        )
+                    }
+                />
+            ))}
+        </ul>
+    )
+}

package/src/components/context-menu/examples/context-menu-showcase.tsx

@@ -0,0 +1,56 @@
+import { toast, useContextMenu } from "@passui/react"
+
+const photos = [
+    { id: "aiko", src: "/avatars/aiko.svg" },
+    { id: "kenji", src: "/avatars/kenji.svg" },
+    { id: "mira", src: "/avatars/mira.svg" },
+]
+
+function Photo({ id, src }: { id: string; src: string }) {
+    const menu = useContextMenu(() => [
+        {
+            label: "Copy",
+            onSelect: () => toast("Photo copied"),
+        },
+        {
+            label: "Share",
+            onSelect: () => toast("Share sheet"),
+        },
+        {
+            label: "Add to favourites",
+            onSelect: () =>
+                toast.success("Added to favourites"),
+        },
+        "divider",
+        {
+            label: "Delete",
+            destructive: true,
+            onSelect: () => toast("Photo deleted"),
+        },
+    ])
+
+    return (
+        <img
+            {...menu}
+            src={src}
+            alt={`${id} portrait`}
+            className="aspect-square w-full select-none rounded-3xl object-cover"
+        />
+    )
+}
+
+export function ContextMenuShowcase() {
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-3">
+            <div className="grid grid-cols-3 gap-2">
+                {photos.map((photo) => (
+                    <Photo key={photo.id} {...photo} />
+                ))}
+            </div>
+            <p className="text-center text-footnote text-label-secondary">
+                Right-click a photo, or press and hold on a
+                touch screen.
+            </p>
+        </div>
+    )
+}

package/src/components/context-menu/examples/context-menu-toolbar.tsx

@@ -0,0 +1,63 @@
+import { useRef } from "react"
+import { IconButton } from "../../button/icon-button"
+import {
+    MoreIcon,
+    ShareIcon,
+    StarIcon,
+} from "../../../icons/icons"
+import { openMenu } from "../context-menu-store"
+import { toast } from "../../toast/toast-store"
+
+export function ContextMenuToolbar() {
+    const toolbar = useRef<HTMLDivElement>(null)
+    return (
+        <div
+            ref={toolbar}
+            className="flex items-center gap-1"
+        >
+            <IconButton
+                label="Favourite"
+                variant="ghost"
+                size="icon-xs"
+            >
+                <StarIcon size={18} />
+            </IconButton>
+            <IconButton
+                label="Share"
+                variant="ghost"
+                size="icon-xs"
+            >
+                <ShareIcon size={18} />
+            </IconButton>
+            <IconButton
+                label="More"
+                variant="ghost"
+                size="icon-xs"
+                onClick={(event) =>
+                    openMenu(
+                        event.currentTarget,
+                        [
+                            {
+                                label: "Duplicate",
+                                onSelect: () =>
+                                    toast("Duplicated"),
+                            },
+                            {
+                                label: "Move",
+                                onSelect: () =>
+                                    toast("Choose a folder"),
+                            },
+                        ],
+                        {
+                            edge: "trailing",
+                            toolbar:
+                                toolbar.current ?? undefined,
+                        }
+                    )
+                }
+            >
+                <MoreIcon size={18} />
+            </IconButton>
+        </div>
+    )
+}

package/src/components/context-menu/examples/context-menu-usage.tsx

@@ -0,0 +1,24 @@
+import { toast, useContextMenu } from "@passui/react"
+
+export function ContextMenuUsage() {
+    // render one <ContextMenuHost /> near the root of your app
+    const menu = useContextMenu(() => [
+        {
+            label: "Copy link",
+            onSelect: () => toast("Link copied"),
+        },
+        {
+            label: "Open in new tab",
+            onSelect: () => toast("Opened"),
+        },
+    ])
+
+    return (
+        <div
+            {...menu}
+            className="select-none rounded-3xl bg-fill/60 px-6 py-4 text-callout text-label"
+        >
+            Right-click this card
+        </div>
+    )
+}

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

@@ -0,0 +1,55 @@
+import type { OpenMenu } from "./context-menu-store"
+import type { MenuRect } from "./menu-reveal"
+
+type MenuAnchor = Pick<
+    OpenMenu,
+    "x" | "y" | "alignX" | "alignY"
+>
+type MenuSize = Pick<MenuRect, "width" | "height">
+type MenuBounds = {
+    left: number
+    top: number
+    right: number
+    bottom: number
+}
+
+/** Fit within the current visible viewport, including a keyboard or Safari pan. */
+export function menuPosition(
+    menu: MenuAnchor,
+    size: MenuSize,
+    bounds: MenuBounds
+) {
+    const { width, height } = size
+    const { left, top, right, bottom } = bounds
+    const fitsAfterX = menu.x + width <= right
+    const fitsBeforeX = menu.x - width >= left
+    const endX =
+        menu.alignX === "end"
+            ? fitsBeforeX || !fitsAfterX
+            : !fitsAfterX
+    const fitsBelow = menu.y + height <= bottom
+    const fitsAbove = menu.y - height >= top
+    const endY =
+        menu.alignY === "bottom"
+            ? fitsAbove || !fitsBelow
+            : !fitsBelow
+    const clamp = (value: number, min: number, max: number) =>
+        Math.min(Math.max(value, min), Math.max(min, max))
+    return {
+        left: clamp(
+            endX ? menu.x - width : menu.x,
+            left,
+            right - width
+        ),
+        top: clamp(
+            endY ? menu.y - height : menu.y,
+            top,
+            bottom - height
+        ),
+        originX: endX ? 1 : 0,
+        originY: endY ? 1 : 0,
+        maxHeight: Math.max(0, bottom - top),
+        width,
+        height: Math.min(height, Math.max(0, bottom - top)),
+    }
+}

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

@@ -0,0 +1,75 @@
+export type MenuRect = {
+    left: number
+    top: number
+    width: number
+    height: number
+}
+
+/** The closed surface occupies its trigger, even when the final menu flips at an edge. */
+export function menuReveal(
+    source: MenuRect | undefined,
+    target: MenuRect
+) {
+    if (
+        !source ||
+        source.width <= 0 ||
+        source.height <= 0 ||
+        target.width <= 0 ||
+        target.height <= 0
+    )
+        return {
+            x: 0,
+            y: 0,
+            scaleX: 0.96,
+            scaleY: 0.96,
+            opacity: 0,
+        }
+    return {
+        x:
+            source.left +
+            source.width / 2 -
+            target.left -
+            target.width / 2,
+        y:
+            source.top +
+            source.height / 2 -
+            target.top -
+            target.height / 2,
+        scaleX: source.width / target.width,
+        scaleY: source.height / target.height,
+        opacity: 1,
+    }
+}
+
+/** Stretch across the action group before opening vertically; reverse on dismissal. */
+export function toolbarMenuReveal(
+    source: MenuRect,
+    toolbar: MenuRect,
+    target: MenuRect
+) {
+    const start = menuReveal(source, target)
+    const stretched = menuReveal(
+        {
+            ...toolbar,
+            top: source.top,
+            height: source.height,
+        },
+        target
+    )
+    return {
+        enter: {
+            x: [start.x, stretched.x, 0],
+            y: [start.y, stretched.y, 0],
+            scaleX: [start.scaleX, stretched.scaleX, 1],
+            scaleY: [start.scaleY, stretched.scaleY, 1],
+            opacity: 1,
+        },
+        exit: {
+            x: [0, stretched.x, start.x],
+            y: [0, stretched.y, start.y],
+            scaleX: [1, stretched.scaleX, start.scaleX],
+            scaleY: [1, stretched.scaleY, start.scaleY],
+            opacity: 1,
+        },
+    }
+}

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

@@ -0,0 +1,90 @@
+import {
+    type MouseEvent,
+    type PointerEvent,
+    useRef,
+} from "react"
+import { haptic } from "../../lib/haptics"
+import {
+    type ContextMenuItem,
+    openContextMenu,
+} from "./context-menu-store"
+
+const LONG_PRESS_MS = 480
+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[]
+) {
+    const press = useRef<{
+        x: number
+        y: number
+        timer: ReturnType<typeof setTimeout>
+    } | null>(null)
+    const suppressClick = useRef(false)
+
+    const cancel = () => {
+        if (press.current) clearTimeout(press.current.timer)
+        press.current = null
+    }
+
+    return {
+        onContextMenu(event: MouseEvent) {
+            event.preventDefault()
+            cancel()
+            openContextMenu(
+                event.clientX,
+                event.clientY,
+                items(),
+                false,
+                event.currentTarget
+            )
+        },
+        onPointerDown(event: PointerEvent) {
+            if (event.pointerType !== "touch") return
+            const { clientX: x, clientY: y } = event
+            const anchor = event.currentTarget
+            cancel()
+            press.current = {
+                x,
+                y,
+                timer: setTimeout(() => {
+                    press.current = null
+                    suppressClick.current = true
+                    haptic("medium")
+                    openContextMenu(
+                        x,
+                        y,
+                        items(),
+                        true,
+                        anchor
+                    )
+                }, LONG_PRESS_MS),
+            }
+        },
+        onPointerMove(event: PointerEvent) {
+            const start = press.current
+            if (
+                start &&
+                Math.hypot(
+                    event.clientX - start.x,
+                    event.clientY - start.y
+                ) > MOVE_TOLERANCE
+            ) {
+                cancel()
+            }
+        },
+        onPointerUp: cancel,
+        onPointerCancel: cancel,
+        // The tap that ends a long-press shouldn't also open the row.
+        onClickCapture(event: MouseEvent) {
+            if (!suppressClick.current) return
+            suppressClick.current = false
+            event.preventDefault()
+            event.stopPropagation()
+        },
+    }
+}

package/src/components/conversation/conversation.docs.tsx

@@ -0,0 +1,88 @@
+import { ConversationDays } from "./examples/conversation-days"
+import { CustomerSupportIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { defineDocs } from "../../docs/types"
+import { Conversation } from "./conversation"
+import { ConversationComposer } from "./examples/conversation-composer"
+import { ConversationShowcase } from "./examples/conversation-showcase"
+import { ConversationUsage } from "./examples/conversation-usage"
+
+// Conversation is two parts; the playground shows Messages, with the
+// other side's name and avatar switched on and off.
+type DemoProps = {
+    author: string
+    avatar: boolean
+}
+
+const minutesAgo = (minutes: number) =>
+    new Date(Date.now() - minutes * 60_000).toISOString()
+
+export const conversationDocs = defineDocs<DemoProps>()({
+    slug: "conversation",
+    name: "Conversation",
+    importPath: "@passui/react/conversation",
+    controls: {
+        author: { kind: "text", default: "Support" },
+        avatar: { kind: "boolean", default: true },
+    },
+    render: ({ author, avatar }) => {
+        const them = {
+            mine: false,
+            author: author || undefined,
+            avatar: avatar ? (
+                <span className="flex size-7 items-center justify-center rounded-full bg-accent-soft text-accent-text">
+                    <HugeiconsIcon
+                        icon={CustomerSupportIcon}
+                        size={16}
+                    />
+                </span>
+            ) : undefined,
+        }
+        return (
+            <div className="w-full max-w-sm">
+                <Conversation.Messages
+                    messages={[
+                        {
+                            id: "1",
+                            mine: true,
+                            body: "I can't sign in on my new phone.",
+                            createdAt: minutesAgo(9),
+                        },
+                        {
+                            id: "2",
+                            ...them,
+                            body: "Sorry about that! Did you set up a passkey on your old one?",
+                            createdAt: minutesAgo(7),
+                        },
+                        {
+                            id: "3",
+                            ...them,
+                            body: "If so, you can use it from your new phone by scanning the code.",
+                            createdAt: minutesAgo(7),
+                        },
+                    ]}
+                />
+            </div>
+        )
+    },
+    childrenSnippet: ({ author, avatar }) => ({
+        imports: avatar
+            ? [
+                  'import { CustomerSupportIcon } from "@hugeicons/core-free-icons"',
+                  'import { HugeiconsIcon } from "@hugeicons/react"',
+              ]
+            : [],
+        element: "Conversation.Messages",
+        omit: ["author", "avatar"],
+        expressionProps: {
+            messages: `[\n        { id: "1", mine: true, body: "Hi!", createdAt: "2026-10-14T09:00:00Z" },\n        { id: "2", mine: false, body: "Hello, how can we help?"${author ? `, author: ${JSON.stringify(author)}` : ""}${avatar ? ", avatar: <HugeiconsIcon icon={CustomerSupportIcon} size={16} />" : ""}, createdAt: "2026-10-14T09:01:00Z" },\n    ]`,
+        },
+        children: "",
+    }),
+    usage: ConversationUsage,
+    showcase: ConversationShowcase,
+    examples: [
+        { id: "composer", component: ConversationComposer },
+        { id: "days", component: ConversationDays },
+    ],
+})