@passui/react 0.1.16 → 0.1.19

package/src/components/table/table.docs.tsx

@@ -1,131 +0,0 @@
-import { jsxText } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { TableEmpty } from "./examples/table-empty"
-import { TableInvoices } from "./examples/table-invoices"
-import { TableSelection } from "./examples/table-selection"
-import { TableWide } from "./examples/table-wide"
-import { TableShowcase } from "./examples/table-showcase"
-import { TableUsage } from "./examples/table-usage"
-import {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableFooter,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "./table"
-
-// The caption and footer are parts inside Table, so the snippet writes
-// them into the children.
-type DemoProps = {
-    caption: string
-    footer: boolean
-}
-
-const invoices = [
-    { id: "INV-104", status: "Paid", amount: "€120.00" },
-    { id: "INV-105", status: "Pending", amount: "€48.50" },
-    { id: "INV-106", status: "Paid", amount: "€310.00" },
-]
-
-export const tableDocs = defineDocs<DemoProps>()({
-    slug: "table",
-    name: "Table",
-    importPath: "@passui/react/table",
-    controls: {
-        caption: { kind: "text", default: "Recent invoices" },
-        footer: { kind: "boolean", default: true },
-    },
-    render: ({ caption, footer }) => (
-        <div className="w-full max-w-md rounded-4xl bg-elevated p-4 shadow-sm ring-1 ring-separator/60">
-            <Table>
-                {caption && (
-                    <TableCaption>{caption}</TableCaption>
-                )}
-                <TableHeader>
-                    <TableRow>
-                        <TableHead>Invoice</TableHead>
-                        <TableHead>Status</TableHead>
-                        <TableHead className="text-right">
-                            Amount
-                        </TableHead>
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {invoices.map((invoice) => (
-                        <TableRow key={invoice.id}>
-                            <TableCell>
-                                {invoice.id}
-                            </TableCell>
-                            <TableCell>
-                                {invoice.status}
-                            </TableCell>
-                            <TableCell className="text-right tabular-nums">
-                                {invoice.amount}
-                            </TableCell>
-                        </TableRow>
-                    ))}
-                </TableBody>
-                {footer && (
-                    <TableFooter>
-                        <TableRow>
-                            <TableCell colSpan={2}>
-                                Total
-                            </TableCell>
-                            <TableCell className="text-right tabular-nums">
-                                €478.50
-                            </TableCell>
-                        </TableRow>
-                    </TableFooter>
-                )}
-            </Table>
-        </div>
-    ),
-    childrenSnippet: ({ caption, footer }) => ({
-        imports: [
-            `import { TableBody, ${caption ? "TableCaption, " : ""}TableCell, ${footer ? "TableFooter, " : ""}TableHead, TableHeader, TableRow } from "@passui/react/table"`,
-        ],
-        omit: ["caption", "footer"],
-        children: [
-            "",
-            ...(caption
-                ? [
-                      `    <TableCaption>${jsxText(caption)}</TableCaption>`,
-                  ]
-                : []),
-            "    <TableHeader>",
-            "        <TableRow>",
-            "            <TableHead>Invoice</TableHead>",
-            '            <TableHead className="text-right">Amount</TableHead>',
-            "        </TableRow>",
-            "    </TableHeader>",
-            "    <TableBody>",
-            "        <TableRow>",
-            "            <TableCell>INV-104</TableCell>",
-            '            <TableCell className="text-right">€120.00</TableCell>',
-            "        </TableRow>",
-            "    </TableBody>",
-            ...(footer
-                ? [
-                      "    <TableFooter>",
-                      "        <TableRow>",
-                      "            <TableCell>Total</TableCell>",
-                      '            <TableCell className="text-right">€120.00</TableCell>',
-                      "        </TableRow>",
-                      "    </TableFooter>",
-                  ]
-                : []),
-            "",
-        ].join("\n"),
-    }),
-    usage: TableUsage,
-    showcase: TableShowcase,
-    examples: [
-        { id: "invoices", component: TableInvoices },
-        { id: "selection", component: TableSelection },
-        { id: "wide", component: TableWide },
-        { id: "empty", component: TableEmpty },
-    ],
-})

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

@@ -1,48 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { TextEditor } from "@passui/react/text-editor"
-import { useId, useState } from "react"
-
-export function TextEditorComment() {
-    const commentId = useId()
-    const [comment, setComment] = useState("")
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-3 rounded-4xl bg-elevated p-5 shadow-sm ring-1 ring-separator/60">
-            <label
-                htmlFor={commentId}
-                className="text-subheadline font-semibold"
-            >
-                Add a comment
-            </label>
-            <TextEditor
-                id={commentId}
-                placeholder="Share your thoughts"
-                value={comment}
-                onChange={(event) =>
-                    setComment(event.target.value)
-                }
-            />
-            <div className="flex justify-end gap-2">
-                <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => setComment("")}
-                >
-                    Cancel
-                </Button>
-                <Button
-                    variant="accent"
-                    size="sm"
-                    disabled={!comment.trim()}
-                    onClick={() => {
-                        setComment("")
-                        toast.success("Comment posted")
-                    }}
-                >
-                    Post
-                </Button>
-            </div>
-        </div>
-    )
-}

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

@@ -1,38 +0,0 @@
-import { TextEditor } from "@passui/react/text-editor"
-import { useId, useState } from "react"
-
-const limit = 160
-
-export function TextEditorCount() {
-    const statusId = useId()
-    const [status, setStatus] = useState(
-        "Out hiking until Sunday."
-    )
-    const countId = useId()
-
-    return (
-        <div className="flex w-full max-w-sm flex-col gap-2">
-            <label
-                htmlFor={statusId}
-                className="text-subheadline font-semibold"
-            >
-                Status
-            </label>
-            <TextEditor
-                id={statusId}
-                maxLength={limit}
-                aria-describedby={countId}
-                value={status}
-                onChange={(event) =>
-                    setStatus(event.target.value)
-                }
-            />
-            <span
-                id={countId}
-                className="self-end text-caption text-label-tertiary tabular-nums"
-            >
-                {status.length} / {limit}
-            </span>
-        </div>
-    )
-}

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

@@ -1,58 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { TextEditor } from "@passui/react/text-editor"
-import { TextField } from "@passui/react/text-field"
-import { useId, useState } from "react"
-
-export function TextEditorShowcase() {
-    const messageId = useId()
-    const [subject, setSubject] = useState("")
-    const [message, setMessage] = 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("Thanks, we got your message")
-                setSubject("")
-                setMessage("")
-            }}
-        >
-            <h2 className="text-headline font-semibold text-label">
-                Contact support
-            </h2>
-            <TextField
-                label="Subject"
-                placeholder="I can't sign in on my tablet"
-                value={subject}
-                onChange={(event) =>
-                    setSubject(event.target.value)
-                }
-            />
-            <div className="flex flex-col gap-2">
-                <label
-                    htmlFor={messageId}
-                    className="text-subheadline font-semibold"
-                >
-                    Message
-                </label>
-                <TextEditor
-                    id={messageId}
-                    placeholder="What happened, and what did you expect?"
-                    value={message}
-                    onChange={(event) =>
-                        setMessage(event.target.value)
-                    }
-                />
-            </div>
-            <Button
-                type="submit"
-                variant="accent"
-                disabled={!subject || !message}
-            >
-                Send
-            </Button>
-        </form>
-    )
-}

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