{
  "name": "status-variants-demo",
  "type": "registry:example",
  "registryDependencies": [
    "status"
  ],
  "files": [
    {
      "path": "examples/status-variants-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  Status,\n  StatusIndicator,\n  StatusLabel,\n} from \"@/registry/bases/radix/ui/status\";\n\nexport default function StatusVariantsDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Success Variants</h3>\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Status variant=\"success\">\n            <StatusIndicator />\n            <StatusLabel>Online</StatusLabel>\n          </Status>\n          <Status variant=\"success\">\n            <StatusIndicator />\n            <StatusLabel>Active</StatusLabel>\n          </Status>\n          <Status variant=\"success\" className=\"hidden sm:inline-flex\">\n            <StatusIndicator />\n            <StatusLabel>Connected</StatusLabel>\n          </Status>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Error Variants</h3>\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Status variant=\"error\">\n            <StatusIndicator />\n            <StatusLabel>Offline</StatusLabel>\n          </Status>\n          <Status variant=\"error\">\n            <StatusIndicator />\n            <StatusLabel>Disconnected</StatusLabel>\n          </Status>\n          <Status variant=\"error\" className=\"hidden sm:inline-flex\">\n            <StatusIndicator />\n            <StatusLabel>Failed</StatusLabel>\n          </Status>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Warning Variants</h3>\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Status variant=\"warning\">\n            <StatusIndicator />\n            <StatusLabel>Away</StatusLabel>\n          </Status>\n          <Status variant=\"warning\">\n            <StatusIndicator />\n            <StatusLabel>Busy</StatusLabel>\n          </Status>\n          <Status variant=\"warning\" className=\"hidden sm:inline-flex\">\n            <StatusIndicator />\n            <StatusLabel>Pending</StatusLabel>\n          </Status>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Info Variants</h3>\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Status variant=\"info\">\n            <StatusIndicator />\n            <StatusLabel>Idle</StatusLabel>\n          </Status>\n          <Status variant=\"info\">\n            <StatusIndicator />\n            <StatusLabel>In Progress</StatusLabel>\n          </Status>\n          <Status variant=\"info\" className=\"hidden sm:inline-flex\">\n            <StatusIndicator />\n            <StatusLabel>Syncing</StatusLabel>\n          </Status>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium\">Default Variants</h3>\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Status variant=\"default\">\n            <StatusIndicator />\n            <StatusLabel>Unknown</StatusLabel>\n          </Status>\n          <Status variant=\"default\">\n            <StatusIndicator />\n            <StatusLabel>Not Set</StatusLabel>\n          </Status>\n          <Status variant=\"default\" className=\"hidden sm:inline-flex\">\n            <StatusIndicator />\n            <StatusLabel>N/A</StatusLabel>\n          </Status>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}