{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "description": "Displays a card with header, content, and footer.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/card.jsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Card({\n\tclassName,\n\tsize = \"default\",\n\tdecorations = false,\n\tchildren,\n\t...props\n}) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"card\"\n\t\t\tdata-size={size}\n\t\t\tclassName={cn(\n\t\t\t\t\"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 has-[data-slot=card-footer]:pb-0 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col relative\",\n\t\t\t\tdecorations && \"rounded-none overflow-visible\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\n\t\t\t{decorations && (\n\t\t\t\t<div className={cn(\"absolute -left-[1px] -top-[1px] z-10\")}>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute top-0\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute left-0\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{decorations && (\n\t\t\t\t<div className={cn(\"absolute -right-[0px] -top-[1px] z-10\")}>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute top-0\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute -left-[7px]\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{decorations && (\n\t\t\t\t<div className={cn(\"absolute -left-[1px] -bottom-[0px] z-10\")}>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute -top-[7px]\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute left-0\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{decorations && (\n\t\t\t\t<div className={cn(\"absolute -right-[0px] -bottom-[0px] z-10\")}>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[7.87px] rounded-full absolute -top-[7px]\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute -left-[7px]\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction CardHeader({ className, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"card-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CardTitle({ className, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"card-title\"\n\t\t\tclassName={cn(\"text-sm font-medium\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CardDescription({ className, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"card-description\"\n\t\t\tclassName={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CardAction({ className, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"card-action\"\n\t\t\tclassName={cn(\n\t\t\t\t\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CardContent({ className, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"card-content\"\n\t\t\tclassName={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction CardFooter({ className, background = false, children, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"card-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-b-lg h-full p-4 group-data-[size=sm]/card:px-3 group-data-[size=sm]/card:pb-3 [.border-t]:pt-4 -mb-4 group-data-[size=sm]/card:[.border-t]:pt-3 flex items-center\",\n\t\t\t\tbackground &&\n\t\t\t\t\t`bg-[repeating-linear-gradient(45deg,var(--card),var(--card)_3px,var(--muted)_3px,var(--muted)_6px)] p-3! border-t relative`,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\n\t\t\t{background && (\n\t\t\t\t<div className={cn(\"absolute -left-[1px] -top-[1px] z-10\")}>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[11.80px] rounded-full absolute -top-[5.5px]\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute left-0\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{background && (\n\t\t\t\t<div className={cn(\"absolute -right-[0px] -top-[1px] z-10\")}>\n\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[1px] h-[11.80px] rounded-full absolute -top-[5.5px]\" />\n\t\t\t\t\t\t<div className=\"bg-muted-foreground w-[7.87px] h-[1px] rounded-full absolute -left-[7px]\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nCard.displayName = \"Card\";\nCardHeader.displayName = \"CardHeader\";\nCardFooter.displayName = \"CardFooter\";\nCardTitle.displayName = \"CardTitle\";\nCardAction.displayName = \"CardAction\";\nCardDescription.displayName = \"CardDescription\";\nCardContent.displayName = \"CardContent\";\n\nexport {\n\tCard,\n\tCardHeader,\n\tCardFooter,\n\tCardTitle,\n\tCardAction,\n\tCardDescription,\n\tCardContent,\n};\n",
      "type": "registry:component",
      "target": "components/optics/card.jsx"
    }
  ],
  "type": "registry:component"
}