@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/utils/style-axes.js

@@ -0,0 +1,227 @@
+import * as React$1 from "react";
+//#region src/utils/style-axes.ts
+var RADII = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl",
+	"full"
+];
+var ELEVATIONS = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var BORDERS = [
+	"none",
+	"default",
+	"strong"
+];
+var DENSITIES = [
+	"compact",
+	"default",
+	"comfortable"
+];
+var BUILT_IN_VALUES = {
+	radius: {
+		none: "0px",
+		xs: "var(--radius-xs, 0.125rem)",
+		sm: "var(--radius-sm, calc(0.5rem - 4px))",
+		md: "var(--radius-md, calc(0.5rem - 2px))",
+		lg: "var(--radius-lg, 0.5rem)",
+		xl: "var(--radius-xl, 0.75rem)",
+		"2xl": "var(--radius-2xl, 1rem)",
+		full: "calc(infinity * 1px)"
+	},
+	elevation: {
+		none: "0 0 #0000",
+		xs: "var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.05))",
+		sm: "var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))",
+		md: "var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))",
+		lg: "var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))",
+		xl: "var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))"
+	},
+	border: {
+		none: "0px",
+		default: "1px",
+		strong: "2px"
+	}
+};
+var step = (n) => `calc(var(--spacing) * ${n})`;
+var BUILT_IN_DENSITIES = {
+	compact: {
+		"--espd-control-height-sm": step(7),
+		"--espd-control-height-md": step(8),
+		"--espd-control-height-lg": step(9),
+		"--espd-button-padding-x-sm": step(2),
+		"--espd-button-padding-x-md": step(3),
+		"--espd-button-padding-x-lg": step(6),
+		"--espd-table-head-height": step(8),
+		"--espd-table-cell-padding": step(1.5),
+		"--espd-item-height": "2rem",
+		"--espd-sidebar-row-height": step(7),
+		"--espd-sidebar-row-height-sm": step(6),
+		"--espd-gap-field": step(1.5),
+		"--espd-gap-stack": step(3)
+	},
+	default: {
+		"--espd-control-height-sm": step(8),
+		"--espd-control-height-md": step(9),
+		"--espd-control-height-lg": step(10),
+		"--espd-button-padding-x-sm": step(3),
+		"--espd-button-padding-x-md": step(4),
+		"--espd-button-padding-x-lg": step(8),
+		"--espd-table-head-height": step(10),
+		"--espd-table-cell-padding": step(2),
+		"--espd-item-height": "2.5rem",
+		"--espd-sidebar-row-height": step(8),
+		"--espd-sidebar-row-height-sm": step(7),
+		"--espd-gap-field": step(2),
+		"--espd-gap-stack": step(4)
+	},
+	comfortable: {
+		"--espd-control-height-sm": step(9),
+		"--espd-control-height-md": step(10),
+		"--espd-control-height-lg": step(11),
+		"--espd-button-padding-x-sm": step(4),
+		"--espd-button-padding-x-md": step(5),
+		"--espd-button-padding-x-lg": step(10),
+		"--espd-table-head-height": step(12),
+		"--espd-table-cell-padding": step(3),
+		"--espd-item-height": "3rem",
+		"--espd-sidebar-row-height": step(10),
+		"--espd-sidebar-row-height-sm": step(8),
+		"--espd-gap-field": step(2.5),
+		"--espd-gap-stack": step(6)
+	}
+};
+var BUILT_IN_NAMES = {
+	radius: RADII,
+	elevation: ELEVATIONS,
+	border: BORDERS,
+	density: DENSITIES
+};
+var registeredValues = {
+	radius: /* @__PURE__ */ new Map(),
+	elevation: /* @__PURE__ */ new Map(),
+	border: /* @__PURE__ */ new Map()
+};
+var registeredDensities = /* @__PURE__ */ new Map();
+function isBuiltIn(axis, name) {
+	return BUILT_IN_NAMES[axis].includes(name);
+}
+/**
+* Adds a radius, elevation or border value every component with that axis
+* accepts. `css` is one CSS value: a length for radius and border, a
+* `box-shadow` for elevation. Registering a built-in name is ignored with a
+* warning: built-ins never change. Registering an existing custom name
+* replaces its value.
+*/
+function registerStyleValue(axis, name, css) {
+	if (isBuiltIn(axis, name)) {
+		console.warn(`registerStyleValue: "${name}" is a built-in ${axis} and cannot be replaced.`);
+		return;
+	}
+	registeredValues[axis].set(name, css);
+}
+/**
+* Adds a density: the tokens it sets on the container that takes it. Same
+* rules as {@link registerStyleValue}.
+*/
+function registerDensity(name, tokens) {
+	if (isBuiltIn("density", name)) {
+		console.warn(`registerDensity: "${name}" is a built-in density and cannot be replaced.`);
+		return;
+	}
+	registeredDensities.set(name, { ...tokens });
+}
+/** The built-in values of an axis followed by every registered one. */
+function listStyleValues(axis) {
+	const registered = axis === "density" ? registeredDensities : registeredValues[axis];
+	return [...BUILT_IN_NAMES[axis], ...registered.keys()];
+}
+/** The CSS for a value of an axis, or `undefined` when it is unknown. */
+function resolveStyleValue(axis, value) {
+	if (isBuiltIn(axis, value)) return BUILT_IN_VALUES[axis][value];
+	return registeredValues[axis].get(value);
+}
+/** The tokens a density sets, or `undefined` when it is unknown. */
+function resolveDensity(value) {
+	if (isBuiltIn("density", value)) return { ...BUILT_IN_DENSITIES[value] };
+	const tokens = registeredDensities.get(value);
+	return tokens && { ...tokens };
+}
+/**
+* Inline style for a container's `density` prop: the density's tokens, which
+* inherit, so everything inside the container takes them. `undefined` (no
+* prop, or an unknown name) leaves the DOM unchanged.
+*/
+function densityStyle(density) {
+	return density === void 0 ? void 0 : resolveDensity(density);
+}
+/**
+* The private custom property each axis sets on a component's root. Parts
+* read it first, then the role token, then their own literal, in one var()
+* chain. (No example class here: the stylesheet scans `dist/`, so a class
+* written in this comment would be generated.)
+*/
+var STYLE_AXIS_VARIABLES = {
+	radius: "--espd-own-radius",
+	elevation: "--espd-own-elevation",
+	border: "--espd-own-border-width"
+};
+/**
+* The styles of a component with style axes. For each axis it takes whose
+* prop is set (and resolves), it sets the private variable.
+*
+* - `style`: for the root, with the caller's `style` merged last. With no
+*   axis prop set it is the caller's `style` itself, so the DOM is unchanged.
+* - `partStyle`: the private variables alone, for every other element of the
+*   component that reads them. The stylesheet registers them as
+*   non-inheriting (`@property … { inherits: false }`), so each element that
+*   reads one must carry it; that is also what keeps a value from leaking
+*   into nested components.
+*/
+function useStyleAxes(props, axes) {
+	const { radius, elevation, border, style } = props;
+	const key = axes.join(" ");
+	return React$1.useMemo(() => {
+		const values = {
+			radius,
+			elevation,
+			border
+		};
+		const own = {};
+		for (const axis of key.split(" ").filter(Boolean)) {
+			const value = values[axis];
+			const css = value !== void 0 ? resolveStyleValue(axis, value) : void 0;
+			if (css) own[STYLE_AXIS_VARIABLES[axis]] = css;
+		}
+		if (Object.keys(own).length === 0) return {
+			style,
+			partStyle: void 0
+		};
+		const partStyle = own;
+		return {
+			style: {
+				...partStyle,
+				...style
+			},
+			partStyle
+		};
+	}, [
+		radius,
+		elevation,
+		border,
+		style,
+		key
+	]);
+}
+//#endregion
+export { BORDERS, DENSITIES, ELEVATIONS, RADII, STYLE_AXIS_VARIABLES, densityStyle, listStyleValues, registerDensity, registerStyleValue, resolveDensity, resolveStyleValue, useStyleAxes };

package/dist/utils/variant.js

@@ -2,12 +2,37 @@ import { cn } from "./cn.js";
 import { isPresetColor, resolveColor } from "./color.js";
 import { SILVER_SOLID_SURFACE_STYLE } from "./silver-shine.js";
 //#region src/utils/variant.ts
+/** The five built-in variants. Registered variants are in {@link listVariants}. */
 var VARIANTS = [
 	"outline",
 	"solid",
 	"soft",
-	"gradient"
+	"gradient",
+	"glow"
 ];
+var registeredVariants = /* @__PURE__ */ new Map();
+function isBuiltInVariant(variant) {
+	return VARIANTS.includes(variant);
+}
+/**
+* Adds a variant every variant-driven component accepts (Badge, Alert, Tag,
+* SimpleClickableCard, Toast, …). Its styles come from `recipe(color)`, in the
+* same shape `resolveVariantStyles` returns; built-in-only extras such as the
+* gradient hover layers or silver overlays are opt-in fields of that shape.
+* Registering a built-in name is ignored with a warning: built-ins never change.
+* Registering an existing custom name replaces its recipe.
+*/
+function registerVariant(name, recipe) {
+	if (isBuiltInVariant(name)) {
+		console.warn(`registerVariant: "${name}" is a built-in variant and cannot be replaced.`);
+		return;
+	}
+	registeredVariants.set(name, recipe);
+}
+/** The built-in variants followed by every registered one. */
+function listVariants() {
+	return [...VARIANTS, ...registeredVariants.keys()];
+}
 /** Duration (ms) for shared gradient hover animations (preset surfaces + overlay crossfade). */
 var VARIANT_GRADIENT_TRANSITION_DURATION_MS = 2e3;
 /**
@@ -116,6 +141,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-primary",
 			description: "text-primary/60"
+		},
+		glow: {
+			container: "border border-primary/15 bg-primary/4 text-primary shadow-glow shadow-primary/45 [&>svg]:text-primary",
+			foreground: "text-primary",
+			description: "text-primary/80"
 		}
 	},
 	secondary: {
@@ -138,6 +168,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-secondary",
 			description: "text-secondary/60"
+		},
+		glow: {
+			container: "border border-secondary/15 bg-secondary/4 text-secondary shadow-glow shadow-secondary/45 [&>svg]:text-secondary",
+			foreground: "text-secondary",
+			description: "text-secondary/80"
 		}
 	},
 	info: {
@@ -160,6 +195,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-info",
 			description: "text-info/60"
+		},
+		glow: {
+			container: "border border-info/15 bg-info/4 text-info shadow-glow shadow-info/45 [&>svg]:text-info",
+			foreground: "text-info",
+			description: "text-info/80"
 		}
 	},
 	warning: {
@@ -182,6 +222,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-warning",
 			description: "text-warning/60"
+		},
+		glow: {
+			container: "border border-warning/15 bg-warning/4 text-warning shadow-glow shadow-warning/45 [&>svg]:text-warning",
+			foreground: "text-warning",
+			description: "text-warning"
 		}
 	},
 	error: {
@@ -204,6 +249,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-error",
 			description: "text-error/60"
+		},
+		glow: {
+			container: "border border-error/15 bg-error/4 text-error shadow-glow shadow-error/45 [&>svg]:text-error",
+			foreground: "text-error",
+			description: "text-error/80"
 		}
 	},
 	success: {
@@ -226,6 +276,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-success",
 			description: "text-success/60"
+		},
+		glow: {
+			container: "border border-success/15 bg-success/4 text-success shadow-glow shadow-success/45 [&>svg]:text-success",
+			foreground: "text-success",
+			description: "text-success/80"
 		}
 	},
 	disabled: {
@@ -248,6 +303,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-disabled",
 			description: "text-disabled/60"
+		},
+		glow: {
+			container: "border border-disabled/15 bg-disabled/4 text-disabled shadow-glow shadow-disabled/45 [&>svg]:text-disabled",
+			foreground: "text-disabled",
+			description: "text-disabled/80"
 		}
 	},
 	gray: {
@@ -270,6 +330,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-gray",
 			description: "text-gray/60"
+		},
+		glow: {
+			container: "border border-gray/15 bg-gray/4 text-gray shadow-glow shadow-gray/45 [&>svg]:text-gray",
+			foreground: "text-gray",
+			description: "text-gray/80"
 		}
 	},
 	mist: {
@@ -292,6 +357,11 @@ var PRESET_VARIANT_STYLES = {
 			container: "",
 			foreground: "text-mist-foreground",
 			description: "text-mist-secondary"
+		},
+		glow: {
+			container: "border border-mist-foreground/15 bg-mist-foreground/4 text-mist-foreground shadow-glow shadow-mist-foreground/45 [&>svg]:text-mist-foreground",
+			foreground: "text-mist-foreground",
+			description: "text-mist-secondary"
 		}
 	}
 };
@@ -322,8 +392,18 @@ var SILVER_VARIANT_ROWS = {
 		container: "",
 		foreground: "text-gray",
 		description: "text-gray/60"
+	},
+	glow: {
+		container: "border border-gray/15 bg-gray/4 text-gray shadow-glow shadow-gray/45 [&>svg]:text-gray",
+		foreground: "text-gray",
+		description: "text-gray/80"
 	}
 };
+/**
+* Text and icon colour on a `solid` surface of an arbitrary colour: the
+* `--espd-on-solid-foreground` token (white by default) for inline styles.
+*/
+var ON_SOLID_FOREGROUND = "var(--espd-on-solid-foreground, #fff)";
 function getArbitraryVariantStyles(variant, color) {
 	const text = resolveColor(color, "text");
 	const border = resolveColor(color, "border");
@@ -351,14 +431,26 @@ function getArbitraryVariantStyles(variant, color) {
 			...text.style
 		}
 	};
+	if (variant === "glow") return {
+		container: cn("border [&>svg]:text-current", text.className),
+		foreground: text.className ?? "",
+		foregroundStyle: text.style,
+		description: "text-current/80",
+		containerStyle: {
+			backgroundColor: `color-mix(in oklab, ${color} 4%, transparent)`,
+			borderColor: `color-mix(in oklab, ${color} 15%, transparent)`,
+			boxShadow: `0 0 15px -5.5px color-mix(in oklab, ${color} 45%, transparent)`,
+			...text.style
+		}
+	};
 	if (variant === "solid") return {
-		container: "border border-transparent text-white [&>svg]:text-white",
-		foreground: "text-white",
-		foregroundStyle: { color: "#fff" },
-		description: "text-white/80",
+		container: "border border-transparent text-[color:var(--espd-on-solid-foreground,#fff)] [&>svg]:text-[color:var(--espd-on-solid-foreground,#fff)]",
+		foreground: "text-[color:var(--espd-on-solid-foreground,#fff)]",
+		foregroundStyle: { color: ON_SOLID_FOREGROUND },
+		description: "text-[color:var(--espd-on-solid-foreground,#fff)]/80",
 		containerStyle: {
 			backgroundColor: color,
-			color: "#fff"
+			color: ON_SOLID_FOREGROUND
 		}
 	};
 	return {
@@ -385,9 +477,13 @@ function getArbitraryVariantStyles(variant, color) {
 /**
 * Resolve a `(variant, color)` tuple to container/foreground/description
 * classes (and inline styles for arbitrary colors). Single source of truth
-* for the four standard variants across Alert, Badge, Tag, SimpleClickableCard.
+* for the five standard variants across Alert, Badge, Tag, SimpleClickableCard.
 */
 function resolveVariantStyles(variant, color) {
+	if (!isBuiltInVariant(variant)) {
+		const recipe = registeredVariants.get(variant);
+		if (recipe) return recipe(color);
+	}
 	if (color === "silver") {
 		const row = SILVER_VARIANT_ROWS[variant];
 		if (variant === "gradient") return {
@@ -423,4 +519,4 @@ function resolveVariantStyles(variant, color) {
 	return getArbitraryVariantStyles(variant, color);
 }
 //#endregion
-export { PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, SILVER_GRADIENT_BACKDROP, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, arbitraryGradientBackgroundImage, resolveVariantStyles };
+export { PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, SILVER_GRADIENT_BACKDROP, VARIANTS, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_DURATION_CLASS, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, VARIANT_GRADIENT_TRANSITION_DURATION_MS, arbitraryGradientBackgroundImage, listVariants, registerVariant, resolveVariantStyles };

package/dist/utils/view-transition.js

@@ -0,0 +1,21 @@
+import { flushSync } from "react-dom";
+//#region src/utils/view-transition.ts
+/**
+* Apply a React state change inside a view transition, so elements carrying
+* `view-transition-morph` / `view-transition-glide` animate from their old
+* place to their new one. Where the browser has no View Transitions, or the
+* user asked for reduced motion, the change is applied directly.
+*/
+function startViewTransition(update) {
+	const canTransition = typeof document !== "undefined" && typeof document.startViewTransition === "function";
+	const reduce = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	if (!canTransition || reduce) {
+		update();
+		return;
+	}
+	document.startViewTransition(() => {
+		flushSync(update);
+	});
+}
+//#endregion
+export { startViewTransition };

package/dist/variant-D81RhpbR.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { P as PresetColor, C as Color } from './index-BQANnKs9.js';
+
+/**
+ * The variant names `resolveVariantStyles` accepts. An app adds its own by
+ * declaration merging plus `registerVariant` at runtime:
+ *
+ * ```ts
+ * declare module "@espressif/dashboard-ui-components/utils" {
+ *   interface VariantRegistry { glow: true }
+ * }
+ * registerVariant("glow", (color) => ({ container: "…", foreground: "…", description: "…" }))
+ * ```
+ */
+interface VariantRegistry {
+    outline: true;
+    solid: true;
+    soft: true;
+    gradient: true;
+    glow: true;
+}
+type Variant = keyof VariantRegistry;
+/** The five built-in variants. Registered variants are in {@link listVariants}. */
+declare const VARIANTS: readonly ["outline", "solid", "soft", "gradient", "glow"];
+type BuiltInVariant = (typeof VARIANTS)[number];
+/** Builds a registered variant's styles for one colour (preset, "silver" or any CSS colour). */
+type VariantRecipe = (color: Color) => VariantStyles;
+/**
+ * Adds a variant every variant-driven component accepts (Badge, Alert, Tag,
+ * SimpleClickableCard, Toast, …). Its styles come from `recipe(color)`, in the
+ * same shape `resolveVariantStyles` returns; built-in-only extras such as the
+ * gradient hover layers or silver overlays are opt-in fields of that shape.
+ * Registering a built-in name is ignored with a warning: built-ins never change.
+ * Registering an existing custom name replaces its recipe.
+ */
+declare function registerVariant(name: Exclude<Variant, BuiltInVariant>, recipe: VariantRecipe): void;
+/** The built-in variants followed by every registered one. */
+declare function listVariants(): Variant[];
+/** Duration (ms) for shared gradient hover animations (preset surfaces + overlay crossfade). */
+declare const VARIANT_GRADIENT_TRANSITION_DURATION_MS = 2000;
+/**
+ * Tailwind duration class — keep in sync with {@link VARIANT_GRADIENT_TRANSITION_DURATION_MS}
+ * so preset gradients, arbitrary gradient styles, and gradient backdrop overlays feel consistent.
+ */
+declare const VARIANT_GRADIENT_DURATION_CLASS: "duration-[2000ms]";
+/**
+ * Gradient hover cannot interpolate between two Tailwind `background-image` values on one
+ * element (it snaps). Preset gradients use crossfading absolute underlays + `opacity` instead.
+ */
+declare const VARIANT_GRADIENT_BACKDROP_BASE = "pointer-events-none absolute inset-0 -z-10 rounded-[inherit] bg-[length:100%_100%]";
+declare const VARIANT_GRADIENT_HOVER_OVERLAY_CLASS: string;
+/** Transparent frame + text/icon tint — gradients paint on {@link PRESET_GRADIENT_BACKDROP} layers. */
+declare const PRESET_GRADIENT_FRAME: Record<PresetColor, string>;
+declare const PRESET_GRADIENT_BACKDROP: Record<PresetColor, {
+    idle: string;
+    hover: string;
+}>;
+interface VariantStyles {
+    /** Container/surface classes (background, border, text). */
+    container: string;
+    containerStyle?: React.CSSProperties;
+    /** Foreground/text classes (use on labels, icons not living inside the container). */
+    foreground: string;
+    foregroundStyle?: React.CSSProperties;
+    /** Description/secondary text classes (slightly de-emphasized). */
+    description: string;
+    descriptionStyle?: React.CSSProperties;
+    /**
+     * Preset `gradient` only: idle/hover gradient utility classes for absolute underlay spans
+     * (smooth hover = opacity crossfade, see {@link VARIANT_GRADIENT_BACKDROP_BASE}).
+     */
+    gradientHoverLayers?: {
+        idle: string;
+        hover: string;
+    };
+    /**
+     * Non-preset `gradient` only: inline `backgroundImage` for each underlay (same crossfade pattern).
+     */
+    gradientHoverLayersInline?: {
+        idle: React.CSSProperties;
+        hover: React.CSSProperties;
+    };
+    /**
+     * `color === "silver" + variant === "gradient"`: render the metallic shine overlay (subtle
+     * surface-wide linear-gradient + inset bezel) on top of the gradient underlay layers.
+     * See `SilverShineOverlay`.
+     */
+    silverShine?: boolean;
+    /**
+     * `color === "silver" + variant === "outline"`: render the metallic ring overlay (1px gradient
+     * border with a truly transparent interior). See `SilverMetallicBorderOverlay`.
+     */
+    silverBorder?: boolean;
+}
+/** Non-preset `gradient` variant: `backgroundImage` for arbitrary colors (`idle` / `hover`). */
+declare function arbitraryGradientBackgroundImage(color: string, emphasis: "idle" | "hover"): string;
+/**
+ * Resolve a `(variant, color)` tuple to container/foreground/description
+ * classes (and inline styles for arbitrary colors). Single source of truth
+ * for the five standard variants across Alert, Badge, Tag, SimpleClickableCard.
+ */
+declare function resolveVariantStyles(variant: Variant, color: Color): VariantStyles;
+
+export { PRESET_GRADIENT_BACKDROP as P, VARIANTS as V, PRESET_GRADIENT_FRAME as a, VARIANT_GRADIENT_BACKDROP_BASE as b, VARIANT_GRADIENT_DURATION_CLASS as c, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS as d, VARIANT_GRADIENT_TRANSITION_DURATION_MS as e, type Variant as f, type VariantRecipe as g, type VariantRegistry as h, type VariantStyles as i, arbitraryGradientBackgroundImage as j, resolveVariantStyles as k, listVariants as l, registerVariant as r };

package/dist/vertical-stepper.props-BXYcbW70.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+/**
+ * `stale`: done once, but what it was made from has changed since, so it needs
+ * doing again. Drawn in `warning`; counts as reached.
+ *
+ * `failed`: it ran and did not succeed (a check that found a problem, a build
+ * that broke). Drawn in `error`; counts as reached.
+ */
+type VerticalStepperStepStatus = "in_progress" | "not_started" | "complete" | "stale" | "failed";
+type VerticalStepperSize = "sm" | "default" | "lg";
+interface VerticalStepperStep {
+    id: string;
+    title: string;
+    description: string;
+    icon: ReactNode;
+    status: VerticalStepperStepStatus;
+    endAction?: ReactNode;
+}
+interface VerticalStepperProps {
+    data: VerticalStepperStep[];
+    onStepClick?: (id: string) => void;
+    size?: VerticalStepperSize;
+    className?: string;
+    /** Defaults to "Progress" */
+    ariaLabel?: string;
+}
+
+export type { VerticalStepperProps as V, VerticalStepperSize as a, VerticalStepperStep as b, VerticalStepperStepStatus as c };