@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/components/page-container/page-container-skeleton.js

@@ -0,0 +1,72 @@
+import { cn } from "../../utils/cn.js";
+import { Skeleton } from "../../core/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/page-container/page-container-skeleton.tsx
+var maxWidthClasses = {
+	sm: "max-w-2xl",
+	md: "max-w-4xl",
+	lg: "max-w-5xl",
+	xl: "max-w-7xl"
+};
+function PageContainerSkeleton({ maxWidth, noGutters = false, showBackLink = false, showHeader = true, showActions = false, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("w-full", !noGutters && "mt-[72px]", maxWidth != null && maxWidthClasses[maxWidth], "mx-auto", className),
+		children: [
+			showBackLink && /* @__PURE__ */ jsx("div", {
+				className: "mb-2",
+				children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" })
+			}),
+			showHeader && /* @__PURE__ */ jsxs("div", {
+				className: "w-full hstack justify-between items-center min-h-[2.25rem] flex mb-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48 flex-1 max-w-xs" }), showActions && /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-28 shrink-0" })]
+			}),
+			/* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsxs("div", {
+				className: "py-4 space-y-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-10 flex-1 max-w-md" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24 shrink-0" })]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "overflow-hidden rounded-md mt-6 border border-border",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "border-b border-border px-2 py-3 flex gap-2",
+							children: [
+								1,
+								2,
+								3,
+								4,
+								5
+							].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1 min-w-0" }, i))
+						}), /* @__PURE__ */ jsx("div", {
+							className: "divide-y divide-border",
+							children: [
+								1,
+								2,
+								3,
+								4,
+								5,
+								6
+							].map((i) => /* @__PURE__ */ jsx("div", {
+								className: "px-2 py-4 flex gap-2",
+								children: [
+									1,
+									2,
+									3,
+									4,
+									5
+								].map((j) => /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1 min-w-0" }, j))
+							}, i))
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2 pt-2",
+						children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" })]
+					})
+				]
+			}) })
+		]
+	});
+}
+//#endregion
+export { PageContainerSkeleton as default };

package/dist/components/page-container/page-container.js

@@ -0,0 +1,93 @@
+import { cn } from "../../utils/cn.js";
+import { MOBILE_MEDIA_QUERY } from "../../core/hooks/use-mobile.js";
+import { Link } from "../link/link.js";
+import { useRevealOnScrollUp } from "../../core/hooks/use-reveal-on-scroll-up.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoveLeft } from "lucide-react";
+import { motion } from "motion/react";
+//#region src/components/page-container/page-container.tsx
+var maxWidthClasses = {
+	sm: "max-w-2xl",
+	md: "max-w-4xl",
+	lg: "max-w-5xl",
+	xl: "max-w-7xl"
+};
+var headingTitleClasses = "min-w-0 flex-1 text-2xl text-foreground font-bold track-tight";
+var headingContentClasses = "min-w-0 flex-1";
+var stickyHeaderClasses = "sticky top-0 z-11 bg-background/75 backdrop-blur-xs";
+var stickyHeaderFromMdClasses = "md:sticky md:top-0 md:z-11 md:bg-background/75 md:backdrop-blur-xs";
+var elevatedHeaderClasses = "shadow-md shadow-accent/30";
+var elevatedHeaderFromMdClasses = "md:shadow-md md:shadow-accent/30";
+var revealTransitionClasses = "transition-transform duration-200 ease-out motion-reduce:transition-none";
+function headerPinningClasses({ stickyHeadingOnMobile, elevateHeading, revealEnabled, revealState, animateReveal }) {
+	if (stickyHeadingOnMobile) return cn(stickyHeaderClasses, elevateHeading && elevatedHeaderClasses);
+	if (!revealEnabled || revealState === "static") return cn(stickyHeaderFromMdClasses, elevateHeading && elevatedHeaderFromMdClasses);
+	const revealed = revealState === "revealed";
+	return cn(stickyHeaderClasses, revealed ? "translate-y-0" : "-translate-y-full", revealed && elevateHeading && elevatedHeaderClasses, animateReveal && revealTransitionClasses);
+}
+function PageContainer({ maxWidth, heading, actions, children, className, noGutters = false, elevateHeading = false, stickyHeadingOnMobile = false, revealHeadingOnScrollUp = true, goBackLinkData, onBack }) {
+	const hasContainerHeading = heading != null || actions != null;
+	const showBackLink = goBackLinkData?.show === true;
+	const showStickyHeader = showBackLink || hasContainerHeading;
+	const headerRef = useRef(null);
+	const revealEnabled = revealHeadingOnScrollUp && !stickyHeadingOnMobile;
+	const { state: revealState, animate: animateReveal, reveal } = useRevealOnScrollUp(headerRef, {
+		enabled: revealEnabled,
+		mediaQuery: MOBILE_MEDIA_QUERY
+	});
+	const backLabel = goBackLinkData?.label ?? "Back";
+	const backHref = goBackLinkData?.href;
+	const LinkComponent = goBackLinkData?.linkComponent;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("w-full", !noGutters && "mt-[72px]", maxWidth != null && maxWidthClasses[maxWidth], "mx-auto", "p-3 md:p-6", className),
+		children: /* @__PURE__ */ jsxs(motion.main, {
+			className: "flex flex-col gap-6",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			transition: {
+				duration: .75,
+				ease: "easeOut"
+			},
+			children: [showStickyHeader && /* @__PURE__ */ jsxs("div", {
+				ref: headerRef,
+				onFocus: reveal,
+				className: cn("flex flex-col gap-2", headerPinningClasses({
+					stickyHeadingOnMobile,
+					elevateHeading,
+					revealEnabled,
+					revealState,
+					animateReveal
+				})),
+				children: [showBackLink && /* @__PURE__ */ jsx("div", {
+					className: cn(goBackLinkData?.className),
+					children: /* @__PURE__ */ jsx(Link, {
+						to: backHref != null && backHref !== "" ? backHref : "#",
+						linkComponent: backHref != null && backHref !== "" && LinkComponent ? LinkComponent : void 0,
+						color: "gray",
+						startIcon: /* @__PURE__ */ jsx(MoveLeft, { "aria-hidden": true }),
+						onClick: backHref != null && backHref !== "" ? void 0 : (e) => {
+							e.preventDefault();
+							onBack?.();
+						},
+						children: backLabel
+					})
+				}), hasContainerHeading && /* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-[2.25rem] w-full flex-wrap items-center gap-3",
+					children: [heading != null && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", {
+						className: headingTitleClasses,
+						children: heading
+					}) : /* @__PURE__ */ jsx("div", {
+						className: headingContentClasses,
+						children: heading
+					})), actions != null && /* @__PURE__ */ jsx("div", {
+						className: cn("ml-auto w-auto max-w-full shrink-0"),
+						children: actions
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", { children })]
+		})
+	});
+}
+//#endregion
+export { PageContainer as default };

package/dist/components/pagination/pagination.js

@@ -0,0 +1,96 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/components/pagination/pagination.tsx
+var defaultPageSizeOptionLabel = (size) => `${size} / page`;
+var sizeStyles = {
+	sm: {
+		container: "mt-4 pt-3",
+		buttonGroupGap: "gap-2",
+		icon: "h-3.5 w-3.5"
+	},
+	default: {
+		container: "mt-6 pt-4",
+		buttonGroupGap: "gap-3",
+		icon: "h-4 w-4"
+	},
+	lg: {
+		container: "mt-8 pt-5",
+		buttonGroupGap: "gap-4",
+		icon: "h-5 w-5"
+	}
+};
+function Pagination({ pageLabel, previousLabel = "Previous", nextLabel = "Next", onPrevPage, onNextPage, hasPrevPage, hasNextPage, disabled = false, currentPageSize, pageSizeOptions, onPageSizeChange, pageSizeOptionLabel = defaultPageSizeOptionLabel, size = "default" }) {
+	const showPageSizeSelector = pageSizeOptions !== void 0 && pageSizeOptions.length > 0;
+	const s = sizeStyles[size];
+	const handlePageSizeChange = (value) => {
+		onPageSizeChange(Number(value));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("@container flex flex-wrap items-center gap-x-2 gap-y-3 border-t", s.container),
+		children: [
+			pageLabel !== void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "flex-1 text-sm whitespace-nowrap text-muted-foreground",
+				children: pageLabel
+			}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex items-center", s.buttonGroupGap),
+				children: [/* @__PURE__ */ jsx(Button, {
+					fullWidth: false,
+					variant: "outline",
+					color: "gray",
+					usePrimaryColorOnHover: true,
+					size,
+					onClick: onPrevPage,
+					disabled: !hasPrevPage || disabled,
+					startIcon: /* @__PURE__ */ jsx(ChevronLeft, { className: s.icon }),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "@max-md:sr-only",
+						children: previousLabel
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					fullWidth: false,
+					variant: "outline",
+					color: "gray",
+					usePrimaryColorOnHover: true,
+					size,
+					onClick: onNextPage,
+					disabled: !hasNextPage || disabled,
+					endIcon: /* @__PURE__ */ jsx(ChevronRight, { className: s.icon }),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "@max-md:sr-only",
+						children: nextLabel
+					})
+				})]
+			}),
+			showPageSizeSelector ? /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 justify-end",
+				children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsxs(Button, {
+						fullWidth: false,
+						variant: "outline",
+						color: "gray",
+						usePrimaryColorOnHover: true,
+						size,
+						children: [pageSizeOptionLabel(currentPageSize), /* @__PURE__ */ jsx(ChevronDown, { className: cn(s.icon, "opacity-50") })]
+					})
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					align: "end",
+					children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+						value: String(currentPageSize),
+						onValueChange: handlePageSizeChange,
+						children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+							value: String(size),
+							children: pageSizeOptionLabel(size)
+						}, size))
+					})
+				})] })
+			}) : /* @__PURE__ */ jsx("div", { className: "flex flex-1" })
+		]
+	});
+}
+//#endregion
+export { Pagination };

package/dist/components/pagination/pagination.props.js

@@ -0,0 +1,16 @@
+//#region src/components/pagination/pagination.props.ts
+/**
+* Default page-size choices used by `DataTable`'s page-size selector.
+*
+* `Pagination` itself does not default to this list — omitting `pageSizeOptions`
+* there hides the selector.
+*/
+var DEFAULT_PAGE_SIZE_OPTIONS = [
+	5,
+	10,
+	15,
+	20,
+	25
+];
+//#endregion
+export { DEFAULT_PAGE_SIZE_OPTIONS };

package/dist/components/progress-bar/progress-bar.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { isPresetColor, resolveColor } from "../../utils/color.js";
+import { Progress, ProgressLabel, ProgressTrack, ProgressValue } from "../../core/animate-ui/components/base/progress.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/progress-bar/progress-bar.tsx
+var FAKE_PROGRESS_INTERVAL_MS = 100;
+var FAKE_PROGRESS_MIN = 10;
+var FAKE_PROGRESS_MAX = 90;
+var FAKE_PROGRESS_INCREMENT_MIN = 1;
+var presetTrackBgMap = {
+	primary: "bg-primary/20",
+	secondary: "bg-secondary/20",
+	error: "bg-error/20",
+	info: "bg-info/20",
+	success: "bg-success/20",
+	warning: "bg-warning/20",
+	disabled: "bg-disabled/20",
+	gray: "bg-gray/20",
+	mist: "bg-mist-border"
+};
+var presetIndicatorBgMap = {
+	primary: "bg-primary",
+	secondary: "bg-secondary",
+	error: "bg-error",
+	info: "bg-info",
+	success: "bg-success",
+	warning: "bg-warning",
+	disabled: "bg-disabled",
+	gray: "bg-gray",
+	mist: "bg-mist"
+};
+function ProgressBar({ showFakeProgress = false, value: valueProp, label, showPercentage = false, color = "primary", segments, className, ...props }) {
+	const [fakeValue, setFakeValue] = React$1.useState(FAKE_PROGRESS_MIN);
+	const intervalRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (!showFakeProgress) return;
+		if (intervalRef.current) clearInterval(intervalRef.current);
+		setFakeValue(FAKE_PROGRESS_MIN);
+		intervalRef.current = setInterval(() => {
+			setFakeValue((current) => {
+				const increment = FAKE_PROGRESS_INCREMENT_MIN + Math.floor(Math.random() * 9);
+				const next = Math.min(FAKE_PROGRESS_MAX, current + increment);
+				if (next >= FAKE_PROGRESS_MAX && intervalRef.current) {
+					clearInterval(intervalRef.current);
+					intervalRef.current = null;
+				}
+				return next;
+			});
+		}, FAKE_PROGRESS_INTERVAL_MS);
+		return () => {
+			if (intervalRef.current) clearInterval(intervalRef.current);
+		};
+	}, [showFakeProgress]);
+	const showHeader = label != null || showPercentage;
+	if (segments && segments.length > 0) {
+		const total = segments.reduce((sum, s) => sum + Math.max(0, s.value), 0);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("space-y-2", className),
+			children: [showHeader && /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-between gap-1",
+				children: label != null && /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: label
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "bg-mist-border relative h-2 w-full overflow-hidden rounded-full flex",
+				children: total === 0 ? null : segments.map((seg, idx) => {
+					const widthPct = Math.max(0, seg.value) / total * 100;
+					if (widthPct === 0) return null;
+					const isPreset = isPresetColor(seg.color);
+					return /* @__PURE__ */ jsx("div", {
+						className: cn("h-full", isPreset ? presetIndicatorBgMap[seg.color] : void 0),
+						style: {
+							width: `${widthPct}%`,
+							...isPreset ? {} : resolveColor(seg.color, "bg").style
+						},
+						"aria-label": seg.label
+					}, idx);
+				})
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsxs(Progress, {
+		value: (showFakeProgress ? fakeValue : valueProp) ?? 0,
+		max: 100,
+		className: cn("space-y-2", className),
+		...props,
+		children: [showHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-1",
+			children: [label != null && /* @__PURE__ */ jsx(ProgressLabel, { children: label }), showPercentage && /* @__PURE__ */ jsxs("span", {
+				className: "text-sm",
+				children: [/* @__PURE__ */ jsx(ProgressValue, {}), " %"]
+			})]
+		}), /* @__PURE__ */ jsx(ProgressTrack, { ...isPresetColor(color) ? {
+			className: presetTrackBgMap[color],
+			indicatorClassName: presetIndicatorBgMap[color]
+		} : {
+			style: { backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)` },
+			indicatorStyle: resolveColor(color, "bg").style
+		} })]
+	});
+}
+//#endregion
+export { ProgressBar };

package/dist/components/radio-group/radio-group.js

@@ -0,0 +1,41 @@
+import { cn } from "../../utils/cn.js";
+import { Radio, RadioGroup as RadioGroup$1 } from "../../core/animate-ui/components/base/radio.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/radio-group/radio-group.tsx
+var sizeStyles = {
+	sm: {
+		radio: "size-3.5",
+		label: "text-sm"
+	},
+	default: {
+		radio: "size-4",
+		label: "text-base"
+	},
+	lg: {
+		radio: "size-5",
+		label: "text-lg"
+	}
+};
+function RadioGroup({ options, value, defaultValue, onValueChange, orientation = "vertical", disabled = false, className, size = "default" }) {
+	const styles = sizeStyles[size];
+	return /* @__PURE__ */ jsx(RadioGroup$1, {
+		value,
+		defaultValue,
+		onValueChange,
+		disabled,
+		className: cn(orientation === "horizontal" ? "flex flex-row gap-4" : "grid gap-3", className),
+		children: options.map((option) => /* @__PURE__ */ jsxs("label", {
+			className: cn("flex items-center gap-2 cursor-pointer", (option.disabled || disabled) && "cursor-not-allowed opacity-50"),
+			children: [/* @__PURE__ */ jsx(Radio, {
+				value: option.value,
+				disabled: option.disabled,
+				className: styles.radio
+			}), typeof option.label === "string" ? /* @__PURE__ */ jsx("span", {
+				className: cn(styles.label, "font-normal"),
+				children: option.label
+			}) : option.label]
+		}, option.value))
+	});
+}
+//#endregion
+export { RadioGroup };

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

@@ -0,0 +1,83 @@
+import { cn } from "../../utils/cn.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Circle } from "lucide-react";
+//#region src/components/requirement-list/requirement-list.tsx
+/**
+* Unmet rows use a hollow circle rather than a cross: while the user is still typing,
+* an unsatisfied requirement is pending, not an error.
+*/
+var stateVisuals = {
+	met: {
+		icon: Check,
+		textClass: "text-success"
+	},
+	unmet: {
+		icon: Circle,
+		textClass: "text-muted-foreground"
+	}
+};
+/** Aligned with SimpleList / VerticalStepper size scales. */
+var sizeStyles = {
+	sm: {
+		text: "text-xs",
+		icon: "h-3.5 w-3.5 shrink-0",
+		gap: "gap-2",
+		rowGap: "gap-1"
+	},
+	default: {
+		text: "text-sm",
+		icon: "size-4 shrink-0",
+		gap: "gap-2",
+		rowGap: "gap-1.5"
+	},
+	lg: {
+		text: "text-base",
+		icon: "size-5 shrink-0",
+		gap: "gap-2.5",
+		rowGap: "gap-2"
+	}
+};
+/**
+* Live checklist of requirements a value does and does not yet satisfy — password
+* policy rules, plan prerequisites, upload conditions.
+*
+* Pure: labels arrive already translated and the pass/fail state is computed by the
+* caller, so the component knows nothing about the rules themselves.
+*
+* Each row carries a screen-reader-only state label. Without it the met/unmet
+* distinction would be conveyed only by icon shape and colour, both invisible to a
+* screen reader, and the polite live region would have no text change to announce.
+*
+* Carries no outer spacing so the surface hosting it owns its placement.
+*/
+var RequirementList = forwardRef(function RequirementList({ items, size = "sm", metLabel = "Requirement met", unmetLabel = "Requirement not met", live = true, className, ...rest }, ref) {
+	const styles = sizeStyles[size];
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		"aria-live": live ? "polite" : void 0,
+		...rest,
+		className: cn("flex flex-col", styles.rowGap, className),
+		children: items.map((item) => {
+			const visuals = stateVisuals[item.met ? "met" : "unmet"];
+			const Icon = visuals.icon;
+			return /* @__PURE__ */ jsxs("li", {
+				className: cn("flex items-center transition-colors", styles.gap, styles.text, visuals.textClass),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						className: styles.icon,
+						"aria-hidden": true
+					}),
+					item.label,
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: item.met ? metLabel : unmetLabel
+					})
+				]
+			}, item.id);
+		})
+	});
+});
+RequirementList.displayName = "RequirementList";
+//#endregion
+export { RequirementList };