@passui/react 0.0.0-stage → 0.1.14

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

@@ -0,0 +1,77 @@
+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/tab-view/tab-view.tsx

@@ -0,0 +1,117 @@
+import {
+    useId,
+    useRef,
+    useState,
+    type ReactNode,
+} from "react"
+import { cn } from "../../lib/class-names"
+
+/** Content tabs with native buttons, roving focus and automatic keyboard activation. */
+export function TabView<Value extends string>({
+    options,
+    defaultValue,
+    label,
+    children,
+    className,
+}: {
+    options: readonly { value: Value; label: string }[]
+    defaultValue: Value
+    label: string
+    children: (value: Value) => ReactNode
+    className?: string
+}) {
+    const id = useId()
+    const buttons = useRef<(HTMLButtonElement | null)[]>([])
+    const [selected, setSelected] = useState(defaultValue)
+    const value = options.some(
+        (option) => option.value === selected
+    )
+        ? selected
+        : options[0]?.value
+    if (value === undefined) return null
+
+    return (
+        <div
+            className={cn(
+                "flex w-full flex-col gap-5",
+                className
+            )}
+        >
+            <div
+                role="tablist"
+                aria-label={label}
+                className="mx-auto inline-flex h-8 max-w-full items-center justify-center gap-5 p-[3px]"
+            >
+                {options.map((option, index) => (
+                    <button
+                        key={option.value}
+                        type="button"
+                        role="tab"
+                        id={`${id}-tab-${index}`}
+                        aria-controls={`${id}-panel-${index}`}
+                        aria-selected={option.value === value}
+                        tabIndex={
+                            option.value === value ? 0 : -1
+                        }
+                        ref={(element) => {
+                            buttons.current[index] = element
+                        }}
+                        onClick={() =>
+                            setSelected(option.value)
+                        }
+                        onKeyDown={(event) => {
+                            const rtl =
+                                getComputedStyle(
+                                    event.currentTarget
+                                ).direction === "rtl"
+                            let next: number
+                            if (event.key === "Home") next = 0
+                            else if (event.key === "End")
+                                next = options.length - 1
+                            else if (
+                                event.key === "ArrowRight"
+                            )
+                                next = index + (rtl ? -1 : 1)
+                            else if (
+                                event.key === "ArrowLeft"
+                            )
+                                next = index + (rtl ? 1 : -1)
+                            else return
+                            event.preventDefault()
+                            next =
+                                (next + options.length) %
+                                options.length
+                            const option = options[next]
+                            if (option)
+                                setSelected(option.value)
+                            buttons.current[next]?.focus()
+                        }}
+                        className={cn(
+                            "relative inline-flex h-[calc(100%-1px)] shrink-0 items-center justify-center border border-transparent p-0 text-sm font-medium whitespace-nowrap",
+                            "focus-visible:outline-2 focus-visible:outline-offset-2",
+                            "after:absolute after:inset-x-0 after:bottom-[-5px] after:h-0.5 after:bg-current",
+                            option.value === value
+                                ? "after:opacity-100"
+                                : "opacity-60 hover:opacity-100 after:opacity-0"
+                        )}
+                    >
+                        {option.label}
+                    </button>
+                ))}
+            </div>
+            {options.map((option, index) => (
+                <div
+                    key={option.value}
+                    role="tabpanel"
+                    id={`${id}-panel-${index}`}
+                    aria-labelledby={`${id}-tab-${index}`}
+                    hidden={option.value !== value}
+                    className="w-full outline-offset-4"
+                >
+                    {option.value === value &&
+                        children(option.value)}
+                </div>
+            ))}
+        </div>
+    )
+}

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

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

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

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

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

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