{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section",
  "title": "Section",
  "description": "Semantic section with fluid vertical rhythm and an inner container.",
  "dependencies": [],
  "registryDependencies": [
    "@hjconsult/lib",
    "@hjconsult/container"
  ],
  "files": [
    {
      "path": "src/components/section/index.tsx",
      "content": "import type { ComponentPropsWithoutRef, Ref } from 'react'\nimport { cn } from '../../lib'\nimport { Container, type ContainerSize } from '../container'\n\nexport type SectionSpace = 'none' | 'sm' | 'md' | 'lg'\n\nconst sectionSpaces: Record<SectionSpace, string> = {\n  none: 'py-0',\n  sm: 'py-[var(--hj-space-section-sm)]',\n  md: 'py-[var(--hj-space-section-md)]',\n  lg: 'py-[var(--hj-space-section-lg)]',\n}\n\nexport interface SectionProps extends ComponentPropsWithoutRef<'section'> {\n  as?: 'section' | 'div' | 'article' | 'aside' | 'header' | 'footer'\n  /** Vertical rhythm from the fluid section scale. */\n  space?: SectionSpace\n  /** Full-bleed: no inner container, content spans the viewport (marquees, canvases). */\n  bleed?: boolean\n  /** Inner container width. `false` renders children directly. Ignored when `bleed`. */\n  container?: ContainerSize | false\n  /** Shorthand for `aria-labelledby`: the id of the heading that names this section. */\n  labelledBy?: string\n  ref?: Ref<HTMLElement>\n}\n\n/** Semantic page section with fluid vertical spacing and an inner container by default. */\nexport function Section({\n  as = 'section',\n  space = 'md',\n  bleed = false,\n  container = 'default',\n  labelledBy,\n  className,\n  children,\n  ...props\n}: SectionProps) {\n  const Tag = as as 'section'\n  const useContainer = !bleed && container !== false\n  return (\n    <Tag\n      aria-labelledby={labelledBy}\n      className={cn('relative w-full', sectionSpaces[space], bleed && 'overflow-x-clip', className)}\n      {...props}\n    >\n      {useContainer ? <Container size={container}>{children}</Container> : children}\n    </Tag>\n  )\n}\n",
      "type": "registry:ui",
      "target": "hj/components/section/index.tsx"
    }
  ],
  "cssVars": {},
  "type": "registry:ui"
}