@passui/react 0.1.16 → 0.1.19

package/src/components/picker/examples/picker-details.tsx

@@ -1,44 +0,0 @@
-import {
-    LabeledContent,
-    Picker,
-    Section,
-} from "@passui/react"
-import { useState } from "react"
-
-export function PickerDetails() {
-    const [region, setRegion] = useState("eu")
-
-    return (
-        <div className="w-full max-w-sm">
-            <Section
-                title="Data"
-                footer="Where your account's data is stored."
-            >
-                <LabeledContent label="Region">
-                    <Picker
-                        label="Region"
-                        value={region}
-                        onChange={setRegion}
-                        options={[
-                            {
-                                value: "eu",
-                                label: "Europe",
-                                detail: "Frankfurt",
-                            },
-                            {
-                                value: "us",
-                                label: "United States",
-                                detail: "Virginia",
-                            },
-                            {
-                                value: "ap",
-                                label: "Asia Pacific",
-                                detail: "Tokyo",
-                            },
-                        ]}
-                    />
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

package/src/components/picker/examples/picker-searchable.tsx

@@ -1,48 +0,0 @@
-import { Picker } from "@passui/react"
-import { useState } from "react"
-
-const zones = [
-    {
-        value: "Africa/Nairobi",
-        label: "Nairobi",
-        detail: "GMT+3",
-    },
-    {
-        value: "Europe/Paris",
-        label: "Paris",
-        detail: "GMT+2",
-    },
-    {
-        value: "Europe/London",
-        label: "London",
-        detail: "GMT+1",
-    },
-    {
-        value: "America/New_York",
-        label: "New York",
-        detail: "GMT-4",
-    },
-    { value: "Asia/Tokyo", label: "Tokyo", detail: "GMT+9" },
-    {
-        value: "Australia/Sydney",
-        label: "Sydney",
-        detail: "GMT+11",
-    },
-]
-
-export function PickerSearchable() {
-    const [zone, setZone] = useState("Africa/Nairobi")
-    return (
-        <div className="w-full max-w-xs">
-            <Picker
-                label="Time zone"
-                value={zone}
-                onChange={setZone}
-                options={zones}
-                searchable
-                searchPlaceholder="Search cities"
-                emptyLabel="No matching city"
-            />
-        </div>
-    )
-}

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

@@ -1,66 +0,0 @@
-import {
-    LabeledContent,
-    Picker,
-    Section,
-} from "@passui/react"
-import { useState } from "react"
-
-export function PickerShowcase() {
-    const [language, setLanguage] = useState("en")
-    const [region, setRegion] = useState("ke")
-    const [calendar, setCalendar] = useState("gregorian")
-
-    return (
-        <div className="w-full max-w-sm">
-            <Section
-                title="Language and region"
-                footer="Dates, numbers and currency follow your region."
-            >
-                <LabeledContent label="Language">
-                    <Picker
-                        label="Language"
-                        value={language}
-                        onChange={setLanguage}
-                        options={[
-                            { value: "en", label: "English" },
-                            {
-                                value: "fr",
-                                label: "Français",
-                            },
-                            { value: "zh", label: "中文" },
-                        ]}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Region">
-                    <Picker
-                        label="Region"
-                        value={region}
-                        onChange={setRegion}
-                        options={[
-                            { value: "ke", label: "Kenya" },
-                            { value: "fr", label: "France" },
-                            { value: "jp", label: "Japan" },
-                        ]}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Calendar">
-                    <Picker
-                        label="Calendar"
-                        value={calendar}
-                        onChange={setCalendar}
-                        options={[
-                            {
-                                value: "gregorian",
-                                label: "Gregorian",
-                            },
-                            {
-                                value: "japanese",
-                                label: "Japanese",
-                            },
-                        ]}
-                    />
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

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

@@ -1,20 +0,0 @@
-import { Picker } from "@passui/react"
-import { useState } from "react"
-
-export function PickerUsage() {
-    const [sort, setSort] = useState("recent")
-    return (
-        <div className="w-full max-w-xs">
-            <Picker
-                label="Sort by"
-                value={sort}
-                onChange={setSort}
-                options={[
-                    { value: "recent", label: "Most recent" },
-                    { value: "name", label: "Name" },
-                    { value: "size", label: "Size" },
-                ]}
-            />
-        </div>
-    )
-}

package/src/components/picker/picker.docs.tsx

@@ -1,68 +0,0 @@
-import { PickerDetails } from "./examples/picker-details"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { PickerSearchable } from "./examples/picker-searchable"
-import { PickerShowcase } from "./examples/picker-showcase"
-import { PickerUsage } from "./examples/picker-usage"
-import { Picker } from "./picker"
-
-type DemoProps = { label: string; searchable?: boolean }
-
-function PickerDemo(props: DemoProps) {
-    const [size, setSize] = useState("medium")
-    return (
-        <div className="w-full max-w-xs">
-            <Picker
-                {...props}
-                value={size}
-                onChange={setSize}
-                searchPlaceholder="Search"
-                options={[
-                    { value: "small", label: "Small" },
-                    { value: "medium", label: "Medium" },
-                    { value: "large", label: "Large" },
-                    {
-                        value: "extra-large",
-                        label: "Extra large",
-                    },
-                ]}
-            />
-        </div>
-    )
-}
-
-export const pickerDocs = defineDocs<DemoProps>()({
-    slug: "picker",
-    name: "Picker",
-    importPath: "@passui/react",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Text size",
-            required: true,
-        },
-        searchable: { kind: "boolean", default: false },
-    },
-    render: (values) => <PickerDemo {...values} />,
-    childrenSnippet: () => ({
-        imports: ['import { useState } from "react"'],
-        setup: ['const [size, setSize] = useState("medium")'],
-        children: "",
-        expressionProps: {
-            value: "size",
-            onChange: "setSize",
-            options:
-                '[{ value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" }]',
-        },
-    }),
-    usage: PickerUsage,
-    showcase: PickerShowcase,
-    examples: [
-        {
-            id: "searchable",
-            component: PickerSearchable,
-            playground: { searchable: true },
-        },
-        { id: "details", component: PickerDetails },
-    ],
-})

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

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

@@ -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>
-    )
-}