@passui/react 0.0.0-stage → 0.1.14

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

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

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

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

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

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

@@ -0,0 +1,68 @@
+import { Settings02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { defineDocs } from "../../docs/types"
+import { IconButtonPlayer } from "./examples/icon-button-player"
+import { IconButtonShowcase } from "./examples/icon-button-showcase"
+import { IconButtonUsage } from "./examples/icon-button-usage"
+import { IconButtonVariants } from "./examples/icon-button-variants"
+import {
+    IconButton,
+    type IconButtonProps,
+} from "./icon-button"
+
+export const iconButtonDocs = defineDocs<IconButtonProps>()({
+    slug: "icon-button",
+    name: "IconButton",
+    importPath: "@passui/react/icon-button",
+    controls: {
+        variant: {
+            kind: "select",
+            options: {
+                default: true,
+                secondary: true,
+                outline: true,
+                ghost: true,
+                link: true,
+                accent: true,
+                destructive: true,
+            },
+            default: "ghost",
+        },
+        size: {
+            kind: "select",
+            options: {
+                icon: true,
+                "icon-xs": true,
+                "icon-sm": true,
+                "icon-lg": true,
+            },
+            default: "icon",
+        },
+        isPending: { kind: "boolean", default: false },
+        disabled: { kind: "boolean", default: false },
+        label: {
+            kind: "text",
+            default: "Settings",
+            required: true,
+        },
+    },
+    render: (values) => (
+        <IconButton {...values}>
+            <HugeiconsIcon icon={Settings02Icon} size={20} />
+        </IconButton>
+    ),
+    childrenSnippet: () => ({
+        imports: [
+            'import { Settings02Icon } from "@hugeicons/core-free-icons"',
+            'import { HugeiconsIcon } from "@hugeicons/react"',
+        ],
+        children:
+            "<HugeiconsIcon icon={Settings02Icon} size={20} />",
+    }),
+    usage: IconButtonUsage,
+    showcase: IconButtonShowcase,
+    examples: [
+        { id: "variants", component: IconButtonVariants },
+        { id: "player", component: IconButtonPlayer },
+    ],
+})

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

@@ -0,0 +1,73 @@
+import { type ButtonHTMLAttributes, forwardRef } from "react"
+import { cn } from "../../lib/class-names"
+import { PendingSpinner } from "./pending-spinner"
+import { usePendingIndicator } from "./use-pending-indicator"
+import {
+    buttonVariants,
+    iconButtonSizes,
+    type ButtonVariant,
+    type IconButtonSize,
+} from "./button-styles"
+
+export type { IconButtonSize }
+
+export interface IconButtonProps
+    extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Required: icon-only buttons need an accessible name. */
+    label: string
+    variant?: ButtonVariant
+    size?: IconButtonSize
+    isPending?: boolean
+}
+
+export const IconButton = forwardRef<
+    HTMLButtonElement,
+    IconButtonProps
+>(function IconButton(
+    {
+        label,
+        variant = "default",
+        size = "icon",
+        isPending = false,
+        disabled,
+        children,
+        className,
+        type = "button",
+        ...props
+    },
+    ref
+) {
+    const showPendingIndicator =
+        usePendingIndicator(isPending)
+
+    return (
+        <button
+            ref={ref}
+            type={type}
+            aria-label={label}
+            data-tooltip={label}
+            className={cn(
+                "relative",
+                "group inline-flex shrink-0 items-center justify-center rounded-full transition-[background-color,filter,transform,box-shadow] duration-fast ease-standard active:scale-[0.92] disabled:pointer-events-none disabled:opacity-40 data-pending:cursor-progress data-pending:disabled:opacity-100",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                iconButtonSizes[size],
+                buttonVariants[variant],
+                className
+            )}
+            {...props}
+            data-pending={isPending || undefined}
+            disabled={disabled || isPending}
+            aria-busy={isPending || props["aria-busy"]}
+        >
+            <span
+                className={cn(
+                    "inline-flex items-center justify-center transition-opacity duration-200",
+                    showPendingIndicator && "opacity-0"
+                )}
+            >
+                {children}
+            </span>
+            {showPendingIndicator && <PendingSpinner />}
+        </button>
+    )
+})

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

@@ -0,0 +1,14 @@
+/**
+ * Centred over the button while it is pending: fades in, spins, and is
+ * sized from the text so it suits every button size.
+ */
+export function PendingSpinner() {
+    return (
+        <span
+            aria-hidden="true"
+            className="absolute inset-0 flex animate-in items-center justify-center fade-in zoom-in-75 duration-200 motion-reduce:animate-none"
+        >
+            <span className="size-[1.1em] animate-spin rounded-full border-2 border-current/25 border-t-current motion-reduce:animate-none" />
+        </span>
+    )
+}

package/src/components/button/use-pending-indicator.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react"
+
+const PENDING_INDICATOR_DELAY = 300
+
+export function schedulePendingIndicator(onShow: () => void) {
+    const timeout = setTimeout(
+        onShow,
+        PENDING_INDICATOR_DELAY
+    )
+    return () => clearTimeout(timeout)
+}
+
+export function usePendingIndicator(isPending: boolean) {
+    const [isVisible, setIsVisible] = useState(false)
+
+    useEffect(() => {
+        setIsVisible(false)
+
+        if (!isPending) return
+
+        return schedulePendingIndicator(() =>
+            setIsVisible(true)
+        )
+    }, [isPending])
+
+    return isPending && isVisible
+}

package/src/components/chip/chip.docs.tsx

@@ -0,0 +1,37 @@
+import { ChipInRows } from "./examples/chip-in-rows"
+import { defineDocs } from "../../docs/types"
+import { Chip, type ChipTone } from "./chip"
+import { ChipShowcase } from "./examples/chip-showcase"
+import { ChipTones } from "./examples/chip-tones"
+import { ChipUsage } from "./examples/chip-usage"
+
+type ChipProps = { tone?: ChipTone; children?: string }
+
+export const chipDocs = defineDocs<ChipProps>()({
+    slug: "chip",
+    name: "Chip",
+    importPath: "@passui/react",
+    controls: {
+        tone: {
+            kind: "select",
+            options: {
+                neutral: true,
+                accent: true,
+                public: true,
+                family: true,
+                friends: true,
+            },
+            default: "neutral",
+        },
+        children: { kind: "text", default: "Draft" },
+    },
+    render: ({ children, ...values }) => (
+        <Chip {...values}>{children}</Chip>
+    ),
+    usage: ChipUsage,
+    showcase: ChipShowcase,
+    examples: [
+        { id: "tones", component: ChipTones },
+        { id: "in-rows", component: ChipInRows },
+    ],
+})

package/src/components/chip/chip.tsx

@@ -0,0 +1,35 @@
+import type { HTMLAttributes } from "react"
+import { cn } from "../../lib/class-names"
+
+export type ChipTone =
+    | "neutral"
+    | "accent"
+    | "public"
+    | "family"
+    | "friends"
+
+const tones: Record<ChipTone, string> = {
+    neutral: "bg-fill text-label-secondary",
+    accent: "bg-elevated text-accent-text",
+    public: "bg-[#e8efff] text-[#2c55b8] dark:bg-[#1c2740] dark:text-[#a9c1ff]",
+    family: "bg-[#e3f3eb] text-[#24704f] dark:bg-[#15302a] dark:text-[#8fd6b6]",
+    friends:
+        "bg-[#ede8ff] text-[#5a3fc0] dark:bg-[#26203f] dark:text-[#c3b5ff]",
+}
+
+export function Chip({
+    tone = "neutral",
+    className,
+    ...props
+}: HTMLAttributes<HTMLSpanElement> & { tone?: ChipTone }) {
+    return (
+        <span
+            className={cn(
+                "inline-flex items-center gap-1 rounded-full px-1.75 py-0.5 text-caption2 font-semibold",
+                tones[tone],
+                className
+            )}
+            {...props}
+        />
+    )
+}

package/src/components/chip/examples/chip-in-rows.tsx

@@ -0,0 +1,19 @@
+import { Chip, LabeledContent, Section } from "@passui/react"
+
+export function ChipInRows() {
+    return (
+        <div className="w-full max-w-sm">
+            <Section title="Shared with">
+                <LabeledContent label="Aiko Kamado">
+                    <Chip tone="accent">Owner</Chip>
+                </LabeledContent>
+                <LabeledContent label="Kenji Mori">
+                    <Chip tone="family">Family</Chip>
+                </LabeledContent>
+                <LabeledContent label="Anyone with the link">
+                    <Chip tone="public">Public</Chip>
+                </LabeledContent>
+            </Section>
+        </div>
+    )
+}

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

@@ -0,0 +1,51 @@
+import { Chip } from "@passui/react"
+
+const notes = [
+    {
+        title: "Trip to Kyoto",
+        detail: "Edited today",
+        tone: "friends",
+        tag: "Friends",
+    },
+    {
+        title: "Grandma's recipes",
+        detail: "Edited yesterday",
+        tone: "family",
+        tag: "Family",
+    },
+    {
+        title: "Reading list",
+        detail: "Edited Monday",
+        tone: "public",
+        tag: "Public",
+    },
+    {
+        title: "Q4 plan",
+        detail: "Edited last week",
+        tone: "neutral",
+        tag: "Draft",
+    },
+] as const
+
+export function ChipShowcase() {
+    return (
+        <ul className="m-0 flex w-full max-w-sm list-none flex-col divide-y divide-separator/60 overflow-hidden rounded-4xl bg-elevated p-0 shadow-sm ring-1 ring-separator/60">
+            {notes.map((note) => (
+                <li
+                    key={note.title}
+                    className="flex items-center justify-between gap-3 px-5 py-3.5"
+                >
+                    <div className="flex flex-col">
+                        <span className="text-subheadline font-semibold text-label">
+                            {note.title}
+                        </span>
+                        <span className="text-footnote text-label-secondary">
+                            {note.detail}
+                        </span>
+                    </div>
+                    <Chip tone={note.tone}>{note.tag}</Chip>
+                </li>
+            ))}
+        </ul>
+    )
+}

package/src/components/chip/examples/chip-tones.tsx

@@ -0,0 +1,13 @@
+import { Chip } from "@passui/react"
+
+export function ChipTones() {
+    return (
+        <div className="flex flex-wrap items-center justify-center gap-2">
+            <Chip tone="neutral">Draft</Chip>
+            <Chip tone="accent">Featured</Chip>
+            <Chip tone="public">Public</Chip>
+            <Chip tone="family">Family</Chip>
+            <Chip tone="friends">Friends</Chip>
+        </div>
+    )
+}

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

@@ -0,0 +1,5 @@
+import { Chip } from "@passui/react"
+
+export function ChipUsage() {
+    return <Chip tone="accent">New</Chip>
+}

package/src/components/compact-date-picker/calendar-month.ts

@@ -0,0 +1,131 @@
+/** A calendar day, with `month` counted from 1. */
+export interface CalendarDay {
+    year: number
+    month: number
+    day: number
+}
+
+/** Reads `YYYY-MM-DD`; null for anything else, or a date that doesn't exist. */
+export function parseDay(value: string): CalendarDay | null {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+    if (!match) return null
+    const [year, month, day] = [
+        Number(match[1]),
+        Number(match[2]),
+        Number(match[3]),
+    ]
+    const date = new Date(Date.UTC(year, month - 1, day))
+    const real =
+        date.getUTCFullYear() === year &&
+        date.getUTCMonth() === month - 1 &&
+        date.getUTCDate() === day
+    return real ? { year, month, day } : null
+}
+
+export function formatDay({
+    year,
+    month,
+    day,
+}: CalendarDay): string {
+    const pad = (value: number, width: number) =>
+        String(value).padStart(width, "0")
+    return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`
+}
+
+/** Moves by whole days, across months and years. */
+export function addDays(
+    day: CalendarDay,
+    count: number
+): CalendarDay {
+    const date = new Date(
+        Date.UTC(day.year, day.month - 1, day.day + count)
+    )
+    return {
+        year: date.getUTCFullYear(),
+        month: date.getUTCMonth() + 1,
+        day: date.getUTCDate(),
+    }
+}
+
+/** Moves by months, keeping the day where the month allows (31 Jan + 1 is 28 or 29 Feb). */
+export function addMonths(
+    day: CalendarDay,
+    count: number
+): CalendarDay {
+    const first = new Date(
+        Date.UTC(day.year, day.month - 1 + count, 1)
+    )
+    const year = first.getUTCFullYear()
+    const month = first.getUTCMonth() + 1
+    const last = new Date(
+        Date.UTC(year, month, 0)
+    ).getUTCDate()
+    return { year, month, day: Math.min(day.day, last) }
+}
+
+/**
+ * The first day of the week where `locale` is used, 1 (Monday) to 7
+ * (Sunday), from the browser where it knows, else Monday except in the
+ * places that start on Sunday.
+ */
+export function firstWeekday(locale: string): number {
+    try {
+        const info = new Intl.Locale(
+            locale
+        ) as Intl.Locale & {
+            getWeekInfo?: () => { firstDay: number }
+            weekInfo?: { firstDay: number }
+        }
+        const first =
+            info.getWeekInfo?.().firstDay ??
+            info.weekInfo?.firstDay
+        if (first) return first
+        const region = info.maximize().region ?? ""
+        return [
+            "US",
+            "CA",
+            "JP",
+            "KR",
+            "TW",
+            "BR",
+            "MX",
+            "IL",
+            "PH",
+            "IN",
+        ].includes(region)
+            ? 7
+            : 1
+    } catch {
+        return 1
+    }
+}
+
+/** Six weeks covering `year`/`month`, starting on `firstDay` (1 to 7). */
+export function monthGrid(
+    year: number,
+    month: number,
+    firstDay: number
+): Array<CalendarDay & { inMonth: boolean }> {
+    // getUTCDay counts Sunday as 0; weeks here count it as 7.
+    const weekday =
+        new Date(Date.UTC(year, month - 1, 1)).getUTCDay() ||
+        7
+    const lead = (weekday - firstDay + 7) % 7
+    const start = addDays({ year, month, day: 1 }, -lead)
+    return Array.from({ length: 42 }, (_, index) => {
+        const day = addDays(start, index)
+        return {
+            ...day,
+            inMonth: day.month === month && day.year === year,
+        }
+    })
+}
+
+/** Whether `value` (`YYYY-MM-DD`) lies within the optional bounds. */
+export function withinBounds(
+    value: string,
+    min?: string,
+    max?: string
+): boolean {
+    return (!min || value >= min) && (!max || value <= max)
+}