@passui/react 0.1.16 → 0.1.19

package/src/components/dialog/examples/dialog-form.tsx

@@ -1,46 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { Dialog } from "@passui/react/dialog"
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function DialogForm() {
-    const [open, setOpen] = useState(false)
-    const [name, setName] = useState("Pass console")
-
-    return (
-        <>
-            <Button
-                variant="secondary"
-                onClick={() => setOpen(true)}
-            >
-                Rename project
-            </Button>
-            <Dialog
-                open={open}
-                onOpenChange={setOpen}
-                title="Rename project"
-                onSubmit={(event) => {
-                    event.preventDefault()
-                    setOpen(false)
-                    toast.success(`Renamed to ${name}`)
-                }}
-                footer={
-                    <Dialog.Actions
-                        submitLabel="Rename"
-                        cancelLabel="Cancel"
-                        disabled={!name.trim()}
-                    />
-                }
-            >
-                <TextField
-                    label="Name"
-                    value={name}
-                    onChange={(event) =>
-                        setName(event.target.value)
-                    }
-                />
-            </Dialog>
-        </>
-    )
-}

package/src/components/dialog/examples/dialog-inline.tsx

@@ -1,48 +0,0 @@
-import { Button } from "@passui/react/button"
-import { Dialog } from "@passui/react/dialog"
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function DialogInline() {
-    const [open, setOpen] = useState(false)
-    const [email, setEmail] = useState("")
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-2 rounded-4xl bg-elevated p-2 ring-1 ring-separator/60">
-            <Button
-                variant="ghost"
-                className="self-start"
-                onClick={() => setOpen(!open)}
-            >
-                {open ? "Cancel" : "Add a recovery email"}
-            </Button>
-            <Dialog
-                open={open}
-                onOpenChange={setOpen}
-                presentation="inline"
-                title="Recovery email"
-                description="We only use it if you lose access."
-                onSubmit={(event) => {
-                    event.preventDefault()
-                    setOpen(false)
-                }}
-                footer={
-                    <Dialog.Actions
-                        submitLabel="Add"
-                        cancelLabel="Cancel"
-                        disabled={!email}
-                    />
-                }
-            >
-                <TextField
-                    label="Email"
-                    type="email"
-                    value={email}
-                    onChange={(event) =>
-                        setEmail(event.target.value)
-                    }
-                />
-            </Dialog>
-        </div>
-    )
-}

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

@@ -1,53 +0,0 @@
-import { LabeledContent, Section, toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { Dialog } from "@passui/react/dialog"
-import { useState } from "react"
-
-export function DialogShowcase() {
-    const [open, setOpen] = useState(false)
-    const [pending, setPending] = useState(false)
-
-    return (
-        <div className="w-full max-w-sm">
-            <Section title="Devices">
-                <LabeledContent
-                    label="iPad mini"
-                    description="Last used 3 weeks ago"
-                >
-                    <Button
-                        variant="ghost"
-                        size="sm"
-                        className="text-danger"
-                        onClick={() => setOpen(true)}
-                    >
-                        Sign out
-                    </Button>
-                </LabeledContent>
-            </Section>
-            <Dialog
-                open={open}
-                onOpenChange={setOpen}
-                title="Sign out of iPad mini?"
-                description="It will need your password or a passkey to sign back in."
-                footer={
-                    <Dialog.Actions
-                        submitLabel="Sign out"
-                        cancelLabel="Cancel"
-                        tone="destructive"
-                        pending={pending}
-                        onConfirm={() => {
-                            setPending(true)
-                            setTimeout(() => {
-                                setPending(false)
-                                setOpen(false)
-                                toast.success(
-                                    "Signed out of iPad mini"
-                                )
-                            }, 900)
-                        }}
-                    />
-                }
-            />
-        </div>
-    )
-}

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

@@ -1,31 +0,0 @@
-import { Button } from "@passui/react/button"
-import { Dialog } from "@passui/react/dialog"
-import { useState } from "react"
-
-export function DialogUsage() {
-    const [open, setOpen] = useState(false)
-
-    return (
-        <>
-            <Button
-                variant="secondary"
-                onClick={() => setOpen(true)}
-            >
-                Sign out
-            </Button>
-            <Dialog
-                open={open}
-                onOpenChange={setOpen}
-                title="Sign out of Pass?"
-                description="You can sign back in at any time."
-                footer={
-                    <Dialog.Actions
-                        submitLabel="Sign out"
-                        cancelLabel="Cancel"
-                        onConfirm={() => setOpen(false)}
-                    />
-                }
-            />
-        </>
-    )
-}

package/src/components/labeled-content/examples/labeled-content-descriptions.tsx

@@ -1,37 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function LabeledContentDescriptions() {
-    const [alerts, setAlerts] = useState(true)
-    const [digest, setDigest] = useState(false)
-
-    return (
-        <div className="w-full max-w-sm">
-            <Section title="Email">
-                <LabeledContent
-                    label="Sign-in alerts"
-                    description="When a new device signs in to your account."
-                >
-                    <Toggle
-                        label="Sign-in alerts"
-                        labelHidden
-                        checked={alerts}
-                        onChange={setAlerts}
-                    />
-                </LabeledContent>
-                <LabeledContent
-                    label="Weekly digest"
-                    description="A summary of activity every Monday."
-                >
-                    <Toggle
-                        label="Weekly digest"
-                        labelHidden
-                        checked={digest}
-                        onChange={setDigest}
-                    />
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

package/src/components/labeled-content/examples/labeled-content-showcase.tsx

@@ -1,54 +0,0 @@
-import {
-    LabeledContent,
-    Section,
-    SegmentedControl,
-} from "@passui/react"
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function LabeledContentShowcase() {
-    const [density, setDensity] = useState("comfortable")
-    const [signature, setSignature] = useState(
-        "Sent from Passui"
-    )
-
-    return (
-        <div className="w-full max-w-md">
-            <Section title="Mail">
-                <LabeledContent
-                    label="Density"
-                    description="How much fits on screen."
-                    wide
-                >
-                    <SegmentedControl
-                        label="Density"
-                        value={density}
-                        onChange={setDensity}
-                        options={[
-                            {
-                                value: "compact",
-                                label: "Compact",
-                            },
-                            {
-                                value: "comfortable",
-                                label: "Comfortable",
-                            },
-                        ]}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Signature" stacked>
-                    <TextField
-                        label="Signature"
-                        value={signature}
-                        onChange={(event) =>
-                            setSignature(event.target.value)
-                        }
-                    />
-                </LabeledContent>
-                <LabeledContent label="Account">
-                    aiko@example.com
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

package/src/components/labeled-content/examples/labeled-content-usage.tsx

@@ -1,22 +0,0 @@
-import { LabeledContent } from "@passui/react"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function LabeledContentUsage() {
-    const [previews, setPreviews] = useState(true)
-    return (
-        <div className="w-full max-w-sm rounded-3xl border border-separator/60 bg-elevated">
-            <LabeledContent
-                label="Show previews"
-                description="Shows the first lines of each note."
-            >
-                <Toggle
-                    label="Show previews"
-                    labelHidden
-                    checked={previews}
-                    onChange={setPreviews}
-                />
-            </LabeledContent>
-        </div>
-    )
-}

package/src/components/labeled-content/examples/labeled-content-values.tsx

@@ -1,26 +0,0 @@
-import { Chip, LabeledContent, Section } from "@passui/react"
-
-export function LabeledContentValues() {
-    return (
-        <div className="w-full max-w-sm">
-            <Section
-                title="Account"
-                footer="Contact support to change your account ID."
-            >
-                <LabeledContent label="Account ID">
-                    <span className="font-mono text-footnote text-label-secondary">
-                        pass_7f3a9c
-                    </span>
-                </LabeledContent>
-                <LabeledContent label="Plan">
-                    <Chip tone="accent">Family</Chip>
-                </LabeledContent>
-                <LabeledContent label="Member since">
-                    <span className="text-subheadline text-label-secondary">
-                        March 2024
-                    </span>
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

package/src/components/labeled-content/examples/labeled-content-wide.tsx

@@ -1,46 +0,0 @@
-import {
-    LabeledContent,
-    Section,
-    SegmentedControl,
-} from "@passui/react"
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function LabeledContentWide() {
-    const [theme, setTheme] = useState("system")
-    const [nickname, setNickname] = useState("Aiko")
-
-    return (
-        <div className="w-full max-w-md">
-            <Section title="Profile">
-                <LabeledContent label="Appearance" wide>
-                    <SegmentedControl
-                        label="Appearance"
-                        value={theme}
-                        onChange={setTheme}
-                        options={[
-                            {
-                                value: "system",
-                                label: "System",
-                            },
-                            {
-                                value: "light",
-                                label: "Light",
-                            },
-                            { value: "dark", label: "Dark" },
-                        ]}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Nickname" stacked>
-                    <TextField
-                        label="Nickname"
-                        value={nickname}
-                        onChange={(event) =>
-                            setNickname(event.target.value)
-                        }
-                    />
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

package/src/components/labeled-content/labeled-content.docs.tsx

@@ -1,69 +0,0 @@
-import { LabeledContentValues } from "./examples/labeled-content-values"
-import { LabeledContentWide } from "./examples/labeled-content-wide"
-import { LabeledContentDescriptions } from "./examples/labeled-content-descriptions"
-import { defineDocs } from "../../docs/types"
-import { Toggle } from "../toggle/toggle"
-import { LabeledContentShowcase } from "./examples/labeled-content-showcase"
-import { LabeledContentUsage } from "./examples/labeled-content-usage"
-import { LabeledContent } from "./labeled-content"
-
-type DemoProps = {
-    label: string
-    description?: string
-    stacked?: boolean
-    wide?: boolean
-}
-
-export const labeledContentDocs = defineDocs<DemoProps>()({
-    slug: "labeled-content",
-    name: "LabeledContent",
-    importPath: "@passui/react",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Show previews",
-            required: true,
-        },
-        description: {
-            kind: "text",
-            default: "Shows the first lines of each note.",
-        },
-        stacked: { kind: "boolean", default: false },
-        wide: { kind: "boolean", default: false },
-    },
-    render: (values) => (
-        <div className="w-full max-w-sm rounded-3xl border border-separator/60 bg-elevated">
-            <LabeledContent {...values}>
-                <Toggle
-                    label={values.label}
-                    labelHidden
-                    checked
-                    onChange={() => {}}
-                />
-            </LabeledContent>
-        </div>
-    ),
-    childrenSnippet: () => ({
-        imports: [
-            'import { useState } from "react"',
-            'import { Toggle } from "@passui/react/toggle"',
-        ],
-        setup: ["const [on, setOn] = useState(true)"],
-        children:
-            '<Toggle label="Show previews" labelHidden checked={on} onChange={setOn} />',
-    }),
-    usage: LabeledContentUsage,
-    showcase: LabeledContentShowcase,
-    examples: [
-        {
-            id: "descriptions",
-            component: LabeledContentDescriptions,
-        },
-        {
-            id: "wide",
-            component: LabeledContentWide,
-            playground: { wide: true },
-        },
-        { id: "values", component: LabeledContentValues },
-    ],
-})

package/src/components/locale-switcher/examples/locale-switcher-native-names.tsx

@@ -1,30 +0,0 @@
-import { LocaleSwitcher } from "@passui/react/locale-switcher"
-import { useState } from "react"
-
-export function LocaleSwitcherNativeNames() {
-    const [locale, setLocale] = useState("en")
-
-    // a transformed frame holds the fixed switcher on this page
-    return (
-        <div className="relative h-80 w-full max-w-sm transform-gpu overflow-hidden rounded-4xl bg-fill/40">
-            <p className="p-6 text-footnote text-label-secondary">
-                Current: {locale}
-            </p>
-            <LocaleSwitcher
-                label="Change language"
-                locales={[
-                    "en",
-                    "fr",
-                    "de",
-                    "es",
-                    "pt",
-                    "ja",
-                    "zh",
-                ]}
-                locale={locale}
-                onSelect={setLocale}
-                storageKey="docs-locale-switcher-native-names"
-            />
-        </div>
-    )
-}

package/src/components/locale-switcher/examples/locale-switcher-showcase.tsx

@@ -1,46 +0,0 @@
-import { LocaleSwitcher } from "@passui/react/locale-switcher"
-import { useState } from "react"
-
-const greetings: Record<
-    string,
-    { title: string; body: string }
-> = {
-    en: {
-        title: "Welcome back",
-        body: "Pick up where you left off.",
-    },
-    fr: {
-        title: "Bon retour",
-        body: "Reprenez là où vous vous êtes arrêté.",
-    },
-    ja: {
-        title: "おかえりなさい",
-        body: "前回の続きから始めましょう。",
-    },
-}
-
-export function LocaleSwitcherShowcase() {
-    const [locale, setLocale] = useState("en")
-    const text = greetings[locale]
-
-    return (
-        <div
-            lang={locale}
-            className="relative flex h-72 w-full max-w-sm transform-gpu flex-col items-center justify-center gap-2 overflow-hidden rounded-sheet bg-background p-8 text-center shadow-sm ring-1 ring-separator/60"
-        >
-            <h2 className="text-title2 font-bold text-label">
-                {text.title}
-            </h2>
-            <p className="text-callout text-label-secondary">
-                {text.body}
-            </p>
-            <LocaleSwitcher
-                label="Change language"
-                locales={["en", "fr", "ja"]}
-                locale={locale}
-                onSelect={setLocale}
-                storageKey="docs-locale-switcher-showcase"
-            />
-        </div>
-    )
-}

package/src/components/locale-switcher/examples/locale-switcher-translated-page.tsx

@@ -1,35 +0,0 @@
-import { LocaleSwitcher } from "@passui/react/locale-switcher"
-import { useState } from "react"
-
-const copy = {
-    en: { title: "Sign in", button: "Continue" },
-    fr: { title: "Connexion", button: "Continuer" },
-    zh: { title: "登录", button: "继续" },
-}
-
-type Locale = keyof typeof copy
-
-export function LocaleSwitcherTranslatedPage() {
-    const [locale, setLocale] = useState<Locale>("fr")
-
-    return (
-        <div
-            lang={locale}
-            className="relative flex h-64 w-full max-w-sm transform-gpu flex-col items-center justify-center gap-4 overflow-hidden rounded-4xl bg-elevated shadow-sm ring-1 ring-separator/60"
-        >
-            <h2 className="text-title2 font-bold text-label">
-                {copy[locale].title}
-            </h2>
-            <span className="rounded-full bg-inverse px-5 py-2 text-subheadline font-semibold text-on-inverse">
-                {copy[locale].button}
-            </span>
-            <LocaleSwitcher
-                label="Change language"
-                locales={["en", "fr", "zh"] as Locale[]}
-                locale={locale}
-                onSelect={setLocale}
-                storageKey="docs-locale-switcher-translated-page"
-            />
-        </div>
-    )
-}

package/src/components/locale-switcher/examples/locale-switcher-usage.tsx

@@ -1,20 +0,0 @@
-import { LocaleSwitcher } from "@passui/react/locale-switcher"
-import { useState } from "react"
-
-export function LocaleSwitcherUsage() {
-    const [locale, setLocale] = useState("en")
-
-    // In an app it floats over the whole screen; here a transformed
-    // frame holds it, since a fixed element sits inside such a frame.
-    return (
-        <div className="relative h-48 w-full max-w-sm transform-gpu overflow-hidden rounded-4xl bg-fill/40">
-            <LocaleSwitcher
-                label="Change language"
-                locales={["en", "fr", "zh"]}
-                locale={locale}
-                onSelect={setLocale}
-                storageKey="docs-locale-switcher-usage"
-            />
-        </div>
-    )
-}

package/src/components/locale-switcher/locale-switcher.docs.tsx

@@ -1,91 +0,0 @@
-import { LocaleSwitcherTranslatedPage } from "./examples/locale-switcher-translated-page"
-import { LocaleSwitcherNativeNames } from "./examples/locale-switcher-native-names"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { LocaleSwitcherShowcase } from "./examples/locale-switcher-showcase"
-import { LocaleSwitcherUsage } from "./examples/locale-switcher-usage"
-import { LocaleSwitcher } from "./locale-switcher"
-
-// The locales list is an array, so the playground offers a few sets.
-type DemoProps = {
-    label: string
-    locales: "en-fr-zh" | "en-ja" | "en-de-es-pt"
-}
-
-const sets = {
-    "en-fr-zh": ["en", "fr", "zh"],
-    "en-ja": ["en", "ja"],
-    "en-de-es-pt": ["en", "de", "es", "pt"],
-} as const
-
-function LocaleSwitcherDemo({ label, locales }: DemoProps) {
-    const [locale, setLocale] = useState<string>("en")
-    return (
-        <div className="flex flex-col items-center gap-2 text-center">
-            <p className="text-headline font-semibold text-label">
-                Current language: {locale}
-            </p>
-            <p className="text-footnote text-label-secondary">
-                The switcher floats in the bottom corner. Drag
-                it to another corner.
-            </p>
-            <LocaleSwitcher
-                key={locales}
-                label={label}
-                locales={sets[locales]}
-                locale={locale}
-                onSelect={setLocale}
-                storageKey="passui-docs-locale-switcher"
-            />
-        </div>
-    )
-}
-
-export const localeSwitcherDocs = defineDocs<DemoProps>()({
-    slug: "locale-switcher",
-    name: "LocaleSwitcher",
-    importPath: "@passui/react/locale-switcher",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Change language",
-            required: true,
-        },
-        locales: {
-            kind: "select",
-            options: {
-                "en-fr-zh": true,
-                "en-ja": true,
-                "en-de-es-pt": true,
-            },
-            default: "en-fr-zh",
-        },
-    },
-    render: (values) => <LocaleSwitcherDemo {...values} />,
-    childrenSnippet: ({ locales }) => ({
-        imports: ['import { useState } from "react"'],
-        setup: ['const [locale, setLocale] = useState("en")'],
-        omit: ["locales"],
-        extraProps: { storageKey: "locale-switcher" },
-        expressionProps: {
-            locales: JSON.stringify(sets[locales]),
-            locale: "locale",
-            onSelect: "setLocale",
-        },
-        children: "",
-    }),
-    usage: LocaleSwitcherUsage,
-    showcase: LocaleSwitcherShowcase,
-    examples: [
-        {
-            id: "native-names",
-            component: LocaleSwitcherNativeNames,
-            playground: { locales: "en-de-es-pt" },
-        },
-        {
-            id: "translated-page",
-            component: LocaleSwitcherTranslatedPage,
-        },
-    ],
-    previewHeight: 320,
-})