@passui/react 0.1.17 → 0.1.19

package/src/components/compact-time-picker/examples/compact-time-picker-showcase.tsx

@@ -1,31 +0,0 @@
-import { CompactTimePicker } from "@passui/react/compact-time-picker"
-import { useState } from "react"
-
-const labels = {
-    hour: "Hour",
-    minute: "Minute",
-    period: "AM or PM",
-}
-
-export function CompactTimePickerShowcase() {
-    const [starts, setStarts] = useState("09:00")
-    const [ends, setEnds] = useState("10:30")
-    return (
-        <div className="grid w-full max-w-sm grid-cols-2 gap-3">
-            <CompactTimePicker
-                label="Starts"
-                labels={labels}
-                locale="en-US"
-                value={starts}
-                onChange={setStarts}
-            />
-            <CompactTimePicker
-                label="Ends"
-                labels={labels}
-                locale="en-GB"
-                value={ends}
-                onChange={setEnds}
-            />
-        </div>
-    )
-}

package/src/components/compact-time-picker/examples/compact-time-picker-usage.tsx

@@ -1,21 +0,0 @@
-import { CompactTimePicker } from "@passui/react/compact-time-picker"
-import { useState } from "react"
-
-export function CompactTimePickerUsage() {
-    const [time, setTime] = useState("18:30")
-    return (
-        <div className="w-full max-w-xs">
-            <CompactTimePicker
-                label="Time"
-                labels={{
-                    hour: "Hour",
-                    minute: "Minute",
-                    period: "AM or PM",
-                }}
-                locale="en-US"
-                value={time}
-                onChange={setTime}
-            />
-        </div>
-    )
-}

package/src/components/content-view/content-view.docs.tsx

@@ -1,61 +0,0 @@
-import { ContentViewHeaderAction } from "./examples/content-view-header-action"
-import { jsxAttribute } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import {
-    ContentView,
-    type ContentViewVariant,
-} from "./content-view"
-import { ContentViewShowcase } from "./examples/content-view-showcase"
-import { ContentViewStats } from "./examples/content-view-stats"
-import { ContentViewUsage } from "./examples/content-view-usage"
-
-// heading and description belong to ContentView.Header, inside the card;
-// the snippet writes that header itself.
-type DemoProps = {
-    variant?: ContentViewVariant
-    heading: string
-    description: string
-}
-
-export const contentViewDocs = defineDocs<DemoProps>()({
-    slug: "content-view",
-    name: "ContentView",
-    importPath: "@passui/react/content-view",
-    controls: {
-        variant: {
-            kind: "select",
-            options: { elevated: true },
-            default: "elevated",
-        },
-        heading: { kind: "text", default: "Recovery" },
-        description: {
-            kind: "text",
-            default: "Ways back in if you lose your phone.",
-        },
-    },
-    render: ({ variant, heading, description }) => (
-        <ContentView variant={variant} className="w-72 p-5">
-            <ContentView.Header
-                heading={heading}
-                p={description || undefined}
-                className="flex flex-col gap-1"
-                pClassName="text-footnote text-label-secondary"
-            />
-        </ContentView>
-    ),
-    childrenSnippet: ({ heading, description }) => ({
-        imports: [],
-        omit: ["heading", "description"],
-        extraProps: { className: "p-5" },
-        children: `\n    <ContentView.Header ${jsxAttribute("heading", heading)}${description ? ` ${jsxAttribute("p", description)}` : ""} />\n`,
-    }),
-    usage: ContentViewUsage,
-    showcase: ContentViewShowcase,
-    examples: [
-        { id: "stats", component: ContentViewStats },
-        {
-            id: "header-action",
-            component: ContentViewHeaderAction,
-        },
-    ],
-})

package/src/components/content-view/examples/content-view-header-action.tsx

@@ -1,33 +0,0 @@
-import { Key01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "@passui/react/button"
-import { ContentView } from "@passui/react/content-view"
-
-export function ContentViewHeaderAction() {
-    return (
-        <ContentView className="w-full max-w-sm cursor-default p-5">
-            <ContentView.Header
-                heading="Passkeys"
-                p="2 passkeys on your devices. Sign in with your face or fingerprint."
-                icon={
-                    <HugeiconsIcon
-                        icon={Key01Icon}
-                        size={20}
-                        className="text-accent-text"
-                    />
-                }
-                action={
-                    <Button
-                        variant="secondary"
-                        size="xs"
-                        className="ms-auto"
-                    >
-                        Add
-                    </Button>
-                }
-                className="flex flex-col gap-2"
-                pClassName="text-footnote text-label-secondary"
-            />
-        </ContentView>
-    )
-}

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

@@ -1,65 +0,0 @@
-import {
-    Key01Icon,
-    LockPasswordIcon,
-    SmartPhone01Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { ContentView } from "@passui/react/content-view"
-
-const cards = [
-    {
-        id: "password",
-        heading: "Password",
-        description: "Changed 3 months ago",
-        icon: LockPasswordIcon,
-    },
-    {
-        id: "passkeys",
-        heading: "Passkeys",
-        description: "2 saved on your devices",
-        icon: Key01Icon,
-    },
-    {
-        id: "devices",
-        heading: "Devices",
-        description: "Signed in on 3 devices",
-        icon: SmartPhone01Icon,
-    },
-]
-
-export function ContentViewShowcase() {
-    return (
-        <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-3">
-            {cards.map((card) => (
-                <ContentView
-                    key={card.id}
-                    className="relative p-5"
-                >
-                    <ContentView.Header
-                        heading={card.heading}
-                        p={card.description}
-                        icon={
-                            <HugeiconsIcon
-                                icon={card.icon}
-                                size={20}
-                                className="text-accent-text"
-                            />
-                        }
-                        className="flex flex-col gap-2"
-                        pClassName="text-footnote text-label-secondary"
-                    >
-                        {/* the whole card is the link */}
-                        <a
-                            href={`#${card.id}`}
-                            className="absolute inset-0 rounded-2xl"
-                        >
-                            <span className="sr-only">
-                                Open {card.heading}
-                            </span>
-                        </a>
-                    </ContentView.Header>
-                </ContentView>
-            ))}
-        </div>
-    )
-}

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

@@ -1,35 +0,0 @@
-import { ContentView } from "@passui/react/content-view"
-
-export function ContentViewStats() {
-    return (
-        <ContentView className="w-full max-w-sm p-5">
-            <ContentView.Section>
-                <ContentView.P className="text-footnote text-label-secondary">
-                    This month
-                </ContentView.P>
-                <ContentView.Row className="justify-between gap-4">
-                    <div className="flex flex-col">
-                        <ContentView.H1 className="text-title font-bold tabular-nums">
-                            1,284
-                        </ContentView.H1>
-                        <ContentView.Span>
-                            sign ins
-                        </ContentView.Span>
-                    </div>
-                    <ContentView.Divider />
-                    <div className="flex flex-col">
-                        <ContentView.H2 className="text-title font-bold tabular-nums">
-                            12
-                            <ContentView.Sub>
-                                %
-                            </ContentView.Sub>
-                        </ContentView.H2>
-                        <ContentView.Span>
-                            with passkeys
-                        </ContentView.Span>
-                    </div>
-                </ContentView.Row>
-            </ContentView.Section>
-        </ContentView>
-    )
-}

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