@passui/react 0.1.16 → 0.1.19

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

@@ -1,63 +0,0 @@
-import {
-    LabeledContent,
-    Picker,
-    Section,
-} from "@passui/react"
-import { Button } from "@passui/react/button"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function SectionShowcase() {
-    const [backup, setBackup] = useState(true)
-    const [quality, setQuality] = useState("high")
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-6">
-            <Section
-                title="Storage"
-                footer="Backups run at night while charging."
-            >
-                <LabeledContent label="Back up automatically">
-                    <Toggle
-                        label="Back up automatically"
-                        labelHidden
-                        checked={backup}
-                        onChange={setBackup}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Photo quality">
-                    <Picker
-                        label="Photo quality"
-                        value={quality}
-                        onChange={setQuality}
-                        options={[
-                            { value: "high", label: "High" },
-                            {
-                                value: "saver",
-                                label: "Space saver",
-                            },
-                        ]}
-                    />
-                </LabeledContent>
-                <LabeledContent
-                    label="Used"
-                    description="12.4 GB of 50 GB"
-                >
-                    <span className="text-subheadline text-label-secondary">
-                        25%
-                    </span>
-                </LabeledContent>
-            </Section>
-            <Section>
-                <LabeledContent
-                    label="Free up space"
-                    description="Removes copies already backed up."
-                >
-                    <Button size="sm" variant="secondary">
-                        Review
-                    </Button>
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

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

@@ -1,19 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-
-export function SectionUsage() {
-    return (
-        <div className="w-full max-w-sm">
-            <Section
-                title="Account"
-                footer="Your name appears on shared notes."
-            >
-                <LabeledContent label="Name">
-                    Aiko Kamado
-                </LabeledContent>
-                <LabeledContent label="Email">
-                    aiko@example.com
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

package/src/components/section/section.docs.tsx

@@ -1,51 +0,0 @@
-import { SectionActions } from "./examples/section-actions"
-import { SectionGroups } from "./examples/section-groups"
-import { defineDocs } from "../../docs/types"
-import { LabeledContent } from "../labeled-content/labeled-content"
-import { SectionShowcase } from "./examples/section-showcase"
-import { SectionUsage } from "./examples/section-usage"
-import { Section } from "./section"
-
-type DemoProps = { title?: string; footer?: string }
-
-export const sectionDocs = defineDocs<DemoProps>()({
-    slug: "section",
-    name: "Section",
-    importPath: "@passui/react",
-    controls: {
-        title: { kind: "text", default: "Account" },
-        footer: {
-            kind: "text",
-            default: "Your name appears on shared notes.",
-        },
-    },
-    render: (values) => (
-        <div className="w-full max-w-sm">
-            <Section {...values}>
-                <LabeledContent label="Name">
-                    <span className="text-subheadline text-label-secondary">
-                        Aiko Kamado
-                    </span>
-                </LabeledContent>
-                <LabeledContent label="Email">
-                    <span className="text-subheadline text-label-secondary">
-                        aiko@example.com
-                    </span>
-                </LabeledContent>
-            </Section>
-        </div>
-    ),
-    childrenSnippet: () => ({
-        imports: [
-            'import { LabeledContent } from "@passui/react"',
-        ],
-        children:
-            '<LabeledContent label="Name">Aiko Kamado</LabeledContent>',
-    }),
-    usage: SectionUsage,
-    showcase: SectionShowcase,
-    examples: [
-        { id: "groups", component: SectionGroups },
-        { id: "actions", component: SectionActions },
-    ],
-})

package/src/components/secure-field/examples/secure-field-new-password.tsx

@@ -1,56 +0,0 @@
-import { Button } from "@passui/react/button"
-import { SecureField } from "@passui/react/secure-field"
-import { toast } from "@passui/react"
-import { useState } from "react"
-
-export function SecureFieldNewPassword() {
-    const [next, setNext] = useState("")
-    const [again, setAgain] = useState("")
-    const short = next.length > 0 && next.length < 12
-    const differs = again.length > 0 && again !== next
-
-    return (
-        <form
-            className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
-            onSubmit={(event) => {
-                event.preventDefault()
-                toast.success("Password changed")
-            }}
-        >
-            <SecureField
-                label="New password"
-                autoComplete="new-password"
-                description="At least 12 characters."
-                errors={
-                    short
-                        ? ["Use at least 12 characters."]
-                        : []
-                }
-                value={next}
-                onChange={(event) =>
-                    setNext(event.target.value)
-                }
-            />
-            <SecureField
-                label="Confirm password"
-                autoComplete="new-password"
-                errors={
-                    differs
-                        ? ["The passwords don't match."]
-                        : []
-                }
-                value={again}
-                onChange={(event) =>
-                    setAgain(event.target.value)
-                }
-            />
-            <Button
-                type="submit"
-                variant="accent"
-                disabled={!next || short || differs || !again}
-            >
-                Change password
-            </Button>
-        </form>
-    )
-}

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

@@ -1,20 +0,0 @@
-import { SecureField } from "@passui/react/secure-field"
-import { useState } from "react"
-
-export function SecureFieldReveal() {
-    const [password, setPassword] = useState("correct-horse")
-
-    return (
-        <div className="w-full max-w-xs">
-            <SecureField
-                label="Password"
-                autoComplete="current-password"
-                revealLabels={{ show: "Show", hide: "Hide" }}
-                value={password}
-                onChange={(event) =>
-                    setPassword(event.target.value)
-                }
-            />
-        </div>
-    )
-}

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

@@ -1,62 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { SecureField } from "@passui/react/secure-field"
-import { useState } from "react"
-
-export function SecureFieldShowcase() {
-    const [current, setCurrent] = useState("")
-    const [next, setNext] = useState("")
-    const tooShort = next.length > 0 && next.length < 8
-    const reveal = { show: "Show", hide: "Hide" }
-
-    return (
-        <form
-            className="flex w-full max-w-sm flex-col gap-4 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
-            onSubmit={(event) => {
-                event.preventDefault()
-                toast.success("Password changed")
-            }}
-        >
-            <div className="flex flex-col gap-1">
-                <h2 className="text-headline font-semibold text-label">
-                    Change password
-                </h2>
-                <p className="text-footnote text-label-secondary">
-                    You stay signed in on this device.
-                </p>
-            </div>
-            <SecureField
-                label="Current password"
-                autoComplete="current-password"
-                revealLabels={reveal}
-                value={current}
-                onChange={(event) =>
-                    setCurrent(event.target.value)
-                }
-            />
-            <SecureField
-                label="New password"
-                autoComplete="new-password"
-                description="At least 8 characters."
-                revealLabels={reveal}
-                aria-invalid={tooShort}
-                errors={
-                    tooShort
-                        ? ["Use 8 characters or more."]
-                        : []
-                }
-                value={next}
-                onChange={(event) =>
-                    setNext(event.target.value)
-                }
-            />
-            <Button
-                type="submit"
-                variant="accent"
-                disabled={!current || next.length < 8}
-            >
-                Change password
-            </Button>
-        </form>
-    )
-}

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

@@ -1,19 +0,0 @@
-import { SecureField } from "@passui/react/secure-field"
-import { useState } from "react"
-
-export function SecureFieldUsage() {
-    const [password, setPassword] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <SecureField
-                label="Password"
-                autoComplete="current-password"
-                revealLabels={{ show: "Show", hide: "Hide" }}
-                value={password}
-                onChange={(event) =>
-                    setPassword(event.target.value)
-                }
-            />
-        </div>
-    )
-}

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

@@ -1,72 +0,0 @@
-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/segmented-control/examples/segmented-control-overflow.tsx

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

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

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

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

@@ -1,61 +0,0 @@
-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/sheet/examples/sheet-choices.tsx

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