@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/components/text-effects/glitch-effect/glitch-text.js

@@ -0,0 +1,115 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/text-effects/glitch-effect/glitch-text.tsx
+var GlitchText = ({ text, children, speed = 15, enableShadows = true, enableOnHover = false, className = "" }) => {
+	const containerRef = useRef(null);
+	const [isHovered, setIsHovered] = useState(false);
+	const [frame, setFrame] = useState(0);
+	const content = text ?? (typeof children === "string" ? children : "");
+	const clipPaths = [
+		"inset(10% 0 85% 0)",
+		"inset(45% 0 40% 0)",
+		"inset(80% 0 5% 0)",
+		"inset(10% 0 60% 0)",
+		"inset(70% 0 20% 0)",
+		"inset(25% 0 50% 0)",
+		"inset(55% 0 35% 0)",
+		"inset(5% 0 75% 0)",
+		"inset(90% 0 2% 0)",
+		"inset(30% 0 55% 0)",
+		"inset(15% 0 70% 0)",
+		"inset(65% 0 25% 0)",
+		"inset(40% 0 45% 0)",
+		"inset(85% 0 10% 0)",
+		"inset(20% 0 65% 0)",
+		"inset(50% 0 30% 0)",
+		"inset(75% 0 15% 0)",
+		"inset(35% 0 52% 0)",
+		"inset(60% 0 28% 0)",
+		"inset(8% 0 82% 0)"
+	];
+	const shouldAnimate = enableOnHover ? isHovered : true;
+	useEffect(() => {
+		if (!shouldAnimate) return;
+		const intervalMs = speed * 1e3 / clipPaths.length;
+		const interval = setInterval(() => {
+			setFrame((f) => (f + 1) % clipPaths.length);
+		}, intervalMs);
+		return () => clearInterval(interval);
+	}, [
+		shouldAnimate,
+		speed,
+		clipPaths.length
+	]);
+	const containerStyle = {
+		position: "relative",
+		display: "inline-block",
+		cursor: "pointer",
+		userSelect: "none"
+	};
+	const textStyle = {
+		position: "relative",
+		fontSize: "clamp(2rem, 10vw, 4rem)",
+		fontWeight: 900,
+		color: "white"
+	};
+	const layerBaseStyle = {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		width: "100%",
+		height: "100%",
+		fontSize: "clamp(2rem, 10vw, 4rem)",
+		fontWeight: 900,
+		color: "white",
+		background: "black",
+		overflow: "hidden"
+	};
+	const afterIndex = frame;
+	const beforeIndex = (frame + 10) % clipPaths.length;
+	const showLayers = enableOnHover ? isHovered : true;
+	const afterStyle = {
+		...layerBaseStyle,
+		left: "10px",
+		textShadow: enableShadows ? "-5px 0 red" : "none",
+		clipPath: showLayers ? clipPaths[afterIndex] : "inset(0 0 100% 0)",
+		opacity: showLayers ? 1 : 0,
+		transition: "opacity 0.1s"
+	};
+	const beforeStyle = {
+		...layerBaseStyle,
+		left: "-10px",
+		textShadow: enableShadows ? "5px 0 cyan" : "none",
+		clipPath: showLayers ? clipPaths[beforeIndex] : "inset(0 0 100% 0)",
+		opacity: showLayers ? 1 : 0,
+		transition: "opacity 0.1s"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		ref: containerRef,
+		role: "button",
+		tabIndex: 0,
+		style: containerStyle,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: textStyle,
+				children: content
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				style: beforeStyle,
+				children: content
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				style: afterStyle,
+				children: content
+			})
+		]
+	});
+};
+//#endregion
+export { GlitchText, GlitchText as default };

package/dist/components/text-effects/gradient-text/gradient-text.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/components/text-effects/gradient-text/gradient-text.tsx
+function GradientText({ text, className, gradient = "linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)", neon = false, transition = {
+	duration: 3,
+	repeat: Number.POSITIVE_INFINITY,
+	ease: "linear"
+}, ...props }) {
+	const baseStyle = { backgroundImage: gradient };
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative inline-block", className),
+		"data-slot": "gradient-text",
+		...props,
+		children: [/* @__PURE__ */ jsx(motion.span, {
+			animate: { backgroundPositionX: ["0%", "200%"] },
+			className: "m-0 text-transparent bg-clip-text bg-[length:200%_100%]",
+			style: baseStyle,
+			transition,
+			children: text
+		}), neon && /* @__PURE__ */ jsx(motion.span, {
+			animate: { backgroundPositionX: ["0%", "200%"] },
+			className: "m-0 absolute top-0 left-0 text-transparent bg-clip-text blur-[8px] mix-blend-plus-lighter bg-[length:200%_100%]",
+			style: baseStyle,
+			transition,
+			children: text
+		})]
+	});
+}
+//#endregion
+export { GradientText, GradientText as default };

package/dist/components/text-effects/highlight-text/highlight-text.js

@@ -0,0 +1,35 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion, useInView } from "motion/react";
+//#region src/components/text-effects/highlight-text/highlight-text.tsx
+function HighlightText({ ref, text, className, inView = false, inViewMargin = "0px", inViewOnce = true, transition = {
+	duration: 2,
+	ease: "easeInOut"
+}, ...props }) {
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	const inViewResult = useInView(localRef, {
+		once: inViewOnce,
+		margin: inViewMargin
+	});
+	const isInView = !inView || inViewResult;
+	return /* @__PURE__ */ jsx(motion.span, {
+		animate: isInView ? { backgroundSize: "100% 100%" } : void 0,
+		className: cn("relative inline-block px-2 py-1 rounded-lg bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-500 dark:to-purple-500", className),
+		"data-slot": "highlight-text",
+		initial: { backgroundSize: "0% 100%" },
+		ref: localRef,
+		style: {
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "left center",
+			display: "inline"
+		},
+		transition,
+		...props,
+		children: text
+	});
+}
+//#endregion
+export { HighlightText, HighlightText as default };

package/dist/components/text-effects/parse-text-markup.js

@@ -0,0 +1,53 @@
+import { GlitchText } from "./glitch-effect/glitch-text.js";
+import { GradientText } from "./gradient-text/gradient-text.js";
+import { HighlightText } from "./highlight-text/highlight-text.js";
+import { ShimmeringText } from "./shimmer-text/shimmer-text.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text-effects/parse-text-markup.tsx
+var TEXT_EFFECT_REGISTRY = {
+	"glitch-text": GlitchText,
+	"gradient-text": GradientText,
+	"highlight-text": HighlightText,
+	"shimmer-text": ShimmeringText
+};
+/**
+* Builds a single regex that matches all registered tags.
+* e.g. `<gradient-text>(.*?)<\/gradient-text>|<highlight-text>(.*?)<\/highlight-text>`
+*/
+function buildTagRegex(tags) {
+	const patterns = tags.map((tag) => `<${tag}>(.*?)<\\/${tag}>`);
+	return new RegExp(patterns.join("|"), "g");
+}
+var tagNames = Object.keys(TEXT_EFFECT_REGISTRY);
+var TAG_REGEX = buildTagRegex(tagNames);
+/**
+* Parses a string containing text-effect markup tags (e.g. `<gradient-text>`,
+* `<highlight-text>`) and returns an array of React nodes with the tagged
+* segments rendered by their corresponding components.
+*
+* @example
+* parseTextMarkup("Hello <gradient-text>World</gradient-text> and <highlight-text>Wow</highlight-text>!")
+* // → ["Hello ", <GradientText text="World" />, " and ", <HighlightText text="Wow" />, "!"]
+*/
+function parseTextMarkup(text) {
+	const parts = [];
+	let lastIndex = 0;
+	let match;
+	TAG_REGEX.lastIndex = 0;
+	while ((match = TAG_REGEX.exec(text)) !== null) {
+		if (match.index > lastIndex) parts.push(text.slice(lastIndex, match.index));
+		for (let i = 0; i < tagNames.length; i++) {
+			const captured = match[i + 1];
+			if (captured !== void 0) {
+				const Component = TEXT_EFFECT_REGISTRY[tagNames[i]];
+				parts.push(/* @__PURE__ */ jsx(Component, { text: captured }, match.index));
+				break;
+			}
+		}
+		lastIndex = TAG_REGEX.lastIndex;
+	}
+	if (lastIndex < text.length) parts.push(text.slice(lastIndex));
+	return parts;
+}
+//#endregion
+export { parseTextMarkup };

package/dist/components/text-effects/shimmer-text/shimmer-text.js

@@ -0,0 +1,67 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/components/text-effects/shimmer-text/shimmer-text.tsx
+function ShimmeringText({ text, duration = 2.5, transition, wave = false, className, color = "var(--color-neutral-500)", shimmeringColor = "var(--color-neutral-300)", ...props }) {
+	return /* @__PURE__ */ jsx(motion.span, {
+		className: cn("relative inline-block [perspective:500px]", className),
+		style: {
+			"--shimmering-color": shimmeringColor,
+			"--color": color,
+			color: "var(--color)"
+		},
+		...props,
+		children: text?.split("")?.map((char, i) => /* @__PURE__ */ jsx(motion.span, {
+			animate: {
+				...wave ? {
+					x: [
+						0,
+						5,
+						0
+					],
+					y: [
+						0,
+						-5,
+						0
+					],
+					scale: [
+						1,
+						1.1,
+						1
+					],
+					rotateY: [
+						0,
+						15,
+						0
+					]
+				} : {},
+				color: [
+					"var(--color)",
+					"var(--shimmering-color)",
+					"var(--color)"
+				]
+			},
+			className: "inline-block whitespace-pre [transform-style:preserve-3d]",
+			initial: {
+				...wave ? {
+					scale: 1,
+					rotateY: 0
+				} : {},
+				color: "var(--color)"
+			},
+			transition: {
+				duration,
+				repeat: Number.POSITIVE_INFINITY,
+				repeatType: "loop",
+				repeatDelay: text.length * .05,
+				delay: i * duration / text.length,
+				ease: "easeInOut",
+				...transition
+			},
+			children: char
+		}, i))
+	});
+}
+//#endregion
+export { ShimmeringText, ShimmeringText as default };

package/dist/components/time-picker/time-picker.js

@@ -0,0 +1,23 @@
+import { cn } from "../../utils/cn.js";
+import { Input } from "../../core/input/input.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { ClockIcon } from "lucide-react";
+//#region src/components/time-picker/time-picker.tsx
+/** Matches shadcn Date Picker "Time" example: hide WebKit picker affordance for a custom end icon. */
+var timeInputChromeClass = "appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none";
+var TimePicker = React$1.forwardRef(({ hideIcon = false, className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		...props,
+		type: "time",
+		className: cn(timeInputChromeClass, className),
+		endIcon: hideIcon ? void 0 : /* @__PURE__ */ jsx(ClockIcon, {
+			size: 16,
+			className: "text-muted-foreground"
+		})
+	});
+});
+TimePicker.displayName = "TimePicker";
+//#endregion
+export { TimePicker };

package/dist/components/toast/toast.js

@@ -0,0 +1,126 @@
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { resolveVariantStyles } from "../../utils/variant.js";
+import { VariantGradientUnderlay } from "../../utils/variant-gradient-underlay.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCheck, CircleAlert, CircleX, Info, TriangleAlert } from "lucide-react";
+import { Toaster, toast } from "sonner";
+import "sonner/dist/styles.css";
+//#region src/components/toast/toast.tsx
+var ToastDefaultVariantContext = React$1.createContext(void 0);
+var typeIconMap = {
+	error: /* @__PURE__ */ jsx(CircleX, { className: "h-4 w-4" }),
+	info: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }),
+	warning: /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4" }),
+	success: /* @__PURE__ */ jsx(CheckCheck, { className: "h-4 w-4" })
+};
+var SEMANTIC_COLOR_TO_TYPE = {
+	error: "error",
+	info: "info",
+	warning: "warning",
+	success: "success"
+};
+function defaultIconFromColor(color) {
+	if (!isPresetColor(color)) return void 0;
+	const type = SEMANTIC_COLOR_TO_TYPE[color];
+	return type != null ? typeIconMap[type] : void 0;
+}
+function isToastProps(input) {
+	return input != null && typeof input === "object" && !React$1.isValidElement(input) && ("title" in input || "children" in input || "type" in input || "color" in input || "icon" in input || "hideIcon" in input || "action" in input || "variant" in input);
+}
+function normalizeToastInput(input, type) {
+	if (isToastProps(input)) return {
+		...input,
+		type: input.type ?? type
+	};
+	return {
+		title: input,
+		type
+	};
+}
+function resolveToastOptions(props, options) {
+	return {
+		id: options?.id,
+		duration: options?.duration,
+		position: options?.position,
+		toasterId: options?.toasterId,
+		dismissible: options?.dismissible,
+		closeButton: options?.closeButton
+	};
+}
+var Toast = React$1.forwardRef(({ icon, title, children, type, color, variant, hideIcon = false, action, className }, ref) => {
+	const defaultVariantFromToaster = React$1.useContext(ToastDefaultVariantContext);
+	const resolvedVariant = variant ?? defaultVariantFromToaster ?? "soft";
+	const resolvedColor = color ?? type ?? "primary";
+	const resolvedIcon = icon ?? (type != null ? typeIconMap[type] : void 0) ?? (color != null ? defaultIconFromColor(color) : void 0) ?? /* @__PURE__ */ jsx(CircleAlert, { className: "h-4 w-4" });
+	const showIcon = !hideIcon && resolvedIcon != null;
+	const styles = resolveVariantStyles(resolvedVariant, resolvedColor);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("relative flex w-full min-w-[min(20rem,calc(100vw-2rem))] max-w-[min(24rem,calc(100vw-2rem))] items-start gap-3 overflow-hidden rounded-lg px-4 py-3 shadow-lg", styles.container, className),
+		style: styles.containerStyle,
+		children: [
+			/* @__PURE__ */ jsx(VariantGradientUnderlay, {
+				layers: styles.gradientHoverLayers,
+				layersInline: styles.gradientHoverLayersInline,
+				silverShine: styles.silverShine,
+				silverBorder: styles.silverBorder
+			}),
+			showIcon && /* @__PURE__ */ jsx("div", {
+				className: "mt-0.5 shrink-0",
+				children: resolvedIcon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: "font-medium leading-normal text-sm",
+					children: title
+				}), children && /* @__PURE__ */ jsx("div", {
+					className: cn("text-sm leading-normal", styles.description),
+					style: styles.descriptionStyle,
+					children
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: action
+			})
+		]
+	});
+});
+Toast.displayName = "Toast";
+var Toaster$1 = React$1.forwardRef(({ position = "top-right", closeButton = true, toastVariant, ...props }, ref) => /* @__PURE__ */ jsx(ToastDefaultVariantContext.Provider, {
+	value: toastVariant,
+	children: /* @__PURE__ */ jsx(Toaster, {
+		ref,
+		position,
+		closeButton,
+		...props
+	})
+}));
+Toaster$1.displayName = "Toaster";
+function show(input, options) {
+	const props = normalizeToastInput(input);
+	return toast.custom(() => /* @__PURE__ */ jsx(Toast, { ...props }), {
+		...resolveToastOptions(props, options),
+		unstyled: true
+	});
+}
+function showTypedToast(type, input, options) {
+	const props = normalizeToastInput(input, type);
+	return toast.custom(() => /* @__PURE__ */ jsx(Toast, { ...props }), {
+		...resolveToastOptions(props, options),
+		unstyled: true
+	});
+}
+var toast$1 = Object.assign(show, {
+	show,
+	success: (input, options) => showTypedToast("success", input, options),
+	error: (input, options) => showTypedToast("error", input, options),
+	info: (input, options) => showTypedToast("info", input, options),
+	warning: (input, options) => showTypedToast("warning", input, options),
+	dismiss: toast.dismiss
+});
+//#endregion
+export { Toast, Toaster$1 as Toaster, toast$1 as toast };

package/dist/components/togglable-items-list/togglable-items-list.js

@@ -0,0 +1,28 @@
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/togglable-items-list/togglable-items-list.tsx
+function TogglableItemsList({ items, checkedState, onToggle, label, icon, triggerButtonVariant = "outline", triggerButtonColor, triggerButtonSize = "default", contentAlign = "end", contentClassName = "min-w-[150px]" }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			fullWidth: false,
+			variant: triggerButtonVariant,
+			color: triggerButtonColor,
+			size: triggerButtonSize,
+			startIcon: icon,
+			children: label
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: contentAlign,
+		className: contentClassName,
+		children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+			checked: checkedState[item.id] ?? true,
+			onCheckedChange: (value) => onToggle(item.id, !!value),
+			onSelect: (e) => e.preventDefault(),
+			children: item.label
+		}, item.id))
+	})] });
+}
+//#endregion
+export { TogglableItemsList };

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,21 @@
+import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tooltip/tooltip.tsx
+function Tooltip({ content, children, side, sideOffset, align, alignOffset, openDelay, closeDelay }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay,
+		closeDelay,
+		children: /* @__PURE__ */ jsxs(Tooltip$1, {
+			side,
+			sideOffset,
+			align,
+			alignOffset,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: content })]
+		})
+	});
+}
+//#endregion
+export { Tooltip as default };