@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/transfer-list/transfer-list.js

@@ -0,0 +1,413 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { SectionCard } from "../cards/section-card.js";
+import { Checkbox } from "../../core/checkbox/motion-checkbox.js";
+import SearchBox from "../search-box/search-box.js";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsLeft, ChevronsRight, Search, X } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/components/transfer-list/transfer-list.tsx
+var rowTransition = {
+	duration: .25,
+	ease: [
+		.4,
+		0,
+		.2,
+		1
+	]
+};
+var headerTransition = {
+	duration: .2,
+	ease: [
+		.4,
+		0,
+		.2,
+		1
+	]
+};
+var headerContentVariants = {
+	enter: {
+		opacity: 0,
+		x: 8
+	},
+	center: {
+		opacity: 1,
+		x: 0
+	},
+	exit: {
+		opacity: 0,
+		x: -8
+	}
+};
+var sourceRowVariants = {
+	enter: {
+		opacity: 0,
+		x: 32
+	},
+	center: {
+		opacity: 1,
+		x: 0
+	},
+	exit: {
+		opacity: 0,
+		x: 32
+	}
+};
+var targetRowVariants = {
+	enter: {
+		opacity: 0,
+		x: -32
+	},
+	center: {
+		opacity: 1,
+		x: 0
+	},
+	exit: {
+		opacity: 0,
+		x: -32
+	}
+};
+function FormFieldMirrors({ name, form, value }) {
+	if (name == null || name === "") return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "hidden",
+		"aria-hidden": true,
+		children: value.map((id) => /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: id,
+			form
+		}, id))
+	});
+}
+function filterItemsByQuery(items, query, getLabel) {
+	const q = query.trim().toLowerCase();
+	if (q === "") return items;
+	return items.filter((item) => getLabel(item).toLowerCase().includes(q));
+}
+function TransferListItems({ filteredItems, items, selectedIds, getItemId, getItemLabel, isItemDisabled, renderItem, disabled, rowVariants, onChecked }) {
+	if (filteredItems.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "px-1 py-2 text-sm text-muted-foreground",
+		children: items.length === 0 ? "No items" : "No matching items"
+	});
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: filteredItems.map((item) => {
+			const id = getItemId(item);
+			const label = getItemLabel(item);
+			const itemDisabled = disabled || isItemDisabled(item);
+			const checked = selectedIds.has(id);
+			return /* @__PURE__ */ jsxs(motion.label, {
+				layout: true,
+				variants: rowVariants,
+				initial: "enter",
+				animate: "center",
+				exit: "exit",
+				transition: rowTransition,
+				className: cn("flex cursor-pointer items-center gap-2 rounded-md px-1 py-1.5", itemDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/50"),
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					checked,
+					disabled: itemDisabled,
+					onCheckedChange: (state) => onChecked(id, state),
+					"aria-label": label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 text-sm text-foreground",
+					children: renderItem?.(item) ?? label
+				})]
+			}, id);
+		})
+	});
+}
+function TransferListPanel({ title, titleId, items, selectedIds, onSelectionChange, getItemId, getItemLabel, isItemDisabled, renderItem, searchable, disabled, side, maxHeight }) {
+	const [searchQuery, setSearchQuery] = useState("");
+	const [isSearchOpen, setIsSearchOpen] = useState(false);
+	const searchContainerRef = useRef(null);
+	const rowVariants = side === "source" ? sourceRowVariants : targetRowVariants;
+	const heightConstrained = maxHeight != null;
+	const filteredItems = useMemo(() => filterItemsByQuery(items, searchQuery, getItemLabel), [
+		items,
+		searchQuery,
+		getItemLabel
+	]);
+	const selectableFilteredItems = useMemo(() => filteredItems.filter((item) => !disabled && !isItemDisabled(item)), [
+		filteredItems,
+		disabled,
+		isItemDisabled
+	]);
+	const selectableFilteredIds = useMemo(() => selectableFilteredItems.map((item) => getItemId(item)), [selectableFilteredItems, getItemId]);
+	const selectedSelectableCount = useMemo(() => selectableFilteredIds.filter((id) => selectedIds.has(id)).length, [selectableFilteredIds, selectedIds]);
+	const selectAllChecked = selectableFilteredIds.length === 0 ? false : selectedSelectableCount === selectableFilteredIds.length ? true : selectedSelectableCount > 0 ? "indeterminate" : false;
+	useEffect(() => {
+		if (!isSearchOpen) return;
+		requestAnimationFrame(() => {
+			searchContainerRef.current?.querySelector("input")?.focus();
+		});
+	}, [isSearchOpen]);
+	const handleSelectAll = (state) => {
+		const next = new Set(selectedIds);
+		const allSelected = selectableFilteredIds.length > 0 && selectableFilteredIds.every((id) => next.has(id));
+		if (state === false || allSelected) for (const id of selectableFilteredIds) next.delete(id);
+		else for (const id of selectableFilteredIds) next.add(id);
+		onSelectionChange(next);
+	};
+	const handleOpenSearch = () => {
+		setIsSearchOpen(true);
+	};
+	const handleCloseSearch = () => {
+		setIsSearchOpen(false);
+		setSearchQuery("");
+	};
+	const handleChecked = (id, state) => {
+		const next = new Set(selectedIds);
+		if (state === true) next.add(id);
+		else next.delete(id);
+		onSelectionChange(next);
+	};
+	const listItems = /* @__PURE__ */ jsx(TransferListItems, {
+		filteredItems,
+		items,
+		selectedIds,
+		getItemId,
+		getItemLabel,
+		isItemDisabled,
+		renderItem,
+		disabled,
+		rowVariants,
+		onChecked: handleChecked
+	});
+	return /* @__PURE__ */ jsx(SectionCard, {
+		allowCollapse: false,
+		defaultOpen: true,
+		color: "mist",
+		primaryText: /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				checked: selectAllChecked,
+				disabled: disabled || selectableFilteredIds.length === 0,
+				onCheckedChange: handleSelectAll,
+				"aria-label": `Select all in ${title}`
+			}), /* @__PURE__ */ jsx("div", {
+				className: "relative min-w-0 flex-1",
+				children: /* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "wait",
+					initial: false,
+					children: !isSearchOpen || !searchable ? /* @__PURE__ */ jsx(motion.span, {
+						id: titleId,
+						className: "block min-w-0 truncate",
+						variants: headerContentVariants,
+						initial: "enter",
+						animate: "center",
+						exit: "exit",
+						transition: headerTransition,
+						children: title
+					}, "title") : /* @__PURE__ */ jsx(motion.div, {
+						ref: searchContainerRef,
+						className: "min-w-0 flex-1",
+						variants: headerContentVariants,
+						initial: "enter",
+						animate: "center",
+						exit: "exit",
+						transition: headerTransition,
+						children: /* @__PURE__ */ jsx(SearchBox, {
+							size: "sm",
+							className: "w-full",
+							placeholder: `Search ${title.toLowerCase()}...`,
+							onSearch: setSearchQuery,
+							onClear: () => setSearchQuery(""),
+							onValueChange: setSearchQuery
+						})
+					}, "search")
+				})
+			})]
+		}),
+		actions: searchable ? /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			initial: false,
+			children: !isSearchOpen ? /* @__PURE__ */ jsx(motion.div, {
+				initial: {
+					opacity: 0,
+					scale: .9
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .9
+				},
+				transition: headerTransition,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					color: "mist",
+					disabled,
+					"aria-label": `Search ${title}`,
+					onClick: handleOpenSearch,
+					children: /* @__PURE__ */ jsx(Search, { "aria-hidden": true })
+				})
+			}, "search-action") : /* @__PURE__ */ jsx(motion.div, {
+				initial: {
+					opacity: 0,
+					scale: .9
+				},
+				animate: {
+					opacity: 1,
+					scale: 1
+				},
+				exit: {
+					opacity: 0,
+					scale: .9
+				},
+				transition: headerTransition,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon",
+					color: "error",
+					"aria-label": "Cancel search",
+					onClick: handleCloseSearch,
+					children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+				})
+			}, "cancel-action")
+		}) : void 0,
+		fillHeight: heightConstrained,
+		style: heightConstrained ? { maxHeight } : void 0,
+		className: cn("min-w-0 flex-1", heightConstrained && "overflow-hidden", searchable && "[&_.section-card-header+*]:!py-1", searchable && "[&_.section-card-header]:!py-1"),
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-labelledby": titleId,
+			className: cn("flex flex-col", heightConstrained && "min-h-0 flex-1"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("flex flex-col gap-1 overflow-x-hidden pr-2", heightConstrained && "min-h-0 flex-1 overflow-y-auto"),
+				children: listItems
+			})
+		})
+	});
+}
+function TransferList({ sourceItems, targetItems, getItemId, getItemLabel, onChange, renderItem, searchable = true, disabled = false, sourceTitle, targetTitle, className, name, form, isItemDisabled, ariaLabel = "Transfer list", maxHeight }) {
+	const resolveId = getItemId ?? ((item) => item.id);
+	const resolveLabel = getItemLabel ?? ((item) => item.label);
+	const resolveDisabled = isItemDisabled ?? ((item) => Boolean(item.disabled));
+	const [sourceSelectedIds, setSourceSelectedIds] = useState(() => /* @__PURE__ */ new Set());
+	const [targetSelectedIds, setTargetSelectedIds] = useState(() => /* @__PURE__ */ new Set());
+	const [liveMessage, setLiveMessage] = useState("");
+	const sourceTitleId = useId();
+	const targetTitleId = useId();
+	const selectedSourceItems = useMemo(() => sourceItems.filter((item) => sourceSelectedIds.has(resolveId(item)) && !resolveDisabled(item)), [
+		sourceItems,
+		sourceSelectedIds,
+		resolveId,
+		resolveDisabled
+	]);
+	const selectedTargetItems = useMemo(() => targetItems.filter((item) => targetSelectedIds.has(resolveId(item)) && !resolveDisabled(item)), [
+		targetItems,
+		targetSelectedIds,
+		resolveId,
+		resolveDisabled
+	]);
+	const canMoveToTarget = !disabled && selectedSourceItems.length > 0;
+	const canMoveToSource = !disabled && selectedTargetItems.length > 0;
+	const hiddenFieldValues = useMemo(() => targetItems.map((item) => resolveId(item)), [targetItems, resolveId]);
+	const announce = (message) => {
+		setLiveMessage("");
+		requestAnimationFrame(() => setLiveMessage(message));
+	};
+	const handleMoveToTarget = () => {
+		if (!canMoveToTarget) return;
+		const count = selectedSourceItems.length;
+		onChange([...targetItems, ...selectedSourceItems]);
+		setSourceSelectedIds(/* @__PURE__ */ new Set());
+		setTargetSelectedIds(/* @__PURE__ */ new Set());
+		announce(`${count} item${count === 1 ? "" : "s"} moved to ${targetTitle}`);
+	};
+	const handleMoveToSource = () => {
+		if (!canMoveToSource) return;
+		const removeIds = new Set(selectedTargetItems.map((item) => resolveId(item)));
+		const count = removeIds.size;
+		onChange(targetItems.filter((item) => !removeIds.has(resolveId(item))));
+		setSourceSelectedIds(/* @__PURE__ */ new Set());
+		setTargetSelectedIds(/* @__PURE__ */ new Set());
+		announce(`${count} item${count === 1 ? "" : "s"} moved to ${sourceTitle}`);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": ariaLabel,
+		className: cn("flex w-full flex-col items-stretch gap-4 md:flex-row", className),
+		children: [
+			/* @__PURE__ */ jsx(FormFieldMirrors, {
+				name,
+				form,
+				value: hiddenFieldValues
+			}),
+			/* @__PURE__ */ jsx(TransferListPanel, {
+				title: sourceTitle,
+				titleId: sourceTitleId,
+				items: sourceItems,
+				selectedIds: sourceSelectedIds,
+				onSelectionChange: setSourceSelectedIds,
+				getItemId: resolveId,
+				getItemLabel: resolveLabel,
+				isItemDisabled: resolveDisabled,
+				renderItem,
+				searchable,
+				disabled,
+				side: "source",
+				maxHeight
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-row items-center justify-center gap-3 self-center md:flex-col",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "default",
+					size: "icon",
+					disabled: !canMoveToTarget,
+					"aria-label": `Move selected to ${targetTitle}`,
+					onClick: handleMoveToTarget,
+					children: /* @__PURE__ */ jsx(ChevronsRight, {
+						className: "max-md:rotate-90",
+						"aria-hidden": true
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: "icon",
+					color: "error",
+					disabled: !canMoveToSource,
+					"aria-label": `Move selected to ${sourceTitle}`,
+					onClick: handleMoveToSource,
+					children: /* @__PURE__ */ jsx(ChevronsLeft, {
+						className: "max-md:rotate-90",
+						"aria-hidden": true
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(TransferListPanel, {
+				title: targetTitle,
+				titleId: targetTitleId,
+				items: targetItems,
+				selectedIds: targetSelectedIds,
+				onSelectionChange: setTargetSelectedIds,
+				getItemId: resolveId,
+				getItemLabel: resolveLabel,
+				isItemDisabled: resolveDisabled,
+				renderItem,
+				searchable,
+				disabled,
+				side: "target",
+				maxHeight
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: liveMessage
+			})
+		]
+	});
+}
+//#endregion
+export { TransferList };

package/dist/components/truncated-line-with-tooltip/truncated-line-with-tooltip.js

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/truncated-line-with-tooltip/truncated-line-with-tooltip.tsx
+function hasTooltipContent(content) {
+	if (content == null) return false;
+	if (typeof content === "string") return content.length > 0;
+	if (typeof content === "number") return true;
+	if (typeof content === "boolean") return false;
+	return true;
+}
+/**
+* Single-line truncation with tooltip when overflow (measured via DOM).
+* Wrap in {@link TooltipProvider} at the tree root when using tooltips.
+*/
+function TruncatedLineWithTooltip({ className, tooltipContent, children }) {
+	const textRef = useRef(null);
+	const [isTruncated, setIsTruncated] = useState(false);
+	const measure = useCallback(() => {
+		const el = textRef.current;
+		if (!el) return;
+		setIsTruncated(el.scrollWidth > el.clientWidth + 1);
+	}, []);
+	useLayoutEffect(() => {
+		measure();
+	}, [
+		measure,
+		children,
+		tooltipContent
+	]);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const el = textRef.current;
+		const ro = new ResizeObserver(measure);
+		if (el) ro.observe(el);
+		return () => ro.disconnect();
+	}, [measure]);
+	const line = /* @__PURE__ */ jsx("span", {
+		ref: textRef,
+		className: cn("block min-w-0 truncate", className),
+		children
+	});
+	if (!(isTruncated && hasTooltipContent(tooltipContent))) return line;
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		side: "top",
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			className: "block min-w-0 w-full cursor-inherit text-left",
+			children: line
+		}), /* @__PURE__ */ jsx(TooltipContent, {
+			className: "max-w-sm",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "break-words",
+				children: tooltipContent
+			})
+		})]
+	});
+}
+//#endregion
+export { TruncatedLineWithTooltip };

package/dist/components/typography/typography-variants.js

@@ -0,0 +1,41 @@
+//#region src/components/typography/typography-variants.ts
+var TYPOGRAPHY_VARIANTS = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"body1",
+	"body2",
+	"subtitle1",
+	"subtitle2"
+];
+/** Tailwind classes per variant — edit here to tune the type scale. */
+var typographyVariantClasses = {
+	h1: "text-3xl font-bold tracking-tight",
+	h2: "text-2xl font-bold tracking-tight",
+	h3: "text-xl font-semibold tracking-tight",
+	h4: "text-lg font-semibold",
+	h5: "text-base font-semibold",
+	h6: "text-sm font-semibold",
+	subtitle1: "text-sm font-medium text-muted-foreground",
+	subtitle2: "text-xs font-medium text-muted-foreground",
+	body1: "text-base leading-relaxed",
+	body2: "text-sm leading-normal"
+};
+/** Default semantic tag per variant (Material UI–aligned). */
+var typographyDefaultElement = {
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	h6: "h6",
+	subtitle1: "h6",
+	subtitle2: "h6",
+	body1: "p",
+	body2: "p"
+};
+//#endregion
+export { TYPOGRAPHY_VARIANTS, typographyDefaultElement, typographyVariantClasses };

package/dist/components/typography/typography.js

@@ -0,0 +1,15 @@
+import { cn } from "../../utils/cn.js";
+import { typographyDefaultElement, typographyVariantClasses } from "./typography-variants.js";
+import * as React$1 from "react";
+//#region src/components/typography/typography.tsx
+var Typography = React$1.forwardRef(function Typography({ variant = "body1", as, className, children, ...rest }, ref) {
+	const Component = as ?? typographyDefaultElement[variant];
+	return React$1.createElement(Component, {
+		ref,
+		className: cn("text-foreground", typographyVariantClasses[variant], className),
+		...rest
+	}, children);
+});
+Typography.displayName = "Typography";
+//#endregion
+export { Typography };

package/dist/components/user-type-badge/user-type-badge.js

@@ -0,0 +1,40 @@
+import { cn } from "../../utils/cn.js";
+import { Badge } from "../../core/badge.js";
+import { userTypeBadgeRegistry } from "./user-type-badge.registry.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/user-type-badge/user-type-badge.tsx
+var userTypeBadgeSizeVariants = cva("inline-flex font-medium tracking-tight shadow-none transition-shadow duration-200 ease-out hover:shadow-sm [&_svg]:shrink-0", {
+	variants: { size: {
+		sm: "gap-1 px-1.5 py-0.5 text-xs [&_svg]:size-3",
+		default: "gap-1.5 px-2 py-1 text-sm [&_svg]:size-3.5",
+		lg: "gap-2 px-2.5 py-1.5 text-base [&_svg]:size-4"
+	} },
+	defaultVariants: { size: "default" }
+});
+var userTypeBadgeMetallicClasses = cn("relative isolate overflow-hidden border border-white/20", "shadow-[inset_0_1px_0_rgba(255,255,255,0.30),inset_0_-1px_0_rgba(0,0,0,0.22)]", "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit]", "before:bg-[linear-gradient(135deg,rgba(255,255,255,0.24)_0%,rgba(255,255,255,0.04)_36%,rgba(0,0,0,0.16)_72%,rgba(255,255,255,0.12)_100%)]", "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-white/15", "after:bg-[linear-gradient(315deg,rgba(255,255,255,0.24)_0%,rgba(255,255,255,0.04)_36%,rgba(0,0,0,0.16)_72%,rgba(255,255,255,0.12)_100%)]", "after:opacity-0 after:transition-opacity after:duration-[1800ms] after:ease-in-out hover:after:opacity-100");
+var UserTypeBadge = React$1.forwardRef(({ userType, size = "default", className, ...props }, ref) => {
+	const { color, icon: Icon, label } = userTypeBadgeRegistry[userType];
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "inline-block",
+		...props,
+		children: /* @__PURE__ */ jsxs(Badge, {
+			variant: "solid",
+			color,
+			className: cn(userTypeBadgeSizeVariants({ size }), userTypeBadgeMetallicClasses, className),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": true,
+				className: "relative z-10",
+				strokeWidth: 2.25
+			}), /* @__PURE__ */ jsx("span", {
+				className: "relative z-10 [text-shadow:0_1px_1px_rgba(0,0,0,0.20)]",
+				children: label
+			})]
+		})
+	});
+});
+UserTypeBadge.displayName = "UserTypeBadge";
+//#endregion
+export { UserTypeBadge, userTypeBadgeSizeVariants };

package/dist/components/user-type-badge/user-type-badge.registry.js

@@ -0,0 +1,17 @@
+import { Crown, ShieldCheck } from "lucide-react";
+//#region src/components/user-type-badge/user-type-badge.registry.ts
+var userTypeBadgeRegistry = {
+	admin: {
+		label: "Admin",
+		color: "secondary",
+		icon: ShieldCheck
+	},
+	super_admin: {
+		label: "Super admin",
+		color: "error",
+		icon: Crown
+	}
+};
+var userTypeBadgeUserTypes = Object.keys(userTypeBadgeRegistry);
+//#endregion
+export { userTypeBadgeRegistry, userTypeBadgeUserTypes };