{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-header",
  "type": "registry:ui",
  "title": "Page Header",
  "description": "Page title, description and right-aligned action slot with an optional divider.",
  "dependencies": [
    "@mantine/core@^9"
  ],
  "files": [
    {
      "path": "registry/ui/page-header.tsx",
      "type": "registry:ui",
      "content": "import {\n  type BoxProps,\n  Divider,\n  type ElementProps,\n  type Factory,\n  factory,\n  Group,\n  Stack,\n  type StylesApiProps,\n  Text,\n  Title,\n  useProps,\n  useStyles,\n} from \"@mantine/core\";\nimport type { ReactNode } from \"react\";\n\nimport classes from \"./page-header.module.css\";\n\nexport type PageHeaderStylesNames =\n  | \"root\"\n  | \"header\"\n  | \"titleWrapper\"\n  | \"title\"\n  | \"description\"\n  | \"actions\"\n  | \"divider\";\n\nexport interface PageHeaderProps\n  extends BoxProps,\n    StylesApiProps<PageHeaderFactory>,\n    ElementProps<\"div\", \"title\"> {\n  title: string;\n  description?: ReactNode;\n  actions?: ReactNode;\n  withDivider?: boolean;\n}\n\nexport type PageHeaderFactory = Factory<{\n  props: PageHeaderProps;\n  ref: HTMLDivElement;\n  stylesNames: PageHeaderStylesNames;\n}>;\n\nexport const PageHeader = factory<PageHeaderFactory>((_props) => {\n  const props = useProps(\"PageHeader\", null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    ref,\n    title,\n    description,\n    actions,\n    withDivider = true,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PageHeaderFactory>({\n    name: \"PageHeader\",\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n  });\n\n  return (\n    <Stack ref={ref} gap=\"sm\" mb=\"lg\" unstyled={unstyled} {...getStyles(\"root\")} {...others}>\n      <Group justify=\"space-between\" align=\"flex-start\" wrap=\"nowrap\" {...getStyles(\"header\")}>\n        <Stack gap={4} {...getStyles(\"titleWrapper\")}>\n          <Title order={2} {...getStyles(\"title\")}>\n            {title}\n          </Title>\n          {description && (\n            <Text c=\"dimmed\" size=\"sm\" {...getStyles(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </Stack>\n        {actions && (\n          <Group gap=\"xs\" {...getStyles(\"actions\")}>\n            {actions}\n          </Group>\n        )}\n      </Group>\n      {withDivider && <Divider {...getStyles(\"divider\")} />}\n    </Stack>\n  );\n});\n\nPageHeader.classes = classes;\nPageHeader.displayName = \"PageHeader\";\n\nexport namespace PageHeader {\n  export type Props = PageHeaderProps;\n  export type StylesNames = PageHeaderStylesNames;\n  export type Factory = PageHeaderFactory;\n}\n"
    },
    {
      "path": "registry/ui/page-header.module.css",
      "type": "registry:file",
      "target": "@ui/page-header.module.css",
      "content": "/*\n * PageHeader's Styles API selectors. None of them carry default visual\n * styling of their own — every layout property (gap, spacing, alignment,\n * wrap) is set via Mantine style props directly on each element, exactly as\n * it was before this file existed. Each rule below only declares an unused\n * custom property (no visual effect) so the selector has a real class in\n * this stylesheet to anchor to; the classes exist purely as override\n * targets for instance classNames/styles and theme .extend.\n */\n.root {\n  --page-header-root: 1;\n}\n\n.header {\n  --page-header-header: 1;\n}\n\n.titleWrapper {\n  --page-header-title-wrapper: 1;\n}\n\n.title {\n  --page-header-title: 1;\n}\n\n.description {\n  --page-header-description: 1;\n}\n\n.actions {\n  --page-header-actions: 1;\n}\n\n.divider {\n  --page-header-divider: 1;\n}\n"
    }
  ],
  "meta": {
    "mantine": {
      "requires": ">=9",
      "stylesApi": {
        "PageHeader": [
          "root",
          "header",
          "titleWrapper",
          "title",
          "description",
          "actions",
          "divider"
        ]
      },
      "props": {
        "PageHeader": [
          {
            "name": "title",
            "type": "string",
            "required": true,
            "description": "Renders as the header's order-2 title text."
          },
          {
            "name": "description",
            "type": "ReactNode",
            "required": false,
            "description": "Renders dimmed helper text beneath the title when provided."
          },
          {
            "name": "actions",
            "type": "ReactNode",
            "required": false,
            "description": "Renders action controls in a trailing group aligned opposite the title."
          },
          {
            "name": "withDivider",
            "type": "boolean",
            "required": false,
            "default": "true",
            "description": "Controls whether a divider is rendered beneath the header content."
          },
          {
            "name": "...others",
            "type": "BoxProps & ElementProps<\"div\", \"title\">",
            "description": "All other props are forwarded to the root <Stack>, so passthrough props can override its hardcoded gap/mb. Mantine Styles API props (classNames, styles, unstyled) are also accepted."
          }
        ]
      },
      "usage": {
        "path": "registry/ui/page-header.usage.tsx",
        "content": "import { Button } from \"@mantine/core\";\nimport { PageHeader } from \"@/components/ui/page-header\";\n\nexport function ProjectSettingsHeader() {\n  return (\n    <PageHeader\n      title=\"Project settings\"\n      description=\"Manage members, billing, and integrations for this project.\"\n      actions={\n        <Button variant=\"default\" onClick={() => console.log(\"invite clicked\")}>\n          Invite member\n        </Button>\n      }\n    />\n  );\n}\n"
      }
    }
  }
}