@passui/react 0.1.17 → 0.1.20

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

@@ -1,136 +0,0 @@
-import { TabBarFiveTabs } from "./examples/tab-bar-five-tabs"
-import {
-    Home01Icon,
-    LibraryIcon,
-    UserIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { TabBarMinimize } from "./examples/tab-bar-minimize"
-import { TabBarShowcase } from "./examples/tab-bar-showcase"
-import { TabBarUsage } from "./examples/tab-bar-usage"
-import { TabBar } from "./tab-bar"
-
-// The tabs and the search button are objects, so the playground picks
-// the active tab and switches search on; the snippet writes the rest.
-type DemoProps = {
-    label: string
-    active: "home" | "library" | "profile"
-    search: boolean
-}
-
-const tabs = [
-    {
-        id: "home",
-        label: "Home",
-        icon: <HugeiconsIcon icon={Home01Icon} size={22} />,
-    },
-    {
-        id: "library",
-        label: "Library",
-        icon: <HugeiconsIcon icon={LibraryIcon} size={22} />,
-    },
-    {
-        id: "profile",
-        label: "Profile",
-        icon: <HugeiconsIcon icon={UserIcon} size={22} />,
-    },
-] as const
-
-function TabBarDemo({ label, active, search }: DemoProps) {
-    const [current, setCurrent] =
-        useState<DemoProps["active"]>(active)
-    return (
-        <div className="relative h-40 w-full max-w-sm overflow-hidden rounded-5xl bg-fill/40">
-            <TabBar
-                label={label}
-                tabs={tabs}
-                active={current}
-                search={
-                    search
-                        ? {
-                              label: "Search",
-                              onPress: () => {},
-                          }
-                        : undefined
-                }
-                className="absolute inset-x-3 bottom-3"
-                renderLink={(tab, props) => (
-                    <a
-                        key={tab.id}
-                        href={`#${tab.id}`}
-                        {...props}
-                        onClick={(event) => {
-                            event.preventDefault()
-                            setCurrent(tab.id)
-                        }}
-                    />
-                )}
-            />
-        </div>
-    )
-}
-
-export const tabBarDocs = defineDocs<DemoProps>()({
-    slug: "tab-bar",
-    name: "TabBar",
-    importPath: "@passui/react",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Main",
-            required: true,
-        },
-        active: {
-            kind: "select",
-            options: {
-                home: true,
-                library: true,
-                profile: true,
-            },
-            default: "home",
-        },
-        search: { kind: "boolean", default: true },
-    },
-    render: (values) => (
-        <TabBarDemo key={values.active} {...values} />
-    ),
-    childrenSnippet: ({ search }) => ({
-        imports: [
-            'import { Home01Icon, LibraryIcon, UserIcon } from "@hugeicons/core-free-icons"',
-            'import { HugeiconsIcon } from "@hugeicons/react"',
-            `import { Link, useLocation${search ? ", useNavigate" : ""} } from "@tanstack/react-router"`,
-        ],
-        setup: [
-            "const tabs = [",
-            '    { id: "/", label: "Home", icon: <HugeiconsIcon icon={Home01Icon} size={22} /> },',
-            '    { id: "/library", label: "Library", icon: <HugeiconsIcon icon={LibraryIcon} size={22} /> },',
-            '    { id: "/profile", label: "Profile", icon: <HugeiconsIcon icon={UserIcon} size={22} /> },',
-            "]",
-            "const { pathname } = useLocation()",
-            ...(search
-                ? ["const navigate = useNavigate()"]
-                : []),
-        ],
-        children: "",
-        omit: ["active", "search"],
-        expressionProps: {
-            tabs: "tabs",
-            active: "pathname",
-            ...(search
-                ? {
-                      search: '{ label: "Search", onPress: () => navigate({ to: "/search" }) }',
-                  }
-                : {}),
-            renderLink:
-                "(tab, props) => <Link key={tab.id} to={tab.id} {...props} />",
-        },
-    }),
-    usage: TabBarUsage,
-    showcase: TabBarShowcase,
-    examples: [
-        { id: "minimize", component: TabBarMinimize },
-        { id: "five-tabs", component: TabBarFiveTabs },
-    ],
-})

package/src/components/tab-view/examples/tab-view-keyboard.tsx

@@ -1,39 +0,0 @@
-import { TabView } from "@passui/react/tab-view"
-
-const days = [
-    { value: "mon", label: "Mon" },
-    { value: "tue", label: "Tue" },
-    { value: "wed", label: "Wed" },
-    { value: "thu", label: "Thu" },
-    { value: "fri", label: "Fri" },
-] as const
-
-const plans = {
-    mon: "Design review at 10:00",
-    tue: "Focus time, no meetings",
-    wed: "Team lunch at 12:30",
-    thu: "Ship the release",
-    fri: "Retro and planning",
-}
-
-export function TabViewKeyboard() {
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-3">
-            <p className="text-center text-footnote text-label-secondary">
-                Tab into the row, then use the arrow keys,
-                Home and End.
-            </p>
-            <TabView
-                label="Weekday"
-                defaultValue="wed"
-                options={days}
-            >
-                {(day) => (
-                    <p className="rounded-3xl bg-fill/60 p-4 text-center text-callout text-label">
-                        {plans[day]}
-                    </p>
-                )}
-            </TabView>
-        </div>
-    )
-}

package/src/components/tab-view/examples/tab-view-settings.tsx

@@ -1,56 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { TabView } from "@passui/react/tab-view"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function TabViewSettings() {
-    const [sounds, setSounds] = useState(true)
-    const [badges, setBadges] = useState(false)
-
-    return (
-        <div className="w-full max-w-sm rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
-            <TabView
-                label="Settings"
-                defaultValue="notifications"
-                options={[
-                    {
-                        value: "notifications",
-                        label: "Notifications",
-                    },
-                    { value: "privacy", label: "Privacy" },
-                ]}
-            >
-                {(tab) =>
-                    tab === "notifications" ? (
-                        <Section>
-                            <LabeledContent label="Sounds">
-                                <Toggle
-                                    label="Sounds"
-                                    labelHidden
-                                    checked={sounds}
-                                    onChange={setSounds}
-                                />
-                            </LabeledContent>
-                            <LabeledContent label="Badges">
-                                <Toggle
-                                    label="Badges"
-                                    labelHidden
-                                    checked={badges}
-                                    onChange={setBadges}
-                                />
-                            </LabeledContent>
-                        </Section>
-                    ) : (
-                        <Section footer="Only people you share with can see your profile.">
-                            <LabeledContent label="Profile">
-                                <span className="text-subheadline text-label-secondary">
-                                    Private
-                                </span>
-                            </LabeledContent>
-                        </Section>
-                    )
-                }
-            </TabView>
-        </div>
-    )
-}

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

@@ -1,53 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { StatTile } from "@passui/react/stat-tile"
-import { TabView } from "@passui/react/tab-view"
-
-export function TabViewShowcase() {
-    return (
-        <div className="w-full max-w-md rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60">
-            <TabView
-                label="Pass console"
-                defaultValue="overview"
-                options={[
-                    { value: "overview", label: "Overview" },
-                    { value: "members", label: "Members" },
-                    { value: "settings", label: "Settings" },
-                ]}
-            >
-                {(tab) =>
-                    tab === "overview" ? (
-                        <div className="grid grid-cols-2 gap-3">
-                            <StatTile
-                                label="Sign ins today"
-                                value={128}
-                            />
-                            <StatTile
-                                label="Failed sign ins"
-                                value={3}
-                                tone="critical"
-                            />
-                        </div>
-                    ) : tab === "members" ? (
-                        <Section title="Team">
-                            <LabeledContent label="Aiko Kamado">
-                                Owner
-                            </LabeledContent>
-                            <LabeledContent label="Kenji Mori">
-                                Admin
-                            </LabeledContent>
-                        </Section>
-                    ) : (
-                        <Section title="Project">
-                            <LabeledContent label="Name">
-                                Pass
-                            </LabeledContent>
-                            <LabeledContent label="Region">
-                                Europe
-                            </LabeledContent>
-                        </Section>
-                    )
-                }
-            </TabView>
-        </div>
-    )
-}

package/src/components/tab-view/examples/tab-view-usage.tsx

@@ -1,23 +0,0 @@
-import { TabView } from "@passui/react/tab-view"
-
-export function TabViewUsage() {
-    return (
-        <TabView
-            label="Account"
-            defaultValue="profile"
-            options={[
-                { value: "profile", label: "Profile" },
-                { value: "security", label: "Security" },
-            ]}
-            className="max-w-sm"
-        >
-            {(value) => (
-                <p className="text-center text-callout text-label-secondary">
-                    {value === "profile"
-                        ? "Your name and photo."
-                        : "Your password and passkeys."}
-                </p>
-            )}
-        </TabView>
-    )
-}

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