{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section-group",
  "type": "registry:component",
  "title": "Section group",
  "description": "Titled page section, optionally a responsive grid.",
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/patterns/section-group.tsx",
      "type": "registry:component",
      "content": "import { useId, type ComponentProps, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst columnClass = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 sm:grid-cols-2\",\n  3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n  4: \"grid-cols-1 sm:grid-cols-2 xl:grid-cols-4\",\n} as const;\n\ninterface SectionGroupProps extends Omit<ComponentProps<\"section\">, \"title\"> {\n  title: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  /** Lay children out as a responsive grid (stat cards, charts). Omit for a plain stack. */\n  columns?: 1 | 2 | 3 | 4;\n  headingLevel?: 2 | 3;\n}\n\n/** Titled section of a page holding related cards, charts or tables. */\nfunction SectionGroup({\n  title,\n  description,\n  actions,\n  columns,\n  headingLevel = 2,\n  className,\n  children,\n  ...props\n}: SectionGroupProps) {\n  const headingId = useId();\n  const Heading = `h${headingLevel}` as const;\n  return (\n    <section\n      data-slot=\"section-group\"\n      aria-labelledby={headingId}\n      className={cn(\"flex flex-col gap-3\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-end justify-between gap-3\">\n        <div className=\"grid min-w-0 gap-0.5\">\n          <Heading id={headingId} className=\"text-sm font-medium text-foreground\">\n            {title}\n          </Heading>\n          {description ? <p className=\"text-sm text-muted-foreground\">{description}</p> : null}\n        </div>\n        {actions ? <div className=\"flex items-center gap-2\">{actions}</div> : null}\n      </div>\n      {columns ? <div className={cn(\"grid gap-3\", columnClass[columns])}>{children}</div> : children}\n    </section>\n  );\n}\n\nexport { SectionGroup };\nexport type { SectionGroupProps };\n"
    }
  ]
}