@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/toolbar/index.js

@@ -0,0 +1,3 @@
+import { Toolbar } from "./toolbar.js";
+import { ToolbarButton } from "./toolbar-button.js";
+export { Toolbar, ToolbarButton };

package/dist/components/toolbar/toolbar-button.js

@@ -0,0 +1,40 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toolbar/toolbar-button.tsx
+/**
+* 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.
+*/
+function ToolbarButton({ label, icon, onClick, pressed, tooltip, count = 0, attention = false, color = "gray", disabled, className }) {
+	const primary = color === "primary";
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		size: "icon",
+		variant: primary ? "default" : "ghost",
+		color: primary ? "primary" : "gray",
+		hideRingOnHover: true,
+		"aria-label": label,
+		"aria-pressed": pressed,
+		tooltip: tooltip ?? label,
+		disabled,
+		onClick,
+		className: cn("relative size-7 shrink-0", pressed && !primary && "bg-accent text-accent-foreground", className),
+		children: [
+			icon,
+			attention && count === 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-attention": true,
+				className: "absolute top-0.5 right-0.5 size-2 rounded-full bg-error ring-2 ring-background"
+			}),
+			count > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-xs leading-none font-semibold text-primary-foreground",
+				children: count
+			})
+		]
+	});
+}
+//#endregion
+export { ToolbarButton };

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,56 @@
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/toolbar/toolbar.tsx
+var FOCUSABLE = "button:not([disabled]), a[href], [tabindex=\"0\"]";
+/** Left and Right arrows move between the toolbar's controls, as the toolbar role promises; Home and End jump to the ends. */
+function moveFocus(event) {
+	const step = {
+		ArrowRight: 1,
+		ArrowLeft: -1,
+		Home: "first",
+		End: "last"
+	}[event.key];
+	if (step === void 0) return;
+	const controls = Array.from(event.currentTarget.querySelectorAll(FOCUSABLE));
+	const at = controls.indexOf(document.activeElement);
+	if (controls.length === 0 || at < 0) return;
+	event.preventDefault();
+	let next = at;
+	if (step === "first") next = 0;
+	else if (step === "last") next = controls.length - 1;
+	else next = (at + step + controls.length) % controls.length;
+	controls[next]?.focus();
+}
+/**
+* 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.
+*/
+function Toolbar({ label, start, center, end, tone = "page", className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "toolbar",
+		"aria-label": label,
+		onKeyDown: moveFocus,
+		"data-slot": "toolbar",
+		className: cn("flex h-11 shrink-0 items-center gap-2 border-b border-border px-2", tone === "dark" ? "dark bg-sidebar text-foreground" : "bg-background", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 items-center gap-2",
+				children: start
+			}),
+			center && /* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 shrink-0 items-center justify-center",
+				children: center
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 items-center justify-end gap-2",
+				children: end
+			})
+		]
+	});
+}
+//#endregion
+export { Toolbar };

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ReactNode, ReactElement } from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+export { T as TooltipContent, a as TooltipContentProps, b as TooltipProvider, c as TooltipProviderProps, d as TooltipRoot, e as TooltipTrigger, f as TooltipTriggerProps } from '../../tooltip-C0bYa8a3.js';
+import 'motion/react';
+import '../../slot-DGErA9zi.js';
+
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type Align = 'start' | 'center' | 'end';
+/** `radius` and `elevation` shape the tooltip bubble (see TooltipContent). */
+interface TooltipProps extends Pick<StyleAxisProps, 'radius' | 'elevation'> {
+    content: ReactNode;
+    children: ReactElement;
+    side?: Side;
+    sideOffset?: number;
+    align?: Align;
+    alignOffset?: number;
+    openDelay?: number;
+    closeDelay?: number;
+    /**
+     * Caps the bubble's width so long content wraps: `xs` 20rem, `sm` 24rem,
+     * `md` 28rem. Unset, the bubble grows to fit its content (a short label).
+     */
+    maxWidth?: 'xs' | 'sm' | 'md';
+}
+
+declare function Tooltip({ content, children, side, sideOffset, align, alignOffset, openDelay, closeDelay, radius, elevation, maxWidth, }: TooltipProps): React.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/tooltip/index.js

@@ -0,0 +1,3 @@
+import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import Tooltip from "./tooltip.js";
+export { Tooltip, TooltipContent, TooltipProvider, Tooltip$1 as TooltipRoot, TooltipTrigger };

package/dist/components/tooltip/tooltip.js

@@ -1,7 +1,12 @@
 import { Tooltip as Tooltip$1, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tooltip/tooltip.tsx
-function Tooltip({ content, children, side, sideOffset, align, alignOffset, openDelay, closeDelay }) {
+var maxWidthClasses = {
+	xs: "max-w-xs",
+	sm: "max-w-sm",
+	md: "max-w-md"
+};
+function Tooltip({ content, children, side, sideOffset, align, alignOffset, openDelay, closeDelay, radius, elevation, maxWidth }) {
 	return /* @__PURE__ */ jsx(TooltipProvider, {
 		openDelay,
 		closeDelay,
@@ -13,7 +18,12 @@ function Tooltip({ content, children, side, sideOffset, align, alignOffset, open
 			children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
 				children
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: content })]
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				radius,
+				elevation,
+				className: maxWidth ? maxWidthClasses[maxWidth] : void 0,
+				children: content
+			})]
 		})
 	});
 }

package/dist/components/transfer-list/index.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+interface TransferItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+interface TransferListProps<T> {
+    sourceItems: T[];
+    targetItems: T[];
+    getItemId?: (item: T) => string;
+    getItemLabel?: (item: T) => string;
+    onChange: (targetItems: T[]) => void;
+    renderItem?: (item: T) => ReactNode;
+    searchable?: boolean;
+    disabled?: boolean;
+    sourceTitle: string;
+    targetTitle: string;
+    className?: string;
+    /**
+     * Maximum height of each panel. Panels grow with content up to this limit;
+     * list bodies scroll internally when content exceeds the available space.
+     */
+    maxHeight?: CSSProperties["maxHeight"];
+    /** Hidden inputs for native form submit (same pattern as SelectableCardList) */
+    name?: string;
+    form?: string;
+    isItemDisabled?: (item: T) => boolean;
+    /** Defaults to "Transfer list" */
+    ariaLabel?: string;
+}
+
+declare function TransferList<T>({ sourceItems, targetItems, getItemId, getItemLabel, onChange, renderItem, searchable, disabled, sourceTitle, targetTitle, className, name, form, isItemDisabled, ariaLabel, maxHeight, }: TransferListProps<T>): React.JSX.Element;
+
+export { type TransferItem, TransferList, type TransferListProps };

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

@@ -0,0 +1,2 @@
+import { TransferList } from "./transfer-list.js";
+export { TransferList };

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

@@ -106,7 +106,7 @@ function TransferListItems({ filteredItems, items, selectedIds, getItemId, getIt
 				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"),
+				className: cn("flex cursor-pointer items-center gap-2 rounded-[var(--espd-own-radius,var(--espd-radius-item,var(--radius-md)))] px-1 py-1.5", itemDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/50"),
 				children: [/* @__PURE__ */ jsx(Checkbox, {
 					checked,
 					disabled: itemDisabled,

package/dist/components/truncated-line-with-tooltip/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+type TruncatedLineWithTooltipProps = {
+    className?: string;
+    tooltipContent: ReactNode;
+    children: ReactNode;
+    /**
+     * How many lines show before the text is cut with an ellipsis: 1 (the
+     * default) to 6. Past one line it is clamped (a card's description) and
+     * measured by its height instead of its width.
+     */
+    lines?: number;
+};
+/**
+ * Truncation with a tooltip of the whole text, shown only when the text is
+ * actually cut (measured via DOM): one line by default, or a few (`lines`).
+ * An app's own {@link TooltipProvider} wins; without one it brings its own.
+ */
+declare function TruncatedLineWithTooltip({ className, tooltipContent, children, lines, }: TruncatedLineWithTooltipProps): React.JSX.Element;
+
+export { TruncatedLineWithTooltip, type TruncatedLineWithTooltipProps };

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

@@ -0,0 +1,2 @@
+import { TruncatedLineWithTooltip } from "./truncated-line-with-tooltip.js";
+export { TruncatedLineWithTooltip };

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

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../utils/cn.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import { useHasTooltipProvider } from "../../core/animate-ui/primitives/animate/tooltip.js";
+import { Tooltip, TooltipContent, TooltipProvider, 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
@@ -11,18 +12,29 @@ function hasTooltipContent(content) {
 	if (typeof content === "boolean") return false;
 	return true;
 }
+/** Written out in full so Tailwind finds them. */
+var CLAMP = {
+	2: "line-clamp-2",
+	3: "line-clamp-3",
+	4: "line-clamp-4",
+	5: "line-clamp-5",
+	6: "line-clamp-6"
+};
 /**
-* Single-line truncation with tooltip when overflow (measured via DOM).
-* Wrap in {@link TooltipProvider} at the tree root when using tooltips.
+* Truncation with a tooltip of the whole text, shown only when the text is
+* actually cut (measured via DOM): one line by default, or a few (`lines`).
+* An app's own {@link TooltipProvider} wins; without one it brings its own.
 */
-function TruncatedLineWithTooltip({ className, tooltipContent, children }) {
+function TruncatedLineWithTooltip({ className, tooltipContent, children, lines = 1 }) {
+	const clamp = CLAMP[lines];
 	const textRef = useRef(null);
 	const [isTruncated, setIsTruncated] = useState(false);
+	const hasTooltipProvider = useHasTooltipProvider();
 	const measure = useCallback(() => {
 		const el = textRef.current;
 		if (!el) return;
-		setIsTruncated(el.scrollWidth > el.clientWidth + 1);
-	}, []);
+		setIsTruncated(clamp ? el.scrollHeight > el.clientHeight + 1 : el.scrollWidth > el.clientWidth + 1);
+	}, [clamp]);
 	useLayoutEffect(() => {
 		measure();
 	}, [
@@ -39,11 +51,11 @@ function TruncatedLineWithTooltip({ className, tooltipContent, children }) {
 	}, [measure]);
 	const line = /* @__PURE__ */ jsx("span", {
 		ref: textRef,
-		className: cn("block min-w-0 truncate", className),
+		className: cn("block min-w-0", clamp ?? "truncate", className),
 		children
 	});
 	if (!(isTruncated && hasTooltipContent(tooltipContent))) return line;
-	return /* @__PURE__ */ jsxs(Tooltip, {
+	const tooltip = /* @__PURE__ */ jsxs(Tooltip, {
 		side: "top",
 		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			className: "block min-w-0 w-full cursor-inherit text-left",
@@ -56,6 +68,12 @@ function TruncatedLineWithTooltip({ className, tooltipContent, children }) {
 			})
 		})]
 	});
+	if (hasTooltipProvider) return tooltip;
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: tooltip
+	});
 }
 //#endregion
 export { TruncatedLineWithTooltip };

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { JSX, HTMLAttributes } from 'react';
+
+declare const TYPOGRAPHY_VARIANTS: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2", "subtitle1", "subtitle2"];
+type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
+/** Tailwind classes per variant — edit here to tune the type scale. */
+declare const typographyVariantClasses: Record<TypographyVariant, string>;
+/** Default semantic tag per variant (Material UI–aligned). */
+declare const typographyDefaultElement: Record<TypographyVariant, keyof JSX.IntrinsicElements>;
+
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    variant?: TypographyVariant;
+    /** Override the rendered element while keeping variant styles (e.g. `as="span"` with `variant="h1"`). */
+    as?: keyof JSX.IntrinsicElements;
+}
+
+declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
+
+export { TYPOGRAPHY_VARIANTS, Typography, type TypographyProps, type TypographyVariant, typographyDefaultElement, typographyVariantClasses };

package/dist/components/typography/index.js

@@ -0,0 +1,3 @@
+import { TYPOGRAPHY_VARIANTS, typographyDefaultElement, typographyVariantClasses } from "./typography-variants.js";
+import { Typography } from "./typography.js";
+export { TYPOGRAPHY_VARIANTS, Typography, typographyDefaultElement, typographyVariantClasses };

package/dist/components/use-mobile/index.d.ts

@@ -0,0 +1,3 @@
+declare function useIsMobile(): boolean;
+
+export { useIsMobile };

package/dist/components/use-mobile/index.js

@@ -0,0 +1,2 @@
+import { useIsMobile } from "../../core/hooks/use-mobile.js";
+export { useIsMobile };

package/dist/components/user-type-badge/index.d.ts

@@ -0,0 +1,39 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { HTMLAttributes } from 'react';
+import { P as PresetColor, S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+import * as lucide_react from 'lucide-react';
+import { LucideIcon } from 'lucide-react';
+
+type UserType = "admin" | "super_admin";
+interface UserTypeBadgeRegistryItem {
+    label: string;
+    color: PresetColor;
+    icon: LucideIcon;
+}
+declare const userTypeBadgeRegistry: {
+    admin: {
+        label: string;
+        color: "secondary";
+        icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    };
+    super_admin: {
+        label: string;
+        color: "error";
+        icon: React.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+    };
+};
+declare const userTypeBadgeUserTypes: UserType[];
+
+interface UserTypeBadgeProps extends HTMLAttributes<HTMLDivElement>, Pick<StyleAxisProps, "radius"> {
+    userType: UserType;
+    size?: Size;
+}
+
+declare const userTypeBadgeSizeVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const UserTypeBadge: React.ForwardRefExoticComponent<UserTypeBadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type UserType, UserTypeBadge, type UserTypeBadgeProps, type UserTypeBadgeRegistryItem, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };

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

@@ -0,0 +1,3 @@
+import { userTypeBadgeRegistry, userTypeBadgeUserTypes } from "./user-type-badge.registry.js";
+import { UserTypeBadge, userTypeBadgeSizeVariants } from "./user-type-badge.js";
+export { UserTypeBadge, userTypeBadgeRegistry, userTypeBadgeSizeVariants, userTypeBadgeUserTypes };

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

@@ -14,7 +14,7 @@ var userTypeBadgeSizeVariants = cva("inline-flex font-medium tracking-tight shad
 	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) => {
+var UserTypeBadge = React$1.forwardRef(({ userType, size = "default", className, radius, ...props }, ref) => {
 	const { color, icon: Icon, label } = userTypeBadgeRegistry[userType];
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -23,6 +23,7 @@ var UserTypeBadge = React$1.forwardRef(({ userType, size = "default", className,
 		children: /* @__PURE__ */ jsxs(Badge, {
 			variant: "solid",
 			color,
+			radius,
 			className: cn(userTypeBadgeSizeVariants({ size }), userTypeBadgeMetallicClasses, className),
 			children: [/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": true,

package/dist/components/vertical-stepper/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { V as VerticalStepperProps } from '../../vertical-stepper.props-BXYcbW70.js';
+export { a as VerticalStepperSize, b as VerticalStepperStep, c as VerticalStepperStepStatus } from '../../vertical-stepper.props-BXYcbW70.js';
+
+declare function VerticalStepper({ data, onStepClick, size, className, ariaLabel, }: VerticalStepperProps): React.JSX.Element;
+
+export { VerticalStepper, VerticalStepperProps };

package/dist/components/vertical-stepper/index.js

@@ -0,0 +1,2 @@
+import { VerticalStepper } from "./vertical-stepper.js";
+export { VerticalStepper };

package/dist/components/vertical-stepper/vertical-stepper.js

@@ -1,7 +1,7 @@
 import { cn } from "../../utils/cn.js";
 import { cloneElement, isValidElement } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 //#region src/components/vertical-stepper/vertical-stepper.tsx
 var stateVisuals = {
 	complete: {
@@ -11,6 +11,20 @@ var stateVisuals = {
 		descriptionClass: "text-muted-foreground",
 		connectorClass: "bg-success"
 	},
+	stale: {
+		iconClass: "text-warning",
+		iconBoxClass: "border-warning/25 bg-warning/10",
+		titleClass: "text-foreground",
+		descriptionClass: "text-muted-foreground",
+		connectorClass: "bg-warning"
+	},
+	failed: {
+		iconClass: "text-error",
+		iconBoxClass: "border-error/25 bg-error/10",
+		titleClass: "text-foreground",
+		descriptionClass: "text-muted-foreground",
+		connectorClass: "bg-error"
+	},
 	in_progress: {
 		iconClass: "text-primary",
 		iconBoxClass: "border-primary/25 bg-primary/10",
@@ -28,6 +42,8 @@ var stateVisuals = {
 };
 var statusSrLabel = {
 	complete: "Completed",
+	stale: "Out of date",
+	failed: "Failed",
 	in_progress: "Current step",
 	not_started: "Not started"
 };
@@ -141,12 +157,23 @@ function VerticalStepperStepRow({ step, isLast, onStepClick, s }) {
 					s
 				})
 			}) : textContent,
-			step.status === "complete" || step.endAction != null ? /* @__PURE__ */ jsxs("div", {
+			step.status === "complete" || step.status === "stale" || step.status === "failed" || step.endAction != null ? /* @__PURE__ */ jsxs("div", {
 				className: cn("flex shrink-0 items-center", s.iconBoxHeight, s.endGap),
-				children: [step.status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {
-					className: cn(s.endIcon, "text-success"),
-					"aria-hidden": true
-				}) : null, step.endAction]
+				children: [
+					step.status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, {
+						className: cn(s.endIcon, "text-success"),
+						"aria-hidden": true
+					}) : null,
+					step.status === "stale" ? /* @__PURE__ */ jsx(TriangleAlertIcon, {
+						className: cn(s.endIcon, "text-warning"),
+						"aria-hidden": true
+					}) : null,
+					step.status === "failed" ? /* @__PURE__ */ jsx(XIcon, {
+						className: cn(s.endIcon, "text-error"),
+						"aria-hidden": true
+					}) : null,
+					step.endAction
+				]
 			}) : null
 		]
 	});

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ToggleGroupProps } from '../toggle-group/index.js';
+import 'class-variance-authority';
+import 'radix-ui';
+import 'motion/react';
+import 'class-variance-authority/types';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../index-BQANnKs9.js';
+
+/** How a collection is laid out: cards in a grid, or rows in a list. */
+type ViewMode = "grid" | "list";
+interface ViewToggleLabels {
+    /** The group's accessible name ("Layout"). */
+    group: string;
+    grid: string;
+    list: string;
+}
+interface ViewToggleProps {
+    /** The layout shown now. */
+    value: ViewMode;
+    /** Called with the other layout when it is picked. Pressing the current one does nothing: one is always on. */
+    onValueChange: (value: ViewMode) => void;
+    /** Already-translated labels; English when absent. The icons have no visible text, so these are their names. */
+    labels?: Partial<ViewToggleLabels>;
+    /** Default `sm`, to sit beside a search box or a sort menu. */
+    size?: "sm" | "default";
+    color?: ToggleGroupProps["color"];
+    className?: string;
+}
+
+/**
+ * Switch a collection between cards in a grid and rows in a list: two icon
+ * toggles, the current one pressed. A single toggle group lets its pressed
+ * item be un-pressed; this one keeps one layout on.
+ */
+declare function ViewToggle({ value, onValueChange, labels, size, color, className }: ViewToggleProps): React.JSX.Element;
+
+export { type ViewMode, ViewToggle, type ViewToggleLabels, type ViewToggleProps };

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

@@ -0,0 +1,2 @@
+import { ViewToggle } from "./view-toggle.js";
+export { ViewToggle };

package/dist/components/view-toggle/view-toggle.js

@@ -0,0 +1,56 @@
+import { cn } from "../../utils/cn.js";
+import { ToggleGroup, ToggleGroupItem } from "../../core/animate-ui/components/radix/toggle-group.js";
+import { jsx } from "react/jsx-runtime";
+import { LayoutGrid, List } from "lucide-react";
+//#region src/components/view-toggle/view-toggle.tsx
+var DEFAULT_LABELS = {
+	group: "Layout",
+	grid: "Grid view",
+	list: "List view"
+};
+var MODES = [{
+	mode: "grid",
+	icon: LayoutGrid
+}, {
+	mode: "list",
+	icon: List
+}];
+function isViewMode(value) {
+	return value === "grid" || value === "list";
+}
+/**
+* Switch a collection between cards in a grid and rows in a list: two icon
+* toggles, the current one pressed. A single toggle group lets its pressed
+* item be un-pressed; this one keeps one layout on.
+*/
+function ViewToggle({ value, onValueChange, labels, size = "sm", color, className }) {
+	const text = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	function handleChange(next) {
+		if (isViewMode(next) && next !== value) onValueChange(next);
+	}
+	return /* @__PURE__ */ jsx(ToggleGroup, {
+		type: "single",
+		size,
+		color,
+		value,
+		onValueChange: handleChange,
+		role: "group",
+		"aria-label": text.group,
+		"data-slot": "view-toggle",
+		className: cn("shrink-0", className),
+		children: MODES.map(({ mode, icon: Icon }) => /* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: mode,
+			"aria-label": text[mode],
+			title: text[mode],
+			children: /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": true,
+				className: "size-4"
+			})
+		}, mode))
+	});
+}
+//#endregion
+export { ViewToggle };