{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "The base surface primitive — header, content, and footer slots — that most composed cards build on.",
  "dependencies": [
    "@saasflare/ui",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/card.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Saasflare Card — surface container with optional hover lift.\n * @module packages/ui/components/ui/card\n * @layer core\n *\n * Self-contained implementation. Does NOT import from ui/.\n * Hover lift animation respects reduced-motion preference.\n *\n * @example\n * import { Card, CardHeader, CardTitle, CardContent } from \"@saasflare/ui\";\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Settings</CardTitle>\n *   </CardHeader>\n *   <CardContent>...</CardContent>\n * </Card>\n */\n\nimport * as React from \"react\"\nimport { m } from \"motion/react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useSaasflareMotion, springGentle } from \"@saasflare/ui\"\n\n/** Motion event overrides that conflict with React HTML events */\ntype MotionConflicts = \"onDrag\" | \"onDragStart\" | \"onDragEnd\" | \"onAnimationStart\" | \"onAnimationEnd\"\n\n/**\n * Props for {@link Card}.\n *\n * Extends the native div props with {@link SaasflareComponentProps}, so\n * `surface`, `radius`, `animated`, and `iconWeight` can be supplied\n * per-instance or inherited from <SaasflareProvider>.\n */\ninterface CardProps\n  extends Omit<React.ComponentProps<\"div\">, MotionConflicts | keyof SaasflareComponentProps>,\n    SaasflareComponentProps {}\n\n/**\n * Card container with subtle hover-lift animation.\n *\n * @component\n * @layer core\n *\n * @example\n * <Card className=\"max-w-sm\">\n *   <CardHeader><CardTitle>Plan</CardTitle></CardHeader>\n *   <CardContent>Content here</CardContent>\n * </Card>\n */\nfunction Card({ className, surface, radius, animated, iconWeight, ...props }: CardProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const motion = useSaasflareMotion(sf.animated, springGentle)\n\n  return (\n    <m.div\n      {...props}\n      data-slot=\"card\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      whileHover={\n        motion.disabled\n          ? undefined\n          : { y: -2, boxShadow: \"0 8px 30px color-mix(in oklab, var(--foreground) 8%, transparent)\" }\n      }\n      transition={motion.transition}\n      className={cn(\n        \"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm transition-[border-color] duration-300 hover:border-primary/20\",\n        className\n      )}\n    />\n  )\n}\n\n/**\n * Card header with grid layout supporting an optional action slot.\n *\n * @component\n * @layer core\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-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Card title text.\n *\n * @component\n * @layer core\n */\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Card description / subtitle text.\n *\n * @component\n * @layer core\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\n/**\n * Card action slot — positioned top-right in the header.\n *\n * @component\n * @layer core\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\n/**\n * Card main content area.\n *\n * @component\n * @layer core\n */\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Card footer — bottom-aligned actions.\n *\n * @component\n * @layer core\n */\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n  type CardProps,\n}\n",
      "target": "components/ui/card.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/card.json"
  }
}