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

React based design system for UNDP

{"version":3,"file":"Card.cjs","names":[],"sources":["../src/components/ui/card.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst cardVariants = cva('flex flex-col justify-between items-stretch group', {\n  variants: {\n    variant: {\n      'with-image': '[&_.card-tag]:pb-[26px]',\n      'without-image': '[&_.card-tag]:pb-4',\n    },\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      info: 'bg-info hover:bg-info-hover text-content-reverse',\n      warning: 'bg-warning hover:bg-warning-hover text-content-primary',\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    variant: 'with-image',\n    backgroundColor: 'background',\n  },\n});\n\ninterface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {\n  border?: boolean;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, border = true, size, variant, backgroundColor, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        cardVariants({ size, backgroundColor, variant }),\n        border === false ? '' : 'border-foreground border-t-2',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<HTMLDivElement, CardProps>(({ ...props }, ref) => (\n  <div ref={ref} {...props} />\n));\nCardHeader.displayName = 'CardHeader';\n\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('flex flex-wrap gap-4 pt-4 pr-6 pb-6 pl-6 font-body', className)}\n      {...props}\n    />\n  ),\n);\nCardFooter.displayName = 'CardFooter';\n\nconst CardTag = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\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-h6 md:mb-0',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nCardTag.displayName = 'CardTag';\n\nconst CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ children, className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        '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        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<HTMLDivElement, 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-p-xs md:text-p-sm lg:text-p',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nCardDescription.displayName = 'CardDescription';\n\nconst CardImage = React.forwardRef<\n  HTMLImageElement,\n  React.HTMLAttributes<HTMLImageElement> & {\n    src: string;\n    alt?: string;\n  }\n>(({ className, ...props }, ref) => (\n  <img ref={ref} alt='card' {...props} className={cn('h-64 w-full object-cover', className)} />\n));\nCardImage.displayName = 'CardImage';\n\nexport { Card, CardDescription, CardFooter, CardHeader, CardImage, CardTag, CardTitle };\n"],"mappings":"8PAKA,IAAM,EAAe,EAAA,EAAI,oDAAqD,CAC5E,SAAU,CACR,QAAS,CACP,aAAc,0BACd,gBAAiB,oBACnB,EACA,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,KAAM,mDACN,QAAS,wDACX,EACA,KAAM,CACJ,GAAI,QACJ,GAAI,QACJ,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,KAAM,QACR,CACF,EACA,gBAAiB,CACf,KAAM,OACN,QAAS,aACT,gBAAiB,YACnB,CACF,CAAC,EAQK,EAAO,EAAM,YAChB,CAAE,YAAW,SAAS,GAAM,OAAM,UAAS,kBAAiB,GAAG,GAAS,KACvE,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,EAAa,CAAE,OAAM,kBAAiB,SAAQ,CAAC,EAC/C,IAAW,GAAQ,GAAK,+BACxB,CACF,EACA,GAAI,CACL,CAAA,CAEL,EACA,EAAK,YAAc,OAEnB,IAAM,EAAa,EAAM,YAAuC,CAAE,GAAG,GAAS,KAC5E,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,GAAI,CAAQ,CAAA,CAC5B,EACD,EAAW,YAAc,aAEzB,IAAM,EAAa,EAAM,YACtB,CAAE,YAAW,GAAG,GAAS,KACxB,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EAAG,qDAAsD,CAAS,EAC7E,GAAI,CACL,CAAA,CAEL,EACA,EAAW,YAAc,aAEzB,IAAM,EAAU,EAAM,YACnB,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,EAAQ,YAAc,UAEtB,IAAM,EAAY,EAAM,YACrB,CAAE,WAAU,YAAW,GAAG,GAAS,KAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,+FACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CAET,EACA,EAAU,YAAc,YAExB,IAAM,EAAkB,EAAM,YAC3B,CAAE,WAAU,YAAW,GAAG,GAAS,KAClC,EAAA,EAAA,IAAA,CAAC,MAAD,CACO,MACL,UAAW,EAAA,EACT,sEACA,CACF,EACA,GAAI,EAEH,UACE,CAAA,CAET,EACA,EAAgB,YAAc,kBAE9B,IAAM,EAAY,EAAM,YAMrB,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,IAAI,OAAO,GAAI,EAAO,UAAW,EAAA,EAAG,2BAA4B,CAAS,CAAI,CAAA,CAC7F,EACD,EAAU,YAAc"}