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

React based design system for UNDP

{"version":3,"file":"FeaturedCard.cjs","names":[],"sources":["../src/components/ui/featured-card.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst featuredCardVariants = cva(\n  'items-stretch flex flex-col justify-between items-stretch group',\n  {\n    variants: {\n      backgroundColor: {\n        transparent: 'bg-transparent text-content-primary',\n        background: 'bg-background hover:bg-surface text-content-primary',\n        'background-soft': 'bg-background-soft hover:bg-surface-hover text-content-primary',\n        foreground: 'bg-foreground hover:bg-surface-3xl text-content-reverse',\n        'foreground-soft': 'bg-foreground-soft hover:bg-surface-3xl text-content-reverse',\n        surface: 'bg-surface hover:bg-surface-hover text-content-primary',\n        'surface-xl': 'bg-surface-xl hover:bg-surface-2xl text-content-reverse ',\n        'surface-2xl': 'bg-surface-2xl hover:bg-surface-3xl text-content-reverse ',\n        'surface-3xl': 'bg-surface-3xl hover:bg-surface-4xl text-content-reverse ',\n        primary: 'bg-primary hover:bg-primary-hover text-content-reverse',\n        secondary: 'bg-secondary hover:bg-secondary-hover text-content-reverse',\n        tertiary: 'bg-tertiary hover:bg-tertiary-hover text-content-reverse',\n        quaternary: 'bg-quaternary hover:bg-quaternary-hover text-content-primary',\n        success: 'bg-success hover:bg-success-hover text-content-reverse',\n        error: 'bg-error hover:bg-error-hover text-content-reverse',\n        warning: 'bg-warning hover:bg-warning-hover text-content-primary',\n        info: 'bg-info hover:bg-info-hover text-content-reverse',\n      },\n      size: {\n        xs: 'w-1/4',\n        sm: 'w-1/3',\n        base: 'w-1/2',\n        lg: 'w-2/3',\n        xl: 'w-3/4',\n        full: 'w-full',\n      },\n    },\n    defaultVariants: {\n      size: 'full',\n      backgroundColor: 'background',\n    },\n  },\n);\n\ninterface FeaturedCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof featuredCardVariants> {\n  border?: boolean;\n}\n\nconst FeaturedCard = React.forwardRef<HTMLDivElement, FeaturedCardProps>(\n  ({ className, border = true, size, backgroundColor, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(featuredCardVariants({ size, backgroundColor }), className)}\n      {...props}\n    />\n  ),\n);\nFeaturedCard.displayName = 'FeaturedCard';\n\nconst FeaturedCardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn('flex flex-wrap gap-4 pr-6 pb-6 pl-6', className)} {...props} />\n  ),\n);\nFeaturedCardFooter.displayName = 'FeaturedCardFooter';\n\nconst FeaturedCardTag = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        '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        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFeaturedCardTag.displayName = 'FeaturedCardTag';\n\nconst FeaturedCardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        '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        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nFeaturedCardTitle.displayName = 'FeaturedCardTitle';\n\nconst FeaturedCardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'mt-0 pt-0 pr-6 pb-6 pl-6 font-body text-sm leading-base lg:text-base',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\nFeaturedCardDescription.displayName = 'FeaturedCardDescription';\n\nexport {\n  FeaturedCard,\n  FeaturedCardDescription,\n  FeaturedCardFooter,\n  FeaturedCardTag,\n  FeaturedCardTitle,\n};\n"],"mappings":"8PAKA,IAAM,EAAuB,EAAA,EAC3B,kEACA,CACE,SAAU,CACR,gBAAiB,CACf,YAAa,sCACb,WAAY,sDACZ,kBAAmB,iEACnB,WAAY,0DACZ,kBAAmB,+DACnB,QAAS,yDACT,aAAc,2DACd,cAAe,4DACf,cAAe,4DACf,QAAS,yDACT,UAAW,6DACX,SAAU,2DACV,WAAY,+DACZ,QAAS,yDACT,MAAO,qDACP,QAAS,yDACT,KAAM,kDACR,EACA,KAAM,CACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,KAAM,QACR,CACF,EACA,gBAAiB,CACf,KAAM,OACN,gBAAiB,YACnB,CACF,CACF,EAQM,EAAe,EAAM,YACxB,CAAE,YAAW,SAAS,GAAM,OAAM,kBAAiB,GAAG,GAAS,KAC9D,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EAAG,EAAqB,CAAE,OAAM,iBAAgB,CAAC,EAAG,CAAS,EACxE,GAAI,CACL,CAAA,CAEL,EACA,EAAa,YAAc,eAE3B,IAAM,EAAqB,EAAM,YAC9B,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,UAAW,EAAA,EAAG,sCAAuC,CAAS,EAAG,GAAI,CAAQ,CAAA,CAEhG,EACA,EAAmB,YAAc,qBAEjC,IAAM,EAAkB,EAAM,YAC3B,CAAE,WAAU,YAAW,GAAG,GAAS,KAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,wGACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CAET,EACA,EAAgB,YAAc,kBAE9B,IAAM,EAAoB,EAAM,YAC7B,CAAE,WAAU,YAAW,GAAG,GAAS,KAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,8HACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CAET,EACA,EAAkB,YAAc,oBAEhC,IAAM,EAA0B,EAAM,YAGnC,CAAE,WAAU,YAAW,GAAG,GAAS,KACpC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,uEACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CACN,EACD,EAAwB,YAAc"}