@passui/react 0.1.17 → 0.1.20

package/src/components/content-view/examples/content-view-usage.tsx

@@ -1,14 +0,0 @@
-import { ContentView } from "@passui/react/content-view"
-
-export function ContentViewUsage() {
-    return (
-        <ContentView className="w-72 p-5">
-            <ContentView.Header
-                heading="Passkeys"
-                p="Sign in with your face or fingerprint."
-                className="flex flex-col gap-1"
-                pClassName="text-footnote text-label-secondary"
-            />
-        </ContentView>
-    )
-}

package/src/components/context-menu/context-menu.docs.tsx

@@ -1,92 +0,0 @@
-import { ContextMenuToolbar } from "./examples/context-menu-toolbar"
-import { ContextMenuChecked } from "./examples/context-menu-checked"
-import { toast } from "../toast/toast-store"
-import { defineDocs } from "../../docs/types"
-import type { ContextMenuItem } from "./context-menu-store"
-import { ContextMenuList } from "./examples/context-menu-list"
-import { ContextMenuShowcase } from "./examples/context-menu-showcase"
-import { ContextMenuUsage } from "./examples/context-menu-usage"
-import { useContextMenu } from "./use-context-menu"
-
-// useContextMenu is a hook: the playground spreads its handlers on a
-// card, and the switches change the menu's rows.
-type DemoProps = {
-    heading: boolean
-    destructive: boolean
-}
-
-function items({
-    heading,
-    destructive,
-}: DemoProps): ContextMenuItem[] {
-    return [
-        ...(heading ? [{ heading: "Photo" }] : []),
-        { label: "Copy", onSelect: () => toast("Copied") },
-        { label: "Share", onSelect: () => toast("Shared") },
-        ...(destructive
-            ? [
-                  "divider" as const,
-                  {
-                      label: "Delete",
-                      destructive: true,
-                      onSelect: () => toast("Deleted"),
-                  },
-              ]
-            : []),
-    ]
-}
-
-function ContextMenuDemo(props: DemoProps) {
-    const menu = useContextMenu(() => items(props))
-    return (
-        <div
-            {...menu}
-            className="flex h-36 w-64 select-none items-center justify-center rounded-4xl bg-fill/60 p-6 text-center text-callout text-label-secondary"
-        >
-            Right-click, or press and hold on a touch screen
-        </div>
-    )
-}
-
-export const contextMenuDocs = defineDocs<DemoProps>()({
-    slug: "context-menu",
-    name: "useContextMenu",
-    importPath: "@passui/react",
-    controls: {
-        heading: { kind: "boolean", default: false },
-        destructive: { kind: "boolean", default: true },
-    },
-    render: (values) => <ContextMenuDemo {...values} />,
-    childrenSnippet: ({ heading, destructive }) => ({
-        imports: ['import { toast } from "@passui/react"'],
-        element: "div",
-        omit: ["heading", "destructive"],
-        setup: [
-            "const menu = useContextMenu(() => [",
-            ...(heading ? ['    { heading: "Photo" },'] : []),
-            '    { label: "Copy", onSelect: () => toast("Copied") },',
-            '    { label: "Share", onSelect: () => toast("Shared") },',
-            ...(destructive
-                ? [
-                      '    "divider",',
-                      '    { label: "Delete", destructive: true, onSelect: () => toast("Deleted") },',
-                  ]
-                : []),
-            "])",
-        ],
-        spreadProps: ["menu"],
-        children: "\n    Right-click me\n",
-    }),
-    usage: ContextMenuUsage,
-    showcase: ContextMenuShowcase,
-    examples: [
-        { id: "toolbar", component: ContextMenuToolbar },
-        {
-            id: "list",
-            component: ContextMenuList,
-            playground: { heading: true },
-        },
-        { id: "checked", component: ContextMenuChecked },
-    ],
-    previewHeight: 360,
-})

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

@@ -1,37 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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/conversation/conversation.docs.tsx

@@ -1,88 +0,0 @@
-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 },
-    ],
-})

package/src/components/conversation/examples/conversation-composer.tsx

@@ -1,36 +0,0 @@
-import { Conversation } from "@passui/react/conversation"
-import { useState } from "react"
-
-export function ConversationComposer() {
-    const [sent, setSent] = useState<string[]>([])
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-3">
-            <ul className="m-0 flex list-none flex-col gap-1 p-0 text-footnote text-label-secondary">
-                {sent.length === 0 ? (
-                    <li>
-                        Type a reply, then press Send or
-                        Ctrl/Cmd+Enter.
-                    </li>
-                ) : (
-                    sent.map((body, index) => (
-                        <li key={index}>Sent: {body}</li>
-                    ))
-                )}
-            </ul>
-            <Conversation.Composer
-                placeholder="Write a reply"
-                maxLength={280}
-                sendLabel="Send"
-                remaining={(count) => `${count} left`}
-                onSend={async (body) => {
-                    // the field clears only once this resolves
-                    await new Promise((resolve) =>
-                        setTimeout(resolve, 400)
-                    )
-                    setSent((current) => [...current, body])
-                }}
-            />
-        </div>
-    )
-}

package/src/components/conversation/examples/conversation-days.tsx

@@ -1,48 +0,0 @@
-import { Conversation } from "@passui/react/conversation"
-
-const hoursAgo = (hours: number) =>
-    new Date(Date.now() - hours * 3_600_000).toISOString()
-
-export function ConversationDays() {
-    return (
-        <div className="w-full max-w-sm rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Conversation.Messages
-                messages={[
-                    {
-                        id: "1",
-                        mine: false,
-                        author: "Mira",
-                        body: "Did the release go out?",
-                        createdAt: hoursAgo(26),
-                    },
-                    {
-                        id: "2",
-                        mine: true,
-                        body: "Not yet, tomorrow morning.",
-                        createdAt: hoursAgo(25.9),
-                    },
-                    {
-                        id: "3",
-                        mine: true,
-                        body: "It's live!",
-                        createdAt: hoursAgo(1),
-                    },
-                    {
-                        id: "4",
-                        mine: false,
-                        author: "Mira",
-                        body: "Amazing, well done.",
-                        createdAt: hoursAgo(0.9),
-                    },
-                    {
-                        id: "5",
-                        mine: false,
-                        author: "Mira",
-                        body: "Celebrating at lunch?",
-                        createdAt: hoursAgo(0.88),
-                    },
-                ]}
-            />
-        </div>
-    )
-}

package/src/components/conversation/examples/conversation-showcase.tsx

@@ -1,71 +0,0 @@
-import { CustomerSupportIcon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import {
-    Conversation,
-    type ConversationMessage,
-} from "@passui/react/conversation"
-import { useState } from "react"
-
-const minutesAgo = (minutes: number) =>
-    new Date(Date.now() - minutes * 60_000).toISOString()
-
-const support = {
-    mine: false,
-    author: "Pass support",
-    avatar: (
-        <span className="flex size-7 items-center justify-center rounded-full bg-accent-soft text-accent-text">
-            <HugeiconsIcon
-                icon={CustomerSupportIcon}
-                size={16}
-            />
-        </span>
-    ),
-}
-
-export function ConversationShowcase() {
-    const [messages, setMessages] = useState<
-        ConversationMessage[]
-    >(() => [
-        {
-            id: "1",
-            mine: true,
-            body: "Hi, I lost my phone and can't get my sign-in codes.",
-            createdAt: minutesAgo(26),
-        },
-        {
-            id: "2",
-            ...support,
-            body: "We can help. Do you still have your recovery key?",
-            createdAt: minutesAgo(24),
-        },
-        {
-            id: "3",
-            ...support,
-            body: "It's the 24-letter key you saved when you turned on two-step verification.",
-            createdAt: minutesAgo(24),
-        },
-    ])
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Conversation.Messages messages={messages} />
-            <Conversation.Composer
-                placeholder="Write a reply"
-                maxLength={500}
-                sendLabel="Send"
-                onSend={async (body) => {
-                    setMessages((current) => [
-                        ...current,
-                        {
-                            id: String(current.length + 1),
-                            mine: true,
-                            body,
-                            createdAt:
-                                new Date().toISOString(),
-                        },
-                    ])
-                }}
-            />
-        </div>
-    )
-}

package/src/components/conversation/examples/conversation-usage.tsx

@@ -1,28 +0,0 @@
-import { Conversation } from "@passui/react/conversation"
-
-const minutesAgo = (minutes: number) =>
-    new Date(Date.now() - minutes * 60_000).toISOString()
-
-export function ConversationUsage() {
-    return (
-        <div className="w-full max-w-sm">
-            <Conversation.Messages
-                messages={[
-                    {
-                        id: "1",
-                        mine: false,
-                        author: "Kenji",
-                        body: "Are we still on for lunch?",
-                        createdAt: minutesAgo(4),
-                    },
-                    {
-                        id: "2",
-                        mine: true,
-                        body: "Yes! 12:30 at the usual place.",
-                        createdAt: minutesAgo(2),
-                    },
-                ]}
-            />
-        </div>
-    )
-}