@passui/react 0.1.17 → 0.1.19

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

package/src/components/search-list/examples/search-list-dropdown.tsx

@@ -1,53 +0,0 @@
-import { toast } from "@passui/react"
-import {
-    SearchList,
-    SearchListEmpty,
-    SearchListField,
-    SearchListItem,
-    SearchListResults,
-} from "@passui/react/search-list"
-import { useState } from "react"
-
-const pages = [
-    "Profile",
-    "Password",
-    "Passkeys",
-    "Devices",
-    "Language",
-    "Privacy",
-]
-
-export function SearchListDropdown() {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <div className="h-72 w-full max-w-xs">
-            <SearchList open={open} className="w-full">
-                <SearchListField
-                    placeholder="Search your account"
-                    onFocus={() => setOpen(true)}
-                    // let a click on a result land before closing
-                    onBlur={() =>
-                        setTimeout(() => setOpen(false), 120)
-                    }
-                />
-                <SearchListResults className="glass-menu absolute inset-x-0 top-full z-10 mt-2 max-h-56 rounded-4xl">
-                    {pages.map((page) => (
-                        <SearchListItem
-                            key={page}
-                            value={page}
-                            onSelect={(value) =>
-                                toast(`Opened ${value}`)
-                            }
-                        >
-                            {page}
-                        </SearchListItem>
-                    ))}
-                    <SearchListEmpty className="px-3 py-4 text-footnote text-label-secondary">
-                        No pages found
-                    </SearchListEmpty>
-                </SearchListResults>
-            </SearchList>
-        </div>
-    )
-}

package/src/components/search-list/examples/search-list-groups.tsx

@@ -1,64 +0,0 @@
-import {
-    SearchList,
-    SearchListEmpty,
-    SearchListField,
-    SearchListGroup,
-    SearchListItem,
-    SearchListResults,
-} from "@passui/react/search-list"
-
-const groups = [
-    {
-        heading: "Security",
-        items: [
-            { value: "Password", keywords: ["sign in"] },
-            {
-                value: "Passkeys",
-                keywords: ["face", "touch"],
-            },
-            {
-                value: "Two-step verification",
-                keywords: ["2fa", "code"],
-            },
-        ],
-    },
-    {
-        heading: "Preferences",
-        items: [
-            { value: "Language", keywords: ["locale"] },
-            {
-                value: "Appearance",
-                keywords: ["dark", "theme"],
-            },
-        ],
-    },
-]
-
-export function SearchListGroups() {
-    return (
-        <SearchList className="w-full max-w-xs rounded-3xl bg-elevated p-2 ring-1 ring-separator/60">
-            <SearchListField placeholder="Try 2fa or dark" />
-            <SearchListResults className="mt-2 max-h-72">
-                {groups.map((group) => (
-                    <SearchListGroup
-                        key={group.heading}
-                        heading={group.heading}
-                    >
-                        {group.items.map((item) => (
-                            <SearchListItem
-                                key={item.value}
-                                value={item.value}
-                                keywords={item.keywords}
-                            >
-                                {item.value}
-                            </SearchListItem>
-                        ))}
-                    </SearchListGroup>
-                ))}
-                <SearchListEmpty className="px-3 py-6 text-center text-footnote text-label-secondary">
-                    Nothing matches that search
-                </SearchListEmpty>
-            </SearchListResults>
-        </SearchList>
-    )
-}

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

@@ -1,67 +0,0 @@
-import { toast } from "@passui/react"
-import {
-    SearchList,
-    SearchListEmpty,
-    SearchListField,
-    SearchListGroup,
-    SearchListItem,
-    SearchListResults,
-} from "@passui/react/search-list"
-
-const people = [
-    { name: "Aiko Kamado", role: "Design" },
-    { name: "Kenji Mori", role: "Engineering" },
-    { name: "Mira Patel", role: "Support" },
-]
-
-const actions = [
-    { name: "New project", keywords: ["create"] },
-    { name: "Invite people", keywords: ["team", "share"] },
-    { name: "Open settings", keywords: ["preferences"] },
-]
-
-export function SearchListShowcase() {
-    return (
-        <SearchList className="w-full max-w-sm rounded-4xl bg-elevated p-3 shadow-sm ring-1 ring-separator/60">
-            <SearchListField placeholder="Search people and actions" />
-            <SearchListResults className="mt-2 max-h-80">
-                <SearchListGroup heading="People">
-                    {people.map((person) => (
-                        <SearchListItem
-                            key={person.name}
-                            value={person.name}
-                            keywords={[person.role]}
-                            onSelect={(name) =>
-                                toast(`Opened ${name}`)
-                            }
-                        >
-                            <span className="flex-1 text-subheadline text-label">
-                                {person.name}
-                            </span>
-                            <span className="text-caption text-label-tertiary">
-                                {person.role}
-                            </span>
-                        </SearchListItem>
-                    ))}
-                </SearchListGroup>
-                <SearchListGroup heading="Actions">
-                    {actions.map((action) => (
-                        <SearchListItem
-                            key={action.name}
-                            value={action.name}
-                            keywords={action.keywords}
-                            onSelect={(name) => toast(name)}
-                        >
-                            <span className="text-subheadline text-label">
-                                {action.name}
-                            </span>
-                        </SearchListItem>
-                    ))}
-                </SearchListGroup>
-                <SearchListEmpty className="px-3 py-8 text-center text-footnote text-label-secondary">
-                    No people or actions match
-                </SearchListEmpty>
-            </SearchListResults>
-        </SearchList>
-    )
-}

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

@@ -1,27 +0,0 @@
-import {
-    SearchList,
-    SearchListEmpty,
-    SearchListField,
-    SearchListItem,
-    SearchListResults,
-} from "@passui/react/search-list"
-
-const fruits = ["Apple", "Banana", "Cherry", "Mango"]
-
-export function SearchListUsage() {
-    return (
-        <SearchList className="w-full max-w-xs">
-            <SearchListField placeholder="Search fruit" />
-            <SearchListResults className="mt-2">
-                {fruits.map((fruit) => (
-                    <SearchListItem key={fruit} value={fruit}>
-                        {fruit}
-                    </SearchListItem>
-                ))}
-                <SearchListEmpty className="px-3 py-4 text-footnote text-label-secondary">
-                    No fruit found
-                </SearchListEmpty>
-            </SearchListResults>
-        </SearchList>
-    )
-}

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

@@ -1,87 +0,0 @@
-import { SearchListDropdown } from "./examples/search-list-dropdown"
-import { jsxAttribute, jsxText } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { SearchListGroups } from "./examples/search-list-groups"
-import { SearchListShowcase } from "./examples/search-list-showcase"
-import { SearchListUsage } from "./examples/search-list-usage"
-import {
-    SearchList,
-    SearchListEmpty,
-    SearchListField,
-    SearchListItem,
-    SearchListResults,
-} from "./search-list"
-
-// `placeholder` belongs to SearchListField, `empty` to SearchListEmpty;
-// the snippet writes both into the children.
-type DemoProps = {
-    open?: boolean
-    placeholder: string
-    empty: string
-}
-
-const settings = [
-    "Password",
-    "Passkeys",
-    "Two-step verification",
-    "Devices",
-    "Language",
-]
-
-export const searchListDocs = defineDocs<DemoProps>()({
-    slug: "search-list",
-    name: "SearchList",
-    importPath: "@passui/react/search-list",
-    controls: {
-        open: { kind: "boolean", default: true },
-        placeholder: {
-            kind: "text",
-            default: "Search settings",
-        },
-        empty: { kind: "text", default: "No results" },
-    },
-    render: ({ open, placeholder, empty }) => (
-        <SearchList
-            open={open}
-            className="w-full max-w-xs rounded-3xl bg-elevated p-2 ring-1 ring-separator/60"
-        >
-            <SearchListField placeholder={placeholder} />
-            <SearchListResults className="mt-2 max-h-56">
-                {settings.map((item) => (
-                    <SearchListItem key={item} value={item}>
-                        {item}
-                    </SearchListItem>
-                ))}
-                <SearchListEmpty className="px-3 py-6 text-center text-footnote text-label-secondary">
-                    {empty}
-                </SearchListEmpty>
-            </SearchListResults>
-        </SearchList>
-    ),
-    childrenSnippet: ({ placeholder, empty }) => ({
-        imports: [
-            'import { SearchListEmpty, SearchListField, SearchListItem, SearchListResults } from "@passui/react/search-list"',
-        ],
-        omit: ["placeholder", "empty"],
-        children: [
-            "",
-            `    <SearchListField ${jsxAttribute("placeholder", placeholder)} />`,
-            "    <SearchListResults>",
-            '        <SearchListItem value="Password">Password</SearchListItem>',
-            '        <SearchListItem value="Passkeys">Passkeys</SearchListItem>',
-            `        <SearchListEmpty>${jsxText(empty)}</SearchListEmpty>`,
-            "    </SearchListResults>",
-            "",
-        ].join("\n"),
-    }),
-    usage: SearchListUsage,
-    showcase: SearchListShowcase,
-    examples: [
-        { id: "groups", component: SearchListGroups },
-        {
-            id: "dropdown",
-            component: SearchListDropdown,
-            playground: { open: false },
-        },
-    ],
-})

package/src/components/section/examples/section-actions.tsx

@@ -1,35 +0,0 @@
-import { Section, toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-
-export function SectionActions() {
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-6">
-            <Section title="Data">
-                <Button
-                    variant="ghost"
-                    className="w-full justify-start rounded-none"
-                    onClick={() =>
-                        toast("Preparing your export")
-                    }
-                >
-                    Export my data
-                </Button>
-                <Button
-                    variant="ghost"
-                    className="w-full justify-start rounded-none"
-                    onClick={() => toast("Cache cleared")}
-                >
-                    Clear cache
-                </Button>
-            </Section>
-            <Section footer="This can't be undone.">
-                <Button
-                    variant="ghost"
-                    className="w-full justify-start rounded-none text-danger"
-                >
-                    Delete account
-                </Button>
-            </Section>
-        </div>
-    )
-}

package/src/components/section/examples/section-groups.tsx

@@ -1,41 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function SectionGroups() {
-    const [passkeys, setPasskeys] = useState(true)
-    const [twoStep, setTwoStep] = useState(true)
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-6">
-            <Section title="Sign in">
-                <LabeledContent label="Passkeys">
-                    <Toggle
-                        label="Passkeys"
-                        labelHidden
-                        checked={passkeys}
-                        onChange={setPasskeys}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Two-step verification">
-                    <Toggle
-                        label="Two-step verification"
-                        labelHidden
-                        checked={twoStep}
-                        onChange={setTwoStep}
-                    />
-                </LabeledContent>
-            </Section>
-            <Section
-                title="Recovery"
-                footer="Used only if you lose access to every device."
-            >
-                <LabeledContent label="Recovery email">
-                    <span className="text-subheadline text-label-secondary">
-                        a•••@example.com
-                    </span>
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}