beez-ui 0.5.3 → 0.5.4

package/dist/motion/motion-slot.js

@@ -0,0 +1,353 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Animates the original primitive node with Motion, without adding DOM wrappers. */
+import { useLayoutEffect, useState } from "react";
+import { Slot } from "radix-ui";
+import { animate, hover, press, usePresence, frame } from "motion/react";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { MOTION_EASE, MOTION_TIMING, MOTION_PRESS_SCALE, MOTION_SURFACE_DISTANCE, MOTION_PANEL_DISTANCE } from "./tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Checks the actual DOM state rather than intercepting the component's event handlers. */
+function isEnabled(element) {
+	return !element.hasAttribute("disabled") && element.getAttribute("aria-disabled") !== "true" && !element.hasAttribute("data-disabled");
+}
+/** Computes a small offset toward the surface's originating edge. */
+function entryTransform(element, kind) {
+	if (kind === "dialog") return "scale(0.985)";
+	const distance = kind === "sheet" ? MOTION_PANEL_DISTANCE : MOTION_SURFACE_DISTANCE;
+	const direction = element.getAttribute("data-side");
+	const offset = kind === "sheet" ? distance : -distance;
+	if (direction === "left") return `translateX(${-offset}px)`;
+	if (direction === "right") return `translateX(${offset}px)`;
+	if (direction === "top") return `translateY(${-offset}px)`;
+	return `translateY(${offset}px)`;
+}
+/** Uses explicit identity transforms so Motion never interprets a missing scale as zero. */
+function restingTransform(element, kind) {
+	if (kind === "dialog") return "scale(1)";
+	const direction = element.getAttribute("data-side");
+	return direction === "left" || direction === "right" ? "translateX(0px)" : "translateY(0px)";
+}
+/** Composes refs through Radix Slot and delegates gesture, entry and exit playback to Motion. */
+export function MotionSlot(t0) {
+	const $ = _c(21);
+	let children;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({children, kind: t1, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t1;
+	} else {
+		children = $[1];
+		props = $[2];
+		ref = $[3];
+		t1 = $[4];
+	}
+	const kind = t1 === undefined ? "fade" : t1;
+	const [element, setElement] = useState(null);
+	let t2;
+	if ($[5] !== ref) {
+		t2 = (node) => {
+			setElement(node);
+			const cleanup = typeof ref === "function" ? ref(node) : undefined;
+			if (ref && typeof ref !== "function") {
+				ref.current = node;
+			}
+			return () => {
+				setElement(null);
+				if (typeof cleanup === "function") {
+					cleanup();
+				} else {
+					if (typeof ref === "function") {
+						ref(null);
+					} else {
+						if (ref) {
+							ref.current = null;
+						}
+					}
+				}
+			};
+		};
+		$[5] = ref;
+		$[6] = t2;
+	} else {
+		t2 = $[6];
+	}
+	const attach = t2;
+	const reduceMotion = usePrefersReducedMotion();
+	const [isPresent, safeToRemove] = usePresence();
+	let t3;
+	let t4;
+	if ($[7] !== element || $[8] !== isPresent || $[9] !== kind || $[10] !== reduceMotion || $[11] !== safeToRemove) {
+		t3 = () => {
+			let active = true;
+			if (!element) {
+				if (!isPresent) {
+					queueMicrotask(() => {
+						if (active) {
+							safeToRemove?.();
+						}
+					});
+				}
+				return () => {
+					active = false;
+				};
+			}
+			const animations = new Set();
+			const cleanups = [];
+			const original = {
+				opacity: element.style.opacity,
+				transform: element.style.transform,
+				translate: element.style.translate,
+				boxShadow: element.style.boxShadow
+			};
+			const restore = function restore() {
+				element.style.opacity = original.opacity;
+				element.style.transform = original.transform;
+				element.style.translate = original.translate;
+				element.style.boxShadow = original.boxShadow;
+			};
+			const dispose = function dispose() {
+				active = false;
+				cleanups.forEach(_temp);
+				animations.forEach(_temp2);
+				restore();
+			};
+			if (reduceMotion || !isPresent && element.hasAttribute("data-beez-theme-menu")) {
+				if (!isPresent) {
+					queueMicrotask(() => {
+						if (active) {
+							safeToRemove?.();
+						}
+					});
+				}
+				return dispose;
+			}
+			const play = function play(keyframes, duration, t5, t6) {
+				const remove = t5 === undefined ? false : t5;
+				const restoreOnComplete = t6 === undefined ? true : t6;
+				animations.forEach(_temp3);
+				animations.clear();
+				const animation_1 = animate(element, keyframes, {
+					duration,
+					ease: [...MOTION_EASE]
+				});
+				animations.add(animation_1);
+				animation_1.then(() => {
+					animations.delete(animation_1);
+					if (!active) {
+						return;
+					}
+					if (remove) {
+						safeToRemove?.();
+					} else {
+						if (restoreOnComplete) {
+							frame.postRender(() => {
+								if (active && !animations.size) {
+									restore();
+								}
+							});
+						}
+					}
+				});
+			};
+			const isSurface = [
+				"surface",
+				"dialog",
+				"sheet",
+				"overlay"
+			].includes(kind);
+			if (!isPresent) {
+				if (!isSurface) {
+					queueMicrotask(() => {
+						if (active) {
+							safeToRemove?.();
+						}
+					});
+					return dispose;
+				}
+				const keyframes_0 = kind === "overlay" ? { opacity: [1, 0] } : {
+					opacity: [1, 0],
+					transform: [restingTransform(element, kind), entryTransform(element, kind)]
+				};
+				play(keyframes_0, MOTION_TIMING.exit, true);
+				return dispose;
+			}
+			if (isSurface) {
+				const keyframes_1 = kind === "overlay" ? { opacity: [0, 1] } : {
+					opacity: [0, 1],
+					transform: [entryTransform(element, kind), restingTransform(element, kind)]
+				};
+				play(keyframes_1, kind === "dialog" || kind === "sheet" ? MOTION_TIMING.panel : MOTION_TIMING.enter);
+			} else {
+				if (kind === "skeleton") {
+					animations.add(animate(element, { opacity: [
+						1,
+						.6,
+						1
+					] }, {
+						duration: MOTION_TIMING.skeleton,
+						repeat: Infinity,
+						ease: "easeInOut"
+					}));
+				} else {
+					if (kind === "selection") {
+						play({
+							opacity: [0, 1],
+							transform: ["scale(0.85)", "scale(1)"]
+						}, MOTION_TIMING.fast);
+					} else {
+						if (kind === "fade" || kind === "card" || kind === "row") {
+							play({ opacity: [0, 1] }, MOTION_TIMING.enter);
+						}
+					}
+				}
+			}
+			if (kind === "press") {
+				cleanups.push(press(element, () => {
+					if (!isEnabled(element)) {
+						return;
+					}
+					play({ transform: ["scale(1)", `scale(${MOTION_PRESS_SCALE})`] }, MOTION_TIMING.fast, false, false);
+					return () => play({ transform: [`scale(${MOTION_PRESS_SCALE})`, "scale(1)"] }, MOTION_TIMING.fast);
+				}));
+			}
+			if (kind === "card" || kind === "link" || kind === "icon") {
+				cleanups.push(hover(element, () => {
+					if (!isEnabled(element) || kind === "card" && !element.querySelector("a,button")) {
+						return;
+					}
+					if (kind === "card") {
+						play({ boxShadow: "0 4px 16px rgba(0,0,0,0.08)" }, MOTION_TIMING.enter, false, false);
+					} else {
+						if (kind === "icon") {
+							play({ transform: ["rotate(0deg) scale(1)", "rotate(-3deg) scale(1.025)"] }, MOTION_TIMING.enter, false, false);
+						} else {
+							play({ opacity: .75 }, MOTION_TIMING.fast, false, false);
+						}
+					}
+					return () => {
+						if (kind === "card") {
+							play({ boxShadow: original.boxShadow || "0 0px 0px rgba(0,0,0,0)" }, MOTION_TIMING.fast);
+						} else {
+							if (kind === "icon") {
+								play({ transform: ["rotate(-3deg) scale(1.025)", "rotate(0deg) scale(1)"] }, MOTION_TIMING.fast);
+							} else {
+								play({ opacity: 1 }, MOTION_TIMING.fast);
+							}
+						}
+					};
+				}));
+			}
+			if (kind === "field") {
+				const focus = () => {
+					if (isEnabled(element)) {
+						play({ opacity: [.94, 1] }, MOTION_TIMING.fast);
+					}
+				};
+				element.addEventListener("focusin", focus);
+				cleanups.push(() => element.removeEventListener("focusin", focus));
+				const observer = new MutationObserver(() => {
+					if (isEnabled(element) && !element.hasAttribute("hidden")) {
+						play({ opacity: [.94, 1] }, MOTION_TIMING.fast);
+					}
+				});
+				observer.observe(element, {
+					attributes: true,
+					attributeFilter: [
+						"data-state",
+						"aria-invalid",
+						"aria-selected",
+						"aria-checked",
+						"data-loading",
+						"data-error"
+					]
+				});
+				cleanups.push(() => observer.disconnect());
+			}
+			if (kind === "thumb") {
+				let previousTranslate = getComputedStyle(element).translate;
+				const observer_0 = new MutationObserver(() => {
+					const from = animations.size ? getComputedStyle(element).translate : previousTranslate;
+					animations.forEach(_temp4);
+					animations.clear();
+					element.style.translate = original.translate;
+					const to = getComputedStyle(element).translate;
+					previousTranslate = to;
+					if (from !== to) {
+						play({ translate: [from, to] }, MOTION_TIMING.enter);
+					}
+				});
+				observer_0.observe(element, {
+					attributes: true,
+					attributeFilter: ["data-state"]
+				});
+				cleanups.push(() => observer_0.disconnect());
+			}
+			return dispose;
+		};
+		t4 = [
+			element,
+			kind,
+			reduceMotion,
+			isPresent,
+			safeToRemove
+		];
+		$[7] = element;
+		$[8] = isPresent;
+		$[9] = kind;
+		$[10] = reduceMotion;
+		$[11] = safeToRemove;
+		$[12] = t3;
+		$[13] = t4;
+	} else {
+		t3 = $[12];
+		t4 = $[13];
+	}
+	useLayoutEffect(t3, t4);
+	let t5;
+	if ($[14] !== isPresent) {
+		t5 = isPresent ? {} : {
+			inert: true,
+			"aria-hidden": true
+		};
+		$[14] = isPresent;
+		$[15] = t5;
+	} else {
+		t5 = $[15];
+	}
+	let t6;
+	if ($[16] !== attach || $[17] !== children || $[18] !== props || $[19] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(Slot.Root, {
+			...props,
+			ref: attach,
+			...t5,
+			children
+		});
+		$[16] = attach;
+		$[17] = children;
+		$[18] = props;
+		$[19] = t5;
+		$[20] = t6;
+	} else {
+		t6 = $[20];
+	}
+	return t6;
+}
+function _temp4(animation_2) {
+	return animation_2.cancel();
+}
+function _temp3(animation_0) {
+	return animation_0.cancel();
+}
+function _temp2(animation) {
+	return animation.cancel();
+}
+function _temp(cleanup_0) {
+	return cleanup_0();
+}

package/dist/motion/presence.d.ts

@@ -0,0 +1,33 @@
+/** Shares visibility with portaled content while leaving interaction ownership with Radix. */
+import { type ReactNode } from "react";
+/** Separate contexts preserve correctly nested combinations such as menus inside tooltips. */
+declare const OPEN_CONTEXTS: {
+    dialog: import("react").Context<boolean>;
+    "alert-dialog": import("react").Context<boolean>;
+    sheet: import("react").Context<boolean>;
+    "dropdown-menu": import("react").Context<boolean>;
+    "dropdown-sub": import("react").Context<boolean>;
+    popover: import("react").Context<boolean>;
+    "hover-card": import("react").Context<boolean>;
+    tooltip: import("react").Context<boolean>;
+};
+type MotionScope = keyof typeof OPEN_CONTEXTS;
+/** Provides only the owning primitive's visibility, independently of other nested primitives. */
+export declare function MotionOpenProvider({ scope, open, children, }: {
+    scope: MotionScope;
+    open: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Preserves the primitive's controlled/uncontrolled open contract. */
+export declare function useMotionOpenState({ open, defaultOpen, onOpenChange, }: {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): readonly [boolean, (open: boolean) => void];
+/** Retains closing content until its Motion exit finishes; explicit forceMount remains caller-owned. */
+export declare function MotionPresence({ scope, children, forceMount, }: {
+    scope: MotionScope;
+    children: ReactNode;
+    forceMount?: boolean;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export {};

package/dist/motion/presence.js

@@ -0,0 +1,92 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/** Shares visibility with portaled content while leaving interaction ownership with Radix. */
+import { createContext, useContext, useState } from "react";
+import { AnimatePresence } from "motion/react";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Separate contexts preserve correctly nested combinations such as menus inside tooltips. */
+const OPEN_CONTEXTS = {
+	dialog: createContext(true),
+	"alert-dialog": createContext(true),
+	sheet: createContext(true),
+	"dropdown-menu": createContext(true),
+	"dropdown-sub": createContext(true),
+	popover: createContext(true),
+	"hover-card": createContext(true),
+	tooltip: createContext(true)
+};
+/** Provides only the owning primitive's visibility, independently of other nested primitives. */
+export function MotionOpenProvider(t0) {
+	const $ = _c(4);
+	const { scope, open, children } = t0;
+	const Context = OPEN_CONTEXTS[scope];
+	let t1;
+	if ($[0] !== Context.Provider || $[1] !== children || $[2] !== open) {
+		t1 = /* @__PURE__ */ _jsx(Context.Provider, {
+			value: open,
+			children
+		});
+		$[0] = Context.Provider;
+		$[1] = children;
+		$[2] = open;
+		$[3] = t1;
+	} else {
+		t1 = $[3];
+	}
+	return t1;
+}
+/** Preserves the primitive's controlled/uncontrolled open contract. */
+export function useMotionOpenState(t0) {
+	const $ = _c(6);
+	const { open, defaultOpen: t1, onOpenChange } = t0;
+	const defaultOpen = t1 === undefined ? false : t1;
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	let t2;
+	if ($[0] !== onOpenChange || $[1] !== open) {
+		t2 = (nextOpen) => {
+			if (open === undefined) {
+				setInternalOpen(nextOpen);
+			}
+			onOpenChange?.(nextOpen);
+		};
+		$[0] = onOpenChange;
+		$[1] = open;
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	const setOpen = t2;
+	const t3 = open ?? internalOpen;
+	let t4;
+	if ($[3] !== setOpen || $[4] !== t3) {
+		t4 = [t3, setOpen];
+		$[3] = setOpen;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	return t4;
+}
+/** Retains closing content until its Motion exit finishes; explicit forceMount remains caller-owned. */
+export function MotionPresence(t0) {
+	const $ = _c(2);
+	const { scope, children, forceMount } = t0;
+	const open = useContext(OPEN_CONTEXTS[scope]);
+	if (forceMount) {
+		return children;
+	}
+	const t1 = open ? children : null;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t1
+		});
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	return t2;
+}

package/dist/motion/tokens.d.ts

@@ -0,0 +1,13 @@
+/** Defines the restrained timing and movement shared by Motion animations. */
+export declare const MOTION_TIMING: {
+    readonly fast: 0.14;
+    readonly enter: 0.18;
+    readonly panel: 0.22;
+    readonly exit: 0.12;
+    readonly skeleton: 1.8;
+};
+export declare const MOTION_EASE: readonly [0.22, 1, 0.36, 1];
+export declare const MOTION_PRESS_SCALE = 0.98;
+export declare const MOTION_SURFACE_DISTANCE = 4;
+export declare const MOTION_PANEL_DISTANCE = 12;
+export type MotionKind = "press" | "fade" | "card" | "row" | "field" | "thumb" | "selection" | "skeleton" | "link" | "icon" | "surface" | "dialog" | "sheet" | "overlay";

package/dist/motion/tokens.js

@@ -0,0 +1,17 @@
+/** Defines the restrained timing and movement shared by Motion animations. */
+export const MOTION_TIMING = {
+	fast: .14,
+	enter: .18,
+	panel: .22,
+	exit: .12,
+	skeleton: 1.8
+};
+export const MOTION_EASE = [
+	.22,
+	1,
+	.36,
+	1
+];
+export const MOTION_PRESS_SCALE = .98;
+export const MOTION_SURFACE_DISTANCE = 4;
+export const MOTION_PANEL_DISTANCE = 12;

package/dist/providers/beez-ui-provider.js

@@ -2,6 +2,7 @@
 import { c as _c } from "react/compiler-runtime";
 /** Shares optional rendering adapters without importing a framework into the core. */
 import { createContext, useContext } from "react";
+import { MotionConfig } from "motion/react";
 import { ThemeProvider } from "next-themes";
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Native elements remain the implicit fallback for unconfigured adapters. */
@@ -28,9 +29,12 @@ export function BeezUIProvider(t0) {
 	const value = t2;
 	let t3;
 	if ($[3] !== children || $[4] !== value) {
-		t3 = /* @__PURE__ */ _jsx(AdapterContext.Provider, {
-			value,
-			children
+		t3 = /* @__PURE__ */ _jsx(MotionConfig, {
+			reducedMotion: "user",
+			children: /* @__PURE__ */ _jsx(AdapterContext.Provider, {
+				value,
+				children
+			})
 		});
 		$[3] = children;
 		$[4] = value;