{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "description": "A panel with a colored left edge. One `accent` property drives both the edge and the title.",
  "registryDependencies": [
    "@afterglow/theme"
  ],
  "files": [
    {
      "path": "registry/terminal/ui/card.tsx",
      "content": "import type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Card({\n  className,\n  accent,\n  children,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & { accent?: string }) {\n  return (\n    <div\n      className={cn(\n        \"relative isolate flex flex-col gap-4 rounded-none border border-line border-l-2 border-l-[var(--card-accent,var(--phosphor))] bg-card/90 py-5 text-card-foreground backdrop-blur-md transition duration-[260ms] ease-terminal\",\n        \"hover:border-line-strong hover:border-l-[var(--card-accent,var(--phosphor))] hover:bg-card\",\n        className\n      )}\n      data-slot=\"card\"\n      style={\n        accent\n          ? ({ ...style, \"--card-accent\": accent } as React.CSSProperties)\n          : style\n      }\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction CardAccent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"-mt-5 h-[3px] bg-[linear-gradient(90deg,var(--card-accent,var(--phosphor))_0_28%,var(--phosphor-bright)_28%_33%,var(--line)_33%)]\",\n        className\n      )}\n      data-slot=\"card-accent\"\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4\",\n        className\n      )}\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(\n        \"font-medium font-mono text-[var(--card-accent,var(--phosphor))] text-base leading-tight\",\n        className\n      )}\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(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"card-description\"\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      data-slot=\"card-action\"\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"px-5\", className)}\n      data-slot=\"card-content\"\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-4 px-5 [.border-t]:mt-1 [.border-t]:pt-4\",\n        className\n      )}\n      data-slot=\"card-footer\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardAccent,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}