@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/simple-clickable-card/simple-clickable-card-shared.js

@@ -0,0 +1,309 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { SilverMetallicBorderOverlay, SilverShineOverlay } from "../../utils/silver-shine.js";
+import { PRESET_GRADIENT_BACKDROP, PRESET_GRADIENT_FRAME, SILVER_GRADIENT_BACKDROP, VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS, arbitraryGradientBackgroundImage, resolveVariantStyles } from "../../utils/variant.js";
+import { IconAvatar } from "../icon-avatar/icon-avatar.js";
+import { Typography } from "../typography/typography.js";
+import { TruncatedLineWithTooltip } from "../truncated-line-with-tooltip/truncated-line-with-tooltip.js";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/simple-clickable-card/simple-clickable-card-shared.tsx
+var SIZE_STYLES = {
+	sm: {
+		rowPad: "p-3",
+		gap: "gap-2",
+		textGap: "gap-0.5",
+		chevronPx: 20,
+		avatar: 36,
+		iconPx: 18,
+		titleVariant: "h6",
+		titleSizeClass: "text-xs"
+	},
+	default: {
+		rowPad: "p-4",
+		gap: "gap-3",
+		textGap: "gap-0.5",
+		chevronPx: 24,
+		avatar: 44,
+		iconPx: 22,
+		titleVariant: "h6"
+	},
+	lg: {
+		rowPad: "p-6",
+		gap: "gap-4",
+		textGap: "gap-1",
+		chevronPx: 32,
+		avatar: 52,
+		iconPx: 26,
+		titleVariant: "h5"
+	}
+};
+function iconSized(icon, iconPx) {
+	if (icon == null) return null;
+	const dim = {
+		width: iconPx,
+		height: iconPx
+	};
+	if (React$1.isValidElement(icon)) {
+		const el = icon;
+		return React$1.cloneElement(el, {
+			className: cn(el.props.className, "shrink-0"),
+			style: {
+				...el.props.style,
+				...dim
+			}
+		});
+	}
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex shrink-0 items-center justify-center",
+		style: dim,
+		children: icon
+	});
+}
+/**
+* Default `IconAvatar` presentation for a card surface.
+*
+* The resolver only steps in for the outer-`solid` case, which needs a special
+* enclosure to keep the icon legible against a same-color surface: it forces
+* the avatar to `variant: "solid"` (same color as the surface) and layers a
+* translucent-foreground bubble on top via `discStyle` — a ~15% white/near-
+* white fill with a ~30% border in the color's `-foreground` token, and the
+* glyph paints in that same foreground. The icon reads as enclosed in an
+* inverted-fill circle.
+*
+* For every other outer variant the resolver returns `variant: undefined`, so
+* each consumer keeps whatever default it had before (`Alert` still opts into
+* a `solid` avatar disc; `SimpleClickableCard` / `SimpleInfoCard` /
+* `IconTextActionCard` still fall through to `IconAvatar`'s `legacy` tinted
+* disc). Explicit `iconAvatarVariant` / `iconAvatarColor` props always win.
+*/
+function resolveIconAvatarDefaults(variant, cardColor) {
+	if (variant !== "solid") return {
+		color: cardColor,
+		variant: void 0
+	};
+	const foreground = isPresetColor(cardColor) ? `var(--color-${cardColor}-foreground)` : "#ffffff";
+	return {
+		color: cardColor,
+		variant: "solid",
+		discStyle: {
+			backgroundColor: `color-mix(in srgb, ${foreground} 15%, transparent)`,
+			borderColor: `color-mix(in srgb, ${foreground} 30%, transparent)`,
+			borderStyle: "solid",
+			borderWidth: 1
+		}
+	};
+}
+function hasRenderableDescription(description) {
+	if (description === void 0 || description === null) return false;
+	if (typeof description === "string") return description.length > 0;
+	return true;
+}
+function hasRenderableTitle(title) {
+	if (title === void 0 || title === null) return false;
+	if (typeof title === "string") return title.trim().length > 0;
+	return true;
+}
+var PRESET_RING_CLASSES = {
+	primary: "hover:ring-primary/90 focus-within:ring-primary/90",
+	secondary: "hover:ring-secondary/90 focus-within:ring-secondary/90",
+	info: "hover:ring-info/90 focus-within:ring-info/90",
+	warning: "hover:ring-warning/90 focus-within:ring-warning/90",
+	error: "hover:ring-error/90 focus-within:ring-error/90",
+	success: "hover:ring-success/90 focus-within:ring-success/90",
+	disabled: "hover:ring-disabled/90 focus-within:ring-disabled/90",
+	gray: "hover:ring-gray/90 focus-within:ring-gray/90",
+	mist: "hover:ring-mist-border focus-within:ring-mist-border"
+};
+/** Ring tint for {@link SimpleInfoCard} shell — keyboard focus only (no hover ring). */
+var PRESET_RING_CLASSES_FOCUS_WITHIN_ONLY = {
+	primary: "focus-within:ring-primary/90",
+	secondary: "focus-within:ring-secondary/90",
+	info: "focus-within:ring-info/90",
+	warning: "focus-within:ring-warning/90",
+	error: "focus-within:ring-error/90",
+	success: "focus-within:ring-success/90",
+	disabled: "focus-within:ring-disabled/90",
+	gray: "focus-within:ring-gray/90",
+	mist: "focus-within:ring-mist-border"
+};
+/** Ring classes when focus stays on a single inner `<button>` (SimpleClickableCard). */
+var PRESET_RING_CLASSES_FOCUS_VISIBLE = {
+	primary: "hover:ring-primary/90 focus-visible:ring-primary/90",
+	secondary: "hover:ring-secondary/90 focus-visible:ring-secondary/90",
+	info: "hover:ring-info/90 focus-visible:ring-info/90",
+	warning: "hover:ring-warning/90 focus-visible:ring-warning/90",
+	error: "hover:ring-error/90 focus-visible:ring-error/90",
+	success: "hover:ring-success/90 focus-visible:ring-success/90",
+	disabled: "hover:ring-disabled/90 focus-visible:ring-disabled/90",
+	gray: "hover:ring-gray/90 focus-visible:ring-gray/90",
+	mist: "hover:ring-mist-border focus-visible:ring-mist-border"
+};
+var ringTransitionClass = "transition-[box-shadow] duration-[1400ms] ease-in-out";
+function useSimpleClickableCardSurface(options) {
+	const { variant, color, size } = options;
+	const s = SIZE_STYLES[size];
+	const styles = resolveVariantStyles(variant, color);
+	const isArbitraryGradient = variant === "gradient" && !isPresetColor(color);
+	const surfaceStyleWithoutGradientBg = React$1.useMemo(() => {
+		if (!isArbitraryGradient || typeof color !== "string") return styles.containerStyle;
+		const cs = styles.containerStyle;
+		if (!cs) return void 0;
+		const { backgroundImage: _, borderColor: __, ...rest } = cs;
+		return {
+			...rest,
+			borderColor: "transparent"
+		};
+	}, [
+		isArbitraryGradient,
+		color,
+		styles.containerStyle
+	]);
+	const presetGradientPair = variant === "gradient" && isPresetColor(color) ? PRESET_GRADIENT_BACKDROP[color] : void 0;
+	const surfaceContainerClass = variant === "gradient" && isPresetColor(color) ? PRESET_GRADIENT_FRAME[color] : styles.container;
+	const presetRingClasses = isPresetColor(color) ? PRESET_RING_CLASSES_FOCUS_VISIBLE[color] : "";
+	const ringAccentStyle = React$1.useMemo(() => {
+		if (isPresetColor(color)) return void 0;
+		if (typeof color !== "string") return void 0;
+		return { "--tw-ring-color": `color-mix(in srgb, ${color} 90%, transparent)` };
+	}, [color]);
+	const iconAvatarDefaults = resolveIconAvatarDefaults(variant, color);
+	return {
+		s,
+		styles,
+		isArbitraryGradient,
+		surfaceStyleWithoutGradientBg,
+		presetGradientPair,
+		surfaceContainerClass,
+		presetRingClasses,
+		ringAccentStyle,
+		iconAvatarColor: iconAvatarDefaults.color,
+		iconAvatarVariant: iconAvatarDefaults.variant,
+		iconAvatarDiscStyle: iconAvatarDefaults.discStyle
+	};
+}
+/** For SimpleInfoCard shell — ring follows container `focus-within`. */
+function useSimpleClickableCardSurfaceShell(options) {
+	const base = useSimpleClickableCardSurface(options);
+	const { color } = options;
+	const presetRingClassesShell = isPresetColor(color) ? PRESET_RING_CLASSES_FOCUS_WITHIN_ONLY[color] : "";
+	return {
+		...base,
+		presetRingClasses: presetRingClassesShell
+	};
+}
+function renderTitleAndDescriptionBlocks(p) {
+	const { title, description, truncateTitle = false, truncateDescription = false, s, fgClass, fgStyle, descClass, descStyle } = p;
+	const titleIsString = typeof title === "string";
+	const descriptionIsString = typeof description === "string";
+	const renderTitleTypography = (typoVariant, opts) => /* @__PURE__ */ jsx(Typography, {
+		as: "span",
+		variant: typoVariant,
+		className: cn("min-w-0 text-left", opts.extraTitleClass, fgClass, !opts.truncate && "break-words"),
+		style: fgStyle,
+		children: title
+	});
+	let titleBlock = null;
+	if (hasRenderableTitle(title)) if (titleIsString && truncateTitle) titleBlock = /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+		className: "w-full",
+		tooltipContent: title,
+		children: renderTitleTypography(s.titleVariant, {
+			truncate: true,
+			extraTitleClass: s.titleSizeClass
+		})
+	});
+	else if (titleIsString) titleBlock = renderTitleTypography(s.titleVariant, {
+		truncate: false,
+		extraTitleClass: s.titleSizeClass
+	});
+	else titleBlock = /* @__PURE__ */ jsx(Typography, {
+		as: "div",
+		variant: s.titleVariant,
+		className: cn("min-w-0 text-left", s.titleSizeClass, fgClass),
+		style: fgStyle,
+		children: title
+	});
+	let descriptionBlock = null;
+	if (hasRenderableDescription(description)) if (descriptionIsString && truncateDescription) descriptionBlock = /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+		className: "w-full",
+		tooltipContent: description,
+		children: /* @__PURE__ */ jsx(Typography, {
+			as: "span",
+			variant: "body2",
+			className: cn("text-left font-medium", descClass),
+			style: descStyle,
+			children: description
+		})
+	});
+	else if (descriptionIsString) descriptionBlock = /* @__PURE__ */ jsx(Typography, {
+		as: "span",
+		variant: "body2",
+		className: cn("break-words text-left font-medium", descClass),
+		style: descStyle,
+		children: description
+	});
+	else descriptionBlock = /* @__PURE__ */ jsx("div", {
+		className: cn("min-w-0 text-left font-medium", descClass),
+		style: descStyle,
+		children: description
+	});
+	return {
+		titleBlock,
+		descriptionBlock
+	};
+}
+function renderLeadingIconRow(options) {
+	const { icon, leadingIcon, s, iconAvatarColor, iconAvatarRingColor, iconAvatarVariant, iconAvatarDiscStyle, titleBlock, descriptionBlock, gradientZStyle } = options;
+	const defaultLeadingIcon = icon != null ? /* @__PURE__ */ jsx(IconAvatar, {
+		size: s.avatar,
+		color: iconAvatarColor,
+		variant: iconAvatarVariant,
+		ring: {
+			show: true,
+			color: iconAvatarRingColor
+		},
+		discStyle: iconAvatarDiscStyle,
+		children: iconSized(icon, s.iconPx)
+	}) : null;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex min-w-0 flex-1 items-center", s.gap, gradientZStyle && "relative z-10"),
+		children: [leadingIcon ?? defaultLeadingIcon, /* @__PURE__ */ jsxs("div", {
+			className: cn("flex min-w-0 flex-1 flex-col justify-center", s.textGap),
+			children: [titleBlock, descriptionBlock]
+		})]
+	});
+}
+function renderGradientBackdropLayers(options) {
+	const { variant, color, presetGradientPair: presetGradientPairProp, includeHoverGradientOverlay = true } = options;
+	const nodes = [];
+	/** Silver gradient uses its own lighter backdrop — see `SILVER_GRADIENT_BACKDROP`. */
+	const presetGradientPair = presetGradientPairProp ?? (variant === "gradient" && color === "silver" ? SILVER_GRADIENT_BACKDROP : void 0);
+	if (presetGradientPair != null) {
+		nodes.push(/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(VARIANT_GRADIENT_BACKDROP_BASE, presetGradientPair.idle)
+		}, "idle"));
+		if (includeHoverGradientOverlay) nodes.push(/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(VARIANT_GRADIENT_BACKDROP_BASE, presetGradientPair.hover, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS)
+		}, "hover"));
+	}
+	if (variant === "gradient" && !isPresetColor(color) && typeof color === "string" && color !== "silver") {
+		nodes.push(/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: VARIANT_GRADIENT_BACKDROP_BASE,
+			style: { backgroundImage: arbitraryGradientBackgroundImage(color, "idle") }
+		}, "arb-idle"));
+		if (includeHoverGradientOverlay) nodes.push(/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(VARIANT_GRADIENT_BACKDROP_BASE, VARIANT_GRADIENT_HOVER_OVERLAY_CLASS),
+			style: { backgroundImage: arbitraryGradientBackgroundImage(color, "hover") }
+		}, "arb-hover"));
+	}
+	if (color === "silver" && variant === "gradient") nodes.push(/* @__PURE__ */ jsx(SilverShineOverlay, {}, "silver-shine"));
+	if (color === "silver" && variant === "outline") nodes.push(/* @__PURE__ */ jsx(SilverMetallicBorderOverlay, {}, "silver-border"));
+	return /* @__PURE__ */ jsx(Fragment$1, { children: nodes });
+}
+//#endregion
+export { PRESET_RING_CLASSES, PRESET_RING_CLASSES_FOCUS_VISIBLE, PRESET_RING_CLASSES_FOCUS_WITHIN_ONLY, SIZE_STYLES, hasRenderableDescription, hasRenderableTitle, iconSized, renderGradientBackdropLayers, renderLeadingIconRow, renderTitleAndDescriptionBlocks, resolveIconAvatarDefaults, ringTransitionClass, useSimpleClickableCardSurface, useSimpleClickableCardSurfaceShell };

package/dist/components/simple-clickable-card/simple-clickable-card.js

@@ -0,0 +1,106 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
+import { renderGradientBackdropLayers, renderLeadingIconRow, renderTitleAndDescriptionBlocks, ringTransitionClass, useSimpleClickableCardSurface } from "./simple-clickable-card-shared.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+//#region src/components/simple-clickable-card/simple-clickable-card.tsx
+function trailingChevronRow(options) {
+	const { icon, leadingIcon, s, iconAvatarColor, iconAvatarRingColor, iconAvatarVariant, iconAvatarDiscStyle, titleBlock, descriptionBlock, variant, fgClass, fgStyle, chevronPx, hideEndIcon, endIcon } = options;
+	const leadingInner = renderLeadingIconRow({
+		icon,
+		leadingIcon,
+		s,
+		iconAvatarColor,
+		iconAvatarRingColor,
+		iconAvatarVariant,
+		iconAvatarDiscStyle,
+		titleBlock,
+		descriptionBlock,
+		gradientZStyle: false
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("inline-flex min-w-0 flex-1 items-center", s.gap, variant === "gradient" && "relative z-10"),
+		children: [leadingInner, !hideEndIcon && (endIcon !== void 0 ? /* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			children: endIcon
+		}) : /* @__PURE__ */ jsx(ChevronRight, {
+			"aria-hidden": true,
+			size: chevronPx,
+			className: cn("shrink-0", fgClass),
+			style: fgStyle
+		}))]
+	});
+}
+var SimpleClickableCard = React$1.forwardRef(({ icon, leadingIcon, title, description, truncateTitle = false, truncateDescription = false, onClick, color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, type = "button", disabled, hideEndIcon = false, endIcon, ...rest }, ref) => {
+	const { onMouseEnter: onMouseEnterProp, onMouseLeave: onMouseLeaveProp, ...buttonRest } = rest;
+	const { s, styles, isArbitraryGradient, surfaceStyleWithoutGradientBg, presetGradientPair, surfaceContainerClass, presetRingClasses, ringAccentStyle, iconAvatarColor: resolvedIconAvatarColor, iconAvatarVariant: resolvedIconAvatarVariant, iconAvatarDiscStyle } = useSimpleClickableCardSurface({
+		variant,
+		color,
+		size
+	});
+	const iconAvatarColor = iconAvatarColorProp ?? resolvedIconAvatarColor;
+	const iconAvatarVariant = iconAvatarVariantProp ?? resolvedIconAvatarVariant;
+	const iconAvatarRingColor = iconAvatarColorProp ?? color;
+	const resolvedDiscStyle = iconAvatarColorProp == null ? iconAvatarDiscStyle : void 0;
+	const fgClass = styles.foreground;
+	const fgStyle = styles.foregroundStyle;
+	const descClass = styles.description;
+	const descStyle = styles.descriptionStyle;
+	const { titleBlock, descriptionBlock } = renderTitleAndDescriptionBlocks({
+		title,
+		description,
+		truncateTitle,
+		truncateDescription,
+		s,
+		fgClass,
+		fgStyle,
+		descClass,
+		descStyle
+	});
+	const gradientLayers = renderGradientBackdropLayers({
+		variant,
+		color,
+		presetGradientPair
+	});
+	const rowWithChevron = trailingChevronRow({
+		icon,
+		leadingIcon,
+		s,
+		iconAvatarColor,
+		iconAvatarRingColor,
+		iconAvatarVariant,
+		iconAvatarDiscStyle: resolvedDiscStyle,
+		titleBlock,
+		descriptionBlock,
+		variant,
+		fgClass,
+		fgStyle,
+		chevronPx: s.chevronPx,
+		hideEndIcon,
+		endIcon
+	});
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs("button", {
+			ref,
+			type,
+			disabled,
+			onClick,
+			onMouseEnter: onMouseEnterProp,
+			onMouseLeave: onMouseLeaveProp,
+			className: cn("relative isolate inline-flex w-full cursor-pointer items-center overflow-hidden rounded-xl text-left ring-offset-background", ringTransitionClass, variant === "gradient" && "group", "focus-visible:outline-none hover:ring-2 hover:ring-offset-2 focus-visible:ring-2 focus-visible:ring-offset-2", presetRingClasses, "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", s.rowPad, s.gap, surfaceContainerClass, className),
+			style: {
+				...isArbitraryGradient ? surfaceStyleWithoutGradientBg : styles.containerStyle,
+				...ringAccentStyle
+			},
+			...buttonRest,
+			children: [gradientLayers, rowWithChevron]
+		})
+	});
+});
+SimpleClickableCard.displayName = "SimpleClickableCard";
+//#endregion
+export { SimpleClickableCard };

package/dist/components/simple-info-card/simple-info-card.js

@@ -0,0 +1,154 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { isPresetColor } from "../../utils/color.js";
+import { TooltipProvider } from "../../core/animate-ui/components/animate/tooltip.js";
+import { Button } from "../button/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/popover.js";
+import { renderGradientBackdropLayers, renderLeadingIconRow, renderTitleAndDescriptionBlocks, useSimpleClickableCardSurfaceShell } from "../simple-clickable-card/simple-clickable-card-shared.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
+//#region src/components/simple-info-card/simple-info-card.tsx
+function hasRenderableInfoContent(content) {
+	if (content === void 0 || content === null) return false;
+	if (typeof content === "string") return content.trim().length > 0;
+	return true;
+}
+/**
+* Core {@link Button} applies `[&_svg]:size-4`, which overrides Lucide `size`.
+* Must stay aligned with {@link SIZE_STYLES}.chevronPx (`sm` 20 / default 24 / lg 32).
+*/
+var INFO_TRIGGER_SVG_SIZE_CLASS = {
+	sm: "[&_svg]:!size-5",
+	default: "[&_svg]:!size-6",
+	lg: "[&_svg]:!size-7"
+};
+/** Info trigger muted tone on soft/outline/gradient surfaces (accent at 60%). */
+var INFO_ICON_FG_CLASS = {
+	primary: "text-primary/60",
+	secondary: "text-secondary/60",
+	error: "text-error/60",
+	info: "text-info/60",
+	success: "text-success/60",
+	warning: "text-warning/60",
+	disabled: "text-disabled/60",
+	gray: "text-gray/60",
+	mist: "text-mist-secondary"
+};
+/**
+* Solid surfaces use semantic foreground tokens so the info trigger stays
+* legible against the saturated surface; muted with `/60`.
+*/
+var SOLID_INFO_ICON_FG_CLASS = {
+	primary: "text-primary-foreground/60",
+	secondary: "text-secondary-foreground/60",
+	error: "text-error-foreground/60",
+	info: "text-info-foreground/60",
+	success: "text-success-foreground/60",
+	warning: "text-warning-foreground/60",
+	disabled: "text-disabled-foreground/60",
+	gray: "text-gray-foreground/60",
+	mist: "text-mist-foreground/60"
+};
+function infoTriggerIconFgClass(variant, cardColor, infoButtonColor) {
+	if (variant === "solid" && cardColor !== void 0 && isPresetColor(cardColor)) return SOLID_INFO_ICON_FG_CLASS[cardColor];
+	if (variant === "solid" && typeof cardColor === "string" && !isPresetColor(cardColor)) return "text-white/60";
+	return INFO_ICON_FG_CLASS[infoButtonColor];
+}
+var SimpleInfoCard = React$1.forwardRef(({ icon, title, description, infoContent, truncateTitle = false, truncateDescription = false, color = "gray", iconAvatarVariant: iconAvatarVariantProp, iconAvatarColor: iconAvatarColorProp, size = "default", variant = "soft", className, disabled, popoverSide = "bottom", popoverAlign = "end", infoIconLabel = "More information", ...divRest }, ref) => {
+	const { style: userStyle, ...shellDivRest } = divRest;
+	const showInfo = hasRenderableInfoContent(infoContent);
+	const { s, styles, isArbitraryGradient, surfaceStyleWithoutGradientBg, presetGradientPair, surfaceContainerClass, ringAccentStyle, iconAvatarColor: resolvedIconAvatarColor, iconAvatarVariant: resolvedIconAvatarVariant, iconAvatarDiscStyle } = useSimpleClickableCardSurfaceShell({
+		variant,
+		color,
+		size
+	});
+	const iconAvatarColor = iconAvatarColorProp ?? resolvedIconAvatarColor;
+	const iconAvatarVariant = iconAvatarVariantProp ?? resolvedIconAvatarVariant;
+	const iconAvatarRingColor = iconAvatarColorProp ?? color;
+	const resolvedDiscStyle = iconAvatarColorProp == null ? iconAvatarDiscStyle : void 0;
+	const fgClass = styles.foreground;
+	const fgStyle = styles.foregroundStyle;
+	const descClass = styles.description;
+	const descStyle = styles.descriptionStyle;
+	const { titleBlock, descriptionBlock } = renderTitleAndDescriptionBlocks({
+		title,
+		description,
+		truncateTitle,
+		truncateDescription,
+		s,
+		fgClass,
+		fgStyle,
+		descClass,
+		descStyle
+	});
+	const gradientLayers = renderGradientBackdropLayers({
+		variant,
+		color,
+		presetGradientPair
+	});
+	const leadingMain = renderLeadingIconRow({
+		icon,
+		s,
+		iconAvatarColor,
+		iconAvatarRingColor,
+		iconAvatarVariant,
+		iconAvatarDiscStyle: resolvedDiscStyle,
+		titleBlock,
+		descriptionBlock,
+		gradientZStyle: false
+	});
+	const shellStyle = {
+		...isArbitraryGradient ? surfaceStyleWithoutGradientBg : styles.containerStyle,
+		...ringAccentStyle
+	};
+	const infoButtonColor = isPresetColor(color) ? color : "gray";
+	const primaryBlock = /* @__PURE__ */ jsx("div", {
+		className: cn("-m-0 inline-flex min-h-0 min-w-0 flex-1 cursor-default select-text items-center rounded-none border-0 bg-transparent text-left outline-none", s.gap, variant === "gradient" && "relative z-10", !showInfo && "w-full min-w-0", showInfo && "min-w-0"),
+		children: leadingMain
+	});
+	const infoTrigger = showInfo ? /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			disabled,
+			"aria-label": infoIconLabel,
+			color: infoButtonColor,
+			variant: "ghost",
+			size: "icon",
+			fullWidth: false,
+			hideRingOnHover: true,
+			className: cn("shrink-0", INFO_TRIGGER_SVG_SIZE_CLASS[size ?? "default"], infoTriggerIconFgClass(variant, color, infoButtonColor)),
+			children: /* @__PURE__ */ jsx(Info, {
+				"aria-hidden": true,
+				size: s.chevronPx
+			})
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		align: popoverAlign,
+		side: popoverSide,
+		sideOffset: 4,
+		children: infoContent
+	})] }) : null;
+	return /* @__PURE__ */ jsx(TooltipProvider, {
+		openDelay: 300,
+		closeDelay: 100,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: cn("relative isolate inline-flex w-full max-w-full items-center overflow-hidden rounded-xl ring-offset-background", variant === "gradient" && "group", disabled && "pointer-events-none opacity-50", s.rowPad, showInfo ? s.gap : void 0, surfaceContainerClass, className),
+			style: {
+				...shellStyle,
+				...userStyle
+			},
+			...shellDivRest,
+			children: [
+				gradientLayers,
+				primaryBlock,
+				infoTrigger
+			]
+		})
+	});
+});
+SimpleInfoCard.displayName = "SimpleInfoCard";
+//#endregion
+export { SimpleInfoCard };