@passui/react 0.0.0-stage → 0.1.15

package/src/components/toggle/examples/toggle-showcase.tsx

@@ -0,0 +1,59 @@
+import { LabeledContent, Section } from "@passui/react"
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function ToggleShowcase() {
+    const [airplane, setAirplane] = useState(false)
+    const [wifi, setWifi] = useState(true)
+    const [bluetooth, setBluetooth] = useState(true)
+    const [focus, setFocus] = useState(false)
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-6">
+            <Section title="Connections">
+                <LabeledContent label="Airplane mode">
+                    <Toggle
+                        label="Airplane mode"
+                        labelHidden
+                        checked={airplane}
+                        onChange={setAirplane}
+                    />
+                </LabeledContent>
+                <LabeledContent
+                    label="Wi-Fi"
+                    description={wifi ? "Home" : "Off"}
+                >
+                    <Toggle
+                        label="Wi-Fi"
+                        labelHidden
+                        checked={wifi}
+                        disabled={airplane}
+                        onChange={setWifi}
+                    />
+                </LabeledContent>
+                <LabeledContent label="Bluetooth">
+                    <Toggle
+                        label="Bluetooth"
+                        labelHidden
+                        checked={bluetooth}
+                        disabled={airplane}
+                        onChange={setBluetooth}
+                    />
+                </LabeledContent>
+            </Section>
+            <Section
+                title="Focus"
+                footer="Silences calls and alerts until you turn it off."
+            >
+                <LabeledContent label="Do not disturb">
+                    <Toggle
+                        label="Do not disturb"
+                        labelHidden
+                        checked={focus}
+                        onChange={setFocus}
+                    />
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

package/src/components/toggle/examples/toggle-usage.tsx

@@ -0,0 +1,13 @@
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function ToggleUsage() {
+    const [enabled, setEnabled] = useState(true)
+    return (
+        <Toggle
+            label="Wi-Fi"
+            checked={enabled}
+            onChange={setEnabled}
+        />
+    )
+}

package/src/components/toggle/toggle.docs.tsx

@@ -0,0 +1,69 @@
+import type { ComponentProps } from "react"
+import { useState } from "react"
+import { defineDocs } from "../../docs/types"
+import { ToggleCheckboxes } from "./examples/toggle-checkboxes"
+import { ToggleSettings } from "./examples/toggle-settings"
+import { ToggleShowcase } from "./examples/toggle-showcase"
+import { ToggleUsage } from "./examples/toggle-usage"
+import { Toggle } from "./toggle"
+
+type ToggleProps = ComponentProps<typeof Toggle>
+type DemoProps = Omit<ToggleProps, "checked" | "onChange">
+
+/** Holds its own state so the playground can flip it. */
+function ToggleDemo(props: DemoProps) {
+    const [checked, setChecked] = useState(true)
+    return (
+        <Toggle
+            {...props}
+            checked={checked}
+            onChange={setChecked}
+        />
+    )
+}
+
+export const toggleDocs = defineDocs<ToggleProps>()({
+    slug: "toggle",
+    name: "Toggle",
+    importPath: "@passui/react/toggle",
+    controls: {
+        style: {
+            kind: "select",
+            options: { switch: true, checkbox: true },
+            default: "switch",
+        },
+        disabled: { kind: "boolean", default: false },
+        mixed: { kind: "boolean", default: false },
+        labelHidden: { kind: "boolean", default: false },
+        label: {
+            kind: "text",
+            default: "Wi-Fi",
+            required: true,
+        },
+    },
+    render: (values) => <ToggleDemo {...values} />,
+    childrenSnippet: () => ({
+        imports: ['import { useState } from "react"'],
+        setup: [
+            "const [checked, setChecked] = useState(true)",
+        ],
+        children: "",
+        expressionProps: {
+            checked: "checked",
+            onChange: "setChecked",
+        },
+    }),
+    usage: ToggleUsage,
+    showcase: ToggleShowcase,
+    examples: [
+        { id: "settings", component: ToggleSettings },
+        {
+            id: "checkboxes",
+            component: ToggleCheckboxes,
+            playground: {
+                style: "checkbox",
+                label: "Remember me",
+            },
+        },
+    ],
+})

package/src/components/toggle/toggle.tsx

@@ -0,0 +1,85 @@
+import { motion } from "motion/react"
+import { useEffect, useRef } from "react"
+import { cn } from "../../lib/class-names"
+import { haptic } from "../../lib/haptics"
+import { spring } from "../../motion/transitions"
+
+export type ToggleStyle = "switch" | "checkbox"
+
+export function Toggle({
+    checked,
+    onChange,
+    label,
+    disabled,
+    style = "switch",
+    mixed = false,
+    labelHidden = false,
+}: {
+    checked: boolean
+    onChange: (checked: boolean) => void
+    label: string
+    /** Shown but not yet usable, as iOS dims a switch it can't change. */
+    disabled?: boolean
+    style?: ToggleStyle
+    mixed?: boolean
+    labelHidden?: boolean
+}) {
+    const input = useRef<HTMLInputElement>(null)
+    useEffect(() => {
+        if (input.current) input.current.indeterminate = mixed
+    }, [mixed])
+    if (style === "checkbox") {
+        return (
+            <label className="flex cursor-pointer items-center gap-3 text-subheadline">
+                <input
+                    ref={input}
+                    type="checkbox"
+                    aria-checked={mixed ? "mixed" : checked}
+                    checked={checked}
+                    disabled={disabled}
+                    onChange={(event) =>
+                        onChange(event.target.checked)
+                    }
+                    className={cn(
+                        "size-5 accent-accent",
+                        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text disabled:opacity-40"
+                    )}
+                />
+                <span
+                    className={
+                        labelHidden ? "sr-only" : undefined
+                    }
+                >
+                    {label}
+                </span>
+            </label>
+        )
+    }
+    return (
+        <button
+            type="button"
+            role="switch"
+            aria-checked={checked}
+            aria-label={label}
+            disabled={disabled}
+            onClick={() => {
+                haptic("selection")
+                onChange(!checked)
+            }}
+            className={cn(
+                "group/switch flex h-[30px] w-[50px] shrink-0 items-center rounded-full p-[2px] transition-colors duration-normal",
+                "shadow-[inset_0_1px_2px_rgb(0_0_0/0.10)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:opacity-45",
+                checked
+                    ? "justify-end bg-accent ring-1 ring-accent-text"
+                    : "justify-start bg-separator/80"
+            )}
+        >
+            {/* The thumb stretches while pressed, as on iOS. */}
+            <motion.span
+                layout
+                transition={spring.snappy}
+                className="h-[26px] w-[26px] rounded-full bg-white shadow-[0_0_0_0.5px_rgb(0_0_0/0.04),0_2px_4px_rgb(0_0_0/0.16),0_3px_8px_rgb(0_0_0/0.10)] transition-[width] duration-fast group-active/switch:w-[32px]"
+            />
+        </button>
+    )
+}

package/src/components/tooltip/examples/tooltip-icon-buttons.tsx

@@ -0,0 +1,27 @@
+import {
+    Copy01Icon,
+    Delete02Icon,
+    Share08Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { IconButton } from "@passui/react/icon-button"
+
+export function TooltipIconButtons() {
+    // IconButton shows its label as a tooltip by itself
+    return (
+        <div className="flex gap-2">
+            <IconButton label="Copy" variant="secondary">
+                <HugeiconsIcon icon={Copy01Icon} size={20} />
+            </IconButton>
+            <IconButton label="Share" variant="secondary">
+                <HugeiconsIcon icon={Share08Icon} size={20} />
+            </IconButton>
+            <IconButton label="Delete" variant="secondary">
+                <HugeiconsIcon
+                    icon={Delete02Icon}
+                    size={20}
+                />
+            </IconButton>
+        </div>
+    )
+}

package/src/components/tooltip/examples/tooltip-shortcuts.tsx

@@ -0,0 +1,38 @@
+import {
+    TextBoldIcon,
+    TextItalicIcon,
+    TextUnderlineIcon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { Button } from "@passui/react/button"
+
+const tools = [
+    { label: "Bold", keys: "⌘B", icon: TextBoldIcon },
+    { label: "Italic", keys: "⌘I", icon: TextItalicIcon },
+    {
+        label: "Underline",
+        keys: "⌘U",
+        icon: TextUnderlineIcon,
+    },
+]
+
+export function TooltipShortcuts() {
+    return (
+        <div className="flex gap-1 rounded-full bg-elevated p-1 shadow-sm ring-1 ring-separator/60">
+            {tools.map((tool) => (
+                <Button
+                    key={tool.label}
+                    variant="ghost"
+                    size="icon-sm"
+                    aria-label={tool.label}
+                    data-tooltip={`${tool.label}  ${tool.keys}`}
+                >
+                    <HugeiconsIcon
+                        icon={tool.icon}
+                        size={18}
+                    />
+                </Button>
+            ))}
+        </div>
+    )
+}

package/src/components/tooltip/examples/tooltip-showcase.tsx

@@ -0,0 +1,44 @@
+import {
+    Archive01Icon,
+    Delete02Icon,
+    MailReply01Icon,
+    StarIcon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { IconButton } from "@passui/react/icon-button"
+
+const actions = [
+    { label: "Reply", icon: MailReply01Icon },
+    { label: "Star", icon: StarIcon },
+    { label: "Archive", icon: Archive01Icon },
+    { label: "Delete", icon: Delete02Icon },
+]
+
+export function TooltipShowcase() {
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
+            <div className="flex items-center justify-between">
+                <span className="text-headline font-semibold text-label">
+                    Inbox
+                </span>
+                <div className="flex gap-1">
+                    {actions.map((action) => (
+                        <IconButton
+                            key={action.label}
+                            label={action.label}
+                            variant="ghost"
+                        >
+                            <HugeiconsIcon
+                                icon={action.icon}
+                                size={20}
+                            />
+                        </IconButton>
+                    ))}
+                </div>
+            </div>
+            <p className="m-0 text-callout text-label-secondary">
+                Hover an icon to see what it does.
+            </p>
+        </div>
+    )
+}

package/src/components/tooltip/examples/tooltip-usage.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@passui/react/button"
+
+export function TooltipUsage() {
+    // render one <TooltipHost /> near the root of your app
+    return (
+        <Button
+            variant="secondary"
+            data-tooltip="Saves a copy to your downloads"
+        >
+            Download
+        </Button>
+    )
+}

package/src/components/tooltip/tooltip-host.tsx

@@ -0,0 +1,156 @@
+import { AnimatePresence, motion } from "motion/react"
+import { useEffect, useState } from "react"
+
+interface Tip {
+    text: string
+    x: number
+    y: number
+    /** Shown above the element when there's no room below. */
+    above: boolean
+}
+
+const DELAY = 450
+/** Moving from one control to the next within this window shows at once. */
+const WARM_WINDOW = 600
+const MARGIN = 8
+
+/**
+ * Tooltips for any element with `data-tooltip`, on devices that can hover.
+ * One listener for the whole app: a short delay before the first, then
+ * instant while moving between controls, as on macOS.
+ */
+export function TooltipHost() {
+    const [tip, setTip] = useState<Tip | null>(null)
+
+    useEffect(() => {
+        if (
+            !window.matchMedia(
+                "(hover: hover) and (pointer: fine)"
+            ).matches
+        )
+            return
+        let timer: ReturnType<typeof setTimeout> | undefined
+        let current: Element | null = null
+        let lastShown = 0
+
+        const show = (element: Element) => {
+            const text = element.getAttribute("data-tooltip")
+            if (!text) return
+            const rect = element.getBoundingClientRect()
+            const above =
+                rect.bottom + 40 > window.innerHeight
+            setTip({
+                text,
+                x: rect.left + rect.width / 2,
+                y: above
+                    ? rect.top - MARGIN
+                    : rect.bottom + MARGIN,
+                above,
+            })
+            lastShown = Date.now()
+        }
+        const hide = () => {
+            clearTimeout(timer)
+            if (current) lastShown = Date.now()
+            current = null
+            setTip(null)
+        }
+        const onOver = (event: PointerEvent) => {
+            const element =
+                (event.target as Element | null)?.closest?.(
+                    "[data-tooltip]"
+                ) ?? null
+            if (element === current) return
+            clearTimeout(timer)
+            current = element
+            if (!element) {
+                setTip(null)
+                return
+            }
+            const warm = Date.now() - lastShown < WARM_WINDOW
+            if (warm) show(element)
+            else {
+                setTip(null)
+                timer = setTimeout(
+                    () =>
+                        current === element && show(element),
+                    DELAY
+                )
+            }
+        }
+
+        window.document.addEventListener(
+            "pointerover",
+            onOver
+        )
+        window.document.addEventListener(
+            "pointerdown",
+            hide,
+            true
+        )
+        window.document.addEventListener(
+            "keydown",
+            hide,
+            true
+        )
+        window.addEventListener("scroll", hide, true)
+        window.addEventListener("blur", hide)
+        return () => {
+            clearTimeout(timer)
+            window.document.removeEventListener(
+                "pointerover",
+                onOver
+            )
+            window.document.removeEventListener(
+                "pointerdown",
+                hide,
+                true
+            )
+            window.document.removeEventListener(
+                "keydown",
+                hide,
+                true
+            )
+            window.removeEventListener("scroll", hide, true)
+            window.removeEventListener("blur", hide)
+        }
+    }, [])
+
+    return (
+        <AnimatePresence>
+            {tip && (
+                <motion.div
+                    key={tip.text + tip.x}
+                    role="tooltip"
+                    className="pointer-events-none fixed z-[80] max-w-[240px] rounded-md bg-inverse px-2.5 py-1.5 text-center text-caption leading-tight font-medium text-on-inverse shadow-lg"
+                    style={{
+                        left: Math.min(
+                            Math.max(tip.x, 128),
+                            window.innerWidth - 128
+                        ),
+                        top: tip.y,
+                        translateX: "-50%",
+                        translateY: tip.above ? "-100%" : 0,
+                    }}
+                    initial={{
+                        opacity: 0,
+                        scale: 0.92,
+                        y: tip.above ? 4 : -4,
+                    }}
+                    animate={{ opacity: 1, scale: 1, y: 0 }}
+                    exit={{
+                        opacity: 0,
+                        transition: { duration: 0.08 },
+                    }}
+                    transition={{
+                        type: "spring",
+                        stiffness: 520,
+                        damping: 34,
+                    }}
+                >
+                    {tip.text}
+                </motion.div>
+            )}
+        </AnimatePresence>
+    )
+}

package/src/components/tooltip/tooltip.docs.tsx

@@ -0,0 +1,56 @@
+import { TooltipShortcuts } from "./examples/tooltip-shortcuts"
+import { Copy01Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { Button } from "../button/button"
+import { jsxAttribute, jsxText } from "../../docs/snippet"
+import { defineDocs } from "../../docs/types"
+import { TooltipIconButtons } from "./examples/tooltip-icon-buttons"
+import { TooltipShowcase } from "./examples/tooltip-showcase"
+import { TooltipUsage } from "./examples/tooltip-usage"
+
+// The host shows a tip for any element with data-tooltip; the playground
+// sets that attribute on a button.
+type DemoProps = {
+    tooltip: string
+}
+
+export const tooltipDocs = defineDocs<DemoProps>()({
+    slug: "tooltip",
+    name: "TooltipHost",
+    importPath: "@passui/react",
+    controls: {
+        tooltip: {
+            kind: "text",
+            default: "Copy to clipboard",
+        },
+    },
+    render: ({ tooltip }) => (
+        <Button variant="secondary" data-tooltip={tooltip}>
+            <HugeiconsIcon icon={Copy01Icon} size={18} />
+            Hover me
+        </Button>
+    ),
+    childrenSnippet: ({ tooltip }) => ({
+        imports: [
+            'import { Button } from "@passui/react/button"',
+        ],
+        element: "div",
+        omit: ["tooltip"],
+        children: [
+            "",
+            "    {/* once, near the root of your app */}",
+            "    <TooltipHost />",
+            `    <Button ${jsxAttribute("data-tooltip", tooltip)}>`,
+            `        ${jsxText("Copy")}`,
+            "    </Button>",
+            "",
+        ].join("\n"),
+    }),
+    usage: TooltipUsage,
+    showcase: TooltipShowcase,
+    examples: [
+        { id: "icon-buttons", component: TooltipIconButtons },
+        { id: "shortcuts", component: TooltipShortcuts },
+    ],
+    previewHeight: 200,
+})

package/src/components/view-controller/examples/view-controller-action.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@passui/react/button"
+import { ViewController } from "@passui/react/view-controller"
+
+export function ViewControllerAction() {
+    return (
+        <ViewController
+            className="py-6"
+            heading={
+                <ViewController.Heading
+                    title="Applications"
+                    description="Apps that sign people in with Pass."
+                    action={
+                        <Button
+                            variant="accent"
+                            size="sm"
+                            className="ms-auto"
+                        >
+                            New application
+                        </Button>
+                    }
+                />
+            }
+        >
+            <div className="h-24 rounded-3xl bg-fill/60" />
+        </ViewController>
+    )
+}

package/src/components/view-controller/examples/view-controller-settings.tsx

@@ -0,0 +1,31 @@
+import { LabeledContent, Section } from "@passui/react"
+import { ViewController } from "@passui/react/view-controller"
+
+export function ViewControllerSettings() {
+    return (
+        <div className="w-full max-w-lg rounded-4xl bg-background px-6 shadow-sm ring-1 ring-separator/60">
+            <ViewController
+                className="py-8"
+                heading={
+                    <ViewController.Heading
+                        title="Personal info"
+                        description="Your name and how to reach you."
+                    />
+                }
+            >
+                <Section title="Basics">
+                    <LabeledContent label="Name">
+                        <span className="text-subheadline text-label-secondary">
+                            Aiko Kamado
+                        </span>
+                    </LabeledContent>
+                    <LabeledContent label="Birthday">
+                        <span className="text-subheadline text-label-secondary">
+                            21 July
+                        </span>
+                    </LabeledContent>
+                </Section>
+            </ViewController>
+        </div>
+    )
+}

package/src/components/view-controller/examples/view-controller-showcase.tsx

@@ -0,0 +1,45 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { TextField } from "@passui/react/text-field"
+import { ViewController } from "@passui/react/view-controller"
+import { useState } from "react"
+
+export function ViewControllerShowcase() {
+    const [email, setEmail] = useState("")
+
+    return (
+        <div className="w-full max-w-sm rounded-4xl bg-elevated px-6 shadow-sm ring-1 ring-separator/60">
+            <ViewController
+                className="gap-6 py-8"
+                heading={
+                    <ViewController.Heading
+                        size="compact"
+                        title="Sign in"
+                        description="Use your Pass account."
+                    />
+                }
+            >
+                <form
+                    className="flex flex-col gap-4"
+                    onSubmit={(event) => {
+                        event.preventDefault()
+                        toast.success("Check your email")
+                    }}
+                >
+                    <TextField
+                        label="Email"
+                        type="email"
+                        placeholder="you@example.com"
+                        value={email}
+                        onChange={(event) =>
+                            setEmail(event.target.value)
+                        }
+                    />
+                    <Button type="submit" variant="accent">
+                        Continue
+                    </Button>
+                </form>
+            </ViewController>
+        </div>
+    )
+}