beez-ui 2.5.0 → 2.6.1

package/dist/lib/toast-layer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tells whether an event target belongs to the toast layer.
+ * @param target - Target of the outside interaction.
+ * @returns `true` when the target is a toast or one of its controls.
+ */
+export declare function isToastLayerTarget(target: EventTarget | null): boolean;
+/**
+ * Lets keyboard focus enter the toast layer while a modal traps focus. Radix's focus trap listens for `focusin` and
+ * `focusout` on the document and pulls focus back into the modal whenever it lands outside, so Sonner's hotkey could
+ * never move focus to a toast's controls. Focus changes that land on a toast stop at the body, after React has run
+ * its own handlers and before the document-level trap sees them; every other focus change still reaches the trap.
+ * Because the trap never sees focus leave, it cannot pull it back either: when the focused toast control is removed
+ * (an action or close button dismisses its toast), focus returns to the element it came from instead of the body.
+ * @param ownerDocument - Document whose body hosts the app and the modal portals.
+ * @returns Removes the listeners.
+ */
+export declare function letFocusReachToastLayer(ownerDocument: Document): () => void;
+/**
+ * Wraps a modal's `onInteractOutside` so presses on toasts never dismiss it. The consumer's handler still runs first
+ * and can keep preventing dismissal for its own reasons.
+ * @param handler - The consumer's `onInteractOutside`, if any.
+ * @returns The handler to give the Radix content.
+ */
+export declare function keepOpenOnToastInteraction<OutsideEvent extends Event>(handler?: (event: OutsideEvent) => void): (event: OutsideEvent) => void;

package/dist/lib/toast-layer.js

@@ -0,0 +1,76 @@
+/**
+* Keeps toasts usable while a modal overlay is open. Toasts sit above every overlay, but a modal `Dialog` or `Sheet`
+* treats a press on them as a press outside and closes, so a toast's action or close button would dismiss the form
+* that raised it instead of running.
+*/
+import { TOAST_LAYER_SELECTOR } from "../constants/toast.js";
+/**
+* Tells whether an event target belongs to the toast layer.
+* @param target - Target of the outside interaction.
+* @returns `true` when the target is a toast or one of its controls.
+*/
+export function isToastLayerTarget(target) {
+	return target instanceof Element && target.closest(TOAST_LAYER_SELECTOR) !== null;
+}
+/**
+* Lets keyboard focus enter the toast layer while a modal traps focus. Radix's focus trap listens for `focusin` and
+* `focusout` on the document and pulls focus back into the modal whenever it lands outside, so Sonner's hotkey could
+* never move focus to a toast's controls. Focus changes that land on a toast stop at the body, after React has run
+* its own handlers and before the document-level trap sees them; every other focus change still reaches the trap.
+* Because the trap never sees focus leave, it cannot pull it back either: when the focused toast control is removed
+* (an action or close button dismisses its toast), focus returns to the element it came from instead of the body.
+* @param ownerDocument - Document whose body hosts the app and the modal portals.
+* @returns Removes the listeners.
+*/
+export function letFocusReachToastLayer(ownerDocument) {
+	const { body } = ownerDocument;
+	let focusOrigin = null;
+	let focusedToastElement = null;
+	const restoreFocusAfterRemoval = new MutationObserver(() => {
+		if (focusedToastElement?.isConnected !== false) return;
+		const activeElement = ownerDocument.activeElement;
+		if (activeElement === null || activeElement === body) focusOrigin?.focus({ preventScroll: true });
+		stopTrackingToastFocus();
+	});
+	const stopTrackingToastFocus = () => {
+		restoreFocusAfterRemoval.disconnect();
+		focusOrigin = null;
+		focusedToastElement = null;
+	};
+	const stopFocusIntoToast = (event) => {
+		const focusedElement = event.type === "focusin" ? event.target : event.relatedTarget;
+		if (!isToastLayerTarget(focusedElement)) {
+			if (event.type === "focusin") stopTrackingToastFocus();
+			return;
+		}
+		event.stopPropagation();
+		if (event.type !== "focusin") return;
+		if (focusedToastElement === null) {
+			focusOrigin = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+			restoreFocusAfterRemoval.observe(body, {
+				childList: true,
+				subtree: true
+			});
+		}
+		focusedToastElement = focusedElement;
+	};
+	body.addEventListener("focusin", stopFocusIntoToast);
+	body.addEventListener("focusout", stopFocusIntoToast);
+	return () => {
+		stopTrackingToastFocus();
+		body.removeEventListener("focusin", stopFocusIntoToast);
+		body.removeEventListener("focusout", stopFocusIntoToast);
+	};
+}
+/**
+* Wraps a modal's `onInteractOutside` so presses on toasts never dismiss it. The consumer's handler still runs first
+* and can keep preventing dismissal for its own reasons.
+* @param handler - The consumer's `onInteractOutside`, if any.
+* @returns The handler to give the Radix content.
+*/
+export function keepOpenOnToastInteraction(handler) {
+	return (event) => {
+		handler?.(event);
+		if (isToastLayerTarget(event.target)) event.preventDefault();
+	};
+}

package/dist/motion/arc-floating-slot.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Entry and exit playback of Arc's floating layers (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md):
+ * tooltips, popovers and hover cards start a few pixels toward their trigger, slightly scaled down, and settle in
+ * place. Arc drives them with CSS transitions so a close that interrupts an open, or a reopen during a close, turns
+ * around from where the layer is; this slot keeps that property with Motion: an interrupted playback continues from
+ * the values it had reached instead of jumping to rest first. It animates the primitive's own node through a Slot,
+ * without adding DOM wrappers, and holds the node for `AnimatePresence` until its exit finishes.
+ */
+import { type ComponentProps, type ReactElement } from "react";
+import { Slot } from "radix-ui";
+import { type AnimationOptions } from "motion/react";
+/** A visual state of the floating layer, relative to its resting place. */
+export interface ArcFloatingPose {
+    /** Pixels the layer sits toward its trigger, along the side it was placed on. */
+    travel: number;
+    scale: number;
+    opacity: number;
+}
+/** The two transitions of one playback: the transform may spring while the fade stays a short tween. */
+export interface ArcFloatingTransitions {
+    transform: AnimationOptions;
+    opacity: AnimationOptions;
+}
+/** Entry and exit of a floating layer. The entry always ends at rest: no travel, full scale and full opacity. */
+export interface ArcFloatingMotion {
+    enterFrom: ArcFloatingPose;
+    enter: ArcFloatingTransitions;
+    exitTo: ArcFloatingPose;
+    exit: ArcFloatingTransitions;
+}
+/**
+ * Animates the floating layer rendered as its only child.
+ * @param props.motion - Returns the entry and exit of the layer. It is read once, when the layer mounts, so a layer
+ *   revived mid-exit keeps the path it came in on.
+ * @returns The child with the slot's ref composed into it.
+ */
+export declare function ArcFloatingSlot({ children, motion, ref, ...props }: Omit<ComponentProps<typeof Slot.Root>, "children"> & {
+    children: ReactElement;
+    motion: () => ArcFloatingMotion;
+}): import("react").JSX.Element;

package/dist/motion/arc-floating-slot.js

@@ -0,0 +1,167 @@
+"use client";
+/**
+* Entry and exit playback of Arc's floating layers (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md):
+* tooltips, popovers and hover cards start a few pixels toward their trigger, slightly scaled down, and settle in
+* place. Arc drives them with CSS transitions so a close that interrupts an open, or a reopen during a close, turns
+* around from where the layer is; this slot keeps that property with Motion: an interrupted playback continues from
+* the values it had reached instead of jumping to rest first. It animates the primitive's own node through a Slot,
+* without adding DOM wrappers, and holds the node for `AnimatePresence` until its exit finishes.
+*/
+import { useLayoutEffect, useRef } from "react";
+import { Slot } from "radix-ui";
+import { animate, frame, usePresence } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MILLISECONDS_PER_SECOND, MOTION_ENTERING_ATTRIBUTE } from "../constants/motion.js";
+import { ARC_DURATION, ARC_EASE } from "./arc-tokens.js";
+import { useAttachedElement } from "./use-attached-element.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANIMATED_PROPERTIES = ["opacity", "transform"];
+const REST_POSE = {
+	travel: 0,
+	scale: 1,
+	opacity: 1
+};
+/** Reduced motion keeps the layer in place and only fades it, on Arc's instant timing. */
+const REDUCED_TWEEN = {
+	duration: ARC_DURATION.instant,
+	ease: [...ARC_EASE.standard]
+};
+/** Grace, in ms, past the planned exit before the layer is removed even if its playback never reports completion. */
+const EXIT_DEADLINE_GRACE_MS = 100;
+/**
+* Reads how long a transition plays, in ms: a spring's `visualDuration` (which overrides `duration`) or a tween's `duration`.
+* @param transition - Motion transition options.
+* @returns The planned duration, or Arc's standard duration when the transition does not state one.
+*/
+function plannedDurationMs({ duration, visualDuration }) {
+	return (visualDuration ?? duration ?? ARC_DURATION.standard) * MILLISECONDS_PER_SECOND;
+}
+/**
+* Builds the transform of a pose. Radix writes the placed side on `data-side`; the offset points toward the trigger,
+* so a layer flipped above its trigger still grows from the trigger edge.
+*/
+function poseTransform(element, { travel, scale }) {
+	const side = element.dataset.side;
+	const horizontalOffset = side === "left" ? travel : side === "right" ? -travel : 0;
+	const verticalOffset = side === "top" ? travel : side === "bottom" ? -travel : 0;
+	return `translate(${horizontalOffset}px, ${verticalOffset}px) scale(${scale})`;
+}
+/**
+* Animates the floating layer rendered as its only child.
+* @param props.motion - Returns the entry and exit of the layer. It is read once, when the layer mounts, so a layer
+*   revived mid-exit keeps the path it came in on.
+* @returns The child with the slot's ref composed into it.
+*/
+export function ArcFloatingSlot({ children, motion, ref, ...props }) {
+	const [element, attach] = useAttachedElement(ref);
+	const reduceMotion = usePrefersReducedMotion();
+	const [isPresent, safeToRemove] = usePresence();
+	// AnimatePresence hands out a new `safeToRemove` on every render; a ref keeps a re-render from restarting an exit.
+	const safeToRemoveRef = useRef(safeToRemove);
+	const resolveMotionRef = useRef(motion);
+	useLayoutEffect(() => {
+		safeToRemoveRef.current = safeToRemove;
+		resolveMotionRef.current = motion;
+	});
+	/** The motion chosen when this node mounted. */
+	const plannedRef = useRef(null);
+	/** Values an interrupted playback had reached, so the next one continues from them. */
+	const interruptedRef = useRef(null);
+	useLayoutEffect(() => {
+		let active = true;
+		// Some primitives keep children mounted in a detached portal while closed; they must not hold an exit open.
+		if (!element || !element.isConnected) {
+			if (!isPresent) queueMicrotask(() => {
+				if (active) safeToRemoveRef.current?.();
+			});
+			return () => {
+				active = false;
+			};
+		}
+		const isFirstEntry = plannedRef.current === null;
+		plannedRef.current ??= resolveMotionRef.current();
+		const planned = plannedRef.current;
+		const original = {
+			opacity: element.style.opacity,
+			transform: element.style.transform
+		};
+		const restore = () => {
+			ANIMATED_PROPERTIES.forEach((property) => {
+				element.style[property] = original[property];
+			});
+			element.removeAttribute(MOTION_ENTERING_ATTRIBUTE);
+		};
+		const interrupted = interruptedRef.current;
+		interruptedRef.current = null;
+		const startsFromEntryPose = isPresent && isFirstEntry && !interrupted;
+		const from = {
+			opacity: startsFromEntryPose ? planned.enterFrom.opacity : interrupted?.opacity ? Number.parseFloat(interrupted.opacity) : REST_POSE.opacity,
+			transform: startsFromEntryPose ? reduceMotion ? "none" : poseTransform(element, planned.enterFrom) : interrupted?.transform ?? "none"
+		};
+		const targetPose = isPresent ? REST_POSE : planned.exitTo;
+		const to = {
+			opacity: targetPose.opacity,
+			transform: reduceMotion ? "none" : poseTransform(element, targetPose)
+		};
+		const transitions = reduceMotion ? {
+			transform: REDUCED_TWEEN,
+			opacity: REDUCED_TWEEN
+		} : isPresent ? planned.enter : planned.exit;
+		// Motion starts on its next frame; painting the first keyframe now keeps that frame from flashing the rest state.
+		element.style.opacity = String(from.opacity);
+		element.style.transform = from.transform;
+		// A transform makes the layer the containing block of fixed descendants, so they stay hidden until it settles.
+		if (isPresent) element.setAttribute(MOTION_ENTERING_ATTRIBUTE, "");
+		const animations = [animate(element, { opacity: [from.opacity, to.opacity] }, transitions.opacity), ...from.transform === to.transform ? [] : [animate(element, { transform: [from.transform, to.transform] }, transitions.transform)]];
+		/*
+		* Playback reports completion from Motion's frame loop, which runs on animation frames. When frames stop (a hidden
+		* tab, or a test whose fake clock swallowed the pending frame), a leaving layer would stay mounted forever, so
+		* its removal also has a deadline on a plain timer, shortly after the planned exit.
+		*/
+		let removed = false;
+		const removeLeavingLayer = () => {
+			if (removed || !active) return;
+			removed = true;
+			safeToRemoveRef.current?.();
+		};
+		const exitDeadline = isPresent ? undefined : setTimeout(removeLeavingLayer, Math.max(plannedDurationMs(transitions.opacity), plannedDurationMs(transitions.transform)) + EXIT_DEADLINE_GRACE_MS);
+		void Promise.all(animations).then(() => {
+			if (!active) return;
+			if (!isPresent) {
+				removeLeavingLayer();
+				return;
+			}
+			// Motion commits the final keyframe inline; giving the caller's styles back leaves no compositing layer.
+			frame.postRender(() => {
+				if (active) restore();
+			});
+		});
+		return () => {
+			active = false;
+			clearTimeout(exitDeadline);
+			const computed = getComputedStyle(element);
+			const isMidPlayback = element.hasAttribute(MOTION_ENTERING_ATTRIBUTE) || !isPresent;
+			// A settled entrance needs no snapshot: the next playback starts from rest.
+			interruptedRef.current = isMidPlayback ? {
+				opacity: computed.opacity,
+				transform: computed.transform
+			} : null;
+			animations.forEach((animation) => animation.cancel());
+			restore();
+		};
+	}, [
+		element,
+		isPresent,
+		reduceMotion
+	]);
+	return /* @__PURE__ */ _jsx(Slot.Root, {
+		ref: attach,
+		...props,
+		// A leaving layer can be neither clicked, focused nor announced while it fades out.
+		...isPresent ? {} : {
+			inert: true,
+			"aria-hidden": true
+		},
+		children
+	});
+}

package/dist/motion/glide-indicator.d.ts

@@ -1,4 +1,5 @@
 import { SPRING_HIGHLIGHT, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
+import { ARC_SPRING_MORPH } from "./arc-tokens.js";
 /** Which part of the active item carries the highlight that must travel. */
 type GlideSurface = "background" | "after";
 /** Describes the items of one container and how their active state is exposed. */
@@ -13,7 +14,7 @@ export interface GlidePreset {
     attributes: string[];
     isActive: (item: Element) => boolean;
     surface: (container: HTMLElement) => GlideSurface;
-    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS | typeof SPRING_HIGHLIGHT;
+    spring: typeof SPRING_LAYOUT | typeof SPRING_TABS | typeof SPRING_HIGHLIGHT | typeof ARC_SPRING_MORPH;
     /**
      * Highlights that follow the pointer (menus, listboxes) jump straight to the hovered item:
      * the pointer already marks the position, so a travelling copy would only trail behind it.
@@ -30,9 +31,8 @@ export declare const GLIDE_PRESETS: {
         surface: (container: HTMLElement) => "after" | "background";
         spring: {
             readonly type: "spring";
-            readonly stiffness: 245;
-            readonly damping: 36;
-            readonly mass: 1.2;
+            readonly visualDuration: 0.42;
+            readonly bounce: 0.16;
         };
     };
     pagination: {
@@ -43,9 +43,8 @@ export declare const GLIDE_PRESETS: {
         surface: () => "background";
         spring: {
             readonly type: "spring";
-            readonly stiffness: 360;
-            readonly damping: 32;
-            readonly mass: 0.6;
+            readonly visualDuration: 0.42;
+            readonly bounce: 0.16;
         };
     };
     suggestions: {

package/dist/motion/glide-indicator.js

@@ -4,7 +4,8 @@
 * previous item and is removed once it lands, leaving the item's own styles in charge again.
 */
 import { animate } from "motion/react";
-import { GLIDE_CONTINUITY_MS, SPRING_HIGHLIGHT, SPRING_LAYOUT, SPRING_TABS } from "./tokens.js";
+import { GLIDE_CONTINUITY_MS, SPRING_HIGHLIGHT } from "./tokens.js";
+import { ARC_SPRING_MORPH } from "./arc-tokens.js";
 export const GLIDE_PRESETS = {
 	tabs: {
 		itemSelector: "[data-slot=\"tabs-trigger\"]",
@@ -12,7 +13,8 @@ export const GLIDE_PRESETS = {
 		attributes: ["data-state"],
 		isActive: (item) => item.getAttribute("data-state") === "active",
 		surface: (container) => container.getAttribute("data-variant") === "line" ? "after" : "background",
-		spring: SPRING_TABS
+		// Arc glides the tab highlight and the current page mark with its morph spring.
+		spring: ARC_SPRING_MORPH
 	},
 	pagination: {
 		itemSelector: "[data-slot=\"pagination-link\"]",
@@ -20,7 +22,7 @@ export const GLIDE_PRESETS = {
 		attributes: ["aria-current"],
 		isActive: (item) => item.getAttribute("aria-current") === "page",
 		surface: () => "background",
-		spring: SPRING_LAYOUT
+		spring: ARC_SPRING_MORPH
 	},
 	suggestions: {
 		itemSelector: "[role=\"option\"]",

package/dist/motion/overlay-warmth.d.ts

@@ -0,0 +1,24 @@
+/** A subscribable warm flag shared by every instance of one layer family. */
+export interface OverlayWarmth {
+    subscribe: (listener: () => void) => () => void;
+    /** Whether a layer of the family is open, or closed less than the skip window ago. */
+    isWarm: () => boolean;
+    /** Server snapshot: nothing is open while rendering on the server. */
+    isWarmOnServer: () => boolean;
+    /** Marks one more layer as open and returns the call that marks it closed again. */
+    open: () => () => void;
+}
+/**
+ * Creates the warm flag of one layer family.
+ * @param skipWindowMs - Milliseconds the page stays warm after the last layer closes.
+ * @returns The store, meant for `useSyncExternalStore`.
+ */
+export declare function createOverlayWarmth(skipWindowMs: number): OverlayWarmth;
+/**
+ * Remembers whether the page was already warm when a layer opened, so its entrance picks the instant path. It is
+ * captured while rendering the open change, before the layer marks the page warm itself.
+ * @param open - Whether the layer is open.
+ * @param isWarm - The family's current warm flag, read through `useSyncExternalStore`.
+ * @returns Whether the current (or last) opening happened while warm.
+ */
+export declare function useOpenedWhileWarm(open: boolean, isWarm: boolean): boolean;

package/dist/motion/overlay-warmth.js

@@ -0,0 +1,70 @@
+/**
+* Arc's skip window for hover-driven layers (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): while any
+* layer of a family is open, and briefly after the last one closes, the page is warm and the next layer opens
+* without waiting and only fades. Each family (tooltips, hover cards) keeps its own store.
+*/
+import { useState } from "react";
+/**
+* Creates the warm flag of one layer family.
+* @param skipWindowMs - Milliseconds the page stays warm after the last layer closes.
+* @returns The store, meant for `useSyncExternalStore`.
+*/
+export function createOverlayWarmth(skipWindowMs) {
+	let warm = false;
+	let openCount = 0;
+	/** When the last layer closed, so the window also expires when its timer never runs (a frozen test clock). */
+	let closedAt = 0;
+	let coolTimer;
+	const listeners = new Set();
+	const notify = () => listeners.forEach((listener) => listener());
+	return {
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		isWarm() {
+			if (warm && !openCount && Date.now() - closedAt >= skipWindowMs) warm = false;
+			return warm;
+		},
+		isWarmOnServer: () => false,
+		open() {
+			openCount += 1;
+			clearTimeout(coolTimer);
+			if (!warm) {
+				warm = true;
+				notify();
+			}
+			let closed = false;
+			return () => {
+				if (closed) return;
+				closed = true;
+				openCount = Math.max(0, openCount - 1);
+				if (openCount) return;
+				clearTimeout(coolTimer);
+				closedAt = Date.now();
+				coolTimer = setTimeout(() => {
+					warm = false;
+					notify();
+				}, skipWindowMs);
+			};
+		}
+	};
+}
+/**
+* Remembers whether the page was already warm when a layer opened, so its entrance picks the instant path. It is
+* captured while rendering the open change, before the layer marks the page warm itself.
+* @param open - Whether the layer is open.
+* @param isWarm - The family's current warm flag, read through `useSyncExternalStore`.
+* @returns Whether the current (or last) opening happened while warm.
+*/
+export function useOpenedWhileWarm(open, isWarm) {
+	const [wasOpen, setWasOpen] = useState(open);
+	const [openedWhileWarm, setOpenedWhileWarm] = useState(open && isWarm);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) setOpenedWhileWarm(isWarm);
+	}
+	return openedWhileWarm;
+}