{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section",
  "type": "registry:ui",
  "title": "Section",
  "description": "@interlace/ui — section primitive (shadcn-compatible).",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "theme",
    "container"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/section.tsx",
      "target": "components/ui/section.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Container, type ContainerProps } from '@/components/ui/container';\n\n/**\n * `<Section>` — vertical rhythm + tone + dividers + container, from\n * LAYOUT_PHILOSOPHY.md §7-8.\n *\n * A page composes `<Section>` × N. The page file describes what's *in* each\n * section, never what each section's wrapper looks like. Open-coded\n * `<section className=\"container mx-auto px-4 py-24\">` is forbidden in app\n * code (philosophy §1, §7).\n *\n * Props own:\n *   - `spacing`  → vertical padding (token from the §3 spacing scale).\n *   - `tone`     → background. `inset` adds the muted card-like tone.\n *   - `divider`  → top/bottom borders at section transitions.\n *   - `container`→ which `<Container>` size wraps the children.\n *   - `as`       → semantic element (`section`, `header`, `aside`, ...).\n */\n\nconst sectionVariants = cva('relative', {\n  variants: {\n    spacing: {\n      // LAYOUT_PHILOSOPHY §3/§5: mobile section vertical floor = `py-10`\n      // (lg token); desktop section vertical floor = `py-16` (xl token).\n      // Every spacing variant must clear those floors at the matching\n      // breakpoint, or it ships a section that visually looks \"padless\".\n      tight: 'py-12 md:py-16 lg:py-20',\n      comfortable: 'py-16 md:py-20 lg:py-24',\n      spacious: 'py-20 md:py-24 lg:py-32',\n      none: '',\n    },\n    tone: {\n      default: '',\n      muted: 'bg-fd-card/30',\n      inset: 'bg-fd-card/50 backdrop-blur-sm',\n    },\n    divider: {\n      none: '',\n      top: 'border-t border-fd-border',\n      bottom: 'border-b border-fd-border',\n      both: 'border-y border-fd-border',\n    },\n  },\n  defaultVariants: {\n    spacing: 'comfortable',\n    tone: 'default',\n    divider: 'none',\n  },\n});\n\ninterface SectionProps\n  extends Omit<React.ComponentProps<'section'>, 'children'>,\n    VariantProps<typeof sectionVariants> {\n  /** Container size that wraps the section's children. Defaults to `content`. */\n  container?: ContainerProps['size'];\n  /** Render as a different element (e.g. `header`, `footer`). Default `section`. */\n  as?: 'section' | 'header' | 'footer' | 'aside' | 'div';\n  children?: React.ReactNode;\n}\n\nfunction Section({\n  className,\n  spacing,\n  tone,\n  divider,\n  container = 'content',\n  as = 'section',\n  children,\n  ...props\n}: SectionProps) {\n  const Tag = as as React.ElementType;\n  return (\n    <Tag\n      data-slot=\"section\"\n      data-spacing={spacing ?? undefined}\n      data-tone={tone ?? undefined}\n      data-divider={divider ?? undefined}\n      className={cn(sectionVariants({ spacing, tone, divider }), className)}\n      {...props}\n    >\n      <Container size={container}>{children}</Container>\n    </Tag>\n  );\n}\n\nexport { Section, sectionVariants };\nexport type { SectionProps };\n"
    }
  ]
}