@passui/react 0.0.0-stage → 0.1.14

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

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react"
+import { cn } from "../../lib/class-names"
+
+/**
+ * A row: a label, an optional description, and its control at the trailing
+ * end, as SwiftUI's `LabeledContent`. Wide controls move under the label
+ * when there is no room beside it, rather than squeezing.
+ */
+export function LabeledContent({
+    label,
+    description,
+    children,
+    stacked,
+    wide,
+}: {
+    label: string
+    description?: string
+    children: ReactNode
+    /** Put the control under the label, for wide controls. */
+    stacked?: boolean
+    /** A wide control (segmented) that moves under the label on phones. */
+    wide?: boolean
+}) {
+    return (
+        <div
+            className={cn(
+                "flex flex-wrap gap-x-4 gap-y-2.5 px-4 py-3",
+                stacked
+                    ? "flex-col items-stretch"
+                    : cn(
+                          "items-center justify-between",
+                          wide &&
+                              "max-sm:flex-col max-sm:items-stretch max-sm:gap-2.5"
+                      )
+            )}
+        >
+            <div
+                className={cn(
+                    "flex min-w-0 flex-1 flex-col break-normal",
+                    !stacked && "basis-36",
+                    wide && "max-sm:basis-auto"
+                )}
+            >
+                <span className="text-subheadline text-label">
+                    {label}
+                </span>
+                {description && (
+                    <span className="text-footnote leading-snug text-label-secondary">
+                        {description}
+                    </span>
+                )}
+            </div>
+            {/* Controls give way before the label does; a segmented control that
+          no longer fits turns into a pop-up button by itself. */}
+            <div
+                className={cn(
+                    "ms-auto flex max-w-full min-w-0 shrink-0 justify-end [&>*]:max-w-full",
+                    stacked && "w-full",
+                    wide && "max-sm:w-full"
+                )}
+            >
+                {children}
+            </div>
+        </div>
+    )
+}

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

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

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

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

@@ -0,0 +1,20 @@
+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/index.ts

@@ -0,0 +1 @@
+export * from "./locale-switcher"

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

@@ -0,0 +1,91 @@
+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/locale-switcher/locale-switcher.tsx

@@ -0,0 +1,252 @@
+import { getNativeLanguageName } from "../../lib/language"
+import { cn } from "../../lib/class-names"
+import {
+    AnimatePresence,
+    motion,
+    useDragControls,
+    useMotionValue,
+} from "motion/react"
+import { useEffect, useRef, useState } from "react"
+
+type Side = "left" | "right"
+type Edge = "top" | "bottom"
+
+type Anchor = {
+    side: Side
+    edge: Edge
+    x: number
+    y: number
+}
+
+const DEFAULT_ANCHOR: Anchor = {
+    side: "right",
+    edge: "bottom",
+    x: 20,
+    y: 20,
+}
+
+function loadStoredAnchor(storageKey: string): Anchor | null {
+    try {
+        const raw = localStorage.getItem(storageKey)
+        if (!raw) return null
+        const parsed = JSON.parse(raw) as Partial<Anchor>
+        if (
+            (parsed.side === "left" ||
+                parsed.side === "right") &&
+            (parsed.edge === "top" ||
+                parsed.edge === "bottom") &&
+            typeof parsed.x === "number" &&
+            typeof parsed.y === "number"
+        ) {
+            return {
+                side: parsed.side,
+                edge: parsed.edge,
+                x: parsed.x,
+                y: parsed.y,
+            }
+        }
+    } catch {}
+    return null
+}
+
+function saveStoredAnchor(
+    storageKey: string,
+    anchor: Anchor
+) {
+    try {
+        localStorage.setItem(
+            storageKey,
+            JSON.stringify(anchor)
+        )
+    } catch {}
+}
+
+export type LocaleSwitcherProps<L extends string> = {
+    locales: readonly L[]
+    locale: L
+    onSelect: (locale: L) => void
+    /** localStorage key for where the person dragged it. */
+    storageKey: string
+    label: string
+}
+
+/** A draggable floating language picker that snaps to the nearest corner. */
+export function LocaleSwitcher<L extends string>({
+    locales,
+    locale,
+    onSelect,
+    storageKey,
+    label,
+}: LocaleSwitcherProps<L>) {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const dragControls = useDragControls()
+    const x = useMotionValue(0)
+    const y = useMotionValue(0)
+    const [open, setOpen] = useState(false)
+    const [anchor, setAnchor] = useState(DEFAULT_ANCHOR)
+
+    const langs = Array.from(locales, (value) => ({
+        value: value,
+        label: getNativeLanguageName(value),
+    }))
+
+    useEffect(() => {
+        const stored = loadStoredAnchor(storageKey)
+        if (stored) setAnchor(stored)
+    }, [storageKey])
+
+    useEffect(() => {
+        if (!open) return
+        function handlePointerDown(e: PointerEvent) {
+            if (
+                containerRef.current &&
+                !containerRef.current.contains(
+                    e.target as Node
+                )
+            ) {
+                setOpen(false)
+            }
+        }
+        document.addEventListener(
+            "pointerdown",
+            handlePointerDown
+        )
+        return () =>
+            document.removeEventListener(
+                "pointerdown",
+                handlePointerDown
+            )
+    }, [open])
+
+    function commitDraggedPosition() {
+        const el = containerRef.current
+        if (!el) return
+        const rect = el.getBoundingClientRect()
+        const side: Side =
+            rect.left + rect.width / 2 < window.innerWidth / 2
+                ? "left"
+                : "right"
+        const edge: Edge =
+            rect.top + rect.height / 2 <
+            window.innerHeight / 2
+                ? "top"
+                : "bottom"
+        const next: Anchor = {
+            side,
+            edge,
+            x:
+                side === "left"
+                    ? rect.left
+                    : window.innerWidth - rect.right,
+            y:
+                edge === "top"
+                    ? rect.top
+                    : window.innerHeight - rect.bottom,
+        }
+        setAnchor(next)
+        saveStoredAnchor(storageKey, next)
+        x.set(0)
+        y.set(0)
+    }
+
+    const growsUp = anchor.edge === "bottom"
+
+    return (
+        <motion.div
+            ref={containerRef}
+            drag
+            dragControls={dragControls}
+            dragListener={false}
+            dragMomentum={false}
+            dragElastic={0}
+            style={{
+                position: "fixed",
+                x,
+                y,
+                ...(anchor.side === "left"
+                    ? { left: anchor.x }
+                    : { right: anchor.x }),
+                ...(anchor.edge === "top"
+                    ? { top: anchor.y }
+                    : { bottom: anchor.y }),
+            }}
+            onDragEnd={commitDraggedPosition}
+            onMouseLeave={() => open && setOpen(false)}
+            className="z-60"
+        >
+            <motion.div
+                layout
+                transition={{
+                    type: "spring",
+                    damping: 28,
+                    stiffness: 380,
+                }}
+                className={cn(
+                    "overflow-hidden rounded-2xl border border-border/35 bg-popover/80 shadow-lg",
+                    "backdrop-blur-xl backdrop-saturate-150",
+                    "flex",
+                    growsUp ? "flex-col-reverse" : "flex-col",
+                    open ? "w-40 gap-px p-1" : "size-10"
+                )}
+            >
+                <button
+                    type="button"
+                    aria-label={label}
+                    aria-expanded={open}
+                    onPointerDown={(e) =>
+                        dragControls.start(e)
+                    }
+                    onClick={() => setOpen((prev) => !prev)}
+                    className={cn(
+                        "flex shrink-0 cursor-grab items-center justify-center",
+                        "active:cursor-grabbing text-xs font-semibold",
+                        open
+                            ? "h-9 w-full rounded-lg hover:bg-accent"
+                            : "size-10 rounded-2xl"
+                    )}
+                >
+                    {locale.toUpperCase()}
+                </button>
+
+                <AnimatePresence>
+                    {open && (
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ delay: 0.05 }}
+                            className="flex flex-col gap-px"
+                        >
+                            {langs.map((item) => {
+                                const active =
+                                    item.value === locale
+                                return (
+                                    <button
+                                        key={item.value}
+                                        type="button"
+                                        onClick={() => {
+                                            setOpen(false)
+                                            if (!active) {
+                                                onSelect(
+                                                    item.value
+                                                )
+                                            }
+                                        }}
+                                        className={cn(
+                                            "rounded-sm px-2 py-1.5 text-left text-sm",
+                                            "hover:bg-accent transition-colors",
+                                            active &&
+                                                "text-primary font-medium"
+                                        )}
+                                    >
+                                        {item.label}
+                                    </button>
+                                )
+                            })}
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </motion.div>
+        </motion.div>
+    )
+}

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

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

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