@passui/react 0.1.17 → 0.1.20

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

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

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

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

@@ -1,84 +0,0 @@
-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/profile-image/examples/profile-image-fallbacks.tsx

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

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

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

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

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

package/src/components/search-field/examples/search-field-filter.tsx

@@ -1,53 +0,0 @@
-import {
-    LabeledContent,
-    SearchField,
-    Section,
-} from "@passui/react"
-import { useState } from "react"
-
-const apps = [
-    { name: "Pass console", people: 12 },
-    { name: "Accounts", people: 1284 },
-    { name: "Notables", people: 431 },
-    { name: "Showcase", people: 58 },
-]
-
-export function SearchFieldFilter() {
-    const [query, setQuery] = useState("")
-    const matches = apps.filter((app) =>
-        app.name
-            .toLowerCase()
-            .includes(query.trim().toLowerCase())
-    )
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-3">
-            <SearchField
-                aria-label="Search applications"
-                placeholder="Search applications"
-                value={query}
-                onChange={(event) =>
-                    setQuery(event.target.value)
-                }
-            />
-            <Section>
-                {matches.length ? (
-                    matches.map((app) => (
-                        <LabeledContent
-                            key={app.name}
-                            label={app.name}
-                        >
-                            <span className="text-footnote text-label-secondary tabular-nums">
-                                {app.people} people
-                            </span>
-                        </LabeledContent>
-                    ))
-                ) : (
-                    <p className="px-4 py-6 text-center text-footnote text-label-secondary">
-                        No applications match “{query}”
-                    </p>
-                )}
-            </Section>
-        </div>
-    )
-}

package/src/components/search-field/examples/search-field-showcase.tsx

@@ -1,56 +0,0 @@
-import { SearchField } from "@passui/react"
-import { useState } from "react"
-
-const people = [
-    "Aiko Kamado",
-    "Ben Ito",
-    "Chiara Rossi",
-    "Dev Patel",
-    "Emma Laurent",
-    "Farah Haddad",
-]
-
-export function SearchFieldShowcase() {
-    const [query, setQuery] = useState("")
-    const results = people.filter((person) =>
-        person
-            .toLowerCase()
-            .includes(query.trim().toLowerCase())
-    )
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-3 rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <SearchField
-                aria-label="Search people"
-                placeholder="Search people"
-                value={query}
-                onChange={(event) =>
-                    setQuery(event.target.value)
-                }
-            />
-            <ul className="m-0 flex list-none flex-col p-0">
-                {results.map((person) => (
-                    <li
-                        key={person}
-                        className="flex items-center gap-3 rounded-2xl px-2 py-2 hover:bg-fill/60"
-                    >
-                        <span className="flex size-8 items-center justify-center rounded-full bg-accent-soft text-caption font-bold text-accent-text">
-                            {person
-                                .split(" ")
-                                .map((part) => part[0])
-                                .join("")}
-                        </span>
-                        <span className="text-subheadline text-label">
-                            {person}
-                        </span>
-                    </li>
-                ))}
-                {results.length === 0 && (
-                    <li className="px-2 py-6 text-center text-footnote text-label-secondary">
-                        No one matches “{query}”.
-                    </li>
-                )}
-            </ul>
-        </div>
-    )
-}

package/src/components/search-field/examples/search-field-toolbar.tsx

@@ -1,27 +0,0 @@
-import { SearchField } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { useState } from "react"
-
-export function SearchFieldToolbar() {
-    const [query, setQuery] = useState("")
-
-    return (
-        <div className="flex w-full max-w-lg items-center gap-2 rounded-4xl bg-elevated p-2 shadow-sm ring-1 ring-separator/60">
-            <SearchField
-                aria-label="Search people"
-                placeholder="Search people"
-                className="flex-1"
-                value={query}
-                onChange={(event) =>
-                    setQuery(event.target.value)
-                }
-            />
-            <Button variant="secondary" size="sm">
-                Filters
-            </Button>
-            <Button variant="accent" size="sm">
-                Invite
-            </Button>
-        </div>
-    )
-}

package/src/components/search-field/examples/search-field-usage.tsx

@@ -1,18 +0,0 @@
-import { SearchField } from "@passui/react"
-import { useState } from "react"
-
-export function SearchFieldUsage() {
-    const [query, setQuery] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <SearchField
-                aria-label="Search notes"
-                placeholder="Search notes"
-                value={query}
-                onChange={(event) =>
-                    setQuery(event.target.value)
-                }
-            />
-        </div>
-    )
-}

package/src/components/search-field/search-field.docs.tsx

@@ -1,58 +0,0 @@
-import { SearchFieldToolbar } from "./examples/search-field-toolbar"
-import { SearchFieldFilter } from "./examples/search-field-filter"
-import type { InputHTMLAttributes } from "react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { SearchFieldShowcase } from "./examples/search-field-showcase"
-import { SearchFieldUsage } from "./examples/search-field-usage"
-import { SearchField } from "./search-field"
-
-type SearchFieldProps = InputHTMLAttributes<HTMLInputElement>
-
-function SearchFieldDemo(
-    props: Pick<SearchFieldProps, "placeholder" | "disabled">
-) {
-    const [query, setQuery] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <SearchField
-                {...props}
-                aria-label="Search"
-                value={query}
-                onChange={(event) =>
-                    setQuery(event.target.value)
-                }
-            />
-        </div>
-    )
-}
-
-export const searchFieldDocs = defineDocs<SearchFieldProps>()(
-    {
-        slug: "search-field",
-        name: "SearchField",
-        importPath: "@passui/react",
-        controls: {
-            placeholder: { kind: "text", default: "Search" },
-            disabled: { kind: "boolean", default: false },
-        },
-        render: (values) => <SearchFieldDemo {...values} />,
-        childrenSnippet: () => ({
-            imports: ['import { useState } from "react"'],
-            setup: ['const [query, setQuery] = useState("")'],
-            children: "",
-            extraProps: { "aria-label": "Search" },
-            expressionProps: {
-                value: "query",
-                onChange:
-                    "(event) => setQuery(event.target.value)",
-            },
-        }),
-        usage: SearchFieldUsage,
-        showcase: SearchFieldShowcase,
-        examples: [
-            { id: "filter", component: SearchFieldFilter },
-            { id: "toolbar", component: SearchFieldToolbar },
-        ],
-    }
-)