{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-indicator",
  "title": "Status Indicator",
  "description": "Compact status label with tone, variant, and activity dot options.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "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 = ({\n  children,\n  className,\n  label,\n  pulse = false,\n  ref: reference,\n  showDot = true,\n  size,\n  tone,\n  variant,\n  ...props\n}: StatusIndicatorProps & { ref?: React.Ref<HTMLSpanElement> }) => {\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\nStatusIndicator.displayName = \"StatusIndicator\";\n\nexport { dotVariants, StatusIndicator, statusIndicatorVariants };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}