{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-banner",
  "title": "Status Banner",
  "description": "Alert-style status banner with tabs support and timestamp display",
  "registryDependencies": [
    "https://openstatus.dev/r/status-icon.json",
    "https://openstatus.dev/r/status-types.json",
    "https://openstatus.dev/r/status-utils.json",
    "https://openstatus.dev/r/status-timestamp.json",
    "https://openstatus.dev/r/status-i18n.json",
    "tabs"
  ],
  "files": [
    {
      "path": "src/components/blocks/status-banner.tsx",
      "content": "\"use client\";\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\";\nimport { cn } from \"@/lib/utils\";\nimport { StatusIcon as UnifiedStatusIcon } from \"@/components/blocks/status-icon\";\nimport type { StatusType } from \"@/components/blocks/status.types\";\nimport { StatusTimestamp } from \"@/components/blocks/status-timestamp\";\nimport { useStatusBlocksLabels } from \"@/components/blocks/status-i18n\";\n\n/**\n * StatusBanner - Complete banner component with integrated icon, message, and timestamp\n *\n * A fully composed banner component that displays a prominent status message with:\n * - Status-colored icon on the left\n * - Automatic status message (e.g., \"All Systems Operational\")\n * - Current timestamp on the right\n *\n * The banner automatically styles itself based on the status type with colored\n * backgrounds and borders. This is the simplest way to display a status banner\n * when you don't need custom content.\n *\n * For custom banner content, use StatusBannerContainer with manual composition.\n *\n * @param status - The status type that determines appearance and message\n *\n * @example\n * ```tsx\n * <StatusBanner status=\"success\" />\n * // Displays: [✓ icon] All Systems Operational | Jan 15, 2024 10:30 (UTC)\n * ```\n *\n * @example\n * ```tsx\n * <StatusBanner status=\"degraded\" />\n * // Displays: [⚠ icon] Degraded Performance | Jan 15, 2024 10:30 (UTC)\n * ```\n *\n * @see StatusBannerContainer - For custom banner composition\n * @see StatusBannerMessage - For the automatic status message\n * @see StatusTimestamp - For the timestamp display\n */\nexport function StatusBanner({\n  className,\n  status,\n}: React.ComponentProps<\"div\"> & {\n  status?: Exclude<StatusType, \"empty\">;\n}) {\n  return (\n    <StatusBannerContainer\n      status={status}\n      className={cn(\n        \"flex items-center gap-3 px-3 py-2 sm:px-4 sm:py-3\",\n        \"data-[status=success]:bg-success/20\",\n        \"data-[status=degraded]:bg-warning/20\",\n        \"data-[status=error]:bg-destructive/20\",\n        \"data-[status=info]:bg-info/20\",\n        className,\n      )}\n    >\n      <StatusBannerIcon className=\"flex-shrink-0\" />\n      <div className=\"flex flex-1 flex-wrap items-center justify-between gap-2\">\n        <StatusBannerMessage className=\"font-semibold text-xl\" />\n        <StatusTimestamp date={new Date()} className=\"text-xs\" />\n      </div>\n    </StatusBannerContainer>\n  );\n}\nStatusBanner.displayName = \"StatusBanner\";\n\n/**\n * StatusBannerContainer - Base container for status banner composition\n *\n * Provides a rounded, bordered container with status-based styling via data\n * attributes. The container acts as a CSS group (/status-banner) enabling child\n * components to style themselves based on the status type.\n *\n * Background colors automatically adjust for light/dark mode:\n * - success: Green tint (bg-success/5 light, bg-success/10 dark)\n * - degraded: Yellow tint (bg-warning/5 light, bg-warning/10 dark)\n * - error: Red tint (bg-destructive/5 light, bg-destructive/10 dark)\n * - info: Blue tint (bg-info/5 light, bg-info/10 dark)\n *\n * @param status - The status type for styling\n *\n * @example\n * ```tsx\n * <StatusBannerContainer status=\"error\">\n *   <StatusBannerTitle>Active Incident</StatusBannerTitle>\n *   <StatusBannerContent>\n *     <p>We are experiencing issues with the API.</p>\n *   </StatusBannerContent>\n * </StatusBannerContainer>\n * ```\n *\n * @see StatusBanner - For a pre-composed banner with icon/message/timestamp\n * @see StatusBannerTitle - For colored title bar\n * @see StatusBannerContent - For main content area\n */\nexport function StatusBannerContainer({\n  className,\n  children,\n  status,\n}: React.ComponentProps<\"div\"> & {\n  status?: Exclude<StatusType, \"empty\">;\n}) {\n  return (\n    <div\n      data-slot=\"status-banner\"\n      data-status={status}\n      className={cn(\n        \"group/status-banner overflow-hidden rounded-lg border\",\n        \"data-[status=success]:border-success data-[status=success]:bg-success/5 dark:data-[status=success]:bg-success/10\",\n        \"data-[status=degraded]:border-warning data-[status=degraded]:bg-warning/5 dark:data-[status=degraded]:bg-warning/10\",\n        \"data-[status=error]:border-destructive data-[status=error]:bg-destructive/5 dark:data-[status=error]:bg-destructive/10\",\n        \"data-[status=info]:border-info data-[status=info]:bg-info/5 dark:data-[status=info]:bg-info/10\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\nStatusBannerContainer.displayName = \"StatusBannerContainer\";\n\n/**\n * StatusBannerMessage - Automatic status message display\n *\n * Displays a status message that automatically shows the appropriate text based\n * on the parent StatusBannerContainer's status. Uses CSS data attribute selectors\n * to show only the relevant message:\n * - success: \"All Systems Operational\"\n * - degraded: \"Degraded Performance\"\n * - error: \"Partial Outage\"\n * - info: \"Maintenance\"\n *\n * The messages are sourced from systemStatusLabels.long for consistent messaging.\n *\n * @example\n * ```tsx\n * <StatusBannerContainer status=\"success\">\n *   <StatusBannerMessage className=\"text-xl font-semibold\" />\n *   // Displays \"All Systems Operational\"\n * </StatusBannerContainer>\n * ```\n *\n * @see StatusBannerContainer - For setting the status context\n * @see systemStatusLabels - For the message text definitions\n */\nexport function StatusBannerMessage({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const labels = useStatusBlocksLabels();\n  return (\n    <div className={cn(className)} {...props}>\n      <span className=\"hidden group-data-[status=success]/status-banner:block\">\n        {labels.systemStatus.success.long}\n      </span>\n      <span className=\"hidden group-data-[status=degraded]/status-banner:block\">\n        {labels.systemStatus.degraded.long}\n      </span>\n      <span className=\"hidden group-data-[status=error]/status-banner:block\">\n        {labels.systemStatus.error.long}\n      </span>\n      <span className=\"hidden group-data-[status=info]/status-banner:block\">\n        {labels.systemStatus.info.long}\n      </span>\n    </div>\n  );\n}\n\n/**\n * StatusBannerTitle - Colored title bar for banner sections\n *\n * Displays a title with a solid status-colored background and light text color.\n * The background color automatically adjusts based on the parent StatusBannerContainer's\n * status type:\n * - success: Green background\n * - degraded: Yellow background\n * - error: Red background\n * - info: Blue background\n *\n * Typically used to create distinct sections within a banner or to highlight\n * important information.\n *\n * @example\n * ```tsx\n * <StatusBannerContainer status=\"error\">\n *   <StatusBannerTitle>Ongoing Incident</StatusBannerTitle>\n *   <StatusBannerContent>\n *     <p>Details about the incident...</p>\n *   </StatusBannerContent>\n * </StatusBannerContainer>\n * ```\n *\n * @see StatusBannerContainer - For setting the status context\n * @see StatusBannerContent - For main content below the title\n */\nexport function StatusBannerTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"px-3 py-2 font-medium text-background\",\n        \"group-data-[status=success]/status-banner:bg-success\",\n        \"group-data-[status=degraded]/status-banner:bg-warning\",\n        \"group-data-[status=error]/status-banner:bg-destructive\",\n        \"group-data-[status=info]/status-banner:bg-info\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusBannerTitle.displayName = \"StatusBannerTitle\";\n\n/**\n * StatusBannerContent - Main content area for banner messages\n *\n * Provides consistent padding and spacing (gap-2) for banner content. Used to\n * display detailed messages, updates, or other information within a status banner.\n *\n * The padding is responsive: px-3 py-2 on mobile, px-4 py-3 on larger screens.\n *\n * @example\n * ```tsx\n * <StatusBannerContainer status=\"info\">\n *   <StatusBannerTitle>Scheduled Maintenance</StatusBannerTitle>\n *   <StatusBannerContent>\n *     <p>We will be performing maintenance on Jan 20 from 2-4 AM UTC.</p>\n *     <p>Some services may be temporarily unavailable.</p>\n *   </StatusBannerContent>\n * </StatusBannerContainer>\n * ```\n *\n * @see StatusBannerContainer - For the container\n * @see StatusBannerTitle - For optional title bar above content\n */\nexport function StatusBannerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 px-3 py-2 sm:px-4 sm:py-3\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusBannerContent.displayName = \"StatusBannerContent\";\n\n/**\n * StatusBannerIcon - Status indicator icon for banner context\n *\n * This component wraps the unified StatusIcon with variant=\"banner\", configuring\n * it to respond to the parent StatusBannerContainer's data-status 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 * <StatusBannerContainer status=\"degraded\">\n *   <div className=\"flex items-center gap-3\">\n *     <StatusBannerIcon />\n *     <StatusBannerMessage />\n *   </div>\n * </StatusBannerContainer>\n * ```\n *\n * @see StatusBannerContainer - For setting the status context\n * @see StatusIcon from status-icon.tsx - For the underlying unified icon implementation\n */\nexport function StatusBannerIcon({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <UnifiedStatusIcon variant=\"banner\" className={className} {...props} />\n  );\n}\nStatusBannerIcon.displayName = \"StatusBannerIcon\";\n\n// ============================================================================\n// Tab Components\n// ============================================================================\n\n/**\n * StatusBannerTabs - Tab container for multi-section status banners\n *\n * Provides a tabbed interface for status banners, allowing multiple views or\n * sections within a single banner. The tabs container automatically applies\n * status-based background colors matching the banner theme.\n *\n * Built on Radix UI Tabs with status-aware styling.\n *\n * @param status - The status type for background color theming\n *\n * @example\n * ```tsx\n * <StatusBannerTabs status=\"degraded\" defaultValue=\"impact\">\n *   <StatusBannerTabsList>\n *     <StatusBannerTabsTrigger value=\"impact\" status=\"degraded\">\n *       Impact\n *     </StatusBannerTabsTrigger>\n *     <StatusBannerTabsTrigger value=\"updates\" status=\"degraded\">\n *       Updates\n *     </StatusBannerTabsTrigger>\n *   </StatusBannerTabsList>\n *   <StatusBannerTabsContent value=\"impact\">\n *     <StatusBannerContent>\n *       <p>Services affected by this incident...</p>\n *     </StatusBannerContent>\n *   </StatusBannerTabsContent>\n *   <StatusBannerTabsContent value=\"updates\">\n *     <StatusBannerContent>\n *       <p>Latest updates on resolution...</p>\n *     </StatusBannerContent>\n *   </StatusBannerTabsContent>\n * </StatusBannerTabs>\n * ```\n *\n * @see StatusBannerTabsList - For the tab navigation\n * @see StatusBannerTabsTrigger - For individual tab buttons\n * @see StatusBannerTabsContent - For tab panel content\n */\nexport function StatusBannerTabs({\n  className,\n  children,\n  status,\n  ...props\n}: React.ComponentProps<typeof Tabs> & {\n  status?: Exclude<StatusType, \"empty\">;\n}) {\n  return (\n    <Tabs\n      data-slot=\"status-banner-tabs\"\n      data-status={status}\n      className={cn(\n        \"gap-0\",\n        \"data-[status=success]:bg-success/20\",\n        \"data-[status=degraded]:bg-warning/20\",\n        \"data-[status=error]:bg-destructive/20\",\n        \"data-[status=info]:bg-info/20\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </Tabs>\n  );\n}\n\n/**\n * StatusBannerTabsList - Tab navigation container\n *\n * Wraps the tab triggers in a scrollable container with rounded top corners.\n * The container automatically handles overflow with horizontal scrolling on\n * smaller screens.\n *\n * @example\n * ```tsx\n * <StatusBannerTabsList>\n *   <StatusBannerTabsTrigger value=\"overview\" status=\"success\">\n *     Overview\n *   </StatusBannerTabsTrigger>\n *   <StatusBannerTabsTrigger value=\"details\" status=\"success\">\n *     Details\n *   </StatusBannerTabsTrigger>\n * </StatusBannerTabsList>\n * ```\n *\n * @see StatusBannerTabsTrigger - For individual tab buttons\n */\nexport function StatusBannerTabsList({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof TabsList>) {\n  return (\n    <div className={cn(\"rounded-t-lg\", \"w-full overflow-x-auto\")}>\n      <TabsList\n        className={cn(\n          \"rounded-none rounded-t-lg p-0\",\n          \"border-none\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TabsList>\n    </div>\n  );\n}\n\n/**\n * StatusBannerTabsTrigger - Individual tab button\n *\n * Displays a single tab trigger button with status-based coloring. The button\n * shows:\n * - Inactive state: 50% opacity status color background\n * - Active state: Full status color background with light text\n *\n * The status parameter should match the parent StatusBannerTabs status for\n * consistent theming.\n *\n * @param status - The status type for color theming\n * @param value - The tab value (for Radix UI Tabs)\n *\n * @example\n * ```tsx\n * <StatusBannerTabsList>\n *   <StatusBannerTabsTrigger value=\"affected\" status=\"error\">\n *     Affected Services\n *   </StatusBannerTabsTrigger>\n *   <StatusBannerTabsTrigger value=\"timeline\" status=\"error\">\n *     Timeline\n *   </StatusBannerTabsTrigger>\n * </StatusBannerTabsList>\n * ```\n *\n * @see StatusBannerTabsList - For the container\n * @see StatusBannerTabsContent - For the corresponding content panels\n */\nexport function StatusBannerTabsTrigger({\n  className,\n  children,\n  status,\n  ...props\n}: React.ComponentProps<typeof TabsTrigger> & {\n  status?: Exclude<StatusType, \"empty\">;\n}) {\n  return (\n    <TabsTrigger\n      data-slot=\"status-banner-tabs-trigger\"\n      data-status={status}\n      className={cn(\n        \"font-mono\",\n        \"rounded-none border-none focus-visible:ring-inset\",\n        \"h-full text-foreground data-[state=active]:text-background dark:text-foreground dark:data-[state=active]:text-background\",\n        \"data-[state=active]:data-[status=success]:bg-success data-[status=success]:bg-success/50 dark:data-[state=active]:data-[status=success]:bg-success dark:data-[status=success]:bg-success/50\",\n        \"data-[state=active]:data-[status=degraded]:bg-warning data-[status=degraded]:bg-warning/50 dark:data-[state=active]:data-[status=degraded]:bg-warning dark:data-[status=degraded]:bg-warning/50\",\n        \"data-[state=active]:data-[status=error]:bg-destructive data-[status=error]:bg-destructive/50 dark:data-[state=active]:data-[status=error]:bg-destructive dark:data-[status=error]:bg-destructive/50\",\n        \"data-[state=active]:data-[status=info]:bg-info data-[status=info]:bg-info/50 dark:data-[state=active]:data-[status=info]:bg-info dark:data-[status=info]:bg-info/50\",\n        \"data-[state=active]:shadow-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsTrigger>\n  );\n}\n\n/**\n * StatusBannerTabsContent - Tab panel content container\n *\n * Wraps the content for a single tab panel. The component includes negative\n * horizontal margin (-mx-3) to align edge-to-edge with the banner container\n * when used with StatusBannerContent.\n *\n * @param value - The tab value (must match a StatusBannerTabsTrigger value)\n *\n * @example\n * ```tsx\n * <StatusBannerTabsContent value=\"updates\">\n *   <StatusBannerContent>\n *     <h3>Latest Update</h3>\n *     <p>We have identified the issue and are working on a fix...</p>\n *   </StatusBannerContent>\n * </StatusBannerTabsContent>\n * ```\n *\n * @see StatusBannerTabsTrigger - For the tab button that activates this content\n * @see StatusBannerContent - Typically used as a child for proper padding\n */\nexport function StatusBannerTabsContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof TabsContent>) {\n  return (\n    <TabsContent className={cn(\"-mx-3\", className)} {...props}>\n      {children}\n    </TabsContent>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/blocks/status-banner.tsx"
    }
  ],
  "type": "registry:block"
}