{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-17",
  "type": "registry:component",
  "title": "Switch 17",
  "description": "Switch 17. A toggle control that allows users to switch between two states, typically on or off.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "label",
    "switch"
  ],
  "files": [
    {
      "path": "components/watermelon/switch-17.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { HiMoon, HiSun } from 'react-icons/hi2';\n\nimport { Label } from '@/components/base-ui/label';\nimport { Switch } from '@/components/base-ui/switch';\n\nconst Switch17 = () => {\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div className=\"inline-flex items-center gap-2\">\n      <Switch\n        id=\"icon-label\"\n        checked={checked}\n        onCheckedChange={setChecked}\n        aria-label=\"Toggle switch\"\n      />\n      <Label htmlFor=\"icon-label\">\n        <span className=\"sr-only\">Toggle switch</span>\n        {checked ? (\n          <HiMoon className=\"size-4\" aria-hidden=\"true\" />\n        ) : (\n          <HiSun className=\"size-4\" aria-hidden=\"true\" />\n        )}\n      </Label>\n    </div>\n  );\n};\n\nexport default Switch17;\n"
    }
  ]
}