{
  "name": "card",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "card.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { forwardRef, type HTMLAttributes } from \"react\";\r\n\r\nconst cardClass = css({\r\n  borderRadius: theme.radius.lg,\r\n  border: `1px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.card,\r\n  color: theme.color.cardForeground,\r\n  boxShadow: theme.shadow.sm,\r\n});\r\n\r\nconst headerClass = css({\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: theme.space[1.5],\r\n  padding: theme.space[6],\r\n});\r\n\r\nconst titleClass = css({\r\n  fontSize: theme.fontSize.lg,\r\n  fontWeight: theme.fontWeight.semibold,\r\n  lineHeight: theme.lineHeight.lg,\r\n  margin: 0,\r\n});\r\n\r\nconst descriptionClass = css({\r\n  fontSize: theme.fontSize.sm,\r\n  color: theme.color.mutedForeground,\r\n  margin: 0,\r\n});\r\n\r\nconst bodyClass = css({\r\n  padding: theme.space[6],\r\n  paddingTop: 0,\r\n});\r\n\r\nconst footerClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: theme.space[2],\r\n  padding: theme.space[6],\r\n  paddingTop: 0,\r\n});\r\n\r\nfunction mergeClass(base: string, className?: string): string {\r\n  return className ? `${base} ${className}` : base;\r\n}\r\n\r\nexport const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function Card(\r\n  { className, ...props },\r\n  ref,\r\n) {\r\n  return <div ref={ref} className={mergeClass(cardClass, className)} {...props} />;\r\n});\r\n\r\nexport const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardHeader(\r\n  { className, ...props },\r\n  ref,\r\n) {\r\n  return <div ref={ref} className={mergeClass(headerClass, className)} {...props} />;\r\n});\r\n\r\nexport const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(function CardTitle(\r\n  { className, ...props },\r\n  ref,\r\n) {\r\n  return <h3 ref={ref} className={mergeClass(titleClass, className)} {...props} />;\r\n});\r\n\r\nexport const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\r\n  function CardDescription({ className, ...props }, ref) {\r\n    return <p ref={ref} className={mergeClass(descriptionClass, className)} {...props} />;\r\n  },\r\n);\r\n\r\nexport const CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardBody(\r\n  { className, ...props },\r\n  ref,\r\n) {\r\n  return <div ref={ref} className={mergeClass(bodyClass, className)} {...props} />;\r\n});\r\n\r\nexport const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardFooter(\r\n  { className, ...props },\r\n  ref,\r\n) {\r\n  return <div ref={ref} className={mergeClass(footerClass, className)} {...props} />;\r\n});\r\n",
      "type": "registry:component"
    }
  ]
}