@passui/react 0.1.45 → 0.1.47

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

@@ -1,105 +1,106 @@
-import { useState } from "react"
-import { TextField, type TextFieldSize } from "../text-field/text-field"
-import { cn } from "../../lib/class-names"
-import { dateValue } from "./date-value"
+import { useState } from "react";
+import { TextField, type TextFieldSize } from "../text-field/text-field";
+import { cn } from "../../lib/class-names";
+import { dateValue } from "./date-value";
 
 const legendText: Record<TextFieldSize, string> = {
-    xs: "mb-2 text-caption font-medium",
-    sm: "mb-2 text-footnote font-medium",
-    md: "mb-3 text-subheadline font-medium",
-    lg: "mb-3 text-body font-medium",
-}
+	xs: "mb-2 text-caption font-medium",
+	sm: "mb-2 text-footnote font-medium",
+	md: "mb-3 text-subheadline font-medium",
+	lg: "mb-3 text-body font-medium",
+};
 const fieldsetGap: Record<TextFieldSize, string> = {
-    xs: "gap-2",
-    sm: "gap-2",
-    md: "gap-3",
-    lg: "gap-4",
-}
+	xs: "gap-2",
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+};
 const errorText: Record<TextFieldSize, string> = {
-    xs: "text-caption2 text-danger",
-    sm: "text-caption text-danger",
-    md: "text-footnote text-danger",
-    lg: "text-subheadline text-danger",
-}
+	xs: "text-caption2 text-danger",
+	sm: "text-caption text-danger",
+	md: "text-footnote text-danger",
+	lg: "text-subheadline text-danger",
+};
 
 type DatePickerProps = {
-    value: string
-    onChange: (value: string) => void
-    label: string
-    labels: {
-        day: string
-        month: string
-        year: string
-        invalid: string
-    }
-    locale: string
-    max?: string
-    /** Field scale passed to each TextField; matches TextField's xs|sm|md|lg. @default "md" */
-    size?: TextFieldSize
-}
+	value: string;
+	onChange: (value: string) => void;
+	label: string;
+	labels: {
+		day: string;
+		month: string;
+		year: string;
+		invalid: string;
+	};
+	locale: string;
+	max?: string;
+	/** Field scale passed to each TextField; matches TextField's xs|sm|md|lg. @default "md" */
+	size?: TextFieldSize;
+};
 
 /** Segmented date entry suited to birthdays, without a native calendar dialog. */
 export function DatePicker({
-    value,
-    onChange,
-    label,
-    labels,
-    locale,
-    max,
-    size = "md",
+	value,
+	onChange,
+	label,
+	labels,
+	locale,
+	max,
+	size = "md",
 }: DatePickerProps) {
-    const [year, month, day] = value.split("-")
-    const [parts, setParts] = useState({
-        year: year ?? "",
-        month: month ?? "",
-        day: day ?? "",
-    })
-    const complete = parts.year.length === 4 && Boolean(parts.month && parts.day)
-    const invalid = complete && !dateValue(parts.year, parts.month, parts.day, max)
-    const order = new Intl.DateTimeFormat(locale, {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        timeZone: "UTC",
-    })
-        .formatToParts(new Date("2000-01-02T00:00:00Z"))
-        .filter(
-            (
-                part
-            ): part is Intl.DateTimeFormatPart & {
-                type: "year" | "month" | "day"
-            } => part.type === "year" || part.type === "month" || part.type === "day"
-        )
-    return (
-        <fieldset className={cn("flex min-w-0 flex-col", fieldsetGap[size])}>
-            <legend className={legendText[size]}>{label}</legend>
-            <div className={cn("grid grid-cols-3", fieldsetGap[size])}>
-                {order.map(({ type }) => (
-                    <TextField
-                        key={type}
-                        label={labels[type]}
-                        inputMode="numeric"
-                        autoComplete={`bday-${type}`}
-                        maxLength={type === "year" ? 4 : 2}
-                        value={parts[type]}
-                        size={size}
-                        aria-invalid={invalid || undefined}
-                        onChange={(event) => {
-                            const next = {
-                                ...parts,
-                                [type]: event.target.value.replace(/\D/g, ""),
-                            }
-                            setParts(next)
-                            onChange(dateValue(next.year, next.month, next.day, max))
-                        }}
-                    />
-                ))}
-            </div>
-            {invalid && (
-                <p role="status" className={errorText[size]}>
-                    {labels.invalid}
-                </p>
-            )}
-        </fieldset>
-    )
+	const [year, month, day] = value.split("-");
+	const [parts, setParts] = useState({
+		year: year ?? "",
+		month: month ?? "",
+		day: day ?? "",
+	});
+	const complete = parts.year.length === 4 && Boolean(parts.month && parts.day);
+	const invalid =
+		complete && !dateValue(parts.year, parts.month, parts.day, max);
+	const order = new Intl.DateTimeFormat(locale, {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		timeZone: "UTC",
+	})
+		.formatToParts(new Date("2000-01-02T00:00:00Z"))
+		.filter(
+			(
+				part,
+			): part is Intl.DateTimeFormatPart & {
+				type: "year" | "month" | "day";
+			} => part.type === "year" || part.type === "month" || part.type === "day",
+		);
+	return (
+		<fieldset className={cn("flex min-w-0 flex-col", fieldsetGap[size])}>
+			<legend className={legendText[size]}>{label}</legend>
+			<div className={cn("grid grid-cols-3", fieldsetGap[size])}>
+				{order.map(({ type }) => (
+					<TextField
+						key={type}
+						label={labels[type]}
+						inputMode="numeric"
+						autoComplete={`bday-${type}`}
+						maxLength={type === "year" ? 4 : 2}
+						value={parts[type]}
+						size={size}
+						aria-invalid={invalid || undefined}
+						onChange={(event) => {
+							const next = {
+								...parts,
+								[type]: event.target.value.replace(/\D/g, ""),
+							};
+							setParts(next);
+							onChange(dateValue(next.year, next.month, next.day, max));
+						}}
+					/>
+				))}
+			</div>
+			{invalid && (
+				<p role="status" className={errorText[size]}>
+					{labels.invalid}
+				</p>
+			)}
+		</fieldset>
+	);
 }

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

@@ -1,12 +1,22 @@
 /** 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
+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/dialog/dialog-host.tsx

@@ -1,14 +1,14 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import { useEffect, useRef, useSyncExternalStore } from "react"
-import { Button } from "../button/button"
-import { spring } from "../../motion/transitions"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { Button } from "../button/button";
+import { spring } from "../../motion/transitions";
 import {
-    advanceDialogQueue,
-    getDialog,
-    type PendingDialog,
-    settleDialog,
-    subscribeDialogs,
-} from "./dialog-store"
+	advanceDialogQueue,
+	getDialog,
+	type PendingDialog,
+	settleDialog,
+	subscribeDialogs,
+} from "./dialog-store";
 
 /**
  * Renders confirmation dialogs: a glass card that springs up over blurred
@@ -16,102 +16,104 @@ import {
  * action is destructive, where the safe choice has focus.
  */
 export function DialogHost() {
-    const dialog = useSyncExternalStore(subscribeDialogs, getDialog, () => null)
-    return (
-        <AnimatePresence mode="wait" onExitComplete={advanceDialogQueue}>
-            {dialog && <ConfirmCard key={dialog.id} dialog={dialog} />}
-        </AnimatePresence>
-    )
+	const dialog = useSyncExternalStore(subscribeDialogs, getDialog, () => null);
+	return (
+		<AnimatePresence mode="wait" onExitComplete={advanceDialogQueue}>
+			{dialog && <ConfirmCard key={dialog.id} dialog={dialog} />}
+		</AnimatePresence>
+	);
 }
 
 function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
-    const reducedMotion = useReducedMotion()
-    const confirmRef = useRef<HTMLButtonElement>(null)
-    const cancelRef = useRef<HTMLButtonElement>(null)
-    const titleId = `dialog-title-${dialog.id}`
-    const messageId = `dialog-message-${dialog.id}`
+	const reducedMotion = useReducedMotion();
+	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, dialog.id)
-            }
-            // 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, 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, dialog.id);
+			}
+			// 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, dialog.id]);
 
-    return (
-        <div className="fixed inset-0 z-[70] flex items-center justify-center p-5">
-            <motion.div
-                aria-hidden="true"
-                className="absolute inset-0 bg-black/25 backdrop-blur-md"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={reducedMotion ? { duration: 0 } : spring.smooth}
-                onClick={() => settleDialog(false, dialog.id)}
-            />
-            <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={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 6 }}
-                transition={reducedMotion ? { duration: 0 } : spring.smooth}
-            >
-                <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"
-                        variant="secondary"
-                        onClick={() => settleDialog(false, dialog.id)}
-                        className="min-w-0 grow rounded-2xl"
-                    >
-                        {dialog.cancelLabel ?? "Cancel"}
-                    </Button>
-                    <Button
-                        ref={confirmRef}
-                        type="button"
-                        variant={dialog.destructive ? "destructive" : "default"}
-                        onClick={() => settleDialog(true, dialog.id)}
-                        className="min-w-0 grow rounded-2xl"
-                    >
-                        {dialog.confirmLabel ?? "OK"}
-                    </Button>
-                </div>
-            </motion.div>
-        </div>
-    )
+	return (
+		<div className="fixed inset-0 z-[70] flex items-center justify-center p-5">
+			<motion.div
+				aria-hidden="true"
+				className="absolute inset-0 bg-black/25 backdrop-blur-md"
+				initial={{ opacity: 0 }}
+				animate={{ opacity: 1 }}
+				exit={{ opacity: 0 }}
+				transition={reducedMotion ? { duration: 0 } : spring.smooth}
+				onClick={() => settleDialog(false, dialog.id)}
+			/>
+			<motion.div
+				role="alertdialog"
+				aria-modal="true"
+				aria-labelledby={titleId}
+				aria-describedby={dialog.message ? messageId : undefined}
+				className="glass-menu rounded-5xl relative flex w-full max-w-[340px] flex-col gap-4 p-5 text-center"
+				initial={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }}
+				animate={{ opacity: 1, y: 0 }}
+				exit={reducedMotion ? { opacity: 0 } : { opacity: 0, y: 6 }}
+				transition={reducedMotion ? { duration: 0 } : spring.smooth}
+			>
+				<div className="flex flex-col gap-1.5 px-1 pt-1">
+					<h2 id={titleId} className="text-body text-label font-semibold">
+						{dialog.title}
+					</h2>
+					{dialog.message && (
+						<p
+							id={messageId}
+							className="text-subheadline text-label-secondary leading-snug"
+						>
+							{dialog.message}
+						</p>
+					)}
+				</div>
+				<div className="flex gap-2.5">
+					<Button
+						ref={cancelRef}
+						type="button"
+						variant="secondary"
+						onClick={() => settleDialog(false, dialog.id)}
+						className="min-w-0 grow rounded-2xl"
+					>
+						{dialog.cancelLabel ?? "Cancel"}
+					</Button>
+					<Button
+						ref={confirmRef}
+						type="button"
+						variant={dialog.destructive ? "destructive" : "default"}
+						onClick={() => settleDialog(true, dialog.id)}
+						className="min-w-0 grow rounded-2xl"
+					>
+						{dialog.confirmLabel ?? "OK"}
+					</Button>
+				</div>
+			</motion.div>
+		</div>
+	);
 }

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

@@ -4,62 +4,63 @@
  * `<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
+	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
+	id: number;
+	resolve: (confirmed: boolean) => void;
 }
 
-let current: PendingDialog | null = null
-let nextId = 1
-const queue: PendingDialog[] = []
-let exitingId: number | null = null
-const listeners = new Set<() => void>()
+let current: PendingDialog | null = null;
+let nextId = 1;
+const queue: PendingDialog[] = [];
+let exitingId: number | null = null;
+const listeners = new Set<() => void>();
 
 const emit = () => {
-    for (const listener of listeners) listener()
-}
+	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 || exitingId !== null) queue.push(dialog)
-        else current = dialog
-        emit()
-    })
+	return new Promise((resolve) => {
+		const dialog = { ...options, id: nextId++, resolve };
+		if (current || exitingId !== null) queue.push(dialog);
+		else current = dialog;
+		emit();
+	});
 }
 
 export function settleDialog(confirmed: boolean, id?: number) {
-    if (!current || exitingId !== null || (id !== undefined && current.id !== id)) return
-    const settled = current
-    exitingId = settled.id
-    current = null
-    settled.resolve(confirmed)
-    emit()
+	if (!current || exitingId !== null || (id !== undefined && current.id !== id))
+		return;
+	const settled = current;
+	exitingId = settled.id;
+	current = null;
+	settled.resolve(confirmed);
+	emit();
 }
 
 /** Advance queued confirmations only after the dismissed card has exited. */
 export function advanceDialogQueue() {
-    if (exitingId === null) return
-    exitingId = null
-    current = queue.shift() ?? null
-    emit()
+	if (exitingId === null) return;
+	exitingId = null;
+	current = queue.shift() ?? null;
+	emit();
 }
 
 export function subscribeDialogs(listener: () => void) {
-    listeners.add(listener)
-    return () => {
-        listeners.delete(listener)
-    }
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
 }
 
 export function getDialog(): PendingDialog | null {
-    return current
+	return current;
 }