@a-type/ui 3.0.43 → 3.1.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "3.0.43",
+  "version": "3.1.0-beta.4",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@a-type/utils": "^1.1.4",
+    "@base-ui/react": "^1.0.0",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
@@ -85,13 +86,13 @@
     "@storybook/react": "8.4.7",
     "@storybook/react-vite": "8.4.7",
     "@storybook/test": "8.4.7",
+    "@types/dom-chromium-installation-events": "^101.0.4",
     "@types/pluralize": "^0.0.33",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@types/react-is": "^19.0.0",
     "@types/w3c-image-capture": "^1.0.10",
     "@types/web-app-manifest": "^1.0.9",
-    "@types/dom-chromium-installation-events": "^101.0.4",
     "@unocss/cli": "66.5.4",
     "@unocss/core": "66.5.4",
     "@unocss/transformer-variant-group": "66.5.4",

package/src/components/layouts/PageNav.tsx

@@ -11,7 +11,9 @@ export function PageNav({
 	children,
 	...props
 }: HTMLAttributes<HTMLDivElement>) {
-	const bodyRef = useRef(document.documentElement);
+	const bodyRef = useRef(
+		typeof document === 'undefined' ? null : document.documentElement,
+	);
 	const ref = useBoundsCssVars<HTMLDivElement>(undefined, bodyRef, {
 		left: '--nav-left',
 		top: '--nav-top',

package/src/components/particles/ParticleLayer.tsx

@@ -31,9 +31,11 @@ export function ParticleLayer({
 		/>
 	);
 
+	const ssr = typeof document === 'undefined';
+
 	return (
 		<ParticlesProvider value={particles}>
-			{noPortal ? canvas : createPortal(canvas, document.body)}
+			{noPortal || ssr ? canvas : createPortal(canvas, document.body)}
 			{children}
 		</ParticlesProvider>
 	);

package/src/components/provider/Provider.tsx

@@ -4,7 +4,7 @@ import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavi
 import { IconSpritesheet } from '../icon/index.js';
 import { ParticleLayer } from '../particles/index.js';
 import { PwaInstall } from '../pwaInstall/PwaInstall.js';
-import { Toaster } from '../toasts/toasts.js';
+import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
 import { TooltipProvider } from '../tooltip/index.js';
 
 export interface ProviderProps {
@@ -47,10 +47,12 @@ export function Provider({
 			<ConfigContext.Provider
 				value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
 			>
-				<TooltipProvider>
-					{children}
-					{otherStuff}
-				</TooltipProvider>
+				<DefaultToastProvider>
+					<TooltipProvider>
+						{children}
+						{otherStuff}
+					</TooltipProvider>
+				</DefaultToastProvider>
 			</ConfigContext.Provider>
 		);
 
@@ -58,12 +60,14 @@ export function Provider({
 		<ConfigContext.Provider
 			value={{ virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }}
 		>
-			<TooltipProvider>
-				<ParticleLayer>
-					{children}
-					{otherStuff}
-				</ParticleLayer>
-			</TooltipProvider>
+			<DefaultToastProvider>
+				<TooltipProvider>
+					<ParticleLayer>
+						{children}
+						{otherStuff}
+					</ParticleLayer>
+				</TooltipProvider>
+			</DefaultToastProvider>
 		</ConfigContext.Provider>
 	);
 }

package/src/components/toasts/toasts.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { toast } from 'react-hot-toast';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
+import { toast } from './toasts.js';
 
 const meta = {
 	title: 'Components/toasts',
@@ -24,7 +24,7 @@ export const Default: Story = {
 						toast(
 							'This is a default toast! With a lot of text. Enough to wrap around.',
 							{
-								duration: 10_000,
+								duration: 120_000,
 							},
 						);
 					}}
@@ -35,7 +35,7 @@ export const Default: Story = {
 					color="success"
 					onClick={() => {
 						toast.success('This is a success toast!', {
-							duration: 10_000,
+							duration: 20_000,
 						});
 					}}
 				>
@@ -45,7 +45,7 @@ export const Default: Story = {
 					color="attention"
 					onClick={() => {
 						toast.error('This is an error toast!', {
-							duration: 10_000,
+							duration: 20_000,
 						});
 					}}
 				>
@@ -53,10 +53,13 @@ export const Default: Story = {
 				</Button>
 				<Button
 					onClick={() => {
-						const id = toast.loading('This is a loading toast!');
+						const { complete } = toast.loading('This is a loading toast!');
 						setTimeout(() => {
-							toast.success('Loading complete!', { id, duration: 5000 });
-						}, 3000);
+							complete('Loading complete!', {
+								duration: 5000,
+								type: 'success',
+							});
+						}, 5000);
 					}}
 				>
 					Show Loading Toast
@@ -68,7 +71,8 @@ export const Default: Story = {
 								await new Promise((resolve) => setTimeout(resolve, 3000));
 							})(),
 							{
-								loading: 'Promise is loading...',
+								loading:
+									'Promise is loading... This text is longer to test animation of transition',
 								success: 'Promise resolved!',
 								error: 'Promise rejected.',
 							},
@@ -77,6 +81,44 @@ export const Default: Story = {
 				>
 					Show Promise Toast
 				</Button>
+				<Button
+					onClick={() => {
+						toast('This is a toast with actions!', {
+							timeout: 20_000,
+							data: {
+								actions: [
+									{
+										label: 'Retry',
+										emphasis: 'primary',
+										onClick: () => {
+											alert('Retry clicked!');
+										},
+									},
+									{
+										label: 'Undo',
+										emphasis: 'light',
+										onClick: () => {
+											alert('Undo clicked!');
+										},
+									},
+								],
+							},
+						});
+					}}
+				>
+					Show Toast with Actions
+				</Button>
+				<Button
+					onClick={() => {
+						toast({
+							title: 'Rich Toast',
+							description: 'This toast has both a title and a description.',
+							timeout: 20_000,
+						});
+					}}
+				>
+					Show Rich Toast
+				</Button>
 			</Box>
 		);
 	},

package/src/components/toasts/toasts.tsx

@@ -1,75 +1,261 @@
-export type * from 'react-hot-toast';
-export { toast } from 'react-hot-toast';
+import {
+	Toast,
+	ToastManagerAddOptions,
+	ToastManagerPromiseOptions,
+	ToastObject,
+} from '@base-ui/react/toast';
 import clsx from 'clsx';
-import { AnimatePresence, motion } from 'motion/react';
-import { createPortal } from 'react-dom';
-import { DefaultToastOptions, useToaster } from 'react-hot-toast';
+import { ReactNode } from 'react';
 import { useResolvedColorMode } from '../../colorMode.js';
+import { Button, ButtonProps } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
+import { Spinner } from '../spinner/Spinner.js';
 
-const toastOptions: DefaultToastOptions = {};
+export const manager = Toast.createToastManager();
 
-export const Toaster = (props: { className?: string }) => {
+export const DefaultToastProvider = ({
+	children,
+	...rest
+}: {
+	children?: React.ReactNode;
+	timeout?: number;
+}) => {
+	return (
+		<Toast.Provider toastManager={manager} {...rest}>
+			{children}
+		</Toast.Provider>
+	);
+};
+
+export function Toaster() {
+	return (
+		<Toast.Portal>
+			<Toast.Viewport className="overflow-clip">
+				<ToastList />
+			</Toast.Viewport>
+		</Toast.Portal>
+	);
+}
+
+function ToastList() {
+	const { toasts: untypedToasts } = Toast.useToastManager();
 	const mode = useResolvedColorMode();
-	const { toasts, handlers } = useToaster(toastOptions);
-	const { startPause, endPause } = handlers;
-	const visibleToasts = toasts.filter((t) => t.visible);
 
-	return createPortal(
-		<div
+	const toasts = untypedToasts as Array<ToastObject<CustomToastData>>;
+
+	return toasts.map((toast) => (
+		<Toast.Root
+			key={toast.id}
+			toast={toast}
+			swipeDirection={['up', 'right', 'left']}
 			className={clsx(
-				'fixed z-100000 flex flex-col items-center gap-xs left-1/2 center-x top-sm max-w-400px',
+				// variable setup
+				'[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))]',
+				'[--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))]',
+				'[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]',
+				// basic positioning
+				'absolute left-0 top-xs left-auto z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top',
+				'h-[--height]',
+				'flex flex-col gap-xs items-center',
+				// other properties
+				'select-none',
+				// animation and interaction
+				'translate-x-[--toast-swipe-movement-x] translate-y-[calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height)))] scale-[var(--scale)]',
+				'[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]',
+				// ::after
+				'after:(absolute top-full left-0 h-[calc(var(--gap)+1px)] w-full content-empty)',
+				// starting style
+				'data-[starting-style]:(-translate-y-150%)',
+				// limited
+				'data-[limited]:opacity-0',
+				//expanded
+				'data-[expanded]:(h-[--toast-height] translate-x-[--toast-swipe-movement-x] translate-y-[--offset-y] scale-100)',
+				// ending styles
+				'data-[ending-style]:(opacity-0)',
+				// natural or close button
+				'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:(-translate-y-150% scale-90 opacity-50)',
+				// swiping down
+				'data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
+				'data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
+				// swiping left
+				'data-[ending-style]:data-[swipe-direction=left]:(translate-x-[calc(var(--toast-swipe-movement-x)-150%)] translate-y-[var(--offset-y)])',
+				'data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:(translate-x-[calc(var(--toast-swipe-movement-x)-150%)] translate-y-[var(--offset-y)])',
+				// swiping right
+				'data-[ending-style]:data-[swipe-direction=right]:(translate-x-[calc(var(--toast-swipe-movement-x)+150%)] translate-y-[var(--offset-y)])',
+				'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:(translate-x-[calc(var(--toast-swipe-movement-x)+150%)] translate-y-[var(--offset-y)])',
+				// swiping up
+				'data-[ending-style]:data-[swipe-direction=up]:(translate-y-[calc(var(--toast-swipe-movement-y)-150%)])',
+				'data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:(translate-y-[calc(var(--toast-swipe-movement-y)-150%)])',
+				// themeing
+				{
+					'palette-success': toast.type === 'success',
+					'palette-attention': toast.type === 'error',
+					'palette-info': toast.type === 'blank',
+				},
 				mode === 'dark' ? 'override-light' : 'override-dark',
-				props.className,
 			)}
-			onMouseEnter={startPause}
-			onMouseLeave={endPause}
 		>
-			<AnimatePresence>
-				{visibleToasts.map((toast) => {
-					const message =
-						typeof toast.message === 'function'
-							? toast.message(toast)
-							: toast.message;
-					return (
-						<motion.div
-							key={toast.id}
-							className={clsx(
-								{
-									'palette-success': toast.type === 'success',
-									'palette-attention': toast.type === 'error',
-									'palette-info': toast.type === 'blank',
-								},
-								'bg-main-wash color-black rounded-md shadow-md px-md py-sm',
-								'flex flex-row gap-sm',
-							)}
-							{...toast.ariaProps}
-							initial={{ scale: 0.8, opacity: 0, y: -20 }}
-							exit={{ scale: 0.8, opacity: 0, y: -20 }}
-							animate={{
-								scale: 1,
-								opacity: 1,
-								y: 0,
-							}}
-							layout
-						>
-							<Icon
-								className="mt-2px"
-								loading={toast.type === 'loading'}
-								name={
-									toast.type === 'success'
-										? 'check'
-										: toast.type === 'error'
-										? 'warning'
-										: 'info'
+			<Toast.Content className="[&[data-behind]:not([data-expanded])]:pointer-events-none flex flex-col gap-2px max-w-sm">
+				<div
+					className={clsx(
+						'layer-components:(bg-main-wash color-black rounded-md b-1 b-solid b-black shadow-md pl-md pr-sm py-sm relative)',
+						'layer-components:(flex flex-row gap-sm)',
+						'[[data-behind]:not([data-expanded])_&]:(bg-darken-2 max-h-[--height])',
+					)}
+				>
+					<div
+						className={clsx(
+							'flex flex-row gap-xs items-center',
+							'[[data-behind]:not([data-expanded])_&]:(opacity-0) [[data-expanded]_&]:(opacity-100) transition-opacity [transition-duration:250ms]',
+						)}
+					>
+						<div className="flex flex-col gap-xs">
+							<Toast.Title className="text-sm leading-tight font-bold m-0" />
+							<div className="flex gap-sm">
+								{toast.data?.loading ? (
+									<Spinner size={15} className="relative top-2px" />
+								) : toast.type === 'success' ? (
+									<Icon
+										name="check"
+										color="success"
+										className="relative top-2px"
+									/>
+								) : toast.type === 'error' ? (
+									<Icon
+										name="warning"
+										color="attention"
+										className="relative top-2px"
+									/>
+								) : null}
+								<Toast.Description className="text-sm m-0" />
+							</div>
+						</div>
+						<Toast.Close
+							className="mb-auto [[data-behind]:not([data-expanded])_&]:(invisible)"
+							aria-label="Close"
+							render={
+								<Button size="small" emphasis="ghost">
+									<Icon name="x" />
+								</Button>
+							}
+						/>
+					</div>
+				</div>
+				{toast.data?.actions && (
+					<div className="flex gap-xxs items-center ml-auto [[data-behind]:not([data-expanded])_&]:(opacity-0) transition-opacity">
+						{toast.data.actions.toReversed().map((action, index: number) => (
+							<Toast.Action
+								key={index}
+								className="text-xs"
+								onClick={action.onClick}
+								render={
+									<Button
+										size="small"
+										emphasis={action.emphasis}
+										color={action.color}
+									/>
 								}
-							/>
-							{message}
-						</motion.div>
-					);
-				})}
-			</AnimatePresence>
-		</div>,
-		document.body,
-	);
-};
+							>
+								{action.label}
+							</Toast.Action>
+						))}
+					</div>
+				)}
+			</Toast.Content>
+		</Toast.Root>
+	));
+}
+
+export interface CustomToastData {
+	actions?: {
+		label: ReactNode;
+		onClick: () => void;
+		emphasis?: ButtonProps['emphasis'];
+		color?: ButtonProps['color'];
+	}[];
+	loading?: boolean;
+}
+
+export interface ToastOptions extends ToastManagerAddOptions<CustomToastData> {
+	/** @deprecated - use timeout */
+	duration?: number;
+}
+
+function baseToast(
+	messageOrOptions: string | ToastOptions,
+	maybeOptions?: ToastOptions,
+) {
+	const description =
+		typeof messageOrOptions === 'string' ? messageOrOptions : undefined;
+	const options =
+		typeof messageOrOptions === 'string' ? maybeOptions : messageOrOptions;
+	const extraOptions =
+		typeof messageOrOptions === 'string' && maybeOptions ? maybeOptions : {};
+
+	const finalOptions = {
+		description,
+		timeout:
+			options?.duration ??
+			extraOptions?.duration ??
+			options?.timeout ??
+			extraOptions?.timeout,
+		...options,
+		...extraOptions,
+	};
+	if (options?.id) {
+		manager.update<CustomToastData>(options.id, finalOptions);
+		return options.id;
+	}
+	return manager.add(finalOptions);
+}
+
+export const toast = Object.assign(baseToast, {
+	success(
+		messageOrOptions: string | ToastOptions,
+		maybeOptions?: ToastOptions,
+	) {
+		return baseToast(messageOrOptions, {
+			type: 'success',
+			...maybeOptions,
+		});
+	},
+	error(messageOrOptions: string | ToastOptions, maybeOptions?: ToastOptions) {
+		return baseToast(messageOrOptions, {
+			type: 'error',
+			...maybeOptions,
+		});
+	},
+	promise: function <T>(
+		promise: Promise<T>,
+		options: ToastManagerPromiseOptions<T, CustomToastData>,
+	) {
+		return manager.promise(promise, options);
+	},
+	loading: function (
+		messageOrOptions: string | ToastOptions,
+		maybeOptions?: ToastOptions,
+	) {
+		const id = baseToast(messageOrOptions, {
+			timeout: 0,
+			data: { loading: true },
+			...maybeOptions,
+		});
+
+		return {
+			id,
+			complete: (
+				messageOrOptions: string | ToastOptions,
+				maybeOptions?: ToastOptions,
+			) => {
+				baseToast(messageOrOptions, {
+					id,
+					data: { loading: false },
+					...maybeOptions,
+				});
+			},
+		};
+	},
+});
+
+export type * from '@base-ui/react/toast';
+export { Toast };

package/src/components/viewport/ViewportState.ts

@@ -136,8 +136,10 @@ export class ViewportState extends EventSubscriber<ViewportEvents> {
 		this._center = this.getCanvasCenter();
 
 		this.bindRoot(boundElement ?? null);
-		document.addEventListener('gesturestart', preventDefault);
-		document.addEventListener('gesturechange', preventDefault);
+		if (typeof document !== 'undefined') {
+			document.addEventListener('gesturestart', preventDefault);
+			document.addEventListener('gesturechange', preventDefault);
+		}
 	}
 
 	private setBoundElementSize = (size: Size, offset?: Vector2) => {
@@ -368,8 +370,10 @@ export class ViewportState extends EventSubscriber<ViewportEvents> {
 	}
 
 	dispose = () => {
-		document.removeEventListener('gesturestart', preventDefault);
-		document.removeEventListener('gesturechange', preventDefault);
+		if (typeof document !== 'undefined') {
+			document.removeEventListener('gesturestart', preventDefault);
+			document.removeEventListener('gesturechange', preventDefault);
+		}
 	};
 
 	updateConfig = (config: Partial<ViewportConfig>) => {

package/src/hooks/useOverrideTheme.ts

@@ -3,7 +3,7 @@ import { PaletteName } from '../uno/index.js';
 
 export function useOverrideTheme(theme: PaletteName | null | undefined) {
 	useLayoutEffect(() => {
-		if (!theme) {
+		if (!theme || typeof document === 'undefined') {
 			return;
 		}
 		document.body.classList.add(`theme-override-${theme}`);

package/src/hooks/useSize.ts

@@ -107,7 +107,7 @@ export function useBounds<E extends HTMLElement>(
 
 export function useBoundsCssVars<E extends HTMLElement>(
 	debounceMs?: number,
-	applyToRef?: RefObject<HTMLElement>,
+	applyToRef?: RefObject<HTMLElement | null>,
 	propertyNames?: {
 		left: string;
 		top: string;

package/src/hooks/useTitleBarColor.ts

@@ -18,6 +18,9 @@ if (typeof document !== 'undefined') {
 }
 
 function changeThemeColor(color: string) {
+	if (typeof document === 'undefined') {
+		return;
+	}
 	// evaluate css var if necessary
 	if (color.startsWith('var(')) {
 		const root = document.documentElement;