@passui/react 0.1.17 → 0.1.20

package/src/components/date-picker/date-picker.docs.tsx

@@ -1,88 +0,0 @@
-import type { ComponentProps } from "react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { DatePicker } from "./date-picker"
-import { DatePickerLocales } from "./examples/date-picker-locales"
-import { DatePickerPastOnly } from "./examples/date-picker-past-only"
-import { DatePickerShowcase } from "./examples/date-picker-showcase"
-import { DatePickerUsage } from "./examples/date-picker-usage"
-
-type DatePickerProps = ComponentProps<typeof DatePicker>
-
-// A handful of locales whose field order differs, so the playground
-// shows the order following the locale.
-type DemoProps = Pick<DatePickerProps, "label"> & {
-    locale: "en-US" | "en-GB" | "fr-FR" | "zh-CN" | "ja-JP"
-}
-
-const labels = {
-    day: "Day",
-    month: "Month",
-    year: "Year",
-    invalid: "Enter a real date.",
-}
-
-function DatePickerDemo({ locale, label }: DemoProps) {
-    const [birthday, setBirthday] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <DatePicker
-                key={locale}
-                label={label}
-                labels={labels}
-                locale={locale}
-                value={birthday}
-                onChange={setBirthday}
-            />
-        </div>
-    )
-}
-
-export const datePickerDocs = defineDocs<DemoProps>()({
-    slug: "date-picker",
-    name: "DatePicker",
-    importPath: "@passui/react/date-picker",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Birthday",
-            required: true,
-        },
-        locale: {
-            kind: "select",
-            options: {
-                "en-US": true,
-                "en-GB": true,
-                "fr-FR": true,
-                "zh-CN": true,
-                "ja-JP": true,
-            },
-            default: "en-US",
-        },
-    },
-    render: (values) => <DatePickerDemo {...values} />,
-    childrenSnippet: ({ locale }) => ({
-        imports: ['import { useState } from "react"'],
-        setup: [
-            'const [birthday, setBirthday] = useState("")',
-        ],
-        children: "",
-        omit: ["locale"],
-        extraProps: { locale },
-        expressionProps: {
-            labels: '{ day: "Day", month: "Month", year: "Year", invalid: "Enter a real date." }',
-            value: "birthday",
-            onChange: "setBirthday",
-        },
-    }),
-    usage: DatePickerUsage,
-    showcase: DatePickerShowcase,
-    examples: [
-        {
-            id: "locales",
-            component: DatePickerLocales,
-            playground: { locale: "zh-CN" },
-        },
-        { id: "past-only", component: DatePickerPastOnly },
-    ],
-})

package/src/components/date-picker/examples/date-picker-locales.tsx

@@ -1,41 +0,0 @@
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-const labels = {
-    day: "Day",
-    month: "Month",
-    year: "Year",
-    invalid: "Enter a real date.",
-}
-
-export function DatePickerLocales() {
-    const [us, setUs] = useState("1994-07-21")
-    const [uk, setUk] = useState("1994-07-21")
-    const [cn, setCn] = useState("1994-07-21")
-
-    return (
-        <div className="flex w-full max-w-xs flex-col gap-8">
-            <DatePicker
-                label="United States"
-                labels={labels}
-                locale="en-US"
-                value={us}
-                onChange={setUs}
-            />
-            <DatePicker
-                label="United Kingdom"
-                labels={labels}
-                locale="en-GB"
-                value={uk}
-                onChange={setUk}
-            />
-            <DatePicker
-                label="China"
-                labels={labels}
-                locale="zh-CN"
-                value={cn}
-                onChange={setCn}
-            />
-        </div>
-    )
-}

package/src/components/date-picker/examples/date-picker-past-only.tsx

@@ -1,29 +0,0 @@
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-export function DatePickerPastOnly() {
-    const [birthday, setBirthday] = useState("2090-01-01")
-    const today = new Date().toISOString().slice(0, 10)
-
-    return (
-        <div className="flex w-full max-w-xs flex-col gap-3">
-            <DatePicker
-                label="Birthday"
-                labels={{
-                    day: "Day",
-                    month: "Month",
-                    year: "Year",
-                    invalid:
-                        "Your birthday can't be in the future.",
-                }}
-                locale="en-US"
-                max={today}
-                value={birthday}
-                onChange={setBirthday}
-            />
-            <p className="text-footnote text-label-secondary">
-                Saved value: {birthday || "none yet"}
-            </p>
-        </div>
-    )
-}

package/src/components/date-picker/examples/date-picker-showcase.tsx

@@ -1,49 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-export function DatePickerShowcase() {
-    const [birthday, setBirthday] = useState("")
-    const today = new Date().toISOString().slice(0, 10)
-
-    return (
-        <form
-            className="flex w-full max-w-sm flex-col gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
-            onSubmit={(event) => {
-                event.preventDefault()
-                toast.success("Birthday saved")
-            }}
-        >
-            <div className="flex flex-col gap-1">
-                <h2 className="text-headline font-semibold text-label">
-                    When's your birthday?
-                </h2>
-                <p className="text-footnote text-label-secondary">
-                    We use it to keep your account suited to
-                    your age. It isn't shown to anyone.
-                </p>
-            </div>
-            <DatePicker
-                label="Birthday"
-                labels={{
-                    day: "Day",
-                    month: "Month",
-                    year: "Year",
-                    invalid: "Enter a real date in the past.",
-                }}
-                locale="en-US"
-                max={today}
-                value={birthday}
-                onChange={setBirthday}
-            />
-            <Button
-                type="submit"
-                variant="accent"
-                disabled={!birthday}
-            >
-                Continue
-            </Button>
-        </form>
-    )
-}

package/src/components/date-picker/examples/date-picker-usage.tsx

@@ -1,22 +0,0 @@
-import { DatePicker } from "@passui/react/date-picker"
-import { useState } from "react"
-
-export function DatePickerUsage() {
-    const [birthday, setBirthday] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <DatePicker
-                label="Birthday"
-                labels={{
-                    day: "Day",
-                    month: "Month",
-                    year: "Year",
-                    invalid: "Enter a real date.",
-                }}
-                locale="en-US"
-                value={birthday}
-                onChange={setBirthday}
-            />
-        </div>
-    )
-}

package/src/components/dialog/dialog.docs.tsx

@@ -1,114 +0,0 @@
-import { useState } from "react"
-import { Button } from "../button/button"
-import { jsxAttribute } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { Dialog, type DialogPresentation } from "./dialog"
-import { DialogConfirm } from "./examples/dialog-confirm"
-import { DialogForm } from "./examples/dialog-form"
-import { DialogInline } from "./examples/dialog-inline"
-import { DialogShowcase } from "./examples/dialog-showcase"
-import { DialogUsage } from "./examples/dialog-usage"
-
-// `destructive` is the tone of Dialog.Actions in the footer; the snippet
-// writes that footer itself.
-type DemoProps = {
-    title: string
-    description: string
-    presentation?: DialogPresentation
-    destructive: boolean
-}
-
-function DialogDemo({
-    title,
-    description,
-    presentation,
-    destructive,
-}: DemoProps) {
-    const [open, setOpen] = useState(false)
-    return (
-        <div className="flex w-full max-w-sm flex-col items-center gap-4">
-            <Button
-                variant="secondary"
-                onClick={() => setOpen(true)}
-            >
-                Open dialog
-            </Button>
-            <Dialog
-                open={open}
-                onOpenChange={setOpen}
-                title={title}
-                description={description || undefined}
-                presentation={presentation}
-                footer={
-                    <Dialog.Actions
-                        submitLabel={
-                            destructive ? "Delete" : "Save"
-                        }
-                        cancelLabel="Cancel"
-                        tone={
-                            destructive
-                                ? "destructive"
-                                : "default"
-                        }
-                        onConfirm={() => setOpen(false)}
-                    />
-                }
-            />
-        </div>
-    )
-}
-
-export const dialogDocs = defineDocs<DemoProps>()({
-    slug: "dialog",
-    name: "Dialog",
-    importPath: "@passui/react/dialog",
-    controls: {
-        title: {
-            kind: "text",
-            default: "Rename project",
-            required: true,
-        },
-        description: {
-            kind: "text",
-            default: "The new name shows everywhere at once.",
-        },
-        presentation: {
-            kind: "select",
-            options: {
-                drawer: true,
-                center: true,
-                inline: true,
-            },
-            default: "drawer",
-        },
-        destructive: { kind: "boolean", default: false },
-    },
-    render: (values) => <DialogDemo {...values} />,
-    childrenSnippet: ({ destructive }) => ({
-        imports: ['import { useState } from "react"'],
-        setup: ["const [open, setOpen] = useState(false)"],
-        omit: ["destructive"],
-        expressionProps: {
-            open: "open",
-            onOpenChange: "setOpen",
-            footer: `<Dialog.Actions ${jsxAttribute("submitLabel", destructive ? "Delete" : "Save")} cancelLabel="Cancel"${destructive ? ' tone="destructive"' : ""} onConfirm={() => setOpen(false)} />`,
-        },
-        children: "",
-    }),
-    usage: DialogUsage,
-    showcase: DialogShowcase,
-    examples: [
-        { id: "form", component: DialogForm },
-        {
-            id: "confirm",
-            component: DialogConfirm,
-            playground: { destructive: true },
-        },
-        {
-            id: "inline",
-            component: DialogInline,
-            playground: { presentation: "inline" },
-        },
-    ],
-    previewHeight: 460,
-})

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

@@ -1,24 +0,0 @@
-import { confirmDialog, toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-
-export function DialogConfirm() {
-    return (
-        <Button
-            variant="destructive"
-            onClick={async () => {
-                // resolves true when confirmed; needs one <DialogHost />
-                const confirmed = await confirmDialog({
-                    title: "Delete this app?",
-                    message:
-                        "People signed in with it will be signed out.",
-                    confirmLabel: "Delete",
-                    cancelLabel: "Cancel",
-                    destructive: true,
-                })
-                if (confirmed) toast.success("App deleted")
-            }}
-        >
-            Delete app
-        </Button>
-    )
-}

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