@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/message-scroller/_hooks/use-follow-bottom.js

@@ -0,0 +1,85 @@
+import { usePrefersReducedMotion } from "../../../core/hooks/use-prefers-reduced-motion.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/message-scroller/_hooks/use-follow-bottom.ts
+/**
+* Keeps a conversation at its end while the reader is there: new content
+* scrolls into view; once they scroll up to read (wheel, touch, keys), it
+* stops following until they are back at the end (or ask to). Paused, nothing
+* moves at all (an answer opened for editing stays where the person is
+* looking). Instant under reduced motion. "The end" is a sentinel after the
+* last message.
+*/
+function useFollowBottom(root, content, end, paused) {
+	const [atEnd, setAtEnd] = useState(true);
+	const following = useRef(true);
+	const reduced = usePrefersReducedMotion();
+	const toEnd = useCallback((smooth) => {
+		following.current = true;
+		end.current?.scrollIntoView({
+			block: "end",
+			behavior: smooth && !reduced ? "smooth" : "auto"
+		});
+	}, [end, reduced]);
+	useEffect(() => {
+		const sentinel = end.current;
+		if (!sentinel) return;
+		const observer = new IntersectionObserver(([entry]) => {
+			const reached = Boolean(entry?.isIntersecting);
+			if (reached) following.current = true;
+			setAtEnd(reached);
+		}, { root: root.current });
+		observer.observe(sentinel);
+		return () => observer.disconnect();
+	}, [root, end]);
+	useEffect(() => {
+		const target = root.current;
+		if (!target) return;
+		function stop() {
+			following.current = false;
+		}
+		function onWheel(event) {
+			if (event.deltaY < 0) stop();
+		}
+		function onKey(event) {
+			if ([
+				"ArrowUp",
+				"PageUp",
+				"Home"
+			].includes(event.key)) stop();
+		}
+		target.addEventListener("wheel", onWheel, { passive: true });
+		target.addEventListener("touchmove", stop, { passive: true });
+		target.addEventListener("keydown", onKey);
+		return () => {
+			target.removeEventListener("wheel", onWheel);
+			target.removeEventListener("touchmove", stop);
+			target.removeEventListener("keydown", onKey);
+		};
+	}, [root]);
+	useEffect(() => {
+		const element = content.current;
+		if (!element) return;
+		let height = element.offsetHeight;
+		const box = root.current;
+		const observer = new ResizeObserver((changes) => {
+			const grew = element.offsetHeight - height;
+			height = element.offsetHeight;
+			const boxChanged = changes.some((change) => change.target === box);
+			if (following.current && !paused) toEnd(!boxChanged && grew <= (box?.clientHeight ?? Infinity));
+		});
+		observer.observe(element);
+		if (box) observer.observe(box);
+		return () => observer.disconnect();
+	}, [
+		root,
+		content,
+		paused,
+		toEnd
+	]);
+	return {
+		atEnd,
+		toEnd: () => toEnd(true)
+	};
+}
+//#endregion
+export { useFollowBottom };

package/dist/components/message-scroller/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface MessageScrollerProps {
+    children: ReactNode;
+    /** The log's accessible name. */
+    label: string;
+    /** The jump-to-latest button's name, shown once the reader has scrolled up. */
+    jumpLabel: string;
+    /** Hold still: no following while true (an answer is open for editing). */
+    paused?: boolean;
+    /** Classes for the box (it scrolls itself: give it a height, or a flex parent). */
+    className?: string;
+    /** Classes for the column inside (width, padding). */
+    contentClassName?: string;
+}
+
+/**
+ * A conversation's scrolling area (shadcn's Message Scroller, on the
+ * library's tokens). It follows new messages while the reader is at the end,
+ * stops when they scroll up to read, and offers a round "jump to latest"
+ * button until they are back. A `log` for assistive technology, so new
+ * messages are announced politely. It scrolls in `ScrollArea`: a thin overlay
+ * thumb that appears while the pointer is over the thread, with no gutter
+ * beside the text.
+ */
+declare function MessageScroller({ children, label, jumpLabel, paused, className, contentClassName }: MessageScrollerProps): React.JSX.Element;
+
+export { MessageScroller, type MessageScrollerProps };

package/dist/components/message-scroller/index.js

@@ -0,0 +1,2 @@
+import { MessageScroller } from "./message-scroller.js";
+export { MessageScroller };

package/dist/components/message-scroller/message-scroller.js

@@ -0,0 +1,65 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { ScrollArea } from "../../core/scroll-area.js";
+import { useFollowBottom } from "./_hooks/use-follow-bottom.js";
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
+//#region src/components/message-scroller/message-scroller.tsx
+var VIEWPORT = "[data-radix-scroll-area-viewport]";
+var THUMB_ON_HOVER = "[&_[data-orientation=vertical]]:opacity-0 [&_[data-orientation=vertical]]:transition-opacity [&_[data-orientation=vertical]]:duration-200 hover:[&_[data-orientation=vertical]]:opacity-100 focus-within:[&_[data-orientation=vertical]]:opacity-100 motion-reduce:[&_[data-orientation=vertical]]:transition-none [&_[data-orientation=vertical]>div]:bg-foreground/25";
+/**
+* A conversation's scrolling area (shadcn's Message Scroller, on the
+* library's tokens). It follows new messages while the reader is at the end,
+* stops when they scroll up to read, and offers a round "jump to latest"
+* button until they are back. A `log` for assistive technology, so new
+* messages are announced politely. It scrolls in `ScrollArea`: a thin overlay
+* thumb that appears while the pointer is over the thread, with no gutter
+* beside the text.
+*/
+function MessageScroller({ children, label, jumpLabel, paused = false, className, contentClassName }) {
+	const area = useRef(null);
+	const viewport = useRef(null);
+	const content = useRef(null);
+	const end = useRef(null);
+	useLayoutEffect(() => {
+		viewport.current = area.current?.querySelector(VIEWPORT) ?? null;
+	}, []);
+	const { atEnd, toEnd } = useFollowBottom(viewport, content, end, paused);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "message-scroller",
+		className: cn("relative min-h-0 flex-1", className),
+		children: [/* @__PURE__ */ jsx(ScrollArea, {
+			ref: area,
+			type: "auto",
+			role: "log",
+			"aria-label": label,
+			"aria-relevant": "additions",
+			className: cn("h-full [&_[data-radix-scroll-area-viewport]]:overscroll-contain", THUMB_ON_HOVER),
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: content,
+				className: contentClassName,
+				children: [children, /* @__PURE__ */ jsx("div", {
+					ref: end,
+					"aria-hidden": true,
+					className: "h-px"
+				})]
+			})
+		}), !atEnd && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-x-0 bottom-3 z-20 flex justify-center",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				radius: "full",
+				variant: "outline",
+				color: "gray",
+				onClick: toEnd,
+				"aria-label": jumpLabel,
+				startIcon: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" }),
+				className: "pointer-events-auto bg-card shadow-md"
+			})
+		})]
+	});
+}
+//#endregion
+export { MessageScroller };

package/dist/components/mini-bar-chart/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+/** `default` bars sit apart; `thin` packs many (a position among dozens) with hairline gaps. */
+type MiniBarChartDensity = "default" | "thin";
+interface MiniBarChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "color" | "children"> {
+    /** One bar per value, left to right. Negative values draw as zero. */
+    values: readonly number[];
+    /**
+     * What the chart shows, read out in place of the bars ("Likes per build,
+     * oldest to newest: 1, 3, 0"). Required: the bars themselves are hidden from
+     * assistive technology.
+     */
+    label: string;
+    /** The bar to emphasise; the others fade back. */
+    highlightIndex?: number;
+    /** Bar colour. Default `primary`. `currentColor` follows the text colour (a chart on a filled tile). */
+    color?: Color;
+    density?: MiniBarChartDensity;
+    /** Height in CSS pixels. Default 32. */
+    height?: number;
+    /**
+     * What a bar says on hover ("Minecraft · 31 flashes"). Each bar then takes
+     * the chart's full height as its hover target and brightens while hovered.
+     * Return `null` for a bar with nothing to say. A visual extra only: `label`
+     * remains what assistive technology reads.
+     */
+    barTooltip?: (value: number, index: number) => ReactNode;
+}
+
+/**
+ * A row of bars with no axes, sized to sit inside a card (`StatCard`'s
+ * `visual`): the shape of a few numbers at a glance. The tallest value fills
+ * the height; a zero draws as a faint stub rather than nothing. With
+ * `barTooltip`, each bar names itself on hover.
+ */
+declare const MiniBarChart: React.ForwardRefExoticComponent<MiniBarChartProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MiniBarChart, type MiniBarChartDensity, type MiniBarChartProps };

package/dist/components/mini-bar-chart/index.js

@@ -0,0 +1,2 @@
+import { MiniBarChart } from "./mini-bar-chart.js";
+export { MiniBarChart };

package/dist/components/mini-bar-chart/mini-bar-chart.js

@@ -0,0 +1,93 @@
+import { cn } from "../../utils/cn.js";
+import { resolveColor } from "../../utils/color.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/mini-bar-chart/mini-bar-chart.tsx
+var DEFAULT_HEIGHT_PX = 32;
+/** A zero is a short stub, so "nothing yet" still reads as a bar. */
+var STUB_SHARE = .12;
+var DENSITY_CLASS = {
+	default: {
+		row: "gap-1",
+		bar: "rounded-sm"
+	},
+	thin: {
+		row: "gap-px",
+		bar: "rounded-[1px]"
+	}
+};
+function Bar({ share, faded, highlighted, className, style }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-highlighted": highlighted || void 0,
+		className: cn("w-full min-w-px transition-[height,opacity] duration-300 motion-reduce:transition-none", className, faded && "opacity-25 group-hover/bar:opacity-60"),
+		style: {
+			...style,
+			height: `${Math.max(share, STUB_SHARE) * 100}%`
+		}
+	});
+}
+/**
+* A row of bars with no axes, sized to sit inside a card (`StatCard`'s
+* `visual`): the shape of a few numbers at a glance. The tallest value fills
+* the height; a zero draws as a faint stub rather than nothing. With
+* `barTooltip`, each bar names itself on hover.
+*/
+var MiniBarChart = React$1.forwardRef(function MiniBarChart({ values, label, highlightIndex, color = "primary", density = "default", height = DEFAULT_HEIGHT_PX, barTooltip, className, style, ...props }, ref) {
+	const max = Math.max(0, ...values);
+	const fill = color === "currentColor" ? {
+		className: "bg-current",
+		style: void 0
+	} : resolveColor(color, "bg");
+	const d = DENSITY_CLASS[density];
+	const bars = values.map((raw, index) => {
+		const value = Math.max(0, raw);
+		const empty = value === 0;
+		const bar = /* @__PURE__ */ jsx(Bar, {
+			share: empty || max === 0 ? STUB_SHARE : value / max,
+			faded: empty || highlightIndex !== void 0 && index !== highlightIndex,
+			highlighted: index === highlightIndex,
+			className: cn(d.bar, fill.className),
+			style: fill.style
+		});
+		const tip = barTooltip?.(value, index);
+		if (tip == null) return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "flex h-full min-w-px flex-1 items-end",
+			children: bar
+		}, index);
+		return /* @__PURE__ */ jsxs(Tooltip, {
+			side: "top",
+			sideOffset: 6,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "group/bar flex h-full min-w-px flex-1 cursor-default items-end",
+					children: bar
+				})
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: tip })]
+		}, index);
+	});
+	const chart = /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "img",
+		"aria-label": label,
+		className: cn("flex w-full items-end", d.row, className),
+		style: {
+			...style,
+			height
+		},
+		...props,
+		children: bars
+	});
+	return barTooltip ? /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 0,
+		closeDelay: 0,
+		children: chart
+	}) : chart;
+});
+MiniBarChart.displayName = "MiniBarChart";
+//#endregion
+export { MiniBarChart };

package/dist/components/monospace-content/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { A as AlertColor } from '../../alert.props-CcKo49Rb.js';
+import { S as Size } from '../../index-BQANnKs9.js';
+import '../../variant-D81RhpbR.js';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../icon-avatar.props-RYtw2eSW.js';
+import '../../icon-text-action-card.props-B2ggncUK.js';
+
+interface MonospaceContentProps {
+    title?: ReactNode;
+    value: string;
+    /** Surface color of the value block. Also accepts the brand `"silver"` value. */
+    color?: AlertColor;
+    /**
+     * Hide the value behind mask characters — for secrets such as API keys or passwords.
+     * Copying still puts the real value on the clipboard.
+     *
+     * Masking is presentational: the value stays in the DOM, so this is a UI guard, not a
+     * security boundary.
+     *
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Show an eye toggle that reveals the masked value. Only meaningful when `mask` is `true`;
+     * set to `false` to keep the value permanently masked while still allowing copy.
+     *
+     * @default true
+     */
+    allowUnmask?: boolean;
+    /**
+     * Scale of the title, value text, surface padding and action buttons.
+     *
+     * @default "default"
+     */
+    size?: Size;
+    className?: string;
+}
+
+declare const MonospaceContent: React.ForwardRefExoticComponent<MonospaceContentProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MonospaceContent, type MonospaceContentProps };

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

@@ -0,0 +1,2 @@
+import { MonospaceContent } from "./monospace-content.js";
+export { MonospaceContent };

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

@@ -2,8 +2,8 @@ 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 { CopiableText } from "../copiable-text/copiable-text.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeOff } from "lucide-react";

package/dist/components/nav-bar/index.d.ts

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { ReactNode, RefObject, ElementType } from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+interface NavBarMenuItem {
+    /** Unique identifier, used as React key and for active-state matching. */
+    id: string;
+    /** Display label for the menu item. */
+    label: string;
+    /**
+     * Destination path for link-type items. When provided, the item renders as
+     * a link (via `linkComponent` or a plain `<a>`). When omitted, the item
+     * renders as a `<button>`.
+     */
+    href?: string;
+    /** Click handler. For items that also have `href`, fires alongside navigation. */
+    onClick?: () => void;
+    /**
+     * Rich content panel displayed in a full-width dropdown below the navbar
+     * when this item is activated. Items with `details` show a ChevronDown icon.
+     *
+     * The panel continues the bar's frame: it takes the bar's side border (or
+     * its bottom border when it has none) and rounds off with the bar's corner
+     * radius, while the bar's bottom corners square off. Put a border or radius
+     * on the NavBar itself (`className`) for the panel to continue it; a frame
+     * drawn by a wrapper element is not continued. Items collapsed into "More"
+     * open the same panel. In the mobile drawer, the details open as a sub-view.
+     */
+    details?: ReactNode;
+    /** Icon rendered before the label. */
+    icon?: ReactNode;
+    /** When true, the item is rendered as disabled (non-interactive, dimmed). */
+    disabled?: boolean;
+}
+type NavBarPosition = 'sticky' | 'fixed' | 'static';
+interface NavBarProps {
+    /** Logo element rendered on the left side of the navbar. */
+    logo?: ReactNode;
+    /** Array of menu item configurations rendered in the center. */
+    items: NavBarMenuItem[];
+    /** Content rendered on the right side (e.g. account menu, search, CTA buttons). */
+    rightContent?: ReactNode;
+    /**
+     * Controlled: the `id` of the currently active menu item. When set, the
+     * component is fully controlled — `defaultActiveId` is ignored.
+     */
+    activeId?: string;
+    /** Uncontrolled: the `id` of the initially active menu item. */
+    defaultActiveId?: string;
+    /** Fires when a menu item is activated (clicked or navigated). */
+    onActiveChange?: (id: string) => void;
+    /**
+     * Controlled: the `id` of the menu item whose details panel is open,
+     * or `null` when no panel is open. When set, `onDetailsPanelChange`
+     * must also be provided.
+     */
+    openDetailsId?: string | null;
+    /** Fires when the details panel should open or close. */
+    onDetailsPanelChange?: (id: string | null) => void;
+    /**
+     * How a desktop item opens its details panel.
+     * - `"click"` (default): the item is a button; a click toggles the panel.
+     * - `"hover"`: pointing at the item opens its panel after a short pause,
+     *   and it stays open while the pointer is over the item or the panel. An
+     *   item that also has `href` stays a link, so a click goes there. From the
+     *   keyboard, ArrowDown on the item opens the panel and moves focus into it;
+     *   Escape closes it and returns focus to the item. Touch never opens on
+     *   hover. Items in "More" and the mobile drawer keep opening on click.
+     */
+    openDetailsOn?: 'click' | 'hover';
+    /**
+     * Positioning mode.
+     * - `"sticky"` (default): sticks to the top on scroll via `position: sticky`.
+     * - `"fixed"`: fixed to the viewport top (consumer must add padding-top to body).
+     * - `"static"`: flows normally in the document.
+     */
+    position?: NavBarPosition;
+    /** Height of the navbar. Defaults to `"var(--espd-navbar-height)"` (3.5rem). */
+    height?: string;
+    /**
+     * When true, navbar smoothly transforms from full-width to a floating
+     * rounded pill as the user scrolls down, and back on scroll up.
+     * Disabled on mobile. Default `false`.
+     */
+    morphOnScroll?: boolean;
+    /** Scroll distance in pixels to trigger the morph transition. Default `50`. */
+    morphScrollThreshold?: number;
+    /**
+     * Ref to a scrollable container element for the morph trigger. When provided,
+     * the scroll hook listens to this element's `scrollTop` instead of `window.scrollY`.
+     * Useful when the navbar is inside a scrollable panel rather than the page itself.
+     */
+    morphScrollContainer?: RefObject<HTMLElement | null>;
+    /** Label for the "More" overflow trigger button. Default `"More"`. */
+    moreLabel?: string;
+    /**
+     * Router-aware Link component for internal navigation. Receives `to`,
+     * `className`, `children`, plus any additional HTML anchor attributes.
+     * If omitted, items with `href` render as plain `<a>` elements.
+     */
+    linkComponent?: ElementType;
+    /** Title shown in the mobile Sheet header. Falls back to no title. */
+    mobileMenuTitle?: string;
+    /**
+     * Custom trigger element for the mobile hamburger menu. When provided,
+     * replaces the default hamburger icon button.
+     */
+    mobileMenuTrigger?: ReactNode;
+    /**
+     * Accent color applied to the active item and details-panel highlights.
+     * Accepts any preset token (`"primary"`, `"error"`, …) or an arbitrary
+     * CSS color string (hex, rgb, var(…)). Default `"primary"`.
+     */
+    color?: Color;
+    /** Additional class names merged onto the root `<nav>` element. */
+    className?: string;
+    /**
+     * Class names merged onto the root `<nav>` only while the page is scrolled
+     * to the top (within `morphScrollThreshold`) — for a page that opens with a
+     * full-bleed hero the bar should melt into, e.g. `"dark border-transparent"`
+     * over a dark band. Past the threshold (and once morphed) the bar returns to
+     * its normal look. Works with or without `morphOnScroll`, on mobile too.
+     *
+     * With `morphOnScroll`, the class returns the moment the page is back at
+     * the top, while the pill is still widening and sliding up into place —
+     * so paint the hero's colour behind the bar as well (the hero extending
+     * under it, or a backdrop at the top of the page). Otherwise the page
+     * shows around the re-themed bar for that moment.
+     *
+     * An open details panel takes the same classes while they apply, so a
+     * `dark` bar hangs a dark panel even though the panel is portaled out of
+     * the bar's scope. Hanging from the full-width bar, the panel is opaque.
+     */
+    topClassName?: string;
+    /**
+     * The bar's background while `topClassName` applies: `"translucent"`
+     * (default — the usual frosted 80%) or `"solid"`, fully opaque, so a bar
+     * re-themed by `topClassName` matches the hero under it exactly instead of
+     * letting the page behind it tint it.
+     */
+    topBackground?: "translucent" | "solid";
+    /** Additional class names merged onto the menu items container. */
+    itemsClassName?: string;
+}
+
+declare function NavBar({ logo, items, rightContent, activeId: activeIdProp, defaultActiveId, onActiveChange, openDetailsId: openDetailsIdProp, onDetailsPanelChange, openDetailsOn, position, height, morphOnScroll, morphScrollThreshold, morphScrollContainer, moreLabel, linkComponent, color, mobileMenuTitle, mobileMenuTrigger, className, topClassName, topBackground, itemsClassName, }: NavBarProps): React.JSX.Element;
+
+export { NavBar, type NavBarMenuItem, type NavBarPosition, type NavBarProps };

package/dist/components/nav-bar/index.js

@@ -0,0 +1,2 @@
+import { NavBar } from "./nav-bar.js";
+export { NavBar };