@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/common/app-logo/logo-config.js

@@ -0,0 +1,297 @@
+import espressif_with_text_default from "../../assets/logos/espressif/espressif-with-text.js";
+import espressif_with_text_dm_default from "../../assets/logos/espressif/espressif-with-text-dm.js";
+import espressif_no_text_default from "../../assets/logos/espressif/espressif-no-text.js";
+import insights_with_text_default from "../../assets/logos/insights/insights-with-text.js";
+import insights_with_text_dm_default from "../../assets/logos/insights/insights-with-text-dm.js";
+import insights_no_text_default from "../../assets/logos/insights/insights-no-text.js";
+import launchpad_with_text_default from "../../assets/logos/launchpad/launchpad-with-text.js";
+import launchpad_with_text_dm_default from "../../assets/logos/launchpad/launchpad-with-text-dm.js";
+import launchpad_no_text_default from "../../assets/logos/launchpad/launchpad-no-text.js";
+import launchpad_no_text_dm_default from "../../assets/logos/launchpad/launchpad-no-text-dm.js";
+import private_agents_with_text_default from "../../assets/logos/private-agents/private-agents-with-text.js";
+import private_agents_with_text_dm_default from "../../assets/logos/private-agents/private-agents-with-text-dm.js";
+import private_agents_no_text_default from "../../assets/logos/private-agents/private-agents-no-text.js";
+import rainmaker_with_text_default from "../../assets/logos/rainmaker/rainmaker-with-text.js";
+import rainmaker_with_text_dm_default from "../../assets/logos/rainmaker/rainmaker-with-text-dm.js";
+import rainmaker_no_text_default from "../../assets/logos/rainmaker/rainmaker-no-text.js";
+import rainmaker_classic_with_text_default from "../../assets/logos/rainmaker-classic/rainmaker-classic-with-text.js";
+import rainmaker_classic_with_text_dm_default from "../../assets/logos/rainmaker-classic/rainmaker-classic-with-text-dm.js";
+import rainmaker_classic_no_text_default from "../../assets/logos/rainmaker-classic/rainmaker-classic-no-text.js";
+import rainmaker_classic_no_text_dm_default from "../../assets/logos/rainmaker-classic/rainmaker-classic-no-text-dm.js";
+import rainmaker_neo_with_text_default from "../../assets/logos/rainmaker-neo/rainmaker-neo-with-text.js";
+import rainmaker_neo_with_text_dm_default from "../../assets/logos/rainmaker-neo/rainmaker-neo-with-text-dm.js";
+import rainmaker_neo_no_text_default from "../../assets/logos/rainmaker-neo/rainmaker-neo-no-text.js";
+import ui_components_with_text_default from "../../assets/logos/ui-components/ui-components-with-text.js";
+import ui_components_with_text_dm_default from "../../assets/logos/ui-components/ui-components-with-text-dm.js";
+import ui_components_no_text_default from "../../assets/logos/ui-components/ui-components-no-text.js";
+import zerocode_with_text_default from "../../assets/logos/zerocode/zerocode-with-text.js";
+import zerocode_with_text_dm_default from "../../assets/logos/zerocode/zerocode-with-text-dm.js";
+import zerocode_no_text_default from "../../assets/logos/zerocode/zerocode-no-text.js";
+import zerocode_ai_with_text_default from "../../assets/logos/zerocode-ai/zerocode-ai-with-text.js";
+import zerocode_ai_with_text_dm_default from "../../assets/logos/zerocode-ai/zerocode-ai-with-text-dm.js";
+import zerocode_ai_no_text_default from "../../assets/logos/zerocode-ai/zerocode-ai-no-text.js";
+//#region src/common/app-logo/logo-config.ts
+var logoConfig = {
+	espressif: {
+		light: {
+			full: {
+				src: espressif_with_text_default,
+				width: 116.84,
+				height: 21.04
+			},
+			minimal: {
+				src: espressif_no_text_default,
+				width: 21.4,
+				height: 21
+			}
+		},
+		dark: {
+			full: {
+				src: espressif_with_text_dm_default,
+				width: 116.84,
+				height: 21
+			},
+			minimal: {
+				src: espressif_no_text_default,
+				width: 21.4,
+				height: 21
+			}
+		}
+	},
+	insights: {
+		light: {
+			full: {
+				src: insights_with_text_default,
+				width: 690.62,
+				height: 130.7
+			},
+			minimal: {
+				src: insights_no_text_default,
+				width: 125.22,
+				height: 125.22
+			}
+		},
+		dark: {
+			full: {
+				src: insights_with_text_dm_default,
+				width: 685.25,
+				height: 125.22
+			},
+			minimal: {
+				src: insights_no_text_default,
+				width: 125.22,
+				height: 125.22
+			}
+		}
+	},
+	launchpad: {
+		light: {
+			full: {
+				src: launchpad_with_text_default,
+				width: 319.42,
+				height: 46.05
+			},
+			minimal: {
+				src: launchpad_no_text_default,
+				width: 41.22,
+				height: 40.89
+			}
+		},
+		dark: {
+			full: {
+				src: launchpad_with_text_dm_default,
+				width: 319.42,
+				height: 40.89
+			},
+			minimal: {
+				src: launchpad_no_text_dm_default,
+				width: 41.22,
+				height: 40.89
+			}
+		}
+	},
+	"private-agents": {
+		light: {
+			full: {
+				src: private_agents_with_text_default,
+				width: 2244.36,
+				height: 342.3
+			},
+			minimal: {
+				src: private_agents_no_text_default,
+				width: 278.63,
+				height: 342.3
+			}
+		},
+		dark: {
+			full: {
+				src: private_agents_with_text_dm_default,
+				width: 2244.36,
+				height: 342.3
+			},
+			minimal: {
+				src: private_agents_no_text_default,
+				width: 278.63,
+				height: 342.3
+			}
+		}
+	},
+	rainmaker: {
+		light: {
+			full: {
+				src: rainmaker_with_text_default,
+				width: 367.31,
+				height: 49.08
+			},
+			minimal: {
+				src: rainmaker_no_text_default,
+				width: 512,
+				height: 420.01
+			}
+		},
+		dark: {
+			full: {
+				src: rainmaker_with_text_dm_default,
+				width: 367.31,
+				height: 49.08
+			},
+			minimal: {
+				src: rainmaker_no_text_default,
+				width: 512,
+				height: 420.01
+			}
+		}
+	},
+	"rainmaker-classic": {
+		light: {
+			full: {
+				src: rainmaker_classic_with_text_default,
+				width: 1053.8,
+				height: 175.6
+			},
+			minimal: {
+				src: rainmaker_classic_no_text_default,
+				width: 455.1,
+				height: 459.1
+			}
+		},
+		dark: {
+			full: {
+				src: rainmaker_classic_with_text_dm_default,
+				width: 1053.8,
+				height: 175.6
+			},
+			minimal: {
+				src: rainmaker_classic_no_text_dm_default,
+				width: 455.1,
+				height: 459.1
+			}
+		}
+	},
+	"rainmaker-neo": {
+		light: {
+			full: {
+				src: rainmaker_neo_with_text_default,
+				width: 1053.8,
+				height: 175.6
+			},
+			minimal: {
+				src: rainmaker_neo_no_text_default,
+				width: 455.1,
+				height: 459.1
+			}
+		},
+		dark: {
+			full: {
+				src: rainmaker_neo_with_text_dm_default,
+				width: 1053.7,
+				height: 175.7
+			},
+			minimal: {
+				src: rainmaker_neo_no_text_default,
+				width: 455.1,
+				height: 459.1
+			}
+		}
+	},
+	"ui-components": {
+		light: {
+			full: {
+				src: ui_components_with_text_default,
+				width: 2320.33,
+				height: 342.3
+			},
+			minimal: {
+				src: ui_components_no_text_default,
+				width: 267.95,
+				height: 320
+			}
+		},
+		dark: {
+			full: {
+				src: ui_components_with_text_dm_default,
+				width: 2297.02,
+				height: 320
+			},
+			minimal: {
+				src: ui_components_no_text_default,
+				width: 267.95,
+				height: 320
+			}
+		}
+	},
+	zerocode: {
+		light: {
+			full: {
+				src: zerocode_with_text_default,
+				width: 565,
+				height: 54.4
+			},
+			minimal: {
+				src: zerocode_no_text_default,
+				width: 63.4,
+				height: 54.4
+			}
+		},
+		dark: {
+			full: {
+				src: zerocode_with_text_dm_default,
+				width: 565,
+				height: 54.4
+			},
+			minimal: {
+				src: zerocode_no_text_default,
+				width: 63.4,
+				height: 54.4
+			}
+		}
+	},
+	"zerocode-ai": {
+		light: {
+			full: {
+				src: zerocode_ai_with_text_default,
+				width: 592.8,
+				height: 78.4
+			},
+			minimal: {
+				src: zerocode_ai_no_text_default,
+				width: 59,
+				height: 52.1
+			}
+		},
+		dark: {
+			full: {
+				src: zerocode_ai_with_text_dm_default,
+				width: 592.8,
+				height: 78.4
+			},
+			minimal: {
+				src: zerocode_ai_no_text_default,
+				width: 59,
+				height: 52.1
+			}
+		}
+	}
+};
+//#endregion
+export { logoConfig };

package/dist/common/copyright-card/copyright-card.js

@@ -0,0 +1,39 @@
+import { Card, CardContent } from "../../core/card.js";
+import Tooltip from "../../components/tooltip/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/common/copyright-card/copyright-card.tsx
+function CopyrightCard({ text, logoSrc, logoAlt = "Logo", href, logoOnly = false }) {
+	const handleClick = () => {
+		if (href) window.open(href, "_blank", "noopener,noreferrer");
+	};
+	const copyrightText = /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1.5 text-sm text-muted-foreground",
+		children: /* @__PURE__ */ jsx("span", { children: text })
+	});
+	if (logoOnly && logoSrc) return /* @__PURE__ */ jsx(Tooltip, {
+		content: copyrightText,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "inline-block cursor-pointer",
+			onClick: handleClick,
+			children: /* @__PURE__ */ jsx("img", {
+				src: logoSrc,
+				alt: logoAlt,
+				className: "h-5 w-5 object-contain"
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(Card, {
+		className: "border p-2 cursor-pointer hover:bg-accent/50 transition-colors",
+		onClick: handleClick,
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "flex items-center gap-4 p-0",
+			children: [logoSrc && /* @__PURE__ */ jsx("img", {
+				src: logoSrc,
+				alt: logoAlt,
+				className: "h-5 w-5 object-contain"
+			}), copyrightText]
+		})
+	});
+}
+//#endregion
+export { CopyrightCard as default };

package/dist/common/footer-card/footer-card.js

@@ -0,0 +1,22 @@
+import { Link } from "../../components/link/link.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/common/footer-card/footer-card.tsx
+function FooterCard() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-xs",
+		children: [
+			"© ",
+			(/* @__PURE__ */ new Date()).getFullYear(),
+			" ",
+			/* @__PURE__ */ jsx(Link, {
+				to: "https://www.espressif.com/",
+				underline: true,
+				className: "h-auto hover:bg-transparent p-0 text-xs",
+				children: "Espressif Systems"
+			}),
+			". All rights reserved."
+		]
+	});
+}
+//#endregion
+export { FooterCard as default };

package/dist/common/index.js

@@ -1,8 +1,8 @@
-export { CopyrightCard, PageLoader } from '../chunk-CDHBLANU.js';
-export { AnimatedRainmakerLogo } from '../chunk-LUESSJAF.js';
-import '../chunk-ALCWXFUC.js';
-export { AppLogo, FooterCard, MyAccountMenu, ProfileCard } from '../chunk-TMORRNEB.js';
-import '../chunk-Z4776NRY.js';
-import '../chunk-XNLCVHBC.js';
-import '../chunk-VU4CZ76T.js';
-import '../chunk-TRTQSARU.js';
+import { AnimatedRainmakerLogo } from "./animated-rainmaker-logo/animated-rainmaker-logo.js";
+import AppLogo from "./app-logo/app-logo.js";
+import ProfileCard from "./profile-card/profile-card.js";
+import CopyrightCard from "./copyright-card/copyright-card.js";
+import PageLoader from "./page-loader/page-loader.js";
+import MyAccountMenu from "./my-account-menu/my-account-menu.js";
+import FooterCard from "./footer-card/footer-card.js";
+export { AnimatedRainmakerLogo, AppLogo, CopyrightCard, FooterCard, MyAccountMenu, PageLoader, ProfileCard };

package/dist/common/my-account-menu/my-account-menu.js

@@ -0,0 +1,32 @@
+import Avatar from "../../components/avatar/avatar.js";
+import List from "../../components/list/list.js";
+import { Button } from "../../components/button/button.js";
+import Menu from "../../components/menu/menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/common/my-account-menu/my-account-menu.tsx
+function MyAccountMenu({ name, email, imageUrl, minWidth = "200px", menuItems, badgeColor, badgeIcon }) {
+	return /* @__PURE__ */ jsx(Menu, {
+		trigger: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "rounded-full",
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				name: name || email,
+				imageUrl,
+				badgeColor,
+				badgeIcon
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "My Account"
+			})]
+		}),
+		align: "end",
+		minWidth,
+		children: /* @__PURE__ */ jsx(List, {
+			items: menuItems,
+			role: "dropdown-list"
+		})
+	});
+}
+//#endregion
+export { MyAccountMenu as default };

package/dist/common/page-loader/page-loader.js

@@ -0,0 +1,21 @@
+import { ProgressBar } from "../../components/progress-bar/progress-bar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/common/page-loader/page-loader.tsx
+/**
+* Full-screen loading indicator
+* Used as defaultPendingComponent for route transitions
+*/
+function PageLoader() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-screen items-center justify-center bg-background",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col items-center gap-4 w-full max-w-sm",
+			children: /* @__PURE__ */ jsx(ProgressBar, {
+				showFakeProgress: true,
+				className: "w-full"
+			})
+		})
+	});
+}
+//#endregion
+export { PageLoader as default };

package/dist/common/profile-card/profile-card.js

@@ -0,0 +1,26 @@
+import Avatar from "../../components/avatar/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/common/profile-card/profile-card.tsx
+function ProfileCard({ name, email, imageUrl }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-3",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "shrink-0",
+			children: /* @__PURE__ */ jsx(Avatar, {
+				name: name || email,
+				imageUrl: imageUrl || ""
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 min-w-0 flex flex-col gap-1",
+			children: [name && /* @__PURE__ */ jsx("div", {
+				className: "text-sm font-medium leading-5 text-foreground truncate",
+				children: name
+			}), email && /* @__PURE__ */ jsx("div", {
+				className: "text-xs leading-4 text-muted-foreground truncate",
+				children: email
+			})]
+		})]
+	});
+}
+//#endregion
+export { ProfileCard as default };

package/dist/components/accordion/accordion.js

@@ -0,0 +1,52 @@
+import { cn } from "../../utils/cn.js";
+import { Accordion as Accordion$1, AccordionContent, AccordionItem, AccordionTrigger } from "../../core/animate-ui/components/radix/accordion.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/accordion/accordion.tsx
+var sizeStyles = {
+	sm: {
+		trigger: "py-2 px-3",
+		content: "px-3 pb-2",
+		text: "text-sm font-medium tracking-tight"
+	},
+	default: {
+		trigger: "py-3 px-4",
+		content: "px-4 pb-3",
+		text: "text-base font-medium tracking-tight"
+	},
+	lg: {
+		trigger: "py-4 px-5",
+		content: "px-5 pb-4",
+		text: "text-lg font-medium tracking-tight"
+	}
+};
+function Accordion({ items, size = "default", allowMultiple = false, defaultValue, className, triggerClassName, contentClassName }) {
+	const styles = sizeStyles[size];
+	const resolvedDefault = allowMultiple ? Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : void 0 : typeof defaultValue === "string" ? defaultValue : Array.isArray(defaultValue) ? defaultValue[0] : void 0;
+	return /* @__PURE__ */ jsx(Accordion$1, {
+		type: allowMultiple ? "multiple" : "single",
+		collapsible: true,
+		defaultValue: resolvedDefault,
+		className: cn("w-full", className),
+		children: items.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
+			value: item.id,
+			children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+				className: cn(styles.trigger, triggerClassName),
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-2",
+					children: [item.icon, typeof item.title === "string" ? /* @__PURE__ */ jsx("span", {
+						className: styles.text,
+						children: item.title
+					}) : item.title]
+				})
+			}), /* @__PURE__ */ jsx(AccordionContent, {
+				className: cn(styles.content, contentClassName),
+				children: typeof item.content === "string" ? /* @__PURE__ */ jsx("span", {
+					className: styles.text,
+					children: item.content
+				}) : item.content
+			})]
+		}, item.id))
+	});
+}
+//#endregion
+export { Accordion };

package/dist/components/advanced-search-box/advanced-search-box.js

@@ -0,0 +1,106 @@
+import { cn } from "../../utils/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import { Button } from "../button/button.js";
+import { outlineSearchShellClasses, searchFieldContainerSizeClasses, searchFieldIconSizeClasses, searchFieldInputTextClasses } from "../search-field-shell.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, Search, X } from "lucide-react";
+//#region src/components/advanced-search-box/advanced-search-box.tsx
+var DEBOUNCE_MS = 500;
+function AdvancedSearchBox({ searchMeta, onSearch, size = "default", className, searchOnEnter = false }) {
+	const [selectedId, setSelectedId] = useState(searchMeta[0].id);
+	const [value, setValue] = useState("");
+	const onSearchRef = useRef(onSearch);
+	onSearchRef.current = onSearch;
+	const selectedMeta = searchMeta.find((m) => m.id === selectedId);
+	useEffect(() => {
+		if (searchOnEnter) return;
+		const timer = setTimeout(() => {
+			onSearchRef.current({
+				id: selectedId,
+				value: value.trim()
+			});
+		}, DEBOUNCE_MS);
+		return () => clearTimeout(timer);
+	}, [
+		value,
+		selectedId,
+		searchOnEnter
+	]);
+	const handleClear = useCallback(() => {
+		setValue("");
+		onSearchRef.current({
+			id: selectedId,
+			value: ""
+		});
+	}, [selectedId]);
+	const handleFieldChange = useCallback((newId) => {
+		setSelectedId(newId);
+		if (searchOnEnter) return;
+		onSearchRef.current({
+			id: newId,
+			value: value.trim()
+		});
+	}, [value, searchOnEnter]);
+	const handleKeyDown = useCallback((e) => {
+		if (!searchOnEnter) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			onSearchRef.current({
+				id: selectedId,
+				value: value.trim()
+			});
+		}
+	}, [
+		searchOnEnter,
+		selectedId,
+		value
+	]);
+	const iconSize = searchFieldIconSizeClasses[size];
+	const fieldSelector = /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size,
+			fullWidth: false,
+			endIcon: /* @__PURE__ */ jsx(ChevronDown, { className: iconSize }),
+			className: "text-foreground h-auto px-0 py-0 shrink-0",
+			children: selectedMeta.label
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "start",
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value: selectedId,
+			onValueChange: handleFieldChange,
+			children: searchMeta.map((meta) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: meta.id,
+				children: meta.label
+			}, meta.id))
+		})
+	})] });
+	const clearButton = value ? /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		fullWidth: false,
+		onClick: handleClear,
+		startIcon: /* @__PURE__ */ jsx(X, { className: iconSize }),
+		className: "h-auto w-auto p-0 m-0 shrink-0"
+	}) : /* @__PURE__ */ jsx(Search, { className: cn(iconSize, "text-muted-foreground shrink-0") });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(outlineSearchShellClasses, "flex w-full items-center gap-2 rounded-md", "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 ring-offset-background", searchFieldContainerSizeClasses[size], className),
+		children: [
+			fieldSelector,
+			/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border shrink-0" }),
+			/* @__PURE__ */ jsx("input", {
+				type: selectedMeta.type,
+				value,
+				onChange: (e) => setValue(e.target.value),
+				onKeyDown: handleKeyDown,
+				placeholder: selectedMeta.placeholder,
+				className: cn("flex-1 min-w-0 bg-transparent outline-none placeholder:text-muted-foreground", searchFieldInputTextClasses[size])
+			}),
+			clearButton
+		]
+	});
+}
+//#endregion
+export { AdvancedSearchBox as default };