@passui/react 0.0.0-stage → 0.1.15

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

@@ -0,0 +1,68 @@
+import type { ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+export type StatTileTone = "critical"
+
+type StatTileProps = {
+    label: string
+    value: number
+    /** A quiet line under the number, like "3 signed in now". */
+    caption?: ReactNode
+    /** Turns the number red once it's above zero. */
+    tone?: StatTileTone
+    /** Makes the tile a toggle, e.g. a filter. */
+    onClick?: () => void
+    active?: boolean
+}
+
+/** One number with its label, optionally a toggle. */
+export function StatTile({
+    label,
+    value,
+    caption,
+    tone,
+    onClick,
+    active = false,
+}: StatTileProps) {
+    const body = (
+        <>
+            <span className="text-xs text-muted-foreground">
+                {label}
+            </span>
+            <span
+                className={cn(
+                    "text-lg font-semibold tabular-nums tracking-tight",
+                    tone === "critical" &&
+                        value > 0 &&
+                        "text-destructive"
+                )}
+            >
+                {value.toLocaleString("en-US")}
+            </span>
+            {caption && (
+                <span className="text-xs text-muted-foreground">
+                    {caption}
+                </span>
+            )}
+        </>
+    )
+    const className =
+        "flex min-w-0 flex-col gap-1 rounded-2xl border border-border/35 bg-card p-4 text-left shadow-xs"
+
+    if (!onClick)
+        return <div className={className}>{body}</div>
+    return (
+        <button
+            type="button"
+            aria-pressed={active}
+            onClick={onClick}
+            className={cn(
+                className,
+                "ring-1 ring-transparent transition-colors hover:bg-muted/60",
+                active && "bg-muted/70 ring-foreground/15"
+            )}
+        >
+            {body}
+        </button>
+    )
+}

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

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

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

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

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

@@ -0,0 +1,43 @@
+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/status-indicator/status-indicator.tsx

@@ -0,0 +1,35 @@
+import { cn } from "../../lib/class-names"
+
+const dots = {
+    saved: "bg-success",
+    syncing: "bg-warning animate-pulse",
+    offline: "bg-label-tertiary",
+} as const
+
+export function StatusIndicator({
+    state,
+    children,
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLSpanElement> & {
+    state: keyof typeof dots
+    children: React.ReactNode
+}) {
+    return (
+        <span
+            className={cn(
+                "flex items-center gap-1.5 text-footnote text-label-tertiary",
+                className
+            )}
+            {...props}
+        >
+            <span
+                className={cn(
+                    "size-[7px] rounded-full",
+                    dots[state]
+                )}
+            />
+            {children}
+        </span>
+    )
+}

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

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

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

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

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

@@ -0,0 +1,60 @@
+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/swatch-picker/swatch-picker.tsx

@@ -0,0 +1,96 @@
+import { motion } from "motion/react"
+import { useId } from "react"
+import { CheckIcon } from "../../icons/icons"
+import { cn } from "../../lib/class-names"
+import { haptic } from "../../lib/haptics"
+import { spring } from "../../motion/transitions"
+
+/** Colour swatches with a check on the chosen one. */
+export function SwatchPicker<T extends string>({
+    value,
+    options,
+    onChange,
+    label,
+}: {
+    value: T
+    /** `ink` colours the check drawn on the swatch. */
+    options: Array<{
+        value: T
+        label: string
+        color: string
+        ink: string
+    }>
+    onChange: (value: T) => void
+    label: string
+}) {
+    const name = useId()
+    return (
+        <fieldset className="flex flex-wrap gap-3">
+            <legend className="sr-only">{label}</legend>
+            {options.map((option) => {
+                const selected = option.value === value
+                return (
+                    <label
+                        key={option.value}
+                        className="group flex cursor-pointer flex-col items-center gap-1.5"
+                    >
+                        <input
+                            type="radio"
+                            name={name}
+                            value={option.value}
+                            checked={selected}
+                            onChange={() => {
+                                haptic("selection")
+                                onChange(option.value)
+                            }}
+                            className="peer sr-only"
+                        />
+                        <span
+                            className={cn(
+                                "flex size-8 items-center justify-center rounded-full ring-offset-1 ring-offset-elevated transition-[box-shadow,transform] duration-fast group-active:scale-95 peer-focus-visible:ring-2 peer-focus-visible:ring-accent",
+                                selected
+                                    ? "ring-[1.5px] ring-label/70"
+                                    : "ring-0 group-hover:ring-[1.5px] group-hover:ring-separator"
+                            )}
+                            style={{
+                                background: option.color,
+                            }}
+                        >
+                            {selected && (
+                                <motion.span
+                                    initial={{
+                                        scale: 0.4,
+                                        opacity: 0,
+                                    }}
+                                    animate={{
+                                        scale: 1,
+                                        opacity: 1,
+                                    }}
+                                    transition={spring.bouncy}
+                                >
+                                    <CheckIcon
+                                        size={16}
+                                        strokeWidth={2.6}
+                                        style={{
+                                            color: option.ink,
+                                        }}
+                                    />
+                                </motion.span>
+                            )}
+                        </span>
+                        <span
+                            className={cn(
+                                "text-caption2",
+                                selected
+                                    ? "font-semibold text-label"
+                                    : "text-label-tertiary"
+                            )}
+                        >
+                            {option.label}
+                        </span>
+                    </label>
+                )
+            })}
+        </fieldset>
+    )
+}

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

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