@passui/react 0.1.47 → 0.2.0

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

@@ -1,337 +0,0 @@
-import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure";
-import { AnchoredSurface } from "../popover/anchored-surface";
-import {
-	type KeyboardEvent,
-	useEffect,
-	useId,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { createPortal } from "react-dom";
-import {
-	CalendarIcon,
-	ChevronLeftIcon,
-	ChevronRightIcon,
-} from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { haptic } from "../../lib/haptics";
-import { IconButton } from "../button/icon-button";
-import { pickerTriggerStyle, type PickerSize } from "../picker/picker-trigger";
-import {
-	addDays,
-	addMonths,
-	type CalendarDay,
-	firstWeekday,
-	formatDay,
-	monthGrid,
-	parseDay,
-	withinBounds,
-} from "./calendar-month";
-
-export interface CompactDatePickerProps {
-	/** `YYYY-MM-DD`, or "" when no date is chosen. */
-	value: string;
-	onChange: (value: string) => void;
-	/** Names the button and the calendar for assistive technology. */
-	label: string;
-	locale: string;
-	min?: string;
-	max?: string;
-	/** Shown when no date is chosen. */
-	placeholder?: string;
-	labels: {
-		previousMonth: string;
-		nextMonth: string;
-		/** Offers to remove the date, for optional dates. */
-		clear?: string;
-	};
-	className?: string;
-	/** Prevents opening the date panel. @default false */
-	disabled?: boolean;
-	/** Trigger button density; matches Picker's sm | md | lg. @default "md" */
-	size?: PickerSize;
-}
-
-const WIDTH = 308;
-
-const toDate = ({ year, month, day }: CalendarDay) =>
-	new Date(Date.UTC(year, month - 1, day));
-
-function todayDay(): CalendarDay {
-	const now = new Date();
-	return {
-		year: now.getFullYear(),
-		month: now.getMonth() + 1,
-		day: now.getDate(),
-	};
-}
-
-/**
- * A date as a compact button that opens a month calendar, like SwiftUI's
- * compact DatePicker: for dates on a calendar, such as an event or an
- * invoice. For dates people know by heart, like a birthday, use DatePicker.
- */
-export function CompactDatePicker({
-	value,
-	onChange,
-	label,
-	locale,
-	min,
-	max,
-	placeholder,
-	labels,
-	className,
-	disabled = false,
-	size = "md",
-}: CompactDatePickerProps) {
-	const panel = useAnchoredDisclosure(disabled);
-	const { open } = panel;
-	const trigger = useRef<HTMLButtonElement>(null);
-	const calendarId = useId();
-	const chosen = parseDay(value);
-	const shown = chosen
-		? new Intl.DateTimeFormat(locale, {
-				dateStyle: "medium",
-				timeZone: "UTC",
-			}).format(toDate(chosen))
-		: (placeholder ?? "");
-
-	const close = (restoreFocus: boolean) => {
-		panel.close();
-		if (restoreFocus) trigger.current?.focus({ preventScroll: true });
-	};
-
-	return (
-		<>
-			<button
-				ref={trigger}
-				type="button"
-				aria-label={chosen ? `${label}, ${shown}` : label}
-				aria-haspopup="dialog"
-				aria-expanded={open && !disabled}
-				aria-controls={open && !disabled ? calendarId : undefined}
-				disabled={disabled}
-				onClick={() => panel.toggle()}
-				className={pickerTriggerStyle(className, size)}
-			>
-				<span
-					className={cn(
-						"min-w-0 grow truncate tabular-nums",
-						!chosen && "text-label-tertiary",
-					)}
-				>
-					{shown}
-				</span>
-				<CalendarIcon size={16} className="text-label-tertiary shrink-0" />
-			</button>
-			{typeof document !== "undefined" &&
-				createPortal(
-					panel.mounted && trigger.current ? (
-						<MonthCalendar
-							open={open}
-							onExited={panel.onExited}
-							id={calendarId}
-							anchor={trigger.current}
-							label={label}
-							locale={locale}
-							value={value}
-							min={min}
-							max={max}
-							labels={labels}
-							onChoose={(next) => {
-								haptic("selection");
-								onChange(next);
-								close(true);
-							}}
-							onClose={close}
-						/>
-					) : null,
-					document.body,
-				)}
-		</>
-	);
-}
-
-function MonthCalendar({
-	open,
-	onExited,
-	id,
-	anchor,
-	label,
-	locale,
-	value,
-	min,
-	max,
-	labels,
-	onChoose,
-	onClose,
-}: {
-	open: boolean;
-	onExited: () => void;
-	id: string;
-	anchor: HTMLElement;
-	label: string;
-	locale: string;
-	value: string;
-	min?: string;
-	max?: string;
-	labels: CompactDatePickerProps["labels"];
-	onChoose: (value: string) => void;
-	onClose: (restoreFocus: boolean) => void;
-}) {
-	const root = useRef<HTMLDivElement>(null);
-	const today = todayDay();
-	const [focused, setFocused] = useState<CalendarDay>(
-		() => parseDay(value) ?? today,
-	);
-	const firstDay = useMemo(() => firstWeekday(locale), [locale]);
-	const days = monthGrid(focused.year, focused.month, firstDay);
-	const title = new Intl.DateTimeFormat(locale, {
-		month: "long",
-		year: "numeric",
-		timeZone: "UTC",
-	}).format(toDate({ ...focused, day: 1 }));
-	const weekdays = days.slice(0, 7).map((day) =>
-		new Intl.DateTimeFormat(locale, {
-			weekday: "narrow",
-			timeZone: "UTC",
-		}).format(toDate(day)),
-	);
-	const fullDate = new Intl.DateTimeFormat(locale, {
-		dateStyle: "full",
-		timeZone: "UTC",
-	});
-
-	// The focused day takes keyboard focus as it moves.
-	useEffect(() => {
-		root.current
-			?.querySelector<HTMLButtonElement>(`[data-day="${formatDay(focused)}"]`)
-			?.focus();
-	}, [focused]);
-
-	const move = (next: CalendarDay) => setFocused(next);
-
-	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-		const rtl =
-			getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
-		const keys: Record<string, () => void> = {
-			ArrowLeft: () => move(addDays(focused, -rtl)),
-			ArrowRight: () => move(addDays(focused, rtl)),
-			ArrowUp: () => move(addDays(focused, -7)),
-			ArrowDown: () => move(addDays(focused, 7)),
-			PageUp: () => move(addMonths(focused, event.shiftKey ? -12 : -1)),
-			PageDown: () => move(addMonths(focused, event.shiftKey ? 12 : 1)),
-			Escape: () => onClose(true),
-		};
-		const action = keys[event.key];
-		if (!action) return;
-		event.preventDefault();
-		event.stopPropagation();
-		action();
-	};
-
-	return (
-		<AnchoredSurface
-			open={open}
-			onExited={onExited}
-			ref={root}
-			anchor={anchor}
-			width={WIDTH}
-			needed={360}
-			onClose={onClose}
-			id={id}
-			role="dialog"
-			aria-label={label}
-			contentClassName="gap-2 p-3"
-			onKeyDown={onKeyDown}
-		>
-			<div className="flex items-center justify-between gap-2 ps-2">
-				<p className="text-headline font-semibold" aria-live="polite">
-					{title}
-				</p>
-				<div className="flex items-center rtl:flex-row-reverse">
-					<IconButton
-						variant="ghost"
-						size="icon-sm"
-						label={labels.previousMonth}
-						onClick={() => move(addMonths(focused, -1))}
-						className="text-accent-text"
-					>
-						<ChevronLeftIcon size={20} />
-					</IconButton>
-					<IconButton
-						variant="ghost"
-						size="icon-sm"
-						label={labels.nextMonth}
-						onClick={() => move(addMonths(focused, 1))}
-						className="text-accent-text"
-					>
-						<ChevronRightIcon size={20} />
-					</IconButton>
-				</div>
-			</div>
-			<div
-				role="grid"
-				aria-label={title}
-				className="grid grid-cols-7 gap-y-0.5"
-			>
-				<div role="row" className="contents">
-					{weekdays.map((weekday, index) => (
-						<span
-							key={days[index].toString()}
-							role="columnheader"
-							className="text-caption2 text-label-tertiary pb-1 text-center font-semibold"
-						>
-							{weekday}
-						</span>
-					))}
-				</div>
-				{days.map((day) => {
-					const key = formatDay(day);
-					const selected = key === value;
-					const isToday = key === formatDay(today);
-					const isFocused = key === formatDay(focused);
-					const allowed = withinBounds(key, min, max);
-					return (
-						<button
-							key={key}
-							type="button"
-							role="gridcell"
-							data-day={key}
-							tabIndex={isFocused ? 0 : -1}
-							disabled={!allowed}
-							aria-selected={selected}
-							aria-current={isToday ? "date" : undefined}
-							aria-label={fullDate.format(toDate(day))}
-							onClick={() => onChoose(key)}
-							className={cn(
-								"text-body mx-auto flex size-10 items-center justify-center rounded-full tabular-nums transition-colors",
-								"focus-visible:ring-accent/70 focus-visible:ring-2 focus-visible:outline-none",
-								selected
-									? "bg-accent text-on-accent font-semibold"
-									: isToday
-										? "text-accent-text hover:bg-fill/80 font-semibold"
-										: day.inMonth
-											? "text-label hover:bg-fill/80"
-											: "text-label-tertiary hover:bg-fill/60",
-								!allowed && "opacity-30",
-							)}
-						>
-							{day.day}
-						</button>
-					);
-				})}
-			</div>
-			{labels.clear && value && (
-				<button
-					type="button"
-					onClick={() => onChoose("")}
-					className="text-subheadline text-accent-text hover:bg-fill/80 self-center rounded-full px-3 py-1.5"
-				>
-					{labels.clear}
-				</button>
-			)}
-		</AnchoredSurface>
-	);
-}

package/src/components/compact-time-picker/compact-time-picker.tsx

@@ -1,321 +0,0 @@
-import { useAnchoredDisclosure } from "../../hooks/use-anchored-disclosure";
-import { AnchoredSurface } from "../popover/anchored-surface";
-import { type KeyboardEvent, useEffect, useId, useRef } from "react";
-import { createPortal } from "react-dom";
-import { ClockIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { haptic } from "../../lib/haptics";
-import { pickerTriggerStyle, type PickerSize } from "../picker/picker-trigger";
-import {
-	formatTime,
-	fromTwelveHours,
-	minuteChoices,
-	parseTime,
-	type TimeOfDay,
-	toTwelveHours,
-	usesTwelveHours,
-} from "./time-value";
-
-export interface CompactTimePickerProps {
-	/** `HH:MM` on a 24 hour clock, or "" when no time is chosen. */
-	value: string;
-	onChange: (value: string) => void;
-	/** Names the button and the panel for assistive technology. */
-	label: string;
-	locale: string;
-	/** Minutes offered, in steps; an exact time already chosen is kept. */
-	minuteStep?: number;
-	/** Shown when no time is chosen. */
-	placeholder?: string;
-	labels: { hour: string; minute: string; period: string };
-	className?: string;
-	/** Prevents opening the time panel. @default false */
-	disabled?: boolean;
-	/** Trigger button density; matches Picker's sm | md | lg. @default "md" */
-	size?: PickerSize;
-}
-
-/**
- * A time as a compact button that opens columns of hours and minutes,
- * like SwiftUI's compact DatePicker for times, on the clock the locale
- * reads (12 hours with AM and PM, or 24).
- */
-export function CompactTimePicker({
-	value,
-	onChange,
-	label,
-	locale,
-	minuteStep = 5,
-	placeholder,
-	labels,
-	className,
-	disabled = false,
-	size = "md",
-}: CompactTimePickerProps) {
-	const panel = useAnchoredDisclosure(disabled);
-	const { open } = panel;
-	const trigger = useRef<HTMLButtonElement>(null);
-	const panelId = useId();
-	const chosen = parseTime(value);
-	const shown = chosen
-		? new Intl.DateTimeFormat(locale, {
-				hour: "numeric",
-				minute: "2-digit",
-				timeZone: "UTC",
-			}).format(new Date(Date.UTC(2000, 0, 1, chosen.hour, chosen.minute)))
-		: (placeholder ?? "");
-
-	return (
-		<>
-			<button
-				ref={trigger}
-				type="button"
-				aria-label={chosen ? `${label}, ${shown}` : label}
-				aria-haspopup="dialog"
-				aria-expanded={open && !disabled}
-				aria-controls={open && !disabled ? panelId : undefined}
-				disabled={disabled}
-				onClick={() => panel.toggle()}
-				className={pickerTriggerStyle(className, size)}
-			>
-				<span
-					className={cn(
-						"min-w-0 grow truncate tabular-nums",
-						!chosen && "text-label-tertiary",
-					)}
-				>
-					{shown}
-				</span>
-				<ClockIcon size={16} className="text-label-tertiary shrink-0" />
-			</button>
-			{typeof document !== "undefined" &&
-				createPortal(
-					panel.mounted && trigger.current ? (
-						<TimeColumns
-							open={open}
-							onExited={panel.onExited}
-							id={panelId}
-							anchor={trigger.current}
-							label={label}
-							locale={locale}
-							time={
-								chosen ?? {
-									hour: 9,
-									minute: 0,
-								}
-							}
-							minuteStep={minuteStep}
-							labels={labels}
-							onChange={(next) => {
-								haptic("selection");
-								onChange(formatTime(next));
-							}}
-							onClose={(restoreFocus) => {
-								panel.close();
-								if (restoreFocus)
-									trigger.current?.focus({ preventScroll: true });
-							}}
-						/>
-					) : null,
-					document.body,
-				)}
-		</>
-	);
-}
-
-interface ColumnItem {
-	key: number;
-	text: string;
-}
-
-function TimeColumns({
-	open,
-	onExited,
-	id,
-	anchor,
-	label,
-	locale,
-	time,
-	minuteStep,
-	labels,
-	onChange,
-	onClose,
-}: {
-	open: boolean;
-	onExited: () => void;
-	id: string;
-	anchor: HTMLElement;
-	label: string;
-	locale: string;
-	time: TimeOfDay;
-	minuteStep: number;
-	labels: CompactTimePickerProps["labels"];
-	onChange: (time: TimeOfDay) => void;
-	onClose: (restoreFocus: boolean) => void;
-}) {
-	const root = useRef<HTMLDivElement>(null);
-	const twelve = usesTwelveHours(locale);
-	const number = new Intl.NumberFormat(locale, {
-		minimumIntegerDigits: 2,
-	});
-	const plain = new Intl.NumberFormat(locale);
-	const clock = toTwelveHours(time.hour);
-
-	const hours: ColumnItem[] = twelve
-		? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((hour) => ({
-				key: hour,
-				text: plain.format(hour),
-			}))
-		: Array.from({ length: 24 }, (_, hour) => ({
-				key: hour,
-				text: number.format(hour),
-			}));
-	const minutes = minuteChoices(minuteStep, time.minute).map((minute) => ({
-		key: minute,
-		text: number.format(minute),
-	}));
-	// The locale's own words for morning and afternoon.
-	const periodName = (pm: boolean) =>
-		new Intl.DateTimeFormat(locale, {
-			hour: "numeric",
-			hour12: true,
-			timeZone: "UTC",
-		})
-			.formatToParts(new Date(Date.UTC(2000, 0, 1, pm ? 13 : 1)))
-			.find((part) => part.type === "dayPeriod")?.value ?? (pm ? "PM" : "AM");
-	const periods = [
-		{ key: 0, text: periodName(false) },
-		{ key: 1, text: periodName(true) },
-	];
-
-	return (
-		<AnchoredSurface
-			open={open}
-			onExited={onExited}
-			ref={root}
-			anchor={anchor}
-			width={twelve ? 240 : 180}
-			needed={280}
-			onClose={onClose}
-			id={id}
-			role="dialog"
-			aria-label={label}
-			contentClassName="flex-row gap-1 overflow-hidden p-2"
-			onKeyDown={(event) => {
-				if (event.key !== "Escape") return;
-				event.preventDefault();
-				event.stopPropagation();
-				onClose(true);
-			}}
-		>
-			<Column
-				label={labels.hour}
-				items={hours}
-				selected={twelve ? clock.hour : time.hour}
-				autoFocus
-				onSelect={(hour) =>
-					onChange({
-						...time,
-						hour: twelve ? fromTwelveHours(hour, clock.pm) : hour,
-					})
-				}
-			/>
-			<Column
-				label={labels.minute}
-				items={minutes}
-				selected={time.minute}
-				onSelect={(minute) => onChange({ ...time, minute })}
-			/>
-			{twelve && (
-				<Column
-					label={labels.period}
-					items={periods}
-					selected={clock.pm ? 1 : 0}
-					onSelect={(period) =>
-						onChange({
-							...time,
-							hour: fromTwelveHours(clock.hour, period === 1),
-						})
-					}
-				/>
-			)}
-		</AnchoredSurface>
-	);
-}
-
-/** One scrolling column of choices; Up and Down move through it. */
-function Column({
-	label,
-	items,
-	selected,
-	autoFocus = false,
-	onSelect,
-}: {
-	label: string;
-	items: ColumnItem[];
-	selected: number;
-	autoFocus?: boolean;
-	onSelect: (key: number) => void;
-}) {
-	const list = useRef<HTMLDivElement>(null);
-
-	// The chosen item starts in the middle of the column, then follows changes.
-	useEffect(() => {
-		const element = list.current?.querySelector<HTMLElement>(
-			`[data-key="${selected}"]`,
-		);
-		element?.scrollIntoView({ block: "center" });
-		if (autoFocus && list.current?.contains(document.activeElement) === false)
-			element?.focus();
-	}, [selected, autoFocus]);
-
-	const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-		const step =
-			event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
-		if (!step) return;
-		event.preventDefault();
-		const index = items.findIndex((item) => item.key === selected);
-		const next = items[(index + step + items.length) % items.length];
-		if (!next) return;
-		onSelect(next.key);
-		requestAnimationFrame(() =>
-			list.current
-				?.querySelector<HTMLElement>(`[data-key="${next.key}"]`)
-				?.focus(),
-		);
-	};
-
-	return (
-		<div
-			ref={list}
-			role="listbox"
-			aria-label={label}
-			onKeyDown={onKeyDown}
-			className="flex max-h-56 flex-1 snap-y snap-mandatory [scrollbar-width:none] flex-col overflow-y-auto overscroll-contain py-[5.25rem]"
-		>
-			{items.map((item) => {
-				const isSelected = item.key === selected;
-				return (
-					<button
-						key={item.key}
-						type="button"
-						role="option"
-						data-key={item.key}
-						aria-selected={isSelected}
-						tabIndex={isSelected ? 0 : -1}
-						onClick={() => onSelect(item.key)}
-						className={cn(
-							"text-title3 flex h-11 shrink-0 snap-center items-center justify-center rounded-xl tabular-nums transition-colors",
-							"focus-visible:ring-accent/70 focus-visible:ring-2 focus-visible:outline-none",
-							isSelected
-								? "bg-fill text-label font-semibold"
-								: "text-label-secondary hover:bg-fill/60",
-						)}
-					>
-						{item.text}
-					</button>
-				);
-			})}
-		</div>
-	);
-}

package/src/components/compact-time-picker/time-value.ts

@@ -1,58 +0,0 @@
-/** A time of day on a 24 hour clock. */
-export interface TimeOfDay {
-	hour: number;
-	minute: number;
-}
-
-/** Reads `HH:MM` (24 hour); null for anything else. */
-export function parseTime(value: string): TimeOfDay | null {
-	const match = /^(\d{2}):(\d{2})$/.exec(value);
-	if (!match) return null;
-	const hour = Number(match[1]);
-	const minute = Number(match[2]);
-	return hour < 24 && minute < 60 ? { hour, minute } : null;
-}
-
-export function formatTime({ hour, minute }: TimeOfDay): string {
-	return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
-}
-
-/** Whether people where `locale` is used read time on a 12 hour clock. */
-export function usesTwelveHours(locale: string): boolean {
-	try {
-		const cycle = new Intl.DateTimeFormat(locale, {
-			hour: "numeric",
-		}).resolvedOptions().hourCycle;
-		return cycle === "h11" || cycle === "h12";
-	} catch {
-		return false;
-	}
-}
-
-/** The hour as shown on a 12 hour clock (12, 1 to 11) and whether it's after noon. */
-export function toTwelveHours(hour: number): {
-	hour: number;
-	pm: boolean;
-} {
-	return {
-		hour: hour % 12 === 0 ? 12 : hour % 12,
-		pm: hour >= 12,
-	};
-}
-
-export function fromTwelveHours(hour: number, pm: boolean): number {
-	return (hour % 12) + (pm ? 12 : 0);
-}
-
-/** Minutes offered in steps of `step`, keeping `current` when it falls between them. */
-export function minuteChoices(step: number, current?: number): number[] {
-	const choices = Array.from(
-		{ length: Math.ceil(60 / step) },
-		(_, index) => index * step,
-	);
-	if (current !== undefined && !choices.includes(current)) {
-		choices.push(current);
-		choices.sort((a, b) => a - b);
-	}
-	return choices;
-}