@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/thumbnail-strip/index.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+interface ThumbnailStripItem {
+    /** Stable key. */
+    id: string;
+    /** The thumbnail picture. */
+    src: string;
+    /** What the picture shows ("Day", "The wiring"): read in the thumbnail's name. */
+    label: string;
+}
+/** Accessible names. Pass translated strings; English is the fallback. */
+interface ThumbnailStripLabels {
+    /** Names the row. Default "Pictures". */
+    group: string;
+    /** The left arrow. Default "Scroll back". */
+    previous: string;
+    /** The right arrow. Default "Scroll on". */
+    next: string;
+    /** One thumbnail, 1-based. Default `Show picture ${index} of ${total}: ${label}`. */
+    show: (label: string, index: number, total: number) => string;
+}
+type ThumbnailStripSize = "sm" | "default";
+interface ThumbnailStripProps {
+    items: ThumbnailStripItem[];
+    /** The picture on show, by index into `items`; its thumbnail is pressed and kept in view. */
+    activeIndex: number;
+    /** A thumbnail was chosen. */
+    onSelect: (index: number) => void;
+    /** `sm`: 80×60 thumbnails, for a phone. Default `default` (96×72). */
+    size?: ThumbnailStripSize;
+    labels?: Partial<ThumbnailStripLabels>;
+    className?: string;
+}
+
+/**
+ * A row of thumbnails under a picture: one per photo, the one on show pressed
+ * and kept in view. When the row runs past its edges, the side with more
+ * shows an arrow over a fade; nothing is drawn when everything fits.
+ */
+declare function ThumbnailStrip({ items, activeIndex, onSelect, size, labels, className }: ThumbnailStripProps): React.JSX.Element;
+
+export { ThumbnailStrip, type ThumbnailStripItem, type ThumbnailStripLabels, type ThumbnailStripProps, type ThumbnailStripSize };

package/dist/components/thumbnail-strip/index.js

@@ -0,0 +1,2 @@
+import { ThumbnailStrip } from "./thumbnail-strip.js";
+export { ThumbnailStrip };

package/dist/components/thumbnail-strip/thumbnail-strip.js

@@ -0,0 +1,124 @@
+import { cn } from "../../utils/cn.js";
+import { useScrollEdges } from "./use-scroll-edges.js";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/components/thumbnail-strip/thumbnail-strip.tsx
+var DEFAULT_LABELS = {
+	group: "Pictures",
+	previous: "Scroll back",
+	next: "Scroll on",
+	show: (label, index, total) => `Show picture ${index} of ${total}: ${label}`
+};
+var THUMB_SIZES = {
+	sm: "h-15 w-20",
+	default: "h-18 w-24"
+};
+var PAGE_FRACTION = .8;
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** Scrolls `el` so `thumb` is inside it, without moving the page (scrollIntoView would). */
+function keepInView(el, thumb) {
+	const left = thumb.offsetLeft - el.offsetLeft;
+	const right = left + thumb.offsetWidth;
+	const behavior = prefersReducedMotion() ? "auto" : "smooth";
+	if (left < el.scrollLeft) el.scrollTo({
+		left: Math.max(0, left - 8),
+		behavior
+	});
+	else if (right > el.scrollLeft + el.clientWidth) el.scrollTo({
+		left: right - el.clientWidth + 8,
+		behavior
+	});
+}
+/** One side's arrow over a fade into the strip's surface; both there only while that side has more. */
+function Edge({ side, shown, label, onClick }) {
+	const Icon = side === "left" ? ChevronLeft : ChevronRight;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": !shown,
+		className: cn("pointer-events-none absolute inset-y-0 z-10 flex w-16 items-center transition-opacity motion-reduce:transition-none", side === "left" ? "left-0 justify-start rounded-l-xl bg-linear-to-r from-muted from-30% to-transparent pl-2" : "right-0 justify-end rounded-r-xl bg-linear-to-l from-muted from-30% to-transparent pr-2", shown ? "opacity-100" : "opacity-0"),
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": label,
+			tabIndex: shown ? 0 : -1,
+			disabled: !shown,
+			onClick,
+			className: cn("flex size-8 items-center justify-center rounded-full border border-border bg-card text-foreground shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", shown && "pointer-events-auto"),
+			children: /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": true,
+				className: "size-4"
+			})
+		})
+	});
+}
+/**
+* A row of thumbnails under a picture: one per photo, the one on show pressed
+* and kept in view. When the row runs past its edges, the side with more
+* shows an arrow over a fade; nothing is drawn when everything fits.
+*/
+function ThumbnailStrip({ items, activeIndex, onSelect, size = "default", labels, className }) {
+	const text = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	const scrollerRef = useRef(null);
+	const thumbRefs = useRef([]);
+	const { canScrollLeft, canScrollRight } = useScrollEdges(scrollerRef, items.length);
+	useEffect(() => {
+		const el = scrollerRef.current;
+		const thumb = thumbRefs.current[activeIndex];
+		if (el && thumb) keepInView(el, thumb);
+	}, [activeIndex]);
+	function scrollBy(direction) {
+		const el = scrollerRef.current;
+		if (el) el.scrollBy({
+			left: direction * el.clientWidth * PAGE_FRACTION,
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "thumbnail-strip",
+		className: cn("relative rounded-xl bg-muted", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollerRef,
+				role: "group",
+				"aria-label": text.group,
+				className: "flex snap-x gap-2 overflow-x-auto p-2 scrollbar-none",
+				children: items.map((item, index) => /* @__PURE__ */ jsx("button", {
+					ref: (el) => {
+						thumbRefs.current[index] = el;
+					},
+					type: "button",
+					"aria-pressed": index === activeIndex,
+					"aria-label": text.show(item.label, index + 1, items.length),
+					onClick: () => onSelect(index),
+					className: cn("shrink-0 snap-start overflow-hidden rounded-lg border-2 bg-card outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", THUMB_SIZES[size], index === activeIndex ? "border-primary" : "border-transparent opacity-80 hover:opacity-100"),
+					children: /* @__PURE__ */ jsx("img", {
+						src: item.src,
+						alt: "",
+						loading: "lazy",
+						decoding: "async",
+						draggable: false,
+						className: "size-full object-cover"
+					})
+				}, item.id))
+			}),
+			/* @__PURE__ */ jsx(Edge, {
+				side: "left",
+				shown: canScrollLeft,
+				label: text.previous,
+				onClick: () => scrollBy(-1)
+			}),
+			/* @__PURE__ */ jsx(Edge, {
+				side: "right",
+				shown: canScrollRight,
+				label: text.next,
+				onClick: () => scrollBy(1)
+			})
+		]
+	});
+}
+//#endregion
+export { ThumbnailStrip };

package/dist/components/thumbnail-strip/use-scroll-edges.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "react";
+//#region src/components/thumbnail-strip/use-scroll-edges.ts
+var SLACK_PX = 1;
+function edgesOf(el) {
+	return {
+		canScrollLeft: el.scrollLeft > SLACK_PX,
+		canScrollRight: el.scrollLeft + el.clientWidth < el.scrollWidth - SLACK_PX
+	};
+}
+/** Whether a horizontal scroller has more to show on either side; follows scrolling and resizing. */
+function useScrollEdges(ref, contentKey) {
+	const [edges, setEdges] = useState({
+		canScrollLeft: false,
+		canScrollRight: false
+	});
+	const measure = useCallback(() => {
+		const el = ref.current;
+		if (!el) return;
+		const next = edgesOf(el);
+		setEdges((prev) => prev.canScrollLeft === next.canScrollLeft && prev.canScrollRight === next.canScrollRight ? prev : next);
+	}, [ref]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		measure();
+		el.addEventListener("scroll", measure, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+		observer?.observe(el);
+		return () => {
+			el.removeEventListener("scroll", measure);
+			observer?.disconnect();
+		};
+	}, [
+		ref,
+		measure,
+		contentKey
+	]);
+	return edges;
+}
+//#endregion
+export { useScrollEdges };

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { a as InputProps } from '../../input-CYI1hhGc.js';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../index-BQANnKs9.js';
+
+type TimePickerProps = Omit<InputProps, "type" | "endIcon"> & {
+    /** When true, do not render the decorative clock icon. */
+    hideIcon?: boolean;
+};
+
+declare const TimePicker: React.ForwardRefExoticComponent<Omit<TimePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+
+export { TimePicker, type TimePickerProps };

package/dist/components/time-picker/index.js

@@ -0,0 +1,2 @@
+import { TimePicker } from "./time-picker.js";
+export { TimePicker };

package/dist/components/timeline/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+interface TimelineItem {
+    /** Stable key. */
+    id: string;
+    /** What happened. */
+    title: ReactNode;
+    /** When — usually a `SimplifiedDate`. Drawn in the mono face under the title. */
+    time?: ReactNode;
+    /** The dot's colour. Default `primary`. */
+    color?: Color;
+}
+interface TimelineLabels {
+    /** The button that reveals the next page; `count` is how many it reveals. */
+    showMore: (count: number) => string;
+}
+interface TimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, "children"> {
+    /** Newest first, as a feed reads. */
+    items: readonly TimelineItem[];
+    /**
+     * Items shown at first, and how many more each "Show more" reveals. Default
+     * 5. `Infinity` shows them all with no button.
+     */
+    pageSize?: number;
+    /** Already-translated labels; English when absent. */
+    labels?: Partial<TimelineLabels>;
+}
+
+/**
+ * A short feed of events, newest first: a dot per item on a connecting line,
+ * the title, and when under it. Long feeds page — the first `pageSize` items,
+ * then "Show N more" reveals the next page and moves focus to its first item,
+ * so a keyboard user lands where the new items start.
+ */
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLOListElement>>;
+
+export { Timeline, type TimelineItem, type TimelineLabels, type TimelineProps };

package/dist/components/timeline/index.js

@@ -0,0 +1,2 @@
+import { Timeline } from "./timeline.js";
+export { Timeline };

package/dist/components/timeline/timeline.js

@@ -0,0 +1,85 @@
+import { cn } from "../../utils/cn.js";
+import { resolveColor } from "../../utils/color.js";
+import { Button } from "../button/button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region src/components/timeline/timeline.tsx
+var DEFAULT_PAGE_SIZE = 5;
+var DEFAULT_LABELS = { showMore: (count) => `Show ${count} more` };
+function Dot({ color = "primary" }) {
+	const fill = resolveColor(color, "bg");
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("relative z-10 mt-1.5 size-2 shrink-0 rounded-full ring-4 ring-card", fill.className),
+		style: fill.style
+	});
+}
+/**
+* A short feed of events, newest first: a dot per item on a connecting line,
+* the title, and when under it. Long feeds page — the first `pageSize` items,
+* then "Show N more" reveals the next page and moves focus to its first item,
+* so a keyboard user lands where the new items start.
+*/
+var Timeline = React$1.forwardRef(function Timeline({ items, pageSize = DEFAULT_PAGE_SIZE, labels, className, ...props }, ref) {
+	const text = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	const [shown, setShown] = React$1.useState(pageSize);
+	const focusIndex = React$1.useRef(null);
+	const itemRefs = React$1.useRef([]);
+	React$1.useEffect(() => {
+		if (focusIndex.current === null) return;
+		itemRefs.current[focusIndex.current]?.focus();
+		focusIndex.current = null;
+	}, [shown]);
+	const visible = items.slice(0, shown);
+	const left = items.length - visible.length;
+	const next = Math.min(pageSize, left);
+	function showMore() {
+		focusIndex.current = visible.length;
+		setShown((count) => count + pageSize);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("ol", {
+			ref,
+			className: cn("m-0 flex list-none flex-col p-0", className),
+			...props,
+			children: visible.map((item, index) => /* @__PURE__ */ jsxs("li", {
+				ref: (node) => {
+					itemRefs.current[index] = node;
+				},
+				tabIndex: -1,
+				className: cn("relative flex gap-3 rounded-sm pb-4 outline-none last:pb-0 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", index >= pageSize && "motion-safe:animate-rise-in"),
+				children: [
+					index < visible.length - 1 ? /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "absolute top-3 bottom-0 left-[3px] w-px bg-border"
+					}) : null,
+					/* @__PURE__ */ jsx(Dot, { color: item.color }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col gap-0.5",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "min-w-0 text-sm text-foreground [overflow-wrap:anywhere]",
+							children: item.title
+						}), item.time != null ? /* @__PURE__ */ jsx("div", {
+							className: "font-mono text-xs text-foreground-secondary",
+							children: item.time
+						}) : null]
+					})
+				]
+			}, item.id))
+		}), next > 0 ? /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			endIcon: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true }),
+			onClick: showMore,
+			children: text.showMore(next)
+		}) : null]
+	});
+});
+Timeline.displayName = "Timeline";
+//#endregion
+export { Timeline };

package/dist/components/toast/index.d.ts

@@ -0,0 +1,56 @@
+import * as sonner from 'sonner';
+import { ToasterProps } from 'sonner';
+import * as React from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import { f as Variant } from '../../variant-D81RhpbR.js';
+
+type ToastColor = Color;
+type ToastVariant = Variant;
+type ToastType = "error" | "info" | "warning" | "success";
+type ToastId = string | number;
+/** `radius` and `elevation` shape this toast (overlay role tokens otherwise). */
+interface ToastProps extends Pick<StyleAxisProps, "radius" | "elevation"> {
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Semantic category: sets the default icon and color when not provided. */
+    type?: ToastType;
+    color?: ToastColor;
+    hideIcon?: boolean;
+    action?: React.ReactNode;
+    className?: string;
+    variant?: ToastVariant;
+}
+interface ToastOptions {
+    id?: ToastId;
+    duration?: number;
+    position?: ToasterProps["position"];
+    toasterId?: string;
+    dismissible?: boolean;
+    closeButton?: boolean;
+}
+type ToastInput = React.ReactNode | ToastProps;
+type ToastToasterProps = ToasterProps & {
+    /**
+     * Default surface variant for all toasts rendered under this toaster.
+     * Individual `toast()` calls can still set `variant` to override.
+     */
+    toastVariant?: ToastVariant;
+};
+
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+declare const Toaster: React.ForwardRefExoticComponent<sonner.ToasterProps & {
+    toastVariant?: ToastVariant;
+} & React.RefAttributes<HTMLElement>>;
+declare function show(input: ToastInput, options?: ToastOptions): string | number;
+declare const toast: typeof show & {
+    show: typeof show;
+    success: (input: ToastInput, options?: ToastOptions) => string | number;
+    error: (input: ToastInput, options?: ToastOptions) => string | number;
+    info: (input: ToastInput, options?: ToastOptions) => string | number;
+    warning: (input: ToastInput, options?: ToastOptions) => string | number;
+    dismiss: (id?: number | string) => string | number;
+};
+
+export { Toast, type ToastColor, type ToastId, type ToastInput, type ToastOptions, type ToastProps, type ToastToasterProps, type ToastType, type ToastVariant, Toaster, toast };

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+import { Toast, Toaster, toast } from "./toast.js";
+export { Toast, Toaster, toast };

package/dist/components/toast/toast.js

@@ -1,6 +1,7 @@
 import { cn } from "../../utils/cn.js";
 import { isPresetColor } from "../../utils/color.js";
 import { resolveVariantStyles } from "../../utils/variant.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { VariantGradientUnderlay } from "../../utils/variant-gradient-underlay.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -27,7 +28,7 @@ function defaultIconFromColor(color) {
 	return type != null ? typeIconMap[type] : void 0;
 }
 function isToastProps(input) {
-	return input != null && typeof input === "object" && !React$1.isValidElement(input) && ("title" in input || "children" in input || "type" in input || "color" in input || "icon" in input || "hideIcon" in input || "action" in input || "variant" in input);
+	return input != null && typeof input === "object" && !React$1.isValidElement(input) && ("title" in input || "children" in input || "type" in input || "color" in input || "icon" in input || "hideIcon" in input || "action" in input || "variant" in input || "radius" in input || "elevation" in input);
 }
 function normalizeToastInput(input, type) {
 	if (isToastProps(input)) return {
@@ -49,44 +50,53 @@ function resolveToastOptions(props, options) {
 		closeButton: options?.closeButton
 	};
 }
-var Toast = React$1.forwardRef(({ icon, title, children, type, color, variant, hideIcon = false, action, className }, ref) => {
+var Toast = React$1.forwardRef(({ icon, title, children, type, color, variant, hideIcon = false, action, className, radius, elevation }, ref) => {
 	const defaultVariantFromToaster = React$1.useContext(ToastDefaultVariantContext);
 	const resolvedVariant = variant ?? defaultVariantFromToaster ?? "soft";
 	const resolvedColor = color ?? type ?? "primary";
 	const resolvedIcon = icon ?? (type != null ? typeIconMap[type] : void 0) ?? (color != null ? defaultIconFromColor(color) : void 0) ?? /* @__PURE__ */ jsx(CircleAlert, { className: "h-4 w-4" });
 	const showIcon = !hideIcon && resolvedIcon != null;
 	const styles = resolveVariantStyles(resolvedVariant, resolvedColor);
-	return /* @__PURE__ */ jsxs("div", {
+	const axes = useStyleAxes({
+		radius,
+		elevation
+	}, ["radius", "elevation"]);
+	return /* @__PURE__ */ jsx("div", {
 		ref,
-		className: cn("relative flex w-full min-w-[min(20rem,calc(100vw-2rem))] max-w-[min(24rem,calc(100vw-2rem))] items-start gap-3 overflow-hidden rounded-lg px-4 py-3 shadow-lg", styles.container, className),
-		style: styles.containerStyle,
-		children: [
-			/* @__PURE__ */ jsx(VariantGradientUnderlay, {
-				layers: styles.gradientHoverLayers,
-				layersInline: styles.gradientHoverLayersInline,
-				silverShine: styles.silverShine,
-				silverBorder: styles.silverBorder
-			}),
-			showIcon && /* @__PURE__ */ jsx("div", {
-				className: "mt-0.5 shrink-0",
-				children: resolvedIcon
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 flex-col gap-1",
-				children: [title && /* @__PURE__ */ jsx("div", {
-					className: "font-medium leading-normal text-sm",
-					children: title
-				}), children && /* @__PURE__ */ jsx("div", {
-					className: cn("text-sm leading-normal", styles.description),
-					style: styles.descriptionStyle,
-					children
-				})]
-			}),
-			action && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0",
-				children: action
-			})
-		]
+		className: cn("relative w-full min-w-[min(20rem,calc(100vw-2rem))] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-overlay,var(--radius-lg)))] bg-popover text-popover-foreground shadow-[shadow:var(--espd-own-elevation,var(--espd-elevation-overlay,var(--shadow-lg)))]", className),
+		style: axes.style,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "toast-surface",
+			className: cn("relative flex w-full items-start gap-3 overflow-hidden rounded-[inherit] px-4 py-3", styles.container),
+			style: styles.containerStyle,
+			children: [
+				/* @__PURE__ */ jsx(VariantGradientUnderlay, {
+					layers: styles.gradientHoverLayers,
+					layersInline: styles.gradientHoverLayersInline,
+					silverShine: styles.silverShine,
+					silverBorder: styles.silverBorder
+				}),
+				showIcon && /* @__PURE__ */ jsx("div", {
+					className: "mt-0.5 shrink-0",
+					children: resolvedIcon
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-1",
+					children: [title && /* @__PURE__ */ jsx("div", {
+						className: "font-medium leading-normal text-sm",
+						children: title
+					}), children && /* @__PURE__ */ jsx("div", {
+						className: cn("text-sm leading-normal", styles.description),
+						style: styles.descriptionStyle,
+						children
+					})]
+				}),
+				action && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0",
+					children: action
+				})
+			]
+		})
 	});
 });
 Toast.displayName = "Toast";

package/dist/components/togglable-items-list/index.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { b as ButtonProps } from '../../button-BxJ7s6sR.js';
+import '../../button-BK-DIR_L.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../index-BQANnKs9.js';
+
+interface TogglableItem {
+    id: string;
+    label: string;
+}
+interface TogglableItemsListProps {
+    items: TogglableItem[];
+    checkedState: Record<string, boolean>;
+    onToggle: (id: string, checked: boolean) => void;
+    label: string;
+    icon: ReactNode;
+    triggerButtonVariant?: ButtonProps["variant"];
+    triggerButtonColor?: ButtonProps["color"];
+    triggerButtonSize?: "default" | "sm" | "lg" | "icon";
+    contentAlign?: "start" | "center" | "end";
+    contentClassName?: string;
+}
+declare function TogglableItemsList({ items, checkedState, onToggle, label, icon, triggerButtonVariant, triggerButtonColor, triggerButtonSize, contentAlign, contentClassName, }: TogglableItemsListProps): React.JSX.Element;
+
+export { type TogglableItem, TogglableItemsList, type TogglableItemsListProps };

package/dist/components/togglable-items-list/index.js

@@ -0,0 +1,2 @@
+import { TogglableItemsList } from "./togglable-items-list.js";
+export { TogglableItemsList };

package/dist/components/toggle-group/index.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+import { HTMLMotionProps } from 'motion/react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+type ToggleGroupProps$1 = React.ComponentProps<typeof ToggleGroup$1.Root>;
+type ToggleGroupItemProps$1 = Omit<React.ComponentProps<typeof ToggleGroup$1.Item>, 'asChild'> & HTMLMotionProps<'button'>;
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "sm" | "default" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+/**
+ * The group's frame. `default`: the control radius and the input border.
+ * `rounded`: a pill. `glow`: a pill whose border and halo take the group's
+ * colour — the same as `TabsList variant="glow"`, so the two sit together.
+ * `solid`: a pill on a hairline, the selected item filled with the colour —
+ * the same as `TabsList variant="solid"`.
+ */
+type ToggleGroupVariant = 'default' | 'rounded' | 'glow' | 'solid';
+type ToggleGroupProps = ToggleGroupProps$1 & Pick<VariantProps<typeof toggleVariants>, 'size'> & Pick<StyleAxisProps, 'radius'> & {
+    /** Preset theme token or CSS color string — drives the selected item highlight. */
+    color?: Color;
+    /** The frame: `default`, `rounded` (a pill), `glow` (a pill with a halo in `color`) or `solid` (the selected item filled with `color`). */
+    variant?: ToggleGroupVariant;
+};
+declare function ToggleGroup({ className, size, color, variant, children, style, radius, ...props }: ToggleGroupProps): React.JSX.Element;
+type ToggleGroupItemProps = ToggleGroupItemProps$1 & Pick<VariantProps<typeof toggleVariants>, 'size'>;
+declare function ToggleGroupItem({ className, children, size, ...props }: ToggleGroupItemProps): React.JSX.Element;
+
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupVariant };

package/dist/components/toggle-group/index.js

@@ -0,0 +1,2 @@
+import { ToggleGroup, ToggleGroupItem } from "../../core/animate-ui/components/radix/toggle-group.js";
+export { ToggleGroup, ToggleGroupItem };

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface ToolbarProps {
+    /** The toolbar's accessible name. */
+    label: string;
+    /** Controls at the start (a menu button, Back, a title). */
+    start?: ReactNode;
+    /** Controls in the middle, centred whatever the sides hold. */
+    center?: ReactNode;
+    /** Controls at the end (actions, toggles). */
+    end?: ReactNode;
+    /**
+     * `page` (default): the bar follows the page's theme. `dark`: always dark,
+     * whatever the theme — chrome that frames a workspace. Everything inside
+     * stays tokens; the bar carries the dark scope.
+     */
+    tone?: "page" | "dark";
+    className?: string;
+}
+
+/**
+ * A thin bar of small controls across the top of a work area — 44px, so
+ * 28px controls (`ToolbarButton`) sit in it with air on both sides. Three
+ * slots: the start and end share the width, so the centre is centred on the
+ * bar, not between whatever the sides happen to hold. A bottom rule in the
+ * border colour every panel edge uses, so the bar and the columns under it
+ * read as one grid. Left/Right arrows move between its controls.
+ */
+declare function Toolbar({ label, start, center, end, tone, className }: ToolbarProps): React.JSX.Element;
+
+interface ToolbarButtonProps {
+    /** The accessible name, and the tooltip unless `tooltip` says otherwise. */
+    label: string;
+    icon: ReactNode;
+    onClick: () => void;
+    /** A toggle's state (`aria-pressed`); omit for a plain action. */
+    pressed?: boolean;
+    /** The tooltip, when it should say more than the name (the name with its shortcut). */
+    tooltip?: string;
+    /** A small count over the icon. Hidden at 0. */
+    count?: number;
+    /** A dot over the icon: something new behind it. Say so in `label` too; the dot is drawn only. */
+    attention?: boolean;
+    /** `primary` for the one action that matters most (Run); the rest are quiet. */
+    color?: "primary" | "gray";
+    disabled?: boolean;
+    className?: string;
+}
+
+/**
+ * A 28px icon-only button for a `Toolbar`: its name is its tooltip, a toggle
+ * says whether it is pressed, and a count or a "something new" dot can sit
+ * over its icon. Quiet (ghost) unless it is the one primary action.
+ */
+declare function ToolbarButton({ label, icon, onClick, pressed, tooltip, count, attention, color, disabled, className }: ToolbarButtonProps): React.JSX.Element;
+
+export { Toolbar, ToolbarButton, type ToolbarButtonProps, type ToolbarProps };