{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section",
  "type": "registry:ui",
  "title": "Section",
  "description": "The outer wrapper of a section. It sets the element, the vertical spacing, and the link to the heading that names the section.",
  "categories": [
    "atom"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/ui/section.tsx",
      "type": "registry:ui",
      "target": "components/ui/section.tsx",
      "content": "/**\n * Section — the outer band every Facade section renders.\n *\n * Centralises the three things that are easy to get wrong and tedious to repeat:\n * the landmark element, the vertical rhythm token, and the `aria-labelledby`\n * link to the section's own heading.\n *\n * a11y: a `<section>` only becomes a landmark once it has an accessible name, so\n * this always pairs `aria-labelledby` with the id `SectionHeader` puts on the\n * heading. An unnamed band should be rendered `as=\"div\"` instead, which keeps it\n * out of the landmark list rather than adding a nameless region.\n *\n * Dependencies: react, @/lib/types, @/lib/utils.\n */\n\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\"\n\nimport type { SectionBaseProps } from \"@/lib/types\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface SectionProps\n  extends\n    Omit<ComponentPropsWithoutRef<\"section\">, \"children\">,\n    Pick<SectionBaseProps, \"as\" | \"spacing\"> {\n  /** Id of the heading that names this section. Omit only when `as=\"div\"`. */\n  labelledBy?: string\n  children?: ReactNode\n}\n\nconst spacings = {\n  none: \"\",\n  sm: \"py-section-sm\",\n  md: \"py-section\",\n  lg: \"py-section-lg\",\n} as const\n\nexport function Section({\n  as = \"section\",\n  spacing = \"md\",\n  labelledBy,\n  className,\n  children,\n  ...props\n}: SectionProps) {\n  const Component = as as ElementType\n  const nameable = as === \"section\" || as === \"article\" || as === \"aside\"\n\n  return (\n    <Component\n      aria-labelledby={nameable ? labelledBy : undefined}\n      className={cn(\"relative w-full\", spacings[spacing], className)}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Docs: https://facadeui.dev/components/section"
}