{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section",
  "title": "Section",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/section.tsx",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SectionProps extends useRender.ComponentProps<\"section\"> {\n  /** Optional card surface. Plain remains structural only. */\n  variant?: \"plain\" | \"card\";\n  /** Draw separators between direct children. */\n  dividers?: boolean;\n}\n\n/** Structural surface with optional header, content, and footer slots. */\nexport function Section({\n  className,\n  variant = \"plain\",\n  dividers = false,\n  render,\n  ...props\n}: SectionProps): React.ReactElement {\n  const defaultProps = {\n    className: cn(\n      \"flex flex-col text-ink\",\n      variant === \"card\" && \"rounded-[var(--radius-12)] bg-layer-1\",\n      dividers && \"[&>*+*]:border-t [&>*+*]:border-hairline-soft\",\n      className,\n    ),\n    \"data-slot\": \"section\",\n  };\n\n  return useRender({\n    defaultTagName: \"section\",\n    props: mergeProps<\"section\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SectionHeader({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className,\n    \"data-slot\": \"section-header\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SectionTitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"h3\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-title3 text-ink\", className),\n    \"data-slot\": \"section-title\",\n  };\n\n  return useRender({\n    defaultTagName: \"h3\",\n    props: mergeProps<\"h3\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SectionSubtitle({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"p\">): React.ReactElement {\n  const defaultProps = {\n    className: cn(\"text-small text-ink-muted\", className),\n    \"data-slot\": \"section-subtitle\",\n  };\n\n  return useRender({\n    defaultTagName: \"p\",\n    props: mergeProps<\"p\">(defaultProps, props),\n    render,\n  });\n}\n\nexport function SectionContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n  const defaultProps = {\n    className,\n    \"data-slot\": \"section-content\",\n  };\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(defaultProps, props),\n    render,\n  });\n}\n\nexport type SectionFooterProps = useRender.ComponentProps<\"footer\">;\n\nexport function SectionFooter({\n  className,\n  render,\n  ...props\n}: SectionFooterProps): React.ReactElement {\n  const defaultProps = {\n    className,\n    \"data-slot\": \"section-footer\",\n  };\n\n  return useRender({\n    defaultTagName: \"footer\",\n    props: mergeProps<\"footer\">(defaultProps, props),\n    render,\n  });\n}\n",
      "type": "registry:ui",
      "target": "components/ui/section.tsx"
    }
  ],
  "type": "registry:ui"
}