{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section",
  "title": "Section",
  "description": "A region named by its own h2, with an optional description and actions beside the title from sm up.",
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme"
  ],
  "files": [
    {
      "path": "src/components/ui/section.tsx",
      "content": "import { createContext, useContext, useId, type ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst SectionTitleContext = createContext<string | undefined>(undefined);\n\nfunction Section({ className, ...props }: ComponentProps<\"section\">) {\n  const titleId = useId();\n  return (\n    <SectionTitleContext value={titleId}>\n      <section\n        data-slot=\"section\"\n        aria-labelledby={titleId}\n        className={cn(\"flex flex-col gap-4\", className)}\n        {...props}\n      />\n    </SectionTitleContext>\n  );\n}\n\nfunction SectionHeader({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"section-header\"\n      className={cn(\n        \"grid grid-cols-[minmax(0,1fr)] items-start gap-x-6 [grid-template-areas:'title'_'lede'_'actions']\",\n        \"sm:grid-cols-[minmax(0,1fr)_auto] sm:[grid-template-areas:'title_actions'_'lede_actions']\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SectionTitle({ className, ...props }: ComponentProps<\"h2\">) {\n  const titleId = useContext(SectionTitleContext);\n  return (\n    <h2\n      data-slot=\"section-title\"\n      id={titleId}\n      className={cn(\n        \"min-w-0 font-display text-brand-h3 leading-brand-title font-bold tracking-brand-tight text-balance break-words [grid-area:title]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SectionDescription({ className, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"section-description\"\n      className={cn(\"mt-1 max-w-prose text-sm text-muted-foreground [grid-area:lede]\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SectionActions({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"section-actions\"\n      className={cn(\n        \"mt-3 flex flex-wrap items-center gap-2 [grid-area:actions] sm:mt-0 sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Section, SectionActions, SectionDescription, SectionHeader, SectionTitle };\n",
      "type": "registry:ui",
      "target": "components/ui/section.tsx"
    }
  ],
  "type": "registry:ui"
}