@passui/react 0.1.17 → 0.1.19

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>
-    )
-}

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

@@ -1,88 +0,0 @@
-import type { ComponentProps } from "react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { DatePicker } from "./date-picker"
-import { DatePickerLocales } from "./examples/date-picker-locales"
-import { DatePickerPastOnly } from "./examples/date-picker-past-only"
-import { DatePickerShowcase } from "./examples/date-picker-showcase"
-import { DatePickerUsage } from "./examples/date-picker-usage"
-
-type DatePickerProps = ComponentProps<typeof DatePicker>
-
-// A handful of locales whose field order differs, so the playground
-// shows the order following the locale.
-type DemoProps = Pick<DatePickerProps, "label"> & {
-    locale: "en-US" | "en-GB" | "fr-FR" | "zh-CN" | "ja-JP"
-}
-
-const labels = {
-    day: "Day",
-    month: "Month",
-    year: "Year",
-    invalid: "Enter a real date.",
-}
-
-function DatePickerDemo({ locale, label }: DemoProps) {
-    const [birthday, setBirthday] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <DatePicker
-                key={locale}
-                label={label}
-                labels={labels}
-                locale={locale}
-                value={birthday}
-                onChange={setBirthday}
-            />
-        </div>
-    )
-}
-
-export const datePickerDocs = defineDocs<DemoProps>()({
-    slug: "date-picker",
-    name: "DatePicker",
-    importPath: "@passui/react/date-picker",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Birthday",
-            required: true,
-        },
-        locale: {
-            kind: "select",
-            options: {
-                "en-US": true,
-                "en-GB": true,
-                "fr-FR": true,
-                "zh-CN": true,
-                "ja-JP": true,
-            },
-            default: "en-US",
-        },
-    },
-    render: (values) => <DatePickerDemo {...values} />,
-    childrenSnippet: ({ locale }) => ({
-        imports: ['import { useState } from "react"'],
-        setup: [
-            'const [birthday, setBirthday] = useState("")',
-        ],
-        children: "",
-        omit: ["locale"],
-        extraProps: { locale },
-        expressionProps: {
-            labels: '{ day: "Day", month: "Month", year: "Year", invalid: "Enter a real date." }',
-            value: "birthday",
-            onChange: "setBirthday",
-        },
-    }),
-    usage: DatePickerUsage,
-    showcase: DatePickerShowcase,
-    examples: [
-        {
-            id: "locales",
-            component: DatePickerLocales,
-            playground: { locale: "zh-CN" },
-        },
-        { id: "past-only", component: DatePickerPastOnly },
-    ],
-})

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

@@ -1,41 +0,0 @@
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-const labels = {
-    day: "Day",
-    month: "Month",
-    year: "Year",
-    invalid: "Enter a real date.",
-}
-
-export function DatePickerLocales() {
-    const [us, setUs] = useState("1994-07-21")
-    const [uk, setUk] = useState("1994-07-21")
-    const [cn, setCn] = useState("1994-07-21")
-
-    return (
-        <div className="flex w-full max-w-xs flex-col gap-8">
-            <DatePicker
-                label="United States"
-                labels={labels}
-                locale="en-US"
-                value={us}
-                onChange={setUs}
-            />
-            <DatePicker
-                label="United Kingdom"
-                labels={labels}
-                locale="en-GB"
-                value={uk}
-                onChange={setUk}
-            />
-            <DatePicker
-                label="China"
-                labels={labels}
-                locale="zh-CN"
-                value={cn}
-                onChange={setCn}
-            />
-        </div>
-    )
-}

package/src/components/date-picker/examples/date-picker-past-only.tsx

@@ -1,29 +0,0 @@
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-export function DatePickerPastOnly() {
-    const [birthday, setBirthday] = useState("2090-01-01")
-    const today = new Date().toISOString().slice(0, 10)
-
-    return (
-        <div className="flex w-full max-w-xs flex-col gap-3">
-            <DatePicker
-                label="Birthday"
-                labels={{
-                    day: "Day",
-                    month: "Month",
-                    year: "Year",
-                    invalid:
-                        "Your birthday can't be in the future.",
-                }}
-                locale="en-US"
-                max={today}
-                value={birthday}
-                onChange={setBirthday}
-            />
-            <p className="text-footnote text-label-secondary">
-                Saved value: {birthday || "none yet"}
-            </p>
-        </div>
-    )
-}

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

@@ -1,49 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-export function DatePickerShowcase() {
-    const [birthday, setBirthday] = useState("")
-    const today = new Date().toISOString().slice(0, 10)
-
-    return (
-        <form
-            className="flex w-full max-w-sm flex-col gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
-            onSubmit={(event) => {
-                event.preventDefault()
-                toast.success("Birthday saved")
-            }}
-        >
-            <div className="flex flex-col gap-1">
-                <h2 className="text-headline font-semibold text-label">
-                    When's your birthday?
-                </h2>
-                <p className="text-footnote text-label-secondary">
-                    We use it to keep your account suited to
-                    your age. It isn't shown to anyone.
-                </p>
-            </div>
-            <DatePicker
-                label="Birthday"
-                labels={{
-                    day: "Day",
-                    month: "Month",
-                    year: "Year",
-                    invalid: "Enter a real date in the past.",
-                }}
-                locale="en-US"
-                max={today}
-                value={birthday}
-                onChange={setBirthday}
-            />
-            <Button
-                type="submit"
-                variant="accent"
-                disabled={!birthday}
-            >
-                Continue
-            </Button>
-        </form>
-    )
-}

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

@@ -1,22 +0,0 @@
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-export function DatePickerUsage() {
-    const [birthday, setBirthday] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <DatePicker
-                label="Birthday"
-                labels={{
-                    day: "Day",
-                    month: "Month",
-                    year: "Year",
-                    invalid: "Enter a real date.",
-                }}
-                locale="en-US"
-                value={birthday}
-                onChange={setBirthday}
-            />
-        </div>
-    )
-}

package/src/components/dialog/dialog.docs.tsx

@@ -1,114 +0,0 @@
-import { useState } from "react"
-import { Button } from "../button/button"
-import { jsxAttribute } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { Dialog, type DialogPresentation } from "./dialog"
-import { DialogConfirm } from "./examples/dialog-confirm"
-import { DialogForm } from "./examples/dialog-form"
-import { DialogInline } from "./examples/dialog-inline"
-import { DialogShowcase } from "./examples/dialog-showcase"
-import { DialogUsage } from "./examples/dialog-usage"
-
-// `destructive` is the tone of Dialog.Actions in the footer; the snippet
-// writes that footer itself.
-type DemoProps = {
-    title: string
-    description: string
-    presentation?: DialogPresentation
-    destructive: boolean
-}
-
-function DialogDemo({
-    title,
-    description,
-    presentation,
-    destructive,
-}: DemoProps) {
-    const [open, setOpen] = useState(false)
-    return (
-        <div className="flex w-full max-w-sm flex-col items-center gap-4">
-            <Button
-                variant="secondary"
-                onClick={() => setOpen(true)}
-            >
-                Open dialog
-            </Button>
-            <Dialog
-                open={open}
-                onOpenChange={setOpen}
-                title={title}
-                description={description || undefined}
-                presentation={presentation}
-                footer={
-                    <Dialog.Actions
-                        submitLabel={
-                            destructive ? "Delete" : "Save"
-                        }
-                        cancelLabel="Cancel"
-                        tone={
-                            destructive
-                                ? "destructive"
-                                : "default"
-                        }
-                        onConfirm={() => setOpen(false)}
-                    />
-                }
-            />
-        </div>
-    )
-}
-
-export const dialogDocs = defineDocs<DemoProps>()({
-    slug: "dialog",
-    name: "Dialog",
-    importPath: "@passui/react/dialog",
-    controls: {
-        title: {
-            kind: "text",
-            default: "Rename project",
-            required: true,
-        },
-        description: {
-            kind: "text",
-            default: "The new name shows everywhere at once.",
-        },
-        presentation: {
-            kind: "select",
-            options: {
-                drawer: true,
-                center: true,
-                inline: true,
-            },
-            default: "drawer",
-        },
-        destructive: { kind: "boolean", default: false },
-    },
-    render: (values) => <DialogDemo {...values} />,
-    childrenSnippet: ({ destructive }) => ({
-        imports: ['import { useState } from "react"'],
-        setup: ["const [open, setOpen] = useState(false)"],
-        omit: ["destructive"],
-        expressionProps: {
-            open: "open",
-            onOpenChange: "setOpen",
-            footer: `<Dialog.Actions ${jsxAttribute("submitLabel", destructive ? "Delete" : "Save")} cancelLabel="Cancel"${destructive ? ' tone="destructive"' : ""} onConfirm={() => setOpen(false)} />`,
-        },
-        children: "",
-    }),
-    usage: DialogUsage,
-    showcase: DialogShowcase,
-    examples: [
-        { id: "form", component: DialogForm },
-        {
-            id: "confirm",
-            component: DialogConfirm,
-            playground: { destructive: true },
-        },
-        {
-            id: "inline",
-            component: DialogInline,
-            playground: { presentation: "inline" },
-        },
-    ],
-    previewHeight: 460,
-})

package/src/components/dialog/examples/dialog-confirm.tsx

@@ -1,24 +0,0 @@
-import { confirmDialog, toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-
-export function DialogConfirm() {
-    return (
-        <Button
-            variant="destructive"
-            onClick={async () => {
-                // resolves true when confirmed; needs one <DialogHost />
-                const confirmed = await confirmDialog({
-                    title: "Delete this app?",
-                    message:
-                        "People signed in with it will be signed out.",
-                    confirmLabel: "Delete",
-                    cancelLabel: "Cancel",
-                    destructive: true,
-                })
-                if (confirmed) toast.success("App deleted")
-            }}
-        >
-            Delete app
-        </Button>
-    )
-}