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

React based design system for UNDP

{"version":3,"file":"StatsPanel.cjs","names":[],"sources":["../src/components/ui/stats-panel.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport { H2, H4, P } from '@/components/ui/typography';\nimport { cn } from '@/lib/utils';\n\nconst StatsPanel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        '@container flex w-full flex-wrap items-stretch justify-start gap-0 bg-surface-2xl',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\n\nconst hoverBGVariant = cva(\n  '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',\n  {\n    variants: {\n      hoverColor: {\n        default:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--card-hover-color)_80%,_transparent),_transparent_140%)]',\n        primary:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--primary)_80%,_transparent),_transparent_140%)]',\n        secondary:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--secondary)_80%,_transparent),_transparent_140%)]',\n        tertiary:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--tertiary)_80%,_transparent),_transparent_140%)]',\n        quaternary:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--quaternary)_80%,_transparent),_transparent_140%)]',\n        info: 'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--info)_80%,_transparent),_transparent_140%)]',\n        success:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--success)_80%,_transparent),_transparent_140%)]',\n        warning:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--warning)_80%,_transparent),_transparent_140%)]',\n        error:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--error)_80%,_transparent),_transparent_140%)]',\n        background:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--background)_80%,_transparent),_transparent_140%)]',\n        foreground:\n          'bg-[linear-gradient(0deg,_color-mix(in_srgb,_var(--foreground)_80%,_transparent),_transparent_140%)]',\n      },\n    },\n    defaultVariants: {\n      hoverColor: 'default',\n    },\n  },\n);\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  hoverImage?: string;\n}\n\nconst StatsPanelCard = React.forwardRef<\n  HTMLDivElement,\n  VariantProps<typeof hoverBGVariant> & CardProps\n>(({ className, hoverColor = 'default', hoverImage, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      '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',\n      className,\n    )}\n    {...props}\n  >\n    {hoverImage && (\n      <img\n        alt=''\n        src={hoverImage}\n        className='absolute top-0 left-0 h-full w-full object-cover opacity-0 transition-all duration-300 group-hover:opacity-100'\n      />\n    )}\n    <div className={hoverBGVariant({ hoverColor })} />\n    <div className='relative z-5 flex flex-col'>{children}</div>\n  </div>\n));\n\nStatsPanelCard.displayName = 'StatsPanelCard';\n\nconst StatsPanelCardValue = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <H2\n    ref={ref}\n    className={cn(\n      '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]',\n      className,\n    )}\n    {...props}\n  />\n));\n\nStatsPanelCardValue.displayName = 'StatsPanelCardValue';\n\nconst StatsPanelCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <H4\n    ref={ref}\n    className={cn(\n      'text-white transition-all duration-400 group-hover:text-content-primary',\n      className,\n    )}\n    {...props}\n  />\n));\n\nStatsPanelCardTitle.displayName = 'StatsPanelCardTitle';\n\nconst StatsPanelCardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <P\n    ref={ref}\n    className={cn(\n      '@2xl:h-25 h-auto text-white transition-all duration-400 group-hover:text-content-primary',\n      className,\n    )}\n    {...props}\n  />\n));\n\nStatsPanelCardDescription.displayName = 'StatsPanelCardDescription';\n\nexport {\n  StatsPanel,\n  StatsPanelCard,\n  StatsPanelCardDescription,\n  StatsPanelCardTitle,\n  StatsPanelCardValue,\n};\n"],"mappings":"4RAKA,IAAM,EAAa,EAAM,YACtB,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,oFACA,CACF,EACA,GAAI,CACL,CAAA,CAEL,EAEM,EAAiB,EAAA,EACrB,qJACA,CACE,SAAU,CACR,WAAY,CACV,QACE,6GACF,QACE,oGACF,UACE,sGACF,SACE,qGACF,WACE,uGACF,KAAM,iGACN,QACE,oGACF,QACE,oGACF,MACE,kGACF,WACE,uGACF,WACE,sGACJ,CACF,EACA,gBAAiB,CACf,WAAY,SACd,CACF,CACF,EAMM,EAAiB,EAAM,YAG1B,CAAE,YAAW,aAAa,UAAW,aAAY,WAAU,GAAG,GAAS,KACxE,EAAA,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,iIACA,CACF,EACA,GAAI,WANN,CAQG,IACC,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,IAAI,GACJ,IAAK,EACL,UAAU,gHACX,CAAA,GAEH,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAe,CAAE,YAAW,CAAC,CAAI,CAAA,GACjD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6BAA8B,UAAc,CAAA,CACxD,GACN,EAED,EAAe,YAAc,iBAE7B,IAAM,EAAsB,EAAM,YAG/B,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,EAAA,GAAD,CACO,MACL,UAAW,EAAA,EACT,wNACA,CACF,EACA,GAAI,CACL,CAAA,CACF,EAED,EAAoB,YAAc,sBAElC,IAAM,EAAsB,EAAM,YAG/B,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,EAAA,GAAD,CACO,MACL,UAAW,EAAA,EACT,0EACA,CACF,EACA,GAAI,CACL,CAAA,CACF,EAED,EAAoB,YAAc,sBAElC,IAAM,EAA4B,EAAM,YAGrC,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CACO,MACL,UAAW,EAAA,EACT,2FACA,CACF,EACA,GAAI,CACL,CAAA,CACF,EAED,EAA0B,YAAc"}