@passui/react 0.0.0-stage → 0.1.15

package/src/components/secure-field/secure-field.docs.tsx

@@ -0,0 +1,72 @@
+import { SecureFieldNewPassword } from "./examples/secure-field-new-password"
+import { SecureFieldReveal } from "./examples/secure-field-reveal"
+import type { ComponentProps } from "react"
+import { useState } from "react"
+import { defineDocs } from "../../docs/types"
+import { SecureFieldShowcase } from "./examples/secure-field-showcase"
+import { SecureFieldUsage } from "./examples/secure-field-usage"
+import { SecureField } from "./secure-field"
+
+type SecureFieldProps = ComponentProps<typeof SecureField>
+type DemoProps = Pick<
+    SecureFieldProps,
+    "label" | "placeholder" | "disabled"
+>
+
+function SecureFieldDemo(props: DemoProps) {
+    const [value, setValue] = useState("")
+    return (
+        <div className="w-full max-w-xs">
+            <SecureField
+                {...props}
+                value={value}
+                revealLabels={{ show: "Show", hide: "Hide" }}
+                onChange={(event) =>
+                    setValue(event.target.value)
+                }
+            />
+        </div>
+    )
+}
+
+export const secureFieldDocs = defineDocs<SecureFieldProps>()(
+    {
+        slug: "secure-field",
+        name: "SecureField",
+        importPath: "@passui/react/secure-field",
+        controls: {
+            label: {
+                kind: "text",
+                default: "Password",
+                required: true,
+            },
+            placeholder: {
+                kind: "text",
+                default: "At least 8 characters",
+            },
+            disabled: { kind: "boolean", default: false },
+        },
+        render: (values) => <SecureFieldDemo {...values} />,
+        childrenSnippet: () => ({
+            imports: ['import { useState } from "react"'],
+            setup: ['const [value, setValue] = useState("")'],
+            children: "",
+            expressionProps: {
+                value: "value",
+                revealLabels:
+                    '{ show: "Show", hide: "Hide" }',
+                onChange:
+                    "(event) => setValue(event.target.value)",
+            },
+        }),
+        usage: SecureFieldUsage,
+        showcase: SecureFieldShowcase,
+        examples: [
+            { id: "reveal", component: SecureFieldReveal },
+            {
+                id: "new-password",
+                component: SecureFieldNewPassword,
+            },
+        ],
+    }
+)

package/src/components/secure-field/secure-field.tsx

@@ -0,0 +1,10 @@
+import {
+    TextField,
+    type TextFieldProps,
+} from "../text-field/text-field"
+
+export function SecureField(
+    props: Omit<TextFieldProps, "type">
+) {
+    return <TextField {...props} type="password" />
+}

package/src/components/segmented-control/examples/segmented-control-overflow.tsx

@@ -0,0 +1,28 @@
+import { SegmentedControl } from "@passui/react"
+import { useState } from "react"
+
+export function SegmentedControlOverflow() {
+    const [sort, setSort] = useState("recent")
+
+    return (
+        <div className="w-full max-w-[16rem] resize-x overflow-hidden rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
+            <SegmentedControl
+                label="Sort by"
+                value={sort}
+                onChange={setSort}
+                options={[
+                    {
+                        value: "recent",
+                        label: "Recently edited",
+                    },
+                    {
+                        value: "created",
+                        label: "Date created",
+                    },
+                    { value: "title", label: "Title" },
+                    { value: "size", label: "Size" },
+                ]}
+            />
+        </div>
+    )
+}

package/src/components/segmented-control/examples/segmented-control-showcase.tsx

@@ -0,0 +1,59 @@
+import { SegmentedControl } from "@passui/react"
+import { useState } from "react"
+
+const ranges = {
+    day: {
+        label: "Today",
+        steps: "8,204",
+        bars: [3, 5, 2, 6, 4, 7, 5],
+    },
+    week: {
+        label: "This week",
+        steps: "54,910",
+        bars: [6, 4, 7, 5, 8, 6, 9],
+    },
+    month: {
+        label: "This month",
+        steps: "231,447",
+        bars: [5, 7, 6, 8, 7, 9, 8],
+    },
+} as const
+
+type Range = keyof typeof ranges
+
+export function SegmentedControlShowcase() {
+    const [range, setRange] = useState<Range>("week")
+    const data = ranges[range]
+
+    return (
+        <section className="flex w-full max-w-sm flex-col gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60">
+            <SegmentedControl
+                label="Range"
+                value={range}
+                onChange={setRange}
+                options={[
+                    { value: "day", label: "Day" },
+                    { value: "week", label: "Week" },
+                    { value: "month", label: "Month" },
+                ]}
+            />
+            <div className="flex flex-col">
+                <span className="text-footnote text-label-secondary">
+                    {data.label}
+                </span>
+                <span className="text-title font-bold tabular-nums text-label">
+                    {data.steps} steps
+                </span>
+            </div>
+            <div className="flex h-28 items-end gap-2">
+                {data.bars.map((bar, index) => (
+                    <span
+                        key={index}
+                        className="flex-1 rounded-t-lg bg-accent transition-[height] duration-500"
+                        style={{ height: `${bar * 10}%` }}
+                    />
+                ))}
+            </div>
+        </section>
+    )
+}

package/src/components/segmented-control/examples/segmented-control-usage.tsx

@@ -0,0 +1,20 @@
+import { SegmentedControl } from "@passui/react"
+import { useState } from "react"
+
+export function SegmentedControlUsage() {
+    const [theme, setTheme] = useState("auto")
+    return (
+        <div className="w-full max-w-xs">
+            <SegmentedControl
+                label="Appearance"
+                value={theme}
+                onChange={setTheme}
+                options={[
+                    { value: "light", label: "Light" },
+                    { value: "dark", label: "Dark" },
+                    { value: "auto", label: "Auto" },
+                ]}
+            />
+        </div>
+    )
+}

package/src/components/segmented-control/examples/segmented-control-views.tsx

@@ -0,0 +1,32 @@
+import { SegmentedControl } from "@passui/react"
+import { useState } from "react"
+
+const counts = { day: 4, week: 23, month: 96 }
+
+export function SegmentedControlViews() {
+    const [range, setRange] =
+        useState<keyof typeof counts>("week")
+
+    return (
+        <div className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
+            <SegmentedControl
+                label="Range"
+                value={range}
+                onChange={setRange}
+                options={[
+                    { value: "day", label: "Day" },
+                    { value: "week", label: "Week" },
+                    { value: "month", label: "Month" },
+                ]}
+            />
+            <div className="flex flex-col items-center gap-1 py-2">
+                <span className="text-large-title font-bold text-label tabular-nums">
+                    {counts[range]}
+                </span>
+                <span className="text-footnote text-label-secondary">
+                    sign-ins this {range}
+                </span>
+            </div>
+        </div>
+    )
+}

package/src/components/segmented-control/segmented-control.docs.tsx

@@ -0,0 +1,61 @@
+import { SegmentedControlOverflow } from "./examples/segmented-control-overflow"
+import { SegmentedControlViews } from "./examples/segmented-control-views"
+import { useState } from "react"
+import { defineDocs } from "../../docs/types"
+import { SegmentedControlShowcase } from "./examples/segmented-control-showcase"
+import { SegmentedControlUsage } from "./examples/segmented-control-usage"
+import { SegmentedControl } from "./segmented-control"
+
+type DemoProps = { label: string }
+
+function SegmentedControlDemo({ label }: DemoProps) {
+    const [view, setView] = useState("week")
+    return (
+        <div className="w-full max-w-xs">
+            <SegmentedControl
+                label={label}
+                value={view}
+                onChange={setView}
+                options={[
+                    { value: "day", label: "Day" },
+                    { value: "week", label: "Week" },
+                    { value: "month", label: "Month" },
+                ]}
+            />
+        </div>
+    )
+}
+
+export const segmentedControlDocs = defineDocs<DemoProps>()({
+    slug: "segmented-control",
+    name: "SegmentedControl",
+    importPath: "@passui/react",
+    controls: {
+        label: {
+            kind: "text",
+            default: "Calendar view",
+            required: true,
+        },
+    },
+    render: (values) => <SegmentedControlDemo {...values} />,
+    childrenSnippet: () => ({
+        imports: ['import { useState } from "react"'],
+        setup: ['const [view, setView] = useState("week")'],
+        children: "",
+        expressionProps: {
+            value: "view",
+            onChange: "setView",
+            options:
+                '[{ value: "day", label: "Day" }, { value: "week", label: "Week" }, { value: "month", label: "Month" }]',
+        },
+    }),
+    usage: SegmentedControlUsage,
+    showcase: SegmentedControlShowcase,
+    examples: [
+        { id: "views", component: SegmentedControlViews },
+        {
+            id: "overflow",
+            component: SegmentedControlOverflow,
+        },
+    ],
+})

package/src/components/segmented-control/segmented-control.tsx

@@ -0,0 +1,122 @@
+import { motion } from "motion/react"
+import {
+    useId,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react"
+import { cn } from "../../lib/class-names"
+import { haptic } from "../../lib/haptics"
+import { spring } from "../../motion/transitions"
+import { Picker } from "../picker/picker"
+
+/**
+ * Mutually exclusive choices with a sliding selection, as on Apple
+ * platforms. When the labels can't all fit the space it is given (a long
+ * translation, a narrow pane) it becomes a pop-up button instead of
+ * squeezing or spilling its text.
+ */
+export function SegmentedControl<T extends string>({
+    value,
+    options,
+    onChange,
+    label,
+}: {
+    value: T
+    options: Array<{ value: T; label: string }>
+    onChange: (value: T) => void
+    label: string
+}) {
+    const id = useId()
+    const frame = useRef<HTMLDivElement>(null)
+    const measure = useRef<HTMLDivElement>(null)
+    const [fits, setFits] = useState(true)
+
+    useLayoutEffect(() => {
+        const box = frame.current
+        const natural = measure.current
+        if (!box || !natural) return
+        const check = () =>
+            setFits(
+                natural.offsetWidth <= box.clientWidth + 0.5
+            )
+        check()
+        const observer = new ResizeObserver(check)
+        observer.observe(box)
+        observer.observe(natural)
+        return () => observer.disconnect()
+    }, [])
+
+    return (
+        <div ref={frame} className="relative w-full min-w-0">
+            {/* The control at its natural size, to know whether it fits. */}
+            <div
+                ref={measure}
+                aria-hidden="true"
+                className="pointer-events-none invisible absolute top-0 flex w-max p-[3px] text-footnote font-semibold"
+            >
+                {options.map((option) => (
+                    <span
+                        key={option.value}
+                        className="min-w-[64px] px-3 py-1 whitespace-nowrap"
+                    >
+                        {option.label}
+                    </span>
+                ))}
+            </div>
+            {fits ? (
+                <fieldset className="flex w-full rounded-lg bg-fill p-[3px] shadow-[inset_0_1px_2px_rgb(40_30_0/0.06)]">
+                    <legend className="sr-only">
+                        {label}
+                    </legend>
+                    {options.map((option) => {
+                        const selected =
+                            option.value === value
+                        return (
+                            <label
+                                key={option.value}
+                                className={cn(
+                                    "relative isolate min-w-[64px] flex-1 cursor-pointer rounded-md px-3 py-1 text-center text-footnote whitespace-nowrap transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent/60",
+                                    selected
+                                        ? "font-semibold text-label"
+                                        : "font-medium text-label-secondary hover:text-label"
+                                )}
+                            >
+                                <input
+                                    type="radio"
+                                    name={id}
+                                    value={option.value}
+                                    checked={selected}
+                                    onChange={() => {
+                                        haptic("selection")
+                                        onChange(option.value)
+                                    }}
+                                    className="sr-only"
+                                />
+                                {selected && (
+                                    <motion.span
+                                        layoutId={`segment-${id}`}
+                                        className="absolute inset-0 -z-10 rounded-md bg-elevated shadow-[0_0_0_0.5px_rgb(0_0_0/0.06),0_1px_2px_rgb(0_0_0/0.08),0_3px_8px_-2px_rgb(0_0_0/0.10)]"
+                                        transition={
+                                            spring.snappy
+                                        }
+                                    />
+                                )}
+                                {option.label}
+                            </label>
+                        )
+                    })}
+                </fieldset>
+            ) : (
+                <Picker<T>
+                    label={label}
+                    value={value}
+                    options={options}
+                    onChange={onChange}
+                    searchable={false}
+                    className="rounded-lg py-1.5 text-footnote font-semibold"
+                />
+            )}
+        </div>
+    )
+}

package/src/components/sheet/examples/sheet-choices.tsx

@@ -0,0 +1,58 @@
+import { LabeledContent, Section } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { Sheet } from "@passui/react/sheet"
+import { useState } from "react"
+
+const languages = [
+    "English",
+    "Français",
+    "Deutsch",
+    "日本語",
+    "中文",
+]
+
+export function SheetChoices() {
+    const [open, setOpen] = useState(false)
+    const [language, setLanguage] = useState("English")
+
+    return (
+        <div className="w-full max-w-sm">
+            <Section>
+                <LabeledContent label="Language">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setOpen(true)}
+                    >
+                        {language}
+                    </Button>
+                </LabeledContent>
+            </Section>
+            <Sheet
+                open={open}
+                onClose={() => setOpen(false)}
+                label="Language"
+            >
+                <div className="flex flex-col gap-1 p-4">
+                    {languages.map((item) => (
+                        <button
+                            key={item}
+                            type="button"
+                            aria-pressed={item === language}
+                            onClick={() => {
+                                setLanguage(item)
+                                setOpen(false)
+                            }}
+                            className="flex items-center justify-between rounded-3xl px-4 py-3 text-start text-body text-label hover:bg-fill aria-pressed:text-accent-text"
+                        >
+                            {item}
+                            {item === language && (
+                                <span aria-hidden>✓</span>
+                            )}
+                        </button>
+                    ))}
+                </div>
+            </Sheet>
+        </div>
+    )
+}

package/src/components/sheet/examples/sheet-share.tsx

@@ -0,0 +1,51 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { Sheet } from "@passui/react/sheet"
+import { Toggle } from "@passui/react/toggle"
+import { useState } from "react"
+
+export function SheetShare() {
+    const [open, setOpen] = useState(false)
+    const [canEdit, setCanEdit] = useState(false)
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>
+                Share
+            </Button>
+            <Sheet
+                open={open}
+                onClose={() => setOpen(false)}
+                label="Share note"
+            >
+                <div className="flex flex-col gap-5 p-6">
+                    <h2 className="text-title3 font-semibold text-label">
+                        Share note
+                    </h2>
+                    <Toggle
+                        label="People with the link can edit"
+                        checked={canEdit}
+                        onChange={setCanEdit}
+                    />
+                    <div className="flex justify-end gap-2">
+                        <Button
+                            variant="secondary"
+                            onClick={() => setOpen(false)}
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            variant="accent"
+                            onClick={() => {
+                                setOpen(false)
+                                toast.success("Link copied")
+                            }}
+                        >
+                            Copy link
+                        </Button>
+                    </div>
+                </div>
+            </Sheet>
+        </>
+    )
+}

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

@@ -0,0 +1,74 @@
+import {
+    LabeledContent,
+    Section,
+    SwatchPicker,
+} from "@passui/react"
+import { Button } from "@passui/react/button"
+import { Sheet } from "@passui/react/sheet"
+import { useState } from "react"
+
+const accents = [
+    {
+        value: "blush",
+        label: "Blush",
+        color: "#f2d4d7",
+        ink: "#9e3b4f",
+    },
+    {
+        value: "sage",
+        label: "Sage",
+        color: "#d6e6d3",
+        ink: "#3f6b45",
+    },
+    {
+        value: "ocean",
+        label: "Ocean",
+        color: "#d3e3f2",
+        ink: "#2f5f8f",
+    },
+]
+
+export function SheetShowcase() {
+    const [open, setOpen] = useState(false)
+    const [accent, setAccent] = useState("blush")
+
+    return (
+        <div className="w-full max-w-sm">
+            <Section title="Appearance">
+                <LabeledContent label="Accent color">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setOpen(true)}
+                    >
+                        {
+                            accents.find(
+                                (a) => a.value === accent
+                            )?.label
+                        }
+                    </Button>
+                </LabeledContent>
+            </Section>
+            <Sheet
+                open={open}
+                onClose={() => setOpen(false)}
+                label="Accent color"
+            >
+                <div className="flex flex-col gap-5 p-6">
+                    <h2 className="text-title3 font-semibold text-label">
+                        Accent color
+                    </h2>
+                    <SwatchPicker
+                        label="Accent color"
+                        options={accents}
+                        value={accent}
+                        onChange={setAccent}
+                    />
+                    <Button onClick={() => setOpen(false)}>
+                        Done
+                    </Button>
+                </div>
+            </Sheet>
+        </div>
+    )
+}

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

@@ -0,0 +1,32 @@
+import { Button } from "@passui/react/button"
+import { Sheet } from "@passui/react/sheet"
+import { useState } from "react"
+
+export function SheetUsage() {
+    const [open, setOpen] = useState(false)
+
+    return (
+        <>
+            <Button
+                variant="secondary"
+                onClick={() => setOpen(true)}
+            >
+                About this app
+            </Button>
+            <Sheet
+                open={open}
+                onClose={() => setOpen(false)}
+                label="About this app"
+            >
+                <div className="flex flex-col gap-2 p-6">
+                    <h2 className="text-title3 font-semibold text-label">
+                        Pass
+                    </h2>
+                    <p className="text-callout text-label-secondary">
+                        Version 2.4. Made in Lisbon.
+                    </p>
+                </div>
+            </Sheet>
+        </>
+    )
+}