{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "elastic-kinetic-toggle",
  "type": "registry:ui",
  "title": "Elastic Kinetic Toggle",
  "description": "Physics-driven elastic switch with gooey spring overshoot, tactile snap feedback, and responsive state indicators.",
  "category": "animations",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/animations/elastic-kinetic-toggle/elastic-kinetic-toggle.tsx",
      "type": "registry:ui",
      "target": "components/ui/elastic-kinetic-toggle.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { Check, X, Lightning, Power } from '@phosphor-icons/react';\n\nexport interface ElasticKineticToggleProps {\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n  colorTheme?: 'emerald' | 'indigo' | 'rose' | 'amber';\n  size?: 'sm' | 'md' | 'lg';\n  label?: string;\n  className?: string;\n}\n\nexport const ElasticKineticToggle: React.FC<ElasticKineticToggleProps> = ({\n  checked: controlledChecked,\n  onChange,\n  colorTheme = 'emerald',\n  size = 'md',\n  label = 'Kinetic State',\n  className = '',\n}) => {\n  const [internalChecked, setInternalChecked] = useState(false);\n  const isChecked = controlledChecked !== undefined ? controlledChecked : internalChecked;\n\n  const toggle = () => {\n    const next = !isChecked;\n    setInternalChecked(next);\n    onChange?.(next);\n  };\n\n  const themeConfig = {\n    emerald: {\n      activeBg: 'bg-emerald-500 dark:bg-emerald-500',\n      activeThumb: 'bg-white text-emerald-600',\n      activeRing: 'border-emerald-400',\n      activeShadow: 'shadow-[0_0_20px_rgba(16,185,129,0.35)]',\n      badge: 'text-emerald-500 bg-emerald-500/10 border-emerald-500/20',\n    },\n    indigo: {\n      activeBg: 'bg-indigo-600 dark:bg-indigo-500',\n      activeThumb: 'bg-white text-indigo-600',\n      activeRing: 'border-indigo-400',\n      activeShadow: 'shadow-[0_0_20px_rgba(99,102,241,0.35)]',\n      badge: 'text-indigo-500 bg-indigo-500/10 border-indigo-500/20',\n    },\n    rose: {\n      activeBg: 'bg-rose-500 dark:bg-rose-500',\n      activeThumb: 'bg-white text-rose-600',\n      activeRing: 'border-rose-400',\n      activeShadow: 'shadow-[0_0_20px_rgba(244,63,94,0.35)]',\n      badge: 'text-rose-500 bg-rose-500/10 border-rose-500/20',\n    },\n    amber: {\n      activeBg: 'bg-amber-500 dark:bg-amber-500',\n      activeThumb: 'bg-white text-amber-600',\n      activeRing: 'border-amber-400',\n      activeShadow: 'shadow-[0_0_20px_rgba(245,158,11,0.35)]',\n      badge: 'text-amber-500 bg-amber-500/10 border-amber-500/20',\n    },\n  }[colorTheme];\n\n  const sizeConfig = {\n    sm: {\n      track: 'w-14 h-8 p-1',\n      thumb: 'h-6 w-6',\n      xActive: 24,\n      iconSize: 12,\n    },\n    md: {\n      track: 'w-20 h-11 p-1.5',\n      thumb: 'h-8 w-8',\n      xActive: 36,\n      iconSize: 16,\n    },\n    lg: {\n      track: 'w-24 h-13 p-2',\n      thumb: 'h-9 w-9',\n      xActive: 44,\n      iconSize: 18,\n    },\n  }[size];\n\n  return (\n    <div className={`flex flex-col items-center gap-4 select-none ${className}`}>\n      {/* Outer interactive pill button */}\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        onClick={toggle}\n        className={`relative ${sizeConfig.track} rounded-full transition-colors duration-300 cursor-pointer flex items-center ${\n          isChecked\n            ? `${themeConfig.activeBg} ${themeConfig.activeShadow}`\n            : 'bg-zinc-200 dark:bg-zinc-800'\n        }`}\n      >\n        {/* Elastic kinetic thumb with fluid overshoot physics */}\n        <motion.div\n          animate={{\n            x: isChecked ? sizeConfig.xActive : 0,\n            scaleX: [1, 1.25, 0.95, 1],\n            scaleY: [1, 0.85, 1.05, 1],\n          }}\n          transition={{\n            type: 'spring',\n            stiffness: 500,\n            damping: 24,\n            mass: 0.8,\n          }}\n          className={`relative z-10 ${sizeConfig.thumb} rounded-full bg-white dark:bg-zinc-100 shadow-md flex items-center justify-center text-zinc-700 transition-colors`}\n        >\n          {isChecked ? (\n            <Check size={sizeConfig.iconSize} weight=\"bold\" className={themeConfig.activeThumb.split(' ')[1]} />\n          ) : (\n            <X size={sizeConfig.iconSize} weight=\"bold\" className=\"text-zinc-400\" />\n          )}\n        </motion.div>\n\n        {/* Shockwave ripple ring on toggle */}\n        <AnimatePresence>\n          {isChecked && (\n            <motion.div\n              initial={{ scale: 0.8, opacity: 0.9 }}\n              animate={{ scale: 1.35, opacity: 0 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.45, ease: 'easeOut' }}\n              className={`absolute inset-0 rounded-full border-2 ${themeConfig.activeRing} pointer-events-none`}\n            />\n          )}\n        </AnimatePresence>\n      </button>\n\n      {/* State label & badge */}\n      {label && (\n        <div className=\"flex items-center gap-2 text-xs font-mono\">\n          <span className=\"text-zinc-600 dark:text-zinc-400 font-medium\">{label}:</span>\n          <span className={`px-2 py-0.5 rounded-md font-bold uppercase text-[10px] border ${\n            isChecked ? themeConfig.badge : 'text-zinc-500 bg-zinc-100 dark:bg-zinc-800 border-zinc-200 dark:border-white/5'\n          }`}>\n            {isChecked ? 'ENGAGED' : 'DISENGAGED'}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n};\n"
    }
  ]
}