@passui/react 0.1.17 → 0.1.20

package/src/components/status-indicator/examples/status-indicator-live.tsx

@@ -1,34 +0,0 @@
-import { StatusIndicator } from "@passui/react"
-import { TextField } from "@passui/react/text-field"
-import { useRef, useState } from "react"
-
-export function StatusIndicatorLive() {
-    const [title, setTitle] = useState("Trip to Kyoto")
-    const [saving, setSaving] = useState(false)
-    const timer =
-        useRef<ReturnType<typeof setTimeout>>(undefined)
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-3 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
-            <TextField
-                label="Note title"
-                value={title}
-                onChange={(event) => {
-                    setTitle(event.target.value)
-                    // a pretend save that settles a moment later
-                    setSaving(true)
-                    clearTimeout(timer.current)
-                    timer.current = setTimeout(
-                        () => setSaving(false),
-                        900
-                    )
-                }}
-            />
-            <StatusIndicator
-                state={saving ? "syncing" : "saved"}
-            >
-                {saving ? "Saving" : "Saved"}
-            </StatusIndicator>
-        </div>
-    )
-}

package/src/components/status-indicator/examples/status-indicator-showcase.tsx

@@ -1,39 +0,0 @@
-import { StatusIndicator } from "@passui/react"
-
-const devices = [
-    {
-        name: "MacBook Pro",
-        state: "saved",
-        detail: "Up to date",
-    },
-    {
-        name: "iPhone",
-        state: "syncing",
-        detail: "Syncing 12 notes",
-    },
-    {
-        name: "iPad",
-        state: "offline",
-        detail: "Last seen yesterday",
-    },
-] as const
-
-export function StatusIndicatorShowcase() {
-    return (
-        <ul className="m-0 flex w-full max-w-sm list-none flex-col divide-y divide-separator/60 overflow-hidden rounded-4xl bg-elevated p-0 shadow-sm ring-1 ring-separator/60">
-            {devices.map((device) => (
-                <li
-                    key={device.name}
-                    className="flex items-center justify-between px-5 py-4"
-                >
-                    <span className="text-subheadline font-semibold text-label">
-                        {device.name}
-                    </span>
-                    <StatusIndicator state={device.state}>
-                        {device.detail}
-                    </StatusIndicator>
-                </li>
-            ))}
-        </ul>
-    )
-}

package/src/components/status-indicator/examples/status-indicator-states.tsx

@@ -1,17 +0,0 @@
-import { StatusIndicator } from "@passui/react"
-
-export function StatusIndicatorStates() {
-    return (
-        <div className="flex flex-col gap-3 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
-            <StatusIndicator state="saved">
-                All changes saved
-            </StatusIndicator>
-            <StatusIndicator state="syncing">
-                Syncing 3 notes
-            </StatusIndicator>
-            <StatusIndicator state="offline">
-                Offline. Changes save when you reconnect.
-            </StatusIndicator>
-        </div>
-    )
-}

package/src/components/status-indicator/examples/status-indicator-usage.tsx

@@ -1,9 +0,0 @@
-import { StatusIndicator } from "@passui/react"
-
-export function StatusIndicatorUsage() {
-    return (
-        <StatusIndicator state="saved">
-            All changes saved
-        </StatusIndicator>
-    )
-}

package/src/components/status-indicator/status-indicator.docs.tsx

@@ -1,43 +0,0 @@
-import { StatusIndicatorLive } from "./examples/status-indicator-live"
-import { StatusIndicatorStates } from "./examples/status-indicator-states"
-import { defineDocs } from "../../docs/types"
-import { StatusIndicatorShowcase } from "./examples/status-indicator-showcase"
-import { StatusIndicatorUsage } from "./examples/status-indicator-usage"
-import { StatusIndicator } from "./status-indicator"
-
-type DemoProps = {
-    state: "saved" | "syncing" | "offline"
-    children?: string
-}
-
-export const statusIndicatorDocs = defineDocs<DemoProps>()({
-    slug: "status-indicator",
-    name: "StatusIndicator",
-    importPath: "@passui/react",
-    controls: {
-        state: {
-            kind: "select",
-            options: {
-                saved: true,
-                syncing: true,
-                offline: true,
-            },
-            default: "saved",
-        },
-        children: {
-            kind: "text",
-            default: "All changes saved",
-        },
-    },
-    render: ({ children, ...values }) => (
-        <StatusIndicator {...values}>
-            {children}
-        </StatusIndicator>
-    ),
-    usage: StatusIndicatorUsage,
-    showcase: StatusIndicatorShowcase,
-    examples: [
-        { id: "states", component: StatusIndicatorStates },
-        { id: "live", component: StatusIndicatorLive },
-    ],
-})

package/src/components/swatch-picker/examples/swatch-picker-accents.tsx

@@ -1,42 +0,0 @@
-import { SwatchPicker } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { type AccentId, accents } from "@passui/react/tokens"
-import { type CSSProperties, useState } from "react"
-
-// every Passui accent, straight from the tokens
-const options = Object.values(accents).map((accent) => ({
-    value: accent.id,
-    label: accent.name,
-    color: accent.swatch,
-    ink: accent.light.accentText,
-}))
-
-export function SwatchPickerAccents() {
-    const [accent, setAccent] = useState<AccentId>("ocean")
-    const colors = accents[accent].light
-
-    // An app sets data-accent on <html>; this card sets the accent's
-    // colors on itself, so the button below shows the choice.
-    const style = {
-        "--color-accent": colors.accent,
-        "--color-on-accent": colors.onAccent,
-        "--color-accent-text": colors.accentText,
-    } as CSSProperties
-
-    return (
-        <div
-            style={style}
-            className="flex w-full max-w-sm flex-col items-center gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
-        >
-            <SwatchPicker
-                label="Accent color"
-                options={options}
-                value={accent}
-                onChange={setAccent}
-            />
-            <Button variant="accent">
-                {accents[accent].name}
-            </Button>
-        </div>
-    )
-}

package/src/components/swatch-picker/examples/swatch-picker-labels.tsx

@@ -1,45 +0,0 @@
-import { Chip, SwatchPicker } from "@passui/react"
-import { useState } from "react"
-
-const colors = [
-    {
-        value: "family",
-        label: "Green",
-        color: "#e3f3eb",
-        ink: "#24704f",
-    },
-    {
-        value: "public",
-        label: "Blue",
-        color: "#e8efff",
-        ink: "#2c55b8",
-    },
-    {
-        value: "friends",
-        label: "Purple",
-        color: "#ede8ff",
-        ink: "#5a3fc0",
-    },
-] as const
-
-export function SwatchPickerLabels() {
-    const [tone, setTone] =
-        useState<(typeof colors)[number]["value"]>("family")
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60">
-            <div className="flex items-center justify-between">
-                <span className="text-subheadline font-medium text-label">
-                    Tag color
-                </span>
-                <Chip tone={tone}>Weekend trip</Chip>
-            </div>
-            <SwatchPicker
-                label="Tag color"
-                options={[...colors]}
-                value={tone}
-                onChange={setTone}
-            />
-        </div>
-    )
-}

package/src/components/swatch-picker/examples/swatch-picker-showcase.tsx

@@ -1,70 +0,0 @@
-import { Chip, SwatchPicker } from "@passui/react"
-import { useState } from "react"
-
-const colours = [
-    {
-        value: "sky",
-        label: "Sky",
-        color: "#9fc3ec",
-        ink: "#1f4f86",
-    },
-    {
-        value: "mint",
-        label: "Mint",
-        color: "#a7d8bd",
-        ink: "#1f6644",
-    },
-    {
-        value: "sun",
-        label: "Sun",
-        color: "#f3cf6b",
-        ink: "#7a5600",
-    },
-    {
-        value: "rose",
-        label: "Rose",
-        color: "#f0b3be",
-        ink: "#8c2f45",
-    },
-    {
-        value: "lilac",
-        label: "Lilac",
-        color: "#cbbcf0",
-        ink: "#4b348f",
-    },
-]
-
-export function SwatchPickerShowcase() {
-    const [colour, setColour] = useState("mint")
-    const chosen =
-        colours.find((option) => option.value === colour) ??
-        colours[0]
-
-    return (
-        <section className="flex w-full max-w-sm flex-col gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60">
-            <div
-                className="flex h-28 items-end rounded-3xl p-4 transition-colors duration-500"
-                style={{ backgroundColor: chosen.color }}
-            >
-                <span
-                    className="text-title3 font-bold"
-                    style={{ color: chosen.ink }}
-                >
-                    Garden notes
-                </span>
-            </div>
-            <div className="flex items-center justify-between">
-                <span className="text-subheadline font-semibold text-label">
-                    Notebook colour
-                </span>
-                <Chip tone="neutral">{chosen.label}</Chip>
-            </div>
-            <SwatchPicker
-                label="Notebook colour"
-                value={colour}
-                onChange={setColour}
-                options={colours}
-            />
-        </section>
-    )
-}

package/src/components/swatch-picker/examples/swatch-picker-usage.tsx

@@ -1,39 +0,0 @@
-import { SwatchPicker } from "@passui/react"
-import { useState } from "react"
-
-export function SwatchPickerUsage() {
-    const [colour, setColour] = useState("sky")
-    return (
-        <SwatchPicker
-            label="Label colour"
-            value={colour}
-            onChange={setColour}
-            options={[
-                {
-                    value: "sky",
-                    label: "Sky",
-                    color: "#9fc3ec",
-                    ink: "#1f4f86",
-                },
-                {
-                    value: "mint",
-                    label: "Mint",
-                    color: "#a7d8bd",
-                    ink: "#1f6644",
-                },
-                {
-                    value: "sun",
-                    label: "Sun",
-                    color: "#f3cf6b",
-                    ink: "#7a5600",
-                },
-                {
-                    value: "rose",
-                    label: "Rose",
-                    color: "#f0b3be",
-                    ink: "#8c2f45",
-                },
-            ]}
-        />
-    )
-}

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