{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-tailwind",
  "type": "registry:item",
  "title": "Card (Tailwind)",
  "description": "A container component for displaying content.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/brook/tailwind/ui/card.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\n\nconst cardVariants = cva(\n  [\n    \"flex flex-col gap-6 rounded-[var(--radius)] p-6 text-foreground\",\n    \"relative justify-between bg-[oklch(from_var(--card)_l_c_h_/_0.3)]\",\n    \"shadow-[0_0_0_1px_oklch(from_var(--border)_l_c_h_/_0.5),var(--shadow-border-stack)]\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        lift: [\n          \"!gap-0 overflow-hidden pb-0\",\n          \"[&_.card-content]:px-6 [&_.card-content]:pt-6 [&_.card-content]:pb-8\",\n          \"[&_.card-content]:transition-all [&_.card-content]:duration-[250ms] [&_.card-content]:ease-[var(--ease-in-out-quad)]\",\n          \"[&_.card-content]:-mx-6 [&_.card-content]:w-[calc(100%+3rem)] [&_.card-content]:bg-[var(--mix-card-33-bg)]\",\n          \"max-md:[&_.card-image]:-mx-6 max-md:[&_.card-image]:w-[calc(100%+3rem)]\",\n          \"[&_.card-footer]:opacity-0 [&_.card-footer]:transition-all\",\n          \"[&_.card-footer]:!duration-[250ms] [&_.card-footer]:!ease-[var(--ease-in-out-quad)]\",\n          \"[&_.card-footer]:absolute [&_.card-footer]:right-6 [&_.card-footer]:bottom-0 [&_.card-footer]:left-6\",\n          \"[&_.card-image]:transition-all [&_.card-image]:duration-[250ms] [&_.card-image]:ease-[var(--ease-in-out-quad)]\",\n          \"hover:[&_.card-content]:-translate-y-8\",\n          \"hover:[&_.card-footer]:-translate-y-4 hover:[&_.card-footer]:opacity-100\",\n          \"hover:[&_.card-image]:scale-[1.04]\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\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 (\n    <div\n      className={cn(\"grid max-w-full grid-cols-[1fr_auto] items-center gap-2\", className)}\n      data-slot=\"card-header\"\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"m-0 font-medium text-xl leading-none tracking-tight\", \"max-sm:text-lg\", className)}\n      data-slot=\"card-title\"\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"col-span-full m-0 whitespace-normal text-muted-foreground text-sm leading-5\",\n        \"max-sm:text-[0.9375rem] max-sm:leading-[1.5]\",\n        className\n      )}\n      data-slot=\"card-description\"\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(\"card-content flex flex-col gap-3\", className)} data-slot=\"card-content\" {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(\"card-footer flex items-center\", 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(\n        \"card-image box-border aspect-video w-full max-w-none object-cover\",\n        \"-mt-6 mx-0 mb-0 h-[250px]\",\n        \"md:-mt-6 md:-mx-6 md:mb-0 md:h-[300px] md:w-[calc(100%+3rem)] md:max-w-[100vw]\",\n        \"rounded-t-[var(--radius)] transition-transform duration-[250ms] ease-[var(--ease-in-out-quad)]\",\n        className\n      )}\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 (\n    <div\n      className={cn(\n        \"absolute inset-0 flex flex-col justify-end\",\n        \"bg-gradient-to-b from-transparent to-black/60 text-white\",\n        className\n      )}\n      data-slot=\"card-image-content\"\n      {...props}\n    />\n  );\n}\n\nfunction CardIcon({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"rounded-[var(--radius)] bg-muted\",\n        \"shadow-[0_0_0_1px_oklch(from_var(--border)_l_c_h_/_0.5),0_1px_2px_rgba(0,0,0,0.04),inset_0_0_0_1px_rgba(255,255,255,0.02)]\",\n        \"relative z-10 flex items-center justify-center\",\n        \"mb-[1.125rem] h-8 w-8 p-1.5\",\n        \"max-sm:mb-4 max-sm:h-7 max-sm:w-7\",\n        className\n      )}\n      data-slot=\"card-icon\"\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"col-start-2 row-start-1 self-start justify-self-end\", className)}\n      data-slot=\"card-action\"\n      {...props}\n    />\n  );\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"
    }
  ]
}