{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compact-card",
  "title": "Compact Card",
  "description": "Editorial card with a full-bleed image, story metadata, and optional link wrapper.",
  "files": [
    {
      "path": "components/cards/CompactCard.tsx",
      "content": "type CompactCardProps = {\n  image?: string;\n  imageAlt?: string;\n  eyebrow?: string;\n  title?: string;\n  description?: string;\n  author?: string;\n  readTime?: string;\n  href?: string;\n  className?: string;\n};\n\nexport default function CompactCard({\n  image = 'https://assets.uniquel.io/components/stock/photo-1497366754035-f200968a6e72.jpg',\n  imageAlt = 'Sunlit creative studio',\n  eyebrow = 'Workspace',\n  title = 'Designing for the quiet moments',\n  description = 'Small details that make a working space feel calm, focused, and ready for the next idea.',\n  author = 'Maya Chen',\n  readTime = '6 min read',\n  href,\n  className = '',\n}: CompactCardProps) {\n  const content = (\n    <article\n      className={[\n        'group h-auto w-full max-w-sm overflow-hidden rounded-[var(--radius-2xl,1rem)] border border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-card,#fff)] shadow-sm transition-shadow hover:shadow-lg',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <img\n        src={image}\n        alt={imageAlt}\n        className='aspect-[16/10] w-full object-cover transition-transform duration-500 group-hover:scale-105'\n      />\n      <div className='p-5'>\n        <p className='text-xs font-semibold uppercase tracking-[0.16em] text-[color:var(--color-primary,#4f46e5)]'>\n          {eyebrow}\n        </p>\n        <h3 className='mt-2 text-lg font-semibold tracking-tight text-[color:var(--color-card-foreground,#111827)]'>{title}</h3>\n        <p className='mt-2 text-sm leading-6 text-[color:var(--color-muted-foreground,#4b5563)]'>{description}</p>\n        <div className='mt-5 flex items-center justify-between border-t border-[color:var(--color-border,#f3f4f6)] pt-4 text-xs text-[color:var(--color-muted-foreground,#6b7280)]'>\n          <span className='font-medium text-[color:var(--color-card-foreground,#374151)]'>{author}</span>\n          <span>{readTime}</span>\n        </div>\n      </div>\n    </article>\n  );\n\n  return href ? (\n    <a href={href} className='block focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring,#4f46e5)] focus-visible:ring-offset-2'>\n      {content}\n    </a>\n  ) : (\n    content\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/cards/CompactCard.tsx"
    }
  ],
  "categories": [
    "cards"
  ],
  "type": "registry:component"
}