{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "description": "A simple card component",
  "files": [
    {
      "path": "registry/cs/ui/card/card.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { CsBtnColor } from \"@/registry/cs/ui/button/button\"\n\n/** Card color from CS design system. */\nexport type CsCardColor = CsBtnColor | \"white\" | \"light\"\n\nexport interface CardProps extends React.ComponentProps<\"div\"> {\n  /** Card padding. */\n  p?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Card border radius. */\n  radius?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n  /** Card background color. */\n  color?: CsCardColor\n  /** If set, the card will be sticky at the given top offset (px). */\n  sticky?: number\n  /** Make the card clickable with hover effect. */\n  onClick?: React.MouseEventHandler<HTMLDivElement>\n}\n\nconst paddingMap = {\n  none: \"p-0\",\n  xs: \"p-2\",\n  sm: \"p-3\",\n  md: \"p-4\",\n  lg: \"p-6\",\n  xl: \"p-8\",\n}\n\nconst radiusMap = {\n  xs: \"rounded-none\",\n  sm: \"rounded-sm\",\n  md: \"rounded-md\",\n  lg: \"rounded-lg\",\n  xl: \"rounded-xl\",\n}\n\nconst colorMap: Record<CsCardColor, string> = {\n  primary: \"bg-cs-primary text-cs-primary-text\",\n  secondary: \"bg-cs-secondary text-cs-secondary-text\",\n  grey: \"bg-cs-grey text-cs-grey-text\",\n  dark: \"bg-cs-dark text-cs-dark-text\",\n  red: \"bg-cs-red text-cs-red-text\",\n  blue: \"bg-cs-blue text-cs-blue-text\",\n  green: \"bg-cs-green text-cs-green-text\",\n  yellow: \"bg-cs-yellow text-cs-yellow-text\",\n  orange: \"bg-cs-orange text-cs-orange-text\",\n  white: \"bg-white text-foreground\",\n  light: \"bg-cs-grey-light text-foreground\",\n}\n\nfunction Card({\n  className,\n  p = \"lg\",\n  radius = \"lg\",\n  color,\n  sticky,\n  onClick,\n  style,\n  ...props\n}: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-4 border shadow-sm\",\n        paddingMap[p],\n        radiusMap[radius],\n        color ? colorMap[color] : \"bg-card text-card-foreground\",\n        onClick && \"cursor-pointer transition-shadow hover:shadow-md\",\n        className\n      )}\n      style={{\n        ...(sticky !== undefined ? { position: \"sticky\", top: sticky, zIndex: 10 } : {}),\n        ...style,\n      }}\n      onClick={onClick}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center [.border-t]:pt-4\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}