@espressif/dashboard-ui-components 1.10.0 → 1.11.1

package/dist/components/selectable-card-list/selectable-card-list.js

@@ -0,0 +1,34 @@
+"use client";
+import { CheckboxCardList } from "./checkbox-card-list.js";
+import { RadioCardList } from "./radio-card-list.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/selectable-card-list/selectable-card-list.tsx
+function SelectableCardList(props) {
+	const { data, size = "default", className, name, form, element = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy } = props;
+	if (props.allowMultiple === true) return /* @__PURE__ */ jsx(CheckboxCardList, {
+		data,
+		value: props.value,
+		onChange: props.onChange,
+		size,
+		className,
+		ariaLabel,
+		ariaLabelledBy,
+		name,
+		form,
+		element
+	});
+	return /* @__PURE__ */ jsx(RadioCardList, {
+		data,
+		value: props.value,
+		onChange: props.onChange,
+		size,
+		className,
+		ariaLabel,
+		ariaLabelledBy,
+		name,
+		form,
+		element
+	});
+}
+//#endregion
+export { SelectableCardList };

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,344 @@
+import { cn } from "../../utils/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../core/animate-ui/components/radix/dropdown-menu.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../core/collapsible.js";
+import Tooltip from "../tooltip/tooltip.js";
+import { Button } from "../button/button.js";
+import { Sidebar as Sidebar$1, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import { isPathPrefixOf } from "../../utils/path-match.js";
+import { isSidebarGroup } from "./types.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, Circle, CircleDot, X } from "lucide-react";
+//#region src/components/sidebar/sidebar.tsx
+/** Overrides SidebarGroup default `p-2` vertical padding so group height matches the trigger row */
+var sidebarGroupClassName = "py-0 px-2";
+/**
+* Single source of truth for nav icon size (16x16) — group icons, item icons, chevrons
+* and `endAction` icons alike, in every sidebar state.
+*
+* Applied to the *row* rather than to each icon, and with a descendant (`&_svg`) rather
+* than a child (`&>svg`) selector: rows render through `asChild` with a
+* `<span className="contents">` inside, so icons sit at grandchild depth where the
+* primitives' own `[&>svg]:size-4` never matches. The `:not([class*='size-'])` guard
+* keeps a deliberate per-icon `size-*` override working — same idiom as `dropdown-menu`.
+*/
+var rowIconClass = "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0";
+/**
+* One type scale for every nav row. Set as an inline style, not a Tailwind class:
+* `SidebarMenuButton` is used with `asChild`, and both the highlight effect and
+* app-supplied `linkComponent`s drop a forwarded `style`, so it has to live on an
+* element this file owns. `--espd-sidebar-item-font-size` is the public override hook.
+*/
+var rowFontStyle = {
+	fontSize: "var(--espd-sidebar-item-font-size, 0.875rem)",
+	lineHeight: "1.25rem"
+};
+/** Group title in the collapsed-sidebar flyout — same scale as the rows by default. */
+var flyoutGroupLabelStyle = {
+	fontSize: "var(--espd-sidebar-flyout-group-label-font-size, 0.875rem)",
+	lineHeight: "1.25rem"
+};
+/**
+* Nav icon for a group or an item. Deliberately sets no size — that comes from the
+* row's {@link rowIconClass}. Items with no `icon` get a neutral placeholder glyph so
+* that a collapsed icon-only row still shows an icon; on the selected row that
+* placeholder becomes a filled `CircleDot` at full opacity, so the current page is
+* still identifiable in the collapsed sidebar where labels are hidden.
+*/
+function ItemIcon({ icon: Icon, active, className }) {
+	if (Icon) return /* @__PURE__ */ jsx(Icon, { className });
+	if (active) return /* @__PURE__ */ jsx(CircleDot, { className });
+	return /* @__PURE__ */ jsx(Circle, { className: cn("opacity-50", className) });
+}
+/**
+* Radix selects an item on Enter/Space by clicking the item element itself, which
+* never reaches the link inside it. Forward clicks that land on the row (keyboard
+* selection, or a pointer on the row's padding) to the link so they navigate too.
+*/
+function forwardRowClickToLink(e) {
+	if (e.target !== e.currentTarget) return;
+	e.currentTarget.firstElementChild?.click();
+}
+/**
+* Flyout menu items for a group. A click anywhere on a row calls onItemClick (capture
+* phase, since router links preventDefault their clicks and Radix then skips its own
+* select-and-close); onItemPointerDown fires on a pointer press anywhere on the row.
+*/
+function GroupMenuItems({ group, isSelected, linkComponent: LinkComponent, onItemClick, onItemPointerDown }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs(DropdownMenuLabel, {
+			className: cn("flex items-center gap-2 px-3 py-2 font-normal text-muted-foreground", rowIconClass),
+			style: flyoutGroupLabelStyle,
+			children: [group.icon ? /* @__PURE__ */ jsx(ItemIcon, {
+				icon: group.icon,
+				className: "text-foreground"
+			}) : null, /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: group.label
+			})]
+		}),
+		/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+		group.items.map((item) => {
+			const active = isSelected(item.path);
+			return /* @__PURE__ */ jsx(DropdownMenuItem, {
+				className: active ? "bg-accent" : "",
+				style: rowFontStyle,
+				onPointerDown: onItemPointerDown,
+				onClickCapture: onItemClick,
+				onClick: forwardRowClickToLink,
+				children: /* @__PURE__ */ jsxs(LinkComponent, {
+					to: item.path,
+					className: "flex items-center gap-2 cursor-pointer w-full",
+					children: [/* @__PURE__ */ jsx(ItemIcon, {
+						icon: item.icon,
+						active
+					}), /* @__PURE__ */ jsx("span", {
+						className: active ? "font-semibold" : "font-medium",
+						children: item.label
+					})]
+				})
+			}, item.id);
+		})
+	] });
+}
+/**
+* Collapsed sidebar (icon-only): group rendered as a single icon with flyout Menu.
+* Uses controlled DropdownMenu so clicking an item closes the menu.
+*/
+function CollapsedSidebarGroup({ group, isSelected, linkComponent: LinkComponent }) {
+	const [open, setOpen] = useState(false);
+	const pickedWithPointer = useRef(false);
+	return /* @__PURE__ */ jsx(SidebarGroup, {
+		className: sidebarGroupClassName,
+		children: /* @__PURE__ */ jsx(SidebarMenu, {
+			className: "w-auto",
+			children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, {
+				open,
+				onOpenChange: (next) => {
+					if (next) pickedWithPointer.current = false;
+					setOpen(next);
+				},
+				children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+						size: "sm",
+						tooltip: group.label,
+						className: rowIconClass,
+						children: /* @__PURE__ */ jsx(ItemIcon, { icon: group.icon })
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					side: "right",
+					align: "start",
+					sideOffset: 8,
+					className: "z-50 max-w-xs rounded-2xl shadow-lg will-change-[opacity,transform] py-1.5 overflow-visible select-none",
+					style: { minWidth: 180 },
+					onCloseAutoFocus: (e) => {
+						if (pickedWithPointer.current) e.preventDefault();
+					},
+					children: /* @__PURE__ */ jsx(GroupMenuItems, {
+						group,
+						isSelected,
+						linkComponent: LinkComponent,
+						onItemClick: () => setOpen(false),
+						onItemPointerDown: () => {
+							pickedWithPointer.current = true;
+						}
+					})
+				})]
+			}) })
+		})
+	});
+}
+var groupHeaderClass = cn("flex w-full items-center gap-2 rounded-md p-2 h-7 overflow-hidden font-medium text-sidebar-foreground hover:bg-sidebar-accent/50 transition-colors cursor-pointer", rowIconClass);
+/**
+* Expanded sidebar group with inline collapsible items.
+* Clicking the group header toggles expand/collapse. No flyout menus here —
+* flyouts are only used in CollapsedSidebarGroup (icon-only sidebar state).
+*/
+function ExpandedSidebarGroup({ group, isGroupOpen, onToggle, renderMenuItem }) {
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open: isGroupOpen,
+		onOpenChange: onToggle,
+		children: /* @__PURE__ */ jsxs(SidebarGroup, {
+			className: sidebarGroupClassName,
+			children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: groupHeaderClass,
+					style: rowFontStyle,
+					children: [
+						/* @__PURE__ */ jsx(ItemIcon, { icon: group.icon }),
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: group.label
+						}),
+						isGroupOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto transition-transform" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform" })
+					]
+				})
+			}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, {
+				className: "pl-6 pt-1",
+				children: group.items.map((item) => renderMenuItem(item))
+			}) }) })]
+		})
+	});
+}
+/**
+* Single top-level link: no collapsible, same row styling as nested items.
+*/
+function TopLevelLinkRow({ item, isCollapsed, isMobile, renderMenuItem }) {
+	return /* @__PURE__ */ jsx(SidebarGroup, {
+		className: sidebarGroupClassName,
+		children: /* @__PURE__ */ jsx(SidebarMenu, {
+			className: isCollapsed && !isMobile ? "w-auto" : void 0,
+			children: renderMenuItem(item)
+		})
+	});
+}
+function Sidebar({ items, currentPath, header, headerHeight, footer, linkComponent: LinkComponent, collapsible = "icon", variant = "sidebar", focusActiveGroup = false }) {
+	const { state, isMobile, setOpenMobile } = useSidebar();
+	const isCollapsed = state === "collapsed";
+	/** On mobile the sidebar is a sheet overlaying the page: navigating away should dismiss it. */
+	const closeMobileSidebar = () => {
+		if (isMobile) setOpenMobile(false);
+	};
+	/**
+	* Id of the group whose {@link SidebarItemConfig.path} is the currently-selected
+	* route (using the same segment-aware match as row highlighting). `null` when no
+	* group owns the active path — e.g. the active route lives on a top-level link,
+	* or nothing is selected yet.
+	*/
+	const activeGroupId = useMemo(() => {
+		for (const entry of items) {
+			if (!isSidebarGroup(entry)) continue;
+			if (entry.items.some((item) => isPathPrefixOf(item.path, currentPath))) return entry.id;
+		}
+		return null;
+	}, [items, currentPath]);
+	const [expandedGroups, setExpandedGroups] = useState(() => {
+		if (focusActiveGroup && activeGroupId) return /* @__PURE__ */ new Set([activeGroupId]);
+		const set = /* @__PURE__ */ new Set();
+		for (const entry of items) if (isSidebarGroup(entry) && entry.defaultExpanded !== false) set.add(entry.id);
+		return set;
+	});
+	/**
+	* In focus-active mode, whenever the *active group* changes (i.e. the user
+	* navigates into a different group), collapse everything else and expand only
+	* the new active group. Navigating within the same group leaves any manual
+	* expansions the user made in place.
+	*/
+	useEffect(() => {
+		if (!focusActiveGroup || !activeGroupId) return;
+		setExpandedGroups(/* @__PURE__ */ new Set([activeGroupId]));
+	}, [focusActiveGroup, activeGroupId]);
+	const toggleGroup = (id, open) => {
+		setExpandedGroups((prev) => {
+			const next = new Set(prev);
+			if (open) next.add(id);
+			else next.delete(id);
+			return next;
+		});
+	};
+	/**
+	* Segment-aware so sibling routes with a shared prefix stay independent: at
+	* `/components/input-password` only that row lights up, not `/components/input` too.
+	* A nested route still selects its parent row (`/nodes/42` selects `/nodes`).
+	*/
+	const isSelected = (path) => {
+		return isPathPrefixOf(path, currentPath);
+	};
+	const renderMenuItem = (item) => {
+		const EndActionIcon = item.endAction?.icon;
+		const active = isSelected(item.path);
+		return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(SidebarMenuButton, {
+			asChild: true,
+			isActive: active,
+			size: "sm",
+			tooltip: item.label,
+			className: cn(rowIconClass, active && "bg-sidebar-accent text-sidebar-accent-foreground", item.endAction && "pr-8"),
+			children: /* @__PURE__ */ jsx(LinkComponent, {
+				to: item.path,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "contents",
+					onClick: closeMobileSidebar,
+					children: [/* @__PURE__ */ jsx(ItemIcon, {
+						icon: item.icon,
+						active
+					}), /* @__PURE__ */ jsx("span", {
+						className: cn("whitespace-nowrap max-w-[168px] truncate", active ? "font-semibold text-sidebar-accent-foreground" : "font-medium text-sidebar-foreground"),
+						style: rowFontStyle,
+						children: item.label
+					})]
+				})
+			})
+		}), item.endAction && EndActionIcon && /* @__PURE__ */ jsx(Tooltip, {
+			content: item.endAction.tooltip,
+			side: "right",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(SidebarMenuAction, {
+				asChild: true,
+				className: cn(rowIconClass, "right-1.5"),
+				children: /* @__PURE__ */ jsx(LinkComponent, {
+					to: item.endAction.path,
+					children: /* @__PURE__ */ jsx("span", {
+						className: "contents",
+						onClick: closeMobileSidebar,
+						children: /* @__PURE__ */ jsx(EndActionIcon, {})
+					})
+				})
+			})
+		})] }, item.id);
+	};
+	const renderGroup = (group) => {
+		if (isCollapsed && !isMobile) return /* @__PURE__ */ jsx(CollapsedSidebarGroup, {
+			group,
+			isSelected,
+			linkComponent: LinkComponent
+		}, group.id);
+		return /* @__PURE__ */ jsx(ExpandedSidebarGroup, {
+			group,
+			isGroupOpen: expandedGroups.has(group.id),
+			onToggle: (open) => toggleGroup(group.id, open),
+			renderMenuItem
+		}, group.id);
+	};
+	const renderEntry = (entry) => {
+		if (!isSidebarGroup(entry)) return /* @__PURE__ */ jsx(TopLevelLinkRow, {
+			item: entry,
+			isCollapsed,
+			isMobile,
+			renderMenuItem
+		}, entry.id);
+		return renderGroup(entry);
+	};
+	return /* @__PURE__ */ jsxs(Sidebar$1, {
+		collapsible,
+		variant,
+		children: [
+			(header || isMobile) && /* @__PURE__ */ jsxs(SidebarHeader, {
+				className: cn(headerHeight ? "flex flex-row items-center gap-0 px-2 py-0 box-border shrink-0" : "flex items-start", isMobile ? "justify-between" : "justify-center"),
+				style: headerHeight ? {
+					height: headerHeight,
+					minHeight: headerHeight
+				} : void 0,
+				children: [header, isMobile && /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "icon",
+					className: "size-8 shrink-0 ml-auto text-sidebar-foreground",
+					onClick: () => setOpenMobile(false),
+					children: [/* @__PURE__ */ jsx(X, { className: "size-5" }), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Close sidebar"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(SidebarContent, {
+				className: "overflow-hidden",
+				children: items.map((entry) => renderEntry(entry))
+			}),
+			footer && /* @__PURE__ */ jsx(SidebarFooter, { children: footer })
+		]
+	});
+}
+//#endregion
+export { Sidebar as default };

package/dist/components/sidebar/types.js

@@ -0,0 +1,6 @@
+//#region src/components/sidebar/types.ts
+function isSidebarGroup(entry) {
+	return "items" in entry;
+}
+//#endregion
+export { isSidebarGroup };