@espressif/dashboard-ui-components 1.9.1 → 1.11.0

package/dist/utils/variant-gradient-underlay.js

@@ -0,0 +1,45 @@
+import { cn } from "./cn.js";
+import { SilverMetallicBorderOverlay, SilverShineOverlay } from "./silver-shine.js";
+import { VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS } from "./variant.js";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/utils/variant-gradient-underlay.tsx
+/**
+* Smooth gradient hover uses two stacked backgrounds and fades the hover layer in with
+* `opacity` (`group-hover`). Two different `background-image` values on one element cannot
+* interpolate in CSS.
+*/
+function VariantGradientUnderlay({ layers, layersInline, silverShine = false, silverBorder = false }) {
+	const shine = silverShine ? /* @__PURE__ */ jsx(SilverShineOverlay, {}) : null;
+	const border = silverBorder ? /* @__PURE__ */ jsx(SilverMetallicBorderOverlay, {}) : null;
+	if (layers != null) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(VARIANT_GRADIENT_BACKDROP_BASE, layers.idle)
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(VARIANT_GRADIENT_BACKDROP_BASE, layers.hover, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS)
+		}),
+		shine,
+		border
+	] });
+	if (layersInline != null) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: VARIANT_GRADIENT_BACKDROP_BASE,
+			style: layersInline.idle
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS),
+			style: layersInline.hover
+		}),
+		shine,
+		border
+	] });
+	if (shine || border) return /* @__PURE__ */ jsxs(Fragment$1, { children: [shine, border] });
+	return null;
+}
+//#endregion
+export { VariantGradientUnderlay };

package/dist/utils/variant.js

@@ -0,0 +1,426 @@
+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
+var VARIANTS = [
+	"outline",
+	"solid",
+	"soft",
+	"gradient"
+];
+/** Duration (ms) for shared gradient hover animations (preset surfaces + overlay crossfade). */
+var VARIANT_GRADIENT_TRANSITION_DURATION_MS = 2e3;
+/**
+* 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.
+*/
+var 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.
+*/
+var VARIANT_GRADIENT_BACKDROP_BASE = "pointer-events-none absolute inset-0 -z-10 rounded-[inherit] bg-[length:100%_100%]";
+var VARIANT_GRADIENT_HOVER_OVERLAY_CLASS = cn("opacity-0 transition-opacity ease-in-out group-hover:opacity-100", VARIANT_GRADIENT_DURATION_CLASS);
+/** Transparent frame + text/icon tint — gradients paint on {@link PRESET_GRADIENT_BACKDROP} layers. */
+var PRESET_GRADIENT_FRAME = {
+	primary: "border border-primary/20 bg-transparent text-primary [&>svg]:text-primary",
+	secondary: "border border-secondary/20 bg-transparent text-secondary [&>svg]:text-secondary",
+	info: "border border-info/20 bg-transparent text-info [&>svg]:text-info",
+	warning: "border border-warning/20 bg-transparent text-warning [&>svg]:text-warning",
+	error: "border border-error/20 bg-transparent text-error [&>svg]:text-error",
+	success: "border border-success/20 bg-transparent text-success [&>svg]:text-success",
+	disabled: "border border-disabled/20 bg-transparent text-disabled [&>svg]:text-disabled",
+	gray: "border border-gray/20 bg-transparent text-gray [&>svg]:text-gray",
+	mist: "border border-mist-border bg-transparent text-mist-foreground [&>svg]:text-mist-foreground"
+};
+var PRESET_GRADIENT_BACKDROP = {
+	primary: {
+		idle: "bg-gradient-to-r from-primary/5 via-primary/10 to-primary/5",
+		hover: "bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10"
+	},
+	secondary: {
+		idle: "bg-gradient-to-r from-secondary/5 via-secondary/10 to-secondary/5",
+		hover: "bg-gradient-to-r from-secondary/10 via-secondary/5 to-secondary/10"
+	},
+	info: {
+		idle: "bg-gradient-to-r from-info/5 via-info/10 to-info/5",
+		hover: "bg-gradient-to-r from-info/10 via-info/5 to-info/10"
+	},
+	warning: {
+		idle: "bg-gradient-to-r from-warning/5 via-warning/10 to-warning/5",
+		hover: "bg-gradient-to-r from-warning/10 via-warning/5 to-warning/10"
+	},
+	error: {
+		idle: "bg-gradient-to-r from-error/5 via-error/10 to-error/5",
+		hover: "bg-gradient-to-r from-error/10 via-error/5 to-error/10"
+	},
+	success: {
+		idle: "bg-gradient-to-r from-success/5 via-success/10 to-success/5",
+		hover: "bg-gradient-to-r from-success/10 via-success/5 to-success/10"
+	},
+	disabled: {
+		idle: "bg-gradient-to-r from-disabled/5 via-disabled/10 to-disabled/5",
+		hover: "bg-gradient-to-r from-disabled/10 via-disabled/5 to-disabled/10"
+	},
+	gray: {
+		idle: "bg-gradient-to-r from-gray/5 via-gray/10 to-gray/5",
+		hover: "bg-gradient-to-r from-gray/10 via-gray/5 to-gray/10"
+	},
+	mist: {
+		idle: "bg-gradient-to-r from-mist via-mist-border to-mist",
+		hover: "bg-gradient-to-r from-mist-border via-mist to-mist-border"
+	}
+};
+/**
+* Backdrop layers for `color === "silver" + variant === "gradient"`. Intentionally lighter than
+* {@link PRESET_GRADIENT_BACKDROP.gray} (roughly half the gray opacity) so the surface reads as
+* a polished, brighter "silver" instead of just a shinier `gray`. The cool/metallic feel comes
+* from `SilverShineOverlay` painted on top.
+*/
+var SILVER_GRADIENT_BACKDROP = {
+	idle: "bg-gradient-to-r from-gray/2 via-gray/5 to-gray/2",
+	hover: "bg-gradient-to-r from-gray/5 via-gray/2 to-gray/5"
+};
+/** Non-preset `gradient` variant: `backgroundImage` for arbitrary colors (`idle` / `hover`). */
+function arbitraryGradientBackgroundImage(color, emphasis) {
+	const mix = (pct) => `color-mix(in srgb, ${color} ${pct}%, transparent)`;
+	const [a, b, c] = emphasis === "idle" ? [
+		5,
+		10,
+		5
+	] : [
+		10,
+		5,
+		10
+	];
+	return `linear-gradient(to right, ${mix(a)}, ${mix(b)}, ${mix(c)})`;
+}
+var PRESET_VARIANT_STYLES = {
+	primary: {
+		soft: {
+			container: "border border-primary/10 bg-primary/5 text-primary [&>svg]:text-primary",
+			foreground: "text-primary",
+			description: "text-primary/80"
+		},
+		outline: {
+			container: "bg-transparent border border-primary/50 dark:border-primary/30 text-primary [&>svg]:text-primary",
+			foreground: "text-primary",
+			description: "text-primary/80"
+		},
+		solid: {
+			container: "border border-transparent bg-primary text-primary-foreground [&>svg]:text-primary-foreground",
+			foreground: "text-primary-foreground",
+			description: "text-primary-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-primary",
+			description: "text-primary/60"
+		}
+	},
+	secondary: {
+		soft: {
+			container: "border border-secondary/10 bg-secondary/5 text-secondary [&>svg]:text-secondary",
+			foreground: "text-secondary",
+			description: "text-secondary/80"
+		},
+		outline: {
+			container: "bg-transparent border border-secondary/50 dark:border-secondary/30 text-secondary [&>svg]:text-secondary",
+			foreground: "text-secondary",
+			description: "text-secondary/80"
+		},
+		solid: {
+			container: "border border-transparent bg-secondary text-secondary-foreground [&>svg]:text-secondary-foreground",
+			foreground: "text-secondary-foreground",
+			description: "text-secondary-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-secondary",
+			description: "text-secondary/60"
+		}
+	},
+	info: {
+		soft: {
+			container: "border border-info/10 bg-info/5 text-info [&>svg]:text-info",
+			foreground: "text-info",
+			description: "text-info/80"
+		},
+		outline: {
+			container: "bg-transparent border border-info/50 dark:border-info/30 text-info [&>svg]:text-info",
+			foreground: "text-info",
+			description: "text-info/80"
+		},
+		solid: {
+			container: "border border-transparent bg-info text-info-foreground [&>svg]:text-info-foreground",
+			foreground: "text-info-foreground",
+			description: "text-info-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-info",
+			description: "text-info/60"
+		}
+	},
+	warning: {
+		soft: {
+			container: "border border-warning/10 bg-warning/5 text-warning [&>svg]:text-warning",
+			foreground: "text-warning",
+			description: "text-warning"
+		},
+		outline: {
+			container: "bg-transparent border border-warning/50 dark:border-warning/30 text-warning [&>svg]:text-warning",
+			foreground: "text-warning",
+			description: "text-warning"
+		},
+		solid: {
+			container: "border border-transparent bg-warning text-warning-foreground [&>svg]:text-warning-foreground",
+			foreground: "text-warning-foreground",
+			description: "text-warning-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-warning",
+			description: "text-warning/60"
+		}
+	},
+	error: {
+		soft: {
+			container: "border border-error/10 bg-error/5 text-error [&>svg]:text-error",
+			foreground: "text-error",
+			description: "text-error/80"
+		},
+		outline: {
+			container: "bg-transparent border border-error/50 dark:border-error/30 text-error [&>svg]:text-error",
+			foreground: "text-error",
+			description: "text-error/80"
+		},
+		solid: {
+			container: "border border-transparent bg-error text-error-foreground [&>svg]:text-error-foreground",
+			foreground: "text-error-foreground",
+			description: "text-error-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-error",
+			description: "text-error/60"
+		}
+	},
+	success: {
+		soft: {
+			container: "border border-success/10 bg-success/5 text-success [&>svg]:text-success",
+			foreground: "text-success",
+			description: "text-success/80"
+		},
+		outline: {
+			container: "bg-transparent border border-success/50 dark:border-success/30 text-success [&>svg]:text-success",
+			foreground: "text-success",
+			description: "text-success/80"
+		},
+		solid: {
+			container: "border border-transparent bg-success text-success-foreground [&>svg]:text-success-foreground",
+			foreground: "text-success-foreground",
+			description: "text-success-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-success",
+			description: "text-success/60"
+		}
+	},
+	disabled: {
+		soft: {
+			container: "border border-disabled/10 bg-disabled/5 text-disabled [&>svg]:text-disabled",
+			foreground: "text-disabled",
+			description: "text-disabled/80"
+		},
+		outline: {
+			container: "bg-transparent border border-disabled/50 dark:border-disabled/30 text-disabled [&>svg]:text-disabled",
+			foreground: "text-disabled",
+			description: "text-disabled/80"
+		},
+		solid: {
+			container: "border border-transparent bg-disabled text-disabled-foreground [&>svg]:text-disabled-foreground",
+			foreground: "text-disabled-foreground",
+			description: "text-disabled-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-disabled",
+			description: "text-disabled/60"
+		}
+	},
+	gray: {
+		soft: {
+			container: "border border-gray/10 bg-gray/5 text-gray [&>svg]:text-gray",
+			foreground: "text-gray",
+			description: "text-gray/80"
+		},
+		outline: {
+			container: "bg-transparent border border-gray/50 dark:border-gray/30 text-gray [&>svg]:text-gray",
+			foreground: "text-gray",
+			description: "text-gray/80"
+		},
+		solid: {
+			container: "border border-transparent bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
+			foreground: "text-gray-foreground",
+			description: "text-gray-foreground/80"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-gray",
+			description: "text-gray/60"
+		}
+	},
+	mist: {
+		soft: {
+			container: "border border-mist-border bg-mist text-mist-foreground [&>svg]:text-mist-foreground",
+			foreground: "text-mist-foreground",
+			description: "text-mist-secondary"
+		},
+		outline: {
+			container: "bg-transparent border border-mist-border text-mist-foreground [&>svg]:text-mist-foreground",
+			foreground: "text-mist-foreground",
+			description: "text-mist-secondary"
+		},
+		solid: {
+			container: "border border-transparent bg-mist text-mist-foreground [&>svg]:text-mist-foreground",
+			foreground: "text-mist-foreground",
+			description: "text-mist-secondary"
+		},
+		gradient: {
+			container: "",
+			foreground: "text-mist-foreground",
+			description: "text-mist-secondary"
+		}
+	}
+};
+/**
+* Brand-specific `silver` color (not a `PresetColor` — see {@link resolveVariantStyles}).
+* Visually a gray surface with a {@link SilverShineOverlay} on top; soft uses the very subtle
+* tint requested by design (`bg-gray/2 border-gray/5`).
+*/
+var SILVER_VARIANT_ROWS = {
+	soft: {
+		container: "border border-gray/5 bg-gray/2 text-gray [&>svg]:text-gray",
+		foreground: "text-gray",
+		description: "text-gray/80"
+	},
+	outline: {
+		/** No `border-*` here — the metallic ring is painted by `SilverMetallicBorderOverlay`. */
+		container: "bg-transparent border-0 text-gray [&>svg]:text-gray",
+		foreground: "text-gray",
+		description: "text-gray/80"
+	},
+	solid: {
+		/** Metallic surface gradient layered on top of `bg-gray` via `SILVER_SOLID_SURFACE_STYLE`. */
+		container: "border border-transparent bg-gray text-gray-foreground [&>svg]:text-gray-foreground",
+		foreground: "text-gray-foreground",
+		description: "text-gray-foreground/80"
+	},
+	gradient: {
+		container: "",
+		foreground: "text-gray",
+		description: "text-gray/60"
+	}
+};
+function getArbitraryVariantStyles(variant, color) {
+	const text = resolveColor(color, "text");
+	const border = resolveColor(color, "border");
+	if (variant === "soft") return {
+		container: cn("border [&>svg]:text-current", text.className),
+		foreground: text.className ?? "",
+		foregroundStyle: text.style,
+		description: "text-current/80",
+		containerStyle: {
+			backgroundColor: `color-mix(in srgb, ${color} 5%, transparent)`,
+			borderColor: `color-mix(in srgb, ${color} 10%, transparent)`,
+			...text.style
+		}
+	};
+	if (variant === "outline") return {
+		container: cn("bg-transparent border [&>svg]:text-current", border.className, text.className),
+		foreground: text.className ?? "",
+		foregroundStyle: text.style,
+		description: "text-current/80",
+		containerStyle: {
+			borderColor: `light-dark(
+          color-mix(in srgb, ${color} 50%, transparent),
+          color-mix(in srgb, ${color} 28%, 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",
+		containerStyle: {
+			backgroundColor: color,
+			color: "#fff"
+		}
+	};
+	return {
+		container: cn("relative isolate overflow-hidden group border [&>svg]:text-current", text.className),
+		foreground: text.className ?? "",
+		foregroundStyle: text.style,
+		description: "text-current/60",
+		containerStyle: {
+			borderColor: `color-mix(in srgb, ${color} 20%, transparent)`,
+			...text.style
+		},
+		gradientHoverLayersInline: {
+			idle: {
+				backgroundImage: arbitraryGradientBackgroundImage(color, "idle"),
+				backgroundSize: "100% 100%"
+			},
+			hover: {
+				backgroundImage: arbitraryGradientBackgroundImage(color, "hover"),
+				backgroundSize: "100% 100%"
+			}
+		}
+	};
+}
+/**
+* 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.
+*/
+function resolveVariantStyles(variant, color) {
+	if (color === "silver") {
+		const row = SILVER_VARIANT_ROWS[variant];
+		if (variant === "gradient") return {
+			container: cn("relative isolate overflow-hidden group", PRESET_GRADIENT_FRAME.gray),
+			gradientHoverLayers: SILVER_GRADIENT_BACKDROP,
+			foreground: row.foreground,
+			description: row.description,
+			silverShine: true
+		};
+		return {
+			container: cn("relative isolate overflow-hidden", row.container),
+			containerStyle: variant === "solid" ? SILVER_SOLID_SURFACE_STYLE : void 0,
+			foreground: row.foreground,
+			description: row.description,
+			silverBorder: variant === "outline"
+		};
+	}
+	if (isPresetColor(color)) {
+		const preset = color;
+		const row = PRESET_VARIANT_STYLES[preset][variant];
+		if (variant === "gradient") return {
+			container: cn("relative isolate overflow-hidden group", PRESET_GRADIENT_FRAME[preset]),
+			gradientHoverLayers: PRESET_GRADIENT_BACKDROP[preset],
+			foreground: row.foreground,
+			description: row.description
+		};
+		return {
+			container: row.container,
+			foreground: row.foreground,
+			description: row.description
+		};
+	}
+	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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@espressif/dashboard-ui-components",
-  "version": "1.9.1",
+  "version": "1.11.0",
   "description": "Reusable React UI components, page layouts, and utilities — Espressif's dashboard design system.",
   "keywords": [
     "react",
@@ -89,12 +89,13 @@
     ".claude/rules/dashboard-ui-consumption.md"
   ],
   "scripts": {
-    "build": "tsup",
-    "dev:lib": "tsup --watch",
-    "prepublishOnly": "tsup",
+    "build": "vite build --config vite.lib.config.ts && tsup",
+    "dev:lib": "tsup && vite build --config vite.lib.config.ts --watch",
+    "prepublishOnly": "npm run build",
     "typecheck": "tsc --noEmit",
     "lint": "eslint",
     "test": "vitest run",
+    "size": "node scripts/check-bundle-size.mjs",
     "clean": "rm -rf dist",
     "dev:demo": "cd demo && npm run dev",
     "build:demo": "cd demo && npm run build",
@@ -161,6 +162,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "esbuild": "^0.28.1",
     "eslint": "10.10.0",
     "jsdom": "29.1.1",
     "react": "^19.0.0",
@@ -171,6 +173,7 @@
     "tsup": "^8.0.0",
     "typescript": "^5.5.0",
     "typescript-eslint": "8.70.0",
+    "vite": "8.1.1",
     "vitest": "4.1.6"
   }
 }