@undp/design-system-react/dist/StatsPanel.js

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import { H2 as n, H4 as r, P as i } from "./Typography.js";
import * as a from "react";
import { jsx as o, jsxs as s } from "react/jsx-runtime";
//#region src/components/ui/stats-panel.tsx
var c = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o("div", {
	ref: r,
	className: e("@container flex w-full flex-wrap items-stretch justify-start gap-0 bg-surface-2xl", t),
	...n
})), l = t("w-full h-full absolute inset-0 top-0 left-0 transition-all opacity-0 duration-400 ease-[cubic-bezier(0.64,0.05,0.35,1.05)] group-hover:opacity-100", {
	variants: { hoverColor: {
		default: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--card-hover-color)_80%,_transparent),_transparent_140%)]",
		primary: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--primary)_80%,_transparent),_transparent_140%)]",
		secondary: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--secondary)_80%,_transparent),_transparent_140%)]",
		tertiary: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--tertiary)_80%,_transparent),_transparent_140%)]",
		quaternary: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--quaternary)_80%,_transparent),_transparent_140%)]",
		info: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--info)_80%,_transparent),_transparent_140%)]",
		success: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--success)_80%,_transparent),_transparent_140%)]",
		warning: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--warning)_80%,_transparent),_transparent_140%)]",
		error: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--error)_80%,_transparent),_transparent_140%)]",
		background: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--background)_80%,_transparent),_transparent_140%)]",
		foreground: "bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--foreground)_80%,_transparent),_transparent_140%)]"
	} },
	defaultVariants: { hoverColor: "default" }
}), u = a.forwardRef(({ className: t, hoverColor: n = "default", hoverImage: r, children: i, ...a }, c) => /* @__PURE__ */ s("div", {
	ref: c,
	className: e("group relative box-border flex @2xl:min-h-196.75 min-h-94.5 @2xl:w-1/2 @3xl:w-1/4 w-full items-center bg-foreground-soft px-16", t),
	...a,
	children: [
		r && /* @__PURE__ */ o("img", {
			alt: "",
			src: r,
			className: "absolute top-0 left-0 h-full w-full object-cover opacity-0 transition-all duration-300 group-hover:opacity-100"
		}),
		/* @__PURE__ */ o("div", { className: l({ hoverColor: n }) }),
		/* @__PURE__ */ o("div", {
			className: "relative z-5 flex flex-col",
			children: i
		})
	]
}));
u.displayName = "StatsPanelCard";
var d = a.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ o(n, {
	ref: i,
	className: e("text-left font-heading text-transparent leading-xs transition-all duration-400 [-webkit-text-stroke:2px_var(--content-reverse)] group-hover:text-content-primary rtl:text-right group-hover:[-webkit-text-stroke:0px]", t),
	...r
}));
d.displayName = "StatsPanelCardValue";
var f = a.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ o(r, {
	ref: i,
	className: e("text-white transition-all duration-400 group-hover:text-content-primary", t),
	...n
}));
f.displayName = "StatsPanelCardTitle";
var p = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o(i, {
	ref: r,
	className: e("@2xl:h-25 h-auto text-white transition-all duration-400 group-hover:text-content-primary", t),
	...n
}));
p.displayName = "StatsPanelCardDescription";
//#endregion
export { c as StatsPanel, u as StatsPanelCard, p as StatsPanelCardDescription, f as StatsPanelCardTitle, d as StatsPanelCardValue };

//# sourceMappingURL=StatsPanel.js.map