shadcn/app/public/registry/styles/default/status.json

{
  "name": "status",
  "description": "Status indicator component",
  "files": [
    {
      "name": "status.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst statusVariants = cva(\n  \"inline-flex items-center gap-2 rounded-full px-2.5 py-0.5 text-xs font-medium\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary/10 text-primary\",\n        success:\n          \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\",\n        warning:\n          \"bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400\",\n        error: \"bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400\",\n        info: \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400\",\n        gray: \"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400\",\n      },\n      dot: {\n        true: \"pl-1.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      dot: true,\n    },\n  }\n)\n\nexport interface StatusProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof statusVariants> {}\n\nconst Status = React.forwardRef<HTMLSpanElement, StatusProps>(\n  ({ className, variant, dot, children, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(statusVariants({ variant, dot }), className)}\n        {...props}\n      >\n        {dot && (\n          <span\n            className={cn(\n              \"h-1.5 w-1.5 rounded-full\",\n              variant === \"success\" && \"bg-green-500\",\n              variant === \"warning\" && \"bg-yellow-500\",\n              variant === \"error\" && \"bg-red-500\",\n              variant === \"info\" && \"bg-blue-500\",\n              variant === \"gray\" && \"bg-gray-500\",\n              variant === \"default\" && \"bg-primary\"\n            )}\n          />\n        )}\n        {children}\n      </span>\n    )\n  }\n)\nStatus.displayName = \"Status\"\n\nexport { Status, statusVariants }\n"
    }
  ],
  "type": "components:ui"
}