{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section",
  "dependencies": [],
  "registryDependencies": [
    "@seamless/utils"
  ],
  "files": [
    {
      "path": "src/components/ui/section.tsx",
      "content": "import type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * NOTE: an inner section of a detail surface — a bordered box with an uppercase label, a body that\n * scrolls on its own, and a show-more control. Lighter than a Card by design: a Card is a surface,\n * this is a region WITHIN one, and several sit side by side without competing.\n */\nfunction Section({ className, ...props }: React.ComponentProps<\"section\">) {\n  return (\n    <section\n      data-slot=\"section\"\n      className={cn(\n        \"flex min-h-0 flex-col rounded-sm border border-border-soft px-3.5 py-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** NOTE: `ml-auto` on a trailing child parks it at the end of the label row (a meter, an action). */\nfunction SectionHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"section-header\"\n      className={cn(\"mb-1 flex flex-none items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SectionTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"section-title\"\n      className={cn(\n        \"text-[10px] font-semibold tracking-[0.07em] text-muted-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * CONSTRAINT: the body owns the scroll, not the sheet around it — `overscroll-contain` keeps a\n * scroll that runs out here from tearing the surface behind it.\n */\nfunction SectionBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"section-body\"\n      className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain\", className)}\n      {...props}\n    />\n  )\n}\n\n/** NOTE: the one row treatment every section shares — the hairline is the separator, not a divider. */\nfunction SectionRow({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"section-row\"\n      className={cn(\n        \"flex items-center gap-2.5 border-b border-border-soft py-2 text-xs last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** NOTE: the reading a row trails off with — a status, a timestamp, a count. Never the row's subject. */\nfunction SectionMeta({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"section-meta\"\n      className={cn(\n        \"ml-auto flex-none text-[11px] font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SectionEmpty({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"section-empty\"\n      className={cn(\"py-4 text-center text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SectionMore({ className, ...props }: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"section-more\"\n      className={cn(\n        \"flex-none self-start rounded-sm pt-1.5 text-[11.5px] font-medium text-muted-foreground outline-none hover:text-primary focus-visible:ring-3 focus-visible:ring-ring/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** NOTE: a status dot for a row whose meaning is carried by colour plus its adjacent label. */\nfunction SectionDot({\n  className,\n  tone = \"neutral\",\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: \"ok\" | \"warn\" | \"bad\" | \"neutral\" | \"info\"\n}) {\n  return (\n    <span\n      data-slot=\"section-dot\"\n      data-tone={tone}\n      aria-hidden\n      className={cn(\n        \"size-1.5 flex-none rounded-full\",\n        tone === \"ok\" && \"bg-primary\",\n        tone === \"warn\" && \"bg-warn\",\n        tone === \"bad\" && \"bg-destructive\",\n        tone === \"info\" && \"bg-status-active\",\n        tone === \"neutral\" && \"bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Section,\n  SectionBody,\n  SectionDot,\n  SectionEmpty,\n  SectionHeader,\n  SectionMeta,\n  SectionMore,\n  SectionRow,\n  SectionTitle,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}