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

React based design system for UNDP

Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./rolldown-runtime-mLOUI7ql.cjs"),t=require("./utils-Dd9-5CFr.cjs"),n=require("./dist-BZMXZCSu.cjs"),r=require("./Typography.cjs");let i=require("react");i=e.r(i,1);let a=require("react/jsx-runtime");var o=i.forwardRef(({className:e,...n},r)=>(0,a.jsx)(`div`,{ref:r,className:t.t(`@container flex w-full flex-wrap items-stretch justify-start gap-0 bg-surface-2xl`,e),...n})),s=n.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`}}),c=i.forwardRef(({className:e,hoverColor:n=`default`,hoverImage:r,children:i,...o},c)=>(0,a.jsxs)(`div`,{ref:c,className:t.t(`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`,e),...o,children:[r&&(0,a.jsx)(`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`}),(0,a.jsx)(`div`,{className:s({hoverColor:n})}),(0,a.jsx)(`div`,{className:`relative z-5 flex flex-col`,children:i})]}));c.displayName=`StatsPanelCard`;var l=i.forwardRef(({className:e,...n},i)=>(0,a.jsx)(r.H2,{ref:i,className:t.t(`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]`,e),...n}));l.displayName=`StatsPanelCardValue`;var u=i.forwardRef(({className:e,...n},i)=>(0,a.jsx)(r.H4,{ref:i,className:t.t(`text-white transition-all duration-400 group-hover:text-content-primary`,e),...n}));u.displayName=`StatsPanelCardTitle`;var d=i.forwardRef(({className:e,...n},i)=>(0,a.jsx)(r.P,{ref:i,className:t.t(`@2xl:h-25 h-auto text-white transition-all duration-400 group-hover:text-content-primary`,e),...n}));d.displayName=`StatsPanelCardDescription`,exports.StatsPanel=o,exports.StatsPanelCard=c,exports.StatsPanelCardDescription=d,exports.StatsPanelCardTitle=u,exports.StatsPanelCardValue=l;
//# sourceMappingURL=StatsPanel.cjs.map