{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-5",
  "type": "registry:component",
  "title": "Switch 5",
  "description": "Switch 5. A toggle control that allows users to switch between two states, typically on or off.",
  "dependencies": [],
  "registryDependencies": [
    "switch"
  ],
  "files": [
    {
      "path": "components/watermelon/switch-5.tsx",
      "type": "registry:component",
      "content": "import { Switch } from '@/components/base-ui/switch';\n\nconst Switch5 = () => {\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Switch\n        className=\"focus-visible:border-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 data-[state=checked]:[&_span]:bg-destructive dark:data-[state=checked]:[&_span]:bg-destructive data-[state=checked]:border-destructive data-[state=checked]:[&_span]:border-background data-[state=checked]:bg-destructive/10 [&_span]:border\"\n        aria-label=\"Destructive Switch\"\n        defaultChecked\n      />\n      <Switch\n        className=\"data-[state=checked]:[&_span]:border-background focus-visible:border-teal-600 focus-visible:ring-teal-600/20 data-[state=checked]:border-teal-600 data-[state=checked]:bg-teal-600/10 dark:focus-visible:border-teal-400 dark:focus-visible:ring-teal-400/40 dark:data-[state=checked]:border-teal-400 dark:data-[state=checked]:bg-teal-400/20 [&_span]:border data-[state=checked]:[&_span]:bg-teal-600 dark:data-[state=checked]:[&_span]:bg-teal-400\"\n        aria-label=\"Success outline Switch\"\n        defaultChecked\n      />\n      <Switch\n        className=\"data-[state=checked]:[&_span]:border-background focus-visible:border-blue-600 focus-visible:ring-blue-600/20 data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600/10 dark:focus-visible:border-blue-400 dark:focus-visible:ring-blue-400/40 dark:data-[state=checked]:border-blue-400 dark:data-[state=checked]:bg-blue-400/20 [&_span]:border data-[state=checked]:[&_span]:bg-blue-600 dark:data-[state=checked]:[&_span]:bg-blue-400\"\n        aria-label=\"Info outline Switch\"\n        defaultChecked\n      />\n      <Switch\n        className=\"data-[state=checked]:[&_span]:border-background focus-visible:border-yellow-600 focus-visible:ring-yellow-600/20 data-[state=checked]:border-yellow-600 data-[state=checked]:bg-yellow-400/20 dark:focus-visible:border-yellow-400 dark:focus-visible:ring-yellow-400/40 dark:data-[state=checked]:border-yellow-400 dark:data-[state=checked]:bg-yellow-600/20 [&_span]:border data-[state=checked]:[&_span]:bg-yellow-600 dark:data-[state=checked]:[&_span]:bg-yellow-400\"\n        aria-label=\"Warning outline Switch\"\n        defaultChecked\n      />\n    </div>\n  );\n};\n\nexport default Switch5;\n"
    }
  ]
}