{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ds-system-status-badge",
  "title": "System Status Badge",
  "description": "Indicador de disponibilidade operacional e saúde dos serviços em tempo real com dot animado.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@lema-ds/ui-i18n",
    "@lema-ds/tokens"
  ],
  "files": [
    {
      "path": "components/ds/ds-system-status-badge.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { ExternalLinkIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { UI_I18N, type UILocale } from \"@/lib/ui-i18n\"\n\n// ── Types ──\n\nexport type SystemHealthStatus =\n  \"operational\" | \"degraded\" | \"outage\" | \"maintenance\"\n\nexport interface SystemStatusBadgeProps\n  extends\n    React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof systemStatusBadgeVariants> {\n  status?: SystemHealthStatus\n  label?: string\n  uptime?: string\n  href?: string\n  locale?: UILocale\n}\n\n// ── Variants ──\n\nexport const systemStatusBadgeVariants = cva(\n  \"inline-flex items-center gap-2 rounded-full border border-border bg-background/80 px-2.5 py-1 text-xs font-medium backdrop-blur-sm transition-colors\",\n  {\n    variants: {\n      size: {\n        sm: \"h-6 px-2 text-xs\",\n        md: \"h-7 px-2.5 text-xs\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nconst STATUS_CONFIG: Record<\n  SystemHealthStatus,\n  {\n    dotClass: string\n    pingClass: string\n    textClass: string\n    key:\n      | \"allSystemsOperational\"\n      | \"degradedPerformance\"\n      | \"majorOutage\"\n      | \"underMaintenance\"\n  }\n> = {\n  operational: {\n    dotClass: \"bg-success\",\n    pingClass: \"bg-success/75\",\n    textClass: \"text-foreground\",\n    key: \"allSystemsOperational\",\n  },\n  degraded: {\n    dotClass: \"bg-warning\",\n    pingClass: \"bg-warning/75\",\n    textClass: \"text-warning\",\n    key: \"degradedPerformance\",\n  },\n  outage: {\n    dotClass: \"bg-destructive\",\n    pingClass: \"bg-destructive/75\",\n    textClass: \"text-destructive\",\n    key: \"majorOutage\",\n  },\n  maintenance: {\n    dotClass: \"bg-primary\",\n    pingClass: \"bg-primary/75\",\n    textClass: \"text-foreground\",\n    key: \"underMaintenance\",\n  },\n}\n\n// ── Component ──\n\nexport const SystemStatusBadge = React.forwardRef<\n  HTMLElement,\n  SystemStatusBadgeProps\n>(\n  (\n    {\n      status = \"operational\",\n      label,\n      uptime,\n      href,\n      size = \"md\",\n      locale = \"en-US\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const t = UI_I18N[locale].footer\n    const config = STATUS_CONFIG[status]\n    const displayLabel = label || t[config.key]\n\n    const content = (\n      <>\n        <span className=\"relative flex size-2 shrink-0\">\n          <span\n            className={cn(\n              \"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75\",\n              config.pingClass\n            )}\n            aria-hidden=\"true\"\n          />\n          <span\n            className={cn(\n              \"relative inline-flex size-2 rounded-full\",\n              config.dotClass\n            )}\n            aria-hidden=\"true\"\n          />\n        </span>\n\n        <span className={cn(\"truncate font-medium\", config.textClass)}>\n          {displayLabel}\n        </span>\n\n        {uptime && <span className=\"text-muted-foreground\">· {uptime}</span>}\n\n        {href && (\n          <ExternalLinkIcon\n            className=\"size-3 text-muted-foreground/60 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n            aria-hidden=\"true\"\n          />\n        )}\n      </>\n    )\n\n    if (href) {\n      return (\n        <a\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className={cn(\n            systemStatusBadgeVariants({ size }),\n            \"group cursor-pointer hover:border-foreground/20 hover:bg-muted/60\",\n            className\n          )}\n          {...props}\n        >\n          {content}\n        </a>\n      )\n    }\n\n    return (\n      <span\n        ref={ref}\n        className={cn(systemStatusBadgeVariants({ size }), className)}\n        {...props}\n      >\n        {content}\n      </span>\n    )\n  }\n)\nSystemStatusBadge.displayName = \"SystemStatusBadge\"\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}