{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-indicator",
  "type": "registry:component",
  "title": "Status Indicator",
  "description": "Compact status label with tone, variant, and activity dot options.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/status-indicator/status-indicator.tsx",
      "content": "import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\nconst statusIndicatorVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-full border font-medium transition-colors\",\n  {\n    compoundVariants: [\n      {\n        className: \"border-border text-foreground\",\n        tone: \"neutral\",\n        variant: \"outline\",\n      },\n      {\n        className: \"border-transparent bg-muted text-foreground\",\n        tone: \"neutral\",\n        variant: \"soft\",\n      },\n      {\n        className: \"bg-foreground text-background\",\n        tone: \"neutral\",\n        variant: \"solid\",\n      },\n      {\n        className:\n          \"border-emerald-200 text-emerald-700 dark:border-emerald-900 dark:text-emerald-300\",\n        tone: \"success\",\n        variant: \"outline\",\n      },\n      {\n        className:\n          \"bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300\",\n        tone: \"success\",\n        variant: \"soft\",\n      },\n      {\n        className: \"bg-emerald-600 text-white dark:bg-emerald-500\",\n        tone: \"success\",\n        variant: \"solid\",\n      },\n      {\n        className:\n          \"border-amber-200 text-amber-700 dark:border-amber-900 dark:text-amber-300\",\n        tone: \"warning\",\n        variant: \"outline\",\n      },\n      {\n        className:\n          \"bg-amber-100 text-amber-800 dark:bg-amber-950/60 dark:text-amber-300\",\n        tone: \"warning\",\n        variant: \"soft\",\n      },\n      {\n        className:\n          \"bg-amber-500 text-amber-950 dark:bg-amber-400 dark:text-amber-950\",\n        tone: \"warning\",\n        variant: \"solid\",\n      },\n      {\n        className:\n          \"border-red-200 text-red-700 dark:border-red-900 dark:text-red-300\",\n        tone: \"danger\",\n        variant: \"outline\",\n      },\n      {\n        className:\n          \"bg-red-100 text-red-800 dark:bg-red-950/60 dark:text-red-300\",\n        tone: \"danger\",\n        variant: \"soft\",\n      },\n      {\n        className: \"bg-red-600 text-white dark:bg-red-500\",\n        tone: \"danger\",\n        variant: \"solid\",\n      },\n      {\n        className:\n          \"border-sky-200 text-sky-700 dark:border-sky-900 dark:text-sky-300\",\n        tone: \"info\",\n        variant: \"outline\",\n      },\n      {\n        className:\n          \"bg-sky-100 text-sky-800 dark:bg-sky-950/60 dark:text-sky-300\",\n        tone: \"info\",\n        variant: \"soft\",\n      },\n      {\n        className: \"bg-sky-600 text-white dark:bg-sky-500\",\n        tone: \"info\",\n        variant: \"solid\",\n      },\n    ],\n    defaultVariants: {\n      size: \"md\",\n      tone: \"neutral\",\n      variant: \"soft\",\n    },\n    variants: {\n      size: {\n        lg: \"min-h-8 px-3 text-sm\",\n        md: \"min-h-7 px-2.5 text-xs\",\n        sm: \"min-h-6 px-2 text-[11px]\",\n      },\n      tone: {\n        danger: \"\",\n        info: \"\",\n        neutral: \"\",\n        success: \"\",\n        warning: \"\",\n      },\n      variant: {\n        outline: \"bg-background\",\n        soft: \"border-transparent\",\n        solid: \"border-transparent text-primary-foreground\",\n      },\n    },\n  },\n);\n\nconst dotVariants = cva(\"rounded-full\", {\n  defaultVariants: {\n    size: \"md\",\n    tone: \"neutral\",\n  },\n  variants: {\n    size: {\n      lg: \"size-2.5\",\n      md: \"size-2\",\n      sm: \"size-1.5\",\n    },\n    tone: {\n      danger: \"bg-red-500\",\n      info: \"bg-sky-500\",\n      neutral: \"bg-muted-foreground\",\n      success: \"bg-emerald-500\",\n      warning: \"bg-amber-500\",\n    },\n  },\n});\n\nexport type StatusIndicatorProps = React.HTMLAttributes<HTMLSpanElement> &\n  VariantProps<typeof statusIndicatorVariants> & {\n    label?: string;\n    pulse?: boolean;\n    showDot?: boolean;\n  };\n\nconst StatusIndicator = React.forwardRef<HTMLSpanElement, StatusIndicatorProps>(\n  (\n    {\n      children,\n      className,\n      label,\n      pulse = false,\n      showDot = true,\n      size,\n      tone,\n      variant,\n      ...props\n    },\n    reference,\n  ) => {\n    const content = children ?? label;\n\n    return (\n      <span\n        className={cn(\n          statusIndicatorVariants({ size, tone, variant }),\n          className,\n        )}\n        ref={reference}\n        {...props}\n      >\n        {showDot ? (\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              dotVariants({ size, tone }),\n              pulse ? \"animate-pulse\" : undefined,\n            )}\n          />\n        ) : null}\n        {content}\n      </span>\n    );\n  },\n);\n\nStatusIndicator.displayName = \"StatusIndicator\";\n\nexport { dotVariants, StatusIndicator, statusIndicatorVariants };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}