@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/toast/toast-anchored.styles.ts

@@ -0,0 +1,146 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+} from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const anchoredToastStyles = create({
+	content: {
+		alignItems: "start",
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		gap: space["2"],
+		maxWidth: "min(22.5rem, var(--available-width))",
+		minWidth: "min(15rem, var(--available-width))",
+		padding: space["4"],
+	},
+	positioner: {
+		pointerEvents: "none",
+		position: "absolute",
+		zIndex: 1000,
+	},
+	root: {
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		boxSizing: "border-box",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "var(--toast-focus-ring, transparent)",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		pointerEvents: "auto",
+		transform: {
+			"[data-ending-style]": "scale(0.98)",
+			"[data-starting-style]": "scale(0.98)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": duration.overlayExit,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "transform, opacity",
+		transitionTimingFunction: easing.expoOut,
+		userSelect: "none",
+	},
+	tooltipContent: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "inline-flex",
+		maxWidth: "min(20rem, var(--available-width))",
+		paddingBlock: space["1"],
+		paddingInline: space["2"],
+	},
+	tooltipRoot: {
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		borderRadius: shape.controlRadius,
+		boxSizing: "border-box",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "var(--toast-focus-ring, transparent)",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		pointerEvents: "auto",
+		transform: {
+			"[data-ending-style]": "scale(0.98)",
+			"[data-starting-style]": "scale(0.98)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": duration.overlayExit,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "transform, opacity",
+		transitionTimingFunction: easing.expoOut,
+		userSelect: "none",
+	},
+	tooltipTitle: {
+		boxSizing: "border-box",
+		color: colors.content,
+		fontSize: fontSize["12"],
+		fontWeight: fontWeight.medium,
+		lineHeight: lineHeight["16"],
+		margin: space["0"],
+		overflowWrap: "anywhere",
+	},
+	viewport: {
+		"--toast-focus-ring": {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineColor: {
+			[conditions.forcedColors]: "Highlight",
+			default: "transparent",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+	},
+});

package/src/components/toast/toast-animation.styles.ts

@@ -0,0 +1,64 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+
+const pulseA = keyframes({
+	"0%": { scale: "1" },
+	"50%": { scale: "1.03" },
+	"100%": { scale: "1" },
+});
+
+const pulseB = keyframes({
+	"0%": { scale: "1" },
+	"50%": { scale: "1.03" },
+	"100%": { scale: "1" },
+});
+
+const shakeA = keyframes({
+	"0%": { translate: "0 0" },
+	"25%": { translate: "-4px 0" },
+	"75%": { translate: "4px 0" },
+	"100%": { translate: "0 0" },
+});
+
+const shakeB = keyframes({
+	"0%": { translate: "0 0" },
+	"25%": { translate: "-4px 0" },
+	"75%": { translate: "4px 0" },
+	"100%": { translate: "0 0" },
+});
+
+export const toastAnimationStyles = create({
+	pulseEven: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		animationName: { [conditions.reducedMotion]: "none", default: pulseA },
+		animationTimingFunction: easing.easeOut,
+	},
+	pulseOdd: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		animationName: { [conditions.reducedMotion]: "none", default: pulseB },
+		animationTimingFunction: easing.easeOut,
+	},
+	shakeEven: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		animationName: { [conditions.reducedMotion]: "none", default: shakeA },
+		animationTimingFunction: easing.easeOut,
+	},
+	shakeOdd: {
+		animationDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		animationName: { [conditions.reducedMotion]: "none", default: shakeB },
+		animationTimingFunction: easing.easeOut,
+	},
+});

package/src/components/toast/toast-icons.tsx

@@ -0,0 +1,58 @@
+import { props } from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+import {
+	IconAlertTriangle,
+	IconCircleCheck,
+	IconCircleX,
+	IconInfoCircle,
+} from "../../icons";
+import { Spinner } from "../spinner/spinner";
+import { toastStyles } from "./toast.styles";
+
+type ToastStatus = "error" | "info" | "loading" | "success" | "warning";
+
+function isToastStatus(type: unknown): type is ToastStatus {
+	return (
+		type === "error" ||
+		type === "info" ||
+		type === "loading" ||
+		type === "success" ||
+		type === "warning"
+	);
+}
+
+const statusStyles = {
+	error: toastStyles.iconError,
+	info: toastStyles.iconInfo,
+	loading: toastStyles.iconLoading,
+	success: toastStyles.iconSuccess,
+	warning: toastStyles.iconWarning,
+} as const;
+
+const statusIcons = {
+	error: IconCircleX,
+	info: IconInfoCircle,
+	loading: Spinner,
+	success: IconCircleCheck,
+	warning: IconAlertTriangle,
+};
+
+export function StatusIcon({
+	type,
+}: {
+	readonly type?: string | undefined;
+}): ReactNode {
+	if (!isToastStatus(type)) {
+		return null;
+	}
+	const Icon = statusIcons[type];
+	return (
+		<span
+			aria-hidden="true"
+			data-slot="toast-icon"
+			{...props(toastStyles.icon, statusStyles[type])}
+		>
+			<Icon aria-hidden="true" focusable="false" size={16} />
+		</span>
+	);
+}

package/src/components/toast/toast-stacked.styles.ts

@@ -0,0 +1,129 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+	focusOutline,
+} from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+export const toastStackedStyles = create({
+	content: {
+		opacity: {
+			"[data-behind]:not([data-expanded])": 0,
+			"[data-expanded]": 1,
+			default: 1,
+		},
+		pointerEvents: {
+			"[data-behind]:not([data-expanded])": "none",
+			default: "auto",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: "250ms",
+		},
+		transitionProperty: "opacity",
+		transitionTimingFunction: easing.expoOut,
+	},
+	root: {
+		"--toast-calc-height": "var(--toast-frontmost-height, var(--toast-height))",
+		"--toast-gap": space["3"],
+		"--toast-inset": space["5"],
+		"--toast-peek": space["3"],
+		"--toast-scale": "calc(max(0, 1 - var(--toast-index, 0) * 0.1))",
+		"--toast-shrink": "calc(1 - var(--toast-scale))",
+		"::after": {
+			content: '""',
+			height: "calc(var(--toast-gap) + 1px)",
+			left: 0,
+			position: "absolute",
+			width: "100%",
+		},
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		boxSizing: "border-box",
+		height: {
+			"[data-expanded]": "var(--toast-height)",
+			default: "var(--toast-calc-height)",
+		},
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-limited]": 0,
+			default: 1,
+		},
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "var(--toast-focus-ring, transparent)",
+		},
+		outlineOffset: focus.offset,
+		outlineStyle: {
+			":focus-visible": "solid",
+			default: focusOutline.restingOutlineStyle,
+		},
+		outlineWidth: borderWidth.focus,
+		pointerEvents: "auto",
+		position: "absolute",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: "500ms, 500ms, 150ms",
+		},
+		transitionProperty: "transform, opacity, height",
+		transitionTimingFunction: {
+			[conditions.reducedMotion]: "linear",
+			default: "cubic-bezier(0.22, 1, 0.36, 1)",
+		},
+		userSelect: "none",
+		width: "100%",
+	},
+	rootBottom: {
+		"--toast-calc-offset-y":
+			"calc(-1 * var(--toast-offset-y, 0px) - var(--toast-index, 0) * var(--toast-gap) + var(--toast-swipe-movement-y, 0px))",
+		"::after": {
+			bottom: "100%",
+		},
+		bottom: 0,
+		top: "auto",
+		transform: {
+			"[data-ending-style]:not([data-limited]):not([data-swipe-direction])": `translateY(calc(100% + var(--toast-inset, ${space["5"]})))`,
+			"[data-ending-style][data-swipe-direction='down']": `translateY(calc(var(--toast-calc-offset-y) + 100% + var(--toast-inset, ${space["5"]})))`,
+			"[data-ending-style][data-swipe-direction='left']": `translateX(calc(var(--toast-swipe-movement-x, 0px) - 100% - var(--toast-inset, ${space["5"]}))) translateY(var(--toast-calc-offset-y))`,
+			"[data-ending-style][data-swipe-direction='right']": `translateX(calc(var(--toast-swipe-movement-x, 0px) + 100% + var(--toast-inset, ${space["5"]}))) translateY(var(--toast-calc-offset-y))`,
+			"[data-ending-style][data-swipe-direction='up']": `translateY(calc(var(--toast-calc-offset-y) - 100% - var(--toast-inset, ${space["5"]})))`,
+			"[data-expanded]":
+				"translateX(var(--toast-swipe-movement-x, 0px)) translateY(var(--toast-calc-offset-y))",
+			"[data-starting-style]": `translateY(calc(100% + var(--toast-inset, ${space["5"]})))`,
+			default:
+				"translateX(var(--toast-swipe-movement-x, 0px)) translateY(calc(var(--toast-swipe-movement-y, 0px) - (var(--toast-index, 0) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale))",
+		},
+		transformOrigin: "50% calc(50% + 50% * min(var(--toast-index, 0), 1))",
+	},
+	rootTop: {
+		"--toast-calc-offset-y":
+			"calc(var(--toast-offset-y, 0px) + var(--toast-index, 0) * var(--toast-gap) + var(--toast-swipe-movement-y, 0px))",
+		"::after": {
+			top: "100%",
+		},
+		bottom: "auto",
+		top: 0,
+		transform: {
+			"[data-ending-style]:not([data-limited]):not([data-swipe-direction])": `translateY(calc(-100% - var(--toast-inset, ${space["5"]})))`,
+			"[data-ending-style][data-swipe-direction='down']": `translateY(calc(var(--toast-calc-offset-y) + 100% + var(--toast-inset, ${space["5"]})))`,
+			"[data-ending-style][data-swipe-direction='left']": `translateX(calc(var(--toast-swipe-movement-x, 0px) - 100% - var(--toast-inset, ${space["5"]}))) translateY(var(--toast-calc-offset-y))`,
+			"[data-ending-style][data-swipe-direction='right']": `translateX(calc(var(--toast-swipe-movement-x, 0px) + 100% + var(--toast-inset, ${space["5"]}))) translateY(var(--toast-calc-offset-y))`,
+			"[data-ending-style][data-swipe-direction='up']": `translateY(calc(var(--toast-calc-offset-y) - 100% - var(--toast-inset, ${space["5"]})))`,
+			"[data-expanded]":
+				"translateX(var(--toast-swipe-movement-x, 0px)) translateY(var(--toast-calc-offset-y))",
+			"[data-starting-style]": `translateY(calc(-100% - var(--toast-inset, ${space["5"]})))`,
+			default:
+				"translateX(var(--toast-swipe-movement-x, 0px)) translateY(calc(var(--toast-swipe-movement-y, 0px) + (var(--toast-index, 0) * var(--toast-peek)) + (var(--toast-shrink) * var(--toast-calc-height)))) scale(var(--toast-scale))",
+		},
+		transformOrigin: "50% calc(50% - 50% * min(var(--toast-index, 0), 1))",
+	},
+});

package/src/components/toast/toast-utils.ts

@@ -0,0 +1,53 @@
+import type { ToastPosition, ToastSwipeDirection } from "./toast.types";
+
+export function getPositionSwipeDirections(
+	position: ToastPosition
+): ToastSwipeDirection[] {
+	switch (position) {
+		case "top-left":
+			return ["left", "up"];
+		case "top-center":
+			return ["up"];
+		case "top-right":
+			return ["right", "up"];
+		case "bottom-left":
+			return ["left", "down"];
+		case "bottom-center":
+			return ["down"];
+		default:
+			return ["right", "down"];
+	}
+}
+
+export function isTopPosition(position: ToastPosition): boolean {
+	return (
+		position === "top-left" ||
+		position === "top-center" ||
+		position === "top-right"
+	);
+}
+
+export function resolveSideOffset<T>(sideOffset?: T): T | number {
+	return sideOffset ?? 4;
+}
+
+export type UpdateAnimation =
+	| "shake-even"
+	| "shake-odd"
+	| "pulse-even"
+	| "pulse-odd"
+	| undefined;
+
+export function getUpdateAnimation(
+	type: string | undefined,
+	updateKey: number | undefined
+): UpdateAnimation {
+	if (updateKey === undefined || updateKey <= 0) {
+		return undefined;
+	}
+	const isEven = updateKey % 2 === 0;
+	if (type === "error") {
+		return isEven ? "shake-even" : "shake-odd";
+	}
+	return isEven ? "pulse-even" : "pulse-odd";
+}

package/src/components/toast/toast-views.tsx

@@ -0,0 +1,223 @@
+"use client";
+
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { controlLabel } from "../../control-label";
+import { protectRenderSlot } from "../../render-utils";
+import { toastStyles } from "./toast.styles";
+import type { ToastData, ToastPosition } from "./toast.types";
+import { anchoredToastStyles } from "./toast-anchored.styles";
+import { toastAnimationStyles } from "./toast-animation.styles";
+import { StatusIcon } from "./toast-icons";
+import { toastStackedStyles } from "./toast-stacked.styles";
+import {
+	getPositionSwipeDirections,
+	getUpdateAnimation,
+	isTopPosition,
+	resolveSideOffset,
+} from "./toast-utils";
+
+type ToastItem = BaseToast.Root.ToastObject<ToastData>;
+
+const posStyles = {
+	"bottom-center": toastStyles.bottomCenter,
+	"bottom-left": toastStyles.bottomLeft,
+	"bottom-right": toastStyles.bottomRight,
+	"top-center": toastStyles.topCenter,
+	"top-left": toastStyles.topLeft,
+	"top-right": toastStyles.topRight,
+} as const;
+
+const animStyles = {
+	"pulse-even": toastAnimationStyles.pulseEven,
+	"pulse-odd": toastAnimationStyles.pulseOdd,
+	"shake-even": toastAnimationStyles.shakeEven,
+	"shake-odd": toastAnimationStyles.shakeOdd,
+} as const;
+
+type AnimationStyle = (typeof animStyles)[keyof typeof animStyles] | null;
+
+function renderToastAction(actionProps: ComponentPropsWithRef<"button">) {
+	return <button {...actionProps}>{controlLabel(actionProps.children)}</button>;
+}
+
+function getStackedRootProps(isTop: boolean, animStyle?: AnimationStyle) {
+	const stylexProps = props(
+		toastStyles.surface,
+		toastStackedStyles.root,
+		isTop ? toastStackedStyles.rootTop : toastStackedStyles.rootBottom,
+		animStyle
+	);
+	return {
+		...stylexProps,
+		style: {
+			...stylexProps.style,
+			zIndex: "calc(1000 - var(--toast-index, 0))",
+		},
+	};
+}
+
+export function ToastStackedView({
+	position,
+}: {
+	readonly position: ToastPosition;
+}) {
+	const { toasts } = BaseToast.useToastManager<ToastData>();
+	const isTop = isTopPosition(position);
+	const swipeDirection = getPositionSwipeDirections(position);
+
+	return (
+		<BaseToast.Viewport
+			data-slot="toast-viewport"
+			{...props(toastStyles.viewport, posStyles[position])}
+		>
+			{toasts.map((toast) => {
+				const animation = getUpdateAnimation(toast.type, toast.updateKey);
+				const animStyle = animation ? animStyles[animation] : null;
+				return (
+					<BaseToast.Root
+						{...toast.data?.rootProps}
+						data-slot="toast-root"
+						data-update-animation={animation}
+						key={toast.id}
+						render={protectRenderSlot(
+							"toast-root",
+							toast.data?.rootProps?.render
+						)}
+						swipeDirection={swipeDirection}
+						toast={toast}
+						{...getStackedRootProps(isTop, animStyle)}
+					>
+						<BaseToast.Content
+							data-slot="toast-content"
+							{...props(toastStyles.content, toastStackedStyles.content)}
+						>
+							<StatusIcon type={toast.type} />
+							<div {...props(toastStyles.body)}>
+								<BaseToast.Title
+									data-slot="toast-title"
+									dir="auto"
+									{...props(toastStyles.title)}
+								/>
+								<BaseToast.Description
+									data-slot="toast-description"
+									dir="auto"
+									{...props(toastStyles.description)}
+								/>
+							</div>
+							{toast.actionProps ? (
+								<BaseToast.Action
+									data-slot="toast-action"
+									render={renderToastAction}
+									{...props(toastStyles.action)}
+								/>
+							) : null}
+						</BaseToast.Content>
+					</BaseToast.Root>
+				);
+			})}
+		</BaseToast.Viewport>
+	);
+}
+
+function AnchoredTooltipRoot({ toast }: { readonly toast: ToastItem }) {
+	const animation = getUpdateAnimation(toast.type, toast.updateKey);
+	const animStyle = animation ? animStyles[animation] : null;
+	return (
+		<BaseToast.Root
+			{...toast.data?.rootProps}
+			data-slot="toast-popup"
+			data-update-animation={animation}
+			render={protectRenderSlot("toast-popup", toast.data?.rootProps?.render)}
+			toast={toast}
+			{...props(
+				toastStyles.surface,
+				anchoredToastStyles.tooltipRoot,
+				animStyle
+			)}
+		>
+			<BaseToast.Content
+				data-slot="toast-content"
+				{...props(anchoredToastStyles.tooltipContent)}
+			>
+				<BaseToast.Title
+					data-slot="toast-title"
+					dir="auto"
+					{...props(anchoredToastStyles.tooltipTitle)}
+				/>
+			</BaseToast.Content>
+		</BaseToast.Root>
+	);
+}
+
+function AnchoredStandardRoot({ toast }: { readonly toast: ToastItem }) {
+	const animation = getUpdateAnimation(toast.type, toast.updateKey);
+	const animStyle = animation ? animStyles[animation] : null;
+	return (
+		<BaseToast.Root
+			{...toast.data?.rootProps}
+			data-slot="toast-popup"
+			data-update-animation={animation}
+			render={protectRenderSlot("toast-popup", toast.data?.rootProps?.render)}
+			toast={toast}
+			{...props(toastStyles.surface, anchoredToastStyles.root, animStyle)}
+		>
+			<BaseToast.Content
+				data-slot="toast-content"
+				{...props(anchoredToastStyles.content)}
+			>
+				<StatusIcon type={toast.type} />
+				<div {...props(toastStyles.body)}>
+					<BaseToast.Title
+						data-slot="toast-title"
+						dir="auto"
+						{...props(toastStyles.title)}
+					/>
+					<BaseToast.Description
+						data-slot="toast-description"
+						dir="auto"
+						{...props(toastStyles.description)}
+					/>
+				</div>
+				{toast.actionProps ? (
+					<BaseToast.Action
+						data-slot="toast-action"
+						render={renderToastAction}
+						{...props(toastStyles.action)}
+					/>
+				) : null}
+			</BaseToast.Content>
+		</BaseToast.Root>
+	);
+}
+
+export function AnchoredToastView() {
+	const { toasts } = BaseToast.useToastManager<ToastData>();
+
+	return (
+		<BaseToast.Viewport
+			data-slot="toast-viewport-anchored"
+			{...props(anchoredToastStyles.viewport)}
+		>
+			{toasts.map((toast) =>
+				toast.positionerProps?.anchor ? (
+					<BaseToast.Positioner
+						data-slot="toast-positioner"
+						key={toast.id}
+						toast={toast}
+						{...toast.positionerProps}
+						sideOffset={resolveSideOffset(toast.positionerProps?.sideOffset)}
+						{...props(anchoredToastStyles.positioner)}
+					>
+						{toast.data?.tooltipStyle ? (
+							<AnchoredTooltipRoot toast={toast} />
+						) : (
+							<AnchoredStandardRoot toast={toast} />
+						)}
+					</BaseToast.Positioner>
+				) : null
+			)}
+		</BaseToast.Viewport>
+	);
+}