@passui/react 0.1.17 → 0.1.20

package/src/components/text-editor/examples/text-editor-usage.tsx

@@ -1,25 +0,0 @@
-import { TextEditor } from "@passui/react/text-editor"
-import { useId, useState } from "react"
-
-export function TextEditorUsage() {
-    const bioId = useId()
-    const [bio, setBio] = useState("")
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-2">
-            <label
-                htmlFor={bioId}
-                className="text-subheadline font-semibold"
-            >
-                Bio
-            </label>
-            <TextEditor
-                id={bioId}
-                placeholder="A few words about you"
-                value={bio}
-                onChange={(event) =>
-                    setBio(event.target.value)
-                }
-            />
-        </div>
-    )
-}

package/src/components/text-editor/text-editor.docs.tsx

@@ -1,61 +0,0 @@
-import { TextEditorComment } from "./examples/text-editor-comment"
-import type { ComponentProps } from "react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { TextEditorCount } from "./examples/text-editor-count"
-import { TextEditorShowcase } from "./examples/text-editor-showcase"
-import { TextEditorUsage } from "./examples/text-editor-usage"
-import { TextEditor } from "./text-editor"
-
-type TextEditorProps = ComponentProps<typeof TextEditor>
-type DemoProps = Pick<
-    TextEditorProps,
-    "placeholder" | "disabled" | "readOnly"
->
-
-function TextEditorDemo(props: DemoProps) {
-    const [bio, setBio] = useState("")
-    return (
-        <div className="w-full max-w-sm">
-            <TextEditor
-                {...props}
-                aria-label="Bio"
-                value={bio}
-                onChange={(event) =>
-                    setBio(event.target.value)
-                }
-            />
-        </div>
-    )
-}
-
-export const textEditorDocs = defineDocs<TextEditorProps>()({
-    slug: "text-editor",
-    name: "TextEditor",
-    importPath: "@passui/react/text-editor",
-    controls: {
-        placeholder: {
-            kind: "text",
-            default: "A few words about you",
-        },
-        disabled: { kind: "boolean", default: false },
-        readOnly: { kind: "boolean", default: false },
-    },
-    render: (values) => <TextEditorDemo {...values} />,
-    childrenSnippet: () => ({
-        imports: ['import { useState } from "react"'],
-        setup: ['const [bio, setBio] = useState("")'],
-        children: "",
-        extraProps: { "aria-label": "Bio" },
-        expressionProps: {
-            value: "bio",
-            onChange: "(event) => setBio(event.target.value)",
-        },
-    }),
-    usage: TextEditorUsage,
-    showcase: TextEditorShowcase,
-    examples: [
-        { id: "count", component: TextEditorCount },
-        { id: "comment", component: TextEditorComment },
-    ],
-})

package/src/components/text-field/examples/text-field-icons.tsx

@@ -1,72 +0,0 @@
-import {
-    Link01Icon,
-    Mail01Icon,
-    Search01Icon,
-    Tick02Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function TextFieldIcons() {
-    const [email, setEmail] = useState("aiko@example.com")
-    const [site, setSite] = useState("")
-    const [query, setQuery] = useState("")
-    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
-
-    return (
-        <div className="flex w-full max-w-xs flex-col gap-4">
-            <TextField
-                label="Email"
-                type="email"
-                icon={
-                    <HugeiconsIcon
-                        icon={Mail01Icon}
-                        size={18}
-                    />
-                }
-                trailingIcon={
-                    valid && (
-                        <HugeiconsIcon
-                            icon={Tick02Icon}
-                            size={18}
-                            className="text-success"
-                        />
-                    )
-                }
-                value={email}
-                onChange={(event) =>
-                    setEmail(event.target.value)
-                }
-            />
-            <TextField
-                label="Website"
-                placeholder="example.com"
-                icon={
-                    <HugeiconsIcon
-                        icon={Link01Icon}
-                        size={18}
-                    />
-                }
-                value={site}
-                onChange={(event) =>
-                    setSite(event.target.value)
-                }
-            />
-            <TextField
-                label="Find a member"
-                placeholder="Name or email"
-                icon={
-                    <HugeiconsIcon
-                        icon={Search01Icon}
-                        size={18}
-                    />
-                }
-                value={query}
-                onChange={(event) =>
-                    setQuery(event.target.value)
-                }
-            />
-        </div>
-    )
-}

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

@@ -1,50 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function TextFieldShowcase() {
-    const [name, setName] = useState("Aiko Kamado")
-    const [role, setRole] = useState("Product designer")
-    const [site, setSite] = useState("")
-
-    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("Profile updated")
-            }}
-        >
-            <h2 className="text-headline font-semibold text-label">
-                Edit profile
-            </h2>
-            <TextField
-                label="Name"
-                value={name}
-                onChange={(event) =>
-                    setName(event.target.value)
-                }
-            />
-            <TextField
-                label="Role"
-                value={role}
-                onChange={(event) =>
-                    setRole(event.target.value)
-                }
-            />
-            <TextField
-                label="Website"
-                placeholder="example.com"
-                description="Shown on your public profile."
-                value={site}
-                onChange={(event) =>
-                    setSite(event.target.value)
-                }
-            />
-            <Button type="submit" variant="accent">
-                Save profile
-            </Button>
-        </form>
-    )
-}

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

@@ -1,18 +0,0 @@
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function TextFieldUsage() {
-    const [name, setName] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <TextField
-                label="Name"
-                placeholder="Aiko Kamado"
-                value={name}
-                onChange={(event) =>
-                    setName(event.target.value)
-                }
-            />
-        </div>
-    )
-}

package/src/components/text-field/examples/text-field-validation.tsx

@@ -1,27 +0,0 @@
-import { TextField } from "@passui/react/text-field"
-import { useState } from "react"
-
-export function TextFieldValidation() {
-    const [email, setEmail] = useState("aiko@")
-    const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
-
-    return (
-        <div className="w-full max-w-xs">
-            <TextField
-                label="Email"
-                type="email"
-                description="We only use it to sign you in."
-                value={email}
-                aria-invalid={!valid}
-                errors={
-                    valid
-                        ? []
-                        : ["Enter a full email address."]
-                }
-                onChange={(event) =>
-                    setEmail(event.target.value)
-                }
-            />
-        </div>
-    )
-}

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

@@ -1,118 +0,0 @@
-import {
-    Mail01Icon,
-    Tick02Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { useState } from "react"
-import { defineDocs } from "../../docs/types"
-import { TextFieldIcons } from "./examples/text-field-icons"
-import { TextFieldShowcase } from "./examples/text-field-showcase"
-import { TextFieldUsage } from "./examples/text-field-usage"
-import { TextFieldValidation } from "./examples/text-field-validation"
-import { TextField, type TextFieldProps } from "./text-field"
-
-// The icons are nodes, so the playground offers a switch for each and
-// the snippet writes the icon itself.
-type DemoProps = Pick<
-    TextFieldProps,
-    "label" | "placeholder" | "disabled"
-> & {
-    icon?: boolean
-    trailingIcon?: boolean
-}
-
-function TextFieldDemo({
-    icon,
-    trailingIcon,
-    ...props
-}: DemoProps) {
-    const [value, setValue] = useState("")
-    return (
-        <div className="w-full max-w-xs">
-            <TextField
-                {...props}
-                icon={
-                    icon && (
-                        <HugeiconsIcon
-                            icon={Mail01Icon}
-                            size={18}
-                        />
-                    )
-                }
-                trailingIcon={
-                    trailingIcon && (
-                        <HugeiconsIcon
-                            icon={Tick02Icon}
-                            size={18}
-                        />
-                    )
-                }
-                value={value}
-                onChange={(event) =>
-                    setValue(event.target.value)
-                }
-            />
-        </div>
-    )
-}
-
-export const textFieldDocs = defineDocs<DemoProps>()({
-    slug: "text-field",
-    name: "TextField",
-    importPath: "@passui/react/text-field",
-    controls: {
-        label: {
-            kind: "text",
-            default: "Email",
-            required: true,
-        },
-        placeholder: {
-            kind: "text",
-            default: "you@example.com",
-        },
-        disabled: { kind: "boolean", default: false },
-        icon: { kind: "boolean", default: false },
-        trailingIcon: { kind: "boolean", default: false },
-    },
-    render: (values) => <TextFieldDemo {...values} />,
-    childrenSnippet: ({ icon, trailingIcon }) => ({
-        imports: [
-            'import { useState } from "react"',
-            ...(icon || trailingIcon
-                ? [
-                      `import { ${[icon && "Mail01Icon", trailingIcon && "Tick02Icon"].filter(Boolean).join(", ")} } from "@hugeicons/core-free-icons"`,
-                      'import { HugeiconsIcon } from "@hugeicons/react"',
-                  ]
-                : []),
-        ],
-        setup: ['const [value, setValue] = useState("")'],
-        children: "",
-        omit: ["icon", "trailingIcon"],
-        expressionProps: {
-            ...(icon
-                ? {
-                      icon: "<HugeiconsIcon icon={Mail01Icon} size={18} />",
-                  }
-                : {}),
-            ...(trailingIcon
-                ? {
-                      trailingIcon:
-                          "<HugeiconsIcon icon={Tick02Icon} size={18} />",
-                  }
-                : {}),
-            value: "value",
-            onChange:
-                "(event) => setValue(event.target.value)",
-        },
-    }),
-    usage: TextFieldUsage,
-    showcase: TextFieldShowcase,
-    examples: [
-        {
-            id: "icons",
-            component: TextFieldIcons,
-            playground: { icon: true, trailingIcon: true },
-        },
-        { id: "validation", component: TextFieldValidation },
-    ],
-})

package/src/components/toast/examples/toast-action.tsx

@@ -1,32 +0,0 @@
-import { Button } from "@passui/react/button"
-import { toast } from "@passui/react/toast"
-import { useState } from "react"
-
-export function ToastAction() {
-    const [archived, setArchived] = useState(0)
-
-    return (
-        <div className="flex flex-col items-center gap-3">
-            <Button
-                variant="secondary"
-                onClick={() => {
-                    setArchived((count) => count + 1)
-                    toast("Note archived", {
-                        action: {
-                            label: "Undo",
-                            onClick: () =>
-                                setArchived(
-                                    (count) => count - 1
-                                ),
-                        },
-                    })
-                }}
-            >
-                Archive note
-            </Button>
-            <p className="text-footnote text-label-secondary">
-                Archived: {archived}
-            </p>
-        </div>
-    )
-}

package/src/components/toast/examples/toast-promise.tsx

@@ -1,45 +0,0 @@
-import { Button } from "@passui/react/button"
-import { toast } from "@passui/react/toast"
-
-function upload(fails: boolean) {
-    return new Promise<string>((resolve, reject) =>
-        setTimeout(
-            () =>
-                fails
-                    ? reject(new Error("offline"))
-                    : resolve("photo.jpg"),
-            1600
-        )
-    )
-}
-
-export function ToastPromise() {
-    return (
-        <div className="flex flex-wrap justify-center gap-2">
-            <Button
-                variant="secondary"
-                onClick={() =>
-                    toast.promise(upload(false), {
-                        loading: "Uploading",
-                        success: (name) => `${name} uploaded`,
-                        error: "Upload failed",
-                    })
-                }
-            >
-                Upload
-            </Button>
-            <Button
-                variant="secondary"
-                onClick={() =>
-                    toast.promise(upload(true), {
-                        loading: "Uploading",
-                        success: "Uploaded",
-                        error: "Upload failed. Check your connection.",
-                    })
-                }
-            >
-                Upload while offline
-            </Button>
-        </div>
-    )
-}

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

@@ -1,49 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { toast } from "@passui/react/toast"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function ToastShowcase() {
-    const [backups, setBackups] = useState(true)
-    const [alerts, setAlerts] = useState(false)
-
-    return (
-        <div className="w-full max-w-sm">
-            <Section
-                title="Account"
-                footer="Each change saves at once and confirms with a toast."
-            >
-                <LabeledContent label="Daily backups">
-                    <Toggle
-                        label="Daily backups"
-                        labelHidden
-                        checked={backups}
-                        onChange={(checked) => {
-                            setBackups(checked)
-                            toast.success(
-                                checked
-                                    ? "Backups turned on"
-                                    : "Backups turned off"
-                            )
-                        }}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Sign-in alerts">
-                    <Toggle
-                        label="Sign-in alerts"
-                        labelHidden
-                        checked={alerts}
-                        onChange={(checked) => {
-                            setAlerts(checked)
-                            toast(
-                                checked
-                                    ? "We'll email you about new sign-ins"
-                                    : "Sign-in alerts turned off"
-                            )
-                        }}
-                    />
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}

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

@@ -1,13 +0,0 @@
-import { Button } from "@passui/react/button"
-import { toast } from "@passui/react/toast"
-
-export function ToastUsage() {
-    // render one <Toaster /> near the root of your app
-    return (
-        <Button
-            onClick={() => toast.success("Changes saved")}
-        >
-            Save
-        </Button>
-    )
-}

package/src/components/toast/toast.docs.tsx

@@ -1,79 +0,0 @@
-import { Button } from "../button/button"
-import { jsxText } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { ToastAction } from "./examples/toast-action"
-import { ToastPromise } from "./examples/toast-promise"
-import { ToastShowcase } from "./examples/toast-showcase"
-import { ToastUsage } from "./examples/toast-usage"
-import { type ToastTone, toast } from "./toast-store"
-
-// toast is a function, not an element: the playground fires one from a
-// button, and the snippet writes that button.
-type DemoProps = {
-    tone: ToastTone
-    title: string
-    description: string
-}
-
-function show({ tone, title, description }: DemoProps) {
-    const options = description ? { description } : undefined
-    if (tone === "neutral") toast(title, options)
-    else toast[tone](title, options)
-}
-
-export const toastDocs = defineDocs<DemoProps>()({
-    slug: "toast",
-    name: "toast",
-    importPath: "@passui/react/toast",
-    controls: {
-        tone: {
-            kind: "select",
-            options: {
-                neutral: true,
-                success: true,
-                error: true,
-                loading: true,
-            },
-            default: "success",
-        },
-        title: {
-            kind: "text",
-            default: "Changes saved",
-        },
-        description: { kind: "text", default: "" },
-    },
-    render: (values) => (
-        <Button
-            variant="secondary"
-            onClick={() => show(values)}
-        >
-            Show toast
-        </Button>
-    ),
-    childrenSnippet: ({ tone, title, description }) => {
-        const call =
-            tone === "neutral" ? "toast" : `toast.${tone}`
-        const options = description
-            ? `, { description: ${JSON.stringify(description)} }`
-            : ""
-        return {
-            imports: [
-                'import { Button } from "@passui/react/button"',
-            ],
-            element: "Button",
-            omit: ["tone", "title", "description"],
-            extraProps: { variant: "secondary" },
-            expressionProps: {
-                onClick: `() => ${call}(${JSON.stringify(title)}${options})`,
-            },
-            children: jsxText("Show toast"),
-        }
-    },
-    usage: ToastUsage,
-    showcase: ToastShowcase,
-    examples: [
-        { id: "action", component: ToastAction },
-        { id: "promise", component: ToastPromise },
-    ],
-    previewHeight: 240,
-})

package/src/components/toggle/examples/toggle-checkboxes.tsx

@@ -1,43 +0,0 @@
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-const tasks = ["Pick a palette", "Review copy", "Ship it"]
-
-export function ToggleCheckboxes() {
-    const [done, setDone] = useState([true, false, false])
-    const all = done.every(Boolean)
-    const some = done.some(Boolean)
-
-    return (
-        <div className="flex flex-col gap-3">
-            <Toggle
-                style="checkbox"
-                label="Launch list"
-                checked={all}
-                mixed={some && !all}
-                onChange={(checked) =>
-                    setDone(tasks.map(() => checked))
-                }
-            />
-            <div className="flex flex-col gap-3 ps-8">
-                {tasks.map((task, index) => (
-                    <Toggle
-                        key={task}
-                        style="checkbox"
-                        label={task}
-                        checked={done[index]}
-                        onChange={(checked) =>
-                            setDone((current) =>
-                                current.map((value, at) =>
-                                    at === index
-                                        ? checked
-                                        : value
-                                )
-                            )
-                        }
-                    />
-                ))}
-            </div>
-        </div>
-    )
-}

package/src/components/toggle/examples/toggle-settings.tsx

@@ -1,31 +0,0 @@
-import { LabeledContent, Section } from "@passui/react"
-import { Toggle } from "@passui/react/toggle"
-import { useState } from "react"
-
-export function ToggleSettings() {
-    const [sync, setSync] = useState(true)
-    const [sounds, setSounds] = useState(false)
-
-    return (
-        <div className="w-full max-w-sm">
-            <Section title="Notifications">
-                <LabeledContent label="Sync across devices">
-                    <Toggle
-                        label="Sync"
-                        labelHidden
-                        checked={sync}
-                        onChange={setSync}
-                    />
-                </LabeledContent>
-                <LabeledContent label="Sounds">
-                    <Toggle
-                        label="Sounds"
-                        labelHidden
-                        checked={sounds}
-                        onChange={setSounds}
-                    />
-                </LabeledContent>
-            </Section>
-        </div>
-    )
-}