{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section-card",
  "type": "registry:ui",
  "title": "Section Card",
  "description": "Composable section/landing card with header, content, and footer slots.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/section-card.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Saasflare SectionCard — titled card for settings and dashboard panels.\n * @module packages/ui/components/ui/section-card\n * @layer core\n *\n * A card with a built-in header section (title + description)\n * and optional footer. Used for settings panels, dashboard sections,\n * and any grouped content that needs a labeled container.\n *\n * @example\n * import { SectionCard } from \"@saasflare/ui\";\n *\n * <SectionCard title=\"General\" description=\"Basic project settings\">\n *   <Input label=\"Project name\" />\n * </SectionCard>\n */\n\nimport * as React from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Props for the SectionCard component */\ninterface SectionCardProps extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>, SaasflareComponentProps {\n  /** Section title */\n  title: string\n  /** Optional description below the title */\n  description?: string\n  /** Optional footer content (save button, etc.) */\n  footer?: React.ReactNode\n  /** Optional action in the header (edit button, etc.) */\n  headerAction?: React.ReactNode\n}\n\n/**\n * Titled card section for settings panels and dashboard areas.\n *\n * @component\n * @layer core\n *\n * @param {string} title - Section title\n * @param {string} description - Optional description\n * @param {React.ReactNode} footer - Optional footer area\n * @param {React.ReactNode} headerAction - Optional action in header\n *\n * @example\n * <SectionCard\n *   title=\"Danger Zone\"\n *   description=\"Irreversible actions for your project.\"\n *   footer={<Button intent=\"danger\">Delete Project</Button>}\n * >\n *   <p>Once deleted, this project cannot be recovered.</p>\n * </SectionCard>\n */\nfunction SectionCard({\n  title,\n  description,\n  footer,\n  headerAction,\n  className,\n  children,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: SectionCardProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      {...props}\n      data-slot=\"section-card\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        \"rounded-xl border bg-card text-card-foreground shadow-sm\",\n        className\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-4 border-b px-6 py-4\">\n        <div className=\"space-y-1\">\n          <h3 className=\"text-base font-semibold leading-none\">{title}</h3>\n          {description && (\n            <p className=\"text-sm text-muted-foreground\">{description}</p>\n          )}\n        </div>\n        {headerAction && (\n          <div className=\"shrink-0\">{headerAction}</div>\n        )}\n      </div>\n      <div data-slot=\"section-card-content\" className=\"px-6 py-4\">\n        {children}\n      </div>\n      {footer && (\n        <div\n          data-slot=\"section-card-footer\"\n          className=\"flex items-center justify-end gap-2 border-t bg-muted/30 px-6 py-3\"\n        >\n          {footer}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SectionCard, type SectionCardProps }\n",
      "target": "components/ui/section-card.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/section-card.json"
  }
}