{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-component",
  "title": "Status Component",
  "description": "Monitor component primitives for building status displays",
  "dependencies": [
    "date-fns",
    "lucide-react"
  ],
  "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-i18n.json",
    "skeleton",
    "tooltip",
    "https://openstatus.dev/r/use-media-query.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/status-component.tsx",
      "content": "\"use client\";\n\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { useMediaQuery } from \"@/hooks/use-media-query\";\nimport { cn } from \"@/lib/utils\";\nimport { formatDistanceToNowStrict } from \"date-fns\";\nimport { InfoIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { StatusIcon as UnifiedStatusIcon } from \"@/components/blocks/status-icon\";\nimport type {\n  StatusBarData,\n  StatusType,\n} from \"@/components/blocks/status.types\";\nimport { useStatusBlocksLabels } from \"@/components/blocks/status-i18n\";\n\n// ============================================================================\n// Layout Components\n// ============================================================================\n\ninterface StatusComponentProps extends React.ComponentProps<\"div\"> {\n  variant: Exclude<StatusType, \"empty\">;\n}\n\n/**\n * StatusComponent - Root container for individual monitor/service status displays\n *\n * This component serves as the main container for displaying a single monitor or\n * service status. It establishes the status type context via data-variant attribute,\n * which child components (like StatusComponentIcon and StatusComponentStatus) use\n * to display the appropriate colors and icons.\n *\n * The component acts as a CSS group (/component) for advanced selector patterns,\n * enabling child components to style themselves based on the parent's variant.\n *\n * @param variant - The status type (success, degraded, error, or info)\n *\n * @example\n * ```tsx\n * <StatusComponent variant=\"success\">\n *   <StatusComponentHeader>\n *     <StatusComponentHeaderLeft>\n *       <StatusComponentIcon />\n *       <StatusComponentTitle>API Server</StatusComponentTitle>\n *       <StatusComponentDescription>Main API endpoint</StatusComponentDescription>\n *     </StatusComponentHeaderLeft>\n *     <StatusComponentHeaderRight>\n *       <StatusComponentUptime>99.9%</StatusComponentUptime>\n *       <StatusComponentStatus />\n *     </StatusComponentHeaderRight>\n *   </StatusComponentHeader>\n *   <StatusComponentBody>\n *     <StatusBar data={uptimeData} />\n *   </StatusComponentBody>\n * </StatusComponent>\n * ```\n *\n * @see StatusComponentHeader - For header layout\n * @see StatusComponentBody - For content area\n * @see StatusComponentIcon - For status indicator icon\n * @see StatusComponentStatus - For status label\n */\nexport function StatusComponent({\n  variant,\n  className,\n  children,\n  ...props\n}: StatusComponentProps) {\n  return (\n    <div\n      data-slot=\"status-component\"\n      data-variant={variant}\n      className={cn(\"group/component space-y-2\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusComponent.displayName = \"StatusComponent\";\n\n// ============================================================================\n// Header Components\n// ============================================================================\n\n/**\n * StatusComponentHeader - Header container for monitor status information\n *\n * Provides a flex container with space-between alignment for the monitor header,\n * typically containing title/description on the left and status/uptime on the right.\n *\n * @example\n * ```tsx\n * <StatusComponentHeader>\n *   <StatusComponentHeaderLeft>\n *     <StatusComponentIcon />\n *     <StatusComponentTitle>Database</StatusComponentTitle>\n *   </StatusComponentHeaderLeft>\n *   <StatusComponentHeaderRight>\n *     <StatusComponentUptime>100%</StatusComponentUptime>\n *   </StatusComponentHeaderRight>\n * </StatusComponentHeader>\n * ```\n *\n * @see StatusComponentHeaderLeft - For left-aligned content\n * @see StatusComponentHeaderRight - For right-aligned content\n */\nexport function StatusComponentHeader({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-component-header\"\n      className={cn(\"flex items-center justify-between\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusComponentHeader.displayName = \"StatusComponentHeader\";\n\n/**\n * StatusComponentHeaderLeft - Left-aligned header content container\n *\n * Provides a flex container with gap-2 spacing for left-aligned header elements,\n * typically containing the status icon, title, and optional description icon.\n *\n * @example\n * ```tsx\n * <StatusComponentHeaderLeft>\n *   <StatusComponentIcon />\n *   <StatusComponentTitle>API Gateway</StatusComponentTitle>\n *   <StatusComponentDescription>\n *     Handles all incoming requests\n *   </StatusComponentDescription>\n * </StatusComponentHeaderLeft>\n * ```\n *\n * @see StatusComponentIcon - For status indicator\n * @see StatusComponentTitle - For service name\n * @see StatusComponentDescription - For info tooltip\n */\nexport function StatusComponentHeaderLeft({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-component-header-left\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusComponentHeaderLeft.displayName = \"StatusComponentHeaderLeft\";\n\n/**\n * StatusComponentHeaderRight - Right-aligned header content container\n *\n * Provides a flex container with gap-3 spacing for right-aligned header elements,\n * typically containing uptime percentage and status label.\n *\n * @example\n * ```tsx\n * <StatusComponentHeaderRight>\n *   <StatusComponentUptime>99.95%</StatusComponentUptime>\n *   <StatusComponentStatus />\n * </StatusComponentHeaderRight>\n * ```\n *\n * @see StatusComponentUptime - For uptime percentage display\n * @see StatusComponentStatus - For status label\n */\nexport function StatusComponentHeaderRight({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-component-header-right\"\n      className={cn(\"flex items-center gap-3\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusComponentHeaderRight.displayName = \"StatusComponentHeaderRight\";\n\n// ============================================================================\n// Content Components\n// ============================================================================\n\n/**\n * StatusComponentBody - Main content area for monitor visualizations\n *\n * Provides vertical spacing (space-y-2) for stacking content like status bars,\n * charts, or other status visualizations within the component.\n *\n * @example\n * ```tsx\n * <StatusComponentBody>\n *   <StatusBar data={uptimeData} />\n *   <StatusComponentFooter data={uptimeData} />\n * </StatusComponentBody>\n * ```\n *\n * @see StatusBar - For uptime visualization bars\n * @see StatusComponentFooter - For footer with date range\n */\nexport function StatusComponentBody({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-component-body\"\n      className={cn(\"space-y-2\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusComponentBody.displayName = \"StatusComponentBody\";\n\n// ============================================================================\n// Display Components\n// ============================================================================\n\n/**\n * StatusComponentTitle - Monitor or service name display\n *\n * Displays the monitor/service name in monospace font with truncation for long names.\n * The text is medium weight and uses a base font size.\n *\n * @example\n * ```tsx\n * <StatusComponentTitle>Production API</StatusComponentTitle>\n * ```\n *\n * @example\n * ```tsx\n * <StatusComponentTitle>\n *   {monitor.name}\n * </StatusComponentTitle>\n * ```\n */\nexport function StatusComponentTitle({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-component-title\"\n      className={cn(\n        \"truncate font-medium font-mono text-base text-foreground leading-5\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusComponentTitle.displayName = \"StatusComponentTitle\";\n\n/**\n * StatusComponentDescription - Info icon with tooltip for additional details\n *\n * Displays an info icon that shows a tooltip on hover (or tap on touch devices)\n * with additional description text. Returns null if no children are provided,\n * allowing for conditional rendering.\n *\n * Touch device support is built-in, toggling the tooltip on tap instead of\n * requiring hover.\n *\n * @param children - The description text to show in the tooltip\n *\n * @example\n * ```tsx\n * <StatusComponentDescription>\n *   This service handles user authentication and authorization\n * </StatusComponentDescription>\n * ```\n *\n * @example\n * ```tsx\n * // Conditionally rendered - returns null if no description\n * <StatusComponentDescription>\n *   {monitor.description}\n * </StatusComponentDescription>\n * ```\n */\nexport function StatusComponentDescription({\n  onClick,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipTrigger>) {\n  const isTouch = useMediaQuery(\"(hover: none)\");\n  const [open, setOpen] = useState(false);\n\n  if (!children) return null;\n\n  return (\n    <TooltipProvider delayDuration={0}>\n      <Tooltip open={open} onOpenChange={setOpen}>\n        <TooltipTrigger\n          onClick={(e) => {\n            if (isTouch) setOpen((prev) => !prev);\n            onClick?.(e);\n          }}\n          className=\"rounded-full\"\n          {...props}\n        >\n          <InfoIcon className=\"size-4 text-muted-foreground\" />\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>{children}</p>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\nStatusComponentDescription.displayName = \"StatusComponentDescription\";\n\n/**\n * StatusComponentIcon - Status indicator icon for component context\n *\n * This component wraps the unified StatusIcon with variant=\"component\", configuring\n * it to respond to the parent StatusComponent's data-variant attribute.\n * The displayed icon and color automatically change based on the status type:\n * - success: Green check icon\n * - degraded: Yellow warning triangle\n * - error: Red alert circle\n * - info: Blue wrench icon\n *\n * The icon is smaller (size-[12.5px]) than other variants, optimized for inline\n * display next to monitor titles.\n *\n * @example\n * ```tsx\n * <StatusComponent variant=\"degraded\">\n *   <StatusComponentHeaderLeft>\n *     <StatusComponentIcon />\n *     <StatusComponentTitle>CDN</StatusComponentTitle>\n *   </StatusComponentHeaderLeft>\n * </StatusComponent>\n * ```\n *\n * @see StatusComponent - For setting the variant context\n * @see StatusIcon from status-icon.tsx - For the underlying unified icon implementation\n */\nexport function StatusComponentIcon({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <UnifiedStatusIcon variant=\"component\" className={className} {...props} />\n  );\n}\nStatusComponentIcon.displayName = \"StatusComponentIcon\";\n\n/**\n * StatusComponentFooter - Date range footer for status visualizations\n *\n * Displays a date range footer showing the time span of the displayed data,\n * with the start date on the left (formatted as relative time like \"45 days ago\")\n * and \"today\" on the right. Shows a skeleton loader when data is loading.\n *\n * If no data is available, displays a dash (-) on the left side.\n *\n * @param data - Array of status bar data points (uses first item's date for start)\n * @param isLoading - Whether the data is currently loading\n *\n * @example\n * ```tsx\n * <StatusComponentBody>\n *   <StatusBar data={uptimeData} />\n *   <StatusComponentFooter data={uptimeData} isLoading={false} />\n * </StatusComponentBody>\n * ```\n *\n * @example\n * ```tsx\n * // With loading state\n * <StatusComponentFooter data={[]} isLoading={true} />\n * ```\n *\n * @see StatusBar - For the visualization that this footer describes\n */\nexport function StatusComponentFooter({\n  data,\n  isLoading,\n}: {\n  data: StatusBarData[];\n  isLoading?: boolean;\n}) {\n  const labels = useStatusBlocksLabels();\n  return (\n    <div\n      data-slot=\"status-component-footer\"\n      className=\"flex flex-row items-center justify-between font-mono text-muted-foreground text-xs leading-none\"\n    >\n      <div>\n        {isLoading ? (\n          <Skeleton className=\"h-3 w-18\" />\n        ) : data.length > 0 ? (\n          formatDistanceToNowStrict(new Date(data[0].day), {\n            unit: \"day\",\n            addSuffix: true,\n          })\n        ) : (\n          \"-\"\n        )}\n      </div>\n      <div>{labels.today}</div>\n    </div>\n  );\n}\nStatusComponentFooter.displayName = \"StatusComponentFooter\";\n\n/**\n * StatusComponentUptime - Uptime percentage display\n *\n * Displays the uptime percentage in monospace font with slightly muted foreground\n * color. Typically shows values like \"99.9%\" or \"100%\".\n *\n * @example\n * ```tsx\n * <StatusComponentUptime>99.95%</StatusComponentUptime>\n * ```\n *\n * @example\n * ```tsx\n * <StatusComponentUptime>\n *   {calculateUptime(data)}%\n * </StatusComponentUptime>\n * ```\n *\n * @see StatusComponentUptimeSkeleton - For loading state\n */\nexport function StatusComponentUptime({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-component-uptime\"\n      className={cn(\n        \"font-mono text-foreground/80 text-sm leading-none\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\nStatusComponentUptime.displayName = \"StatusComponentUptime\";\n\n/**\n * StatusComponentUptimeSkeleton - Loading skeleton for uptime percentage\n *\n * Displays a skeleton loader matching the size of the uptime percentage display\n * (h-4 w-16), used while uptime data is being fetched.\n *\n * @example\n * ```tsx\n * <StatusComponentHeaderRight>\n *   {isLoading ? (\n *     <StatusComponentUptimeSkeleton />\n *   ) : (\n *     <StatusComponentUptime>{uptime}%</StatusComponentUptime>\n *   )}\n * </StatusComponentHeaderRight>\n * ```\n *\n * @see StatusComponentUptime - For the actual uptime display\n */\nexport function StatusComponentUptimeSkeleton({\n  className,\n  ...props\n}: React.ComponentProps<typeof Skeleton>) {\n  return <Skeleton className={cn(\"h-4 w-16\", className)} {...props} />;\n}\n\n/**\n * StatusComponentStatus - Automatic status label display\n *\n * Displays a status label that automatically shows the appropriate text and color\n * based on the parent StatusComponent's variant. The component uses CSS data\n * attribute selectors to show only the relevant status label:\n * - success: \"Operational\" (green)\n * - degraded: \"Degraded\" (yellow)\n * - error: \"Outage\" (red)\n * - info: \"Maintenance\" (blue)\n *\n * The labels are sourced from systemStatusLabels.short for consistent messaging\n * across the application.\n *\n * @example\n * ```tsx\n * <StatusComponent variant=\"success\">\n *   <StatusComponentHeaderRight>\n *     <StatusComponentStatus />\n *     // Displays \"Operational\" in green\n *   </StatusComponentHeaderRight>\n * </StatusComponent>\n * ```\n *\n * @example\n * ```tsx\n * <StatusComponent variant=\"degraded\">\n *   <StatusComponentHeaderRight>\n *     <StatusComponentStatus />\n *     // Displays \"Degraded\" in yellow\n *   </StatusComponentHeaderRight>\n * </StatusComponent>\n * ```\n *\n * @see StatusComponent - For setting the variant that controls the displayed status\n * @see systemStatusLabels - For the status label text definitions\n */\nexport function StatusComponentStatus({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const labels = useStatusBlocksLabels();\n  return (\n    <div\n      data-slot=\"status-component-status\"\n      className={cn(\n        \"font-mono text-sm leading-none\",\n        \"group-data-[variant=success]/component:text-success\",\n        \"group-data-[variant=degraded]/component:text-warning\",\n        \"group-data-[variant=error]/component:text-destructive\",\n        \"group-data-[variant=info]/component:text-info\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"hidden group-data-[variant=success]/component:block\">\n        {labels.systemStatus.success.short}\n      </span>\n      <span className=\"hidden group-data-[variant=degraded]/component:block\">\n        {labels.systemStatus.degraded.short}\n      </span>\n      <span className=\"hidden group-data-[variant=error]/component:block\">\n        {labels.systemStatus.error.short}\n      </span>\n      <span className=\"hidden group-data-[variant=info]/component:block\">\n        {labels.systemStatus.info.short}\n      </span>\n    </div>\n  );\n}\nStatusComponentStatus.displayName = \"StatusComponentStatus\";\n",
      "type": "registry:ui",
      "target": "components/blocks/status-component.tsx"
    }
  ],
  "type": "registry:block"
}