import { t as e } from "./utils-CHlhTiFC.js";
import { t } from "./dist-C2Jrcfwk.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/statsPanel.tsx
var c = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o("div", {
	ref: r,
	className: e("@container w-full flex gap-0 items-stretch flex-wrap bg-primary-gray-700 dark:bg-primary-gray-100 justify-start", 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: { variant: {
		blue: "bg-[linear-gradient(0deg,_rgba(4,104,177,0.8),_transparent_140%)]",
		azure: "bg-[linear-gradient(0deg,_rgba(0,193,255,0.81),_transparent_140%)]",
		yellow: "bg-[linear-gradient(0deg,_rgba(255,235,0,0.8),_transparent_140%)]",
		red: "bg-[linear-gradient(0deg,_rgba(238,64,45,0.8),_transparent_140%)]",
		green: "bg-[linear-gradient(0deg,_rgba(89,186,71,0.8),_transparent_140%)]"
	} },
	defaultVariants: { variant: "yellow" }
}), u = a.forwardRef(({ className: t, hoverColor: n = "yellow", hoverImage: r, children: i, ...a }, c) => /* @__PURE__ */ s("div", {
	ref: c,
	className: e("group bg-primary-gray-700 dark:bg-primary-gray-100 relative w-full min-h-[378px] box-border px-16 @2xl:min-h-[787px] @2xl:w-1/2 @3xl:w-1/4 flex items-center", t),
	...a,
	children: [
		r && /* @__PURE__ */ o("img", {
			alt: "",
			src: r,
			className: "absolute top-0 transition-all opacity-0 duration-300 object-cover left-0 w-full h-full group-hover:opacity-100"
		}),
		/* @__PURE__ */ o("div", { className: l({ variant: 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("leading-none transition-all duration-400 [-webkit-text-stroke:2px_white] dark:[-webkit-text-stroke:2px_black] font-heading text-left rtl:text-right group-hover:text-primary-gray-700 group-hover:dark:text-primary-gray-100 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 dark:text-black group-hover:text-primary-gray-700 group-hover:dark:text-primary-gray-100", t),
	...n
}));
f.displayName = "StatsPanelCardTitle";
var p = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o(i, {
	ref: r,
	className: e("h-auto @2xl:h-[100px] transition-all duration-400 text-white dark:text-black group-hover:text-primary-gray-700 group-hover:dark:text-primary-gray-100", 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