{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-10",
  "type": "registry:component",
  "title": "Switch 10",
  "description": "Switch 10. 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-10.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\nimport { HiMiniSun, HiMiniMoon } from 'react-icons/hi2';\n\nimport { Switch } from '@/components/base-ui/switch';\n\nconst Switch10 = () => {\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div>\n      <div className=\"relative inline-grid h-8 grid-cols-[1fr_1fr] items-center text-sm font-medium\">\n        <Switch\n          checked={checked}\n          onCheckedChange={setChecked}\n          className=\"peer data-[state=unchecked]:bg-input/50  absolute inset-0 rounded-md data-[size=default]:h-[inherit] data-[size=default]:w-auto [&_span]:z-10 [&_span]:rounded-sm [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:group-data-[size=default]/switch:h-full [&_span]:group-data-[size=default]/switch:w-1/2 [&_span]:data-[state=checked]:translate-x-9.25 [&_span]:data-[state=checked]:rtl:-translate-x-8.75\"\n          aria-label=\"Square switch with icon indicators\"\n        />\n\n        <span className=\"pointer-events-none relative ml-0.5 flex items-center justify-center px-2 transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-full peer-data-[state=unchecked]:rtl:-translate-x-full\">\n          <HiMiniMoon className=\"size-5\" />\n        </span>\n\n        <span className=\"peer-data-[state=checked]:text-background pointer-events-none relative mr-0.5 flex items-center justify-center px-2 transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:-translate-x-full peer-data-[state=unchecked]:invisible peer-data-[state=checked]:rtl:translate-x-full\">\n          <HiMiniSun className=\"size-5\" />  \n        </span>\n      </div>\n    </div>\n  );\n};\n\nexport default Switch10;\n"
    }
  ]
}