@undp/design-system-react/dist/Card.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/card.tsx
var i = t("flex flex-col justify-between items-stretch group", {
	variants: {
		variant: {
			"with-image": "[&_.card-tag]:pb-[26px]",
			"without-image": "[&_.card-tag]:pb-4"
		},
		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",
			info: "bg-info hover:bg-info-hover text-content-reverse",
			warning: "bg-warning hover:bg-warning-hover text-content-primary"
		},
		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",
		variant: "with-image",
		backgroundColor: "background"
	}
}), a = n.forwardRef(({ className: t, border: n = !0, size: a, variant: o, backgroundColor: s, ...c }, l) => /* @__PURE__ */ r("div", {
	ref: l,
	className: e(i({
		size: a,
		backgroundColor: s,
		variant: o
	}), n === !1 ? "" : "border-foreground border-t-2", t),
	...c
}));
a.displayName = "Card";
var o = n.forwardRef(({ ...e }, t) => /* @__PURE__ */ r("div", {
	ref: t,
	...e
}));
o.displayName = "CardHeader";
var s = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
	ref: i,
	className: e("flex flex-wrap gap-4 pt-4 pr-6 pb-6 pl-6 font-body", t),
	...n
}));
s.displayName = "CardFooter";
var c = 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-h6 md:mb-0", n),
	...i,
	children: t
}));
c.displayName = "CardTag";
var l = n.forwardRef(({ children: t, className: n, ...i }, a) => /* @__PURE__ */ r("div", {
	ref: a,
	className: e("m-0 flex gap-2 pt-4 pr-6 pb-6 pl-6 font-body font-normal text-h4-xs md:text-h4-sm lg:text-h4", n),
	...i,
	children: t
}));
l.displayName = "CardTitle";
var u = 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-p-xs md:text-p-sm lg:text-p", n),
	...i,
	children: t
}));
u.displayName = "CardDescription";
var d = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("img", {
	ref: i,
	alt: "card",
	...n,
	className: e("h-64 w-full object-cover", t)
}));
d.displayName = "CardImage";
//#endregion
export { a as Card, u as CardDescription, s as CardFooter, o as CardHeader, d as CardImage, c as CardTag, l as CardTitle };

//# sourceMappingURL=Card.js.map