@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/core/animate-ui/primitives/animate/code-block.js

@@ -0,0 +1,131 @@
+"use client";
+import { useIsInView } from "../../../hooks/use-is-in-view.js";
+import { getHighlighter, normalizeLang } from "./shiki-highlighter.js";
+import { escapeHtml } from "./escape-html.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/core/animate-ui/primitives/animate/code-block.tsx
+function CodeBlock({ ref, code, lang, theme = "light", themes = {
+	light: "everforest-light",
+	dark: "everforest-dark"
+}, writing = false, duration = 5e3, delay = 0, onDone, onWrite, scrollContainerRef, inView = false, inViewOnce = true, inViewMargin = "0px", ...props }) {
+	const { ref: localRef, isInView } = useIsInView(ref, {
+		inView,
+		inViewOnce,
+		inViewMargin
+	});
+	const [visibleCode, setVisibleCode] = React$1.useState("");
+	const [highlightedCode, setHighlightedCode] = React$1.useState("");
+	const [isDone, setIsDone] = React$1.useState(false);
+	React$1.useEffect(() => {
+		if (!visibleCode.length || !isInView) return;
+		const loadHighlightedCode = async () => {
+			const normalizedLang = normalizeLang(lang);
+			try {
+				setHighlightedCode((await getHighlighter()).codeToHtml(visibleCode, {
+					lang: normalizedLang,
+					themes,
+					defaultColor: theme
+				}));
+			} catch (e) {
+				console.warn(`[dashboard-ui-components] Falling back to plain text for lang="${lang}"; not in the curated Shiki bundle.`, e);
+				setHighlightedCode(`<pre><code>${escapeHtml(visibleCode)}</code></pre>`);
+			}
+		};
+		loadHighlightedCode();
+	}, [
+		lang,
+		themes,
+		writing,
+		isInView,
+		duration,
+		delay,
+		visibleCode,
+		theme
+	]);
+	React$1.useEffect(() => {
+		if (!writing) {
+			setVisibleCode(code);
+			onDone?.();
+			onWrite?.({
+				index: code.length,
+				length: code.length,
+				done: true
+			});
+			return;
+		}
+		if (!code.length || !isInView) return;
+		const characters = Array.from(code);
+		let index = 0;
+		const interval = duration / characters.length;
+		let intervalId;
+		const timeout = setTimeout(() => {
+			intervalId = setInterval(() => {
+				if (index < characters.length) {
+					setVisibleCode(() => {
+						const nextChar = characters.slice(0, index + 1).join("");
+						onWrite?.({
+							index: index + 1,
+							length: characters.length,
+							done: false
+						});
+						index += 1;
+						return nextChar;
+					});
+					localRef.current?.scrollTo({
+						top: localRef.current?.scrollHeight,
+						behavior: "smooth"
+					});
+				} else {
+					clearInterval(intervalId);
+					setIsDone(true);
+					onDone?.();
+					onWrite?.({
+						index: characters.length,
+						length: characters.length,
+						done: true
+					});
+				}
+			}, interval);
+		}, delay);
+		return () => {
+			clearTimeout(timeout);
+			clearInterval(intervalId);
+		};
+	}, [
+		code,
+		duration,
+		delay,
+		isInView,
+		writing,
+		onDone,
+		onWrite,
+		localRef
+	]);
+	React$1.useEffect(() => {
+		if (!writing || !isInView) return;
+		const el = scrollContainerRef?.current ?? localRef.current?.parentElement ?? localRef.current;
+		if (!el) return;
+		requestAnimationFrame(() => {
+			el.scrollTo({
+				top: el.scrollHeight,
+				behavior: "smooth"
+			});
+		});
+	}, [
+		highlightedCode,
+		writing,
+		isInView,
+		scrollContainerRef,
+		localRef
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: localRef,
+		"data-writing": writing ? "" : void 0,
+		"data-done": isDone ? "" : void 0,
+		dangerouslySetInnerHTML: { __html: highlightedCode },
+		...props
+	});
+}
+//#endregion
+export { CodeBlock };

package/dist/core/animate-ui/primitives/animate/escape-html.js

@@ -0,0 +1,7 @@
+//#region src/core/animate-ui/primitives/animate/escape-html.ts
+/** Minimal HTML escaping for the unhighlighted plain-text fallback. */
+function escapeHtml(input) {
+	return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+//#endregion
+export { escapeHtml };

package/dist/core/animate-ui/primitives/animate/shiki-highlighter.js

@@ -0,0 +1,64 @@
+//#region src/core/animate-ui/primitives/animate/shiki-highlighter.ts
+/** Alias table so common short names resolve to a bundled grammar. */
+var LANG_ALIASES = {
+	js: "javascript",
+	ts: "typescript",
+	sh: "bash",
+	shell: "bash",
+	zsh: "bash",
+	md: "markdown",
+	py: "python",
+	yml: "yaml",
+	"c++": "cpp",
+	"c#": "csharp",
+	docker: "dockerfile"
+};
+var highlighterPromise = null;
+/**
+* Lazily instantiates a singleton `HighlighterCore` with the curated
+* language + theme bundle. Called from `CodeBlock`'s effect so cost is
+* paid only when a code fence actually mounts.
+*/
+function getHighlighter() {
+	if (!highlighterPromise) highlighterPromise = (async () => {
+		const [{ createHighlighterCore }, { createOnigurumaEngine }] = await Promise.all([import("shiki/core"), import("shiki/engine/oniguruma")]);
+		return createHighlighterCore({
+			themes: [
+				import("shiki/themes/everforest-light.mjs"),
+				import("shiki/themes/everforest-dark.mjs"),
+				import("shiki/themes/github-light.mjs"),
+				import("shiki/themes/github-dark.mjs")
+			],
+			langs: [
+				import("shiki/langs/javascript.mjs"),
+				import("shiki/langs/typescript.mjs"),
+				import("shiki/langs/jsx.mjs"),
+				import("shiki/langs/tsx.mjs"),
+				import("shiki/langs/json.mjs"),
+				import("shiki/langs/yaml.mjs"),
+				import("shiki/langs/bash.mjs"),
+				import("shiki/langs/html.mjs"),
+				import("shiki/langs/css.mjs"),
+				import("shiki/langs/markdown.mjs"),
+				import("shiki/langs/python.mjs"),
+				import("shiki/langs/go.mjs"),
+				import("shiki/langs/rust.mjs"),
+				import("shiki/langs/c.mjs"),
+				import("shiki/langs/cpp.mjs"),
+				import("shiki/langs/csharp.mjs"),
+				import("shiki/langs/java.mjs"),
+				import("shiki/langs/sql.mjs"),
+				import("shiki/langs/xml.mjs"),
+				import("shiki/langs/dockerfile.mjs")
+			],
+			engine: createOnigurumaEngine(import("shiki/wasm"))
+		});
+	})();
+	return highlighterPromise;
+}
+/** Resolves common short-name aliases (`js` → `javascript`, `sh` → `bash`, …). */
+function normalizeLang(lang) {
+	return LANG_ALIASES[lang.toLowerCase()] ?? lang;
+}
+//#endregion
+export { getHighlighter, normalizeLang };

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

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { isMotionComponent, motion } from "motion/react";
+//#region src/core/animate-ui/primitives/animate/slot.tsx
+function mergeRefs(...refs) {
+	return (node) => {
+		refs.forEach((ref) => {
+			if (!ref) return;
+			if (typeof ref === "function") ref(node);
+			else ref.current = node;
+		});
+	};
+}
+function mergeProps(childProps, slotProps) {
+	const merged = {
+		...childProps,
+		...slotProps
+	};
+	if (childProps.className || slotProps.className) merged.className = cn(childProps.className, slotProps.className);
+	if (childProps.style || slotProps.style) merged.style = {
+		...childProps.style,
+		...slotProps.style
+	};
+	return merged;
+}
+function Slot({ children, ref, ...props }) {
+	const isAlreadyMotion = typeof children.type === "object" && children.type !== null && isMotionComponent(children.type);
+	const Base = React$1.useMemo(() => isAlreadyMotion ? children.type : motion.create(children.type), [isAlreadyMotion, children.type]);
+	if (!React$1.isValidElement(children)) return null;
+	const { ref: childRef, ...childProps } = children.props;
+	return /* @__PURE__ */ jsx(Base, {
+		...mergeProps(childProps, props),
+		ref: mergeRefs(childRef, ref)
+	});
+}
+//#endregion
+export { Slot };

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

@@ -0,0 +1,202 @@
+"use client";
+import { getStrictContext } from "../../../utils/get-strict-context.js";
+import { Highlight, HighlightItem } from "../effects/highlight.js";
+import { Slot } from "./slot.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { motion } from "motion/react";
+//#region src/core/animate-ui/primitives/animate/tabs.tsx
+var [TabsProvider, useTabs] = getStrictContext("TabsContext");
+function Tabs({ defaultValue, value, onValueChange, children, ...props }) {
+	const [activeValue, setActiveValue] = React$1.useState(defaultValue);
+	const triggersRef = React$1.useRef(/* @__PURE__ */ new Map());
+	const initialSet = React$1.useRef(false);
+	const isControlled = value !== void 0;
+	React$1.useEffect(() => {
+		if (!isControlled && activeValue === void 0 && triggersRef.current.size > 0 && !initialSet.current) {
+			const firstTab = triggersRef.current.keys().next().value;
+			if (firstTab !== void 0) {
+				setActiveValue(firstTab);
+				initialSet.current = true;
+			}
+		}
+	}, [activeValue, isControlled]);
+	const registerTrigger = React$1.useCallback((val, node) => {
+		if (node) {
+			triggersRef.current.set(val, node);
+			if (!isControlled && activeValue === void 0 && !initialSet.current) {
+				setActiveValue(val);
+				initialSet.current = true;
+			}
+		} else triggersRef.current.delete(val);
+	}, [activeValue, isControlled]);
+	const handleValueChange = React$1.useCallback((val) => {
+		if (!isControlled) setActiveValue(val);
+		else onValueChange?.(val);
+	}, [isControlled, onValueChange]);
+	return /* @__PURE__ */ jsx(TabsProvider, {
+		value: {
+			activeValue: value ?? activeValue,
+			handleValueChange,
+			registerTrigger
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "tabs",
+			...props,
+			children
+		})
+	});
+}
+function TabsHighlight({ transition = {
+	type: "spring",
+	stiffness: 200,
+	damping: 25
+}, ...props }) {
+	const { activeValue } = useTabs();
+	return /* @__PURE__ */ jsx(Highlight, {
+		"data-slot": "tabs-highlight",
+		controlledItems: true,
+		value: activeValue,
+		transition,
+		click: false,
+		...props
+	});
+}
+function TabsList(props) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "tablist",
+		"data-slot": "tabs-list",
+		...props
+	});
+}
+function TabsHighlightItem(props) {
+	return /* @__PURE__ */ jsx(HighlightItem, {
+		"data-slot": "tabs-highlight-item",
+		...props
+	});
+}
+function TabsTrigger({ ref, value, asChild = false, ...props }) {
+	const { activeValue, handleValueChange, registerTrigger } = useTabs();
+	const localRef = React$1.useRef(null);
+	React$1.useImperativeHandle(ref, () => localRef.current);
+	React$1.useEffect(() => {
+		registerTrigger(value, localRef.current);
+		return () => registerTrigger(value, null);
+	}, [value, registerTrigger]);
+	return /* @__PURE__ */ jsx(asChild ? Slot : motion.button, {
+		ref: localRef,
+		"data-slot": "tabs-trigger",
+		role: "tab",
+		onClick: () => handleValueChange(value),
+		"data-state": activeValue === value ? "active" : "inactive",
+		...props
+	});
+}
+function TabsContents({ children, transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 30,
+	bounce: 0,
+	restDelta: .01
+}, ...props }) {
+	const { activeValue } = useTabs();
+	const childrenArray = React$1.Children.toArray(children);
+	const activeIndex = childrenArray.findIndex((child) => React$1.isValidElement(child) && typeof child.props === "object" && child.props !== null && "value" in child.props && child.props.value === activeValue);
+	const containerRef = React$1.useRef(null);
+	const itemRefs = React$1.useRef([]);
+	const [height, setHeight] = React$1.useState(0);
+	const roRef = React$1.useRef(null);
+	const measure = React$1.useCallback((index) => {
+		const pane = itemRefs.current[index];
+		const container = containerRef.current;
+		if (!pane || !container) return 0;
+		const base = pane.getBoundingClientRect().height || 0;
+		const cs = getComputedStyle(container);
+		const isBorderBox = cs.boxSizing === "border-box";
+		const paddingY = (parseFloat(cs.paddingTop || "0") || 0) + (parseFloat(cs.paddingBottom || "0") || 0);
+		const borderY = (parseFloat(cs.borderTopWidth || "0") || 0) + (parseFloat(cs.borderBottomWidth || "0") || 0);
+		let total = base + (isBorderBox ? paddingY + borderY : 0);
+		const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+		total = Math.ceil(total * dpr) / dpr;
+		return total;
+	}, []);
+	React$1.useEffect(() => {
+		if (roRef.current) {
+			roRef.current.disconnect();
+			roRef.current = null;
+		}
+		const pane = itemRefs.current[activeIndex];
+		const container = containerRef.current;
+		if (!pane || !container) return;
+		setHeight(measure(activeIndex));
+		const ro = new ResizeObserver(() => {
+			const next = measure(activeIndex);
+			requestAnimationFrame(() => setHeight(next));
+		});
+		ro.observe(pane);
+		ro.observe(container);
+		roRef.current = ro;
+		return () => {
+			ro.disconnect();
+			roRef.current = null;
+		};
+	}, [
+		activeIndex,
+		childrenArray.length,
+		measure
+	]);
+	React$1.useLayoutEffect(() => {
+		if (height === 0 && activeIndex >= 0) {
+			const next = measure(activeIndex);
+			if (next !== 0) setHeight(next);
+		}
+	}, [
+		activeIndex,
+		height,
+		measure
+	]);
+	return /* @__PURE__ */ jsx(motion.div, {
+		ref: containerRef,
+		"data-slot": "tabs-contents",
+		style: { overflow: "hidden" },
+		animate: { height },
+		transition,
+		...props,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			className: "flex -mx-2",
+			animate: { x: activeIndex * -100 + "%" },
+			transition,
+			children: childrenArray.map((child, index) => /* @__PURE__ */ jsx("div", {
+				ref: (el) => {
+					itemRefs.current[index] = el;
+				},
+				className: "w-full shrink-0 px-2 h-full",
+				children: child
+			}, index))
+		})
+	});
+}
+function TabsContent({ value, style, asChild = false, ...props }) {
+	const { activeValue } = useTabs();
+	const isActive = activeValue === value;
+	return /* @__PURE__ */ jsx(asChild ? Slot : motion.div, {
+		role: "tabpanel",
+		"data-slot": "tabs-content",
+		inert: !isActive,
+		style: {
+			overflow: "hidden",
+			...style
+		},
+		initial: { filter: "blur(0px)" },
+		animate: { filter: isActive ? "blur(0px)" : "blur(4px)" },
+		exit: { filter: "blur(0px)" },
+		transition: {
+			type: "spring",
+			stiffness: 200,
+			damping: 25
+		},
+		...props
+	});
+}
+//#endregion
+export { Tabs, TabsContent, TabsContents, TabsHighlight, TabsHighlightItem, TabsList, TabsTrigger, useTabs };