@passui/react 0.1.17 → 0.1.20

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

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