@passui/react 0.1.47 → 0.2.0

package/src/components/context-menu/menu-reveal.ts

@@ -1,42 +0,0 @@
-export type MenuRect = {
-	left: number;
-	top: number;
-	width: number;
-	height: number;
-};
-
-/** Return toward the source while handing its material back to the real trigger. */
-export function menuSurfaceExit(source: ReturnType<typeof menuSurfaceReveal>) {
-	return { ...source, opacity: 0 };
-}
-
-/** Animate the material's bounds independently so menu text never stretches. */
-export function menuSurfaceReveal(
-	source: MenuRect | undefined,
-	target: MenuRect & { radius?: number },
-) {
-	if (
-		!source ||
-		source.width <= 0 ||
-		source.height <= 0 ||
-		target.width <= 0 ||
-		target.height <= 0
-	) {
-		return {
-			x: 0,
-			y: -4,
-			width: target.width,
-			height: target.height,
-			opacity: 0,
-			borderRadius: target.radius ?? 0,
-		};
-	}
-	return {
-		x: source.left - target.left,
-		y: source.top - target.top,
-		width: source.width,
-		height: source.height,
-		opacity: 1,
-		borderRadius: Math.min(source.width, source.height) / 2,
-	};
-}

package/src/components/context-menu/use-context-menu.ts

@@ -1,73 +0,0 @@
-import { type MouseEvent, type PointerEvent, useRef } from "react";
-import { haptic } from "../../lib/haptics";
-import { type ContextMenuItem, openContextMenu } from "./context-menu-store";
-
-const LONG_PRESS_MS = 480;
-const MOVE_TOLERANCE = 10;
-
-/**
- * Right-click on desktop, long-press on touch screens: both open the same
- * menu of actions. Spread the returned handlers onto the element.
- */
-export function useContextMenu(items: () => ContextMenuItem[]) {
-	const press = useRef<{
-		x: number;
-		y: number;
-		timer: ReturnType<typeof setTimeout>;
-	} | null>(null);
-	const suppressClick = useRef(false);
-
-	const cancel = () => {
-		if (press.current) clearTimeout(press.current.timer);
-		press.current = null;
-	};
-
-	return {
-		onContextMenu(event: MouseEvent) {
-			event.preventDefault();
-			cancel();
-			openContextMenu(
-				event.clientX,
-				event.clientY,
-				items(),
-				false,
-				event.currentTarget,
-			);
-		},
-		onPointerDown(event: PointerEvent) {
-			if (event.pointerType !== "touch") return;
-			const { clientX: x, clientY: y } = event;
-			const anchor = event.currentTarget;
-			cancel();
-			press.current = {
-				x,
-				y,
-				timer: setTimeout(() => {
-					press.current = null;
-					suppressClick.current = true;
-					haptic("medium");
-					openContextMenu(x, y, items(), true, anchor);
-				}, LONG_PRESS_MS),
-			};
-		},
-		onPointerMove(event: PointerEvent) {
-			const start = press.current;
-			if (
-				start &&
-				Math.hypot(event.clientX - start.x, event.clientY - start.y) >
-					MOVE_TOLERANCE
-			) {
-				cancel();
-			}
-		},
-		onPointerUp: cancel,
-		onPointerCancel: cancel,
-		// The tap that ends a long-press shouldn't also open the row.
-		onClickCapture(event: MouseEvent) {
-			if (!suppressClick.current) return;
-			suppressClick.current = false;
-			event.preventDefault();
-			event.stopPropagation();
-		},
-	};
-}

package/src/components/conversation/conversation.tsx

@@ -1,309 +0,0 @@
-import { IconButton } from "../button/icon-button";
-import { SendIcon } from "../../icons/icons";
-import type { ReactNode } from "react";
-import { useState } from "react";
-import { formatTime } from "../../lib/date";
-import { cn } from "../../lib/class-names";
-
-export type ConversationMessage = {
-	id: string;
-	body: string;
-	/** Written by whoever is looking: drawn on the right. */
-	mine: boolean;
-	author?: string;
-	/** Shown beside the other side's messages, like their avatar. */
-	avatar?: ReactNode;
-	createdAt: string;
-};
-
-export type ConversationSize = "sm" | "md" | "lg";
-
-const avatarSizes: Record<ConversationSize, string> = {
-	sm: "size-6",
-	md: "size-7",
-	lg: "size-8",
-};
-const bubbleClasses: Record<ConversationSize, string> = {
-	sm: "rounded-3xl px-3 py-1.5 text-footnote leading-snug",
-	md: "rounded-4xl px-3.5 py-2 text-subheadline leading-snug",
-	lg: "rounded-5xl px-4 py-2.5 text-body leading-snug",
-};
-const bubbleTails: Record<ConversationSize, string> = {
-	sm: "rounded-br-sm",
-	md: "rounded-br-md",
-	lg: "rounded-br-lg",
-};
-const bubbleTailsOther: Record<ConversationSize, string> = {
-	sm: "rounded-bl-sm",
-	md: "rounded-bl-md",
-	lg: "rounded-bl-lg",
-};
-const authorText: Record<ConversationSize, string> = {
-	sm: "px-3 text-caption2 text-label-secondary",
-	md: "px-3 text-caption2 text-label-secondary",
-	lg: "px-3.5 text-caption text-label-secondary",
-};
-const timeText: Record<ConversationSize, string> = {
-	sm: "px-3 text-caption2 text-label-secondary tabular-nums",
-	md: "px-3 text-caption2 text-label-secondary tabular-nums",
-	lg: "px-3.5 text-caption text-label-secondary tabular-nums",
-};
-const dayMargins: Record<ConversationSize, string> = {
-	sm: "my-3",
-	md: "my-4",
-	lg: "my-5",
-};
-
-// Composer size records
-const composerSurfaces: Record<ConversationSize, string> = {
-	sm: "flex items-end gap-2 rounded-4xl border border-separator bg-elevated py-1 pr-1 pl-3 transition-colors focus-within:border-accent-text/60",
-	md: "flex items-end gap-2 rounded-5xl border border-separator bg-elevated py-1.5 pr-1.5 pl-4 transition-colors focus-within:border-accent-text/60",
-	lg: "flex items-end gap-2 rounded-5xl border border-separator bg-elevated py-2 pr-2 pl-5 transition-colors focus-within:border-accent-text/60",
-};
-const textareaClasses: Record<ConversationSize, string> = {
-	sm: "field-sizing-content max-h-48 min-h-8 flex-1 resize-none bg-transparent py-1 text-footnote text-label outline-none placeholder:text-label-secondary",
-	md: "field-sizing-content max-h-48 min-h-9 flex-1 resize-none bg-transparent py-1.5 text-subheadline text-label outline-none placeholder:text-label-secondary",
-	lg: "field-sizing-content max-h-48 min-h-10 flex-1 resize-none bg-transparent py-2 text-body text-label outline-none placeholder:text-label-secondary",
-};
-const sendButtonClasses: Record<ConversationSize, string> = {
-	sm: "size-7 shrink-0 rounded-full",
-	md: "size-8 shrink-0 rounded-full",
-	lg: "size-9 shrink-0 rounded-full",
-};
-const sendIconSizes: Record<ConversationSize, number> = {
-	sm: 16,
-	md: 18,
-	lg: 20,
-};
-const counterText: Record<ConversationSize, string> = {
-	sm: "text-caption2 text-label-secondary tabular-nums",
-	md: "text-caption2 text-label-secondary tabular-nums",
-	lg: "text-caption text-label-secondary tabular-nums",
-};
-
-const GROUP_GAP_MS = 5 * 60 * 1000;
-
-function dayLabel(iso: string, locale?: string) {
-	const date = new Date(iso);
-	const today = new Date();
-	const yesterday = new Date();
-	yesterday.setDate(today.getDate() - 1);
-	const offset =
-		date.toDateString() === today.toDateString()
-			? 0
-			: date.toDateString() === yesterday.toDateString()
-				? -1
-				: null;
-	if (offset === null)
-		return date.toLocaleDateString(locale, {
-			weekday: "long",
-			month: "long",
-			day: "numeric",
-		});
-	const word = new Intl.RelativeTimeFormat(locale, {
-		numeric: "auto",
-	}).format(offset, "day");
-	return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
-}
-
-const clock = (iso: string, locale?: string) =>
-	new Date(iso).toLocaleTimeString(locale, {
-		hour: "numeric",
-		minute: "2-digit",
-	});
-
-/**
- * A thread of plain-text messages like Messages on iPhone: a day line when
- * the date changes, back-to-back messages from one side grouped under one
- * name, theirs on the left with an avatar, yours on the right.
- */
-function Messages({
-	messages,
-	locale,
-	size = "md",
-}: {
-	messages: ConversationMessage[];
-	/** For day names and times; the reader's own by default. */
-	locale?: string;
-	/** Bubble, avatar, author and time scale. @default "md" */
-	size?: ConversationSize;
-}) {
-	return (
-		<ol data-not-typeset className="flex flex-col">
-			{messages.map((message, index) => {
-				const prev = messages[index - 1];
-				const next = messages[index + 1];
-				const newDay =
-					!prev ||
-					new Date(prev.createdAt).toDateString() !==
-						new Date(message.createdAt).toDateString();
-				const startsGroup =
-					newDay ||
-					prev.mine !== message.mine ||
-					new Date(message.createdAt).getTime() -
-						new Date(prev.createdAt).getTime() >
-						GROUP_GAP_MS;
-				const endsGroup =
-					!next ||
-					next.mine !== message.mine ||
-					new Date(next.createdAt).getTime() -
-						new Date(message.createdAt).getTime() >
-						GROUP_GAP_MS;
-
-				return (
-					<li key={message.id} className="flex flex-col">
-						{newDay && (
-							<span
-								suppressHydrationWarning
-								className={cn(
-									dayMargins[size],
-									"text-caption2 text-label-secondary text-center font-medium",
-								)}
-							>
-								{dayLabel(message.createdAt, locale)}
-							</span>
-						)}
-						<div
-							className={cn(
-								"flex items-end gap-2",
-								message.mine ? "justify-end" : "justify-start",
-								startsGroup ? "mt-3" : "mt-0.5",
-							)}
-						>
-							{!message.mine && (
-								<span
-									className={cn(
-										"flex shrink-0 items-center justify-center",
-										avatarSizes[size],
-									)}
-								>
-									{endsGroup && message.avatar}
-								</span>
-							)}
-							<div
-								className={cn(
-									"flex max-w-[78%] flex-col gap-1",
-									message.mine ? "items-end" : "items-start",
-								)}
-							>
-								{startsGroup && message.author && (
-									<span className={authorText[size]}>{message.author}</span>
-								)}
-								<p
-									suppressHydrationWarning
-									title={formatTime(message.createdAt)}
-									className={cn(
-										bubbleClasses[size],
-										"wrap-break-word whitespace-pre-wrap",
-										message.mine
-											? "bg-inverse text-on-inverse"
-											: "bg-fill text-label",
-										endsGroup &&
-											(message.mine
-												? bubbleTails[size]
-												: bubbleTailsOther[size]),
-									)}
-								>
-									{message.body}
-								</p>
-								{endsGroup && (
-									<time
-										suppressHydrationWarning
-										dateTime={message.createdAt}
-										className={timeText[size]}
-									>
-										{clock(message.createdAt, locale)}
-									</time>
-								)}
-							</div>
-						</div>
-					</li>
-				);
-			})}
-		</ol>
-	);
-}
-
-type ComposerProps = {
-	onSend: (body: string) => Promise<unknown>;
-	pending?: boolean;
-	maxLength: number;
-	placeholder: string;
-	/** Extra controls under the field, like a status picker. */
-	actions?: ReactNode;
-	/** Names the round Send button for screen readers. */
-	sendLabel: string;
-	/**
-	 * Words for the characters left, shown near the limit, such as
-	 * (count) => `${count} left`. Without it, just the number shows.
-	 */
-	remaining?: (count: number) => string;
-	/** Surface, textarea, send button and counter scale. @default "md" */
-	size?: ConversationSize;
-};
-
-/** A reply field with a round send button; Ctrl/Cmd+Enter sends, and it clears only once the send worked. */
-function Composer({
-	onSend,
-	pending = false,
-	maxLength,
-	placeholder,
-	actions,
-	sendLabel,
-	remaining,
-	size = "md",
-}: ComposerProps) {
-	const [body, setBody] = useState("");
-	const ready = body.trim().length > 0 && !pending;
-	const send = async () => {
-		if (!ready) return;
-		await onSend(body.trim());
-		setBody("");
-	};
-
-	return (
-		<form
-			data-not-typeset
-			className="flex flex-col gap-2"
-			onSubmit={(event) => {
-				event.preventDefault();
-				void send();
-			}}
-		>
-			<div className={composerSurfaces[size]}>
-				<textarea
-					value={body}
-					onChange={(event) => setBody(event.target.value)}
-					onKeyDown={(event) => {
-						if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-							event.preventDefault();
-							void send();
-						}
-					}}
-					maxLength={maxLength}
-					placeholder={placeholder}
-					rows={1}
-					className={textareaClasses[size]}
-				/>
-				<IconButton
-					type="submit"
-					size="icon-xs"
-					disabled={!ready}
-					label={sendLabel}
-					className={sendButtonClasses[size]}
-				>
-					<SendIcon size={sendIconSizes[size]} strokeWidth={2.5} />
-				</IconButton>
-			</div>
-			<div className="flex min-h-6 items-center gap-2 px-1">
-				{actions}
-				<span className={cn("ml-auto", counterText[size])}>
-					{body.length > maxLength * 0.8 &&
-						(remaining?.(maxLength - body.length) ?? maxLength - body.length)}
-				</span>
-			</div>
-		</form>
-	);
-}
-
-export const Conversation = { Messages, Composer };

package/src/components/conversation/index.ts

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

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

@@ -1,106 +0,0 @@
-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",
-};
-const fieldsetGap: Record<TextFieldSize, string> = {
-	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",
-};
-
-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;
-};
-
-/** Segmented date entry suited to birthdays, without a native calendar dialog. */
-export function DatePicker({
-	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>
-	);
-}

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

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

@@ -1,119 +0,0 @@
-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";
-
-/**
- * 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 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}`;
-
-	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 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>
-	);
-}