@passui/react 0.1.17 → 0.1.20

package/src/components/table/examples/table-selection.tsx

@@ -1,150 +0,0 @@
-import {
-    LaptopIcon,
-    SmartPhone01Icon,
-    Tablet01Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "@passui/react/button"
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@passui/react/table"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-const devices = [
-    {
-        id: "mac",
-        name: "MacBook Air",
-        icon: LaptopIcon,
-        seen: "Now",
-    },
-    {
-        id: "phone",
-        name: "iPhone 16",
-        icon: SmartPhone01Icon,
-        seen: "2 hours ago",
-    },
-    {
-        id: "tablet",
-        name: "iPad mini",
-        icon: Tablet01Icon,
-        seen: "3 weeks ago",
-    },
-]
-
-export function TableSelection() {
-    const [selected, setSelected] = useState<string[]>([
-        "tablet",
-    ])
-    const all = selected.length === devices.length
-
-    function toggle(id: string, checked: boolean) {
-        setSelected((current) =>
-            checked
-                ? [...current, id]
-                : current.filter((item) => item !== id)
-        )
-    }
-
-    return (
-        <div className="flex w-full max-w-lg flex-col gap-3 rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead className="w-10">
-                            <Toggle
-                                style="checkbox"
-                                label="Select all devices"
-                                labelHidden
-                                checked={all}
-                                mixed={
-                                    selected.length > 0 &&
-                                    !all
-                                }
-                                onChange={(checked) =>
-                                    setSelected(
-                                        checked
-                                            ? devices.map(
-                                                  (device) =>
-                                                      device.id
-                                              )
-                                            : []
-                                    )
-                                }
-                            />
-                        </TableHead>
-                        <TableHead>Device</TableHead>
-                        <TableHead>Last seen</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {devices.map((device) => {
-                        const isSelected = selected.includes(
-                            device.id
-                        )
-                        return (
-                            <TableRow
-                                key={device.id}
-                                data-state={
-                                    isSelected
-                                        ? "selected"
-                                        : undefined
-                                }
-                            >
-                                <TableCell>
-                                    <Toggle
-                                        style="checkbox"
-                                        label={`Select ${device.name}`}
-                                        labelHidden
-                                        checked={isSelected}
-                                        onChange={(checked) =>
-                                            toggle(
-                                                device.id,
-                                                checked
-                                            )
-                                        }
-                                    />
-                                </TableCell>
-                                <TableCell>
-                                    <div className="flex items-center gap-3">
-                                        <span className="flex size-8 items-center justify-center rounded-full bg-fill text-label-secondary">
-                                            <HugeiconsIcon
-                                                icon={
-                                                    device.icon
-                                                }
-                                                size={18}
-                                            />
-                                        </span>
-                                        <span className="text-subheadline font-medium text-label">
-                                            {device.name}
-                                        </span>
-                                    </div>
-                                </TableCell>
-                                <TableCell className="text-label-secondary">
-                                    {device.seen}
-                                </TableCell>
-                            </TableRow>
-                        )
-                    })}
-                </TableBody>
-            </Table>
-            <div className="flex items-center justify-between px-2">
-                <span className="text-footnote text-label-secondary">
-                    {selected.length} selected
-                </span>
-                <Button
-                    variant="destructive"
-                    size="sm"
-                    disabled={selected.length === 0}
-                >
-                    Sign out
-                </Button>
-            </div>
-        </div>
-    )
-}

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

@@ -1,115 +0,0 @@
-import { StatusIndicator } from "@passui/react"
-import { Button } from "@passui/react/button"
-import {
-    ProfileImage,
-    ProfileImageContent,
-    ProfileImageFallback,
-} from "@passui/react/profile-image"
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@passui/react/table"
-
-const members = [
-    {
-        name: "Aiko Kamado",
-        email: "aiko@example.com",
-        initials: "AK",
-        src: "/avatars/aiko.svg",
-        role: "Owner",
-        online: true,
-    },
-    {
-        name: "Kenji Mori",
-        email: "kenji@example.com",
-        initials: "KM",
-        src: "/avatars/kenji.svg",
-        role: "Admin",
-        online: false,
-    },
-    {
-        name: "Mira Patel",
-        email: "mira@example.com",
-        initials: "MP",
-        src: "/avatars/mira.svg",
-        role: "Member",
-        online: true,
-    },
-]
-
-export function TableShowcase() {
-    return (
-        <div className="w-full max-w-xl rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Table>
-                <TableCaption>3 members</TableCaption>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Member</TableHead>
-                        <TableHead>Role</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead>
-                            <span className="sr-only">
-                                Actions
-                            </span>
-                        </TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {members.map((member) => (
-                        <TableRow key={member.email}>
-                            <TableCell>
-                                <div className="flex items-center gap-3">
-                                    <ProfileImage className="size-8">
-                                        <ProfileImageContent
-                                            src={member.src}
-                                        />
-                                        <ProfileImageFallback>
-                                            {member.initials}
-                                        </ProfileImageFallback>
-                                    </ProfileImage>
-                                    <div className="flex flex-col">
-                                        <span className="text-subheadline font-medium text-label">
-                                            {member.name}
-                                        </span>
-                                        <span className="text-caption text-label-secondary">
-                                            {member.email}
-                                        </span>
-                                    </div>
-                                </div>
-                            </TableCell>
-                            <TableCell>
-                                {member.role}
-                            </TableCell>
-                            <TableCell>
-                                <StatusIndicator
-                                    state={
-                                        member.online
-                                            ? "saved"
-                                            : "offline"
-                                    }
-                                >
-                                    {member.online
-                                        ? "Online"
-                                        : "Away"}
-                                </StatusIndicator>
-                            </TableCell>
-                            <TableCell className="text-right">
-                                <Button
-                                    variant="ghost"
-                                    size="sm"
-                                >
-                                    Manage
-                                </Button>
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </div>
-    )
-}

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

@@ -1,67 +0,0 @@
-import {
-    ProfileImage,
-    ProfileImageContent,
-    ProfileImageFallback,
-} from "@passui/react/profile-image"
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@passui/react/table"
-
-const members = [
-    {
-        name: "Aiko Kamado",
-        initials: "AK",
-        src: "/avatars/aiko.svg",
-        role: "Owner",
-    },
-    {
-        name: "Kenji Mori",
-        initials: "KM",
-        src: "/avatars/kenji.svg",
-        role: "Admin",
-    },
-]
-
-export function TableUsage() {
-    return (
-        <div className="w-full max-w-md rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Member</TableHead>
-                        <TableHead>Role</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {members.map((member) => (
-                        <TableRow key={member.name}>
-                            <TableCell>
-                                <div className="flex items-center gap-3">
-                                    <ProfileImage className="size-8">
-                                        <ProfileImageContent
-                                            src={member.src}
-                                        />
-                                        <ProfileImageFallback>
-                                            {member.initials}
-                                        </ProfileImageFallback>
-                                    </ProfileImage>
-                                    <span className="text-subheadline font-medium text-label">
-                                        {member.name}
-                                    </span>
-                                </div>
-                            </TableCell>
-                            <TableCell>
-                                {member.role}
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </div>
-    )
-}

package/src/components/table/examples/table-wide.tsx

@@ -1,75 +0,0 @@
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@passui/react/table"
-
-const events = [
-    {
-        time: "09:41",
-        event: "Signed in",
-        person: "aiko@example.com",
-        app: "Pass console",
-        device: "MacBook Air",
-        place: "Lisbon, PT",
-    },
-    {
-        time: "09:12",
-        event: "Passkey added",
-        person: "kenji@example.com",
-        app: "Accounts",
-        device: "iPhone 16",
-        place: "Porto, PT",
-    },
-    {
-        time: "08:57",
-        event: "Password changed",
-        person: "mira@example.com",
-        app: "Accounts",
-        device: "Pixel 9",
-        place: "Madrid, ES",
-    },
-]
-
-export function TableWide() {
-    // Table scrolls sideways inside its card when it's too wide
-    return (
-        <div className="w-full max-w-md rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Table>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Time</TableHead>
-                        <TableHead>Event</TableHead>
-                        <TableHead>Person</TableHead>
-                        <TableHead>App</TableHead>
-                        <TableHead>Device</TableHead>
-                        <TableHead>Location</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {events.map((row) => (
-                        <TableRow key={row.time}>
-                            <TableCell className="tabular-nums text-label-secondary">
-                                {row.time}
-                            </TableCell>
-                            <TableCell className="font-medium text-label">
-                                {row.event}
-                            </TableCell>
-                            <TableCell>
-                                {row.person}
-                            </TableCell>
-                            <TableCell>{row.app}</TableCell>
-                            <TableCell>
-                                {row.device}
-                            </TableCell>
-                            <TableCell>{row.place}</TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </div>
-    )
-}

package/src/components/table/table.docs.tsx

@@ -1,131 +0,0 @@
-import { jsxText } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { TableEmpty } from "./examples/table-empty"
-import { TableInvoices } from "./examples/table-invoices"
-import { TableSelection } from "./examples/table-selection"
-import { TableWide } from "./examples/table-wide"
-import { TableShowcase } from "./examples/table-showcase"
-import { TableUsage } from "./examples/table-usage"
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableFooter,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "./table"
-
-// The caption and footer are parts inside Table, so the snippet writes
-// them into the children.
-type DemoProps = {
-    caption: string
-    footer: boolean
-}
-
-const invoices = [
-    { id: "INV-104", status: "Paid", amount: "€120.00" },
-    { id: "INV-105", status: "Pending", amount: "€48.50" },
-    { id: "INV-106", status: "Paid", amount: "€310.00" },
-]
-
-export const tableDocs = defineDocs<DemoProps>()({
-    slug: "table",
-    name: "Table",
-    importPath: "@passui/react/table",
-    controls: {
-        caption: { kind: "text", default: "Recent invoices" },
-        footer: { kind: "boolean", default: true },
-    },
-    render: ({ caption, footer }) => (
-        <div className="w-full max-w-md rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Table>
-                {caption && (
-                    <TableCaption>{caption}</TableCaption>
-                )}
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Invoice</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead className="text-right">
-                            Amount
-                        </TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {invoices.map((invoice) => (
-                        <TableRow key={invoice.id}>
-                            <TableCell>
-                                {invoice.id}
-                            </TableCell>
-                            <TableCell>
-                                {invoice.status}
-                            </TableCell>
-                            <TableCell className="text-right tabular-nums">
-                                {invoice.amount}
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-                {footer && (
-                    <TableFooter>
-                        <TableRow>
-                            <TableCell colSpan={2}>
-                                Total
-                            </TableCell>
-                            <TableCell className="text-right tabular-nums">
-                                €478.50
-                            </TableCell>
-                        </TableRow>
-                    </TableFooter>
-                )}
-            </Table>
-        </div>
-    ),
-    childrenSnippet: ({ caption, footer }) => ({
-        imports: [
-            `import { TableBody, ${caption ? "TableCaption, " : ""}TableCell, ${footer ? "TableFooter, " : ""}TableHead, TableHeader, TableRow } from "@passui/react/table"`,
-        ],
-        omit: ["caption", "footer"],
-        children: [
-            "",
-            ...(caption
-                ? [
-                      `    <TableCaption>${jsxText(caption)}</TableCaption>`,
-                  ]
-                : []),
-            "    <TableHeader>",
-            "        <TableRow>",
-            "            <TableHead>Invoice</TableHead>",
-            '            <TableHead className="text-right">Amount</TableHead>',
-            "        </TableRow>",
-            "    </TableHeader>",
-            "    <TableBody>",
-            "        <TableRow>",
-            "            <TableCell>INV-104</TableCell>",
-            '            <TableCell className="text-right">€120.00</TableCell>',
-            "        </TableRow>",
-            "    </TableBody>",
-            ...(footer
-                ? [
-                      "    <TableFooter>",
-                      "        <TableRow>",
-                      "            <TableCell>Total</TableCell>",
-                      '            <TableCell className="text-right">€120.00</TableCell>',
-                      "        </TableRow>",
-                      "    </TableFooter>",
-                  ]
-                : []),
-            "",
-        ].join("\n"),
-    }),
-    usage: TableUsage,
-    showcase: TableShowcase,
-    examples: [
-        { id: "invoices", component: TableInvoices },
-        { id: "selection", component: TableSelection },
-        { id: "wide", component: TableWide },
-        { id: "empty", component: TableEmpty },
-    ],
-})

package/src/components/text-editor/examples/text-editor-comment.tsx

@@ -1,48 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { TextEditor } from "@passui/react/text-editor"
-import { useId, useState } from "react"
-
-export function TextEditorComment() {
-    const commentId = useId()
-    const [comment, setComment] = useState("")
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-3 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
-            <label
-                htmlFor={commentId}
-                className="text-subheadline font-semibold"
-            >
-                Add a comment
-            </label>
-            <TextEditor
-                id={commentId}
-                placeholder="Share your thoughts"
-                value={comment}
-                onChange={(event) =>
-                    setComment(event.target.value)
-                }
-            />
-            <div className="flex justify-end gap-2">
-                <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => setComment("")}
-                >
-                    Cancel
-                </Button>
-                <Button
-                    variant="accent"
-                    size="sm"
-                    disabled={!comment.trim()}
-                    onClick={() => {
-                        setComment("")
-                        toast.success("Comment posted")
-                    }}
-                >
-                    Post
-                </Button>
-            </div>
-        </div>
-    )
-}

package/src/components/text-editor/examples/text-editor-count.tsx

@@ -1,38 +0,0 @@
-import { TextEditor } from "@passui/react/text-editor"
-import { useId, useState } from "react"
-
-const limit = 160
-
-export function TextEditorCount() {
-    const statusId = useId()
-    const [status, setStatus] = useState(
-        "Out hiking until Sunday."
-    )
-    const countId = useId()
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-2">
-            <label
-                htmlFor={statusId}
-                className="text-subheadline font-semibold"
-            >
-                Status
-            </label>
-            <TextEditor
-                id={statusId}
-                maxLength={limit}
-                aria-describedby={countId}
-                value={status}
-                onChange={(event) =>
-                    setStatus(event.target.value)
-                }
-            />
-            <span
-                id={countId}
-                className="self-end text-caption text-label-tertiary tabular-nums"
-            >
-                {status.length} / {limit}
-            </span>
-        </div>
-    )
-}

package/src/components/text-editor/examples/text-editor-showcase.tsx

@@ -1,58 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { TextEditor } from "@passui/react/text-editor"
-import { TextField } from "@passui/react/text-field"
-import { useId, useState } from "react"
-
-export function TextEditorShowcase() {
-    const messageId = useId()
-    const [subject, setSubject] = useState("")
-    const [message, setMessage] = useState("")
-
-    return (
-        <form
-            className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
-            onSubmit={(event) => {
-                event.preventDefault()
-                toast.success("Thanks, we got your message")
-                setSubject("")
-                setMessage("")
-            }}
-        >
-            <h2 className="text-headline font-semibold text-label">
-                Contact support
-            </h2>
-            <TextField
-                label="Subject"
-                placeholder="I can't sign in on my tablet"
-                value={subject}
-                onChange={(event) =>
-                    setSubject(event.target.value)
-                }
-            />
-            <div className="flex flex-col gap-2">
-                <label
-                    htmlFor={messageId}
-                    className="text-subheadline font-semibold"
-                >
-                    Message
-                </label>
-                <TextEditor
-                    id={messageId}
-                    placeholder="What happened, and what did you expect?"
-                    value={message}
-                    onChange={(event) =>
-                        setMessage(event.target.value)
-                    }
-                />
-            </div>
-            <Button
-                type="submit"
-                variant="accent"
-                disabled={!subject || !message}
-            >
-                Send
-            </Button>
-        </form>
-    )
-}