@passui/react 0.1.17 → 0.1.19

package/src/components/swatch-picker/swatch-picker.docs.tsx

@@ -1,60 +0,0 @@
-import { SwatchPickerLabels } from "./examples/swatch-picker-labels"
-import { SwatchPickerAccents } from "./examples/swatch-picker-accents"
-import { useState } from "react"
-import { accents } from "@passui/tokens/accent"
-import { defineDocs } from "../../docs/types"
-import { SwatchPickerShowcase } from "./examples/swatch-picker-showcase"
-import { SwatchPickerUsage } from "./examples/swatch-picker-usage"
-import { SwatchPicker } from "./swatch-picker"
-
-type DemoProps = { label: string }
-
-function SwatchPickerDemo({ label }: DemoProps) {
-    const [accent, setAccent] = useState<string>("blush")
-    return (
-        <SwatchPicker
-            label={label}
-            value={accent}
-            onChange={setAccent}
-            options={Object.values(accents).map((option) => ({
-                value: option.id,
-                label: option.name,
-                color: option.swatch,
-                ink: option.light.accentText,
-            }))}
-        />
-    )
-}
-
-export const swatchPickerDocs = defineDocs<DemoProps>()({
-    slug: "swatch-picker",
-    name: "SwatchPicker",
-    importPath: "@passui/react",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Accent colour",
-            required: true,
-        },
-    },
-    render: (values) => <SwatchPickerDemo {...values} />,
-    childrenSnippet: () => ({
-        imports: ['import { useState } from "react"'],
-        setup: [
-            'const [colour, setColour] = useState("blush")',
-        ],
-        children: "",
-        expressionProps: {
-            value: "colour",
-            onChange: "setColour",
-            options:
-                '[{ value: "blush", label: "Blush", color: "#f2d4d7", ink: "#9e3b4f" }]',
-        },
-    }),
-    usage: SwatchPickerUsage,
-    showcase: SwatchPickerShowcase,
-    examples: [
-        { id: "accents", component: SwatchPickerAccents },
-        { id: "labels", component: SwatchPickerLabels },
-    ],
-})

package/src/components/tab-bar/examples/tab-bar-five-tabs.tsx

@@ -1,66 +0,0 @@
-import {
-    Calendar03Icon,
-    Home01Icon,
-    InboxIcon,
-    LibraryIcon,
-    UserIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { TabBar } from "@passui/react"
-import { useState } from "react"
-
-const tabs = [
-    {
-        id: "home",
-        label: "Home",
-        icon: <HugeiconsIcon icon={Home01Icon} size={22} />,
-    },
-    {
-        id: "inbox",
-        label: "Inbox",
-        icon: <HugeiconsIcon icon={InboxIcon} size={22} />,
-    },
-    {
-        id: "calendar",
-        label: "Calendar",
-        icon: (
-            <HugeiconsIcon icon={Calendar03Icon} size={22} />
-        ),
-    },
-    {
-        id: "library",
-        label: "Library",
-        icon: <HugeiconsIcon icon={LibraryIcon} size={22} />,
-    },
-    {
-        id: "profile",
-        label: "Profile",
-        icon: <HugeiconsIcon icon={UserIcon} size={22} />,
-    },
-]
-
-export function TabBarFiveTabs() {
-    const [active, setActive] = useState("inbox")
-
-    return (
-        <div className="relative h-32 w-full max-w-sm overflow-hidden rounded-5xl bg-fill/40">
-            <TabBar
-                label="Main"
-                tabs={tabs}
-                active={active}
-                className="absolute inset-x-3 bottom-3"
-                renderLink={(tab, props) => (
-                    <a
-                        key={tab.id}
-                        href={`#${tab.id}`}
-                        {...props}
-                        onClick={(event) => {
-                            event.preventDefault()
-                            setActive(tab.id)
-                        }}
-                    />
-                )}
-            />
-        </div>
-    )
-}

package/src/components/tab-bar/examples/tab-bar-minimize.tsx

@@ -1,71 +0,0 @@
-import {
-    Home01Icon,
-    LibraryIcon,
-    UserIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { TabBar } from "@passui/react"
-import { useState } from "react"
-
-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} />,
-    },
-]
-
-const books = Array.from(
-    { length: 24 },
-    (_, index) => `Chapter ${index + 1}`
-)
-
-export function TabBarMinimize() {
-    const [active, setActive] = useState("library")
-
-    return (
-        <div className="relative h-96 w-full max-w-xs overflow-hidden rounded-5xl bg-background ring-1 ring-separator/60">
-            <ul className="m-0 h-full list-none overflow-y-auto p-4 pb-24">
-                {books.map((book) => (
-                    <li
-                        key={book}
-                        className="border-separator/60 border-b py-3 text-subheadline text-label"
-                    >
-                        {book}
-                    </li>
-                ))}
-            </ul>
-            <TabBar
-                label="Main"
-                tabs={tabs}
-                active={active}
-                search={{
-                    label: "Search",
-                    onPress: () => {},
-                }}
-                className="absolute inset-x-3 bottom-3"
-                renderLink={(tab, props) => (
-                    <a
-                        key={tab.id}
-                        href={`#${tab.id}`}
-                        {...props}
-                        onClick={(event) => {
-                            event.preventDefault()
-                            setActive(tab.id)
-                        }}
-                    />
-                )}
-            />
-        </div>
-    )
-}

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

@@ -1,82 +0,0 @@
-import {
-    FavouriteIcon,
-    Home01Icon,
-    LibraryIcon,
-    UserIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { TabBar } from "@passui/react"
-import { useState } from "react"
-
-const tabs = [
-    {
-        id: "home",
-        label: "Home",
-        icon: <HugeiconsIcon icon={Home01Icon} size={22} />,
-    },
-    {
-        id: "library",
-        label: "Library",
-        icon: <HugeiconsIcon icon={LibraryIcon} size={22} />,
-    },
-    {
-        id: "saved",
-        label: "Saved",
-        icon: (
-            <HugeiconsIcon icon={FavouriteIcon} size={22} />
-        ),
-    },
-    {
-        id: "profile",
-        label: "Profile",
-        icon: <HugeiconsIcon icon={UserIcon} size={22} />,
-    },
-]
-
-const titles: Record<string, string> = {
-    home: "Good morning, Aiko",
-    library: "Your library",
-    saved: "Saved for later",
-    profile: "Your profile",
-}
-
-export function TabBarShowcase() {
-    const [active, setActive] = useState("home")
-
-    return (
-        <div className="relative h-112 w-full max-w-xs overflow-hidden rounded-sheet bg-background shadow-sm ring-1 ring-separator/60">
-            <div className="flex flex-col gap-4 p-6 pt-10">
-                <h2 className="text-title2 font-bold text-label">
-                    {titles[active]}
-                </h2>
-                {[0, 1, 2].map((row) => (
-                    <div
-                        key={row}
-                        className="h-20 rounded-3xl bg-fill/60"
-                    />
-                ))}
-            </div>
-            <TabBar
-                label="Main"
-                tabs={tabs}
-                active={active}
-                search={{
-                    label: "Search",
-                    onPress: () => {},
-                }}
-                className="absolute inset-x-3 bottom-3"
-                renderLink={(tab, props) => (
-                    <a
-                        key={tab.id}
-                        href={`#${tab.id}`}
-                        {...props}
-                        onClick={(event) => {
-                            event.preventDefault()
-                            setActive(tab.id)
-                        }}
-                    />
-                )}
-            />
-        </div>
-    )
-}

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

@@ -1,54 +0,0 @@
-import {
-    Home01Icon,
-    LibraryIcon,
-    UserIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { TabBar } from "@passui/react"
-import { useState } from "react"
-
-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} />,
-    },
-]
-
-export function TabBarUsage() {
-    const [active, setActive] = useState("home")
-
-    // In an app the bar is fixed to the bottom of the screen; here it
-    // sits in a frame so the example stays on the page.
-    return (
-        <div className="relative h-32 w-full max-w-sm overflow-hidden rounded-5xl bg-fill/40">
-            <TabBar
-                label="Main"
-                tabs={tabs}
-                active={active}
-                className="absolute inset-x-3 bottom-3"
-                renderLink={(tab, props) => (
-                    <a
-                        key={tab.id}
-                        href={`#${tab.id}`}
-                        {...props}
-                        onClick={(event) => {
-                            event.preventDefault()
-                            setActive(tab.id)
-                        }}
-                    />
-                )}
-            />
-        </div>
-    )
-}

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