{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-indicator",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/status-indicator.tsx",
      "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface StatusIndicatorProps {\n  state: \"active\" | \"down\" | \"fixing\" | \"idle\";\n  color?: string;\n  label?: string;\n  className?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  labelClassName?: string;\n}\n\nconst getStateColors = (state: StatusIndicatorProps[\"state\"]) => {\n  switch (state) {\n    case \"active\":\n      return { dot: \"bg-green-500\", ping: \"bg-green-300\" };\n    case \"down\":\n      return { dot: \"bg-red-500\", ping: \"bg-red-300\" };\n    case \"fixing\":\n      return { dot: \"bg-yellow-500\", ping: \"bg-yellow-300\" };\n    case \"idle\":\n    default:\n      return { dot: \"bg-slate-700\", ping: \"bg-slate-400\" };\n  }\n};\n\nconst getSizeClasses = (size: StatusIndicatorProps[\"size\"]) => {\n  switch (size) {\n    case \"sm\":\n      return { dot: \"h-2 w-2\", ping: \"h-2 w-2\" };\n    case \"lg\":\n      return { dot: \"h-4 w-4\", ping: \"h-4 w-4\" };\n    case \"md\":\n    default:\n      return { dot: \"h-3 w-3\", ping: \"h-3 w-3\" };\n  }\n};\n\nexport const StatusIndicator: React.FC<StatusIndicatorProps> = ({\n  state = \"idle\",\n  label,\n  className,\n  size = \"md\",\n  labelClassName\n}) => {\n  const shouldAnimate =\n    state === \"active\" || state === \"fixing\" || state === \"down\";\n  const colors = getStateColors(state);\n  const sizeClasses = getSizeClasses(size);\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <div className=\"relative flex items-center\">\n        {shouldAnimate && (\n          <span\n            className={cn(\n              \"absolute inline-flex rounded-full opacity-75 animate-ping\",\n              sizeClasses.ping,\n              colors.ping\n            )}\n          />\n        )}\n        <span\n          className={cn(\n            \"relative inline-flex rounded-full\",\n            sizeClasses.dot,\n            colors.dot\n          )}\n        />\n      </div>\n      {label && (\n        <p\n          className={cn(\n            \"text-sm text-slate-700 dark:text-slate-300\",\n            labelClassName\n          )}\n        >\n          {label}\n        </p>\n      )}\n    </div>\n  );\n};\n\n",
      "type": "registry:ui",
      "target": "components/ui/status-indicator.tsx"
    }
  ],
  "type": "registry:ui"
}