@passui/react 0.1.17 → 0.1.20

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

@@ -1,33 +0,0 @@
-import { Ambient } from "@passui/react/ambient"
-import { Button } from "@passui/react/button"
-
-export function AmbientShowcase() {
-    return (
-        <Ambient
-            src="/avatars/mira.svg"
-            className="flex w-full max-w-sm flex-col items-center gap-4 py-12 text-center"
-        >
-            <img
-                src="/avatars/mira.svg"
-                alt=""
-                className="size-28 rounded-full shadow-sm"
-            />
-            <div className="flex flex-col gap-1">
-                <h2 className="text-title2 font-bold text-label">
-                    Mira Patel
-                </h2>
-                <p className="text-callout text-label-secondary">
-                    Support lead, Lisbon
-                </p>
-            </div>
-            <div className="flex gap-2">
-                <Button variant="accent" size="sm">
-                    Message
-                </Button>
-                <Button variant="secondary" size="sm">
-                    View profile
-                </Button>
-            </div>
-        </Ambient>
-    )
-}

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

@@ -1,19 +0,0 @@
-import { Ambient } from "@passui/react/ambient"
-
-export function AmbientUsage() {
-    return (
-        <Ambient
-            src="/avatars/aiko.svg"
-            className="flex flex-col items-center gap-3 py-10"
-        >
-            <img
-                src="/avatars/aiko.svg"
-                alt=""
-                className="size-20 rounded-full"
-            />
-            <p className="text-headline font-semibold text-label">
-                Aiko Kamado
-            </p>
-        </Ambient>
-    )
-}

package/src/components/button/button.docs.tsx

@@ -1,116 +0,0 @@
-import { ArrowRight01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { jsxText } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { Button, type ButtonProps } from "./button"
-import type { ButtonSize } from "./button-styles"
-import { ButtonDisabled } from "./examples/button-disabled"
-import { ButtonIcon } from "./examples/button-icon"
-import { ButtonLink } from "./examples/button-link"
-import { ButtonPending } from "./examples/button-pending"
-import { ButtonShowcase } from "./examples/button-showcase"
-import { ButtonSizes } from "./examples/button-sizes"
-import { ButtonUsage } from "./examples/button-usage"
-import { ButtonVariants } from "./examples/button-variants"
-import { ButtonWithIcon } from "./examples/button-with-icon"
-
-// Sample values only: the site writes all of the docs' prose.
-const sampleLabel = "Continue"
-
-const iconSizes = new Set<ButtonSize>([
-    "icon",
-    "icon-xs",
-    "icon-sm",
-    "icon-lg",
-    "icon-full",
-])
-
-export const buttonDocs = defineDocs<ButtonProps>()({
-    slug: "button",
-    name: "Button",
-    importPath: "@passui/react/button",
-    controls: {
-        variant: {
-            kind: "select",
-            options: {
-                default: true,
-                secondary: true,
-                outline: true,
-                ghost: true,
-                link: true,
-                accent: true,
-                destructive: true,
-            },
-            default: "default",
-        },
-        size: {
-            kind: "select",
-            options: {
-                default: true,
-                xs: true,
-                sm: true,
-                lg: true,
-                icon: true,
-                "icon-xs": true,
-                "icon-sm": true,
-                "icon-lg": true,
-                "icon-full": true,
-            },
-            default: "default",
-        },
-        isPending: { kind: "boolean", default: false },
-        disabled: { kind: "boolean", default: false },
-        children: { kind: "text", default: sampleLabel },
-    },
-    render: ({ children, size, ...props }) =>
-        iconSizes.has(size) ? (
-            <Button
-                {...props}
-                size={size}
-                aria-label={children}
-            >
-                <HugeiconsIcon
-                    icon={ArrowRight01Icon}
-                    size={20}
-                />
-            </Button>
-        ) : (
-            <Button {...props} size={size}>
-                {children}
-            </Button>
-        ),
-    childrenSnippet: ({ children, size }) =>
-        iconSizes.has(size)
-            ? {
-                  imports: [
-                      'import { ArrowRight01Icon } from "@hugeicons/core-free-icons"',
-                      'import { HugeiconsIcon } from "@hugeicons/react"',
-                  ],
-                  children:
-                      "<HugeiconsIcon icon={ArrowRight01Icon} size={20} />",
-                  extraProps: { "aria-label": children },
-              }
-            : { imports: [], children: jsxText(children) },
-    usage: ButtonUsage,
-    showcase: ButtonShowcase,
-    examples: [
-        { id: "variants", component: ButtonVariants },
-        { id: "sizes", component: ButtonSizes },
-        { id: "with-icon", component: ButtonWithIcon },
-        { id: "icon", component: ButtonIcon },
-        {
-            id: "pending",
-            component: ButtonPending,
-            playground: {
-                variant: "accent",
-                isPending: true,
-            },
-        },
-        {
-            id: "disabled",
-            component: ButtonDisabled,
-            playground: { disabled: true },
-        },
-        { id: "link", component: ButtonLink },
-    ],
-})

package/src/components/button/examples/button-disabled.tsx

@@ -1,19 +0,0 @@
-import { Toggle } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { useState } from "react"
-
-export function ButtonDisabled() {
-    const [agreed, setAgreed] = useState(false)
-
-    return (
-        <div className="flex w-full max-w-xs flex-col gap-4">
-            <Toggle
-                style="checkbox"
-                label="I agree to the terms"
-                checked={agreed}
-                onChange={setAgreed}
-            />
-            <Button disabled={!agreed}>Create account</Button>
-        </div>
-    )
-}

package/src/components/button/examples/button-icon.tsx

@@ -1,39 +0,0 @@
-import {
-    TextAlignCenterIcon,
-    TextAlignLeftIcon,
-    TextBoldIcon,
-    TextItalicIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "@passui/react/button"
-
-const tools = [
-    { label: "Bold", icon: TextBoldIcon },
-    { label: "Italic", icon: TextItalicIcon },
-    { label: "Align left", icon: TextAlignLeftIcon },
-    { label: "Align centre", icon: TextAlignCenterIcon },
-]
-
-export function ButtonIcon() {
-    return (
-        <div
-            role="toolbar"
-            aria-label="Formatting"
-            className="flex items-center gap-1 rounded-full bg-fill/60 p-1"
-        >
-            {tools.map((tool) => (
-                <Button
-                    key={tool.label}
-                    size="icon-sm"
-                    variant="ghost"
-                    aria-label={tool.label}
-                >
-                    <HugeiconsIcon
-                        icon={tool.icon}
-                        size={18}
-                    />
-                </Button>
-            ))}
-        </div>
-    )
-}

package/src/components/button/examples/button-link.tsx

@@ -1,12 +0,0 @@
-import { buttonStyle } from "@passui/react/button"
-
-export function ButtonLink() {
-    return (
-        <a
-            href="#guide"
-            className={buttonStyle({ variant: "secondary" })}
-        >
-            Read the guide
-        </a>
-    )
-}

package/src/components/button/examples/button-pending.tsx

@@ -1,27 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { useState } from "react"
-
-export function ButtonPending() {
-    const [saving, setSaving] = useState(false)
-
-    async function save() {
-        setSaving(true)
-        // stands in for a real request
-        await new Promise((resolve) =>
-            setTimeout(resolve, 1600)
-        )
-        setSaving(false)
-        toast.success("Profile saved")
-    }
-
-    return (
-        <Button
-            variant="accent"
-            isPending={saving}
-            onClick={save}
-        >
-            Save profile
-        </Button>
-    )
-}

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

@@ -1,115 +0,0 @@
-import {
-    Delete02Icon,
-    Link01Icon,
-    Share08Icon,
-    StarIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { TextField, toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { useState } from "react"
-
-export function ButtonShowcase() {
-    const [name, setName] = useState("Passui launch")
-    const [saving, setSaving] = useState(false)
-
-    async function save() {
-        setSaving(true)
-        await new Promise((resolve) =>
-            setTimeout(resolve, 1400)
-        )
-        setSaving(false)
-        toast.success("Project saved")
-    }
-
-    return (
-        <div className="flex w-full max-w-md flex-col gap-4">
-            <section className="flex flex-col gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60">
-                <header className="flex items-start justify-between gap-4">
-                    <div className="flex flex-col gap-1">
-                        <h2 className="text-headline font-semibold text-label">
-                            Project settings
-                        </h2>
-                        <p className="text-footnote text-label-secondary">
-                            Changes apply to everyone on the
-                            team.
-                        </p>
-                    </div>
-                    <div className="flex gap-1">
-                        <Button
-                            size="icon-sm"
-                            variant="ghost"
-                            aria-label="Star"
-                        >
-                            <HugeiconsIcon
-                                icon={StarIcon}
-                                size={18}
-                            />
-                        </Button>
-                        <Button
-                            size="icon-sm"
-                            variant="ghost"
-                            aria-label="Copy link"
-                        >
-                            <HugeiconsIcon
-                                icon={Link01Icon}
-                                size={18}
-                            />
-                        </Button>
-                        <Button
-                            size="icon-sm"
-                            variant="ghost"
-                            aria-label="Share"
-                        >
-                            <HugeiconsIcon
-                                icon={Share08Icon}
-                                size={18}
-                            />
-                        </Button>
-                    </div>
-                </header>
-                <TextField
-                    label="Project name"
-                    value={name}
-                    onChange={(event) =>
-                        setName(event.target.value)
-                    }
-                />
-                <footer className="flex justify-end gap-2">
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            setName("Passui launch")
-                        }
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="accent"
-                        isPending={saving}
-                        onClick={save}
-                    >
-                        Save changes
-                    </Button>
-                </footer>
-            </section>
-            <section className="flex items-center justify-between gap-4 rounded-4xl bg-elevated p-5 ring-1 ring-danger/25">
-                <div className="flex flex-col gap-1">
-                    <span className="text-subheadline font-semibold text-label">
-                        Delete project
-                    </span>
-                    <span className="text-footnote text-label-secondary">
-                        This removes every file for good.
-                    </span>
-                </div>
-                <Button variant="destructive" size="sm">
-                    <HugeiconsIcon
-                        icon={Delete02Icon}
-                        size={16}
-                    />
-                    Delete
-                </Button>
-            </section>
-        </div>
-    )
-}

package/src/components/button/examples/button-sizes.tsx

@@ -1,12 +0,0 @@
-import { Button } from "@passui/react/button"
-
-export function ButtonSizes() {
-    return (
-        <div className="flex flex-wrap items-center justify-center gap-3">
-            <Button size="xs">Extra small</Button>
-            <Button size="sm">Small</Button>
-            <Button>Default</Button>
-            <Button size="lg">Large</Button>
-        </div>
-    )
-}

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

@@ -1,12 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-
-export function ButtonUsage() {
-    return (
-        <Button
-            onClick={() => toast.success("Changes saved")}
-        >
-            Save changes
-        </Button>
-    )
-}

package/src/components/button/examples/button-variants.tsx

@@ -1,15 +0,0 @@
-import { Button } from "@passui/react/button"
-
-export function ButtonVariants() {
-    return (
-        <div className="flex flex-wrap items-center justify-center gap-3">
-            <Button>Default</Button>
-            <Button variant="secondary">Secondary</Button>
-            <Button variant="outline">Outline</Button>
-            <Button variant="ghost">Ghost</Button>
-            <Button variant="link">Link</Button>
-            <Button variant="accent">Accent</Button>
-            <Button variant="destructive">Destructive</Button>
-        </div>
-    )
-}

package/src/components/button/examples/button-with-icon.tsx

@@ -1,32 +0,0 @@
-import {
-    Delete02Icon,
-    Download04Icon,
-    Mail01Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "@passui/react/button"
-
-export function ButtonWithIcon() {
-    return (
-        <div className="flex flex-wrap items-center justify-center gap-3">
-            <Button variant="accent">
-                <HugeiconsIcon icon={Mail01Icon} size={18} />
-                Email
-            </Button>
-            <Button variant="secondary">
-                <HugeiconsIcon
-                    icon={Download04Icon}
-                    size={18}
-                />
-                Download
-            </Button>
-            <Button variant="destructive">
-                <HugeiconsIcon
-                    icon={Delete02Icon}
-                    size={18}
-                />
-                Delete
-            </Button>
-        </div>
-    )
-}

package/src/components/button/examples/icon-button-player.tsx

@@ -1,38 +0,0 @@
-import {
-    NextIcon,
-    PauseIcon,
-    PlayIcon,
-    PreviousIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { IconButton } from "@passui/react/icon-button"
-import { useState } from "react"
-
-export function IconButtonPlayer() {
-    const [playing, setPlaying] = useState(false)
-
-    return (
-        <div className="flex items-center gap-3">
-            <IconButton label="Previous" variant="ghost">
-                <HugeiconsIcon
-                    icon={PreviousIcon}
-                    size={20}
-                />
-            </IconButton>
-            <IconButton
-                label={playing ? "Pause" : "Play"}
-                variant="accent"
-                size="icon-lg"
-                onClick={() => setPlaying((value) => !value)}
-            >
-                <HugeiconsIcon
-                    icon={playing ? PauseIcon : PlayIcon}
-                    size={22}
-                />
-            </IconButton>
-            <IconButton label="Next" variant="ghost">
-                <HugeiconsIcon icon={NextIcon} size={20} />
-            </IconButton>
-        </div>
-    )
-}

package/src/components/button/examples/icon-button-showcase.tsx

@@ -1,83 +0,0 @@
-import {
-    ArrowLeft01Icon,
-    Bookmark02Icon,
-    MoreHorizontalIcon,
-    Share08Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { toast } from "@passui/react"
-import { IconButton } from "@passui/react/icon-button"
-import { useState } from "react"
-
-export function IconButtonShowcase() {
-    const [saved, setSaved] = useState(false)
-
-    return (
-        <article className="flex w-full max-w-sm flex-col overflow-hidden rounded-4xl bg-elevated shadow-sm ring-1 ring-separator/60">
-            <header className="flex items-center justify-between p-3">
-                <IconButton
-                    label="Back"
-                    variant="ghost"
-                    size="icon-sm"
-                >
-                    <HugeiconsIcon
-                        icon={ArrowLeft01Icon}
-                        size={18}
-                    />
-                </IconButton>
-                <div className="flex gap-1">
-                    <IconButton
-                        label={
-                            saved
-                                ? "Remove bookmark"
-                                : "Bookmark"
-                        }
-                        variant={saved ? "accent" : "ghost"}
-                        size="icon-sm"
-                        onClick={() =>
-                            setSaved((value) => !value)
-                        }
-                    >
-                        <HugeiconsIcon
-                            icon={Bookmark02Icon}
-                            size={18}
-                        />
-                    </IconButton>
-                    <IconButton
-                        label="Share"
-                        variant="ghost"
-                        size="icon-sm"
-                        onClick={() =>
-                            toast.success("Link copied")
-                        }
-                    >
-                        <HugeiconsIcon
-                            icon={Share08Icon}
-                            size={18}
-                        />
-                    </IconButton>
-                    <IconButton
-                        label="More"
-                        variant="ghost"
-                        size="icon-sm"
-                    >
-                        <HugeiconsIcon
-                            icon={MoreHorizontalIcon}
-                            size={18}
-                        />
-                    </IconButton>
-                </div>
-            </header>
-            <div className="h-36 bg-accent-soft" />
-            <div className="flex flex-col gap-1 p-5">
-                <h2 className="text-headline font-semibold text-label">
-                    Designing for calm
-                </h2>
-                <p className="text-footnote text-label-secondary">
-                    Six minutes · Saved items stay on every
-                    device.
-                </p>
-            </div>
-        </article>
-    )
-}

package/src/components/button/examples/icon-button-usage.tsx

@@ -1,11 +0,0 @@
-import { Settings02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { IconButton } from "@passui/react/icon-button"
-
-export function IconButtonUsage() {
-    return (
-        <IconButton label="Settings" variant="ghost">
-            <HugeiconsIcon icon={Settings02Icon} size={20} />
-        </IconButton>
-    )
-}

package/src/components/button/examples/icon-button-variants.tsx

@@ -1,39 +0,0 @@
-import {
-    Delete02Icon,
-    FavouriteIcon,
-    PlusSignIcon,
-    Settings02Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { IconButton } from "@passui/react/icon-button"
-
-export function IconButtonVariants() {
-    return (
-        <div className="flex flex-wrap items-center justify-center gap-3">
-            <IconButton label="Add" variant="accent">
-                <HugeiconsIcon
-                    icon={PlusSignIcon}
-                    size={20}
-                />
-            </IconButton>
-            <IconButton label="Like" variant="secondary">
-                <HugeiconsIcon
-                    icon={FavouriteIcon}
-                    size={20}
-                />
-            </IconButton>
-            <IconButton label="Settings" variant="outline">
-                <HugeiconsIcon
-                    icon={Settings02Icon}
-                    size={20}
-                />
-            </IconButton>
-            <IconButton label="Delete" variant="destructive">
-                <HugeiconsIcon
-                    icon={Delete02Icon}
-                    size={20}
-                />
-            </IconButton>
-        </div>
-    )
-}