@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/lottie-animations/verification-in-progress/verification-in-progress.js

@@ -0,0 +1,19 @@
+import { LottieAnimationContainer } from "../../lottie-animation-container/lottie-animation-container.js";
+import verification_in_progress_default from "../animation-data/verification-in-progress.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/lottie-animations/verification-in-progress/verification-in-progress.tsx
+function VerificationInProgress({ title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-4",
+		children: [/* @__PURE__ */ jsx(LottieAnimationContainer, {
+			animationData: verification_in_progress_default,
+			height: 100,
+			width: 100
+		}), title != null && title !== "" && /* @__PURE__ */ jsx("p", {
+			className: "text-center text-md text-muted-foreground",
+			children: title
+		})]
+	});
+}
+//#endregion
+export { VerificationInProgress };

package/dist/components/markdown-content/markdown-content.components.js

@@ -0,0 +1,114 @@
+import { Separator } from "../../core/separator.js";
+import { Typography } from "../typography/typography.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../core/table.js";
+import { Link } from "../link/link.js";
+import { Code } from "../../core/animate-ui/components/animate/code.js";
+import { isValidElement } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+//#region src/components/markdown-content/markdown-content.components.tsx
+/**
+* Fenced blocks with no language would render as an empty shell, because the library
+* `Code` only draws its body when `lang` is truthy.
+*/
+var FALLBACK_CODE_LANGUAGE = "text";
+var LANGUAGE_CLASS_PATTERN = /language-([\w-]+)/;
+/**
+* Flattens a React subtree back to its text content. Needed because the library `Code`
+* takes the source as a `code` string rather than as children.
+*/
+function toPlainText(node) {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(toPlainText).join("");
+	if (isValidElement(node)) return toPlainText(node.props.children);
+	return "";
+}
+/**
+* `id` is forwarded on every heading so the `rehype-slug` anchors stay linkable
+* (e.g. `/static/privacy-policy#data-retention`).
+*/
+function createHeading(variant, className) {
+	return function MarkdownHeading({ children, id }) {
+		return /* @__PURE__ */ jsx(Typography, {
+			variant,
+			id,
+			className,
+			children
+		});
+	};
+}
+/**
+* Maps markdown elements onto library primitives so rendered documents inherit the same
+* typography, tables and theming as the rest of the app.
+*
+* A plain factory rather than a hook: it takes everything it needs as arguments and holds
+* no state. Internal — not part of the package's public API.
+*/
+function createMarkdownComponents({ linkComponent, colorTheme } = {}) {
+	return {
+		h1: createHeading("h1", "mt-2"),
+		h2: createHeading("h2", "mt-4"),
+		h3: createHeading("h3", "mt-3"),
+		h4: createHeading("h4", "mt-2"),
+		h5: createHeading("h5", "mt-2"),
+		h6: createHeading("h6", "mt-2"),
+		p: ({ children }) => /* @__PURE__ */ jsx(Typography, {
+			variant: "body1",
+			children
+		}),
+		a: ({ children, href }) => {
+			if (!href) return /* @__PURE__ */ jsx(Fragment$1, { children });
+			return /* @__PURE__ */ jsx(Link, {
+				to: href,
+				underline: true,
+				linkComponent,
+				children
+			});
+		},
+		ul: ({ children }) => /* @__PURE__ */ jsx("ul", {
+			className: "list-disc space-y-1 pl-6 text-foreground",
+			children
+		}),
+		ol: ({ children }) => /* @__PURE__ */ jsx("ol", {
+			className: "list-decimal space-y-1 pl-6 text-foreground",
+			children
+		}),
+		li: ({ children }) => /* @__PURE__ */ jsx("li", {
+			className: "text-base leading-relaxed",
+			children
+		}),
+		table: ({ children }) => /* @__PURE__ */ jsx(Table, { children }),
+		thead: ({ children }) => /* @__PURE__ */ jsx(TableHeader, { children }),
+		tbody: ({ children }) => /* @__PURE__ */ jsx(TableBody, { children }),
+		tr: ({ children }) => /* @__PURE__ */ jsx(TableRow, { children }),
+		th: ({ children }) => /* @__PURE__ */ jsx(TableHead, { children }),
+		td: ({ children }) => /* @__PURE__ */ jsx(TableCell, { children }),
+		hr: () => /* @__PURE__ */ jsx(Separator, {}),
+		blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", {
+			className: "border-l-2 border-border pl-4 text-muted-foreground",
+			children
+		}),
+		pre: ({ children }) => {
+			const codeElement = isValidElement(children) ? children : null;
+			const language = LANGUAGE_CLASS_PATTERN.exec(codeElement?.props.className ?? "")?.[1] ?? FALLBACK_CODE_LANGUAGE;
+			return /* @__PURE__ */ jsx(Code, {
+				code: toPlainText(codeElement?.props.children ?? children).replace(/\n$/, ""),
+				lang: language,
+				theme: colorTheme
+			});
+		},
+		code: ({ children }) => /* @__PURE__ */ jsx("code", {
+			className: "rounded bg-muted px-1.5 py-0.5 font-mono text-sm",
+			children
+		}),
+		img: ({ src, alt, title }) => /* @__PURE__ */ jsx("img", {
+			src: typeof src === "string" ? src : void 0,
+			alt: alt ?? "",
+			title,
+			loading: "lazy",
+			className: "max-w-full rounded-md"
+		})
+	};
+}
+//#endregion
+export { createMarkdownComponents };

package/dist/components/markdown-content/markdown-content.js

@@ -0,0 +1,39 @@
+import { cn } from "../../utils/cn.js";
+import { createMarkdownComponents } from "./markdown-content.components.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSlug from "rehype-slug";
+//#region src/components/markdown-content/markdown-content.tsx
+var REMARK_PLUGINS = [remarkGfm];
+var REHYPE_PLUGINS = [rehypeSlug];
+/**
+* Renders markdown using this library's own primitives (`Typography`, `Code`, `Link`,
+* `Table`, `Separator`), so documents inherit the app's typography and theming.
+*
+* GitHub-flavoured markdown (tables, strikethrough, task lists, autolinks) via `remark-gfm`;
+* headings get stable slug `id`s via `rehype-slug`, so `#anchor` links into a document work.
+*
+* `rehype-raw` is deliberately absent: embedded raw HTML is never parsed, so there is no
+* injection surface and no sanitizer to keep in step. Content is expected to be trusted.
+*/
+var MarkdownContent = React$1.forwardRef(function MarkdownContent({ content, linkComponent, colorTheme, className }, ref) {
+	const components = React$1.useMemo(() => createMarkdownComponents({
+		linkComponent,
+		colorTheme
+	}), [linkComponent, colorTheme]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("flex flex-col gap-4", className),
+		children: /* @__PURE__ */ jsx(Markdown, {
+			remarkPlugins: REMARK_PLUGINS,
+			rehypePlugins: REHYPE_PLUGINS,
+			components,
+			children: content
+		})
+	});
+});
+MarkdownContent.displayName = "MarkdownContent";
+//#endregion
+export { MarkdownContent };

package/dist/components/menu/menu.js

@@ -0,0 +1,19 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/menu/menu.tsx
+function Menu({ children, trigger, align = "end", side = "bottom", sideOffset = 4, minWidth }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: trigger
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align,
+		side,
+		sideOffset,
+		className: "",
+		style: minWidth ? { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth } : void 0,
+		children
+	})] });
+}
+//#endregion
+export { Menu as default };

package/dist/components/monospace-content/monospace-content.js

@@ -0,0 +1,80 @@
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../core/animate-ui/components/buttons/copy.js";
+import { inputLabelClassName } from "../../core/field-label-row.js";
+import { Typography } from "../typography/typography.js";
+import { CopiableText } from "../copiable-text/copiable-text.js";
+import { Alert } from "../alert/alert.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff } from "lucide-react";
+//#region src/components/monospace-content/monospace-content.tsx
+/** Action sizes mirror `CopiableText`'s own map, so the unmask toggle matches the copy button. */
+var MONOSPACE_SIZE_STYLES = {
+	sm: {
+		title: "text-xs",
+		value: "text-xs",
+		action: "size-5",
+		gap: "gap-1.5"
+	},
+	default: {
+		title: "text-sm",
+		value: "text-sm",
+		action: "size-6",
+		gap: "gap-2"
+	},
+	lg: {
+		title: "text-base",
+		value: "text-base",
+		action: "size-7",
+		gap: "gap-2.5"
+	}
+};
+var MonospaceContent = React$1.forwardRef(function MonospaceContent({ title, value, color = "info", mask = false, allowUnmask = true, size = "default", className }, ref) {
+	const [revealed, setRevealed] = React$1.useState(false);
+	const canUnmask = mask && allowUnmask;
+	const masked = mask && !(canUnmask && revealed);
+	const sizeStyles = MONOSPACE_SIZE_STYLES[size];
+	const unmaskToggle = canUnmask ? /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-pressed": !masked,
+		onClick: () => setRevealed((prev) => !prev),
+		className: cn(buttonVariants({
+			variant: "outline",
+			size: "sm"
+		}), sizeStyles.action),
+		children: [masked ? /* @__PURE__ */ jsx(Eye, { "aria-hidden": true }) : /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: masked ? "Show value" : "Hide value"
+		})]
+	}) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex min-w-0 max-w-full flex-col overflow-hidden", sizeStyles.gap, className),
+		children: [title != null && (typeof title === "string" ? /* @__PURE__ */ jsx("div", {
+			className: cn(inputLabelClassName, sizeStyles.title, "title"),
+			children: title
+		}) : /* @__PURE__ */ jsx(Typography, {
+			variant: "subtitle2",
+			as: "div",
+			className: cn(inputLabelClassName, sizeStyles.title, "title"),
+			children: title
+		})), /* @__PURE__ */ jsx(Alert, {
+			variant: "soft",
+			color,
+			type: "info",
+			hideIcon: true,
+			size,
+			className: cn("min-w-0 max-w-full", "content"),
+			children: /* @__PURE__ */ jsx(CopiableText, {
+				text: value,
+				size,
+				actions: unmaskToggle,
+				alwaysShowActions: mask,
+				className: cn("w-full min-w-0 max-w-full font-mono tabular-nums", sizeStyles.value, masked && "select-none [-webkit-text-security:disc]")
+			})
+		})]
+	});
+});
+MonospaceContent.displayName = "MonospaceContent";
+//#endregion
+export { MonospaceContent };

package/dist/components/nav-bar/nav-bar-details-panel.js

@@ -0,0 +1,51 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+//#region src/components/nav-bar/nav-bar-details-panel.tsx
+function NavBarDetailsPanel({ item, openDetailsId, onClose, navBottomOffset, navWidth, navLeft }) {
+	if (typeof document === "undefined") return null;
+	return createPortal(/* @__PURE__ */ jsx(AnimatePresence, { children: openDetailsId && item?.details && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(motion.div, {
+		className: "fixed inset-0 z-40 bg-black/20",
+		style: { top: navBottomOffset },
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .15 },
+		onClick: onClose,
+		"aria-hidden": "true"
+	}, `navbar-backdrop-${openDetailsId}`), /* @__PURE__ */ jsx(motion.div, {
+		className: "fixed z-50 border-b border-header-border bg-background shadow-lg overflow-hidden",
+		style: {
+			top: navBottomOffset,
+			left: navLeft,
+			width: navWidth
+		},
+		initial: {
+			opacity: 0,
+			height: 0
+		},
+		animate: {
+			opacity: 1,
+			height: "auto"
+		},
+		exit: {
+			opacity: 0,
+			height: 0
+		},
+		transition: {
+			duration: .2,
+			ease: [
+				.25,
+				.1,
+				.25,
+				1
+			]
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto w-full px-4 lg:px-6 py-6",
+			children: item.details
+		})
+	}, `navbar-panel-${openDetailsId}`)] }) }), document.body);
+}
+//#endregion
+export { NavBarDetailsPanel };

package/dist/components/nav-bar/nav-bar-mobile-menu.js

@@ -0,0 +1,105 @@
+import { cn } from "../../utils/cn.js";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../core/animate-ui/components/radix/sheet.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region src/components/nav-bar/nav-bar-mobile-menu.tsx
+function NavBarMobileMenu({ items, activeId, onItemClick, open, onOpenChange, linkComponent, title, colorClasses }) {
+	const [expandedId, setExpandedId] = React$1.useState(null);
+	React$1.useEffect(() => {
+		if (!open) setExpandedId(null);
+	}, [open]);
+	const handleItemClick = (item) => {
+		if (item.details) {
+			setExpandedId(expandedId === item.id ? null : item.id);
+			return;
+		}
+		onItemClick(item);
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "left",
+			className: "w-[18rem] p-0",
+			showCloseButton: true,
+			children: [title && /* @__PURE__ */ jsx(SheetHeader, {
+				className: "px-4 pt-4 pb-2",
+				children: /* @__PURE__ */ jsx(SheetTitle, { children: title })
+			}), /* @__PURE__ */ jsx("nav", {
+				className: "flex flex-col py-2",
+				"aria-label": "Mobile navigation",
+				children: items.map((item) => {
+					const isActive = activeId === item.id;
+					const isExpanded = expandedId === item.id;
+					return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(MobileMenuItemTrigger, {
+						item,
+						isActive,
+						isExpanded,
+						onClick: () => handleItemClick(item),
+						linkComponent,
+						colorClasses
+					}), item.details && isExpanded && /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-3 border-b border-border/50 bg-muted/30 overflow-x-auto text-sm",
+						children: item.details
+					})] }, item.id);
+				})
+			})]
+		})
+	});
+}
+function MobileMenuItemTrigger({ item, isActive, isExpanded, onClick, linkComponent, colorClasses }) {
+	const classes = cn("flex items-center gap-2 min-w-0 w-full px-4 h-11 text-sm font-medium", "text-foreground transition-colors", colorClasses ? colorClasses.hoverBgClass : "hover:bg-foreground/5", isActive && colorClasses && `${colorClasses.textClass} ${colorClasses.bgClass}`, item.disabled && "opacity-50 pointer-events-none");
+	const activeStyle = isActive && colorClasses?.textStyle ? {
+		...colorClasses.textStyle,
+		...colorClasses.bgStyle
+	} : void 0;
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		item.icon && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			children: item.icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "truncate flex-1 text-left",
+			children: item.label
+		}),
+		item.details && /* @__PURE__ */ jsx(ChevronDown, {
+			className: cn("size-4 shrink-0 text-foreground/40 transition-transform duration-200", isExpanded && "rotate-180"),
+			"aria-hidden": "true"
+		})
+	] });
+	if (item.details) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classes,
+		style: activeStyle,
+		onClick,
+		"aria-expanded": isExpanded,
+		disabled: item.disabled,
+		children: content
+	});
+	if (item.href && linkComponent) return /* @__PURE__ */ jsx(linkComponent, {
+		to: item.href,
+		className: classes,
+		style: activeStyle,
+		onClick,
+		children: content
+	});
+	if (item.href) return /* @__PURE__ */ jsx("a", {
+		href: item.href,
+		className: classes,
+		style: activeStyle,
+		onClick,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: classes,
+		style: activeStyle,
+		onClick,
+		disabled: item.disabled,
+		children: content
+	});
+}
+//#endregion
+export { NavBarMobileMenu };