beez-ui 0.4.2 → 0.5.0

package/dist/components/typing-animation.js

@@ -1,155 +1,340 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState, } from "react";
-import { motion, } from "motion/react";
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from "react";
+import { motion } from "motion/react";
 import { cn } from "../lib/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const motionElements = {
-    article: motion.article,
-    div: motion.div,
-    h1: motion.h1,
-    h2: motion.h2,
-    h3: motion.h3,
-    h4: motion.h4,
-    h5: motion.h5,
-    h6: motion.h6,
-    li: motion.li,
-    p: motion.p,
-    section: motion.section,
-    span: motion.span,
+	article: motion.article,
+	div: motion.div,
+	h1: motion.h1,
+	h2: motion.h2,
+	h3: motion.h3,
+	h4: motion.h4,
+	h5: motion.h5,
+	h6: motion.h6,
+	li: motion.li,
+	p: motion.p,
+	section: motion.section,
+	span: motion.span
 };
-export function TypingAnimation({ children, words, className, duration = 80, typeSpeed, deleteSpeed, delay = 0, pauseDelay = 1000, loop = false, as: Component = "span", startOnView = true, showCursor = true, blinkCursor = true, cursorStyle = "line", ...props }) {
-    const MotionComponent = motionElements[Component];
-    const [displayedText, setDisplayedText] = useState("");
-    const [currentWordIndex, setCurrentWordIndex] = useState(0);
-    const [currentCharIndex, setCurrentCharIndex] = useState(0);
-    const [phase, setPhase] = useState("typing");
-    const elementRef = useRef(null);
-    const [isInView, setIsInView] = useState(() => !startOnView || typeof IntersectionObserver === "undefined");
-    const wordsToAnimate = useMemo(() => words ?? (children ? [children] : []), [words, children]);
-    const hasMultipleWords = wordsToAnimate.length > 1;
-    const typingSpeed = typeSpeed ?? duration;
-    const deletingSpeed = deleteSpeed ?? typingSpeed / 2;
-    const shouldStart = startOnView ? isInView : true;
-    const animationSourceKey = useMemo(() => (words ? words.join("\u0000") : (children ?? "")), [words, children]);
-    const lastResetSourceKeyRef = useRef(animationSourceKey);
-    useEffect(() => {
-        if (!startOnView || isInView) {
-            return;
-        }
-        const element = elementRef.current;
-        if (!element || typeof IntersectionObserver === "undefined") {
-            return;
-        }
-        const observer = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting) {
-                setIsInView(true);
-                observer.disconnect();
-            }
-        }, {
-            threshold: 0.3,
-        });
-        observer.observe(element);
-        return () => {
-            observer.disconnect();
-        };
-    }, [isInView, startOnView]);
-    useEffect(() => {
-        if (lastResetSourceKeyRef.current === animationSourceKey) {
-            return;
-        }
-        lastResetSourceKeyRef.current = animationSourceKey;
-        const resetTimeout = setTimeout(() => {
-            setDisplayedText("");
-            setCurrentWordIndex(0);
-            setCurrentCharIndex(0);
-            setPhase("typing");
-        }, 0);
-        return () => {
-            clearTimeout(resetTimeout);
-        };
-    }, [animationSourceKey]);
-    useEffect(() => {
-        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);
-                switch (phase) {
-                    case "typing":
-                        if (currentCharIndex < graphemes.length) {
-                            setDisplayedText(graphemes.slice(0, currentCharIndex + 1).join(""));
-                            setCurrentCharIndex(currentCharIndex + 1);
-                        }
-                        else {
-                            if (hasMultipleWords || loop) {
-                                const isLastWord = currentWordIndex === wordsToAnimate.length - 1;
-                                if (!isLastWord || loop) {
-                                    setPhase("pause");
-                                }
-                            }
-                        }
-                        break;
-                    case "pause":
-                        setPhase("deleting");
-                        break;
-                    case "deleting":
-                        if (currentCharIndex > 0) {
-                            setDisplayedText(graphemes.slice(0, currentCharIndex - 1).join(""));
-                            setCurrentCharIndex(currentCharIndex - 1);
-                        }
-                        else {
-                            const nextIndex = (currentWordIndex + 1) % wordsToAnimate.length;
-                            setCurrentWordIndex(nextIndex);
-                            setPhase("typing");
-                        }
-                        break;
-                }
-            }, timeoutDelay);
-        }
-        return () => {
-            if (timeout !== null) {
-                clearTimeout(timeout);
-            }
-        };
-    }, [
-        shouldStart,
-        phase,
-        currentCharIndex,
-        currentWordIndex,
-        displayedText,
-        wordsToAnimate,
-        hasMultipleWords,
-        loop,
-        typingSpeed,
-        deletingSpeed,
-        pauseDelay,
-        delay,
-    ]);
-    const currentWordGraphemes = Array.from(wordsToAnimate[currentWordIndex] || "");
-    const isComplete = !loop &&
-        currentWordIndex === wordsToAnimate.length - 1 &&
-        currentCharIndex >= currentWordGraphemes.length &&
-        phase !== "deleting";
-    const shouldShowCursor = showCursor &&
-        !isComplete &&
-        (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
-    const getCursorChar = () => {
-        switch (cursorStyle) {
-            case "block":
-                return "▌";
-            case "underscore":
-                return "_";
-            case "line":
-            default:
-                return "|";
-        }
-    };
-    return (_jsxs(MotionComponent, { ref: elementRef, className: cn("tracking-[-0.02em]", Component === "h1" && "text-3xl font-bold leading-tight md:text-4xl", Component === "span" && "inline-block", className), ...props, children: [displayedText, shouldShowCursor && (_jsx("span", { className: cn("inline-block", blinkCursor && "animate-blink-cursor"), children: getCursorChar() }))] }));
+export function TypingAnimation(t0) {
+	const $ = _c(64);
+	let children;
+	let className;
+	let deleteSpeed;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	let typeSpeed;
+	let words;
+	if ($[0] !== t0) {
+		({children, words, className, duration: t1, typeSpeed, deleteSpeed, delay: t2, pauseDelay: t3, loop: t4, as: t5, startOnView: t6, showCursor: t7, blinkCursor: t8, cursorStyle: t9, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = deleteSpeed;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+		$[13] = t9;
+		$[14] = typeSpeed;
+		$[15] = words;
+	} else {
+		children = $[1];
+		className = $[2];
+		deleteSpeed = $[3];
+		props = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
+		t7 = $[11];
+		t8 = $[12];
+		t9 = $[13];
+		typeSpeed = $[14];
+		words = $[15];
+	}
+	const duration = t1 === undefined ? 80 : t1;
+	const delay = t2 === undefined ? 0 : t2;
+	const pauseDelay = t3 === undefined ? 1e3 : t3;
+	const loop = t4 === undefined ? false : t4;
+	const Component = t5 === undefined ? "span" : t5;
+	const startOnView = t6 === undefined ? true : t6;
+	const showCursor = t7 === undefined ? true : t7;
+	const blinkCursor = t8 === undefined ? true : t8;
+	const cursorStyle = t9 === undefined ? "line" : t9;
+	const MotionComponent = motionElements[Component];
+	const [displayedText, setDisplayedText] = useState("");
+	const [currentWordIndex, setCurrentWordIndex] = useState(0);
+	const [currentCharIndex, setCurrentCharIndex] = useState(0);
+	const [phase, setPhase] = useState("typing");
+	const elementRef = useRef(null);
+	let t10;
+	if ($[16] !== startOnView) {
+		t10 = () => !startOnView || typeof IntersectionObserver === "undefined";
+		$[16] = startOnView;
+		$[17] = t10;
+	} else {
+		t10 = $[17];
+	}
+	const [isInView, setIsInView] = useState(t10);
+	let t11;
+	if ($[18] !== children || $[19] !== words) {
+		t11 = words ?? (children ? [children] : []);
+		$[18] = children;
+		$[19] = words;
+		$[20] = t11;
+	} else {
+		t11 = $[20];
+	}
+	const wordsToAnimate = t11;
+	const hasMultipleWords = wordsToAnimate.length > 1;
+	const typingSpeed = typeSpeed ?? duration;
+	const deletingSpeed = deleteSpeed ?? typingSpeed / 2;
+	const shouldStart = startOnView ? isInView : true;
+	let t12;
+	if ($[21] !== children || $[22] !== words) {
+		t12 = words ? words.join("\0") : children ?? "";
+		$[21] = children;
+		$[22] = words;
+		$[23] = t12;
+	} else {
+		t12 = $[23];
+	}
+	const animationSourceKey = t12;
+	const lastResetSourceKeyRef = useRef(animationSourceKey);
+	let t13;
+	let t14;
+	if ($[24] !== isInView || $[25] !== startOnView) {
+		t13 = () => {
+			if (!startOnView || isInView) {
+				return;
+			}
+			const element = elementRef.current;
+			if (!element || typeof IntersectionObserver === "undefined") {
+				return;
+			}
+			const observer = new IntersectionObserver((t15) => {
+				const [entry] = t15;
+				if (entry.isIntersecting) {
+					setIsInView(true);
+					observer.disconnect();
+				}
+			}, { threshold: .3 });
+			observer.observe(element);
+			return () => {
+				observer.disconnect();
+			};
+		};
+		t14 = [isInView, startOnView];
+		$[24] = isInView;
+		$[25] = startOnView;
+		$[26] = t13;
+		$[27] = t14;
+	} else {
+		t13 = $[26];
+		t14 = $[27];
+	}
+	useEffect(t13, t14);
+	let t15;
+	let t16;
+	if ($[28] !== animationSourceKey) {
+		t15 = () => {
+			if (lastResetSourceKeyRef.current === animationSourceKey) {
+				return;
+			}
+			lastResetSourceKeyRef.current = animationSourceKey;
+			const resetTimeout = setTimeout(() => {
+				setDisplayedText("");
+				setCurrentWordIndex(0);
+				setCurrentCharIndex(0);
+				setPhase("typing");
+			}, 0);
+			return () => {
+				clearTimeout(resetTimeout);
+			};
+		};
+		t16 = [animationSourceKey];
+		$[28] = animationSourceKey;
+		$[29] = t15;
+		$[30] = t16;
+	} else {
+		t15 = $[29];
+		t16 = $[30];
+	}
+	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) {
+		t17 = () => {
+			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) {
+						case "typing": {
+							if (currentCharIndex < graphemes.length) {
+								setDisplayedText(graphemes.slice(0, currentCharIndex + 1).join(""));
+								setCurrentCharIndex(currentCharIndex + 1);
+							} else {
+								if (hasMultipleWords || loop) {
+									const isLastWord = currentWordIndex === wordsToAnimate.length - 1;
+									if (!isLastWord || loop) {
+										setPhase("pause");
+									}
+								}
+							}
+							break bb126;
+						}
+						case "pause": {
+							setPhase("deleting");
+							break bb126;
+						}
+						case "deleting": {
+							if (currentCharIndex > 0) {
+								setDisplayedText(graphemes.slice(0, currentCharIndex - 1).join(""));
+								setCurrentCharIndex(currentCharIndex - 1);
+							} else {
+								const nextIndex = (currentWordIndex + 1) % wordsToAnimate.length;
+								setCurrentWordIndex(nextIndex);
+								setPhase("typing");
+							}
+						}
+					}
+				}, timeoutDelay);
+			}
+			return () => {
+				if (timeout !== null) {
+					clearTimeout(timeout);
+				}
+			};
+		};
+		t18 = [
+			shouldStart,
+			phase,
+			currentCharIndex,
+			currentWordIndex,
+			displayedText,
+			wordsToAnimate,
+			hasMultipleWords,
+			loop,
+			typingSpeed,
+			deletingSpeed,
+			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;
+	} else {
+		t17 = $[43];
+		t18 = $[44];
+	}
+	useEffect(t17, t18);
+	let t19;
+	if ($[45] !== currentWordIndex || $[46] !== wordsToAnimate) {
+		t19 = Array.from(wordsToAnimate[currentWordIndex] || "");
+		$[45] = currentWordIndex;
+		$[46] = wordsToAnimate;
+		$[47] = t19;
+	} else {
+		t19 = $[47];
+	}
+	const currentWordGraphemes = t19;
+	const isComplete = !loop && currentWordIndex === wordsToAnimate.length - 1 && currentCharIndex >= currentWordGraphemes.length && phase !== "deleting";
+	const shouldShowCursor = showCursor && !isComplete && (hasMultipleWords || loop || currentCharIndex < currentWordGraphemes.length);
+	let t20;
+	if ($[48] !== cursorStyle) {
+		t20 = () => {
+			switch (cursorStyle) {
+				case "block": {
+					return "▌";
+				}
+				case "underscore": {
+					return "_";
+				}
+				case "line":
+				default: {
+					return "|";
+				}
+			}
+		};
+		$[48] = cursorStyle;
+		$[49] = t20;
+	} else {
+		t20 = $[49];
+	}
+	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) {
+		t23 = cn("tracking-[-0.02em]", t21, t22, className);
+		$[50] = className;
+		$[51] = t21;
+		$[52] = t22;
+		$[53] = t23;
+	} else {
+		t23 = $[53];
+	}
+	let t24;
+	if ($[54] !== blinkCursor || $[55] !== getCursorChar || $[56] !== shouldShowCursor) {
+		t24 = shouldShowCursor && /* @__PURE__ */ _jsx("span", {
+			className: cn("inline-block", blinkCursor && "animate-blink-cursor"),
+			children: getCursorChar()
+		});
+		$[54] = blinkCursor;
+		$[55] = getCursorChar;
+		$[56] = shouldShowCursor;
+		$[57] = t24;
+	} else {
+		t24 = $[57];
+	}
+	let t25;
+	if ($[58] !== MotionComponent || $[59] !== displayedText || $[60] !== props || $[61] !== t23 || $[62] !== t24) {
+		t25 = /* @__PURE__ */ _jsxs(MotionComponent, {
+			ref: elementRef,
+			className: t23,
+			...props,
+			children: [displayedText, t24]
+		});
+		$[58] = MotionComponent;
+		$[59] = displayedText;
+		$[60] = props;
+		$[61] = t23;
+		$[62] = t24;
+		$[63] = t25;
+	} else {
+		t25 = $[63];
+	}
+	return t25;
 }

package/dist/constants/sidebar.js

@@ -14,7 +14,4 @@ export const SIDEBAR_COOKIE_OPEN_VALUE = "true";
 /** Serialized value representing collapsed navigation. */
 export const SIDEBAR_COOKIE_COLLAPSED_VALUE = "false";
 /** Preference lifetime in seconds, as required by the cookie max-age field. */
-export const SIDEBAR_COOKIE_MAX_AGE = SIDEBAR_COOKIE_MAX_AGE_SECONDS_PER_MINUTE *
-    SIDEBAR_COOKIE_MAX_AGE_MINUTES_PER_HOUR *
-    SIDEBAR_COOKIE_MAX_AGE_HOURS_PER_DAY *
-    SIDEBAR_COOKIE_MAX_AGE_DAYS;
+export const SIDEBAR_COOKIE_MAX_AGE = SIDEBAR_COOKIE_MAX_AGE_SECONDS_PER_MINUTE * SIDEBAR_COOKIE_MAX_AGE_MINUTES_PER_HOUR * SIDEBAR_COOKIE_MAX_AGE_HOURS_PER_DAY * SIDEBAR_COOKIE_MAX_AGE_DAYS;

package/dist/hooks/use-mobile.js

@@ -2,18 +2,18 @@ import * as React from "react";
 /** Viewport width in CSS pixels at which desktop navigation begins. */
 const MOBILE_BREAKPOINT = 768;
 function subscribeToMobileBreakpoint(onStoreChange) {
-    const mediaQueryList = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    mediaQueryList.addEventListener("change", onStoreChange);
-    return () => {
-        mediaQueryList.removeEventListener("change", onStoreChange);
-    };
+	const mediaQueryList = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+	mediaQueryList.addEventListener("change", onStoreChange);
+	return () => {
+		mediaQueryList.removeEventListener("change", onStoreChange);
+	};
 }
 function getMobileSnapshot() {
-    return window.innerWidth < MOBILE_BREAKPOINT;
+	return window.innerWidth < MOBILE_BREAKPOINT;
 }
 function getServerMobileSnapshot() {
-    return false;
+	return false;
 }
 export function useIsMobile() {
-    return React.useSyncExternalStore(subscribeToMobileBreakpoint, getMobileSnapshot, getServerMobileSnapshot);
+	return React.useSyncExternalStore(subscribeToMobileBreakpoint, getMobileSnapshot, getServerMobileSnapshot);
 }

package/dist/hooks/use-sidebar-persistence.js

@@ -1,45 +1,45 @@
 "use client";
+import { c as _c } from "react/compiler-runtime";
 /** Keeps optional browser persistence separate from the sidebar rendering contract. */
-import { useCallback, useSyncExternalStore } from "react";
+import { useSyncExternalStore } from "react";
 import { SIDEBAR_COOKIE_COLLAPSED_VALUE, SIDEBAR_COOKIE_OPEN_VALUE } from "../constants/sidebar.js";
 /** Reads a preference without making unavailable browser storage a render failure. */
 function readSidebarPreference(storageKey) {
-    if (!storageKey || typeof window === "undefined")
-        return null;
-    try {
-        const value = window.localStorage.getItem(storageKey);
-        if (value === SIDEBAR_COOKIE_OPEN_VALUE)
-            return true;
-        if (value === SIDEBAR_COOKIE_COLLAPSED_VALUE)
-            return false;
-    }
-    catch {
-        // Persisted preferences are optional; blocked storage retains the server default.
-    }
-    return null;
+	if (!storageKey || typeof window === "undefined") return null;
+	try {
+		const value = window.localStorage.getItem(storageKey);
+		if (value === SIDEBAR_COOKIE_OPEN_VALUE) return true;
+		if (value === SIDEBAR_COOKIE_COLLAPSED_VALUE) return false;
+	} catch {}
+	return null;
 }
 /** Subscribes to browser storage updates and releases the listener on unmount. */
 function subscribeToStorage(onChange) {
-    window.addEventListener("storage", onChange);
-    return () => window.removeEventListener("storage", onChange);
+	window.addEventListener("storage", onChange);
+	return () => window.removeEventListener("storage", onChange);
 }
 /** Keeps the first hydrated render identical to the server-provided preference. */
 function getServerPreference() {
-    return null;
+	return null;
 }
 /** Resolves opt-in persistence after hydration, without changing controlled state. */
 export function useSidebarPersistence(storageKey) {
-    const getSnapshot = useCallback(() => readSidebarPreference(storageKey), [storageKey]);
-    return useSyncExternalStore(subscribeToStorage, getSnapshot, getServerPreference);
+	const $ = _c(2);
+	let t0;
+	if ($[0] !== storageKey) {
+		t0 = () => readSidebarPreference(storageKey);
+		$[0] = storageKey;
+		$[1] = t0;
+	} else {
+		t0 = $[1];
+	}
+	const getSnapshot = t0;
+	return useSyncExternalStore(subscribeToStorage, getSnapshot, getServerPreference);
 }
 /** Stores an optional preference while retaining usable navigation in private mode. */
 export function saveSidebarPreference(storageKey, open) {
-    if (!storageKey)
-        return;
-    try {
-        window.localStorage.setItem(storageKey, open ? SIDEBAR_COOKIE_OPEN_VALUE : SIDEBAR_COOKIE_COLLAPSED_VALUE);
-    }
-    catch {
-        // The current in-memory state remains authoritative if storage is blocked.
-    }
+	if (!storageKey) return;
+	try {
+		window.localStorage.setItem(storageKey, open ? SIDEBAR_COOKIE_OPEN_VALUE : SIDEBAR_COOKIE_COLLAPSED_VALUE);
+	} catch {}
 }

package/dist/lib/image-dimensions.js

@@ -2,6 +2,6 @@
 const DEFAULT_IMAGE_DIMENSION_PX = 40;
 /** Converts native image dimensions into a positive numeric value. */
 export function imageDimension(value) {
-    const parsed = Number(value);
-    return Number.isFinite(parsed) && parsed > 0 ? parsed : DEFAULT_IMAGE_DIMENSION_PX;
+	const parsed = Number(value);
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : DEFAULT_IMAGE_DIMENSION_PX;
 }