@passui/react 0.0.0-stage → 0.1.14

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

@@ -0,0 +1,80 @@
+import {
+    createContext,
+    useContext,
+    useEffect,
+    useState,
+    type ComponentProps,
+} from "react"
+import { cn } from "../../lib/class-names"
+
+const ImageContext = createContext<{
+    loaded: boolean
+    setLoaded: (loaded: boolean) => void
+}>({ loaded: false, setLoaded: () => {} })
+export function ProfileImage({
+    className,
+    ...props
+}: ComponentProps<"span">) {
+    const [loaded, setLoaded] = useState(false)
+    return (
+        <ImageContext value={{ loaded, setLoaded }}>
+            <span
+                {...props}
+                className={cn(
+                    "relative inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-fill text-label-secondary",
+                    className
+                )}
+            />
+        </ImageContext>
+    )
+}
+export function ProfileImageContent({
+    src,
+    className,
+    onLoad,
+    onError,
+    ...props
+}: ComponentProps<"img">) {
+    const { setLoaded } = useContext(ImageContext)
+    useEffect(() => {
+        if (src) setLoaded(false)
+    }, [src, setLoaded])
+    if (!src) return null
+    return (
+        <img
+            key={src}
+            alt=""
+            {...props}
+            src={src}
+            className={cn(
+                "absolute inset-0 size-full object-cover",
+                className
+            )}
+            onLoad={(event) => {
+                setLoaded(true)
+                onLoad?.(event)
+            }}
+            onError={(event) => {
+                setLoaded(false)
+                onError?.(event)
+                event.currentTarget.style.visibility =
+                    "hidden"
+            }}
+        />
+    )
+}
+export function ProfileImageFallback({
+    className,
+    ...props
+}: ComponentProps<"span">) {
+    const { loaded } = useContext(ImageContext)
+    return loaded ? null : (
+        <span
+            {...props}
+            className={cn(
+                "text-footnote font-medium",
+                className
+            )}
+        />
+    )
+}

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

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

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

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

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

@@ -0,0 +1,58 @@
+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-field/search-field.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type InputHTMLAttributes } from "react"
+import { SearchIcon } from "../../icons/icons"
+import { cn } from "../../lib/class-names"
+
+export const SearchField = forwardRef<
+    HTMLInputElement,
+    InputHTMLAttributes<HTMLInputElement>
+>(function SearchField(
+    { className, placeholder = "Search", ...props },
+    ref
+) {
+    return (
+        <label
+            className={cn(
+                "control-field flex items-center gap-2 rounded-lg px-2.5 py-2 text-subheadline text-label-tertiary",
+                className
+            )}
+        >
+            <SearchIcon size={15} strokeWidth={2} />
+            <input
+                ref={ref}
+                type="search"
+                placeholder={placeholder}
+                className="min-w-0 grow bg-transparent text-label outline-none placeholder:text-label-tertiary"
+                {...props}
+            />
+        </label>
+    )
+})

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

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

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

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

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

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