{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "Hyper-rounded superellipse card with pastel surface options.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/card.tsx",
      "content": "import * as React from 'react'\nimport { motion, type HTMLMotionProps } from 'motion/react'\nimport { cn } from '@/lib/utils'\n\nconst cardVariants = {\n  white: 'bg-rk-surface text-rk-ink',\n  mint: 'bg-rk-mint text-rk-ink',\n  peach: 'bg-rk-peach text-rk-ink',\n  lavender: 'bg-rk-lavender text-rk-ink',\n  sky: 'bg-rk-sky text-rk-ink',\n  pink: 'bg-rk-pink text-rk-ink',\n  yellow: 'bg-rk-primary text-rk-ink',\n  orange: 'bg-rk-secondary text-rk-ink',\n  dark: 'bg-rk-ink text-rk-canvas',\n}\n\nconst shadowColorMap = {\n  ink: 'rk-shadow',\n  yellow: 'rk-shadow',\n  orange: 'rk-shadow',\n  violet: 'rk-shadow',\n  mint: 'rk-shadow',\n  pink: 'rk-shadow',\n  sky: 'rk-shadow',\n}\n\nconst shadowColorHexMap: Record<keyof typeof shadowColorMap, string> = {\n  ink: '#18181b',\n  yellow: '#FACC15',\n  orange: '#FB923C',\n  violet: '#A78BFA',\n  mint: '#4ADE80',\n  pink: '#F472B6',\n  sky: '#38BDF8',\n}\n\nexport interface CardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof HTMLMotionProps<'div'>>,\n    Omit<HTMLMotionProps<'div'>, 'children'> {\n  children?: React.ReactNode\n  variant?: keyof typeof cardVariants\n  hasShadow?: boolean\n  isInteractive?: boolean\n  shadowColor?: keyof typeof shadowColorMap\n  shadowStyle?: 'hard' | 'soft' | 'none'\n  badge?: React.ReactNode\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      variant = 'white',\n      hasShadow = true,\n      isInteractive = false,\n      shadowColor = 'ink',\n      shadowStyle = 'hard',\n      badge,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const shadowClass =\n      !hasShadow || shadowStyle === 'none'\n        ? 'rk-shadow-none'\n        : shadowStyle === 'soft'\n        ? 'rk-shadow-soft'\n        : 'rk-shadow'\n\n    const shadowVar =\n      shadowStyle === 'hard' && shadowColor !== 'ink'\n        ? ({ '--rk-shadow-color': shadowColorHexMap[shadowColor] } as React.CSSProperties)\n        : undefined\n\n    return (\n      <motion.div\n        ref={ref}\n        whileHover={\n          isInteractive && shadowStyle !== 'none'\n            ? {\n                y: -4,\n              }\n            : undefined\n        }\n        transition={{ type: 'spring', stiffness: 400, damping: 25 }}\n        style={shadowVar}\n        className={cn(\n          'rounded-[28px] rk-border p-6 sm:p-7 font-sans relative overflow-hidden transition-colors',\n          cardVariants[variant],\n          shadowClass,\n          isInteractive && 'cursor-pointer',\n          className\n        )}\n        {...props}\n      >\n        {badge && (\n          <div className=\"absolute top-5 right-5 z-10\">\n            {typeof badge === 'string' ? (\n              <span className=\"inline-flex items-center rounded-full border-2 border-rk-ink bg-rk-primary px-3 py-1 font-mono text-xs font-black text-rk-ink rk-shadow-xs\">\n                {badge}\n              </span>\n            ) : (\n              badge\n            )}\n          </div>\n        )}\n        {children}\n      </motion.div>\n    )\n  }\n)\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col space-y-1.5 mb-4 pr-14 sm:pr-16', className)}\n    {...props}\n  />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn('font-display text-xl sm:text-2xl font-black tracking-tight text-inherit', className)}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-xs sm:text-sm font-bold opacity-80', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('pt-0 space-y-3', className)} {...props} />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center justify-between pt-4 mt-5 border-t-2 border-current/15', className)}\n    {...props}\n  />\n))\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }\n",
      "type": "registry:ui",
      "target": "components/ui/card.tsx"
    }
  ]
}