@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/layouts/index.js

@@ -1,6 +1,7 @@
-export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout } from '../chunk-2GDYZAKR.js';
-import '../chunk-TMORRNEB.js';
-export { isSidebarGroup } from '../chunk-Z4776NRY.js';
-import '../chunk-XNLCVHBC.js';
-import '../chunk-VU4CZ76T.js';
-import '../chunk-TRTQSARU.js';
+import { isSidebarGroup } from "../components/sidebar/types.js";
+import Header from "./workspace-layout/header/header.js";
+import Footer from "./workspace-layout/footer/footer.js";
+import AccountMenu from "./workspace-layout/account-menu/account-menu.js";
+import WorkspaceLayout from "./workspace-layout/workspace-layout.js";
+import EntryLayout from "./entry-layout/entry-layout.js";
+export { AccountMenu, EntryLayout, Footer as WorkspaceFooter, Header as WorkspaceHeader, WorkspaceLayout, isSidebarGroup };

package/dist/layouts/workspace-layout/account-menu/account-menu.js

@@ -0,0 +1,108 @@
+import { DropdownMenuItem } from "../../../core/animate-ui/components/radix/dropdown-menu.js";
+import ProfileCard from "../../../common/profile-card/profile-card.js";
+import MyAccountMenu from "../../../common/my-account-menu/my-account-menu.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Check, Globe, LogOut, Palette } from "lucide-react";
+//#region src/layouts/workspace-layout/account-menu/account-menu.tsx
+function AccountMenu({ userName, userEmail, userProfilePictureUrl, avatarBadgeColor, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, additionalItems }) {
+	const menuItems = useMemo(() => {
+		const groups = [];
+		if (userName || userEmail) {
+			const profileCard = /* @__PURE__ */ jsx(ProfileCard, {
+				name: userName,
+				email: userEmail,
+				imageUrl: userProfilePictureUrl
+			}, "profile");
+			groups.push({
+				id: "profile",
+				items: [onProfileCardClick ? /* @__PURE__ */ jsx("div", {
+					className: "-mx-2.5 -my-1.5",
+					children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+						onSelect: onProfileCardClick,
+						className: "px-2.5 py-1.5 cursor-pointer *:flex-1 *:min-w-0",
+						children: profileCard
+					})
+				}, "profile") : profileCard]
+			});
+		}
+		if (onColorThemeChange) {
+			const isDark = colorTheme === "dark";
+			const themeItems = [{
+				id: "theme-dark",
+				label: "Dark mode",
+				endIcon: isDark ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : void 0,
+				isSelected: isDark,
+				onClick: () => onColorThemeChange("dark")
+			}, {
+				id: "theme-light",
+				label: "Light mode",
+				endIcon: !isDark ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : void 0,
+				isSelected: !isDark,
+				onClick: () => onColorThemeChange("light")
+			}];
+			groups.push({
+				id: "theme",
+				items: [{
+					id: "color-theme",
+					label: "Color theme",
+					startIcon: /* @__PURE__ */ jsx(Palette, { className: "h-4 w-4" }),
+					items: themeItems
+				}]
+			});
+		}
+		if (onLanguageChange && languages?.length) {
+			const langItems = languages.map((lang) => ({
+				id: `lang-${lang.code}`,
+				label: lang.label,
+				endIcon: lang.code === currentLanguage ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : void 0,
+				isSelected: lang.code === currentLanguage,
+				onClick: () => onLanguageChange(lang.code)
+			}));
+			groups.push({
+				id: "language",
+				items: [{
+					id: "language",
+					label: "Language",
+					startIcon: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" }),
+					items: langItems
+				}]
+			});
+		}
+		if (additionalItems?.length) groups.push(...additionalItems);
+		if (onLogoutClick) groups.push({
+			id: "logout",
+			items: [{
+				id: "logout",
+				label: "Logout",
+				startIcon: /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
+				color: "error",
+				onClick: onLogoutClick
+			}]
+		});
+		return groups;
+	}, [
+		userName,
+		userEmail,
+		userProfilePictureUrl,
+		onProfileCardClick,
+		onColorThemeChange,
+		colorTheme,
+		onLanguageChange,
+		languages,
+		currentLanguage,
+		additionalItems,
+		onLogoutClick
+	]);
+	if (menuItems.length === 0) return null;
+	return /* @__PURE__ */ jsx(MyAccountMenu, {
+		name: userName,
+		email: userEmail,
+		imageUrl: userProfilePictureUrl,
+		badgeColor: avatarBadgeColor,
+		menuItems,
+		minWidth: "220px"
+	});
+}
+//#endregion
+export { AccountMenu as default };

package/dist/layouts/workspace-layout/breadcrumbs/derive-breadcrumbs.js

@@ -0,0 +1,37 @@
+import { isPathPrefixOf } from "../../../utils/path-match.js";
+import { isSidebarGroup } from "../../../components/sidebar/types.js";
+//#region src/layouts/workspace-layout/breadcrumbs/derive-breadcrumbs.ts
+function labelFromPath(path) {
+	const last = path.split("/").filter(Boolean).pop();
+	if (!last) return "Home";
+	return last.charAt(0).toUpperCase() + last.slice(1).replace(/-/g, " ");
+}
+function deriveBreadcrumbs(groups, currentPath, indexPath) {
+	const matches = [];
+	if (indexPath && isPathPrefixOf(indexPath, currentPath)) {
+		if (!groups.some((entry) => {
+			if (isSidebarGroup(entry)) return entry.items.some((item) => item.path === indexPath);
+			return entry.path === indexPath;
+		})) matches.push({
+			label: labelFromPath(indexPath),
+			path: indexPath
+		});
+	}
+	for (const entry of groups) if (isSidebarGroup(entry)) {
+		for (const item of entry.items) if (isPathPrefixOf(item.path, currentPath)) matches.push({
+			label: item.label,
+			path: item.path
+		});
+	} else if (isPathPrefixOf(entry.path, currentPath)) matches.push({
+		label: entry.label,
+		path: entry.path
+	});
+	if (matches.length === 0) return [];
+	matches.sort((a, b) => a.path.length - b.path.length);
+	return matches.map((match) => ({
+		label: match.label,
+		path: match.path === currentPath ? void 0 : match.path
+	}));
+}
+//#endregion
+export { deriveBreadcrumbs };

package/dist/layouts/workspace-layout/breadcrumbs/workspace-breadcrumbs.js

@@ -0,0 +1,22 @@
+import { useSidebar } from "../../../core/animate-ui/components/radix/sidebar.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../../../core/breadcrumb.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layouts/workspace-layout/breadcrumbs/workspace-breadcrumbs.tsx
+function WorkspaceBreadcrumbs({ items, linkComponent: LinkComponent, collapseOnMobile = false }) {
+	const { isMobile } = useSidebar();
+	if (items.length === 0) return null;
+	const visibleItems = collapseOnMobile && isMobile ? items.slice(-1) : items;
+	return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsx(BreadcrumbList, { children: visibleItems.map((item, index) => {
+		const isLast = index === visibleItems.length - 1;
+		return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(BreadcrumbItem, { children: item.path ? /* @__PURE__ */ jsx(BreadcrumbLink, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(LinkComponent, {
+				to: item.path,
+				children: item.label
+			})
+		}) : /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) }), !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})] }, item.path ?? index);
+	}) }) });
+}
+//#endregion
+export { WorkspaceBreadcrumbs as default };

package/dist/layouts/workspace-layout/footer/footer.js

@@ -0,0 +1,15 @@
+import { cn } from "../../../utils/cn.js";
+import FooterCard from "../../../common/footer-card/footer-card.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/workspace-layout/footer/footer.tsx
+function Footer({ hidden = false }) {
+	return /* @__PURE__ */ jsx("footer", {
+		className: cn("bg-sidebar", hidden ? "h-[var(--espd-hidden-footer-height)]" : "h-[var(--espd-footer-height)]"),
+		children: !hidden && /* @__PURE__ */ jsx("div", {
+			className: "text-[10px] text-muted-foreground h-full flex items-center justify-center tracking-normal",
+			children: /* @__PURE__ */ jsx(FooterCard, {})
+		})
+	});
+}
+//#endregion
+export { Footer as default };

package/dist/layouts/workspace-layout/header/header.js

@@ -0,0 +1,54 @@
+import { cn } from "../../../utils/cn.js";
+import { Button } from "../../../core/button.js";
+import { SidebarTrigger, useSidebar } from "../../../core/animate-ui/components/radix/sidebar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "lucide-react";
+//#region src/layouts/workspace-layout/header/header.tsx
+function Header({ leftContent, rightContent, endContent, showSidebarTrigger = false, mobileLogo }) {
+	const { state, isMobile, toggleSidebar } = useSidebar();
+	const sidebarWidth = state === "collapsed" ? "calc(var(--espd-sidebar-width-collapsed) - 1px)" : "calc(var(--espd-sidebar-width) - 1px)";
+	return /* @__PURE__ */ jsx("header", {
+		className: "fixed top-0 z-50 border-b backdrop-blur supports-[backdrop-filter]:bg-header transition-[left,width] duration-200 ease-linear border-header-border",
+		style: {
+			left: isMobile ? 0 : `calc(${sidebarWidth})`,
+			width: isMobile ? "100%" : `calc(100% - ${sidebarWidth})`,
+			height: "var(--espd-header-height)"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full items-center gap-3 pr-4",
+			children: [
+				showSidebarTrigger && /* @__PURE__ */ jsx("div", {
+					className: "sidebar-trigger shrink-0",
+					children: isMobile ? /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "icon",
+						className: "size-10",
+						onClick: toggleSidebar,
+						children: [/* @__PURE__ */ jsx(Menu, { className: "!size-6" }), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Toggle Sidebar"
+						})]
+					}) : /* @__PURE__ */ jsx(SidebarTrigger, {})
+				}),
+				isMobile && mobileLogo && /* @__PURE__ */ jsx("div", {
+					className: "mobile-logo shrink-0",
+					children: mobileLogo
+				}),
+				leftContent && /* @__PURE__ */ jsx("div", {
+					className: cn("min-w-0", !rightContent && "flex-1"),
+					children: leftContent
+				}),
+				rightContent && /* @__PURE__ */ jsx("div", {
+					className: "flex-1 min-w-0",
+					children: rightContent
+				}),
+				endContent && /* @__PURE__ */ jsx("div", {
+					className: "shrink-0 ml-auto flex items-center gap-2",
+					children: endContent
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { Header as default };

package/dist/layouts/workspace-layout/workspace-layout.js

@@ -0,0 +1,157 @@
+import { SidebarInset, SidebarProvider, useSidebar } from "../../core/animate-ui/components/radix/sidebar.js";
+import Sidebar from "../../components/sidebar/sidebar.js";
+import AppLogo from "../../common/app-logo/app-logo.js";
+import Header from "./header/header.js";
+import Footer from "./footer/footer.js";
+import AccountMenu from "./account-menu/account-menu.js";
+import WorkspaceBreadcrumbs from "./breadcrumbs/workspace-breadcrumbs.js";
+import { deriveBreadcrumbs } from "./breadcrumbs/derive-breadcrumbs.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layouts/workspace-layout/workspace-layout.tsx
+function renderLogoForState({ logo, logoCollapsed, logoAssets, appName, darkMode, collapsed }) {
+	const nodeOverride = collapsed ? logoCollapsed ?? logo : logo;
+	if (nodeOverride !== void 0) return nodeOverride;
+	if (logoAssets) return /* @__PURE__ */ jsx(AppLogo, {
+		logo: logoAssets,
+		darkMode,
+		minimal: collapsed
+	});
+	if (appName) return /* @__PURE__ */ jsx(AppLogo, {
+		name: appName,
+		darkMode,
+		minimal: collapsed
+	});
+	return null;
+}
+function SidebarLogo({ logo, logoCollapsed, logoAssets, appName, darkMode, indexPath, linkComponent: LinkComponent }) {
+	const { state, isMobile } = useSidebar();
+	const node = renderLogoForState({
+		logo,
+		logoCollapsed,
+		logoAssets,
+		appName,
+		darkMode,
+		collapsed: state === "collapsed" && !isMobile
+	});
+	if (node === null) return null;
+	if (indexPath && LinkComponent) return /* @__PURE__ */ jsx(LinkComponent, {
+		to: indexPath,
+		className: "no-underline",
+		children: node
+	});
+	return node;
+}
+function EspressifFooterBranding({ darkMode }) {
+	const { state } = useSidebar();
+	return /* @__PURE__ */ jsx("a", {
+		href: "https://www.espressif.com/",
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "no-underline flex justify-center w-full opacity-25 transition-opacity duration-500 ease-in-out hover:opacity-100",
+		"aria-label": "Espressif",
+		children: /* @__PURE__ */ jsx(AppLogo, {
+			width: 120,
+			darkMode,
+			minimal: state === "collapsed"
+		})
+	});
+}
+function WorkspaceLayout({ appName, logo, logoCollapsed, logoMobile, logoAssets, footerBranding, children, sidebarConfig, headerConfig, footerConfig, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, onLogoutClick, onProfileCardClick, onColorThemeChange, colorTheme, onLanguageChange, languages, currentLanguage, accountMenuItems, hideBreadcrumbs }) {
+	const SidebarLinkComp = sidebarConfig.linkComponent;
+	const hideFooter = footerConfig?.hidden ?? false;
+	const darkMode = colorTheme === "dark";
+	const contentHeight = hideFooter ? "calc(100vh - var(--espd-header-height) - var(--espd-hidden-footer-height))" : "calc(100vh - var(--espd-header-height) - var(--espd-footer-height))";
+	const breadcrumbItems = hideBreadcrumbs ? [] : headerConfig?.breadcrumbs ?? deriveBreadcrumbs(sidebarConfig.items, sidebarConfig.currentPath, sidebarConfig.indexPath);
+	const mobileLogoNode = logoMobile ?? (logoAssets ? /* @__PURE__ */ jsx(AppLogo, {
+		logo: logoAssets,
+		darkMode,
+		minimal: true,
+		width: 24
+	}) : appName ? /* @__PURE__ */ jsx(AppLogo, {
+		name: appName,
+		darkMode,
+		minimal: true,
+		width: 24
+	}) : null);
+	const mobileLogo = mobileLogoNode && sidebarConfig.indexPath ? /* @__PURE__ */ jsx(SidebarLinkComp, {
+		to: sidebarConfig.indexPath,
+		className: "no-underline",
+		children: mobileLogoNode
+	}) : mobileLogoNode;
+	const headerLeftContent = breadcrumbItems.length > 0 ? /* @__PURE__ */ jsx(WorkspaceBreadcrumbs, {
+		items: breadcrumbItems,
+		linkComponent: SidebarLinkComp,
+		collapseOnMobile: headerConfig?.collapseBreadcrumbsOnMobile ?? false
+	}) : null;
+	let footerBrandingNode = null;
+	if (footerBranding === false) footerBrandingNode = null;
+	else if (footerBranding !== void 0) footerBrandingNode = footerBranding;
+	else if (appName && sidebarConfig.hideCompanyBranding !== true) footerBrandingNode = /* @__PURE__ */ jsx(EspressifFooterBranding, { darkMode });
+	const sidebarFooter = sidebarConfig.footer != null || footerBrandingNode != null ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 w-full",
+		children: [sidebarConfig.footer, footerBrandingNode]
+	}) : void 0;
+	const accountMenu = /* @__PURE__ */ jsx(AccountMenu, {
+		userName: headerConfig?.userName,
+		userEmail: headerConfig?.userEmail,
+		userProfilePictureUrl: headerConfig?.userProfilePictureUrl,
+		avatarBadgeColor: headerConfig?.avatarBadgeColor,
+		onLogoutClick,
+		onProfileCardClick,
+		onColorThemeChange,
+		colorTheme,
+		onLanguageChange,
+		languages,
+		currentLanguage,
+		additionalItems: accountMenuItems
+	});
+	return /* @__PURE__ */ jsxs(SidebarProvider, {
+		open: sidebarOpen,
+		defaultOpen: defaultSidebarOpen,
+		onOpenChange: onSidebarOpenChange,
+		children: [/* @__PURE__ */ jsx(Sidebar, {
+			items: sidebarConfig.items,
+			currentPath: sidebarConfig.currentPath,
+			header: /* @__PURE__ */ jsx(SidebarLogo, {
+				logo,
+				logoCollapsed,
+				logoAssets,
+				appName,
+				darkMode,
+				indexPath: sidebarConfig.indexPath,
+				linkComponent: SidebarLinkComp
+			}),
+			headerHeight: "var(--espd-header-height)",
+			footer: sidebarFooter,
+			linkComponent: SidebarLinkComp,
+			collapsible: sidebarConfig.allowCollapsible ? "icon" : "none",
+			variant: sidebarConfig.variant,
+			focusActiveGroup: sidebarConfig.focusActiveGroup
+		}), /* @__PURE__ */ jsxs(SidebarInset, {
+			className: "overflow-hidden h-dvh max-h-dvh",
+			children: [
+				/* @__PURE__ */ jsx(Header, {
+					leftContent: headerLeftContent,
+					rightContent: headerConfig?.rightContent,
+					endContent: accountMenu,
+					showSidebarTrigger: sidebarConfig.allowCollapsible,
+					mobileLogo
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex flex-1 flex-col gap-4 bg-sidebar",
+					style: {
+						paddingTop: "var(--espd-header-height)",
+						height: contentHeight
+					},
+					children: /* @__PURE__ */ jsx("main", {
+						className: "flex-1 bg-background h-full overflow-y-auto md:rounded-tl-2xl md:rounded-bl-2xl pb-10",
+						children
+					})
+				}),
+				/* @__PURE__ */ jsx(Footer, { hidden: hideFooter })
+			]
+		})]
+	});
+}
+//#endregion
+export { WorkspaceLayout as default };

package/dist/tailwind-preset.js

@@ -1,5 +1,3 @@
-import './chunk-TRTQSARU.js';
-
 // tailwind.preset.ts
 var espPreset = {
   darkMode: "class",
@@ -113,5 +111,6 @@ var espPreset = {
   }
 };
 var tailwind_preset_default = espPreset;
-
-export { tailwind_preset_default as default };
+export {
+  tailwind_preset_default as default
+};

package/dist/utils/cn.js

@@ -0,0 +1,8 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/utils/cn.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };

package/dist/utils/color.js

@@ -0,0 +1,72 @@
+//#region src/utils/color.ts
+var PRESET_COLORS = /* @__PURE__ */ new Set([
+	"primary",
+	"secondary",
+	"error",
+	"info",
+	"success",
+	"warning",
+	"disabled",
+	"gray",
+	"mist"
+]);
+function isPresetColor(color) {
+	return PRESET_COLORS.has(color);
+}
+var presetClassMap = {
+	primary: {
+		bg: "bg-primary",
+		text: "text-primary",
+		border: "border-primary"
+	},
+	secondary: {
+		bg: "bg-secondary",
+		text: "text-secondary",
+		border: "border-secondary"
+	},
+	error: {
+		bg: "bg-error",
+		text: "text-error",
+		border: "border-error"
+	},
+	info: {
+		bg: "bg-info",
+		text: "text-info",
+		border: "border-info"
+	},
+	success: {
+		bg: "bg-success",
+		text: "text-success",
+		border: "border-success"
+	},
+	warning: {
+		bg: "bg-warning",
+		text: "text-warning",
+		border: "border-warning"
+	},
+	disabled: {
+		bg: "bg-disabled",
+		text: "text-disabled",
+		border: "border-disabled"
+	},
+	gray: {
+		bg: "bg-gray",
+		text: "text-gray",
+		border: "border-input"
+	},
+	mist: {
+		bg: "bg-mist",
+		text: "text-mist",
+		border: "border-mist-border"
+	}
+};
+/**
+* Resolve a `Color` value to either a Tailwind class (for presets) or an
+* inline style object (for arbitrary CSS color strings).
+*/
+function resolveColor(color, target) {
+	if (isPresetColor(color)) return { className: presetClassMap[color][target] };
+	return { style: { [target === "bg" ? "backgroundColor" : target === "text" ? "color" : "borderColor"]: color } };
+}
+//#endregion
+export { isPresetColor, resolveColor };

package/dist/utils/index.js

@@ -1,2 +1,3 @@
-export { cn, isPresetColor, resolveColor } from '../chunk-VU4CZ76T.js';
-import '../chunk-TRTQSARU.js';
+import { cn } from "./cn.js";
+import { isPresetColor, resolveColor } from "./color.js";
+export { cn, isPresetColor, resolveColor };

package/dist/utils/path-match.js

@@ -0,0 +1,17 @@
+//#region src/utils/path-match.ts
+/**
+* Segment-aware "is `prefix` an ancestor of (or equal to) `fullPath`" test.
+*
+* A plain `fullPath.startsWith(prefix)` would treat sibling routes whose names share a
+* leading substring as parent/child — `/components/input` would match
+* `/components/input-password`. Requiring the boundary to fall on a `/` keeps
+* `/home/nodes` matching `/home/nodes/123` while leaving `/home/nodes-archive` alone.
+*
+* Internal helper: not exported from `src/utils/index.ts` (the public `/utils` entry).
+*/
+function isPathPrefixOf(prefix, fullPath) {
+	if (prefix === fullPath) return true;
+	return fullPath.startsWith(prefix) && (prefix.endsWith("/") || fullPath[prefix.length] === "/");
+}
+//#endregion
+export { isPathPrefixOf };

package/dist/utils/silver-shine.js

@@ -0,0 +1,63 @@
+import { cn } from "./cn.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/utils/silver-shine.tsx
+/**
+* Static metallic gradient overlay layer used when `color === "silver"`. Stacks above the
+* variant container surface (and above any gradient underlay layers). Pointer-events disabled
+* so it never blocks interaction.
+*
+* Two visual ingredients:
+* - A subtle diagonal `linear-gradient` that mimics light bouncing off brushed metal.
+* - An inset `box-shadow` that paints a 1px metallic bezel inside the rounded surface.
+*
+* Both use fixed `rgba(...)` values so the look is consistent in light + dark themes without
+* needing extra theme tokens.
+*/
+var SILVER_SHINE_OVERLAY_CLASS = cn("pointer-events-none absolute inset-0 -z-10 rounded-[inherit]", "bg-[linear-gradient(135deg,rgba(255,255,255,0.10)_0%,rgba(255,255,255,0.02)_35%,rgba(0,0,0,0.04)_70%,rgba(255,255,255,0.06)_100%)]");
+var SILVER_SHINE_OVERLAY_STYLE = { boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.08)" };
+function SilverShineOverlay() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: SILVER_SHINE_OVERLAY_CLASS,
+		style: SILVER_SHINE_OVERLAY_STYLE
+	});
+}
+/**
+* Metallic linear-gradient applied to the surface fill (with a soft inset bezel) for
+* `color="silver"` + `variant="solid"`. Layered on top of `bg-gray` so the underlying gray
+* tint controls the base hue and the gradient adds the polished-metal sheen.
+*/
+var SILVER_SOLID_SURFACE_STYLE = {
+	backgroundImage: "linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 35%, rgba(0,0,0,0.12) 70%, rgba(255,255,255,0.14) 100%)",
+	boxShadow: "inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.18)"
+};
+/**
+* Metallic ring drawn as a 1px gradient border with a *truly transparent* interior, used for
+* `color="silver"` + `variant="outline"`. Uses the `mask-composite` ring trick:
+*
+* - The overlay paints the metallic gradient over its entire `padding-box`.
+* - Two mask layers (one clipped to `content-box`, one to the default `border-box`) combined
+*   with `mask-composite: exclude` (`-webkit-mask-composite: xor`) leave only the 1px ring at
+*   the edge visible.
+*
+* The container itself stays unbordered and transparent so whatever sits behind shows through
+* the inside of the ring (real transparency, not "matches the page bg").
+*
+* In `.dark`, a separate low-luminance gradient replaces the light metallic fill so the 1px ring
+* does not read as a bright halo (inline `background` + opacity was insufficient).
+*/
+function SilverMetallicBorderOverlay() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: cn("pointer-events-none absolute inset-0 rounded-[inherit] p-px", "bg-[linear-gradient(135deg,rgba(230,230,230,0.95)_0%,rgba(190,190,190,0.70)_28%,rgba(248,248,248,0.95)_52%,rgba(175,175,175,0.70)_76%,rgba(225,225,225,0.95)_100%)]", "dark:bg-[linear-gradient(135deg,rgba(255,255,255,0.05)_0%,rgba(110,110,110,0.28)_32%,rgba(255,255,255,0.07)_52%,rgba(70,70,70,0.24)_72%,rgba(180,180,180,0.09)_100%)]"),
+		style: {
+			WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+			WebkitMaskComposite: "xor",
+			mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+			maskComposite: "exclude"
+		}
+	});
+}
+//#endregion
+export { SILVER_SHINE_OVERLAY_CLASS, SILVER_SHINE_OVERLAY_STYLE, SILVER_SOLID_SURFACE_STYLE, SilverMetallicBorderOverlay, SilverShineOverlay };

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 };