{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "description": "Card surface with 4 variants (outline, elevated, soft, glass) and 3 inset scales (sm, md, lg) that pad header, content and footer together. Parts: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@ai2/glass",
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/card.tsx",
      "content": "import type * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glass } from \"@/registry/ai2/ui/glass\"\n\nconst cardVariants = cva(\"flex flex-col text-card-foreground\", {\n  variants: {\n    variant: {\n      outline: \"rounded-xl border bg-card\",\n      elevated:\n        \"rounded-xl border border-transparent bg-card shadow-md shadow-black/5 dark:border-border dark:shadow-black/20\",\n      soft: \"rounded-xl bg-surface-3 dark:bg-surface-2\",\n      glass: `rounded-xl border border-white/20 dark:border-white/10 ${glass.overlay}`,\n    },\n    inset: {\n      sm: \"gap-4 py-4 [&_[data-slot=card-content]]:px-4 [&_[data-slot=card-footer]]:px-4 [&_[data-slot=card-header]]:px-4\",\n      md: \"gap-6 py-6 [&_[data-slot=card-content]]:px-6 [&_[data-slot=card-footer]]:px-6 [&_[data-slot=card-header]]:px-6\",\n      lg: \"gap-8 py-8 [&_[data-slot=card-content]]:px-8 [&_[data-slot=card-footer]]:px-8 [&_[data-slot=card-header]]:px-8\",\n    },\n  },\n  defaultVariants: {\n    variant: \"outline\",\n    inset: \"md\",\n  },\n})\n\ninterface CardProps\n  extends React.ComponentProps<\"div\">,\n    VariantProps<typeof cardVariants> {}\n\nfunction Card({ className, variant, inset, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-variant={variant ?? \"outline\"}\n      className={cn(cardVariants({ variant, inset, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"card-content\" className={cn(className)} {...props} />\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  cardVariants,\n  type CardProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Use variant for surface depth (elevated for emphasis, soft for nested surfaces, glass over imagery) and inset to scale internal padding consistently across all parts. The glass variant derives from the @ai2/glass surface treatments.",
  "categories": [
    "display",
    "layout"
  ],
  "type": "registry:ui"
}