@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/core/animate-ui/primitives/animate/tooltip.js

@@ -0,0 +1,351 @@
+"use client";
+import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { Slot } from "./slot.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, LayoutGroup, motion } from "motion/react";
+import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
+//#region src/core/animate-ui/primitives/animate/tooltip.tsx
+var [GlobalTooltipProvider, useGlobalTooltip] = getStrictContext("GlobalTooltipProvider");
+var [LocalTooltipProvider, useTooltip] = getStrictContext("LocalTooltipProvider");
+function getResolvedSide(placement) {
+	if (placement.includes("-")) return placement.split("-")[0];
+	return placement;
+}
+function initialFromSide(side) {
+	if (side === "top") return { y: 15 };
+	if (side === "bottom") return { y: -15 };
+	if (side === "left") return { x: 15 };
+	return { x: -15 };
+}
+function TooltipProvider({ children, id, openDelay = 700, closeDelay = 300, transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 35
+} }) {
+	const globalId = React$1.useId();
+	const [currentTooltip, setCurrentTooltip] = React$1.useState(null);
+	const timeoutRef = React$1.useRef(null);
+	const lastCloseTimeRef = React$1.useRef(0);
+	const referenceElRef = React$1.useRef(null);
+	const showTooltip = React$1.useCallback((data) => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		if (currentTooltip !== null) {
+			setCurrentTooltip(data);
+			return;
+		}
+		const delay = Date.now() - lastCloseTimeRef.current < closeDelay ? 0 : openDelay;
+		timeoutRef.current = window.setTimeout(() => setCurrentTooltip(data), delay);
+	}, [
+		openDelay,
+		closeDelay,
+		currentTooltip
+	]);
+	const hideTooltip = React$1.useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = window.setTimeout(() => {
+			setCurrentTooltip(null);
+			lastCloseTimeRef.current = Date.now();
+		}, closeDelay);
+	}, [closeDelay]);
+	const hideImmediate = React$1.useCallback(() => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		setCurrentTooltip(null);
+		lastCloseTimeRef.current = Date.now();
+	}, []);
+	const setReferenceEl = React$1.useCallback((el) => {
+		referenceElRef.current = el;
+	}, []);
+	React$1.useEffect(() => {
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") hideImmediate();
+		};
+		window.addEventListener("keydown", onKeyDown, true);
+		window.addEventListener("scroll", hideImmediate, true);
+		window.addEventListener("resize", hideImmediate, true);
+		return () => {
+			window.removeEventListener("keydown", onKeyDown, true);
+			window.removeEventListener("scroll", hideImmediate, true);
+			window.removeEventListener("resize", hideImmediate, true);
+		};
+	}, [hideImmediate]);
+	return /* @__PURE__ */ jsxs(GlobalTooltipProvider, {
+		value: {
+			showTooltip,
+			hideTooltip,
+			hideImmediate,
+			currentTooltip,
+			transition,
+			globalId: id ?? globalId,
+			setReferenceEl,
+			referenceElRef
+		},
+		children: [/* @__PURE__ */ jsx(LayoutGroup, { children }), /* @__PURE__ */ jsx(TooltipOverlay, {})]
+	});
+}
+var [RenderedTooltipProvider, useRenderedTooltip] = getStrictContext("RenderedTooltipContext");
+var [FloatingProvider, useFloatingContext] = getStrictContext("FloatingContext");
+var MotionTooltipArrow = motion.create(FloatingArrow);
+function TooltipArrow({ ref, withTransition = true, ...props }) {
+	const { side, align, open } = useRenderedTooltip();
+	const { context, arrowRef } = useFloatingContext();
+	const { transition, globalId } = useGlobalTooltip();
+	React$1.useImperativeHandle(ref, () => arrowRef.current);
+	const deg = {
+		top: 0,
+		right: 90,
+		bottom: 180,
+		left: -90
+	}[side];
+	return /* @__PURE__ */ jsx(MotionTooltipArrow, {
+		ref: arrowRef,
+		context,
+		"data-state": open ? "open" : "closed",
+		"data-side": side,
+		"data-align": align,
+		"data-slot": "tooltip-arrow",
+		style: { rotate: deg },
+		layoutId: withTransition ? `tooltip-arrow-${globalId}` : void 0,
+		transition: withTransition ? transition : void 0,
+		...props
+	});
+}
+function TooltipPortal(props) {
+	return /* @__PURE__ */ jsx(FloatingPortal, { ...props });
+}
+function TooltipOverlay() {
+	const { currentTooltip, transition, globalId, referenceElRef } = useGlobalTooltip();
+	const [rendered, setRendered] = React$1.useState({
+		data: null,
+		open: false
+	});
+	const arrowRef = React$1.useRef(null);
+	const side = rendered.data?.side ?? "top";
+	const align = rendered.data?.align ?? "center";
+	const { refs, x, y, strategy, context, update } = useFloating({
+		placement: align === "center" ? side : `${side}-${align}`,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset({
+				mainAxis: rendered.data?.sideOffset ?? 0,
+				crossAxis: rendered.data?.alignOffset ?? 0
+			}),
+			flip(),
+			shift({ padding: 8 }),
+			arrow({ element: arrowRef })
+		]
+	});
+	React$1.useEffect(() => {
+		if (currentTooltip) setRendered({
+			data: currentTooltip,
+			open: true
+		});
+		else setRendered((p) => p.data ? {
+			...p,
+			open: false
+		} : p);
+	}, [currentTooltip]);
+	React$1.useLayoutEffect(() => {
+		if (referenceElRef.current) {
+			refs.setReference(referenceElRef.current);
+			update();
+		}
+	}, [
+		referenceElRef,
+		refs,
+		update,
+		rendered.data
+	]);
+	const ready = x != null && y != null;
+	const Component = rendered.data?.contentAsChild ? Slot : motion.div;
+	const resolvedSide = getResolvedSide(context.placement);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: rendered.data && ready && /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx("div", {
+			ref: refs.setFloating,
+			"data-slot": "tooltip-overlay",
+			"data-side": resolvedSide,
+			"data-align": rendered.data.align,
+			"data-state": rendered.open ? "open" : "closed",
+			style: {
+				position: strategy,
+				top: 0,
+				left: 0,
+				zIndex: 50,
+				transform: `translate3d(${x}px, ${y}px, 0)`
+			},
+			children: /* @__PURE__ */ jsx(FloatingProvider, {
+				value: {
+					context,
+					arrowRef
+				},
+				children: /* @__PURE__ */ jsx(RenderedTooltipProvider, {
+					value: {
+						side: resolvedSide,
+						align: rendered.data.align,
+						open: rendered.open
+					},
+					children: /* @__PURE__ */ jsx(Component, {
+						"data-slot": "tooltip-content",
+						"data-side": resolvedSide,
+						"data-align": rendered.data.align,
+						"data-state": rendered.open ? "open" : "closed",
+						layoutId: `tooltip-content-${globalId}`,
+						initial: {
+							opacity: 0,
+							scale: 0,
+							...initialFromSide(rendered.data.side)
+						},
+						animate: rendered.open ? {
+							opacity: 1,
+							scale: 1,
+							x: 0,
+							y: 0
+						} : {
+							opacity: 0,
+							scale: 0,
+							...initialFromSide(rendered.data.side)
+						},
+						exit: {
+							opacity: 0,
+							scale: 0,
+							...initialFromSide(rendered.data.side)
+						},
+						onAnimationComplete: () => {
+							if (!rendered.open) setRendered({
+								data: null,
+								open: false
+							});
+						},
+						transition,
+						...rendered.data.contentProps,
+						style: {
+							position: "relative",
+							...rendered.data.contentProps?.style || {}
+						}
+					})
+				})
+			})
+		}) })
+	});
+}
+function Tooltip({ children, side = "top", sideOffset = 0, align = "center", alignOffset = 0 }) {
+	const id = React$1.useId();
+	const [props, setProps] = React$1.useState({});
+	const [asChild, setAsChild] = React$1.useState(false);
+	return /* @__PURE__ */ jsx(LocalTooltipProvider, {
+		value: {
+			props,
+			setProps,
+			asChild,
+			setAsChild,
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			id
+		},
+		children
+	});
+}
+function shallowEqualWithoutChildren(a, b) {
+	if (a === b) return true;
+	if (!a || !b) return false;
+	const keysA = Object.keys(a).filter((k) => k !== "children");
+	const keysB = Object.keys(b).filter((k) => k !== "children");
+	if (keysA.length !== keysB.length) return false;
+	for (const k of keysA) if (a[k] !== b[k]) return false;
+	return true;
+}
+function TooltipContent({ asChild = false, ...props }) {
+	const { setProps, setAsChild } = useTooltip();
+	const lastPropsRef = React$1.useRef(void 0);
+	React$1.useEffect(() => {
+		if (!shallowEqualWithoutChildren(lastPropsRef.current, props)) {
+			lastPropsRef.current = props;
+			setProps(props);
+		}
+	}, [props, setProps]);
+	React$1.useEffect(() => {
+		setAsChild(asChild);
+	}, [asChild, setAsChild]);
+	return null;
+}
+function TooltipTrigger({ ref, onMouseEnter, onMouseLeave, onFocus, onBlur, onPointerDown, asChild = false, ...props }) {
+	const { props: contentProps, asChild: contentAsChild, side, sideOffset, align, alignOffset, id } = useTooltip();
+	const { showTooltip, hideTooltip, hideImmediate, currentTooltip, setReferenceEl } = useGlobalTooltip();
+	const triggerRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => triggerRef.current);
+	const suppressNextFocusRef = React$1.useRef(false);
+	const handleOpen = React$1.useCallback(() => {
+		if (!triggerRef.current) return;
+		setReferenceEl(triggerRef.current);
+		showTooltip({
+			contentProps,
+			contentAsChild,
+			rect: triggerRef.current.getBoundingClientRect(),
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			id
+		});
+	}, [
+		showTooltip,
+		setReferenceEl,
+		contentProps,
+		contentAsChild,
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		id
+	]);
+	const handlePointerDown = React$1.useCallback((e) => {
+		onPointerDown?.(e);
+		if (currentTooltip?.id === id) {
+			suppressNextFocusRef.current = true;
+			hideImmediate();
+			Promise.resolve().then(() => {
+				suppressNextFocusRef.current = false;
+			});
+		}
+	}, [
+		onPointerDown,
+		currentTooltip?.id,
+		id,
+		hideImmediate
+	]);
+	const handleMouseEnter = React$1.useCallback((e) => {
+		onMouseEnter?.(e);
+		handleOpen();
+	}, [handleOpen, onMouseEnter]);
+	const handleMouseLeave = React$1.useCallback((e) => {
+		onMouseLeave?.(e);
+		hideTooltip();
+	}, [hideTooltip, onMouseLeave]);
+	const handleFocus = React$1.useCallback((e) => {
+		onFocus?.(e);
+		if (suppressNextFocusRef.current) return;
+		handleOpen();
+	}, [handleOpen, onFocus]);
+	const handleBlur = React$1.useCallback((e) => {
+		onBlur?.(e);
+		hideTooltip();
+	}, [hideTooltip, onBlur]);
+	return /* @__PURE__ */ jsx(asChild ? Slot : motion.div, {
+		ref: triggerRef,
+		onPointerDown: handlePointerDown,
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		"data-slot": "tooltip-trigger",
+		"data-side": side,
+		"data-align": align,
+		"data-state": currentTooltip?.id === id ? "open" : "closed",
+		...props
+	});
+}
+//#endregion
+export { Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipTrigger, useGlobalTooltip, useTooltip };

package/dist/core/animate-ui/primitives/base/preview-card.js

@@ -0,0 +1,107 @@
+"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 { AnimatePresence, motion, useMotionValue, useSpring } from "motion/react";
+import { PreviewCard } from "@base-ui-components/react/preview-card";
+//#region src/core/animate-ui/primitives/base/preview-card.tsx
+var [PreviewCardProvider, usePreviewCard] = getStrictContext("PreviewCardContext");
+function PreviewCard$1({ followCursor = false, followCursorSpringOptions = {
+	stiffness: 200,
+	damping: 17
+}, ...props }) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(PreviewCardProvider, {
+		value: {
+			isOpen,
+			setIsOpen,
+			x: useMotionValue(0),
+			y: useMotionValue(0),
+			followCursor,
+			followCursorSpringOptions
+		},
+		children: /* @__PURE__ */ jsx(PreviewCard.Root, {
+			"data-slot": "preview-card",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+function PreviewCardTrigger({ onMouseMove, ...props }) {
+	const { x, y, followCursor } = usePreviewCard();
+	const handleMouseMove = (event) => {
+		onMouseMove?.(event);
+		const target = event.currentTarget.getBoundingClientRect();
+		if (followCursor === "x" || followCursor === true) {
+			const offsetXFromCenter = (event.clientX - target.left - target.width / 2) / 2;
+			x.set(offsetXFromCenter);
+		}
+		if (followCursor === "y" || followCursor === true) {
+			const offsetYFromCenter = (event.clientY - target.top - target.height / 2) / 2;
+			y.set(offsetYFromCenter);
+		}
+	};
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		"data-slot": "preview-card-trigger",
+		onMouseMove: handleMouseMove,
+		...props
+	});
+}
+function PreviewCardPortal(props) {
+	const { isOpen } = usePreviewCard();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		keepMounted: true,
+		"data-slot": "preview-card-portal",
+		...props
+	}) });
+}
+function PreviewCardPositioner(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+		"data-slot": "preview-card-positioner",
+		...props
+	});
+}
+function PreviewCardPopup({ transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 25
+}, style, ...props }) {
+	const { x, y, followCursor, followCursorSpringOptions } = usePreviewCard();
+	const translateX = useSpring(x, followCursorSpringOptions);
+	const translateY = useSpring(y, followCursorSpringOptions);
+	return /* @__PURE__ */ jsx(PreviewCard.Popup, { render: /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": "preview-card-popup",
+		initial: {
+			opacity: 0,
+			scale: .5
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .5
+		},
+		transition,
+		style: {
+			x: followCursor === "x" || followCursor === true ? translateX : void 0,
+			y: followCursor === "y" || followCursor === true ? translateY : void 0,
+			...style
+		},
+		...props
+	}, "preview-card-popup") });
+}
+function PreviewCardBackdrop(props) {
+	return /* @__PURE__ */ jsx(PreviewCard.Backdrop, {
+		"data-slot": "preview-card-backdrop",
+		...props
+	});
+}
+//#endregion
+export { PreviewCard$1 as PreviewCard, PreviewCardBackdrop, PreviewCardPopup, PreviewCardPortal, PreviewCardPositioner, PreviewCardTrigger, usePreviewCard };

package/dist/core/animate-ui/primitives/base/progress.js

@@ -0,0 +1,60 @@
+"use client";
+import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { CountingNumber } from "../texts/counting-number.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+import { Progress } from "@base-ui-components/react/progress";
+//#region src/core/animate-ui/primitives/base/progress.tsx
+var [ProgressProvider, useProgress] = getStrictContext("ProgressContext");
+var Progress$1 = (props) => {
+	return /* @__PURE__ */ jsx(ProgressProvider, {
+		value: { value: props.value ?? 0 },
+		children: /* @__PURE__ */ jsx(Progress.Root, {
+			"data-slot": "progress",
+			...props
+		})
+	});
+};
+var MotionProgressIndicator = motion.create(Progress.Indicator);
+function ProgressIndicator({ transition = {
+	type: "spring",
+	stiffness: 100,
+	damping: 30
+}, ...props }) {
+	const { value } = useProgress();
+	return /* @__PURE__ */ jsx(MotionProgressIndicator, {
+		"data-slot": "progress-indicator",
+		animate: { width: `${value}%` },
+		transition,
+		...props
+	});
+}
+function ProgressTrack(props) {
+	return /* @__PURE__ */ jsx(Progress.Track, {
+		"data-slot": "progress-track",
+		...props
+	});
+}
+function ProgressLabel(props) {
+	return /* @__PURE__ */ jsx(Progress.Label, {
+		"data-slot": "progress-label",
+		...props
+	});
+}
+function ProgressValue({ transition = {
+	stiffness: 80,
+	damping: 20
+}, ...props }) {
+	const { value } = useProgress();
+	return /* @__PURE__ */ jsx(Progress.Value, {
+		"data-slot": "progress-value",
+		render: /* @__PURE__ */ jsx(CountingNumber, {
+			number: value ?? 0,
+			transition,
+			...props
+		})
+	});
+}
+//#endregion
+export { Progress$1 as Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress };

package/dist/core/animate-ui/primitives/base/radio.js

@@ -0,0 +1,83 @@
+"use client";
+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 { AnimatePresence, motion } from "motion/react";
+import { RadioGroup } from "@base-ui-components/react/radio-group";
+import { Radio } from "@base-ui-components/react/radio";
+//#region src/core/animate-ui/primitives/base/radio.tsx
+var [RadioGroupProvider, useRadioGroup] = getStrictContext("RadioGroupContext");
+var [RadioProvider, useRadio] = getStrictContext("RadioContext");
+function RadioGroup$1(props) {
+	const [value, setValue] = useControlledState({
+		value: props.value ?? void 0,
+		defaultValue: props.defaultValue,
+		onChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(RadioGroupProvider, {
+		value: {
+			value,
+			setValue
+		},
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			"data-slot": "radio-group",
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+function RadioIndicator({ transition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 16
+}, ...props }) {
+	const { isChecked } = useRadio();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isChecked && /* @__PURE__ */ jsx(Radio.Indicator, {
+		"data-slot": "radio-group-indicator",
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "radio-group-indicator-circle",
+			initial: {
+				opacity: 0,
+				scale: 0
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: 0
+			},
+			transition,
+			...props
+		}, "radio-group-indicator-circle")
+	}) });
+}
+function Radio$1({ value: valueProps, disabled, required, ...props }) {
+	const { value } = useRadioGroup();
+	const [isChecked, setIsChecked] = React$1.useState(value === valueProps);
+	React$1.useEffect(() => {
+		setIsChecked(value === valueProps);
+	}, [value, valueProps]);
+	return /* @__PURE__ */ jsx(RadioProvider, {
+		value: {
+			isChecked,
+			setIsChecked
+		},
+		children: /* @__PURE__ */ jsx(Radio.Root, {
+			value: valueProps,
+			disabled,
+			required,
+			render: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "radio-group-item",
+				whileHover: { scale: 1.05 },
+				whileTap: { scale: .95 },
+				...props
+			})
+		})
+	});
+}
+//#endregion
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioIndicator, useRadio, useRadioGroup };

package/dist/core/animate-ui/primitives/buttons/button.js

@@ -0,0 +1,15 @@
+"use client";
+import { Slot } from "../animate/slot.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/core/animate-ui/primitives/buttons/button.tsx
+function Button({ hoverScale = 1.05, tapScale = .95, asChild = false, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : motion.button, {
+		whileTap: { scale: tapScale },
+		whileHover: { scale: hoverScale },
+		...props
+	});
+}
+//#endregion
+export { Button };