@passui/react 0.1.16 → 0.1.19

package/src/components/sidebar/sidebar.docs.tsx

@@ -1,135 +0,0 @@
-import { SidebarUnread } from "./examples/sidebar-unread"
-import {
-    InboxIcon,
-    SentIcon,
-    StarIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { SidebarGroups } from "./examples/sidebar-groups"
-import { SidebarShowcase } from "./examples/sidebar-showcase"
-import { SidebarUsage } from "./examples/sidebar-usage"
-import {
-    SidebarItemContent,
-    SidebarSection,
-    sidebarItemClass,
-} from "./sidebar"
-
-// Rows are the app's own links dressed by sidebarItemClass and
-// SidebarItemContent, so the playground switches counts on and the
-// snippet writes the rows.
-type DemoProps = {
-    title: string
-    counts: boolean
-}
-
-const items = [
-    {
-        id: "inbox",
-        label: "Inbox",
-        icon: InboxIcon,
-        count: 12,
-    },
-    {
-        id: "starred",
-        label: "Starred",
-        icon: StarIcon,
-        count: 3,
-    },
-    { id: "sent", label: "Sent", icon: SentIcon, count: 0 },
-]
-
-function SidebarDemo({ title, counts }: DemoProps) {
-    const [active, setActive] = useState("inbox")
-    return (
-        <nav aria-label="Mail" className="w-56">
-            <SidebarSection title={title}>
-                {items.map((item) => (
-                    <a
-                        key={item.id}
-                        href={`#${item.id}`}
-                        aria-current={
-                            item.id === active
-                                ? "page"
-                                : undefined
-                        }
-                        className={sidebarItemClass(
-                            item.id === active
-                        )}
-                        onClick={(event) => {
-                            event.preventDefault()
-                            setActive(item.id)
-                        }}
-                    >
-                        <SidebarItemContent
-                            active={item.id === active}
-                            count={
-                                counts
-                                    ? item.count
-                                    : undefined
-                            }
-                            icon={
-                                <HugeiconsIcon
-                                    icon={item.icon}
-                                    size={18}
-                                />
-                            }
-                        >
-                            {item.label}
-                        </SidebarItemContent>
-                    </a>
-                ))}
-            </SidebarSection>
-        </nav>
-    )
-}
-
-export const sidebarDocs = defineDocs<DemoProps>()({
-    slug: "sidebar",
-    name: "SidebarSection",
-    importPath: "@passui/react/sidebar",
-    controls: {
-        title: {
-            kind: "text",
-            default: "Mailboxes",
-            required: true,
-        },
-        counts: { kind: "boolean", default: true },
-    },
-    render: (values) => <SidebarDemo {...values} />,
-    childrenSnippet: ({ counts }) => ({
-        imports: [
-            'import { InboxIcon } from "@hugeicons/core-free-icons"',
-            'import { HugeiconsIcon } from "@hugeicons/react"',
-            'import { SidebarItemContent, sidebarItemClass } from "@passui/react/sidebar"',
-            'import { Link } from "@tanstack/react-router"',
-        ],
-        omit: ["counts"],
-        children: [
-            "",
-            '    <Link to="/inbox">',
-            "        {({ isActive }) => (",
-            "            <span className={sidebarItemClass(isActive)}>",
-            "                <SidebarItemContent",
-            "                    active={isActive}",
-            ...(counts
-                ? ["                    count={12}"]
-                : []),
-            "                    icon={<HugeiconsIcon icon={InboxIcon} size={18} />}",
-            "                >",
-            "                    Inbox",
-            "                </SidebarItemContent>",
-            "            </span>",
-            "        )}",
-            "    </Link>",
-            "",
-        ].join("\n"),
-    }),
-    usage: SidebarUsage,
-    showcase: SidebarShowcase,
-    examples: [
-        { id: "groups", component: SidebarGroups },
-        { id: "unread", component: SidebarUnread },
-    ],
-})

package/src/components/stat-tile/examples/stat-tile-filters.tsx

@@ -1,32 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-import { useState } from "react"
-
-const filters = [
-    { id: "all", label: "All requests", value: 42 },
-    { id: "open", label: "Open", value: 7 },
-    { id: "waiting", label: "Waiting on you", value: 2 },
-]
-
-export function StatTileFilters() {
-    const [active, setActive] = useState("open")
-
-    return (
-        <div className="flex w-full max-w-xl flex-col gap-3">
-            <div className="grid grid-cols-3 gap-3">
-                {filters.map((filter) => (
-                    <StatTile
-                        key={filter.id}
-                        label={filter.label}
-                        value={filter.value}
-                        active={active === filter.id}
-                        onClick={() => setActive(filter.id)}
-                    />
-                ))}
-            </div>
-            <p className="text-center text-footnote text-label-secondary">
-                Showing:{" "}
-                {filters.find((f) => f.id === active)?.label}
-            </p>
-        </div>
-    )
-}

package/src/components/stat-tile/examples/stat-tile-grid.tsx

@@ -1,21 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-
-export function StatTileGrid() {
-    return (
-        <div className="grid w-full max-w-xl grid-cols-2 gap-3 sm:grid-cols-4">
-            <StatTile label="People" value={1284} />
-            <StatTile
-                label="Signed in now"
-                value={86}
-                caption="Across 3 apps"
-            />
-            <StatTile label="New today" value={12} />
-            <StatTile
-                label="Failed sign-ins"
-                value={3}
-                caption="In the last hour"
-                tone="critical"
-            />
-        </div>
-    )
-}

package/src/components/stat-tile/examples/stat-tile-showcase.tsx

@@ -1,52 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-import { useState } from "react"
-
-const tiles = [
-    {
-        id: "people",
-        label: "People",
-        value: 1284,
-        caption: "32 joined this week",
-    },
-    {
-        id: "sessions",
-        label: "Signed in now",
-        value: 86,
-        caption: "Across 41 devices",
-    },
-    {
-        id: "apps",
-        label: "Apps",
-        value: 12,
-        caption: "3 updated today",
-    },
-    {
-        id: "failures",
-        label: "Failed sign ins",
-        value: 3,
-        caption: "In the last hour",
-        critical: true,
-    },
-]
-
-export function StatTileShowcase() {
-    const [active, setActive] = useState("people")
-
-    return (
-        <div className="grid w-full max-w-lg grid-cols-2 gap-3">
-            {tiles.map((tile) => (
-                <StatTile
-                    key={tile.id}
-                    label={tile.label}
-                    value={tile.value}
-                    caption={tile.caption}
-                    tone={
-                        tile.critical ? "critical" : undefined
-                    }
-                    active={active === tile.id}
-                    onClick={() => setActive(tile.id)}
-                />
-            ))}
-        </div>
-    )
-}

package/src/components/stat-tile/examples/stat-tile-usage.tsx

@@ -1,13 +0,0 @@
-import { StatTile } from "@passui/react/stat-tile"
-
-export function StatTileUsage() {
-    return (
-        <div className="w-56">
-            <StatTile
-                label="Active people"
-                value={1284}
-                caption="This week"
-            />
-        </div>
-    )
-}

package/src/components/stat-tile/stat-tile.docs.tsx

@@ -1,60 +0,0 @@
-import { StatTileFilters } from "./examples/stat-tile-filters"
-import { StatTileGrid } from "./examples/stat-tile-grid"
-import { defineDocs } from "../../docs/types"
-import { StatTileShowcase } from "./examples/stat-tile-showcase"
-import { StatTileUsage } from "./examples/stat-tile-usage"
-import { StatTile } from "./stat-tile"
-
-type DemoProps = {
-    label: string
-    caption?: string
-    critical?: boolean
-    active?: boolean
-}
-
-export const statTileDocs = defineDocs<DemoProps>()({
-    slug: "stat-tile",
-    name: "StatTile",
-    importPath: "@passui/react/stat-tile",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Failed sign ins",
-            required: true,
-        },
-        caption: {
-            kind: "text",
-            default: "In the last hour",
-        },
-        critical: { kind: "boolean", default: true },
-        active: { kind: "boolean", default: false },
-    },
-    render: ({ critical, ...values }) => (
-        <div className="w-56">
-            <StatTile
-                {...values}
-                value={3}
-                tone={critical ? "critical" : undefined}
-            />
-        </div>
-    ),
-    childrenSnippet: ({ critical }) => ({
-        imports: [],
-        children: "",
-        omit: ["critical"],
-        expressionProps: {
-            value: "3",
-            ...(critical ? { tone: '"critical"' } : {}),
-        },
-    }),
-    usage: StatTileUsage,
-    showcase: StatTileShowcase,
-    examples: [
-        { id: "grid", component: StatTileGrid },
-        {
-            id: "filters",
-            component: StatTileFilters,
-            playground: { active: true },
-        },
-    ],
-})

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",
-                },
-            ]}
-        />
-    )
-}