@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/core/animate-ui/primitives/radix/dropdown-menu.js

@@ -0,0 +1,305 @@
+"use client";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
+import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { Highlight, HighlightItem } from "../effects/highlight.js";
+import { useDataState } from "../../../hooks/use-data-state.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { DropdownMenu } from "radix-ui";
+import { AnimatePresence, motion } from "motion/react";
+//#region src/core/animate-ui/primitives/radix/dropdown-menu.tsx
+var [DropdownMenuProvider, useDropdownMenu] = getStrictContext("DropdownMenuContext");
+var [DropdownMenuSubProvider, useDropdownMenuSub] = getStrictContext("DropdownMenuSubContext");
+function DropdownMenu$1(props) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	const [highlightedValue, setHighlightedValue] = React$1.useState(null);
+	return /* @__PURE__ */ jsx(DropdownMenuProvider, {
+		value: {
+			isOpen,
+			setIsOpen,
+			highlightedValue,
+			setHighlightedValue
+		},
+		children: /* @__PURE__ */ jsx(DropdownMenu.Root, {
+			"data-slot": "dropdown-menu",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+function DropdownMenuTrigger(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuPortal(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuGroup(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuSub(props) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(DropdownMenuSubProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(DropdownMenu.Sub, {
+			"data-slot": "dropdown-menu-sub",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+function DropdownMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ disabled, textValue, ...props }) {
+	const { setHighlightedValue } = useDropdownMenu();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(DropdownMenu.SubTrigger, {
+		ref: highlightedRef,
+		disabled,
+		textValue,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "dropdown-menu-sub-trigger",
+			"data-disabled": disabled,
+			...props
+		})
+	});
+}
+function DropdownMenuSubContent({ loop, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, sideOffset, alignOffset, avoidCollisions, collisionBoundary, collisionPadding, arrowPadding, sticky, hideWhenDetached, transition = { duration: .2 }, style, container, ...props }) {
+	const { isOpen } = useDropdownMenuSub();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(DropdownMenuPortal, {
+		forceMount: true,
+		container,
+		children: /* @__PURE__ */ jsx(DropdownMenu.SubContent, {
+			asChild: true,
+			forceMount: true,
+			loop,
+			onEscapeKeyDown,
+			onPointerDownOutside,
+			onFocusOutside,
+			onInteractOutside,
+			sideOffset,
+			alignOffset,
+			avoidCollisions,
+			collisionBoundary,
+			collisionPadding,
+			arrowPadding,
+			sticky,
+			hideWhenDetached,
+			children: /* @__PURE__ */ jsx(motion.div, {
+				"data-slot": "dropdown-menu-sub-content",
+				initial: {
+					opacity: 0,
+					scale: .95
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .95
+				},
+				transition,
+				style: {
+					willChange: "opacity, transform",
+					...style
+				},
+				...props
+			}, "dropdown-menu-sub-content")
+		})
+	}) });
+}
+function DropdownMenuHighlight({ transition = {
+	type: "spring",
+	stiffness: 350,
+	damping: 35
+}, ...props }) {
+	const { highlightedValue } = useDropdownMenu();
+	return /* @__PURE__ */ jsx(Highlight, {
+		"data-slot": "dropdown-menu-highlight",
+		click: false,
+		controlledItems: true,
+		transition,
+		value: highlightedValue,
+		...props
+	});
+}
+function DropdownMenuContent({ loop, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, side, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, collisionPadding, arrowPadding, sticky, hideWhenDetached, transition = { duration: .2 }, style, container, ...props }) {
+	const { isOpen } = useDropdownMenu();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(DropdownMenuPortal, {
+		forceMount: true,
+		container,
+		children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+			asChild: true,
+			loop,
+			onCloseAutoFocus,
+			onEscapeKeyDown,
+			onPointerDownOutside,
+			onFocusOutside,
+			onInteractOutside,
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			avoidCollisions,
+			collisionBoundary,
+			collisionPadding,
+			arrowPadding,
+			sticky,
+			hideWhenDetached,
+			children: /* @__PURE__ */ jsx(motion.div, {
+				"data-slot": "dropdown-menu-content",
+				initial: {
+					opacity: 0,
+					scale: .95
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .95
+				},
+				transition,
+				style: {
+					willChange: "opacity, transform",
+					...style
+				},
+				...props
+			}, "dropdown-menu-content")
+		})
+	}) });
+}
+function DropdownMenuHighlightItem(props) {
+	return /* @__PURE__ */ jsx(HighlightItem, {
+		"data-slot": "dropdown-menu-highlight-item",
+		...props
+	});
+}
+function DropdownMenuItem({ disabled, onSelect, textValue, ...props }) {
+	const { setHighlightedValue } = useDropdownMenu();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
+		ref: highlightedRef,
+		disabled,
+		onSelect,
+		textValue,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "dropdown-menu-item",
+			"data-disabled": disabled,
+			...props
+		})
+	});
+}
+function DropdownMenuCheckboxItem({ checked, onCheckedChange, disabled, onSelect, textValue, ...props }) {
+	const { setHighlightedValue } = useDropdownMenu();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(DropdownMenu.CheckboxItem, {
+		ref: highlightedRef,
+		checked,
+		onCheckedChange,
+		disabled,
+		onSelect,
+		textValue,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "dropdown-menu-checkbox-item",
+			"data-disabled": disabled,
+			...props
+		})
+	});
+}
+function DropdownMenuRadioItem({ value, disabled, onSelect, textValue, ...props }) {
+	const { setHighlightedValue } = useDropdownMenu();
+	const [, highlightedRef] = useDataState("highlighted", void 0, (value) => {
+		if (value === true) {
+			const el = highlightedRef.current;
+			const v = el?.dataset.value || el?.id || null;
+			if (v) setHighlightedValue(v);
+		}
+	});
+	return /* @__PURE__ */ jsx(DropdownMenu.RadioItem, {
+		ref: highlightedRef,
+		value,
+		disabled,
+		onSelect,
+		textValue,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "dropdown-menu-radio-item",
+			"data-disabled": disabled,
+			...props
+		})
+	});
+}
+function DropdownMenuLabel(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Label, {
+		"data-slot": "dropdown-menu-label",
+		...props
+	});
+}
+function DropdownMenuSeparator(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		...props
+	});
+}
+function DropdownMenuShortcut(props) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		...props
+	});
+}
+function DropdownMenuItemIndicator(props) {
+	return /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, {
+		"data-slot": "dropdown-menu-item-indicator",
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, { ...props })
+	});
+}
+//#endregion
+export { DropdownMenu$1 as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHighlight, DropdownMenuHighlightItem, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, useDropdownMenu, useDropdownMenuSub };

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

@@ -0,0 +1,165 @@
+"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/sheet.tsx
+var [SheetProvider, useSheet] = getStrictContext("SheetContext");
+function Sheet(props) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props.open,
+		defaultValue: props.defaultOpen,
+		onChange: props.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(SheetProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			"data-slot": "sheet",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+function SheetTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+function SheetPortal(props) {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		forceMount: true,
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+function SheetOverlay({ transition = {
+	duration: .2,
+	ease: "easeInOut"
+}, ...props }) {
+	const { isOpen } = useSheet();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Overlay, {
+		asChild: true,
+		forceMount: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "sheet-overlay",
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			transition,
+			...props
+		}, "sheet-overlay")
+	}) });
+}
+function SheetContent({ side = "right", transition = {
+	type: "spring",
+	stiffness: 150,
+	damping: 22
+}, style, children, ...props }) {
+	const { isOpen } = useSheet();
+	const axis = side === "left" || side === "right" ? "x" : "y";
+	const offscreen = {
+		right: {
+			x: "100%",
+			opacity: 0
+		},
+		left: {
+			x: "-100%",
+			opacity: 0
+		},
+		top: {
+			y: "-100%",
+			opacity: 0
+		},
+		bottom: {
+			y: "100%",
+			opacity: 0
+		}
+	};
+	const positionStyle = {
+		right: {
+			insetBlock: 0,
+			right: 0
+		},
+		left: {
+			insetBlock: 0,
+			left: 0
+		},
+		top: {
+			insetInline: 0,
+			top: 0
+		},
+		bottom: {
+			insetInline: 0,
+			bottom: 0
+		}
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Content, {
+		asChild: true,
+		forceMount: true,
+		...props,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "sheet-content",
+			"data-side": side,
+			initial: offscreen[side],
+			animate: {
+				[axis]: 0,
+				opacity: 1
+			},
+			exit: offscreen[side],
+			style: {
+				position: "fixed",
+				...positionStyle[side],
+				...style
+			},
+			transition,
+			children
+		}, "sheet-content")
+	}) });
+}
+function SheetHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		...props
+	});
+}
+function SheetFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		...props
+	});
+}
+function SheetTitle(props) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		...props
+	});
+}
+function SheetDescription(props) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		...props
+	});
+}
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, useSheet };

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

@@ -0,0 +1,86 @@
+"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 { Switch } from "radix-ui";
+import { motion } from "motion/react";
+//#region src/core/animate-ui/primitives/radix/switch.tsx
+var [SwitchProvider, useSwitch] = getStrictContext("SwitchContext");
+function Switch$1(props) {
+	const [isPressed, setIsPressed] = React$1.useState(false);
+	const { checked, defaultChecked, onCheckedChange, children, ...rootProps } = props;
+	const [isChecked, setIsChecked] = useControlledState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	return /* @__PURE__ */ jsx(SwitchProvider, {
+		value: {
+			isChecked,
+			setIsChecked,
+			isPressed,
+			setIsPressed
+		},
+		children: /* @__PURE__ */ jsx(Switch.Root, {
+			checked,
+			defaultChecked,
+			onCheckedChange: setIsChecked,
+			asChild: true,
+			children: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "switch",
+				whileTap: "tap",
+				initial: false,
+				onTapStart: () => setIsPressed(true),
+				onTapCancel: () => setIsPressed(false),
+				onTap: () => setIsPressed(false),
+				...rootProps,
+				children
+			})
+		})
+	});
+}
+function SwitchThumb({ pressedAnimation, transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 25
+}, ...props }) {
+	const { isPressed } = useSwitch();
+	return /* @__PURE__ */ jsx(Switch.Thumb, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "switch-thumb",
+			whileTap: "tab",
+			layout: true,
+			transition,
+			animate: isPressed ? pressedAnimation : void 0,
+			...props
+		})
+	});
+}
+function SwitchIcon({ position, transition = {
+	type: "spring",
+	bounce: 0
+}, ...props }) {
+	const { isChecked } = useSwitch();
+	const isAnimated = React$1.useMemo(() => {
+		if (position === "right") return !isChecked;
+		if (position === "left") return isChecked;
+		if (position === "thumb") return true;
+		return false;
+	}, [position, isChecked]);
+	return /* @__PURE__ */ jsx(motion.div, {
+		"data-slot": `switch-${position}-icon`,
+		animate: isAnimated ? {
+			scale: 1,
+			opacity: 1
+		} : {
+			scale: 0,
+			opacity: 0
+		},
+		transition,
+		...props
+	});
+}
+//#endregion
+export { Switch$1 as Switch, SwitchIcon, SwitchThumb, useSwitch };

package/dist/core/animate-ui/primitives/radix/toggle-group.js

@@ -0,0 +1,100 @@
+"use client";
+import { useControlledState } from "../../../hooks/use-controlled-state.js";
+import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { Highlight, HighlightItem } from "../effects/highlight.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ToggleGroup } from "radix-ui";
+import { AnimatePresence, motion } from "motion/react";
+//#region src/core/animate-ui/primitives/radix/toggle-group.tsx
+var [ToggleGroupProvider, useToggleGroup] = getStrictContext("ToggleGroupContext");
+function ToggleGroup$1(props) {
+	const [value, setValue] = useControlledState({
+		value: props.value,
+		defaultValue: props.defaultValue,
+		onChange: props.onValueChange
+	});
+	return /* @__PURE__ */ jsx(ToggleGroupProvider, {
+		value: {
+			value,
+			setValue,
+			type: props.type
+		},
+		children: /* @__PURE__ */ jsx(ToggleGroup.Root, {
+			"data-slot": "toggle-group",
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+function ToggleGroupItem({ value, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(ToggleGroup.Item, {
+		value,
+		disabled,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(motion.button, {
+			"data-slot": "toggle-group-item",
+			whileTap: { scale: .95 },
+			...props
+		})
+	});
+}
+function ToggleGroupHighlight({ transition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 25
+}, ...props }) {
+	const { value } = useToggleGroup();
+	return /* @__PURE__ */ jsx(Highlight, {
+		"data-slot": "toggle-group-highlight",
+		controlledItems: true,
+		value: typeof value === "string" ? value : null,
+		exitDelay: 0,
+		transition,
+		...props
+	});
+}
+function ToggleGroupHighlightItem({ children, style, ...props }) {
+	const { type, value } = useToggleGroup();
+	if (type === "single") return /* @__PURE__ */ jsx(HighlightItem, {
+		"data-slot": "toggle-group-highlight-item",
+		style: {
+			inset: 0,
+			...style
+		},
+		...props,
+		children
+	});
+	if (type === "multiple" && React$1.isValidElement(children)) {
+		const isActive = props.value && value && value.includes(props.value);
+		const element = children;
+		return React$1.cloneElement(children, {
+			style: {
+				...element.props.style,
+				position: "relative"
+			},
+			...element.props
+		}, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AnimatePresence, { children: isActive && /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "toggle-group-highlight-item",
+			style: {
+				position: "absolute",
+				inset: 0,
+				zIndex: 0,
+				...style
+			},
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			...props
+		}) }), /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "relative",
+				zIndex: 1
+			},
+			children: element.props.children
+		})] }));
+	}
+	return null;
+}
+//#endregion
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupHighlight, ToggleGroupHighlightItem, ToggleGroupItem, useToggleGroup };