@espressif/dashboard-ui-components 1.11.1 → 1.12.0

package/dist/components/sort-menu/sort-menu.js

@@ -0,0 +1,39 @@
+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 { ArrowUpDown, ChevronDown } from "lucide-react";
+//#region src/components/sort-menu/sort-menu.tsx
+/**
+* A one-of picker: the current choice as the button's label, the choices in a
+* menu. A sort by default; with another `icon`, any filter of the same shape.
+*/
+function SortMenu({ value, options, onChange, labelOf, label, icon, iconOnlyBelow, align = "end" }) {
+	function handleChange(next) {
+		const option = options.find((o) => o === next);
+		if (option !== void 0) onChange(option);
+	}
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			fullWidth: false,
+			"aria-label": `${label}: ${labelOf(value)}`,
+			startIcon: icon ?? /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }),
+			endIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }),
+			iconOnlyBelow,
+			children: labelOf(value)
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align,
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value,
+			onValueChange: handleChange,
+			children: options.map((option) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: option,
+				children: labelOf(option)
+			}, option))
+		})
+	})] });
+}
+//#endregion
+export { SortMenu };

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

@@ -0,0 +1,15 @@
+import * as lucide_react from 'lucide-react';
+import { LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+type SpinnerProps = Omit<React.ComponentPropsWithoutRef<typeof LoaderCircle>, "color" | "size"> & {
+    color?: Color;
+    size?: number;
+};
+declare const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Omit<lucide_react.LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>, "ref">, "size" | "color"> & {
+    color?: Color;
+    size?: number;
+} & React.RefAttributes<SVGSVGElement>>;
+
+export { Spinner, type SpinnerProps };

package/dist/components/spinner/index.js

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

package/dist/components/stat-card/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { C as Color, S as Size } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+type StatCardSize = Size;
+type StatCardValueType = "string" | "number" | "percentage";
+/**
+ * The card's surface: `tinted` (default) is a soft gradient of `color`;
+ * `plain` is the card surface with a border, so a row of tiles reads as one
+ * set while each keeps its coloured icon.
+ */
+type StatCardSurface = "tinted" | "plain";
+interface StatCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, Pick<StyleAxisProps, "radius"> {
+    color?: Color;
+    size?: StatCardSize;
+    loading?: boolean;
+    icon?: ReactNode;
+    heading: string | ReactNode;
+    value: number;
+    previousValue?: number;
+    previousValueComparisonTip?: string | ReactNode;
+    infoContent?: string | ReactNode;
+    valueType?: StatCardValueType;
+    surface?: StatCardSurface;
+    /**
+     * A small picture between the value and the caption — a sparkline, a
+     * `MiniBarChart`, a `ProgressBar`. Its row is a fixed height (32px at the
+     * default size), so a row of cards stays level whether or not each has one.
+     */
+    visual?: ReactNode;
+    /**
+     * One line under the value (and the visual), trimmed when it does not fit:
+     * what the number is made of ("5 source · 2 firmware"), or its largest
+     * share. A string also becomes the line's `title`, so the trimmed part can
+     * still be read.
+     */
+    caption?: ReactNode;
+}
+
+declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { StatCard, type StatCardProps, type StatCardSize, type StatCardSurface, type StatCardValueType };

package/dist/components/stat-card/index.js

@@ -0,0 +1,2 @@
+import { StatCard } from "./stat-card.js";
+export { StatCard };

package/dist/components/stat-card/stat-card.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../utils/cn.js";
 import { isPresetColor } from "../../utils/color.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
 import { IconAvatar } from "../icon-avatar/icon-avatar.js";
 import { Typography } from "../typography/typography.js";
@@ -34,7 +35,7 @@ var PRESET_INFO_CLASS = {
 };
 var SIZE_STYLES = {
 	sm: {
-		card: "rounded-2xl p-4",
+		card: "rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-2xl)))] p-4",
 		gap: "gap-4",
 		headerGap: "gap-3",
 		avatar: 40,
@@ -42,11 +43,12 @@ var SIZE_STYLES = {
 		heading: "text-base",
 		value: "text-2xl",
 		footer: "text-xs",
-		badge: "gap-1 rounded-full px-2.5 py-0.5 text-xs",
-		info: "size-7 [&_svg]:size-4"
+		badge: "gap-1 rounded-[var(--espd-own-radius,var(--espd-radius-pill,calc(infinity*1px)))] px-2.5 py-0.5 text-xs",
+		info: "size-7 [&_svg]:size-4",
+		visual: "h-7"
 	},
 	default: {
-		card: "rounded-2xl p-5",
+		card: "rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-2xl)))] p-5",
 		gap: "gap-5",
 		headerGap: "gap-3",
 		avatar: 52,
@@ -54,11 +56,12 @@ var SIZE_STYLES = {
 		heading: "text-xl",
 		value: "text-3xl",
 		footer: "text-sm",
-		badge: "gap-1 rounded-full px-3 py-1 text-sm",
-		info: "size-8 [&_svg]:size-5"
+		badge: "gap-1 rounded-[var(--espd-own-radius,var(--espd-radius-pill,calc(infinity*1px)))] px-3 py-1 text-sm",
+		info: "size-8 [&_svg]:size-5",
+		visual: "h-8"
 	},
 	lg: {
-		card: "rounded-3xl p-6",
+		card: "rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-3xl)))] p-6",
 		gap: "gap-6",
 		headerGap: "gap-4",
 		avatar: 60,
@@ -66,8 +69,9 @@ var SIZE_STYLES = {
 		heading: "text-2xl",
 		value: "text-4xl",
 		footer: "text-base",
-		badge: "gap-1.5 rounded-full px-3.5 py-1 text-base",
-		info: "size-9 [&_svg]:size-6"
+		badge: "gap-1.5 rounded-[var(--espd-own-radius,var(--espd-radius-pill,calc(infinity*1px)))] px-3.5 py-1 text-base",
+		info: "size-9 [&_svg]:size-6",
+		visual: "h-10"
 	}
 };
 function hasRenderableContent(content) {
@@ -81,7 +85,9 @@ function resolveStatColor(color, value, previousValue) {
 	if (previousValue !== void 0) return value - previousValue < 0 ? "error" : "success";
 	return "primary";
 }
-function resolveSurface(color) {
+var PLAIN_SURFACE_CLASS = "border-[length:var(--espd-border-width-surface,1px)] border-border bg-card";
+function resolveSurface(color, surface) {
+	if (surface === "plain") return { className: PLAIN_SURFACE_CLASS };
 	if (isPresetColor(color)) return { className: PRESET_SURFACE_CLASS[color] };
 	return { style: { backgroundImage: `linear-gradient(135deg, color-mix(in srgb, ${color} 7%, transparent), color-mix(in srgb, ${color} 14%, transparent))` } };
 }
@@ -113,10 +119,11 @@ function getTrend(value, previousValue) {
 		label: `${Math.abs(percent).toLocaleString(void 0, { maximumFractionDigits: 1 })}%`
 	};
 }
-var StatCard = React$1.forwardRef(({ color, size = "default", loading = false, icon, heading, value, previousValue, previousValueComparisonTip, infoContent, valueType = "number", className, style, ...divProps }, ref) => {
+var StatCard = React$1.forwardRef(({ color, size = "default", loading = false, icon, heading, value, previousValue, previousValueComparisonTip, infoContent, valueType = "number", surface: surfaceKind = "tinted", visual, caption, className, style, radius, ...divProps }, ref) => {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	const s = SIZE_STYLES[size];
 	const statColor = resolveStatColor(color, value, previousValue);
-	const surface = resolveSurface(statColor);
+	const surface = resolveSurface(statColor, surfaceKind);
 	const trend = getTrend(value, previousValue);
 	const showTrend = trend !== void 0 && !(value === 0 && previousValue === 0);
 	const showInfo = hasRenderableContent(infoContent);
@@ -130,6 +137,7 @@ var StatCard = React$1.forwardRef(({ color, size = "default", loading = false, i
 		ref,
 		className: cn("relative isolate flex w-full flex-col overflow-hidden border border-transparent text-foreground", s.card, surface.className, className),
 		style: {
+			...partStyle,
 			...surface.style,
 			...style
 		},
@@ -165,6 +173,17 @@ var StatCard = React$1.forwardRef(({ color, size = "default", loading = false, i
 					className: cn("font-bold leading-none tracking-tight text-foreground", s.value),
 					children: formatValue(value, valueType)
 				}),
+				visual != null || caption != null ? /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col gap-2",
+					children: [visual != null ? /* @__PURE__ */ jsx("div", {
+						className: cn("flex w-full items-end", s.visual),
+						children: visual
+					}) : null, caption != null ? /* @__PURE__ */ jsx("div", {
+						className: cn("min-w-0 truncate text-foreground-secondary", s.footer),
+						title: typeof caption === "string" ? caption : void 0,
+						children: caption
+					}) : null]
+				}) : null,
 				showFooter ? /* @__PURE__ */ jsxs("div", {
 					className: cn("flex items-center gap-3", s.footer),
 					children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/status-badge/index.d.ts

@@ -0,0 +1,24 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { a as StatusBadgeProps } from '../../status-badge.props-lKlEOfRt.js';
+export { S as StatusBadgeIcon } from '../../status-badge.props-lKlEOfRt.js';
+import 'lucide-react';
+import '../../index-BQANnKs9.js';
+import '../../variant-D81RhpbR.js';
+import '../../style-axes-DSQ2DGc5.js';
+
+declare const statusBadgeSizeVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+    hasIcon?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Shared icon+label status chip. Consumers resolve their per-status
+ * presentation (icon, colour, translated label) and hand the results in here,
+ * so every status badge across apps stays visually consistent.
+ *
+ * The primitive stays i18n-free and registry-free — the per-status mapping
+ * belongs in the consuming app's domain layer.
+ */
+declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { StatusBadge, StatusBadgeProps, statusBadgeSizeVariants };

package/dist/components/status-badge/index.js

@@ -0,0 +1,2 @@
+import { StatusBadge, statusBadgeSizeVariants } from "./status-badge.js";
+export { StatusBadge, statusBadgeSizeVariants };

package/dist/components/status-badge/status-badge.js

@@ -22,7 +22,7 @@ var ICON_PX = {
 	default: 16,
 	lg: 18
 };
-var statusBadgeSizeVariants = cva("rounded-full font-normal [&_svg]:shrink-0", {
+var statusBadgeSizeVariants = cva("rounded-[var(--espd-own-radius,var(--espd-radius-pill,calc(infinity*1px)))] font-normal [&_svg]:shrink-0", {
 	variants: {
 		size: {
 			sm: "gap-1 py-0.5 text-xs",
@@ -79,7 +79,7 @@ var statusBadgeSizeVariants = cva("rounded-full font-normal [&_svg]:shrink-0", {
 * The primitive stays i18n-free and registry-free — the per-status mapping
 * belongs in the consuming app's domain layer.
 */
-var StatusBadge = React$1.forwardRef(({ label, icon: Icon, color, variant = "soft", size = "default", isLoading = false, className, labelClassName, ...props }, ref) => {
+var StatusBadge = React$1.forwardRef(({ label, icon: Icon, color, variant = "soft", size = "default", isLoading = false, className, labelClassName, radius, ...props }, ref) => {
 	const iconPx = ICON_PX[size];
 	const showIcon = isLoading || !!Icon;
 	return /* @__PURE__ */ jsx("div", {
@@ -89,6 +89,7 @@ var StatusBadge = React$1.forwardRef(({ label, icon: Icon, color, variant = "sof
 		children: /* @__PURE__ */ jsxs(Badge, {
 			color,
 			variant,
+			radius,
 			className: cn(statusBadgeSizeVariants({
 				size,
 				hasIcon: showIcon

package/dist/components/status-card-list/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+type StatusCardState = "success" | "warning" | "error" | "in_progress" | "not_started";
+type StatusCardListSize = "sm" | "default" | "lg";
+interface StatusCardListItem {
+    id: string;
+    icon: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    state: StatusCardState;
+}
+/** Style axis `radius`: each item card. */
+interface StatusCardListProps extends Pick<StyleAxisProps, "radius"> {
+    data: StatusCardListItem[];
+    size?: StatusCardListSize;
+    className?: string;
+}
+
+declare function StatusCardList({ data, size, className, radius, }: StatusCardListProps): React.JSX.Element;
+
+export { StatusCardList, type StatusCardListItem, type StatusCardListProps, type StatusCardListSize, type StatusCardState };

package/dist/components/status-card-list/index.js

@@ -0,0 +1,2 @@
+import { StatusCardList } from "./status-card-list.js";
+export { StatusCardList };

package/dist/components/status-card-list/status-card-list.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
 import { IconAvatar } from "../icon-avatar/icon-avatar.js";
 import { cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -194,14 +195,15 @@ function StatusEndIndicator({ state, endIconClass, endIconSizeClass }) {
 		});
 	}
 }
-function StatusCardListRow({ item, s }) {
+function StatusCardListRow({ item, s, rowStyle }) {
 	const visuals = stateVisuals[item.state];
 	return /* @__PURE__ */ jsxs(motion.li, {
 		layout: true,
 		initial: false,
 		animate: stateSurfaceMotion(item.state),
 		transition: cardMotionTransition,
-		className: cn("flex items-center rounded-lg border border-solid text-left", s.rowPad, s.gap),
+		style: rowStyle,
+		className: cn("flex items-center rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-lg)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] border-solid text-left", s.rowPad, s.gap),
 		children: [
 			/* @__PURE__ */ jsx(motion.span, {
 				layout: "position",
@@ -264,8 +266,9 @@ function StatusCardListRow({ item, s }) {
 		]
 	});
 }
-function StatusCardList({ data, size = "default", className }) {
+function StatusCardList({ data, size = "default", className, radius }) {
 	const s = sizeStyles[size];
+	const { partStyle: rowStyle } = useStyleAxes({ radius }, ["radius"]);
 	return /* @__PURE__ */ jsx(TooltipProvider, {
 		openDelay: 300,
 		closeDelay: 100,
@@ -273,7 +276,8 @@ function StatusCardList({ data, size = "default", className }) {
 			className: cn("flex flex-col min-w-0", s.listGap, className),
 			children: data.map((item) => /* @__PURE__ */ jsx(StatusCardListRow, {
 				item,
-				s
+				s,
+				rowStyle
 			}, item.id))
 		})
 	});

package/dist/components/step-tabs/index.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+import { c as VerticalStepperStepStatus } from '../../vertical-stepper.props-BXYcbW70.js';
+
+/** One step. `status` is the steppers' status (`stale` included), so one product's chain feeds all three. */
+interface StepTabsStep {
+    id: string;
+    /** Already-translated word. Keep it to one or two words: the strip is one row. */
+    label: string;
+    /** Drawn as a mark before the word and read after it. Independent of which step is on show. */
+    status: VerticalStepperStepStatus;
+    /** Shown before the mark: a Lucide element or any element; it is sized to the strip. Default none. */
+    icon?: ReactNode;
+    /**
+     * About the step, already translated: text ("Spec edited after this build")
+     * or React content (formatting, an icon, a time, a badge). Shown in a
+     * tooltip on hover and keyboard focus, and read as the tab's description, so
+     * it is rendered twice: once in the tooltip, once hidden for assistive tech.
+     * Nothing focusable or interactive (no buttons, links or inputs: neither
+     * keyboard nor touch can reach a tab's tooltip) and no `id`s. Supplementary,
+     * since touch has no hover; actions belong on the step's page. Replaces the
+     * mark's own tooltip. Default none.
+     */
+    description?: ReactNode;
+    /**
+     * A step the person cannot go to yet. Still drawn and still reached with the
+     * arrow keys (so a screen reader hears it, and its `description` can say
+     * why), but choosing it does nothing. Default `false`.
+     */
+    disabled?: boolean;
+}
+type StepTabsSize = "sm" | "default" | "lg";
+type StepTabsVariant = "rounded" | "line";
+interface StepTabsProps {
+    steps: StepTabsStep[];
+    /** The id of the step on show. Controlled; it may name a `not_started` step. */
+    value: string;
+    /** Called with a step's id when it is chosen, including the step already on show. */
+    onValueChange: (id: string) => void;
+    /** `sm`: a 28px strip with small text, for a toolbar. `lg`: 40px steps with base text. Default `default` (32px steps). */
+    size?: StepTabsSize;
+    /**
+     * `rounded`: the step on show sits on a tinted pill among plain words, with
+     * no outline round the group. `line`: an underline under the step on show;
+     * the strip's own bottom rule is drawn only with `rule`. Default `rounded`.
+     */
+    variant?: StepTabsVariant;
+    /** Tint of the pill or underline, the word on show and the marks (`stale` stays `warning`). Default `primary`. */
+    color?: Color;
+    /** `line` only: draw the strip's own bottom rule. Default `false` (a toolbar usually has one). */
+    rule?: boolean;
+    /**
+     * `rounded` only: sit the steps in a tray recessed into the bar, so they
+     * read as one control (a segmented control) rather than loose words: a
+     * translucent floor (`bg-recessed`) with inner shadows for walls and a light
+     * lip below (`shadow-recessed`), both per theme. No line of its own, so it
+     * adds none beside a toolbar's rule; translucent, so the pill's tinted wash
+     * keeps its hue on it over any bar. Default `false`.
+     */
+    tray?: boolean;
+    /** Accessible name of the strip ("Steps"). Required: the caller translates it. */
+    ariaLabel: string;
+    /**
+     * Words for the statuses, read after each step's word and shown as its
+     * mark's tooltip. Defaults: complete "Done", in_progress "In progress",
+     * stale "Out of date", not_started "Not started" (never read: a step not
+     * started is just its word).
+     */
+    statusLabels?: Partial<Record<VerticalStepperStepStatus, string>>;
+    className?: string;
+}
+
+/**
+ * A one-row strip of a product's steps that is both navigation and progress:
+ * each step is a tab the person can go to, and each carries its status as a
+ * mark before its word. Built for a toolbar (`size="sm"`). It has no panels —
+ * the caller shows the step's page (usually a route) in `onValueChange`.
+ *
+ * Keyboard: one tab stop (the step on show); ←/→ move between steps and wrap,
+ * Home/End jump to the ends, Enter or Space chooses — like `Tabs`, focusing a
+ * step never chooses it, so arrowing across does not navigate. A `disabled`
+ * step is reached by the arrows but cannot be chosen.
+ *
+ * A step's `description` (text or non-interactive React content) shows in a
+ * tooltip on hover and keyboard focus (a disabled step's too) and is read as
+ * the tab's description.
+ *
+ * Status and selection are independent: the step on show may be one not
+ * started, and a stale step may come before a complete one.
+ */
+declare function StepTabs({ steps, value, onValueChange, size, variant, color, rule, tray, ariaLabel, statusLabels, className, }: StepTabsProps): React.JSX.Element;
+
+export { StepTabs, type StepTabsProps, type StepTabsSize, type StepTabsStep, type StepTabsVariant };

package/dist/components/step-tabs/index.js

@@ -0,0 +1,2 @@
+import { StepTabs } from "./step-tabs.js";
+export { StepTabs };

package/dist/components/step-tabs/step-tabs.js

@@ -0,0 +1,202 @@
+import { cn } from "../../utils/cn.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../core/animate-ui/components/animate/tooltip.js";
+import { Tabs, TabsList, TabsTrigger } from "../../core/animate-ui/components/animate/tabs.js";
+import { cloneElement, isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, TriangleAlert, X } from "lucide-react";
+//#region src/components/step-tabs/step-tabs.tsx
+var DEFAULT_STATUS_LABELS = {
+	complete: "Done",
+	in_progress: "In progress",
+	stale: "Out of date",
+	failed: "Failed",
+	not_started: "Not started"
+};
+var sizes = {
+	sm: {
+		mark: "size-3",
+		dot: "size-1.5",
+		icon: "size-3.5",
+		rounded: "",
+		line: ""
+	},
+	default: {
+		mark: "size-3.5",
+		dot: "size-1.5",
+		icon: "size-4",
+		rounded: "h-8 px-3",
+		line: "py-2"
+	},
+	lg: {
+		mark: "size-4",
+		dot: "size-2",
+		icon: "size-5",
+		rounded: "h-10 px-4",
+		line: ""
+	}
+};
+/**
+* A mark's colour, its lightness held where a glyph reads (3:1): at most L 55
+* on a light page, at least L 50 on a dark one; hue and chroma stay. Without
+* relative colour syntax, the colour as given. The dot fills with currentColor.
+*/
+var IN_COLOR = "text-[color:var(--espd-tabs-color)] supports-[color:lch(from_red_l_c_h)]:text-[color:lch(from_var(--espd-tabs-color)_min(l,55)_c_h)] dark:supports-[color:lch(from_red_l_c_h)]:text-[color:lch(from_var(--espd-tabs-color)_max(l,50)_c_h)]";
+var IN_ERROR = "text-error supports-[color:lch(from_red_l_c_h)]:text-[color:lch(from_var(--color-error)_min(l,55)_c_h)] dark:supports-[color:lch(from_red_l_c_h)]:text-[color:lch(from_var(--color-error)_max(l,50)_c_h)]";
+var IN_WARNING = "text-warning supports-[color:lch(from_red_l_c_h)]:text-[color:lch(from_var(--color-warning)_min(l,55)_c_h)] dark:supports-[color:lch(from_red_l_c_h)]:text-[color:lch(from_var(--color-warning)_max(l,50)_c_h)]";
+function sized(icon, className) {
+	if (isValidElement(icon)) {
+		const el = icon;
+		return cloneElement(el, { className: cn(className, el.props.className) });
+	}
+	return icon;
+}
+/**
+* The status as a shape, never colour alone: a check, a dot that throbs with a
+* soft halo (still, with no halo, under reduced motion), a warning triangle or
+* an error cross. A step not started has
+* none and keeps no room for one, so its word sits centred in the pill. Hidden
+* from assistive tech; the trigger says it in words.
+*/
+function StepMark({ status, label, size }) {
+	const s = sizes[size];
+	if (status === "not_started") return null;
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		"data-mark": status,
+		title: label,
+		className: cn("inline-flex shrink-0 items-center justify-center", s.mark),
+		children: [
+			status === "complete" && /* @__PURE__ */ jsx(Check, {
+				strokeWidth: 3,
+				className: cn("size-full", IN_COLOR)
+			}),
+			status === "in_progress" && /* @__PURE__ */ jsx("span", { className: cn("relative rounded-full bg-current motion-safe:animate-throb", "before:absolute before:inset-0 before:rounded-full before:bg-current before:opacity-0 motion-safe:before:animate-throb-ring", IN_COLOR, s.dot) }),
+			status === "stale" && /* @__PURE__ */ jsx(TriangleAlert, {
+				strokeWidth: 2.5,
+				className: cn("size-full", IN_WARNING)
+			}),
+			status === "failed" && /* @__PURE__ */ jsx(X, {
+				strokeWidth: 3,
+				className: cn("size-full", IN_ERROR)
+			})
+		]
+	});
+}
+/**
+* The pill under the step on show (Tabs' highlight, reached from the Tabs root)
+* takes a hairline in its own colour at 18%, just stronger than its 10% wash:
+* a shade darker on a light page, a shade lighter on a dark one. On a dark page
+* 15%: the same hue reads brighter there and the edge would lead the wash.
+*/
+var PILL_EDGE = "[&_[data-slot=motion-highlight]]:border [&_[data-slot=motion-highlight]]:border-[color:color-mix(in_oklab,var(--espd-tabs-color)_18%,transparent)] dark:[&_[data-slot=motion-highlight]]:border-[color:color-mix(in_oklab,var(--espd-tabs-color)_15%,transparent)]";
+/** A description to show: anything React renders, so not `null`, `undefined`, `false` or `""`. */
+function hasDescription(step) {
+	return step.description != null && step.description !== false && step.description !== "";
+}
+/** Arrow keys, Home and End move focus between the tabs (wrapping); they never choose one. */
+function moveFocus(event) {
+	const tabs = Array.from(event.currentTarget.querySelectorAll("[role=\"tab\"]"));
+	const from = tabs.indexOf(event.target);
+	if (from === -1) return;
+	const last = tabs.length - 1;
+	const to = {
+		ArrowRight: from === last ? 0 : from + 1,
+		ArrowLeft: from === 0 ? last : from - 1,
+		Home: 0,
+		End: last
+	}[event.key];
+	if (to === void 0) return;
+	event.preventDefault();
+	tabs[to]?.focus();
+}
+/**
+* A one-row strip of a product's steps that is both navigation and progress:
+* each step is a tab the person can go to, and each carries its status as a
+* mark before its word. Built for a toolbar (`size="sm"`). It has no panels —
+* the caller shows the step's page (usually a route) in `onValueChange`.
+*
+* Keyboard: one tab stop (the step on show); ←/→ move between steps and wrap,
+* Home/End jump to the ends, Enter or Space chooses — like `Tabs`, focusing a
+* step never chooses it, so arrowing across does not navigate. A `disabled`
+* step is reached by the arrows but cannot be chosen.
+*
+* A step's `description` (text or non-interactive React content) shows in a
+* tooltip on hover and keyboard focus (a disabled step's too) and is read as
+* the tab's description.
+*
+* Status and selection are independent: the step on show may be one not
+* started, and a stale step may come before a complete one.
+*/
+function StepTabs({ steps, value, onValueChange, size = "default", variant = "rounded", color = "primary", rule = false, tray = false, ariaLabel, statusLabels, className }) {
+	const s = sizes[size];
+	const id = useId();
+	const descriptionId = (index) => `${id}-description-${index}`;
+	const labels = {
+		...DEFAULT_STATUS_LABELS,
+		...statusLabels
+	};
+	const isLine = variant === "line";
+	const tabStop = steps.some((step) => step.id === value) ? value : steps[0]?.id;
+	const chooseUnlessDisabled = (step) => (event) => {
+		if (step.disabled) event.preventDefault();
+	};
+	const strip = /* @__PURE__ */ jsxs(Tabs, {
+		value,
+		onValueChange,
+		className: cn("w-fit max-w-full", !isLine && PILL_EDGE, className),
+		children: [/* @__PURE__ */ jsx(TabsList, {
+			"aria-label": ariaLabel,
+			variant,
+			size,
+			color,
+			fullWidth: false,
+			onKeyDown: moveFocus,
+			className: cn("gap-0.5", !isLine && "border-transparent", !isLine && tray && "bg-recessed shadow-recessed", isLine && !rule && "border-b-transparent"),
+			children: steps.map((step, index) => {
+				const word = step.status === "not_started" ? void 0 : labels[step.status];
+				const selected = step.id === value;
+				const described = hasDescription(step);
+				const trigger = /* @__PURE__ */ jsxs(TabsTrigger, {
+					value: step.id,
+					"aria-disabled": step.disabled || void 0,
+					"aria-describedby": described ? descriptionId(index) : void 0,
+					tabIndex: step.id === tabStop ? 0 : -1,
+					"data-status": step.status,
+					onClick: chooseUnlessDisabled(step),
+					className: cn("align-top data-[state=inactive]:not-aria-disabled:hover:text-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-50", isLine ? s.line : s.rounded),
+					children: [
+						step.icon ? sized(step.icon, cn("shrink-0", s.icon)) : null,
+						/* @__PURE__ */ jsx(StepMark, {
+							status: step.status,
+							label: described ? void 0 : labels[step.status],
+							size
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "whitespace-nowrap",
+							children: [step.label, word ? /* @__PURE__ */ jsxs("span", {
+								className: "sr-only",
+								children: [", ", word]
+							}) : null]
+						})
+					]
+				}, step.id);
+				if (!described) return trigger;
+				return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					"data-state": selected ? "active" : "inactive",
+					children: trigger
+				}), /* @__PURE__ */ jsx(TooltipContent, {
+					className: "max-w-xs",
+					children: step.description
+				})] }, step.id);
+			})
+		}), steps.map((step, index) => hasDescription(step) ? /* @__PURE__ */ jsx("div", {
+			id: descriptionId(index),
+			hidden: true,
+			children: step.description
+		}, step.id) : null)]
+	});
+	return steps.some(hasDescription) ? /* @__PURE__ */ jsx(TooltipProvider, { children: strip }) : strip;
+}
+//#endregion
+export { StepTabs };