{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"status","type":"registry:ui","title":"status","description":"Status components are used to display the uptime of a service.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":[],"devDependencies":[],"registryDependencies":["badge"],"files":[{"type":"registry:ui","path":"index.tsx","content":"import type { ComponentProps, HTMLAttributes } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StatusProps = ComponentProps<typeof Badge> & {\n  status: \"online\" | \"offline\" | \"maintenance\" | \"degraded\";\n};\n\nexport const Status = ({ className, status, ...props }: StatusProps) => (\n  <Badge\n    className={cn(\"flex items-center gap-2\", \"group\", status, className)}\n    variant=\"secondary\"\n    {...props}\n  />\n);\n\nexport type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const StatusIndicator = ({\n  className,\n  ...props\n}: StatusIndicatorProps) => (\n  <span className=\"relative flex h-2 w-2\" {...props}>\n    <span\n      className={cn(\n        \"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75\",\n        \"group-[.online]:bg-emerald-500\",\n        \"group-[.offline]:bg-red-500\",\n        \"group-[.maintenance]:bg-blue-500\",\n        \"group-[.degraded]:bg-amber-500\"\n      )}\n    />\n    <span\n      className={cn(\n        \"relative inline-flex h-2 w-2 rounded-full\",\n        \"group-[.online]:bg-emerald-500\",\n        \"group-[.offline]:bg-red-500\",\n        \"group-[.maintenance]:bg-blue-500\",\n        \"group-[.degraded]:bg-amber-500\"\n      )}\n    />\n  </span>\n);\n\nexport type StatusLabelProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const StatusLabel = ({\n  className,\n  children,\n  ...props\n}: StatusLabelProps) => (\n  <span className={cn(\"text-muted-foreground\", className)} {...props}>\n    {children ?? (\n      <>\n        <span className=\"hidden group-[.online]:block\">Online</span>\n        <span className=\"hidden group-[.offline]:block\">Offline</span>\n        <span className=\"hidden group-[.maintenance]:block\">Maintenance</span>\n        <span className=\"hidden group-[.degraded]:block\">Degraded</span>\n      </>\n    )}\n  </span>\n);\n","target":"components/kibo-ui/status/index.tsx"}],"css":{}}