{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "section-header",
  "title": "Section Header",
  "description": "Section Header from the Get IT Done design system.",
  "dependencies": [
    "class-variance-authority@^0.7.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/section-header.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Figma: Section header 1214:38 (exported as PanelSectionHeader because SectionHeader is the marketing sections export) (Type Buttons | Button group | Search, Tabs, Breakpoint, Actions, Divider, Supporting text, Dropdown icon).\n// Header of a panel, card or inner column: title, supporting text, actions at the right, tabs row below, optional hairline.\nconst panelSectionHeaderTitleVariants = cva('m-0 min-w-0 text-text-default', {\n  variants: {\n    size: {\n      // Figma default: label/highlight 14/24 semibold.\n      sm: 'typography-label-highlight',\n      md: 'typography-ui-lg-semibold',\n    },\n  },\n  defaultVariants: { size: 'sm' },\n});\n\nexport interface PanelSectionHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof panelSectionHeaderTitleVariants> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  // Heading element for the title.\n  titleAs?: 'h2' | 'h3' | 'h4';\n  // Buttons, button group, search or a menu trigger at the right. Stacks below the title on mobile.\n  actions?: React.ReactNode;\n  // Tab list row below the title row, for example the library Tabs list.\n  tabs?: React.ReactNode;\n  // Hairline under the header.\n  divider?: boolean;\n}\n\nconst PanelSectionHeader = React.forwardRef<HTMLElement, PanelSectionHeaderProps>(\n  ({ className, size = 'sm', title, description, titleAs: Title = 'h2', actions, tabs, divider = false, ...props }, ref) => (\n    <header ref={ref} data-size={size} className={cn('flex w-full flex-col gap-5', className)} {...props}>\n      <div className=\"flex w-full flex-col gap-4 sm:flex-row sm:items-start\">\n        <div className=\"flex min-w-0 flex-1 flex-col justify-center gap-1 self-stretch\">\n          <Title className={panelSectionHeaderTitleVariants({ size })}>{title}</Title>\n          {description ? <p className=\"typography-text-small m-0 text-text-subtle\">{description}</p> : null}\n        </div>\n        {actions ? <div data-slot=\"actions\" className=\"flex shrink-0 flex-wrap items-center gap-3 max-sm:[&>*]:flex-1\">{actions}</div> : null}\n      </div>\n      {tabs ? <div data-slot=\"tabs\" className=\"w-full\">{tabs}</div> : null}\n      {divider ? <hr className=\"m-0 h-px w-full border-0 bg-border\" /> : null}\n    </header>\n  ),\n);\nPanelSectionHeader.displayName = 'PanelSectionHeader';\n\nexport { PanelSectionHeader, panelSectionHeaderTitleVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}