@passui/react 0.1.46 → 0.2.0

package/src/components/toast/toaster.tsx

@@ -1,407 +0,0 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import {
-	useEffect,
-	useId,
-	useLayoutEffect,
-	useRef,
-	useState,
-	useSyncExternalStore,
-} from "react";
-import { CheckIcon, CloseIcon } from "../../icons/icons";
-import { cn } from "../../lib/class-names";
-import { spring } from "../../motion/transitions";
-import {
-	getToasts,
-	subscribeToasts,
-	type Toast,
-	type ToastSize,
-	type ToastTone,
-	toast as toastApi,
-	toastLimits,
-} from "./toast-store";
-
-const PILL: Record<ToastSize, number> = { sm: 32, md: 40, lg: 48 };
-
-const contentClasses: Record<ToastSize, string> = {
-	sm: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2 py-2 pr-3 pl-2 text-on-inverse",
-	md: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-2.5 py-[10px] pr-4 pl-[10px] text-on-inverse",
-	lg: "absolute top-0 left-0 flex w-max max-w-[min(420px,calc(100vw-24px))] items-start gap-3 py-3 pr-5 pl-3 text-on-inverse",
-};
-const titleClasses: Record<ToastSize, string> = {
-	sm: "text-footnote leading-4 font-semibold",
-	md: "text-subheadline leading-5 font-semibold",
-	lg: "text-body leading-6 font-semibold",
-};
-const descriptionClasses: Record<ToastSize, string> = {
-	sm: "text-caption2 leading-snug text-on-inverse/70",
-	md: "text-footnote leading-snug text-on-inverse/70",
-	lg: "text-subheadline leading-snug text-on-inverse/70",
-};
-const actionClasses: Record<ToastSize, string> = {
-	sm: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-2.5 py-0.5 text-caption2 font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
-	md: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3 py-1 text-footnote font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
-	lg: "ml-1 shrink-0 self-center rounded-full bg-on-inverse/12 px-3.5 py-1.5 text-subheadline font-semibold text-on-inverse transition-colors hover:bg-on-inverse/20",
-};
-const toneIconClasses: Record<ToastSize, string> = {
-	sm: "flex size-4 shrink-0 items-center justify-center rounded-full",
-	md: "flex size-5 shrink-0 items-center justify-center rounded-full",
-	lg: "flex size-6 shrink-0 items-center justify-center rounded-full",
-};
-const EMPTY: Toast[] = [];
-/** A little loose, so the body overshoots and settles like a drop of honey. */
-const BODY_SPRING = {
-	type: "spring",
-	stiffness: 260,
-	damping: 19,
-	mass: 0.9,
-} as const;
-
-/**
- * Toasts drop from the top centre like an island: a small pill carrying the
- * icon, out of which the message flows. Both shapes sit under an SVG "goo"
- * filter, so where they meet looks liquid while they grow, morph between
- * states and shrink away. Text is drawn above the filter to stay crisp.
- */
-export function Toaster({
-	className,
-	label = "Notifications",
-}: {
-	className?: string;
-	label?: string;
-}) {
-	const toasts = useSyncExternalStore(subscribeToasts, getToasts, () => EMPTY);
-	const filterId = useId();
-	const reducedMotion = useReducedMotion();
-	const [hovered, setHovered] = useState(false);
-	const visible = toasts.slice(0, toastLimits.visible);
-
-	return (
-		<>
-			<GooFilter id={filterId} />
-			<section
-				aria-label={label}
-				aria-live="polite"
-				className={cn(
-					"pointer-events-none fixed inset-x-0 top-[max(10px,env(safe-area-inset-top))] z-[60] flex justify-center px-3",
-					className,
-				)}
-			>
-				<ol
-					className="relative flex w-full max-w-[420px] flex-col items-center"
-					onMouseEnter={() => setHovered(true)}
-					onMouseLeave={() => setHovered(false)}
-				>
-					<AnimatePresence initial={false}>
-						{visible.map((item, index) => (
-							<ToastItem
-								key={item.id}
-								toast={item}
-								index={index}
-								expanded={hovered}
-								paused={hovered}
-								filterId={filterId}
-								reducedMotion={Boolean(reducedMotion)}
-							/>
-						))}
-					</AnimatePresence>
-				</ol>
-			</section>
-		</>
-	);
-}
-
-function GooFilter({ id }: { id: string }) {
-	return (
-		<svg aria-hidden="true" className="pointer-events-none absolute size-0">
-			<defs>
-				<filter id={id}>
-					<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
-					<feColorMatrix
-						in="blur"
-						mode="matrix"
-						values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -10"
-						result="goo"
-					/>
-					<feComposite in="SourceGraphic" in2="goo" operator="atop" />
-				</filter>
-			</defs>
-		</svg>
-	);
-}
-
-function ToastItem({
-	toast,
-	index,
-	expanded,
-	paused,
-	filterId,
-	reducedMotion,
-}: {
-	toast: Toast;
-	index: number;
-	expanded: boolean;
-	paused: boolean;
-	filterId: string;
-	reducedMotion: boolean;
-}) {
-	const pill = PILL[toast.size];
-	const content = useRef<HTMLDivElement>(null);
-	const [size, setSize] = useState({
-		width: pill,
-		height: pill,
-	});
-	const [open, setOpen] = useState(false);
-
-	// The body flows out of the pill a beat after it lands.
-	useEffect(() => {
-		const timer = setTimeout(() => setOpen(true), reducedMotion ? 0 : 140);
-		return () => clearTimeout(timer);
-	}, [reducedMotion]);
-
-	useLayoutEffect(() => {
-		const element = content.current;
-		if (!element) return;
-		const measure = () =>
-			setSize({
-				width: Math.ceil(element.offsetWidth),
-				height: Math.ceil(element.offsetHeight),
-			});
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(element);
-		return () => observer.disconnect();
-	}, []);
-
-	useEffect(() => {
-		if (toast.duration === null || paused) return;
-		const timer = setTimeout(() => toastApi.dismiss(toast.id), toast.duration);
-		return () => clearTimeout(timer);
-	}, [toast.id, toast.duration, paused]);
-
-	const width = open ? size.width : pill;
-	const height = open ? size.height : pill;
-	// Older toasts tuck in behind the newest, and fan out on hover.
-	const stacked = !expanded && index > 0;
-
-	return (
-		<motion.li
-			layout={!reducedMotion}
-			className="pointer-events-none absolute inset-x-0 top-0 flex justify-center"
-			style={{ zIndex: 10 - index }}
-			initial={reducedMotion ? false : { opacity: 0, y: -24, scale: 0.6 }}
-			animate={{
-				opacity: stacked ? 1 - index * 0.25 : 1,
-				y: stacked ? index * 9 : index * (pill + 14) + index * 6,
-				scale: stacked ? 1 - index * 0.05 : 1,
-			}}
-			exit={
-				reducedMotion
-					? { opacity: 0 }
-					: {
-							opacity: 0,
-							y: -18,
-							scale: 0.6,
-							transition: spring.snappy,
-						}
-			}
-			transition={reducedMotion ? { duration: 0 } : spring.bouncy}
-			drag={reducedMotion ? false : "y"}
-			dragConstraints={{ top: 0, bottom: 0 }}
-			dragElastic={{ top: 0.6, bottom: 0.1 }}
-			onDragEnd={(_, info) => {
-				if (info.offset.y < -30 || info.velocity.y < -300)
-					toastApi.dismiss(toast.id);
-			}}
-		>
-			<motion.div
-				role="status"
-				className="pointer-events-auto relative"
-				initial={{ width: pill, height: pill }}
-				animate={{ width, height }}
-				transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
-			>
-				{/* Shapes, under the goo filter; padded so the blur isn't clipped. */}
-				<div
-					aria-hidden="true"
-					className="absolute -inset-3"
-					style={{
-						filter: reducedMotion ? undefined : `url(#${filterId})`,
-					}}
-				>
-					<motion.span
-						className="bg-inverse absolute top-3 left-3 rounded-full shadow-xl"
-						style={{ width: pill, height: pill }}
-						animate={{ scale: open ? 1 : 1.06 }}
-						transition={reducedMotion ? { duration: 0 } : spring.bouncy}
-					/>
-					<motion.span
-						className="bg-inverse absolute top-3 left-3"
-						initial={{
-							width: pill,
-							height: pill,
-							borderRadius: pill / 2,
-						}}
-						animate={{
-							width,
-							height,
-							borderRadius: Math.min(pill / 2, height / 2, 22),
-						}}
-						transition={reducedMotion ? { duration: 0 } : BODY_SPRING}
-					/>
-				</div>
-
-				{/* Content, crisp above the shapes. */}
-				<motion.div
-					ref={content}
-					className={contentClasses[toast.size]}
-					style={{ minHeight: pill }}
-					animate={{ opacity: open ? 1 : 0 }}
-					transition={
-						reducedMotion
-							? { duration: 0 }
-							: {
-									duration: open ? 0.22 : 0.1,
-									delay: open ? 0.08 : 0,
-								}
-					}
-				>
-					<ToneIcon
-						tone={toast.tone}
-						size={toast.size}
-						reducedMotion={reducedMotion}
-					/>
-					<div className="flex min-w-0 flex-col py-px">
-						<AnimatePresence mode="popLayout" initial={false}>
-							<motion.span
-								key={toast.title}
-								className={titleClasses[toast.size]}
-								initial={
-									reducedMotion
-										? false
-										: {
-												opacity: 0,
-												y: 6,
-												filter: "blur(4px)",
-											}
-								}
-								animate={{
-									opacity: 1,
-									y: 0,
-									filter: "blur(0px)",
-								}}
-								exit={
-									reducedMotion
-										? { opacity: 0 }
-										: {
-												opacity: 0,
-												y: -6,
-												filter: "blur(4px)",
-											}
-								}
-								transition={reducedMotion ? { duration: 0 } : spring.snappy}
-							>
-								{toast.title}
-							</motion.span>
-						</AnimatePresence>
-						{toast.description && (
-							<span className={descriptionClasses[toast.size]}>
-								{toast.description}
-							</span>
-						)}
-					</div>
-					{toast.action && (
-						<button
-							type="button"
-							onClick={() => {
-								toast.action?.onClick();
-								toastApi.dismiss(toast.id);
-							}}
-							className={actionClasses[toast.size]}
-						>
-							{toast.action.label}
-						</button>
-					)}
-				</motion.div>
-			</motion.div>
-		</motion.li>
-	);
-}
-
-const toneColors: Record<ToastTone, string> = {
-	neutral: "bg-transparent",
-	success: "bg-success text-white",
-	error: "bg-danger text-white",
-	loading: "bg-on-inverse/15 text-on-inverse",
-};
-
-function ToneIcon({
-	tone,
-	size,
-	reducedMotion,
-}: {
-	tone: ToastTone;
-	size: ToastSize;
-	reducedMotion: boolean;
-}) {
-	return (
-		<AnimatePresence mode="popLayout" initial={false}>
-			<motion.span
-				key={tone}
-				className={cn(toneIconClasses[size], toneColors[tone])}
-				initial={
-					reducedMotion
-						? false
-						: {
-								scale: 0.3,
-								opacity: 0,
-								rotate: -40,
-							}
-				}
-				animate={{ scale: 1, opacity: 1, rotate: 0 }}
-				exit={{ scale: 0.3, opacity: 0 }}
-				transition={reducedMotion ? { duration: 0 } : spring.bouncy}
-			>
-				{tone === "success" && <CheckIcon size={13} strokeWidth={3} />}
-				{tone === "error" && <CloseIcon size={12} strokeWidth={3} />}
-				{/* The full stop from the Notables mark. */}
-				{tone === "neutral" && (
-					<span className="size-2 rounded-full bg-[#EE8A2A]" />
-				)}
-				{tone === "loading" && <Spinner reducedMotion={reducedMotion} />}
-			</motion.span>
-		</AnimatePresence>
-	);
-}
-
-function Spinner({ reducedMotion }: { reducedMotion: boolean }) {
-	return (
-		<motion.svg
-			viewBox="0 0 20 20"
-			className="size-4"
-			animate={reducedMotion ? undefined : { rotate: 360 }}
-			transition={{
-				repeat: Number.POSITIVE_INFINITY,
-				duration: 0.8,
-				ease: "linear",
-			}}
-			aria-hidden="true"
-		>
-			<circle
-				cx="10"
-				cy="10"
-				r="7"
-				fill="none"
-				stroke="currentColor"
-				strokeOpacity="0.25"
-				strokeWidth="2.4"
-			/>
-			<path
-				d="M10 3a7 7 0 0 1 7 7"
-				fill="none"
-				stroke="currentColor"
-				strokeWidth="2.4"
-				strokeLinecap="round"
-			/>
-		</motion.svg>
-	);
-}