@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/toast/toast.mjs

@@ -0,0 +1,556 @@
+import { cn } from "../../cn.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { Spinner } from "../spinner/spinner.mjs";
+import { hudTextAction } from "../../lib/hud-text-action.mjs";
+import { CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast/toast.tsx
+const toastStyles = tv({
+	slots: {
+		viewport: ["pointer-events-none isolate z-70 w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
+		positioner: ["isolate z-[calc(70-var(--toast-index))] outline-none"],
+		root: [
+			"group/toast pointer-events-auto",
+			"select-text",
+			"outline-1 outline-offset-2 outline-transparent",
+			"[--toast-scale:calc(max(0.84,1-(var(--toast-index)*0.04)))]",
+			"[--toast-peek:0.5rem]",
+			"[--toast-gap:0.5rem]",
+			"[--toast-stack-height:var(--toast-frontmost-height,var(--toast-height))]",
+			"[--toast-y:calc((var(--toast-offset-y)*-1)-(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]",
+			"transition-[transform,opacity,height] duration-220 ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"data-limited:opacity-0",
+			"data-starting-style:opacity-0",
+			"data-ending-style:opacity-0",
+			"motion-reduce:transition-none",
+			"rounded-container bg-layer-hud text-foreground-on-hud",
+			"shadow-float",
+			"focus-visible:keyboard:outline-2 focus-visible:keyboard:outline-foreground"
+		],
+		content: [
+			"relative grid grid-cols-[minmax(0,1fr)] items-center overflow-hidden",
+			"[&[data-has-description]_[data-slot=toast-body]]:self-start [&[data-has-description]_[data-slot=toast-icon]]:self-start",
+			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:min-h-(--toast-title-only-min-h,2.25rem)",
+			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:min-w-(--toast-title-only-min-w,7rem)",
+			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:px-(--toast-title-only-px,0.75rem)",
+			"[&:not([data-has-icon]):not([data-has-actions]):not([data-has-description])]:py-(--toast-title-only-py,0.5rem)",
+			"[&:not([data-has-description])>[data-slot=toast-body]:only-child]:justify-self-center [&:not([data-has-description])>[data-slot=toast-body]:only-child]:text-center",
+			"transition-opacity duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]",
+			"motion-reduce:transition-none",
+			"gap-x-3 gap-y-2 px-4 py-3 font-sans text-callout",
+			"[--toast-title-only-min-h:2.75rem] [--toast-title-only-px:1rem] [--toast-title-only-py:0.75rem]",
+			"data-has-icon:grid-cols-[auto_minmax(0,1fr)]",
+			"data-has-actions:grid-cols-[minmax(0,1fr)_auto]",
+			"[&[data-has-icon][data-has-actions]]:grid-cols-[auto_minmax(0,1fr)_auto]"
+		],
+		icon: [
+			"flex h-lh w-5 shrink-0 items-center justify-center",
+			"[&_svg]:shrink-0",
+			"[&_svg]:size-4"
+		],
+		body: ["min-w-0"],
+		title: ["m-0 truncate text-callout", "font-normal text-foreground-on-hud"],
+		description: ["m-0 text-callout", "text-foreground-on-hud/70"],
+		actions: ["flex items-center justify-end", "gap-4"],
+		progress: [
+			"pointer-events-none absolute h-[3px] origin-left",
+			"animate-[raft-toast-timeout-progress_var(--toast-progress-duration)_linear_forwards]",
+			"group-hover/toast:[animation-play-state:paused] group-focus-within/toast:[animation-play-state:paused]",
+			"motion-reduce:animate-none motion-reduce:scale-x-100",
+			"inset-x-4 bottom-1.5 rounded-[2px] bg-foreground-on-hud/40"
+		],
+		close: [
+			"inline-flex items-center justify-center",
+			"outline-1 outline-offset-2 outline-transparent",
+			"transition-[background-color,color,border-color,box-shadow,transform] duration-150",
+			"disabled:pointer-events-none disabled:opacity-40",
+			"relative inset-auto order-1 size-auto shrink-0 whitespace-nowrap",
+			"border-0 bg-transparent p-0 shadow-none",
+			"font-sans text-callout font-bold text-foreground-on-hud",
+			"decoration-[1.5px] underline-offset-[3px] not-disabled:hover:underline",
+			"after:absolute after:-inset-x-2 after:-inset-y-3 after:rounded-control after:content-['']",
+			"active:after:bg-foreground-on-hud/15",
+			"focus-visible:keyboard:outline-2 focus-visible:keyboard:outline-foreground-on-hud",
+			"[&_svg]:size-4"
+		],
+		arrow: [
+			"pointer-events-none flex",
+			"data-[side=top]:bottom-[-5px]",
+			"data-[side=bottom]:top-[-5px] data-[side=bottom]:rotate-180",
+			"data-[side=left]:right-[-7px] data-[side=left]:-rotate-90",
+			"data-[side=right]:left-[-7px] data-[side=right]:rotate-90",
+			"data-[side=inline-start]:right-[-7px] data-[side=inline-start]:-rotate-90",
+			"data-[side=inline-end]:left-[-7px] data-[side=inline-end]:rotate-90"
+		]
+	},
+	variants: {
+		placement: {
+			"bottom-center": { viewport: ["bottom-[calc(max(var(--toast-viewport-bottom,0px),env(safe-area-inset-bottom))+1rem)]", "left-1/2 -translate-x-1/2"] },
+			"bottom-right": { viewport: ["bottom-[calc(max(var(--toast-viewport-bottom,0px),env(safe-area-inset-bottom))+1rem)]", "right-4"] },
+			"top-center": { viewport: ["top-[calc(max(var(--toast-viewport-top,0px),env(safe-area-inset-top))+1rem)]", "left-1/2 -translate-x-1/2"] },
+			"top-right": { viewport: ["top-[calc(max(var(--toast-viewport-top,0px),env(safe-area-inset-top))+1rem)]", "right-4"] },
+			none: { viewport: "contents" }
+		},
+		strategy: {
+			fixed: { viewport: "fixed" },
+			absolute: { viewport: "absolute" }
+		},
+		layout: {
+			stacked: { root: [
+				"absolute inset-x-0 bottom-0 mx-auto h-(--toast-stack-height) origin-bottom",
+				"z-[calc(70-var(--toast-index))]",
+				"before:pointer-events-auto before:absolute before:inset-x-0 before:top-full before:h-[calc(var(--toast-gap)+3px)] before:content-['']",
+				"[--toast-peek-dir:-1]",
+				"transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek)*var(--toast-peek-dir))))_scale(var(--toast-scale))]",
+				"data-expanded:h-(--toast-height)",
+				"data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-y))_scale(1)]",
+				"data-starting-style:transform-[translateY(120%)_scale(0.98)]",
+				"[&[data-ending-style]:not([data-swipe-direction])]:transform-[translateY(120%)_scale(0.98)]",
+				"data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+120%))_translateY(var(--toast-y))]",
+				"data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-120%))_translateY(var(--toast-y))]",
+				"data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+120%))]",
+				"data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-120%))]",
+				"[&_[data-slot=toast-content][data-behind]]:opacity-0 [&_[data-slot=toast-content][data-expanded]]:opacity-100",
+				"in-data-[toast-placement$=right]:left-auto in-data-[toast-placement$=right]:mx-0",
+				"in-data-[toast-placement^=top]:top-0 in-data-[toast-placement^=top]:bottom-auto in-data-[toast-placement^=top]:origin-top",
+				"in-data-[toast-placement^=top]:before:top-auto in-data-[toast-placement^=top]:before:bottom-full",
+				"in-data-[toast-placement^=top]:[--toast-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--toast-gap))+var(--toast-swipe-movement-y))]",
+				"in-data-[toast-placement^=top]:[--toast-peek-dir:1]",
+				"[[data-toast-placement^=top]_&[data-starting-style]]:transform-[translateY(-120%)_scale(0.98)]",
+				"[[data-toast-placement^=top]_&[data-ending-style]:not([data-swipe-direction])]:transform-[translateY(-120%)_scale(0.98)]",
+				"w-max max-w-full"
+			] },
+			inline: { root: [
+				"relative mx-auto w-max max-w-[min(24rem,var(--available-width,calc(100vw-2rem)))] overflow-visible",
+				"origin-(--transform-origin)",
+				"data-starting-style:transform-[scale(0.97)]",
+				"data-ending-style:transform-[scale(0.99)]",
+				"**:data-[slot=toast-content]:opacity-100"
+			] }
+		}
+	},
+	defaultVariants: {
+		placement: "bottom-center",
+		layout: "stacked",
+		strategy: "fixed"
+	}
+});
+const toastProgressStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-toast-progress",
+	precedence: "default",
+	children: `
+@keyframes raft-toast-timeout-progress {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="toast-progress"] {
+    animation: none;
+    transform: scaleX(1);
+  }
+}
+`
+});
+const DEFAULT_TOAST_TIMEOUT_MS = 5e3;
+const DEFAULT_TOAST_ACTION_TIMEOUT_MS = 8e3;
+const ToastProviderConfigContext = createContext({ timeout: DEFAULT_TOAST_TIMEOUT_MS });
+const ToastPlacementContext = createContext(void 0);
+const SWIPE_DIRECTION_BY_EDGE = {
+	top: ["up"],
+	bottom: ["down", "right"]
+};
+function getSwipeDirection(placement) {
+	if (placement?.startsWith("top-")) return [...SWIPE_DIRECTION_BY_EDGE.top];
+	if (placement?.startsWith("bottom-")) return [...SWIPE_DIRECTION_BY_EDGE.bottom];
+}
+function resolveActionTimeout(timeout, actionTimeout) {
+	if (actionTimeout !== void 0) return actionTimeout;
+	return timeout > 0 ? Math.max(timeout, DEFAULT_TOAST_ACTION_TIMEOUT_MS) : 0;
+}
+const defaultManagerTiming = { actionTimeout: DEFAULT_TOAST_ACTION_TIMEOUT_MS };
+const toastAction = tv({ slots: {
+	root: [
+		"relative order-2 inline-flex shrink-0 items-center justify-center whitespace-nowrap select-none",
+		"border-0 bg-transparent p-0",
+		...hudTextAction,
+		"disabled:pointer-events-none disabled:opacity-40 aria-disabled:cursor-not-allowed aria-disabled:opacity-40",
+		"data-[loading=true]:cursor-wait data-[loading=true]:opacity-100",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 **:data-icon:size-[1em] [&_svg:not([class*='size-'])]:size-3"
+	],
+	content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
+	loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
+} });
+const createToastManager = Toast.createToastManager;
+const useToastManager = Toast.useToastManager;
+const defaultToastManager = createToastManager();
+function addDefaultToast(intent, title, options = {}) {
+	const { action, contentClassName, dismissible, icon, leading, priority, progress, timeout, ...toastOptions } = options;
+	const needsTimeToAct = Boolean(action) || intent === "error";
+	return defaultToastManager.add({
+		...toastOptions,
+		timeout: timeout ?? (needsTimeToAct ? defaultManagerTiming.actionTimeout : void 0),
+		actionProps: action ? {
+			children: action.label,
+			onClick: action.onClick
+		} : void 0,
+		title,
+		type: intent,
+		priority: priority ?? (intent === "error" ? "high" : void 0),
+		data: {
+			intent,
+			contentClassName,
+			hasClose: dismissible,
+			hasIcon: icon,
+			hasProgress: progress,
+			leading
+		}
+	});
+}
+const toast = {
+	add(options) {
+		const { title, type = "info", ...toastOptions } = options;
+		return addDefaultToast(type, title, toastOptions);
+	},
+	info(title, options) {
+		return addDefaultToast("info", title, options);
+	},
+	success(title, options) {
+		return addDefaultToast("success", title, options);
+	},
+	warning(title, options) {
+		return addDefaultToast("warning", title, options);
+	},
+	error(title, options) {
+		return addDefaultToast("error", title, options);
+	},
+	dismiss(id) {
+		return defaultToastManager.close(id);
+	}
+};
+function getToastTone(type) {
+	if (type === "success" || type === "warning" || type === "error") return type;
+	return "info";
+}
+function ToastProvider({ actionTimeout, children, limit = 1, portalContainer, renderViewport = true, toastManager = defaultToastManager, timeout = DEFAULT_TOAST_TIMEOUT_MS, viewportClassName, viewportPlacement = "bottom-center", viewportStrategy = "fixed", ...props }) {
+	const config = useMemo(() => ({ timeout }), [timeout]);
+	const resolvedActionTimeout = resolveActionTimeout(timeout, actionTimeout);
+	useLayoutEffect(() => {
+		if (toastManager !== defaultToastManager) return;
+		defaultManagerTiming.actionTimeout = resolvedActionTimeout;
+		return () => {
+			defaultManagerTiming.actionTimeout = DEFAULT_TOAST_ACTION_TIMEOUT_MS;
+		};
+	}, [resolvedActionTimeout, toastManager]);
+	return /* @__PURE__ */ jsx(ToastProviderConfigContext.Provider, {
+		value: config,
+		children: /* @__PURE__ */ jsxs(Toast.Provider, {
+			toastManager,
+			timeout,
+			limit,
+			...props,
+			children: [children, renderViewport ? /* @__PURE__ */ jsx(DefaultToastLayer, {
+				placement: viewportPlacement,
+				portalContainer,
+				strategy: viewportStrategy,
+				viewportClassName
+			}) : null]
+		})
+	});
+}
+function ToastPortal(props) {
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function ToastViewport({ placement = "bottom-center", strategy = "fixed", className, ...props }) {
+	const { viewport } = toastStyles({
+		placement,
+		strategy
+	});
+	return /* @__PURE__ */ jsx(ToastPlacementContext.Provider, {
+		value: placement,
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			"data-slot": "toast-viewport",
+			"data-toast-placement": placement,
+			className: viewport({ className }),
+			...props
+		})
+	});
+}
+function ToastPositioner({ className, ...props }) {
+	const { positioner } = toastStyles();
+	return /* @__PURE__ */ jsx(Toast.Positioner, {
+		"data-slot": "toast-positioner",
+		className: positioner({ className }),
+		...props
+	});
+}
+/**
+* A toast pushed past the provider's `limit` by a newer one is closed, not
+* held back: toasts replace each other and never queue, so an older toast
+* can't come back when the newer one goes. Its swipe direction follows the
+* viewport's edge unless `swipeDirection` is passed.
+*/
+function ToastRoot({ layout = "stacked", className, swipeDirection, toast: toastObject, ...props }) {
+	const { root } = toastStyles({ layout });
+	const placement = useContext(ToastPlacementContext);
+	const { close } = useToastManager();
+	const replaced = toastObject.limited === true && toastObject.transitionStatus !== "ending";
+	useLayoutEffect(() => {
+		if (replaced) close(toastObject.id);
+	}, [
+		close,
+		replaced,
+		toastObject.id
+	]);
+	return /* @__PURE__ */ jsx(Toast.Root, {
+		"data-slot": "toast",
+		"data-toast-type": toastObject.type ?? "info",
+		swipeDirection: swipeDirection ?? getSwipeDirection(placement),
+		toast: toastObject,
+		className: root({ className }),
+		...props
+	});
+}
+/**
+* The content layout (self-start, title-only sizing, body centering) needs to
+* know which parts actually rendered. That used to be an ancestor `:has()`
+* styling descendants — a whole-page recalculation trap in Chromium (#386).
+* It measures the rendered DOM after layout instead, so wrapped parts and
+* parts that render nothing behave exactly like the old selectors did.
+*
+* The three attributes are not React-managed props: the layout effect toggles
+* them on this element directly (an attribute write on the component's own
+* node, not a structural change, so it stays outside the #386 invalidation
+* pattern). The measurement re-runs whenever this component renders; the
+* default item rebuilds the content on every toast update, and a hand-written
+* composition that flips a part without re-rendering ToastContent is not
+* observed.
+*/
+function ToastContent({ children, className, ref, ...props }) {
+	const { content } = toastStyles();
+	const internalRef = useRef(null);
+	const setRef = useCallback((node) => {
+		internalRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useLayoutEffect(() => {
+		const el = internalRef.current;
+		if (!el) return;
+		for (const [attribute, selector] of [
+			["data-has-icon", "[data-slot=\"toast-icon\"]"],
+			["data-has-description", "[data-slot=\"toast-description\"]"],
+			["data-has-actions", "[data-slot=\"toast-actions\"]"]
+		]) {
+			const present = el.querySelector(selector) !== null;
+			if (present !== el.hasAttribute(attribute)) el.toggleAttribute(attribute, present);
+		}
+	});
+	return /* @__PURE__ */ jsx(Toast.Content, {
+		ref: setRef,
+		"data-slot": "toast-content",
+		className: content({ className }),
+		...props,
+		children
+	});
+}
+function ToastIcon({ className, ...props }) {
+	const { icon } = toastStyles();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toast-icon",
+		className: icon({ className }),
+		...props
+	});
+}
+function ToastBody({ className, ...props }) {
+	const { body } = toastStyles();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toast-body",
+		className: body({ className }),
+		...props
+	});
+}
+function ToastActions({ className, ...props }) {
+	const { actions } = toastStyles();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toast-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+function ToastProgress({ className, duration = DEFAULT_TOAST_TIMEOUT_MS, style, ...props }) {
+	const { progress } = toastStyles();
+	const progressStyle = {
+		...style,
+		"--toast-progress-duration": `${duration}ms`
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-slot": "toast-progress",
+		className: progress({ className }),
+		style: progressStyle,
+		...props,
+		children: toastProgressStyle
+	});
+}
+function ToastTitle({ className, ...props }) {
+	const { title } = toastStyles();
+	return /* @__PURE__ */ jsx(Toast.Title, {
+		"data-slot": "toast-title",
+		className: title({ className }),
+		...props
+	});
+}
+function ToastDescription({ className, ...props }) {
+	const { description } = toastStyles();
+	return /* @__PURE__ */ jsx(Toast.Description, {
+		"data-slot": "toast-description",
+		className: description({ className }),
+		...props
+	});
+}
+function ToastAction({ className, children, disabled, loading = false, loadingLabel = "Loading", render, ...props }) {
+	const { root, content, loadingIndicator } = toastAction();
+	const renderAction = useCallback((renderProps, state) => {
+		const actionChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [loading ? /* @__PURE__ */ jsx("span", {
+			"data-slot": "toast-action-loading-indicator",
+			className: loadingIndicator(),
+			children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
+		}) : null, /* @__PURE__ */ jsx("span", {
+			"data-slot": "toast-action-content",
+			"data-loading": loading ? "true" : void 0,
+			className: content(),
+			children: renderProps.children
+		})] });
+		const nextRenderProps = {
+			...renderProps,
+			children: actionChildren
+		};
+		if (typeof render === "function") return render(nextRenderProps, state);
+		if (isValidElement(render)) {
+			const renderElement = render;
+			return cloneElement(renderElement, {
+				...nextRenderProps,
+				className: cn(renderProps.className, renderElement.props.className),
+				children: actionChildren
+			});
+		}
+		return /* @__PURE__ */ jsx("button", { ...nextRenderProps });
+	}, [
+		content,
+		loading,
+		loadingIndicator,
+		loadingLabel,
+		render
+	]);
+	return /* @__PURE__ */ jsx(Toast.Action, {
+		"data-slot": "toast-action",
+		"data-loading": loading ? "true" : void 0,
+		className: root({ className }),
+		disabled: disabled || loading,
+		"aria-disabled": loading || void 0,
+		render: renderAction,
+		...props,
+		children
+	});
+}
+function ToastClose({ className, children, ...props }) {
+	const { close } = toastStyles();
+	const usesDefaultText = children == null;
+	return /* @__PURE__ */ jsx(Toast.Close, {
+		"aria-label": usesDefaultText ? void 0 : "Dismiss toast",
+		"data-slot": "toast-close",
+		className: close({ className }),
+		...props,
+		children: children ?? "Dismiss"
+	});
+}
+function ToastArrow({ className, ...props }) {
+	const { arrow } = toastStyles();
+	return /* @__PURE__ */ jsx(Toast.Arrow, {
+		"data-slot": "toast-arrow",
+		className: arrow({ className }),
+		...props,
+		children: /* @__PURE__ */ jsx(ToastArrowSvg, {})
+	});
+}
+function DefaultToastLayer({ placement, portalContainer, strategy, viewportClassName }) {
+	return /* @__PURE__ */ jsx(ToastPortal, {
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(ToastViewport, {
+			placement,
+			strategy,
+			className: viewportClassName,
+			children: /* @__PURE__ */ jsx(DefaultToastList, {})
+		})
+	});
+}
+function DefaultToastList() {
+	const { toasts } = useToastManager();
+	return toasts.map((toastObject) => /* @__PURE__ */ jsx(DefaultToastItem, { toast: toastObject }, toastObject.id));
+}
+function DefaultToastItem({ toast: toastObject }) {
+	const { timeout } = useContext(ToastProviderConfigContext);
+	const showDescription = Boolean(toastObject.description);
+	const showAction = Boolean(toastObject.actionProps?.children);
+	const showClose = toastObject.data?.hasClose === true;
+	const showIcon = hasLeading(toastObject) || toastObject.data?.hasIcon !== false;
+	const progressDuration = toastObject.timeout ?? timeout;
+	const showProgress = toastObject.data?.hasProgress === true && toastObject.type !== "loading" && progressDuration > 0;
+	return /* @__PURE__ */ jsx(ToastRoot, {
+		toast: toastObject,
+		children: /* @__PURE__ */ jsxs(ToastContent, {
+			className: toastObject.data?.contentClassName,
+			children: [
+				showIcon ? /* @__PURE__ */ jsx(DefaultToastIcon, { toast: toastObject }) : null,
+				/* @__PURE__ */ jsxs(ToastBody, { children: [/* @__PURE__ */ jsx(ToastTitle, {}), showDescription ? /* @__PURE__ */ jsx(ToastDescription, {}) : null] }),
+				showAction || showClose ? /* @__PURE__ */ jsxs(ToastActions, { children: [showClose ? /* @__PURE__ */ jsx(ToastClose, {}) : null, showAction ? /* @__PURE__ */ jsx(ToastAction, {}) : null] }) : null,
+				showProgress ? /* @__PURE__ */ jsx(ToastProgress, { duration: progressDuration }) : null
+			]
+		})
+	});
+}
+const TOAST_ICON = {
+	info: Info,
+	success: CircleCheck,
+	warning: TriangleAlert,
+	error: TriangleAlert
+};
+function hasLeading(toastObject) {
+	const leading = toastObject.data?.leading;
+	return leading !== void 0 && leading !== null && leading !== false;
+}
+function DefaultToastIcon({ toast: toastObject }) {
+	if (hasLeading(toastObject)) return /* @__PURE__ */ jsx(ToastIcon, {
+		"aria-hidden": true,
+		children: toastObject.data?.leading
+	});
+	const intent = toastObject.data?.intent ?? getToastTone(toastObject.type);
+	const Icon = TOAST_ICON[intent];
+	return /* @__PURE__ */ jsx(ToastIcon, { children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true }) });
+}
+function ToastArrowSvg(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "6",
+		viewBox: "0 0 12 6",
+		fill: "none",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M1 0H11L6 5.25Z",
+			className: "fill-layer-hud"
+		})
+	});
+}
+//#endregion
+export { ToastAction, ToastActions, ToastArrow, ToastBody, ToastClose, ToastContent, ToastDescription, ToastIcon, ToastPortal, ToastPositioner, ToastProgress, ToastProvider, ToastRoot, ToastTitle, ToastViewport, createToastManager, toast, useToastManager };

package/dist/components/toggle-group/index.d.mts

@@ -0,0 +1,2 @@
+import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupLabel, ToggleGroupLabelProps, ToggleGroupProps } from "./toggle-group.mjs";
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, ToggleGroupLabel, type ToggleGroupLabelProps, type ToggleGroupProps };

package/dist/components/toggle-group/toggle-group.d.mts

@@ -0,0 +1,15 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/toggle-group/toggle-group.d.ts
+export type ToggleGroupProps<T extends string = string> = StyledProps<ToggleGroup.Props<T>>;
+declare function ToggleGroup$1<T extends string = string>({ className, ...props }: ToggleGroupProps<T>): import("react").JSX.Element;
+export type ToggleGroupItemProps<T extends string = string> = StyledProps<Omit<Toggle.Props<T>, "defaultPressed" | "pressed">> & {
+  value: T;
+};
+export declare function ToggleGroupItem<T extends string = string>({ className, nativeButton, render, ref, ...props }: ToggleGroupItemProps<T>): import("react").JSX.Element;
+export type ToggleGroupLabelProps = ComponentPropsWithRef<"span">;
+export declare function ToggleGroupLabel({ className, ...props }: ToggleGroupLabelProps): import("react").JSX.Element;
+//#endregion
+export { ToggleGroup$1 as ToggleGroup };

package/dist/components/toggle-group/toggle-group.mjs

@@ -0,0 +1,64 @@
+import { tv } from "../../lib/tv.mjs";
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+//#region src/components/toggle-group/toggle-group.tsx
+const toggleGroup = tv({ slots: {
+	root: [
+		"inline-flex max-w-full items-center",
+		"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:flex-wrap",
+		"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+		"gap-[3px] rounded-[11px] bg-fill-muted p-[3px]"
+	],
+	item: [
+		"inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-1.5",
+		"whitespace-nowrap",
+		"outline-2 outline-offset-2 outline-transparent transition-[background-color,color,box-shadow,transform] duration-100",
+		"disabled:pointer-events-none data-disabled:cursor-not-allowed",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"rounded-control border-[1.5px] border-transparent bg-transparent px-3",
+		"font-sans text-callout font-semibold text-foreground-muted",
+		"[&_svg:not([class*='size-'])]:size-4",
+		"hover:bg-fill-medium active:bg-fill-medium",
+		"data-pressed:border-sticker-ink data-pressed:bg-selected data-pressed:font-bold data-pressed:text-sticker-ink data-pressed:ring-[1.5px] data-pressed:ring-sticker-edge",
+		"data-pressed:hover:bg-selected data-pressed:active:bg-selected data-pressed:active:overlay-sticker-medium",
+		"focus-visible:shadow-focus",
+		"data-disabled:opacity-100 data-disabled:text-foreground-disabled data-disabled:hover:bg-transparent"
+	],
+	label: ["truncate"]
+} });
+function ToggleGroup$1({ className, ...props }) {
+	const { root } = toggleGroup();
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		"data-slot": "toggle-group",
+		className: root({ className }),
+		...props
+	});
+}
+function ToggleGroupItem({ className, nativeButton, render, ref, ...props }) {
+	const { item } = toggleGroup();
+	const tapRef = useTapActivation();
+	const [setRef] = useMergedRef(tapRef, ref);
+	return /* @__PURE__ */ jsx(Toggle, {
+		ref: setRef,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		type: "button",
+		"data-slot": "toggle-group-item",
+		className: item({ className }),
+		...props
+	});
+}
+function ToggleGroupLabel({ className, ...props }) {
+	const { label } = toggleGroup();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "toggle-group-label",
+		className: label({ className }),
+		...props
+	});
+}
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupItem, ToggleGroupLabel };

package/dist/components/tooltip/index.d.mts

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipContent, TooltipContentProps, TooltipPortal, TooltipPortalProps, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./tooltip.mjs";
+export { Tooltip, TooltipContent, type TooltipContentProps, TooltipPortal, type TooltipPortalProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps };

package/dist/components/tooltip/tooltip.d.mts

@@ -0,0 +1,18 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/components/tooltip/tooltip.d.ts
+export type TooltipProviderProps = Tooltip.Provider.Props;
+export declare function TooltipProvider({ delay, ...props }: TooltipProviderProps): import("react").JSX.Element;
+export type TooltipProps = Tooltip.Root.Props;
+declare function Tooltip$1(props: TooltipProps): import("react").JSX.Element;
+export type TooltipTriggerProps = StyledProps<Tooltip.Trigger.Props>;
+export declare function TooltipTrigger({ className, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+export type TooltipPortalProps = Tooltip.Portal.Props;
+export declare function TooltipPortal(props: TooltipPortalProps): import("react").JSX.Element;
+export type TooltipContentProps = StyledProps<Tooltip.Popup.Props> & Pick<Tooltip.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
+  container?: TooltipPortalProps["container"];
+  portalProps?: TooltipPortalProps;
+};
+export declare function TooltipContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, container, portalProps, className, children, ...props }: TooltipContentProps): import("react").JSX.Element;
+//#endregion
+export { Tooltip$1 as Tooltip };