{
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "Card groups related content, actions, forms, or framed data into a clear surface.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0"
  ],
  "files": [
    {
      "path": "src/components/ui/card.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type React from \"react\";\nimport { surfaceClassNames } from \"@/components/ui/surface\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Card({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      surfaceClassNames.raised,\n      \"flex flex-col rounded-2xl text-card-foreground before:rounded-[inherit]\",\n      className,\n    ),\n    \"data-slot\": \"card\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrame({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      surfaceClassNames.raised,\n      \"flex flex-col rounded-2xl text-card-foreground [--clip-bottom:-1rem] [--clip-top:-1rem] before:rounded-[inherit] before:bg-muted/72 has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[inherit] *:not-last:data-[slot=card]:before:rounded-b-[inherit] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center font-semibold text-sm\", className),\n    \"data-slot\": \"card-frame-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"self-center text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-frame-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-frame-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFrameFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"px-6 py-4\", className),\n    \"data-slot\": \"card-frame-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n      className,\n    ),\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 function CardTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"font-semibold text-lg leading-none\", className),\n    \"data-slot\": \"card-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardDescription({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-muted-foreground text-sm\", className),\n    \"data-slot\": \"card-description\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end\",\n      className,\n    ),\n    \"data-slot\": \"card-action\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardPanel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0\",\n      className,\n    ),\n    \"data-slot\": \"card-panel\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function CardFooter({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4\",\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\nexport { CardPanel as CardContent };\n"
    }
  ],
  "categories": [
    "data-display"
  ],
  "docs": "# Card\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nCard groups related content, actions, forms, or framed data into a clear\nsurface. It is not a general page-layout primitive.\n\n## Import\n\n`import { Card, CardAction, CardContent, CardDescription, CardFooter, CardFrame, CardFrameAction, CardFrameDescription, CardFrameHeader, CardFrameTitle, CardHeader, CardPanel, CardTitle } from \"@/components/ui/card\";`\n\n## Public API\n\n- Compose `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`,\n  `CardPanel`, and `CardFooter` as needed.\n- `CardContent` is a compatibility alias for `CardPanel`; use\n  `CardPanel` in new code.\n- `CardFrame` and its slots support framed stacks and table-like content.\n- Adding `className=\"border-b\"` to `CardHeader` or\n  `className=\"border-t\"` to `CardFooter` switches the adjacent CardPanel to\n  full vertical padding for a visually separated section.\n- The root `render` prop may change the underlying semantic element.\n\n## Public Motion\n\n- Card is a static container with no mount or exit animation.\n- Interactive children use their own primitive motion; do not animate Card\n  locally.\n- Preserve native radius, clipping, surface, shadow, and slot classes.\n\n## Public Accessibility\n\n- Card is visual grouping and does not replace semantic lists, tables, forms,\n  headings, or landmarks.\n- Keep titles meaningful in their surrounding document structure.\n- Card actions remain real Button or link controls with visible focus.\n- If `render` changes the root element, retain semantics appropriate to the\n  content.\n\n## Public Agent Guidance\n\n- Use existing Card and CardFrame slots instead of wrapper primitives.\n- Use `CardPanel` in new code and treat `CardContent` only as a compatibility\n  alias.\n- Do not use Card as a generic layout box.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/data-display/card)\n\n- [Registry source](https://ui.siteplane.io/r/card.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/data-display/card",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}