@passui/react 0.0.0-stage → 0.1.15

package/src/components/popover/examples/popover-help.tsx

@@ -0,0 +1,57 @@
+import { InformationCircleIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { IconButton } from "@passui/react/icon-button"
+import { Popover } from "@passui/react/popover"
+import { TextField } from "@passui/react/text-field"
+import { useDismiss } from "@passui/react/use-dismiss"
+import { useRef, useState } from "react"
+
+export function PopoverHelp() {
+    const [open, setOpen] = useState(false)
+    const [uri, setUri] = useState(
+        "https://app.example.com/callback"
+    )
+    const anchor = useRef<HTMLDivElement>(null)
+    useDismiss(anchor, open, () => setOpen(false))
+
+    return (
+        <div className="flex h-72 w-full max-w-sm flex-col gap-2">
+            <TextField
+                label="Redirect URI"
+                value={uri}
+                onChange={(event) =>
+                    setUri(event.target.value)
+                }
+                action={
+                    <div ref={anchor} className="relative">
+                        <IconButton
+                            label="What's a redirect URI?"
+                            size="icon-xs"
+                            variant="ghost"
+                            aria-expanded={open}
+                            onClick={() => setOpen(!open)}
+                        >
+                            <HugeiconsIcon
+                                icon={InformationCircleIcon}
+                                size={18}
+                            />
+                        </IconButton>
+                        <Popover
+                            open={open}
+                            origin="top-right"
+                            role="dialog"
+                            aria-label="Redirect URI"
+                            className="top-full right-0 mt-2 w-64 p-4"
+                        >
+                            <p className="text-footnote text-label">
+                                Where Pass sends people back
+                                after they sign in. It must
+                                match your app exactly.
+                            </p>
+                        </Popover>
+                    </div>
+                }
+            />
+        </div>
+    )
+}

package/src/components/popover/examples/popover-menu.tsx

@@ -0,0 +1,51 @@
+import { Button } from "@passui/react/button"
+import { Popover } from "@passui/react/popover"
+import { useDismiss } from "@passui/react/use-dismiss"
+import { toast } from "@passui/react"
+import { useRef, useState } from "react"
+
+const actions = [
+    "Duplicate",
+    "Move to folder",
+    "Export as PDF",
+]
+
+export function PopoverMenu() {
+    const [open, setOpen] = useState(false)
+    const anchor = useRef<HTMLDivElement>(null)
+    useDismiss(anchor, open, () => setOpen(false))
+
+    return (
+        <div ref={anchor} className="relative">
+            <Button
+                variant="secondary"
+                aria-haspopup="menu"
+                aria-expanded={open}
+                onClick={() => setOpen(!open)}
+            >
+                More
+            </Button>
+            <Popover
+                open={open}
+                origin="top-right"
+                role="menu"
+                className="top-full right-0 mt-2 flex w-56 flex-col p-1.5"
+            >
+                {actions.map((action) => (
+                    <button
+                        key={action}
+                        type="button"
+                        role="menuitem"
+                        className="rounded-3xl px-3 py-2 text-start text-subheadline text-label hover:bg-fill"
+                        onClick={() => {
+                            setOpen(false)
+                            toast(action)
+                        }}
+                    >
+                        {action}
+                    </button>
+                ))}
+            </Popover>
+        </div>
+    )
+}

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

@@ -0,0 +1,61 @@
+import { Button } from "@passui/react/button"
+import { Popover } from "@passui/react/popover"
+import {
+    ProfileImage,
+    ProfileImageContent,
+    ProfileImageFallback,
+} from "@passui/react/profile-image"
+import { useDismiss } from "@passui/react/use-dismiss"
+import { useRef, useState } from "react"
+
+export function PopoverShowcase() {
+    const [open, setOpen] = useState(true)
+    const anchor = useRef<HTMLDivElement>(null)
+    useDismiss(anchor, open, () => setOpen(false))
+
+    return (
+        <div className="flex h-80 w-full max-w-sm justify-end">
+            <div ref={anchor} className="relative">
+                <button
+                    type="button"
+                    aria-label="Account"
+                    aria-expanded={open}
+                    onClick={() => setOpen(!open)}
+                    className="rounded-full"
+                >
+                    <ProfileImage className="size-11">
+                        <ProfileImageContent src="/avatars/aiko.svg" />
+                        <ProfileImageFallback>
+                            AK
+                        </ProfileImageFallback>
+                    </ProfileImage>
+                </button>
+                <Popover
+                    open={open}
+                    origin="top-right"
+                    role="dialog"
+                    aria-label="Account"
+                    className="top-full right-0 mt-2 flex w-64 flex-col items-center gap-3 p-5 text-center"
+                >
+                    <ProfileImage className="size-16 text-title3">
+                        <ProfileImageContent src="/avatars/aiko.svg" />
+                        <ProfileImageFallback>
+                            AK
+                        </ProfileImageFallback>
+                    </ProfileImage>
+                    <div className="flex flex-col">
+                        <span className="text-headline font-semibold text-label">
+                            Aiko Kamado
+                        </span>
+                        <span className="text-footnote text-label-secondary">
+                            aiko@example.com
+                        </span>
+                    </div>
+                    <Button variant="secondary" size="sm">
+                        Manage your account
+                    </Button>
+                </Popover>
+            </div>
+        </div>
+    )
+}

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

@@ -0,0 +1,31 @@
+import { Button } from "@passui/react/button"
+import { Popover } from "@passui/react/popover"
+import { useDismiss } from "@passui/react/use-dismiss"
+import { useRef, useState } from "react"
+
+export function PopoverUsage() {
+    const [open, setOpen] = useState(false)
+    const anchor = useRef<HTMLDivElement>(null)
+    useDismiss(anchor, open, () => setOpen(false))
+
+    return (
+        <div ref={anchor} className="relative">
+            <Button
+                variant="secondary"
+                aria-expanded={open}
+                onClick={() => setOpen(!open)}
+            >
+                What's this?
+            </Button>
+            <Popover
+                open={open}
+                className="top-full left-0 mt-2 w-64 p-4"
+            >
+                <p className="text-callout text-label">
+                    A passkey signs you in with your face,
+                    fingerprint or screen lock.
+                </p>
+            </Popover>
+        </div>
+    )
+}

package/src/components/popover/popover.docs.tsx

@@ -0,0 +1,84 @@
+import { PopoverHelp } from "./examples/popover-help"
+import { useRef, useState } from "react"
+import { Button } from "../button/button"
+import { defineDocs } from "../../docs/types"
+import { useDismiss } from "../../hooks/use-dismiss"
+import { PopoverMenu } from "./examples/popover-menu"
+import { PopoverShowcase } from "./examples/popover-showcase"
+import { PopoverUsage } from "./examples/popover-usage"
+import { Popover, type PopoverProps } from "./popover"
+
+type DemoProps = Pick<PopoverProps, "origin">
+
+function PopoverDemo({ origin }: DemoProps) {
+    const [open, setOpen] = useState(false)
+    const anchor = useRef<HTMLDivElement>(null)
+    useDismiss(anchor, open, () => setOpen(false))
+    return (
+        <div ref={anchor} className="relative">
+            <Button
+                variant="secondary"
+                aria-expanded={open}
+                onClick={() => setOpen(!open)}
+            >
+                Open popover
+            </Button>
+            <Popover
+                open={open}
+                origin={origin}
+                className={
+                    origin === "top-right"
+                        ? "top-full right-0 mt-2 w-60 p-4"
+                        : "top-full left-0 mt-2 w-60 p-4"
+                }
+            >
+                <p className="text-callout text-label">
+                    Grows from its {origin ?? "top-left"}{" "}
+                    corner. Escape or a click outside closes
+                    it.
+                </p>
+            </Popover>
+        </div>
+    )
+}
+
+export const popoverDocs = defineDocs<PopoverProps>()({
+    slug: "popover",
+    name: "Popover",
+    importPath: "@passui/react/popover",
+    controls: {
+        origin: {
+            kind: "select",
+            options: { "top-left": true, "top-right": true },
+            default: "top-left",
+        },
+    },
+    render: (values) => <PopoverDemo {...values} />,
+    childrenSnippet: ({ origin }) => ({
+        imports: [
+            'import { useRef, useState } from "react"',
+            'import { useDismiss } from "@passui/react/use-dismiss"',
+        ],
+        setup: [
+            "const [open, setOpen] = useState(false)",
+            "const anchor = useRef<HTMLDivElement>(null)",
+            "useDismiss(anchor, open, () => setOpen(false))",
+        ],
+        expressionProps: { open: "open" },
+        extraProps: {
+            className:
+                origin === "top-right"
+                    ? "top-full right-0 mt-2 w-60 p-4"
+                    : "top-full left-0 mt-2 w-60 p-4",
+        },
+        children:
+            "\n    {/* inside a relative parent with ref={anchor} */}\n",
+    }),
+    usage: PopoverUsage,
+    showcase: PopoverShowcase,
+    examples: [
+        { id: "menu", component: PopoverMenu },
+        { id: "help", component: PopoverHelp },
+    ],
+    previewHeight: 320,
+})

package/src/components/popover/popover.tsx

@@ -0,0 +1,138 @@
+import {
+    AnimatePresence,
+    type HTMLMotionProps,
+    motion,
+    useReducedMotion,
+} from "motion/react"
+import { useLayoutEffect, useRef, useState } from "react"
+import { cn } from "../../lib/class-names"
+import { screenEdges } from "../../lib/screen-edges"
+import { popoverMotion } from "../../motion/transitions"
+
+export type PopoverOrigin = "top-left" | "top-right"
+
+export interface PopoverProps extends HTMLMotionProps<"div"> {
+    open: boolean
+    /** Which corner the popover grows from. */
+    origin?: PopoverOrigin
+}
+
+interface PopoverFit {
+    shift: number
+    maxWidth?: number
+    maxHeight?: number
+}
+
+/**
+ * A glass surface that springs open from its anchor. Position it with
+ * `className` (it is absolutely positioned within a relative parent); it
+ * moves itself back inside the screen if that would cross an edge, and
+ * keeps checking while the viewport resizes or anything scrolls.
+ */
+export function Popover({ open, ...props }: PopoverProps) {
+    return (
+        <AnimatePresence>
+            {open && <OpenPopover {...props} />}
+        </AnimatePresence>
+    )
+}
+
+function OpenPopover({
+    origin = "top-left",
+    className,
+    style,
+    children,
+    ...props
+}: Omit<PopoverProps, "open">) {
+    const ref = useRef<HTMLDivElement>(null)
+    const reducedMotion = useReducedMotion()
+    const [fit, setFit] = useState<PopoverFit>({ shift: 0 })
+
+    useLayoutEffect(() => {
+        const refit = () => {
+            const element = ref.current
+            if (!element) return
+            // Where it sits once open: measured without the opening scale, before paint.
+            const transform = element.style.transform
+            element.style.transform = "none"
+            const rect = element.getBoundingClientRect()
+            element.style.transform = transform
+            const edges = screenEdges()
+            const right = window.innerWidth - edges.right
+            let shift = 0
+            if (rect.right > right) shift = right - rect.right
+            if (rect.left + shift < edges.left)
+                shift = edges.left - rect.left
+            const room =
+                window.innerHeight - edges.bottom - rect.top
+            setFit({
+                shift,
+                maxWidth:
+                    window.innerWidth -
+                    edges.left -
+                    edges.right,
+                maxHeight:
+                    rect.height > room
+                        ? Math.max(room, 0)
+                        : undefined,
+            })
+        }
+        refit()
+        const viewport = window.visualViewport
+        viewport?.addEventListener("resize", refit)
+        viewport?.addEventListener("scroll", refit)
+        window.addEventListener("resize", refit)
+        window.addEventListener("scroll", refit, true)
+        return () => {
+            viewport?.removeEventListener("resize", refit)
+            viewport?.removeEventListener("scroll", refit)
+            window.removeEventListener("resize", refit)
+            window.removeEventListener("scroll", refit, true)
+        }
+    }, [])
+
+    return (
+        <motion.div
+            ref={ref}
+            {...popoverMotion}
+            initial={
+                reducedMotion
+                    ? { opacity: 0 }
+                    : popoverMotion.initial
+            }
+            animate={
+                reducedMotion
+                    ? { opacity: 1 }
+                    : popoverMotion.animate
+            }
+            exit={
+                reducedMotion
+                    ? { opacity: 0 }
+                    : popoverMotion.exit
+            }
+            transition={
+                reducedMotion
+                    ? { duration: 0 }
+                    : popoverMotion.transition
+            }
+            style={{
+                transformOrigin:
+                    origin === "top-left"
+                        ? "0% 0%"
+                        : "100% 0%",
+                x: fit.shift,
+                maxWidth: fit.maxWidth,
+                maxHeight: fit.maxHeight,
+                overflowY: fit.maxHeight ? "auto" : undefined,
+                ...style,
+            }}
+            className={cn(
+                "glass-menu absolute z-40 rounded-5xl",
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </motion.div>
+    )
+}

package/src/components/profile-image/examples/profile-image-fallbacks.tsx

@@ -0,0 +1,29 @@
+import {
+    ProfileImage,
+    ProfileImageContent,
+    ProfileImageFallback,
+} from "@passui/react/profile-image"
+
+export function ProfileImageFallbacks() {
+    return (
+        <div className="flex items-center gap-4">
+            <ProfileImage className="size-11">
+                <ProfileImageContent src="/avatars/kenji.svg" />
+                <ProfileImageFallback>
+                    KM
+                </ProfileImageFallback>
+            </ProfileImage>
+            <ProfileImage className="size-11">
+                <ProfileImageContent src="/avatars/missing.png" />
+                <ProfileImageFallback>
+                    MP
+                </ProfileImageFallback>
+            </ProfileImage>
+            <ProfileImage className="size-11">
+                <ProfileImageFallback>
+                    JS
+                </ProfileImageFallback>
+            </ProfileImage>
+        </div>
+    )
+}

package/src/components/profile-image/examples/profile-image-group.tsx

@@ -0,0 +1,34 @@
+import {
+    ProfileImage,
+    ProfileImageContent,
+    ProfileImageFallback,
+} from "@passui/react/profile-image"
+
+const people = [
+    { initials: "AK", src: "/avatars/aiko.svg" },
+    { initials: "KM", src: "/avatars/kenji.svg" },
+    { initials: "MP", src: "/avatars/mira.svg" },
+]
+
+export function ProfileImageGroup() {
+    return (
+        <div className="flex items-center">
+            {people.map((person) => (
+                <ProfileImage
+                    key={person.initials}
+                    className="-ms-2 size-9 ring-2 ring-background first:ms-0"
+                >
+                    <ProfileImageContent src={person.src} />
+                    <ProfileImageFallback>
+                        {person.initials}
+                    </ProfileImageFallback>
+                </ProfileImage>
+            ))}
+            <ProfileImage className="-ms-2 size-9 ring-2 ring-background">
+                <ProfileImageFallback>
+                    +4
+                </ProfileImageFallback>
+            </ProfileImage>
+        </div>
+    )
+}

package/src/components/profile-image/examples/profile-image-showcase.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@passui/react/button"
+import {
+    ProfileImage,
+    ProfileImageContent,
+    ProfileImageFallback,
+} from "@passui/react/profile-image"
+
+export function ProfileImageShowcase() {
+    return (
+        <div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-4xl bg-elevated p-6 text-center shadow-sm ring-1 ring-separator/60">
+            <ProfileImage className="size-20 text-title3">
+                <ProfileImageContent src="/avatars/aiko.svg" />
+                <ProfileImageFallback>
+                    AK
+                </ProfileImageFallback>
+            </ProfileImage>
+            <div className="flex flex-col gap-0.5">
+                <h2 className="text-headline font-semibold text-label">
+                    Aiko Kamado
+                </h2>
+                <p className="text-footnote text-label-secondary">
+                    aiko@example.com
+                </p>
+            </div>
+            <Button variant="secondary" size="sm">
+                Change photo
+            </Button>
+        </div>
+    )
+}

package/src/components/profile-image/examples/profile-image-usage.tsx

@@ -0,0 +1,14 @@
+import {
+    ProfileImage,
+    ProfileImageContent,
+    ProfileImageFallback,
+} from "@passui/react/profile-image"
+
+export function ProfileImageUsage() {
+    return (
+        <ProfileImage className="size-11">
+            <ProfileImageContent src="/avatars/aiko.svg" />
+            <ProfileImageFallback>AK</ProfileImageFallback>
+        </ProfileImage>
+    )
+}

package/src/components/profile-image/profile-image.docs.tsx

@@ -0,0 +1,81 @@
+import { jsxText } from "../../docs/snippet"
+import { defineDocs } from "../../docs/types"
+import { ProfileImageFallbacks } from "./examples/profile-image-fallbacks"
+import { ProfileImageGroup } from "./examples/profile-image-group"
+import { ProfileImageShowcase } from "./examples/profile-image-showcase"
+import { ProfileImageUsage } from "./examples/profile-image-usage"
+import {
+    ProfileImage,
+    ProfileImageContent,
+    ProfileImageFallback,
+} from "./profile-image"
+
+// Size is a class name on ProfileImage, and the photo and initials are
+// its children; the snippet writes all three itself.
+type DemoProps = {
+    size: "small" | "medium" | "large"
+    photo: boolean
+    initials: string
+}
+
+const sizes = {
+    small: "size-7",
+    medium: "size-11",
+    large: "size-20 text-title3",
+}
+
+export const profileImageDocs = defineDocs<DemoProps>()({
+    slug: "profile-image",
+    name: "ProfileImage",
+    importPath: "@passui/react/profile-image",
+    controls: {
+        size: {
+            kind: "select",
+            options: {
+                small: true,
+                medium: true,
+                large: true,
+            },
+            default: "medium",
+        },
+        photo: { kind: "boolean", default: true },
+        initials: { kind: "text", default: "AK" },
+    },
+    render: ({ size, photo, initials }) => (
+        <ProfileImage className={sizes[size]}>
+            <ProfileImageContent
+                src={photo ? "/avatars/aiko.svg" : undefined}
+            />
+            <ProfileImageFallback>
+                {initials}
+            </ProfileImageFallback>
+        </ProfileImage>
+    ),
+    childrenSnippet: ({ size, photo, initials }) => ({
+        imports: [
+            'import { ProfileImageContent, ProfileImageFallback } from "@passui/react/profile-image"',
+        ],
+        omit: ["size", "photo", "initials"],
+        extraProps: { className: sizes[size] },
+        children: [
+            "",
+            ...(photo
+                ? [
+                      '    <ProfileImageContent src="/avatars/aiko.svg" />',
+                  ]
+                : []),
+            `    <ProfileImageFallback>${jsxText(initials)}</ProfileImageFallback>`,
+            "",
+        ].join("\n"),
+    }),
+    usage: ProfileImageUsage,
+    showcase: ProfileImageShowcase,
+    examples: [
+        {
+            id: "fallbacks",
+            component: ProfileImageFallbacks,
+            playground: { photo: false },
+        },
+        { id: "group", component: ProfileImageGroup },
+    ],
+})