{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section-header",
  "title": "Section Header",
  "description": "In-page header above a table, card body or settings group, with a badge, actions and a tabs slot.",
  "registryDependencies": [
    "@pestoui/style",
    "@pestoui/utils"
  ],
  "files": [
    {
      "path": "pestoui/components/section-header.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\n/* Lighter in-page header — sits above a table, a card body, or a settings\n   group. Badge rides beside the title; the tabs slot underneath scrolls\n   sideways on narrow screens without clipping the pills' focus rings.\n   Stays a <div>, not a <header>: dropped into a plain container a <header>\n   would claim a second banner landmark on the page. */\ntype SectionHeaderProps = Omit<\n  React.ComponentProps<\"div\">,\n  \"title\" | \"children\"\n> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** Badge slot — sits inline after the title. */\n  badge?: React.ReactNode\n  actions?: React.ReactNode\n  /** Tabs slot — a pill Tabs/TabsList row rendered under the header. */\n  tabs?: React.ReactNode\n  /** Hairline rule below the block. */\n  border?: boolean\n}\n\nfunction SectionHeader({\n  title,\n  description,\n  badge,\n  actions,\n  tabs,\n  border = false,\n  className,\n  ...props\n}: SectionHeaderProps) {\n  return (\n    <div\n      data-slot=\"section-header\"\n      className={cn(\n        \"w-full\",\n        border && \"border-b border-border pb-4\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-6\">\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex flex-wrap items-center gap-2\">\n            <h2\n              data-slot=\"section-header-title\"\n              className=\"text-[1.1875rem] leading-snug font-semibold tracking-title text-foreground\"\n            >\n              {title}\n            </h2>\n            {badge ? (\n              <span\n                data-slot=\"section-header-badge\"\n                className=\"flex shrink-0 items-center\"\n              >\n                {badge}\n              </span>\n            ) : null}\n          </div>\n          {description ? (\n            <p\n              data-slot=\"section-header-description\"\n              className=\"mt-1 text-body leading-normal text-pretty text-muted-foreground\"\n            >\n              {description}\n            </p>\n          ) : null}\n        </div>\n\n        {actions ? (\n          <div\n            data-slot=\"section-header-actions\"\n            className=\"flex flex-wrap items-center gap-2 sm:shrink-0 sm:justify-end\"\n          >\n            {actions}\n          </div>\n        ) : null}\n      </div>\n\n      {tabs ? (\n        <div\n          data-slot=\"section-header-tabs\"\n          /* -m-1/p-1 is net zero space — it just keeps the focus ring of the\n             first/last pill inside the scroll box instead of clipped. */\n          className=\"-m-1 mt-3 overflow-x-auto p-1 scrollbar-thin\"\n        >\n          {tabs}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n\nexport { SectionHeader }\nexport type { SectionHeaderProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}