{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-header",
  "title": "Page header",
  "description": "The page's one h1 with an optional breadcrumb, meta line, lede and actions. Actions sit beside the title from sm up and wrap under it below; the lede is visually hidden on a phone and stays readable to assistive technology. A page header inside the dashboard shell replaces the shell's default.",
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme",
    "@waimakers/breadcrumb",
    "@waimakers/skeleton"
  ],
  "files": [
    {
      "path": "src/components/ui/page-header.tsx",
      "content": "import {\n  createContext,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Breadcrumb } from \"./breadcrumb\";\nimport { Skeleton } from \"./skeleton\";\n\ntype ClaimPageHeader = () => () => void;\n\nconst PageHeaderClaimContext = createContext<ClaimPageHeader | null>(null);\n\nfunction PageHeaderScope({ fallback, children }: { fallback: ReactNode; children: ReactNode }) {\n  const [claims, setClaims] = useState(0);\n  const claim = useCallback<ClaimPageHeader>(() => {\n    setClaims((count) => count + 1);\n    return () => {\n      setClaims((count) => count - 1);\n    };\n  }, []);\n  return (\n    <>\n      {claims === 0 && <PageHeaderClaimContext value={null}>{fallback}</PageHeaderClaimContext>}\n      <PageHeaderClaimContext value={claim}>{children}</PageHeaderClaimContext>\n    </>\n  );\n}\n\nfunction PageHeader({ className, ...props }: ComponentProps<\"header\">) {\n  const claim = useContext(PageHeaderClaimContext);\n  useLayoutEffect(() => claim?.(), [claim]);\n  return (\n    <header\n      data-slot=\"page-header\"\n      className={cn(\n        \"grid grid-cols-[minmax(0,1fr)] items-start gap-x-6 [grid-template-areas:'crumb'_'title'_'meta'_'lede'_'actions']\",\n        \"sm:grid-cols-[minmax(0,1fr)_auto] sm:[grid-template-areas:'crumb_crumb'_'title_actions'_'meta_actions'_'lede_actions']\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PageHeaderBreadcrumb({ className, ...props }: ComponentProps<typeof Breadcrumb>) {\n  return (\n    <Breadcrumb\n      data-slot=\"page-header-breadcrumb\"\n      className={cn(\"mb-2 min-w-0 [grid-area:crumb]\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PageHeaderTitle({ className, ...props }: ComponentProps<\"h1\">) {\n  return (\n    <h1\n      data-slot=\"page-header-title\"\n      className={cn(\n        \"min-w-0 font-display text-brand-h2 leading-brand-title font-bold tracking-brand-tight text-balance break-words [grid-area:title]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PageHeaderMeta({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"page-header-meta\"\n      className={cn(\n        \"mt-2 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted-foreground [grid-area:meta]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PageHeaderDescription({ className, ...props }: ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"page-header-description\"\n      className={cn(\n        \"mt-1 max-w-prose text-sm text-muted-foreground [grid-area:lede] max-sm:line-clamp-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PageHeaderActions({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"page-header-actions\"\n      className={cn(\n        \"mt-4 flex flex-wrap items-center gap-2 [grid-area:actions] sm:mt-0 sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SkeletonPageHeader({\n  breadcrumb = false,\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { breadcrumb?: boolean }) {\n  return (\n    <div\n      data-slot=\"page-header-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    >\n      {breadcrumb && <Skeleton className=\"mb-2 h-5 w-40\" />}\n      <Skeleton className=\"h-7 w-56 max-w-full\" />\n      <Skeleton className=\"mt-1 h-5 w-96 max-w-full\" />\n    </div>\n  );\n}\n\nexport {\n  PageHeader,\n  PageHeaderActions,\n  PageHeaderBreadcrumb,\n  PageHeaderDescription,\n  PageHeaderMeta,\n  PageHeaderScope,\n  PageHeaderTitle,\n  SkeletonPageHeader,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/page-header.tsx"
    }
  ],
  "type": "registry:ui"
}