@espressif/dashboard-ui-components 1.10.0 → 1.11.1

package/dist/core/animate-ui/primitives/effects/highlight.js

@@ -0,0 +1,407 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+//#region src/core/animate-ui/primitives/effects/highlight.tsx
+var DEFAULT_BOUNDS_OFFSET = {
+	top: 0,
+	left: 0,
+	width: 0,
+	height: 0
+};
+var HighlightContext = React$1.createContext(void 0);
+function useHighlight() {
+	const context = React$1.useContext(HighlightContext);
+	if (!context) throw new Error("useHighlight must be used within a HighlightProvider");
+	return context;
+}
+function Highlight({ ref, ...props }) {
+	const { as: Component = "div", children, value, defaultValue, onValueChange, className, style, transition = {
+		type: "spring",
+		stiffness: 350,
+		damping: 35
+	}, hover = false, click = true, enabled = true, controlledItems, disabled = false, exitDelay = 200, mode = "children" } = props;
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	const parentProps = props;
+	const boundsOffset = parentProps?.boundsOffset ?? DEFAULT_BOUNDS_OFFSET;
+	const boundsOffsetTop = boundsOffset.top ?? 0;
+	const boundsOffsetLeft = boundsOffset.left ?? 0;
+	const boundsOffsetWidth = boundsOffset.width ?? 0;
+	const boundsOffsetHeight = boundsOffset.height ?? 0;
+	const variant = parentProps?.variant;
+	const lineHeight = parentProps?.lineHeight ?? 2;
+	const boundsOffsetRef = React$1.useRef({
+		top: boundsOffsetTop,
+		left: boundsOffsetLeft,
+		width: boundsOffsetWidth,
+		height: boundsOffsetHeight,
+		variant,
+		lineHeight
+	});
+	React$1.useEffect(() => {
+		boundsOffsetRef.current = {
+			top: boundsOffsetTop,
+			left: boundsOffsetLeft,
+			width: boundsOffsetWidth,
+			height: boundsOffsetHeight,
+			variant,
+			lineHeight
+		};
+	}, [
+		boundsOffsetTop,
+		boundsOffsetLeft,
+		boundsOffsetWidth,
+		boundsOffsetHeight,
+		variant,
+		lineHeight
+	]);
+	const [activeValue, setActiveValue] = React$1.useState(value ?? defaultValue ?? null);
+	const [boundsState, setBoundsState] = React$1.useState(null);
+	const [activeClassNameState, setActiveClassNameState] = React$1.useState("");
+	const safeSetActiveValue = (id) => {
+		setActiveValue((prev) => {
+			if (prev !== id) {
+				onValueChange?.(id);
+				return id;
+			}
+			return prev;
+		});
+	};
+	const safeSetBoundsRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		safeSetBoundsRef.current = (bounds, opts) => {
+			if (!localRef.current) return;
+			const container = localRef.current;
+			const containerRect = container.getBoundingClientRect();
+			const offset = boundsOffsetRef.current;
+			const relativeTop = bounds.top - containerRect.top + container.scrollTop;
+			const relativeLeft = bounds.left - containerRect.left + container.scrollLeft;
+			const newBounds = offset.variant === "line" && offset.lineHeight != null ? {
+				top: relativeTop + bounds.height - offset.lineHeight + (offset.top ?? 0),
+				left: relativeLeft + (offset.left ?? 0),
+				width: bounds.width + (offset.width ?? 0),
+				height: offset.lineHeight
+			} : {
+				top: relativeTop + offset.top,
+				left: relativeLeft + offset.left,
+				width: bounds.width + offset.width,
+				height: bounds.height + offset.height
+			};
+			setBoundsState((prev) => {
+				if (prev && prev.top === newBounds.top && prev.left === newBounds.left && prev.width === newBounds.width && prev.height === newBounds.height) return prev;
+				return {
+					...newBounds,
+					instant: prev ? opts?.instant ?? false : false
+				};
+			});
+		};
+	});
+	const safeSetBounds = (bounds, opts) => {
+		safeSetBoundsRef.current?.(bounds, opts);
+	};
+	const clearBounds = React$1.useCallback(() => {
+		setBoundsState((prev) => prev === null ? prev : null);
+	}, []);
+	React$1.useEffect(() => {
+		if (value !== void 0) setActiveValue(value);
+		else if (defaultValue !== void 0) setActiveValue(defaultValue);
+	}, [value, defaultValue]);
+	const id = React$1.useId();
+	const getActiveElement = React$1.useCallback(() => {
+		const container = localRef.current;
+		if (mode !== "parent" || !activeValue || !container) return null;
+		return container.querySelector(`[data-value="${activeValue}"][data-highlight="true"]`);
+	}, [mode, activeValue]);
+	const measureActiveRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		measureActiveRef.current = (opts) => {
+			const activeEl = getActiveElement();
+			if (activeEl) safeSetBoundsRef.current?.(activeEl.getBoundingClientRect(), opts);
+		};
+	});
+	React$1.useEffect(() => {
+		if (mode !== "parent") return;
+		const container = localRef.current;
+		if (!container) return;
+		const onScroll = () => measureActiveRef.current?.();
+		container.addEventListener("scroll", onScroll, { passive: true });
+		return () => container.removeEventListener("scroll", onScroll);
+	}, [mode]);
+	/**
+	* Bounds are stored as absolute pixels, so any layout change that resizes the
+	* container or the active item leaves them stale — the highlight would keep its
+	* old box and overflow its container. Re-measure whenever either box changes;
+	* this also covers the list becoming visible (`display: none` → laid out) when a
+	* breakpoint is crossed, since that resize is reported too.
+	*/
+	React$1.useEffect(() => {
+		if (mode !== "parent") return;
+		const container = localRef.current;
+		if (!container || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => measureActiveRef.current?.({ instant: true }));
+		observer.observe(container);
+		const activeEl = getActiveElement();
+		if (activeEl) observer.observe(activeEl);
+		return () => observer.disconnect();
+	}, [mode, getActiveElement]);
+	React$1.useLayoutEffect(() => {
+		if (mode !== "parent" || !activeValue) return;
+		const raf = requestAnimationFrame(() => measureActiveRef.current?.());
+		return () => cancelAnimationFrame(raf);
+	}, [mode, activeValue]);
+	const render = (children) => {
+		if (mode === "parent") return /* @__PURE__ */ jsxs(Component, {
+			ref: localRef,
+			"data-slot": "motion-highlight-container",
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className: props?.containerClassName,
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				mode: "wait",
+				children: boundsState && /* @__PURE__ */ jsx(motion.div, {
+					"data-slot": "motion-highlight",
+					animate: {
+						top: boundsState.top,
+						left: boundsState.left,
+						width: boundsState.width,
+						height: boundsState.height,
+						opacity: 1
+					},
+					initial: {
+						top: boundsState.top,
+						left: boundsState.left,
+						width: boundsState.width,
+						height: boundsState.height,
+						opacity: 0
+					},
+					exit: {
+						opacity: 0,
+						transition: {
+							...transition,
+							delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1e3
+						}
+					},
+					transition: boundsState.instant ? { duration: 0 } : transition,
+					style: {
+						position: "absolute",
+						zIndex: 0,
+						...style
+					},
+					className: cn(className, activeClassNameState)
+				})
+			}), children]
+		});
+		return children;
+	};
+	return /* @__PURE__ */ jsx(HighlightContext.Provider, {
+		value: {
+			mode,
+			activeValue,
+			setActiveValue: safeSetActiveValue,
+			id,
+			hover,
+			click,
+			className,
+			style,
+			transition,
+			disabled,
+			enabled,
+			exitDelay,
+			setBounds: safeSetBounds,
+			clearBounds,
+			activeClassName: activeClassNameState,
+			setActiveClassName: setActiveClassNameState,
+			forceUpdateBounds: props?.forceUpdateBounds
+		},
+		children: enabled ? controlledItems ? render(children) : render(React$1.Children.map(children, (child, index) => /* @__PURE__ */ jsx(HighlightItem, {
+			className: props?.itemsClassName,
+			children: child
+		}, index))) : children
+	});
+}
+function getNonOverridingDataAttributes(element, dataAttributes) {
+	return Object.keys(dataAttributes).reduce((acc, key) => {
+		if (element.props[key] === void 0) acc[key] = dataAttributes[key];
+		return acc;
+	}, {});
+}
+function HighlightItem({ ref, as, children, id, value, className, style, transition, disabled = false, activeClassName, exitDelay, asChild = false, forceUpdateBounds, ...props }) {
+	const itemId = React$1.useId();
+	const { activeValue, setActiveValue, mode, setBounds, clearBounds, hover, click, enabled, className: contextClassName, style: contextStyle, transition: contextTransition, id: contextId, disabled: contextDisabled, exitDelay: contextExitDelay, forceUpdateBounds: contextForceUpdateBounds, setActiveClassName } = useHighlight();
+	const Component = as ?? "div";
+	const element = children;
+	const childValue = id ?? value ?? element.props?.["data-value"] ?? element.props?.id ?? itemId;
+	const isActive = activeValue === childValue;
+	const isDisabled = disabled === void 0 ? contextDisabled : disabled;
+	const itemTransition = transition ?? contextTransition;
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	const refCallback = React$1.useCallback((node) => {
+		localRef.current = node;
+	}, []);
+	React$1.useEffect(() => {
+		if (mode !== "parent") return;
+		let rafId;
+		let previousBounds = null;
+		const shouldUpdateBounds = forceUpdateBounds === true || contextForceUpdateBounds && forceUpdateBounds !== false;
+		const updateBounds = () => {
+			if (!localRef.current) return;
+			const bounds = localRef.current.getBoundingClientRect();
+			if (shouldUpdateBounds) {
+				if (previousBounds && previousBounds.top === bounds.top && previousBounds.left === bounds.left && previousBounds.width === bounds.width && previousBounds.height === bounds.height) {
+					rafId = requestAnimationFrame(updateBounds);
+					return;
+				}
+				previousBounds = bounds;
+				rafId = requestAnimationFrame(updateBounds);
+			}
+			setBounds(bounds);
+		};
+		if (isActive) {
+			updateBounds();
+			setActiveClassName(activeClassName ?? "");
+		} else if (!activeValue) clearBounds();
+		if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+	}, [
+		mode,
+		isActive,
+		activeValue,
+		setBounds,
+		clearBounds,
+		activeClassName,
+		setActiveClassName,
+		forceUpdateBounds,
+		contextForceUpdateBounds
+	]);
+	if (!React$1.isValidElement(children)) return children;
+	const dataAttributes = {
+		"data-active": isActive ? "true" : "false",
+		"aria-selected": isActive,
+		"data-disabled": isDisabled,
+		"data-value": childValue,
+		"data-highlight": true
+	};
+	const incomingHandlers = props;
+	const commonHandlers = hover ? {
+		onMouseEnter: (e) => {
+			setActiveValue(childValue);
+			element.props.onMouseEnter?.(e);
+			incomingHandlers.onMouseEnter?.(e);
+		},
+		onMouseLeave: (e) => {
+			setActiveValue(null);
+			element.props.onMouseLeave?.(e);
+			incomingHandlers.onMouseLeave?.(e);
+		}
+	} : click ? { onClick: (e) => {
+		setActiveValue(childValue);
+		element.props.onClick?.(e);
+		incomingHandlers.onClick?.(e);
+	} } : {};
+	if (asChild) {
+		if (mode === "children") return React$1.cloneElement(element, {
+			key: childValue,
+			ref: refCallback,
+			className: cn("relative", element.props.className),
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item-container"
+			}),
+			...commonHandlers,
+			...props
+		}, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: isActive && !isDisabled && /* @__PURE__ */ jsx(motion.div, {
+				layoutId: `transition-background-${contextId}`,
+				"data-slot": "motion-highlight",
+				style: {
+					position: "absolute",
+					zIndex: 0,
+					...contextStyle,
+					...style
+				},
+				className: cn(contextClassName, activeClassName),
+				transition: itemTransition,
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: {
+					opacity: 0,
+					transition: {
+						...itemTransition,
+						delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
+					}
+				},
+				...dataAttributes
+			})
+		}), /* @__PURE__ */ jsx(Component, {
+			"data-slot": "motion-highlight-item",
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className,
+			...dataAttributes,
+			children
+		})] }));
+		return React$1.cloneElement(element, {
+			ref: refCallback,
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item"
+			}),
+			...commonHandlers
+		});
+	}
+	return enabled ? /* @__PURE__ */ jsxs(Component, {
+		ref: localRef,
+		"data-slot": "motion-highlight-item-container",
+		className: cn(mode === "children" && "relative", className),
+		...dataAttributes,
+		...props,
+		...commonHandlers,
+		children: [mode === "children" && /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			children: isActive && !isDisabled && /* @__PURE__ */ jsx(motion.div, {
+				layoutId: `transition-background-${contextId}`,
+				"data-slot": "motion-highlight",
+				style: {
+					position: "absolute",
+					zIndex: 0,
+					...contextStyle,
+					...style
+				},
+				className: cn(contextClassName, activeClassName),
+				transition: itemTransition,
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: {
+					opacity: 0,
+					transition: {
+						...itemTransition,
+						delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1e3
+					}
+				},
+				...dataAttributes
+			})
+		}), React$1.cloneElement(element, {
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			className: element.props.className,
+			...getNonOverridingDataAttributes(element, {
+				...dataAttributes,
+				"data-slot": "motion-highlight-item"
+			})
+		})]
+	}, childValue) : children;
+}
+//#endregion
+export { Highlight, HighlightItem, useHighlight };

package/dist/core/animate-ui/primitives/radix/accordion.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
+import { getStrictContext } from "../../../utils/get-strict-context.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { Accordion } from "radix-ui";
+//#region src/core/animate-ui/primitives/radix/accordion.tsx
+var [AccordionProvider, useAccordion] = getStrictContext("AccordionContext");
+var [AccordionItemProvider, useAccordionItem] = getStrictContext("AccordionItemContext");
+function Accordion$1(props) {
+	const [value, setValue] = useControlledState({
+		value: props?.value,
+		defaultValue: props?.defaultValue,
+		onChange: props?.onValueChange
+	});
+	return /* @__PURE__ */ jsx(AccordionProvider, {
+		value: {
+			value,
+			setValue
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			"data-slot": "accordion",
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+function AccordionItem(props) {
+	const { value } = useAccordion();
+	const [isOpen, setIsOpen] = React$1.useState(value?.includes(props?.value) ?? false);
+	React$1.useEffect(() => {
+		setIsOpen(value?.includes(props?.value) ?? false);
+	}, [value, props?.value]);
+	return /* @__PURE__ */ jsx(AccordionItemProvider, {
+		value: {
+			value: props.value,
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Item, {
+			"data-slot": "accordion-item",
+			...props
+		})
+	});
+}
+function AccordionHeader(props) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		"data-slot": "accordion-header",
+		...props
+	});
+}
+function AccordionTrigger(props) {
+	return /* @__PURE__ */ jsx(Accordion.Trigger, {
+		"data-slot": "accordion-trigger",
+		...props
+	});
+}
+function AccordionContent({ className: _, children, ...props }) {
+	const { isOpen } = useAccordionItem();
+	return /* @__PURE__ */ jsx(Accordion.Content, {
+		asChild: true,
+		forceMount: true,
+		"data-slot": "accordion-content",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]", isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden",
+				children
+			})
+		})
+	});
+}
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, useAccordion, useAccordionItem };

package/dist/core/animate-ui/primitives/radix/dialog.js

@@ -0,0 +1,136 @@
+"use client";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
+import { getStrictContext } from "../../../utils/get-strict-context.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "radix-ui";
+import { AnimatePresence, motion } from "motion/react";
+//#region src/core/animate-ui/primitives/radix/dialog.tsx
+var [DialogProvider, useDialog] = getStrictContext("DialogContext");
+function Dialog$1(props) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(DialogProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			"data-slot": "dialog",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	const { isOpen } = useDialog();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		forceMount: true,
+		...props
+	}) });
+}
+function DialogOverlay({ transition = {
+	duration: .2,
+	ease: "easeInOut"
+}, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Overlay, {
+		"data-slot": "dialog-overlay",
+		asChild: true,
+		forceMount: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			transition,
+			...props
+		}, "dialog-overlay")
+	});
+}
+function DialogContent({ from = "top", onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, transition = {
+	type: "spring",
+	stiffness: 150,
+	damping: 25
+}, ...props }) {
+	const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
+	const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
+	return /* @__PURE__ */ jsx(Dialog.Content, {
+		asChild: true,
+		forceMount: true,
+		onOpenAutoFocus,
+		onCloseAutoFocus,
+		onEscapeKeyDown,
+		onPointerDownOutside,
+		onInteractOutside,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "dialog-content",
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)",
+				transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			transition,
+			...props
+		}, "dialog-content")
+	});
+}
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		...props
+	});
+}
+function DialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		...props
+	});
+}
+function DialogTitle(props) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		...props
+	});
+}
+function DialogDescription(props) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		...props
+	});
+}
+//#endregion
+export { Dialog$1 as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, useDialog };