{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "description": "Elevated, filled, and outlined cards on the M3 surface ramp.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json",
    "https://guillermo-rebolledo.github.io/materialcn/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/card.tsx",
      "content": "import * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { cardVariants } from \"./card-variants\"\n\nfunction Card({\n  className,\n  interactive = false,\n  size = \"default\",\n  variant = \"elevated\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof cardVariants> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      data-interactive={interactive || undefined}\n      tabIndex={interactive && props.tabIndex === undefined ? 0 : props.tabIndex}\n      className={cn(cardVariants({ variant, interactive }), 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(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-m3-md px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)\",\n        className\n      )}\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(\n        \"text-m3-title-md text-m3-on-surface group-data-[size=sm]/card:text-m3-title-sm\",\n        className\n      )}\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-m3-body-md text-m3-on-surface-variant\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-(--card-spacing)\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center gap-2 rounded-b-m3-md p-(--card-spacing) pt-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  cardVariants,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "src/components/ui/card-variants.ts",
      "content": "/**\n * Variant definitions live beside the component rather than inside it.\n *\n * React Fast Refresh only treats a module as a hot boundary when every export\n * either is a component or keeps a stable identity across re-evaluations.\n * `cva()` builds a fresh object each time its module runs, so exporting it from\n * the component file demoted that file to a full page reload on every edit.\n * Re-exported from here, the binding's identity survives edits to the component.\n */\n\nimport { cva } from \"class-variance-authority\"\n\n/**\n * Material 3 card.\n *\n * Radius is the medium shape step (12dp), and the three variants differ only in\n * how they express depth — which is the Material point. `elevated` lifts with a\n * shadow, `filled` steps up the surface-container ramp, `outlined` uses a\n * hairline. In dark themes the ramp does more work than the shadow does.\n */\nexport const cardVariants = cva(\n  \"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-m3-md text-m3-body-md [--card-spacing:--spacing(4)] py-(--card-spacing) has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-m3-md *:[img:last-child]:rounded-b-m3-md\",\n  {\n    variants: {\n      variant: {\n        elevated: \"bg-m3-surface-container-low text-m3-on-surface shadow-m3-1\",\n        filled: \"bg-m3-surface-container-highest text-m3-on-surface\",\n        outlined:\n          \"bg-m3-surface text-m3-on-surface border border-m3-outline-variant\",\n      },\n      // Kit `Card states`: interactive cards wash an 8% On Surface state layer\n      // over the container, lift one elevation step on hover, and show a\n      // 3dp Secondary focus ring 2dp outside the 12dp shape.\n      interactive: {\n        true: [\n          \"relative isolate cursor-pointer outline-none\",\n          \"transition-[box-shadow,background-color] duration-(--m3-spring-effects-fast-duration) ease-(--m3-spring-effects-fast)\",\n          \"after:pointer-events-none after:absolute after:-inset-px after:-z-10 after:rounded-[inherit] after:bg-m3-on-surface after:opacity-0\",\n          \"after:transition-opacity after:duration-(--m3-spring-effects-fast-duration) after:ease-(--m3-spring-effects-fast)\",\n          \"hover:after:opacity-8 focus-visible:after:opacity-10 active:after:opacity-10\",\n          \"focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-m3-secondary\",\n        ],\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"elevated\", interactive: true, class: \"hover:shadow-m3-2 active:shadow-m3-1\" },\n      { variant: \"filled\", interactive: true, class: \"hover:shadow-m3-1 active:shadow-m3-0\" },\n      { variant: \"outlined\", interactive: true, class: \"hover:shadow-m3-1 active:shadow-m3-0\" },\n    ],\n    defaultVariants: {\n      variant: \"elevated\",\n      interactive: false,\n    },\n  },\n)\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "layout"
  ],
  "type": "registry:ui"
}