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

React based design system for UNDP

import { t as e } from "./utils-ca9as9Ye.js";
import { t } from "./dist-CQzJbxrW.js";
import * as n from "react";
import { jsx as r } from "react/jsx-runtime";
//#region src/components/ui/featured-card.tsx
var i = t("items-stretch flex flex-col justify-between items-stretch group", {
	variants: {
		backgroundColor: {
			transparent: "bg-transparent text-content-primary",
			background: "bg-background hover:bg-surface text-content-primary",
			"background-soft": "bg-background-soft hover:bg-surface-hover text-content-primary",
			foreground: "bg-foreground hover:bg-surface-3xl text-content-reverse",
			"foreground-soft": "bg-foreground-soft hover:bg-surface-3xl text-content-reverse",
			surface: "bg-surface hover:bg-surface-hover text-content-primary",
			"surface-xl": "bg-surface-xl hover:bg-surface-2xl text-content-reverse ",
			"surface-2xl": "bg-surface-2xl hover:bg-surface-3xl text-content-reverse ",
			"surface-3xl": "bg-surface-3xl hover:bg-surface-4xl text-content-reverse ",
			primary: "bg-primary hover:bg-primary-hover text-content-reverse",
			secondary: "bg-secondary hover:bg-secondary-hover text-content-reverse",
			tertiary: "bg-tertiary hover:bg-tertiary-hover text-content-reverse",
			quaternary: "bg-quaternary hover:bg-quaternary-hover text-content-primary",
			success: "bg-success hover:bg-success-hover text-content-reverse",
			error: "bg-error hover:bg-error-hover text-content-reverse",
			warning: "bg-warning hover:bg-warning-hover text-content-primary",
			info: "bg-info hover:bg-info-hover text-content-reverse"
		},
		size: {
			xs: "w-1/4",
			sm: "w-1/3",
			base: "w-1/2",
			lg: "w-2/3",
			xl: "w-3/4",
			full: "w-full"
		}
	},
	defaultVariants: {
		size: "full",
		backgroundColor: "background"
	}
}), a = n.forwardRef(({ className: t, border: n = !0, size: a, backgroundColor: o, ...s }, c) => /* @__PURE__ */ r("div", {
	ref: c,
	className: e(i({
		size: a,
		backgroundColor: o
	}), t),
	...s
}));
a.displayName = "FeaturedCard";
var o = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	className: e("flex flex-wrap gap-4 pr-6 pb-6 pl-6", t),
	...n
}));
o.displayName = "FeaturedCardFooter";
var s = n.forwardRef(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ r("div", {
	ref: a,
	className: e("card-tag mt-0 mb-0 flex gap-2 pt-4 pr-6 pl-6 font-body font-bold text-xs uppercase leading-xs md:mb-0", n),
	...i,
	children: t
}));
s.displayName = "FeaturedCardTag";
var c = n.forwardRef(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ r("div", {
	ref: a,
	className: e("m-0 mt-8 mb-3 flex flex grow flex-col justify-end gap-2 pr-6 pl-6 font-body font-normal text-h4-xs md:text-h4-sm lg:text-h4", n),
	...i,
	children: t
}));
c.displayName = "FeaturedCardTitle";
var l = n.forwardRef(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ r("div", {
	ref: a,
	className: e("mt-0 pt-0 pr-6 pb-6 pl-6 font-body text-sm leading-base lg:text-base", n),
	...i,
	children: t
}));
l.displayName = "FeaturedCardDescription";
//#endregion
export { a as FeaturedCard, l as FeaturedCardDescription, o as FeaturedCardFooter, s as FeaturedCardTag, c as FeaturedCardTitle };

//# sourceMappingURL=FeaturedCard.js.map