@passui/react 0.0.0-stage → 0.1.14

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

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

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

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

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

@@ -0,0 +1,148 @@
+import { motion } from "motion/react"
+import { type ReactNode, useId } from "react"
+import { useMinimizeOnScroll } from "../../hooks/use-minimize-on-scroll"
+import { SearchIcon } from "../../icons/icons"
+import { cn } from "../../lib/class-names"
+import { spring } from "../../motion/transitions"
+
+export interface TabBarTab<Id extends string = string> {
+    id: Id
+    label: string
+    icon: ReactNode
+}
+
+/** What a tab's link receives; spread it onto the router's own link. */
+export interface TabBarLinkProps {
+    className: string
+    "aria-current": "page" | undefined
+    onClick: () => void
+    children: ReactNode
+}
+
+/**
+ * The app's main places a thumb's reach away, drawn as iOS 26 draws them: a
+ * floating glass capsule of tabs, with Search as its own round button at the
+ * trailing end. Scrolling down through content shrinks the capsule to the
+ * current tab; scrolling back up, or a tap, restores it. Android shares the
+ * glass, but its bar stays full size, as Android's own bars do.
+ *
+ * Links stay the app's own (`renderLink`), so the bar works with any router.
+ */
+export function TabBar<Tab extends TabBarTab>({
+    tabs,
+    active,
+    renderLink,
+    search,
+    label,
+    className,
+    minimizeBehavior = "platform",
+}: {
+    minimizeBehavior?: "platform" | "scroll" | "never"
+    tabs: readonly Tab[]
+    /** Null in places the bar has no tab for. */
+    active: Tab["id"] | null
+    renderLink: (
+        tab: Tab,
+        props: TabBarLinkProps
+    ) => ReactNode
+    search?: { label: string; onPress: () => void }
+    /** Names the navigation for screen readers. */
+    label: string
+    className?: string
+}) {
+    // Scopes the sliding selection to this bar, so two bars on one
+    // screen (a docs page, a split view) never trade their highlight.
+    const selectionId = `${useId()}-tab-selection`
+    const [scrolledAway, setScrolledAway] =
+        useMinimizeOnScroll()
+    // Platform behavior keeps Android expanded; apps can opt into scroll minimization.
+    const minimized =
+        scrolledAway &&
+        active !== null &&
+        minimizeBehavior !== "never" &&
+        (minimizeBehavior === "scroll" || !onAndroid())
+    return (
+        <nav
+            aria-label={label}
+            className={cn(
+                "fixed inset-x-4 bottom-[max(14px,env(safe-area-inset-bottom))] z-30 flex items-center gap-3",
+                className
+            )}
+        >
+            <motion.div
+                layout
+                transition={spring.smooth}
+                // A tap on the shrunken capsule brings every tab back.
+                onClickCapture={(event) => {
+                    if (!minimized) return
+                    event.preventDefault()
+                    event.stopPropagation()
+                    setScrolledAway(false)
+                }}
+                className={cn(
+                    "glass flex min-w-0 items-center rounded-full p-0.5",
+                    minimized ? "grow-0" : "grow"
+                )}
+            >
+                {tabs.map((tab) => {
+                    const current = tab.id === active
+                    if (minimized && !current) return null
+                    return renderLink(tab, {
+                        "aria-current": current
+                            ? "page"
+                            : undefined,
+                        // Switching tabs is silent, as on Apple and Android: no haptic.
+                        onClick: () => {},
+                        className: cn(
+                            "relative isolate flex h-11 min-w-0 flex-col items-center justify-center gap-0.5 rounded-full font-semibold text-[10px] tracking-[0.01em] no-underline transition-[color,transform] duration-fast active:scale-[0.94]",
+                            minimized
+                                ? "w-11"
+                                : "flex-1 px-1",
+                            current
+                                ? "text-accent-text"
+                                : "text-label-secondary"
+                        ),
+                        children: (
+                            <>
+                                {current && (
+                                    <motion.span
+                                        layoutId={selectionId}
+                                        className="glass-lens absolute inset-0 -z-10 rounded-full"
+                                        transition={
+                                            spring.snappy
+                                        }
+                                    />
+                                )}
+                                {tab.icon}
+                                {!minimized && (
+                                    <span className="max-w-full truncate">
+                                        {tab.label}
+                                    </span>
+                                )}
+                            </>
+                        ),
+                    })
+                })}
+            </motion.div>
+            {search && (
+                <button
+                    type="button"
+                    aria-label={search.label}
+                    onClick={search.onPress}
+                    className={cn(
+                        "glass ms-auto flex size-12 shrink-0 items-center justify-center rounded-full text-label transition-transform duration-fast active:scale-[0.92]"
+                    )}
+                >
+                    <SearchIcon size={19} strokeWidth={2} />
+                </button>
+            )}
+        </nav>
+    )
+}
+
+function onAndroid() {
+    return (
+        typeof document !== "undefined" &&
+        document.documentElement.dataset.os === "android"
+    )
+}

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

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

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

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

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