{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "title": "Card",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/recipes.json",
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/card.tsx",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { selectionFocus } from \"@/lib/recipes\";\n\nexport interface CardProps extends useRender.ComponentProps<\"div\"> {\n  /** Visual treatment for the content surface. */\n  variant?: \"surface\" | \"outlined\" | \"elevated\";\n  /** Adds visual states for cards rendered as a link or button. */\n  actionable?: boolean;\n  /** Marks the card visually selected. Consumers own selection semantics. */\n  selected?: boolean;\n}\n\n/** Composable content surface. */\nexport function Card({\n  className,\n  variant = \"outlined\",\n  actionable,\n  selected,\n  render,\n  ...props\n}: CardProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative rounded-[var(--radius-12)] text-ink\",\n      variant === \"surface\" && \"bg-layer-1\",\n      variant === \"outlined\" && \"border border-hairline-soft bg-layer-1\",\n      variant === \"elevated\" &&\n        \"bg-layer-1 shadow-card\",\n      actionable && [\n        \"hover:border-hairline-tertiary active:border-hairline-tertiary\",\n        \"aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n        selectionFocus,\n      ],\n      selected && \"bg-fill-2\",\n      \"transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n    \"data-selected\": selected || undefined,\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport type CardHeaderProps = useRender.ComponentProps<\"div\">;\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: CardHeaderProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"flex items-start justify-between gap-4 p-4 pb-0\", className),\n    \"data-slot\": \"card-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport type CardTitleProps = useRender.ComponentProps<\"h3\">;\n\nexport function CardTitle({\n  className,\n  render,\n  ...props\n}: CardTitleProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-regular font-medium text-ink\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"h3\",\n    props: mergeProps<\"h3\">(defaultProps, props),\n    render,\n  });\n}\n\nexport type CardDescriptionProps = useRender.ComponentProps<\"p\">;\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: CardDescriptionProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"mt-1 text-small text-ink-muted\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"p\",\n    props: mergeProps<\"p\">(defaultProps, props),\n    render,\n  });\n}\n\nexport type CardContentProps = useRender.ComponentProps<\"div\">;\n\nexport function CardContent({\n  className,\n  render,\n  ...props\n}: CardContentProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"p-4\", className),\n    \"data-slot\": \"card-content\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport interface CardFooterProps extends useRender.ComponentProps<\"div\"> {\n  divided?: boolean;\n}\n\nexport function CardFooter({\n  className,\n  divided = false,\n  render,\n  ...props\n}: CardFooterProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center gap-2 px-4 py-3\",\n      divided && \"border-t border-hairline-soft\",\n      className,\n    ),\n    \"data-slot\": \"card-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n",
      "type": "registry:ui",
      "target": "components/ui/card.tsx"
    }
  ],
  "type": "registry:ui"
}