@undp/design-system-react
Version:
React based design system for UNDP
1 lines • 3.75 kB
Source Map (JSON)
{"version":3,"file":"StatCard.cjs","names":[],"sources":["../src/components/ui/stat-card.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 cardVariants = cva(\n 'group bg-surface box-border items-stretch p-8 transition-all duration-400',\n {\n variants: {\n hoverColor: {\n default: 'hover:bg-card-hover-color',\n primary: 'hover:bg-primary',\n secondary: 'hover:bg-secondary',\n tertiary: 'hover:bg-tertiary',\n quaternary: 'hover:bg-quaternary',\n foreground: 'hover:bg-foreground',\n background: 'hover:bg-background',\n success: 'hover:bg-success',\n warning: 'hover:bg-warning',\n info: 'hover:bg-info',\n error: 'hover:bg-error',\n none: '',\n },\n size: {\n sm: 'w-1/4',\n base: 'w-1/3',\n lg: 'w-1/2',\n xl: 'w-2/3',\n full: 'w-full',\n },\n },\n defaultVariants: {\n hoverColor: 'default',\n size: 'full',\n },\n },\n);\ntype StatCardProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;\n\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n ({ className, hoverColor = 'primary', children, size, ...props }, ref) => (\n <div ref={ref} className={cn(cardVariants({ size, hoverColor }), className)} {...props}>\n {children}\n </div>\n ),\n);\nStatCard.displayName = 'StatCard';\n\nconst StatCardValue = 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 [-webkit-text-stroke:2px_var(--content-primary)] [text-shadow:none] group-hover:text-content-primary rtl:text-right group-hover:[-webkit-text-stroke:0px]',\n className,\n )}\n {...props}\n />\n));\nStatCardValue.displayName = 'StatCardValue';\n\nconst StatCardTitle = React.forwardRef<\n HTMLHeadingElement,\n React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n <H4 ref={ref} className={cn('text-content-primary', className)} {...props} />\n));\nStatCardTitle.displayName = 'StatCardTitle';\n\nconst StatCardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n <P ref={ref} className={cn('text-content-primary', className)} {...props} />\n));\nStatCardDescription.displayName = 'StatCardDescription';\n\nexport { StatCard, StatCardDescription, StatCardTitle, StatCardValue };\n"],"mappings":"4RAKA,IAAM,EAAe,EAAA,EACnB,4EACA,CACE,SAAU,CACR,WAAY,CACV,QAAS,4BACT,QAAS,mBACT,UAAW,qBACX,SAAU,oBACV,WAAY,sBACZ,WAAY,sBACZ,WAAY,sBACZ,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,KAAM,EACR,EACA,KAAM,CACJ,GAAI,QACJ,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,KAAM,QACR,CACF,EACA,gBAAiB,CACf,WAAY,UACZ,KAAM,MACR,CACF,CACF,EAGM,EAAW,EAAM,YACpB,CAAE,YAAW,aAAa,UAAW,WAAU,OAAM,GAAG,GAAS,KAChE,EAAA,EAAA,IAAA,CAAC,MAAD,CAAU,MAAK,UAAW,EAAA,EAAG,EAAa,CAAE,OAAM,YAAW,CAAC,EAAG,CAAS,EAAG,GAAI,EAC9E,UACE,CAAA,CAET,EACA,EAAS,YAAc,WAEvB,IAAM,EAAgB,EAAM,YAGzB,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,EAAA,GAAD,CACO,MACL,UAAW,EAAA,EACT,+MACA,CACF,EACA,GAAI,CACL,CAAA,CACF,EACD,EAAc,YAAc,gBAE5B,IAAM,EAAgB,EAAM,YAGzB,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,EAAA,GAAD,CAAS,MAAK,UAAW,EAAA,EAAG,uBAAwB,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC7E,EACD,EAAc,YAAc,gBAE5B,IAAM,EAAsB,EAAM,YAG/B,CAAE,YAAW,GAAG,GAAS,KAC1B,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAQ,MAAK,UAAW,EAAA,EAAG,uBAAwB,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC5E,EACD,EAAoB,YAAc"}