{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "toggle-pill-switch",
  "type": "registry:ui",
  "title": "Kinetic Toggle Pill Switch",
  "description": "Smooth physics toggle switch with animated status icon, micro-indicator glow, and accessible state roles.",
  "category": "forms",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/forms/toggle-pill-switch/toggle-pill-switch.tsx",
      "type": "registry:ui",
      "target": "components/ui/toggle-pill-switch.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\nexport const TogglePillSwitch: React.FC = () => {\n  const [enabled, setEnabled] = useState(true);\n\n  return (\n    <div className=\"flex items-center gap-3 font-mono text-xs select-none\">\n      <button\n        onClick={() => setEnabled(!enabled)}\n        className={`relative w-14 h-8 rounded-full p-1 transition-colors cursor-pointer ${\n          enabled ? 'bg-indigo-600' : 'bg-zinc-300 dark:bg-zinc-800'\n        }`}\n      >\n        <motion.div\n          animate={{ x: enabled ? 24 : 0 }}\n          transition={{ type: 'spring', stiffness: 500, damping: 30 }}\n          className=\"w-6 h-6 rounded-full bg-white shadow-md flex items-center justify-center\"\n        >\n          <div className={`w-2 h-2 rounded-full ${enabled ? 'bg-indigo-600' : 'bg-zinc-400'}`} />\n        </motion.div>\n      </button>\n\n      <span className={`font-semibold ${enabled ? 'text-indigo-500' : 'text-zinc-500'}`}>\n        {enabled ? 'SYSTEM ARMED' : 'STANDBY'}\n      </span>\n    </div>\n  );\n};\n"
    }
  ]
}