{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-blank",
  "title": "Status Blank States",
  "description": "Empty and skeleton state components for loading and no-data scenarios",
  "files": [
    {
      "path": "src/components/blocks/status-blank.tsx",
      "content": "\"use client\";\n\nimport { useStatusBlocksLabels } from \"@/components/blocks/status-i18n\";\nimport { cn } from \"@/lib/utils\";\n\n// ============================================================================\n// Container Components\n// ============================================================================\n\n/**\n * StatusBlankContainer - Main container for empty state displays\n *\n * Provides a centered, bordered container with muted background for displaying\n * empty state content. The container is responsive with adaptive padding\n * (sm:px-8 sm:py-6) and uses flexbox for vertical centering of content.\n *\n * @example\n * ```tsx\n * <StatusBlankContainer>\n *   <StatusBlankTitle>No Data Available</StatusBlankTitle>\n *   <StatusBlankDescription>Add monitors to see data here</StatusBlankDescription>\n * </StatusBlankContainer>\n * ```\n *\n * @see StatusBlankTitle - For heading text\n * @see StatusBlankDescription - For descriptive text\n */\nexport function StatusBlankContainer({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"bg-muted/30 flex flex-col items-center justify-center gap-2.5 rounded-lg border px-3 py-2 text-center sm:px-8 sm:py-6\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// Text Components\n// ============================================================================\n\n/**\n * StatusBlankTitle - Title text for empty state displays\n *\n * Displays medium-weight title text within empty state containers.\n * Typically used to communicate the empty state condition.\n *\n * @example\n * ```tsx\n * <StatusBlankTitle>No monitors found</StatusBlankTitle>\n * ```\n *\n * @see StatusBlankDescription - For additional descriptive text\n */\nexport function StatusBlankTitle({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"font-medium\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * StatusBlankDescription - Descriptive text for empty state displays\n *\n * Displays muted, monospaced text providing additional context or guidance\n * for the empty state. The monospace font helps distinguish it as secondary\n * instructional text.\n *\n * @example\n * ```tsx\n * <StatusBlankDescription>\n *   Add monitors to this page to see their status here\n * </StatusBlankDescription>\n * ```\n *\n * @see StatusBlankTitle - For primary heading text\n */\nexport function StatusBlankDescription({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"text-muted-foreground font-mono text-sm\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * StatusBlankContent - Content wrapper for empty state text\n *\n * Provides vertical spacing (space-y-1) for stacking title and description\n * components within an empty state display.\n *\n * @example\n * ```tsx\n * <StatusBlankContent>\n *   <StatusBlankTitle>No Events</StatusBlankTitle>\n *   <StatusBlankDescription>No events to display</StatusBlankDescription>\n * </StatusBlankContent>\n * ```\n */\nexport function StatusBlankContent({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"space-y-1\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// Visualization Components\n// ============================================================================\n\n/**\n * StatusBlankReport - Visual representation of an empty incident report\n *\n * Displays a stylized preview of an incident report page with placeholder\n * header, report updates, and an overlay gradient. Used to visualize what\n * incident reports will look like when created.\n *\n * This component is typically rendered in multiple layers with different\n * scales and opacities to create a stacked card effect.\n *\n * @example\n * ```tsx\n * <div className=\"relative\">\n *   <StatusBlankReport className=\"absolute scale-80 opacity-80\" />\n *   <StatusBlankReport />\n * </div>\n * ```\n *\n * @see StatusBlankEvents - For composed empty state with stacked reports\n * @see StatusBlankPageHeader - For the header visualization\n * @see StatusBlankReportUpdate - For the update line visualizations\n */\nexport function StatusBlankReport({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <StatusBlankPage {...props}>\n      <StatusBlankPageHeader />\n      <div className=\"flex w-full flex-col\">\n        <StatusBlankReportUpdate />\n        <StatusBlankReportUpdate />\n      </div>\n      <StatusBlankOverlay />\n    </StatusBlankPage>\n  );\n}\n\n/**\n * StatusBlankMonitor - Visual representation of an empty monitor display\n *\n * Displays a stylized preview of a monitor page with placeholder header and\n * uptime visualization bars. Used to show what monitor displays will look like\n * when monitors are added.\n *\n * This component is typically rendered in multiple layers with different\n * scales and opacities to create a stacked card effect.\n *\n * @example\n * ```tsx\n * <div className=\"relative\">\n *   <StatusBlankMonitor className=\"absolute scale-80 opacity-80\" />\n *   <StatusBlankMonitor />\n * </div>\n * ```\n *\n * @see StatusBlankMonitors - For composed empty state with stacked monitors\n * @see StatusBlankPageHeader - For the header visualization\n * @see StatusBlankMonitorUptime - For the uptime bar visualization\n */\nexport function StatusBlankMonitor({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <StatusBlankPage {...props}>\n      <StatusBlankPageHeader />\n      <StatusBlankMonitorUptime />\n      <StatusBlankOverlay />\n    </StatusBlankPage>\n  );\n}\n\n// ============================================================================\n// Animation Components (for visualization internals)\n// ============================================================================\n\n/**\n * StatusBlankPage - Base container for blank page visualizations\n *\n * Provides a card-like container with border and background for page previews.\n * This component is used as the foundation for StatusBlankReport and\n * StatusBlankMonitor visualizations, providing consistent sizing and styling.\n *\n * The container uses relative positioning to enable absolutely positioned\n * overlay gradients within the visualization.\n *\n * @example\n * ```tsx\n * <StatusBlankPage>\n *   <StatusBlankPageHeader />\n *   <div>// Content here</div>\n *   <StatusBlankOverlay />\n * </StatusBlankPage>\n * ```\n *\n * @see StatusBlankReport - For report visualization using this container\n * @see StatusBlankMonitor - For monitor visualization using this container\n */\nexport function StatusBlankPage({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"border-border/70 bg-background relative flex w-full max-w-xs flex-1 flex-col items-center justify-center gap-4 overflow-hidden rounded-lg border px-3 py-2 text-center\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * StatusBlankPageHeader - Placeholder header for page visualizations\n *\n * Displays a stylized representation of a page header with placeholder elements\n * for logo, navigation items, and actions. Uses accent-colored rounded rectangles\n * to create a recognizable header pattern.\n *\n * The header shows:\n * - Left: Single square (logo placeholder)\n * - Center: Three rectangles (navigation items)\n * - Right: Single rectangle (action button)\n *\n * @example\n * ```tsx\n * <StatusBlankPage>\n *   <StatusBlankPageHeader />\n *   // Other visualization content\n * </StatusBlankPage>\n * ```\n */\nexport function StatusBlankPageHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center justify-between gap-4\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"bg-accent/60 size-3 rounded-sm\" />\n      <div className=\"flex flex-row gap-1\">\n        <div className=\"bg-accent/60 h-3 w-8 rounded-sm\" />\n        <div className=\"bg-accent/60 h-3 w-8 rounded-sm\" />\n        <div className=\"bg-accent/60 h-3 w-8 rounded-sm\" />\n      </div>\n      <div className=\"bg-accent/60 h-3 w-8 rounded-sm\" />\n    </div>\n  );\n}\n\n/**\n * StatusBlankMonitorUptime - Uptime visualization for monitor previews\n *\n * Displays a stylized uptime chart with placeholder labels and 30 vertical bars\n * representing uptime data. Some bars have varying heights to create a realistic\n * visualization pattern showing occasional incidents.\n *\n * The visualization includes:\n * - Top: Three placeholder labels for time periods\n * - Bottom: 30 vertical bars with most at full height and some shorter to indicate incidents\n *\n * @example\n * ```tsx\n * <StatusBlankMonitor>\n *   <StatusBlankPageHeader />\n *   <StatusBlankMonitorUptime />\n * </StatusBlankMonitor>\n * ```\n */\nexport function StatusBlankMonitorUptime({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex w-full flex-col items-center justify-between gap-1\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex w-full flex-row gap-1\">\n        <div className=\"bg-accent h-3 w-8 rounded-sm\" />\n        <div className=\"bg-accent h-3 w-12 rounded-sm\" />\n        <div className=\"bg-accent h-3 w-10 rounded-sm\" />\n      </div>\n      <div className=\"flex w-full flex-row items-end gap-0.5\">\n        {Array.from({ length: 30 }).map((_, index) => (\n          <div\n            key={index}\n            className={cn(\n              \"bg-accent h-12 flex-1 rounded-sm\",\n              [10, 20].includes(index) && \"h-8\",\n              [25].includes(index) && \"h-10\",\n            )}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * StatusBlankReportUpdate - Single update entry for report visualizations\n *\n * Displays a stylized representation of an incident report update with placeholder\n * elements for status indicator, timestamp, and message lines. Creates a timeline-like\n * appearance when stacked vertically.\n *\n * The update shows:\n * - Left: Square status indicator\n * - Right: Two label placeholders (status + timestamp) and two message lines\n *\n * @example\n * ```tsx\n * <StatusBlankPage>\n *   <StatusBlankPageHeader />\n *   <div className=\"flex flex-col\">\n *     <StatusBlankReportUpdate />\n *     <StatusBlankReportUpdate />\n *   </div>\n * </StatusBlankPage>\n * ```\n */\nexport function StatusBlankReportUpdate({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex w-full items-start gap-2\", className)} {...props}>\n      <div className=\"flex h-full flex-col items-center gap-0.5\">\n        <div className=\"bg-accent size-3 rounded-sm\" />\n      </div>\n      <div className=\"flex flex-1 flex-col gap-1 pb-2\">\n        <div className=\"flex items-center gap-1\">\n          <div className=\"bg-accent h-3 w-12 rounded-sm\" />\n          <div className=\"bg-accent h-3 w-16 rounded-sm\" />\n        </div>\n        <div className=\"bg-accent h-3 w-full rounded-sm\" />\n        <div className=\"bg-accent h-3 w-full rounded-sm\" />\n      </div>\n    </div>\n  );\n}\n\n/**\n * StatusBlankOverlay - Gradient overlay for page visualizations\n *\n * Provides a bottom-to-top gradient overlay that fades the visualization content\n * from transparent (top 40%) to background color (bottom), creating a subtle\n * depth effect. The overlay is absolutely positioned to cover the entire parent.\n *\n * This overlay helps create visual separation between the preview visualization\n * and any content that might be displayed on top of it (like call-to-action text).\n *\n * @example\n * ```tsx\n * <StatusBlankPage>\n *   <StatusBlankPageHeader />\n *   <StatusBlankMonitorUptime />\n *   <StatusBlankOverlay />\n * </StatusBlankPage>\n * ```\n */\nexport function StatusBlankOverlay({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"to-background absolute inset-0 flex flex-col items-center justify-center gap-2 bg-gradient-to-b from-transparent from-40% p-2\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\n// ============================================================================\n// Composed Empty States\n// ============================================================================\n\n/**\n * StatusBlankEvents - Complete empty state for incident reports\n *\n * Displays a fully composed empty state with stacked StatusBlankReport\n * visualizations (three layers with varying scales and opacities) and\n * customizable title/description text. This creates an engaging empty state\n * that shows users what incident reports will look like.\n *\n * The visualization uses absolute positioning to create a layered card stack\n * effect with the front card at full opacity and back cards progressively\n * faded and scaled down.\n *\n * @param title - The empty state heading (defaults to `labels.noReports` from the i18n provider)\n * @param description - The empty state description (defaults to `labels.noReportsDescription` from the i18n provider)\n *\n * @example\n * ```tsx\n * <StatusBlankEvents\n *   title=\"No incidents yet\"\n *   description=\"Incident reports will appear here when created\"\n * />\n * ```\n *\n * @see StatusBlankReport - For the underlying report visualization\n */\nexport function StatusBlankEvents({\n  title,\n  description,\n  action,\n  ...props\n}: React.ComponentProps<typeof StatusBlankContainer> & {\n  title?: string;\n  description?: string;\n  action?: React.ReactNode;\n}) {\n  const labels = useStatusBlocksLabels();\n  return (\n    <StatusBlankContainer {...props}>\n      <div className=\"relative mt-8 flex w-full flex-col items-center justify-center\">\n        <StatusBlankReport className=\"absolute -top-16 scale-60 opacity-50\" />\n        <StatusBlankReport className=\"absolute -top-8 scale-80 opacity-80\" />\n        <StatusBlankReport />\n      </div>\n      <StatusBlankContent>\n        <StatusBlankTitle>{title ?? labels.noReports}</StatusBlankTitle>\n        <StatusBlankDescription>\n          {description ?? labels.noReportsDescription}\n        </StatusBlankDescription>\n      </StatusBlankContent>\n      {action}\n    </StatusBlankContainer>\n  );\n}\n\n/**\n * StatusBlankMonitors - Complete empty state for monitors\n *\n * Displays a fully composed empty state with stacked StatusBlankMonitor\n * visualizations (three layers with varying scales and opacities) and\n * customizable title/description text. This creates an engaging empty state\n * that shows users what monitor displays will look like.\n *\n * The visualization uses absolute positioning to create a layered card stack\n * effect with the front card at full opacity and back cards progressively\n * faded and scaled down.\n *\n * @param title - The empty state heading (defaults to `labels.noPublicMonitors` from the i18n provider)\n * @param description - The empty state description (defaults to `labels.noPublicMonitorsDescription` from the i18n provider)\n *\n * @example\n * ```tsx\n * <StatusBlankMonitors\n *   title=\"No monitors configured\"\n *   description=\"Add monitors to start tracking uptime\"\n * />\n * ```\n *\n * @see StatusBlankMonitor - For the underlying monitor visualization\n */\nexport function StatusBlankMonitors({\n  title,\n  description,\n  action,\n  ...props\n}: React.ComponentProps<typeof StatusBlankContainer> & {\n  title?: string;\n  description?: string;\n  action?: React.ReactNode;\n}) {\n  const labels = useStatusBlocksLabels();\n  return (\n    <StatusBlankContainer {...props}>\n      <div className=\"relative mt-8 flex w-full flex-col items-center justify-center\">\n        <StatusBlankMonitor className=\"absolute -top-16 scale-60 opacity-50\" />\n        <StatusBlankMonitor className=\"absolute -top-8 scale-80 opacity-80\" />\n        <StatusBlankMonitor />\n      </div>\n      <StatusBlankContent>\n        <StatusBlankTitle>{title ?? labels.noPublicMonitors}</StatusBlankTitle>\n        <StatusBlankDescription>\n          {description ?? labels.noPublicMonitorsDescription}\n        </StatusBlankDescription>\n      </StatusBlankContent>\n      {action}\n    </StatusBlankContainer>\n  );\n}\n\n/**\n * StatusBlankAction - Styled wrapper for empty-state CTAs.\n *\n * Applies border + hover chrome around any actionable child (link, button).\n * Pass a bare `<Link>` or `<button>` — this component owns the look. Consumers\n * of `StatusBlankEvents`/`StatusBlankMonitors`/`StatusFeed.emptyAction` must\n * wrap their action in this themselves; the parents render the action raw to\n * avoid doubling chrome on already-styled controls.\n */\nexport function StatusBlankAction({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"status-blank-action\"\n      className={cn(\n        \"border-border/70 text-muted-foreground hover:border-border hover:text-foreground mt-2 inline-flex items-center justify-center rounded-md border px-3 py-1.5 font-mono text-sm [&>a]:text-inherit [&>a]:no-underline\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/blocks/status-blank.tsx"
    }
  ],
  "type": "registry:block"
}