{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch-9",
  "type": "registry:component",
  "title": "Switch 9",
  "description": "Switch 9. 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-9.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { FiCheck, FiX } from 'react-icons/fi';\n\nimport { Switch } from '@/components/base-ui/switch';\n\nconst Switch9 = () => {\n  const [checked, setChecked] = useState<boolean>(true);\n\n  return (\n    <div>\n      <div className=\"relative inline-grid h-7 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 data-[size=default]:h-[inherit] data-[size=default]:w-14 [&_span]:z-10 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:group-data-[size=default]/switch:size-6.5 [&_span]:data-[state=checked]:translate-x-7 [&_span]:data-[state=checked]:rtl:-translate-x-7\"\n          aria-label=\"Switch with permanent icon indicators\"\n        />\n        <span className=\"pointer-events-none relative ml-0.5 flex min-w-8 items-center justify-center text-center transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] peer-data-[state=checked]:invisible peer-data-[state=unchecked]:translate-x-6 peer-data-[state=unchecked]:rtl:-translate-x-6\">\n          <FiCheck className=\"size-4\" aria-hidden=\"true\" />\n        </span>\n        <span className=\"peer-data-[state=checked]:text-background pointer-events-none relative flex min-w-8 items-center justify-center text-center 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          <FiX className=\"size-4\" aria-hidden=\"true\" />\n        </span>\n      </div>\n    </div>\n  );\n};\n\nexport default Switch9;\n"
    }
  ]
}