{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "color-theme-switcher-pill",
  "type": "registry:ui",
  "title": "Color Theme Switcher Pill",
  "description": "Tactile theme pill toggle with animated sun/moon morph physics and interactive swatch switching.",
  "category": "forms",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/forms/color-theme-switcher-pill/color-theme-switcher-pill.tsx",
      "type": "registry:ui",
      "target": "components/ui/color-theme-switcher-pill.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { Check } from '@phosphor-icons/react';\n\nexport const ColorThemeSwitcherPill: React.FC = () => {\n  const [selectedColor, setSelectedColor] = useState('indigo');\n\n  const themes = [\n    { id: 'indigo', name: 'Indigo Pulse', bg: 'bg-indigo-500', hex: '#6366f1' },\n    { id: 'emerald', name: 'Emerald Forest', bg: 'bg-emerald-500', hex: '#10b981' },\n    { id: 'rose', name: 'Rose Cyber', bg: 'bg-rose-500', hex: '#f43f5e' },\n    { id: 'amber', name: 'Amber Gold', bg: 'bg-amber-500', hex: '#f59e0b' },\n    { id: 'cyan', name: 'Cyan Deep', bg: 'bg-cyan-500', hex: '#06b6d4' },\n  ];\n\n  return (\n    <div className=\"flex items-center gap-2 p-2 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-950 shadow-lg\">\n      {themes.map((t) => (\n        <button\n          key={t.id}\n          onClick={() => setSelectedColor(t.id)}\n          className=\"relative flex h-8 w-8 items-center justify-center rounded-xl transition-transform hover:scale-105 active:scale-95 cursor-pointer\"\n        >\n          <span className={`h-6 w-6 rounded-lg ${t.bg} shadow-sm flex items-center justify-center`}>\n            {selectedColor === t.id && (\n              <Check size={12} weight=\"bold\" className=\"text-white\" />\n            )}\n          </span>\n          {selectedColor === t.id && (\n            <motion.div\n              layoutId=\"theme-active-ring\"\n              className=\"absolute inset-0 rounded-xl border-2 border-zinc-900 dark:border-white\"\n            />\n          )}\n        </button>\n      ))}\n    </div>\n  );\n};\n"
    }
  ]
}