{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-layout",
  "title": "Status Layout",
  "description": "Layout primitives for composing status displays (Status, StatusHeader, StatusTitle, etc.)",
  "registryDependencies": [
    "https://openstatus.dev/r/status-icon.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/status-layout.tsx",
      "content": "import { StatusIcon as UnifiedStatusIcon } from \"@/components/blocks/status-icon\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Status - Root container component for status page layouts\n *\n * This component serves as the primary container for status page content, providing\n * consistent spacing and establishing the status type context via data attributes.\n * The status type controls the visual appearance of child StatusIcon components\n * through CSS data attribute selectors (group-data-[variant=...]).\n *\n * The component acts as both a CSS group and peer for advanced selector patterns,\n * enabling child components to style themselves based on the parent's status.\n *\n * @param variant - The status type that determines the overall status indicator appearance\n *\n * @example\n * ```tsx\n * <Status variant=\"success\">\n *   <StatusHeader>\n *     <StatusBrand src=\"/logo.png\" alt=\"Company\" />\n *     <StatusTitle>System Status</StatusTitle>\n *   </StatusHeader>\n *   <StatusContent>\n *     {// Status components here}\n *   </StatusContent>\n * </Status>\n * ```\n *\n * @see StatusHeader - For header content with brand and title\n * @see StatusContent - For main status content area\n * @see StatusIcon - For status indicator icons that respond to variant\n */\nexport function Status({\n  children,\n  className,\n  variant = \"success\",\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  variant?: \"success\" | \"degraded\" | \"error\" | \"info\";\n}) {\n  return (\n    <div\n      data-variant={variant}\n      data-slot=\"status\"\n      className={cn(\"group peer flex flex-col gap-8\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatus.displayName = \"Status\";\n\n/**\n * StatusBrand - Brand logo/image component for status page headers\n *\n * Displays a brand image (typically a company logo) with consistent sizing.\n * The default size is 32x32px (size-8), suitable for header placement.\n *\n * @param src - Image source URL\n * @param alt - Alternative text for the image (required for accessibility)\n *\n * @example\n * ```tsx\n * <StatusHeader>\n *   <StatusBrand src=\"/logo.png\" alt=\"Company Name\" />\n *   <StatusTitle>System Status</StatusTitle>\n * </StatusHeader>\n * ```\n *\n * @see StatusHeader - For positioning brand within header layout\n */\nexport function StatusBrand({\n  src,\n  alt,\n  className,\n  ...props\n}: React.ComponentProps<\"img\">) {\n  return (\n    <img src={src} alt={alt} className={cn(\"size-8\", className)} {...props} />\n  );\n}\nStatusBrand.displayName = \"StatusBrand\";\n\n/**\n * StatusHeader - Header container for status page branding and title\n *\n * Provides a container-query context (@container/status-header) for responsive\n * header layouts. Typically contains StatusBrand, StatusTitle, and StatusDescription\n * components arranged in a flexible layout.\n *\n * The container query context enables child components to respond to the header's\n * width rather than the viewport width, allowing for more modular layouts.\n *\n * @example\n * ```tsx\n * <StatusHeader>\n *   <div className=\"flex items-center gap-4\">\n *     <StatusBrand src=\"/logo.png\" alt=\"Company\" />\n *     <div>\n *       <StatusTitle>System Status</StatusTitle>\n *       <StatusDescription>Current system health</StatusDescription>\n *     </div>\n *   </div>\n * </StatusHeader>\n * ```\n *\n * @see StatusBrand - For brand logo placement\n * @see StatusTitle - For page title\n * @see StatusDescription - For subtitle text\n */\nexport function StatusHeader({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-header\"\n      className={cn(\"@container/status-header\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusHeader.displayName = \"StatusHeader\";\n\n/**\n * StatusTitle - Primary heading for status page\n *\n * Displays the main title with consistent typography (semibold, large text, tight leading).\n * Typically used within StatusHeader to show the page or organization name.\n *\n * The component uses semantic HTML div rather than h1 to allow flexible heading\n * levels based on page context. Apply appropriate heading tags as needed.\n *\n * @example\n * ```tsx\n * <StatusHeader>\n *   <StatusTitle>Acme Inc. Status</StatusTitle>\n *   <StatusDescription>Live system status and uptime</StatusDescription>\n * </StatusHeader>\n * ```\n *\n * @see StatusDescription - For subtitle text below the title\n */\nexport function StatusTitle({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-title\"\n      className={cn(\n        \"text-foreground text-lg leading-none font-semibold\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusTitle.displayName = \"StatusTitle\";\n\n/**\n * StatusDescription - Descriptive subtitle or secondary text\n *\n * Displays muted secondary text, typically used for subtitles, additional context,\n * or descriptions. The text color is set to muted foreground for visual hierarchy.\n *\n * @example\n * ```tsx\n * <StatusHeader>\n *   <StatusTitle>System Status</StatusTitle>\n *   <StatusDescription>\n *     Real-time monitoring of all services\n *   </StatusDescription>\n * </StatusHeader>\n * ```\n *\n * @see StatusTitle - For primary heading text\n */\nexport function StatusDescription({\n  children,\n  className,\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-description\"\n      className={cn(\"text-muted-foreground\", className)}\n    >\n      {children}\n    </div>\n  );\n}\nStatusDescription.displayName = \"StatusDescription\";\n\n/**\n * StatusContent - Main content area for status page components\n *\n * Provides a vertical flex container with consistent spacing (gap-3) for status\n * page content. This is typically used to stack StatusComponent, StatusBanner,\n * or other status-related components.\n *\n * @example\n * ```tsx\n * <Status variant=\"success\">\n *   <StatusHeader>\n *     <StatusTitle>System Status</StatusTitle>\n *   </StatusHeader>\n *   <StatusContent>\n *     <StatusComponent variant=\"success\">API</StatusComponent>\n *     <StatusComponent variant=\"success\">Database</StatusComponent>\n *     <StatusComponent variant=\"degraded\">CDN</StatusComponent>\n *   </StatusContent>\n * </Status>\n * ```\n *\n * @see Status - For root container\n * @see StatusComponent - For individual service status displays\n */\nexport function StatusContent({\n  children,\n  className,\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-content\"\n      className={cn(\"flex flex-col gap-3\", className)}\n    >\n      {children}\n    </div>\n  );\n}\nStatusContent.displayName = \"StatusContent\";\n\n/**\n * StatusIcon - Status indicator icon wrapper for Status component context\n *\n * This component wraps the unified StatusIcon with variant=\"default\", configuring\n * it to respond to the parent Status component's data-variant attribute.\n * The displayed icon automatically changes based on the status type:\n * - success: CheckIcon\n * - degraded: TriangleAlertIcon\n * - error: AlertCircleIcon\n * - info: WrenchIcon\n *\n * @example\n * ```tsx\n * <Status variant=\"success\">\n *   <StatusHeader>\n *     <StatusIcon />\n *     <StatusTitle>All Systems Operational</StatusTitle>\n *   </StatusHeader>\n * </Status>\n * ```\n *\n * @see Status - For setting the variant context\n * @see StatusIcon from status-icon.tsx - For the underlying unified icon implementation\n */\nexport function StatusIcon({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <UnifiedStatusIcon variant=\"default\" className={className} {...props} />\n  );\n}\nStatusIcon.displayName = \"StatusIcon\";\n",
      "type": "registry:ui",
      "target": "components/blocks/status-layout.tsx"
    }
  ],
  "type": "registry:block"
}