beez-ui 0.5.3 → 0.5.5

package/dist/components/tooltip.js

@@ -2,6 +2,8 @@
 import { c as _c } from "react/compiler-runtime";
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { MotionSlot } from "../motion/motion-slot.js";
+import { MotionPresence, MotionOpenProvider, useMotionOpenState } from "../motion/presence.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function TooltipProvider(t0) {
@@ -34,7 +36,7 @@ function TooltipProvider(t0) {
 	return t2;
 }
 function Tooltip(t0) {
-	const $ = _c(4);
+	const $ = _c(9);
 	let props;
 	if ($[0] !== t0) {
 		({...props} = t0);
@@ -43,18 +45,36 @@ function Tooltip(t0) {
 	} else {
 		props = $[1];
 	}
+	const [motionOpen, setMotionOpen] = useMotionOpenState(props);
 	let t1;
-	if ($[2] !== props) {
+	if ($[2] !== motionOpen || $[3] !== props || $[4] !== setMotionOpen) {
 		t1 = /* @__PURE__ */ _jsx(TooltipPrimitive.Root, {
 			"data-slot": "tooltip",
-			...props
+			...props,
+			open: motionOpen,
+			onOpenChange: setMotionOpen
 		});
-		$[2] = props;
-		$[3] = t1;
+		$[2] = motionOpen;
+		$[3] = props;
+		$[4] = setMotionOpen;
+		$[5] = t1;
 	} else {
-		t1 = $[3];
+		t1 = $[5];
 	}
-	return t1;
+	let t2;
+	if ($[6] !== motionOpen || $[7] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(MotionOpenProvider, {
+			scope: "tooltip",
+			open: motionOpen,
+			children: t1
+		});
+		$[6] = motionOpen;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t2 = $[8];
+	}
+	return t2;
 }
 function TooltipTrigger(t0) {
 	const $ = _c(4);
@@ -80,7 +100,7 @@ function TooltipTrigger(t0) {
 	return t1;
 }
 function TooltipContent(t0) {
-	const $ = _c(13);
+	const $ = _c(16);
 	let children;
 	let className;
 	let props;
@@ -99,38 +119,59 @@ function TooltipContent(t0) {
 		t1 = $[4];
 	}
 	const sideOffset = t1 === undefined ? 0 : t1;
-	let t2;
+	const t2 = props.forceMount;
+	let t3;
 	if ($[5] !== className) {
-		t2 = cn("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className);
+		t3 = cn("z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm ", className);
 		$[5] = className;
-		$[6] = t2;
+		$[6] = t3;
 	} else {
-		t2 = $[6];
+		t3 = $[6];
 	}
-	let t3;
+	let t4;
 	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" });
-		$[7] = t3;
+		t4 = /* @__PURE__ */ _jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" });
+		$[7] = t4;
 	} else {
-		t3 = $[7];
+		t4 = $[7];
 	}
-	let t4;
-	if ($[8] !== children || $[9] !== props || $[10] !== sideOffset || $[11] !== t2) {
-		t4 = /* @__PURE__ */ _jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ _jsxs(TooltipPrimitive.Content, {
-			"data-slot": "tooltip-content",
-			sideOffset,
-			className: t2,
-			...props,
-			children: [children, t3]
-		}) });
+	let t5;
+	if ($[8] !== children || $[9] !== props || $[10] !== sideOffset || $[11] !== t3) {
+		t5 = /* @__PURE__ */ _jsx(MotionSlot, {
+			kind: "surface",
+			children: /* @__PURE__ */ _jsxs(TooltipPrimitive.Content, {
+				forceMount: true,
+				"data-slot": "tooltip-content",
+				sideOffset,
+				className: t3,
+				...props,
+				children: [children, t4]
+			})
+		});
 		$[8] = children;
 		$[9] = props;
 		$[10] = sideOffset;
-		$[11] = t2;
-		$[12] = t4;
+		$[11] = t3;
+		$[12] = t5;
+	} else {
+		t5 = $[12];
+	}
+	let t6;
+	if ($[13] !== props.forceMount || $[14] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(TooltipPrimitive.Portal, {
+			forceMount: true,
+			children: /* @__PURE__ */ _jsx(MotionPresence, {
+				scope: "tooltip",
+				forceMount: t2,
+				children: t5
+			})
+		});
+		$[13] = props.forceMount;
+		$[14] = t5;
+		$[15] = t6;
 	} else {
-		t4 = $[12];
+		t6 = $[15];
 	}
-	return t4;
+	return t6;
 }
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/typing-animation.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 import { motion } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const motionElements = {
@@ -19,7 +20,7 @@ const motionElements = {
 	span: motion.span
 };
 export function TypingAnimation(t0) {
-	const $ = _c(64);
+	const $ = _c(67);
 	let children;
 	let className;
 	let deleteSpeed;
@@ -79,6 +80,8 @@ export function TypingAnimation(t0) {
 	const showCursor = t7 === undefined ? true : t7;
 	const blinkCursor = t8 === undefined ? true : t8;
 	const cursorStyle = t9 === undefined ? "line" : t9;
+	const shouldReduceMotion = usePrefersReducedMotion();
+	const wasReducedMotionRef = useRef(false);
 	const MotionComponent = motionElements[Component];
 	const [displayedText, setDisplayedText] = useState("");
 	const [currentWordIndex, setCurrentWordIndex] = useState(0);
@@ -154,11 +157,18 @@ export function TypingAnimation(t0) {
 	useEffect(t13, t14);
 	let t15;
 	let t16;
-	if ($[28] !== animationSourceKey) {
+	if ($[28] !== animationSourceKey || $[29] !== shouldReduceMotion || $[30] !== wordsToAnimate) {
 		t15 = () => {
-			if (lastResetSourceKeyRef.current === animationSourceKey) {
+			if (shouldReduceMotion) {
+				wasReducedMotionRef.current = true;
+				lastResetSourceKeyRef.current = animationSourceKey;
+				setDisplayedText(wordsToAnimate.join(" · "));
 				return;
 			}
+			if (lastResetSourceKeyRef.current === animationSourceKey && !wasReducedMotionRef.current) {
+				return;
+			}
+			wasReducedMotionRef.current = false;
 			lastResetSourceKeyRef.current = animationSourceKey;
 			const resetTimeout = setTimeout(() => {
 				setDisplayedText("");
@@ -170,26 +180,35 @@ export function TypingAnimation(t0) {
 				clearTimeout(resetTimeout);
 			};
 		};
-		t16 = [animationSourceKey];
+		t16 = [
+			animationSourceKey,
+			shouldReduceMotion,
+			wordsToAnimate
+		];
 		$[28] = animationSourceKey;
-		$[29] = t15;
-		$[30] = t16;
+		$[29] = shouldReduceMotion;
+		$[30] = wordsToAnimate;
+		$[31] = t15;
+		$[32] = t16;
 	} else {
-		t15 = $[29];
-		t16 = $[30];
+		t15 = $[31];
+		t16 = $[32];
 	}
 	useEffect(t15, t16);
 	let t17;
 	let t18;
-	if ($[31] !== currentCharIndex || $[32] !== currentWordIndex || $[33] !== delay || $[34] !== deletingSpeed || $[35] !== displayedText || $[36] !== hasMultipleWords || $[37] !== loop || $[38] !== pauseDelay || $[39] !== phase || $[40] !== shouldStart || $[41] !== typingSpeed || $[42] !== wordsToAnimate) {
+	if ($[33] !== currentCharIndex || $[34] !== currentWordIndex || $[35] !== delay || $[36] !== deletingSpeed || $[37] !== displayedText || $[38] !== hasMultipleWords || $[39] !== loop || $[40] !== pauseDelay || $[41] !== phase || $[42] !== shouldReduceMotion || $[43] !== shouldStart || $[44] !== typingSpeed || $[45] !== wordsToAnimate) {
 		t17 = () => {
+			if (shouldReduceMotion) {
+				return;
+			}
 			let timeout = null;
 			if (shouldStart && wordsToAnimate.length > 0) {
 				const timeoutDelay = delay > 0 && displayedText === "" ? delay : phase === "typing" ? typingSpeed : phase === "deleting" ? deletingSpeed : pauseDelay;
 				timeout = setTimeout(() => {
 					const currentWord = wordsToAnimate[currentWordIndex] || "";
 					const graphemes = Array.from(currentWord);
-					bb126: switch (phase) {
+					bb136: switch (phase) {
 						case "typing": {
 							if (currentCharIndex < graphemes.length) {
 								setDisplayedText(graphemes.slice(0, currentCharIndex + 1).join(""));
@@ -202,11 +221,11 @@ export function TypingAnimation(t0) {
 									}
 								}
 							}
-							break bb126;
+							break bb136;
 						}
 						case "pause": {
 							setPhase("deleting");
-							break bb126;
+							break bb136;
 						}
 						case "deleting": {
 							if (currentCharIndex > 0) {
@@ -229,6 +248,7 @@ export function TypingAnimation(t0) {
 		};
 		t18 = [
 			shouldStart,
+			shouldReduceMotion,
 			phase,
 			currentCharIndex,
 			currentWordIndex,
@@ -241,39 +261,40 @@ export function TypingAnimation(t0) {
 			pauseDelay,
 			delay
 		];
-		$[31] = currentCharIndex;
-		$[32] = currentWordIndex;
-		$[33] = delay;
-		$[34] = deletingSpeed;
-		$[35] = displayedText;
-		$[36] = hasMultipleWords;
-		$[37] = loop;
-		$[38] = pauseDelay;
-		$[39] = phase;
-		$[40] = shouldStart;
-		$[41] = typingSpeed;
-		$[42] = wordsToAnimate;
-		$[43] = t17;
-		$[44] = t18;
+		$[33] = currentCharIndex;
+		$[34] = currentWordIndex;
+		$[35] = delay;
+		$[36] = deletingSpeed;
+		$[37] = displayedText;
+		$[38] = hasMultipleWords;
+		$[39] = loop;
+		$[40] = pauseDelay;
+		$[41] = phase;
+		$[42] = shouldReduceMotion;
+		$[43] = shouldStart;
+		$[44] = typingSpeed;
+		$[45] = wordsToAnimate;
+		$[46] = t17;
+		$[47] = t18;
 	} else {
-		t17 = $[43];
-		t18 = $[44];
+		t17 = $[46];
+		t18 = $[47];
 	}
 	useEffect(t17, t18);
 	let t19;
-	if ($[45] !== currentWordIndex || $[46] !== wordsToAnimate) {
+	if ($[48] !== currentWordIndex || $[49] !== wordsToAnimate) {
 		t19 = Array.from(wordsToAnimate[currentWordIndex] || "");
-		$[45] = currentWordIndex;
-		$[46] = wordsToAnimate;
-		$[47] = t19;
+		$[48] = currentWordIndex;
+		$[49] = wordsToAnimate;
+		$[50] = t19;
 	} else {
-		t19 = $[47];
+		t19 = $[50];
 	}
 	const currentWordGraphemes = t19;
 	const isComplete = !loop && currentWordIndex === wordsToAnimate.length - 1 && currentCharIndex >= currentWordGraphemes.length && phase !== "deleting";
-	const shouldShowCursor = showCursor && !isComplete && (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
+	const shouldShowCursor = showCursor && !shouldReduceMotion && !isComplete && (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
 	let t20;
-	if ($[48] !== cursorStyle) {
+	if ($[51] !== cursorStyle) {
 		t20 = () => {
 			switch (cursorStyle) {
 				case "block": {
@@ -288,53 +309,54 @@ export function TypingAnimation(t0) {
 				}
 			}
 		};
-		$[48] = cursorStyle;
-		$[49] = t20;
+		$[51] = cursorStyle;
+		$[52] = t20;
 	} else {
-		t20 = $[49];
+		t20 = $[52];
 	}
 	const getCursorChar = t20;
 	const t21 = Component === "h1" && "text-3xl font-bold leading-tight md:text-4xl";
 	const t22 = Component === "span" && "inline-block";
 	let t23;
-	if ($[50] !== className || $[51] !== t21 || $[52] !== t22) {
+	if ($[53] !== className || $[54] !== t21 || $[55] !== t22) {
 		t23 = cn("tracking-[-0.02em]", t21, t22, className);
-		$[50] = className;
-		$[51] = t21;
-		$[52] = t22;
-		$[53] = t23;
+		$[53] = className;
+		$[54] = t21;
+		$[55] = t22;
+		$[56] = t23;
 	} else {
-		t23 = $[53];
+		t23 = $[56];
 	}
 	let t24;
-	if ($[54] !== blinkCursor || $[55] !== getCursorChar || $[56] !== shouldShowCursor) {
+	if ($[57] !== blinkCursor || $[58] !== getCursorChar || $[59] !== shouldShowCursor) {
 		t24 = shouldShowCursor && /* @__PURE__ */ _jsx("span", {
 			className: cn("inline-block", blinkCursor && "animate-blink-cursor"),
 			children: getCursorChar()
 		});
-		$[54] = blinkCursor;
-		$[55] = getCursorChar;
-		$[56] = shouldShowCursor;
-		$[57] = t24;
+		$[57] = blinkCursor;
+		$[58] = getCursorChar;
+		$[59] = shouldShowCursor;
+		$[60] = t24;
 	} else {
-		t24 = $[57];
+		t24 = $[60];
 	}
 	let t25;
-	if ($[58] !== MotionComponent || $[59] !== displayedText || $[60] !== props || $[61] !== t23 || $[62] !== t24) {
+	if ($[61] !== MotionComponent || $[62] !== displayedText || $[63] !== props || $[64] !== t23 || $[65] !== t24) {
 		t25 = /* @__PURE__ */ _jsxs(MotionComponent, {
 			ref: elementRef,
+			"data-slot": "typing-animation",
 			className: t23,
 			...props,
 			children: [displayedText, t24]
 		});
-		$[58] = MotionComponent;
-		$[59] = displayedText;
-		$[60] = props;
-		$[61] = t23;
-		$[62] = t24;
-		$[63] = t25;
+		$[61] = MotionComponent;
+		$[62] = displayedText;
+		$[63] = props;
+		$[64] = t23;
+		$[65] = t24;
+		$[66] = t25;
 	} else {
-		t25 = $[63];
+		t25 = $[66];
 	}
 	return t25;
 }

package/dist/constants/motion.d.ts

@@ -0,0 +1,2 @@
+/** Shares the operating-system preference across CSS-adjacent and JavaScript animations. */
+export declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";

package/dist/constants/motion.js

@@ -0,0 +1,2 @@
+/** Shares the operating-system preference across CSS-adjacent and JavaScript animations. */
+export const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";

package/dist/hooks/use-prefers-reduced-motion.d.ts

@@ -0,0 +1,2 @@
+/** Returns a live preference for animations that cannot be controlled with CSS alone. */
+export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/use-prefers-reduced-motion.js

@@ -0,0 +1,27 @@
+"use client";
+/** Reads motion preferences without changing the initial server/hydration markup. */
+import { useSyncExternalStore } from "react";
+import { REDUCED_MOTION_QUERY } from "../constants/motion.js";
+/** Subscribes to preference changes, including browsers exposing the legacy media API. */
+function subscribe(onChange) {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => {};
+	const query = window.matchMedia(REDUCED_MOTION_QUERY);
+	if (typeof query.addEventListener === "function") {
+		query.addEventListener("change", onChange);
+		return () => query.removeEventListener("change", onChange);
+	}
+	query.addListener?.(onChange);
+	return () => query.removeListener?.(onChange);
+}
+/** Resolves the current browser setting while tolerating non-browser test environments. */
+function getSnapshot() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+/** Keeps the initial client tree consistent with the server-rendered tree. */
+function getServerSnapshot() {
+	return false;
+}
+/** Returns a live preference for animations that cannot be controlled with CSS alone. */
+export function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

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

@@ -0,0 +1,9 @@
+/** Animates the original primitive node with Motion, without adding DOM wrappers. */
+import { type ReactElement, type ComponentProps } from "react";
+import { Slot } from "radix-ui";
+import { type MotionKind } from "./tokens.js";
+/** Composes refs through Radix Slot and delegates gesture, entry and exit playback to Motion. */
+export declare function MotionSlot({ children, kind, ref, ...props }: Omit<ComponentProps<typeof Slot.Root>, "children"> & {
+    children: ReactElement;
+    kind?: MotionKind;
+}): import("react").JSX.Element;