@passui/react 0.0.0-stage → 0.1.15

package/src/components/ambient/examples/ambient-now-playing.tsx

@@ -0,0 +1,55 @@
+import {
+    PauseIcon,
+    NextIcon,
+    PreviousIcon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { Ambient } from "@passui/react/ambient"
+import { IconButton } from "@passui/react/icon-button"
+
+export function AmbientNowPlaying() {
+    return (
+        <Ambient
+            src="/avatars/kenji.svg"
+            className="flex w-full max-w-xs flex-col items-center gap-4 py-10 text-center"
+        >
+            <img
+                src="/avatars/kenji.svg"
+                alt=""
+                className="size-40 rounded-4xl shadow-sm"
+            />
+            <div className="flex flex-col">
+                <span className="text-headline font-semibold text-label">
+                    Morning Light
+                </span>
+                <span className="text-footnote text-label-secondary">
+                    Kenji Mori
+                </span>
+            </div>
+            <div className="flex items-center gap-2">
+                <IconButton label="Previous" variant="ghost">
+                    <HugeiconsIcon
+                        icon={PreviousIcon}
+                        size={22}
+                    />
+                </IconButton>
+                <IconButton
+                    label="Pause"
+                    variant="secondary"
+                    size="icon-lg"
+                >
+                    <HugeiconsIcon
+                        icon={PauseIcon}
+                        size={24}
+                    />
+                </IconButton>
+                <IconButton label="Next" variant="ghost">
+                    <HugeiconsIcon
+                        icon={NextIcon}
+                        size={22}
+                    />
+                </IconButton>
+            </div>
+        </Ambient>
+    )
+}

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

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

@@ -0,0 +1,19 @@
+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/ambient/index.ts

@@ -0,0 +1 @@
+export * from "./ambient"

package/src/components/button/button-styles.ts

@@ -0,0 +1,60 @@
+export type ButtonVariant =
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link"
+    | "accent"
+
+export type ButtonSize =
+    | "default"
+    | "xs"
+    | "sm"
+    | "lg"
+    | "icon"
+    | "icon-xs"
+    | "icon-sm"
+    | "icon-lg"
+    | "icon-full"
+
+export type IconButtonSize =
+    | "icon"
+    | "icon-xs"
+    | "icon-sm"
+    | "icon-lg"
+
+export const buttonVariants: Record<ButtonVariant, string> = {
+    default:
+        "bg-inverse text-on-inverse shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.12]",
+    destructive:
+        "bg-danger text-background shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.18),0_6px_16px_-6px_rgb(0_0_0/0.35)] hover:brightness-[1.08]",
+    outline:
+        "border border-separator bg-transparent text-label hover:bg-fill/60",
+    secondary:
+        "bg-elevated text-label shadow-[inset_0_0_0_0.5px_color-mix(in_srgb,var(--color-separator)_55%,transparent),0_1px_2px_rgb(40_30_0/0.06)] hover:bg-fill/60",
+    ghost: "bg-transparent text-label hover:bg-fill/80",
+    link: "bg-transparent text-accent-text underline-offset-4 hover:underline",
+    accent: "bg-accent text-on-accent ring-1 ring-accent-text/25 shadow-[inset_0_1px_0_rgb(255_255_255/0.35),0_1px_2px_rgb(60_40_0/0.16),0_6px_16px_-6px_color-mix(in_srgb,var(--color-accent)_70%,transparent)] hover:brightness-[1.04]",
+}
+
+export const buttonSizes: Record<ButtonSize, string> = {
+    default: "h-11 px-5 text-subheadline rounded-full",
+    xs: "h-8 px-3 text-caption rounded-full",
+    sm: "h-9 px-4 text-subheadline rounded-full",
+    lg: "h-12 px-6 text-body rounded-full",
+    icon: "size-11 p-0 rounded-full",
+    "icon-xs": "size-8 p-0 rounded-full",
+    "icon-sm": "size-9 p-0 rounded-full",
+    "icon-lg": "size-12 p-0 rounded-full",
+    "icon-full":
+        "h-11 w-full px-5 text-subheadline rounded-full",
+}
+
+export const iconButtonSizes: Record<IconButtonSize, string> =
+    {
+        icon: "size-11",
+        "icon-xs": "size-8",
+        "icon-sm": "size-9",
+        "icon-lg": "size-12",
+    }

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

@@ -0,0 +1,116 @@
+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/button.tsx

@@ -0,0 +1,91 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react"
+import { cn } from "../../lib/class-names"
+import { PendingSpinner } from "./pending-spinner"
+import { usePendingIndicator } from "./use-pending-indicator"
+import {
+    buttonSizes,
+    buttonVariants,
+    type ButtonSize,
+    type ButtonVariant,
+} from "./button-styles"
+
+export type { ButtonSize, ButtonVariant }
+
+/**
+ * Each variant has a little depth: a fine highlight along the top edge and
+ * a soft, layered shadow, like a well-made physical key.
+ */
+export interface ButtonProps
+    extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant
+    size?: ButtonSize
+    isPending?: boolean
+}
+
+/** Shares native button appearance with semantic links without nesting a button. */
+export function buttonStyle({
+    variant = "default",
+    size = "default",
+    className,
+}: Pick<ButtonProps, "variant" | "size" | "className"> = {}) {
+    return cn(
+        "group relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold tracking-[-0.005em]",
+        "transition-[background-color,filter,transform,box-shadow] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] active:scale-[0.98]",
+        "motion-reduce:transform-none motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-40",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        buttonSizes[size],
+        buttonVariants[variant],
+        className
+    )
+}
+
+export const Button = forwardRef<
+    HTMLButtonElement,
+    ButtonProps
+>(function Button(
+    {
+        variant = "default",
+        size = "default",
+        isPending = false,
+        disabled,
+        children,
+        className,
+        type = "button",
+        ...props
+    },
+    ref
+) {
+    const showPendingIndicator =
+        usePendingIndicator(isPending)
+
+    return (
+        <button
+            ref={ref}
+            type={type}
+            className={buttonStyle({
+                variant,
+                size,
+                // pending is busy, not unavailable: keep full colour
+                className: cn(
+                    "data-pending:cursor-progress data-pending:disabled:opacity-100",
+                    className
+                ),
+            })}
+            {...props}
+            data-pending={isPending || undefined}
+            disabled={disabled || isPending}
+            aria-busy={isPending || props["aria-busy"]}
+        >
+            {/* the label keeps its space, so the width never jumps */}
+            <span
+                className={cn(
+                    "inline-flex items-center justify-center gap-2 transition-opacity duration-200",
+                    showPendingIndicator && "opacity-0"
+                )}
+            >
+                {children}
+            </span>
+            {showPendingIndicator && <PendingSpinner />}
+        </button>
+    )
+})

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

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

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

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

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

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

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

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

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

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