{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "A raised surface key with header, content, and footer sections.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://seamui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/seam/ui/card.tsx",
      "content": "import type * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst cardVariants = cva(\n  \"flex flex-col gap-5 rounded-xl squircle border py-5\",\n  {\n    variants: {\n      variant: {\n        // a raised key resting on the canvas — never flat, never pure white edges.\n        default: \"bg-card text-card-foreground border-border/60 shadow-resting\",\n        /**\n         * The same key, hinting at a folder: a hairline tab aligned to the\n         * content column.\n         *\n         * Stroke only — no fill, no shadow — so it reads as the layer *behind*\n         * rather than a second key (§2: depth comes from shadow, and the back\n         * of a stack catches none). It's drawn as a pseudo-element sitting\n         * flush above the top border, so the silhouette stays one continuous\n         * outline and `corner-shape` still applies. Note it renders outside the\n         * card's box: an `overflow-hidden` on the card will clip it away.\n         */\n        tabbed: [\n          \"relative bg-card text-card-foreground border-border/60 shadow-resting\",\n          \"before:absolute before:-top-2.5 before:left-5 before:h-2.5 before:w-2/5\",\n          \"before:rounded-t-lg before:squircle\",\n          \"before:border before:border-b-0 before:border-border/60\",\n          \"before:content-['']\",\n        ],\n        /**\n         * A full folder silhouette: a filled tab rising off the card's top\n         * left, joined down to the body by an angled shoulder.\n         *\n         * `::before` is the tab, `::after` the shoulder curving down to the\n         * card's top edge, and `rounded-tl-none` squares the card's own\n         * corner so the tab's left edge continues into it.\n         *\n         * Everything here is 18px — tab height, corner radius, shoulder — so\n         * the silhouette has one radius throughout. The outline survives the\n         * curve because the shoulder's gradient paints its own hairline; a\n         * `clip-path` cut can't, which is why the shoulder isn't a triangle.\n         *\n         * Like `tabbed`, the tab renders outside the card's box —\n         * `overflow-hidden` clips it, and it overlaps whatever sits directly\n         * above.\n         */\n        folder: [\n          \"relative rounded-tl-none border-border/60 bg-card text-card-foreground shadow-resting\",\n          // Tab. 18px tall so the 18px corner renders un-clamped and matches\n          // the card's other corners — a shorter tab makes the browser scale\n          // the radius down and the top left reads tighter than the rest.\n          \"before:absolute before:-top-[18px] before:left-0 before:h-[18px] before:w-24\",\n          \"before:rounded-tl-[18px] before:squircle before:bg-card before:content-['']\",\n          // Its own top and left hairline, continuing the card's outline. The\n          // tab paints ABOVE the card (no negative z), so its fill hides the\n          // card's own top border where it runs beneath — that segment isn't\n          // part of the folder's silhouette.\n          \"before:border-t before:border-l before:border-border/60\",\n          // Depth, cast up and out only. A full resting shadow would fall\n          // *onto* the card body, since a pseudo-element paints over its\n          // element's background.\n          \"before:[box-shadow:0_-1px_3px_oklch(0.23_0.004_286/0.06)]\",\n          \"dark:before:[box-shadow:0_-1px_3px_rgb(0_0_0/0.4)]\",\n          // Shoulder: one radial-gradient doing three jobs — transparent\n          // inside the arc, a 1px hairline along it, fill beyond. That keeps\n          // the outline unbroken round the curve, which a clip-path cut can't\n          // do (it has no border to speak of), and gives the join the same\n          // 18px radius as the corners instead of a sharp vertex.\n          \"after:absolute after:-top-[18px] after:left-24 after:size-[18px] after:content-['']\",\n          \"after:bg-[radial-gradient(circle_at_100%_0%,transparent_17px,var(--border)_17px,var(--border)_18px,var(--card)_18px)]\",\n        ],\n        // the debossed counterpart — a container things sit *in*, not a\n        // surface that sits *on* (§1: slot vs token).\n        well: \"bg-muted text-card-foreground border-border/60 shadow-well\",\n        // hairline only. For dense grids, where a dozen raised keys reads as\n        // noise — the stroke still separates the surface from the canvas.\n        flat: \"bg-card text-card-foreground border-border/60 shadow-none\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  }\n)\n\nfunction Card({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof cardVariants>) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(cardVariants({ variant, 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        \"@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]\",\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(\"text-base leading-none font-semibold\", 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-muted-foreground text-sm\", 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-5\", 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(\"flex items-center gap-2 px-5\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  cardVariants,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardAction,\n  CardContent,\n  CardFooter,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/card.tsx"
    }
  ]
}