{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "A person's thing on a raised plate: media, title, a line, actions. A card with a link lifts one grid step on the settle spring as its shadow grows; a card that goes nowhere is still.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/card/card.tsx",
      "type": "registry:ui",
      "target": "components/metalui/card/card.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { useRender } from '@base-ui/react/use-render';\n\n/* ─────────────────────────────────────────────────────────\n * CARD, a person's thing held on a raised plate\n *\n *   rest      the raised surface: optional media, a title, a line, a footer of actions\n *   link      a card that goes somewhere takes its link on the title, stretched over the whole card\n *             (one clear link for assistive tech); footer actions stay their own buttons above it\n *   hover     only a card with a link moves: it lifts one grid step on the settle spring and its\n *             ambient shadow grows (the hover lift, T5a), still again once the pointer leaves\n *   pressed   it comes back down (press time)\n *   focus     the green ring, from the title's link\n *   selected  one of a set: the green ring, 3 out\n * Reduce Motion: no lift; the shadow still grows.\n * An object: it stands for a person's thing. It uses the raised surface.\n * Slots: Card.Root, Card.Media, Card.Title, Card.Description, Card.Footer.\n * ───────────────────────────────────────────────────────── */\n\nconst ROOT = 'mu-card relative grid gap-card-gap p-card-pad rounded-surface-radius-card recipe-surface-raise card-lift has-[.mu-card-link:focus-visible]:focus-ring data-selected:card-selected';\nconst MEDIA = 'mu-card-media h-card-media card-media-bleed';\nconst TITLE = 'mu-card-title static m-0 type-title text-ink';\nconst LINK = 'mu-card-link static text-inherit no-underline outline-none card-stretch';\nconst HEADINGS = { 2: 'h2', 3: 'h3', 4: 'h4' } as const;\nconst DESCRIPTION = 'mu-card-description m-0 type-body text-ink2';\nconst FOOTER = 'mu-card-footer relative z-1 flex flex-wrap items-center gap-card-footer-gap mt-card-footer-gap';\n\nexport interface CardRootProps extends React.HTMLAttributes<HTMLElement> {\n  /** One of a set, chosen: the green ring. */\n  selected?: boolean;\n  /** The element: an article by default. */\n  render?: useRender.ComponentProps<'article'>['render'];\n}\n\nfunction Root({ selected, render, className, ...props }: CardRootProps) {\n  return useRender({\n    render,\n    defaultTagName: 'article',\n    props: { ...props, 'data-selected': selected ? '' : undefined, 'aria-current': selected ? 'true' : undefined, className: className ? `${ROOT} ${className}` : ROOT },\n  });\n}\n\nfunction Media({ className, alt = '', ...props }: React.ImgHTMLAttributes<HTMLImageElement>) {\n  return <img alt={alt} className={className ? `${MEDIA} ${className}` : MEDIA} {...props} />;\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /** Where the card goes: makes the whole card its link. */\n  href?: string;\n  /** Your own link element (a router's link), used with the stretched link's look. */\n  render?: React.ReactElement;\n  /** The heading level (3). */\n  level?: 2 | 3 | 4;\n}\n\nfunction Title({ href, render, level = 3, className, children, ...props }: CardTitleProps) {\n  const Tag = HEADINGS[level];\n  const link = render\n    ? React.cloneElement(render as React.ReactElement<{ className?: string; children?: React.ReactNode }>, { className: LINK, children })\n    : href != null ? <a href={href} className={LINK}>{children}</a> : children;\n  return <Tag className={className ? `${TITLE} ${className}` : TITLE} {...props}>{link}</Tag>;\n}\n\nfunction Description({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n  return <p className={className ? `${DESCRIPTION} ${className}` : DESCRIPTION} {...props} />;\n}\n\nfunction Footer({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={className ? `${FOOTER} ${className}` : FOOTER} {...props} />;\n}\n\nexport const Card = Object.assign(Root, { Media, Title, Description, Footer, Root });\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/card.md. SwiftUI: MetalCard in the MetalUI Swift package."
}