@passui/react 0.1.17 → 0.1.19

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

@@ -1,77 +0,0 @@
-import { TabViewSettings } from "./examples/tab-view-settings"
-import { defineDocs } from "../../docs/types"
-import { TabViewKeyboard } from "./examples/tab-view-keyboard"
-import { TabViewShowcase } from "./examples/tab-view-showcase"
-import { TabViewUsage } from "./examples/tab-view-usage"
-import { TabView } from "./tab-view"
-
-// TabView is generic over its tab values, so the docs name the three
-// tabs the playground shows.
-type DemoProps = {
-    label: string
-    defaultValue: "overview" | "activity" | "settings"
-}
-
-const options = [
-    { value: "overview", label: "Overview" },
-    { value: "activity", label: "Activity" },
-    { value: "settings", label: "Settings" },
-] as const
-
-export const tabViewDocs = defineDocs<DemoProps>()({
-    slug: "tab-view",
-    name: "TabView",
-    importPath: "@passui/react/tab-view",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Project",
-            required: true,
-        },
-        defaultValue: {
-            kind: "select",
-            options: {
-                overview: true,
-                activity: true,
-                settings: true,
-            },
-            default: "overview",
-        },
-    },
-    render: ({ label, defaultValue }) => (
-        <div className="w-full max-w-sm">
-            <TabView
-                key={defaultValue}
-                label={label}
-                options={options}
-                defaultValue={defaultValue}
-            >
-                {(value) => (
-                    <p className="text-center text-callout text-label-secondary">
-                        The {value} panel.
-                    </p>
-                )}
-            </TabView>
-        </div>
-    ),
-    childrenSnippet: ({ defaultValue }) => ({
-        imports: [],
-        children: [
-            "",
-            "    {(value) => <p>The {value} panel.</p>}",
-            "",
-        ].join("\n"),
-        omit: ["defaultValue"],
-        extraProps: { defaultValue },
-        expressionProps: {
-            options:
-                '[{ value: "overview", label: "Overview" }, { value: "activity", label: "Activity" }, { value: "settings", label: "Settings" }]',
-        },
-    }),
-    usage: TabViewUsage,
-    showcase: TabViewShowcase,
-    examples: [
-        { id: "keyboard", component: TabViewKeyboard },
-        { id: "settings", component: TabViewSettings },
-    ],
-})

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

@@ -1,53 +0,0 @@
-import { InboxIcon } 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"
-
-export function TableEmpty() {
-    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>Application</TableHead>
-                        <TableHead>Created</TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    <TableRow className="hover:bg-transparent">
-                        <TableCell colSpan={2}>
-                            <div className="flex flex-col items-center gap-2 py-8 text-center">
-                                <HugeiconsIcon
-                                    icon={InboxIcon}
-                                    size={28}
-                                    className="text-label-tertiary"
-                                />
-                                <span className="text-subheadline font-medium text-label">
-                                    No applications yet
-                                </span>
-                                <span className="text-footnote text-label-secondary">
-                                    Apps you create appear
-                                    here.
-                                </span>
-                                <Button
-                                    variant="accent"
-                                    size="sm"
-                                    className="mt-2"
-                                >
-                                    New application
-                                </Button>
-                            </div>
-                        </TableCell>
-                    </TableRow>
-                </TableBody>
-            </Table>
-        </div>
-    )
-}

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

@@ -1,102 +0,0 @@
-import { StatusIndicator } from "@passui/react"
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableFooter,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@passui/react/table"
-
-const invoices = [
-    {
-        id: "INV-104",
-        date: "2 Oct",
-        paid: true,
-        amount: 120,
-    },
-    {
-        id: "INV-105",
-        date: "6 Oct",
-        paid: false,
-        amount: 48.5,
-    },
-    {
-        id: "INV-106",
-        date: "11 Oct",
-        paid: true,
-        amount: 310,
-    },
-]
-
-const euros = new Intl.NumberFormat("en", {
-    style: "currency",
-    currency: "EUR",
-})
-
-export function TableInvoices() {
-    const total = invoices.reduce(
-        (sum, invoice) => sum + invoice.amount,
-        0
-    )
-
-    return (
-        <div className="w-full max-w-lg rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Table>
-                <TableCaption>
-                    Invoices for October
-                </TableCaption>
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Invoice</TableHead>
-                        <TableHead>Date</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead className="text-right">
-                            Amount
-                        </TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {invoices.map((invoice) => (
-                        <TableRow key={invoice.id}>
-                            <TableCell className="font-medium text-label">
-                                {invoice.id}
-                            </TableCell>
-                            <TableCell className="text-label-secondary">
-                                {invoice.date}
-                            </TableCell>
-                            <TableCell>
-                                <StatusIndicator
-                                    state={
-                                        invoice.paid
-                                            ? "saved"
-                                            : "syncing"
-                                    }
-                                >
-                                    {invoice.paid
-                                        ? "Paid"
-                                        : "Pending"}
-                                </StatusIndicator>
-                            </TableCell>
-                            <TableCell className="text-right tabular-nums">
-                                {euros.format(invoice.amount)}
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-                <TableFooter>
-                    <TableRow>
-                        <TableCell colSpan={3}>
-                            Total
-                        </TableCell>
-                        <TableCell className="text-right tabular-nums">
-                            {euros.format(total)}
-                        </TableCell>
-                    </TableRow>
-                </TableFooter>
-            </Table>
-        </div>
-    )
-}

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