{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-20",
  "type": "registry:component",
  "title": "Switch 20",
  "description": "Switch 20. A toggle control that allows users to switch between two states, typically on or off.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "switch"
  ],
  "files": [
    {
      "path": "components/watermelon/switch-20.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useId, useState } from 'react';\nimport { HiBell, HiBellSlash } from 'react-icons/hi2';\n\nimport { Switch } from '@/components/base-ui/switch';\n\nconst Switch20 = () => {\n  const id = useId();\n  const [enabled, setEnabled] = useState(false);\n  const Icon = enabled ? HiBell : HiBellSlash;\n\n  return (\n    <label\n      htmlFor={id}\n      className=\"flex min-h-10 cursor-pointer items-center gap-3 rounded-full bg-muted/60 py-2 pr-3 pl-2 shadow-[0_0_0_1px_rgba(0,0,0,0.06)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08)]\"\n    >\n      <span className=\"grid size-8 place-items-center rounded-full bg-background text-foreground shadow-sm\">\n        <Icon className=\"size-4\" aria-hidden=\"true\" />\n      </span>\n      <span className=\"min-w-24 text-sm font-medium text-foreground\">\n        {enabled ? 'Alerts on' : 'Alerts paused'}\n      </span>\n      <Switch\n        id={id}\n        checked={enabled}\n        onCheckedChange={setEnabled}\n        aria-label=\"Toggle alerts\"\n      />\n    </label>\n  );\n};\n\nexport default Switch20;\n"
    }
  ]
}