@passui/react 0.0.0-stage → 0.1.14

package/src/components/date-picker/date-value.ts

@@ -0,0 +1,37 @@
+/** Returns a date-only value without timezone conversion or date rollover. */
+export function dateValue(
+    year: string,
+    month: string,
+    day: string,
+    max?: string
+) {
+    if (
+        !/^\d{4}$/.test(year) ||
+        !/^\d{1,2}$/.test(month) ||
+        !/^\d{1,2}$/.test(day)
+    )
+        return ""
+    const y = Number(year)
+    const m = Number(month)
+    const d = Number(day)
+    const leap =
+        y % 4 === 0 && (y % 100 !== 0 || y % 400 === 0)
+    const days = [
+        31,
+        leap ? 29 : 28,
+        31,
+        30,
+        31,
+        30,
+        31,
+        31,
+        30,
+        31,
+        30,
+        31,
+    ]
+    if (y < 1 || m < 1 || m > 12 || d < 1 || d > days[m - 1]!)
+        return ""
+    const value = `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`
+    return max && value > max ? "" : value
+}

package/src/components/date-picker/examples/date-picker-locales.tsx

@@ -0,0 +1,41 @@
+import { DatePicker } from "@passui/react/date-picker"
+import { useState } from "react"
+
+const labels = {
+    day: "Day",
+    month: "Month",
+    year: "Year",
+    invalid: "Enter a real date.",
+}
+
+export function DatePickerLocales() {
+    const [us, setUs] = useState("1994-07-21")
+    const [uk, setUk] = useState("1994-07-21")
+    const [cn, setCn] = useState("1994-07-21")
+
+    return (
+        <div className="flex w-full max-w-xs flex-col gap-8">
+            <DatePicker
+                label="United States"
+                labels={labels}
+                locale="en-US"
+                value={us}
+                onChange={setUs}
+            />
+            <DatePicker
+                label="United Kingdom"
+                labels={labels}
+                locale="en-GB"
+                value={uk}
+                onChange={setUk}
+            />
+            <DatePicker
+                label="China"
+                labels={labels}
+                locale="zh-CN"
+                value={cn}
+                onChange={setCn}
+            />
+        </div>
+    )
+}

package/src/components/date-picker/examples/date-picker-past-only.tsx

@@ -0,0 +1,29 @@
+import { DatePicker } from "@passui/react/date-picker"
+import { useState } from "react"
+
+export function DatePickerPastOnly() {
+    const [birthday, setBirthday] = useState("2090-01-01")
+    const today = new Date().toISOString().slice(0, 10)
+
+    return (
+        <div className="flex w-full max-w-xs flex-col gap-3">
+            <DatePicker
+                label="Birthday"
+                labels={{
+                    day: "Day",
+                    month: "Month",
+                    year: "Year",
+                    invalid:
+                        "Your birthday can't be in the future.",
+                }}
+                locale="en-US"
+                max={today}
+                value={birthday}
+                onChange={setBirthday}
+            />
+            <p className="text-footnote text-label-secondary">
+                Saved value: {birthday || "none yet"}
+            </p>
+        </div>
+    )
+}

package/src/components/date-picker/examples/date-picker-showcase.tsx

@@ -0,0 +1,49 @@
+import { toast } from "@passui/react"
+import { Button } from "@passui/react/button"
+import { DatePicker } from "@passui/react/date-picker"
+import { useState } from "react"
+
+export function DatePickerShowcase() {
+    const [birthday, setBirthday] = useState("")
+    const today = new Date().toISOString().slice(0, 10)
+
+    return (
+        <form
+            className="flex w-full max-w-sm flex-col gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60"
+            onSubmit={(event) => {
+                event.preventDefault()
+                toast.success("Birthday saved")
+            }}
+        >
+            <div className="flex flex-col gap-1">
+                <h2 className="text-headline font-semibold text-label">
+                    When's your birthday?
+                </h2>
+                <p className="text-footnote text-label-secondary">
+                    We use it to keep your account suited to
+                    your age. It isn't shown to anyone.
+                </p>
+            </div>
+            <DatePicker
+                label="Birthday"
+                labels={{
+                    day: "Day",
+                    month: "Month",
+                    year: "Year",
+                    invalid: "Enter a real date in the past.",
+                }}
+                locale="en-US"
+                max={today}
+                value={birthday}
+                onChange={setBirthday}
+            />
+            <Button
+                type="submit"
+                variant="accent"
+                disabled={!birthday}
+            >
+                Continue
+            </Button>
+        </form>
+    )
+}

package/src/components/date-picker/examples/date-picker-usage.tsx

@@ -0,0 +1,22 @@
+import { DatePicker } from "@passui/react/date-picker"
+import { useState } from "react"
+
+export function DatePickerUsage() {
+    const [birthday, setBirthday] = useState("")
+    return (
+        <div className="w-full max-w-xs">
+            <DatePicker
+                label="Birthday"
+                labels={{
+                    day: "Day",
+                    month: "Month",
+                    year: "Year",
+                    invalid: "Enter a real date.",
+                }}
+                locale="en-US"
+                value={birthday}
+                onChange={setBirthday}
+            />
+        </div>
+    )
+}

package/src/components/dialog/dialog-host.tsx

@@ -0,0 +1,156 @@
+import { AnimatePresence, motion } from "motion/react"
+import {
+    useEffect,
+    useRef,
+    useSyncExternalStore,
+} from "react"
+import { cn } from "../../lib/class-names"
+import { spring } from "../../motion/transitions"
+import {
+    getDialog,
+    type PendingDialog,
+    settleDialog,
+    subscribeDialogs,
+} from "./dialog-store"
+
+/**
+ * Renders confirmation dialogs: a glass card that springs up over blurred
+ * content. Escape or a click outside cancels; Enter confirms unless the
+ * action is destructive, where the safe choice has focus.
+ */
+export function DialogHost() {
+    const dialog = useSyncExternalStore(
+        subscribeDialogs,
+        getDialog,
+        () => null
+    )
+    return (
+        <AnimatePresence>
+            {dialog && (
+                <ConfirmCard
+                    key={dialog.id}
+                    dialog={dialog}
+                />
+            )}
+        </AnimatePresence>
+    )
+}
+
+function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
+    const confirmRef = useRef<HTMLButtonElement>(null)
+    const cancelRef = useRef<HTMLButtonElement>(null)
+    const titleId = `dialog-title-${dialog.id}`
+    const messageId = `dialog-message-${dialog.id}`
+
+    useEffect(() => {
+        const previous = window.document
+            .activeElement as HTMLElement | null
+        ;(dialog.destructive
+            ? cancelRef
+            : confirmRef
+        ).current?.focus()
+        const onKey = (event: KeyboardEvent) => {
+            if (event.key === "Escape") {
+                event.preventDefault()
+                settleDialog(false)
+            }
+            // Keep focus inside the dialog.
+            if (event.key === "Tab") {
+                const order = [
+                    cancelRef.current,
+                    confirmRef.current,
+                ].filter(Boolean) as HTMLElement[]
+                const at = order.indexOf(
+                    window.document
+                        .activeElement as HTMLElement
+                )
+                event.preventDefault()
+                order[
+                    (at +
+                        (event.shiftKey ? -1 : 1) +
+                        order.length) %
+                        order.length
+                ]?.focus()
+            }
+        }
+        window.addEventListener("keydown", onKey)
+        return () => {
+            window.removeEventListener("keydown", onKey)
+            previous?.focus?.()
+        }
+    }, [dialog.destructive])
+
+    return (
+        <div className="fixed inset-0 z-[70] flex items-center justify-center p-5">
+            <motion.button
+                type="button"
+                tabIndex={-1}
+                aria-label="Cancel"
+                className="absolute inset-0 bg-black/25 backdrop-blur-md"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                onClick={() => settleDialog(false)}
+            />
+            <motion.div
+                role="alertdialog"
+                aria-modal="true"
+                aria-labelledby={titleId}
+                aria-describedby={
+                    dialog.message ? messageId : undefined
+                }
+                className="glass-menu relative flex w-full max-w-[340px] flex-col gap-4 rounded-5xl p-5 text-center"
+                initial={{ opacity: 0, scale: 0.86, y: 12 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{
+                    opacity: 0,
+                    scale: 0.94,
+                    y: 6,
+                    transition: { duration: 0.15 },
+                }}
+                transition={spring.bouncy}
+            >
+                <div className="flex flex-col gap-1.5 px-1 pt-1">
+                    <h2
+                        id={titleId}
+                        className="text-body font-semibold text-label"
+                    >
+                        {dialog.title}
+                    </h2>
+                    {dialog.message && (
+                        <p
+                            id={messageId}
+                            className="text-subheadline leading-snug text-label-secondary"
+                        >
+                            {dialog.message}
+                        </p>
+                    )}
+                </div>
+                <div className="flex gap-2.5">
+                    <button
+                        ref={cancelRef}
+                        type="button"
+                        onClick={() => settleDialog(false)}
+                        className="h-11 grow rounded-2xl bg-fill text-subheadline font-semibold text-label transition-[background-color,transform] hover:bg-separator/70 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
+                    >
+                        {dialog.cancelLabel ?? "Cancel"}
+                    </button>
+                    <button
+                        ref={confirmRef}
+                        type="button"
+                        onClick={() => settleDialog(true)}
+                        className={cn(
+                            "h-11 grow rounded-2xl text-subheadline font-semibold transition-[filter,transform] hover:brightness-105 active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70",
+                            dialog.destructive
+                                ? "bg-danger text-white"
+                                : "bg-inverse text-on-inverse"
+                        )}
+                    >
+                        {dialog.confirmLabel ?? "OK"}
+                    </button>
+                </div>
+            </motion.div>
+        </div>
+    )
+}

package/src/components/dialog/dialog-store.ts

@@ -0,0 +1,56 @@
+/**
+ * App-wide confirmation dialogs, replacing the browser's `confirm`.
+ * `await confirmDialog({...})` resolves true when confirmed. Render one
+ * `<DialogHost />`.
+ */
+export interface ConfirmOptions {
+    title: string
+    message?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    /** Destructive actions are shown in red and are not the default button. */
+    destructive?: boolean
+}
+
+export interface PendingDialog extends ConfirmOptions {
+    id: number
+    resolve: (confirmed: boolean) => void
+}
+
+let current: PendingDialog | null = null
+let nextId = 1
+const queue: PendingDialog[] = []
+const listeners = new Set<() => void>()
+
+const emit = () => {
+    for (const listener of listeners) listener()
+}
+
+export function confirmDialog(
+    options: ConfirmOptions
+): Promise<boolean> {
+    return new Promise((resolve) => {
+        const dialog = { ...options, id: nextId++, resolve }
+        if (current) queue.push(dialog)
+        else current = dialog
+        emit()
+    })
+}
+
+export function settleDialog(confirmed: boolean) {
+    if (!current) return
+    current.resolve(confirmed)
+    current = queue.shift() ?? null
+    emit()
+}
+
+export function subscribeDialogs(listener: () => void) {
+    listeners.add(listener)
+    return () => {
+        listeners.delete(listener)
+    }
+}
+
+export function getDialog(): PendingDialog | null {
+    return current
+}

package/src/components/dialog/dialog.docs.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react"
+import { Button } from "../button/button"
+import { jsxAttribute } from "../../docs/snippet"
+import { defineDocs } from "../../docs/types"
+import { Dialog, type DialogPresentation } from "./dialog"
+import { DialogConfirm } from "./examples/dialog-confirm"
+import { DialogForm } from "./examples/dialog-form"
+import { DialogInline } from "./examples/dialog-inline"
+import { DialogShowcase } from "./examples/dialog-showcase"
+import { DialogUsage } from "./examples/dialog-usage"
+
+// `destructive` is the tone of Dialog.Actions in the footer; the snippet
+// writes that footer itself.
+type DemoProps = {
+    title: string
+    description: string
+    presentation?: DialogPresentation
+    destructive: boolean
+}
+
+function DialogDemo({
+    title,
+    description,
+    presentation,
+    destructive,
+}: DemoProps) {
+    const [open, setOpen] = useState(false)
+    return (
+        <div className="flex w-full max-w-sm flex-col items-center gap-4">
+            <Button
+                variant="secondary"
+                onClick={() => setOpen(true)}
+            >
+                Open dialog
+            </Button>
+            <Dialog
+                open={open}
+                onOpenChange={setOpen}
+                title={title}
+                description={description || undefined}
+                presentation={presentation}
+                footer={
+                    <Dialog.Actions
+                        submitLabel={
+                            destructive ? "Delete" : "Save"
+                        }
+                        cancelLabel="Cancel"
+                        tone={
+                            destructive
+                                ? "destructive"
+                                : "default"
+                        }
+                        onConfirm={() => setOpen(false)}
+                    />
+                }
+            />
+        </div>
+    )
+}
+
+export const dialogDocs = defineDocs<DemoProps>()({
+    slug: "dialog",
+    name: "Dialog",
+    importPath: "@passui/react/dialog",
+    controls: {
+        title: {
+            kind: "text",
+            default: "Rename project",
+            required: true,
+        },
+        description: {
+            kind: "text",
+            default: "The new name shows everywhere at once.",
+        },
+        presentation: {
+            kind: "select",
+            options: {
+                drawer: true,
+                center: true,
+                inline: true,
+            },
+            default: "drawer",
+        },
+        destructive: { kind: "boolean", default: false },
+    },
+    render: (values) => <DialogDemo {...values} />,
+    childrenSnippet: ({ destructive }) => ({
+        imports: ['import { useState } from "react"'],
+        setup: ["const [open, setOpen] = useState(false)"],
+        omit: ["destructive"],
+        expressionProps: {
+            open: "open",
+            onOpenChange: "setOpen",
+            footer: `<Dialog.Actions ${jsxAttribute("submitLabel", destructive ? "Delete" : "Save")} cancelLabel="Cancel"${destructive ? ' tone="destructive"' : ""} onConfirm={() => setOpen(false)} />`,
+        },
+        children: "",
+    }),
+    usage: DialogUsage,
+    showcase: DialogShowcase,
+    examples: [
+        { id: "form", component: DialogForm },
+        {
+            id: "confirm",
+            component: DialogConfirm,
+            playground: { destructive: true },
+        },
+        {
+            id: "inline",
+            component: DialogInline,
+            playground: { presentation: "inline" },
+        },
+    ],
+    previewHeight: 460,
+})