{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:item",
  "title": "Card",
  "description": "A container component for displaying content.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/ui/card/card.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./card.module.css\";\n\nconst cardVariants = cva(styles.card, {\n  variants: {\n    variant: {\n      default: \"\",\n      lift: styles.cardLift,\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nfunction Card({ className, variant, ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof cardVariants>) {\n  return <div className={cn(cardVariants({ variant }), className)} data-slot=\"card\" {...props} />;\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.header, className)} data-slot=\"card-header\" {...props} />;\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.title, className)} data-slot=\"card-title\" {...props} />;\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.description, className)} data-slot=\"card-description\" {...props} />;\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.content, className)} data-slot=\"card-content\" {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.footer, className)} data-slot=\"card-footer\" {...props} />;\n}\n\nfunction CardImage({\n  className,\n  src,\n  alt,\n  ...props\n}: {\n  className?: string;\n  src: string;\n  alt: string;\n} & Omit<React.ComponentProps<typeof Image>, \"src\" | \"alt\" | \"width\" | \"height\" | \"children\">) {\n  return (\n    <Image\n      alt={alt}\n      className={cn(styles.image, className)}\n      data-slot=\"card-image\"\n      height={300}\n      src={src}\n      width={300}\n      {...props}\n    />\n  );\n}\n\nfunction CardImageContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.imageContent, className)} data-slot=\"card-image-content\" {...props} />;\n}\n\nfunction CardIcon({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(styles.icon, className)} data-slot=\"card-icon\" {...props}>\n      {children}\n    </div>\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.action, className)} data-slot=\"card-action\" {...props} />;\n}\n\nexport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardImage,\n  CardImageContent,\n  CardTitle,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/card/card.tsx"
    },
    {
      "path": "registry/brook/ui/card/card.module.css",
      "content": ".card {\n  border-radius: var(--radius);\n  color: var(--foreground);\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  background-color: oklch(from var(--card) l c h / 0.3);\n  border: none;\n  position: relative;\n  justify-content: space-between;\n  box-shadow:\n    0 0 0 1px oklch(from var(--border) l c h / 0.5),\n    var(--shadow-border-stack);\n}\n\n.header {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  gap: 0.5rem;\n  align-items: center;\n  max-width: 100%;\n}\n\n.title {\n  font-size: 1.25rem;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: -0.025em;\n  margin: 0;\n}\n\n.description {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: var(--muted-foreground);\n  margin: 0;\n  grid-column: 1 / -1;\n  white-space: unset;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.cardLift {\n  overflow: hidden;\n  padding-bottom: 0;\n  gap: 0;\n}\n\n.cardLift .content {\n  padding: 1.5rem 1.5rem 2rem;\n  transition: transform 0.25s var(--ease-in-out-quad);\n  background-color: var(--mix-card-33-bg);\n  width: calc(100% + 3rem);\n  margin: 0 -1.5rem;\n}\n\n.textContent {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n}\n\n.image {\n  width: calc(100% + 3rem);\n  margin: -1.5rem -1.5rem 0;\n  object-fit: cover;\n  height: 300px;\n  aspect-ratio: 16 / 9;\n  transition: transform 0.25s var(--ease-in-out-quad);\n  border-radius: var(--radius) var(--radius) 0 0;\n  max-width: 100vw;\n  box-sizing: border-box;\n}\n\n.cardLift .footer {\n  opacity: 0;\n  transition:\n    opacity 0.25s var(--ease-in-out-quad),\n    transform 0.25s var(--ease-in-out-quad);\n  position: absolute;\n  bottom: 0;\n  left: 1.5rem;\n  right: 1.5rem;\n}\n\n.cardLift:hover .content {\n  transform: translateY(-2rem);\n}\n\n.cardLift:hover .footer {\n  opacity: 1;\n  transform: translateY(-1rem);\n}\n\n.cardLift:hover .image {\n  transform: scale(1.04);\n}\n\n@media (max-width: 768px) {\n  .image {\n    width: 100%;\n    margin: -1.5rem 0 0;\n    max-width: none;\n    height: 250px;\n  }\n\n  .cardLift .image {\n    margin-left: -1.5rem;\n    margin-right: -1.5rem;\n    width: calc(100% + 3rem);\n  }\n}\n\n.imageContent {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));\n  color: white;\n}\n\n.default {\n  background-color: var(--background-muted);\n}\n\n.icon {\n  background-color: var(--muted);\n  border-radius: var(--radius);\n  border: none;\n  box-shadow:\n    0 0 0 1px oklch(from var(--border) l c h / 0.5),\n    0 1px 2px oklch(from var(--foreground) l c h / 0.04),\n    inset 0 0 0 1px oklch(from var(--background) l c h / 0.02);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  padding: 6px;\n  margin-bottom: 1.125rem;\n  width: 32px;\n  height: 32px;\n}\n\n.action {\n  grid-column: 2;\n  grid-row: 1;\n  align-self: start;\n  justify-self: end;\n}\n\n@media (max-width: 640px) {\n  .card {\n    padding: 1.25rem;\n    gap: 1.25rem;\n  }\n\n  .title {\n    font-size: 1.125rem;\n  }\n\n  .description {\n    font-size: 0.9375rem;\n    line-height: 1.5;\n  }\n\n  .content {\n    font-size: 0.9375rem;\n    line-height: 1.5;\n  }\n\n  .icon {\n    width: 28px;\n    height: 28px;\n    margin-bottom: 1rem;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/card/card.module.css"
    }
  ]
}