{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "segmented-control-switch",
  "type": "registry:ui",
  "title": "Apple-Style Segmented Control",
  "description": "Fluid segmented tab switcher with gliding spring layout indicator and micro-haptic state feedback.",
  "category": "layout",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "registry/layout/segmented-control-switch/segmented-control-switch.tsx",
      "type": "registry:ui",
      "target": "components/ui/segmented-control-switch.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion } from 'framer-motion';\n\nconst OPTIONS = ['Daily', 'Weekly', 'Monthly', 'Annual'];\n\nexport const SegmentedControlSwitch: React.FC = () => {\n  const [active, setActive] = useState('Monthly');\n\n  return (\n    <div className=\"flex items-center p-1 rounded-xl bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 font-mono text-xs\">\n      {OPTIONS.map((opt) => {\n        const isSelected = active === opt;\n        return (\n          <button\n            key={opt}\n            onClick={() => setActive(opt)}\n            className={`relative px-3.5 py-1.5 rounded-lg transition-colors cursor-pointer ${\n              isSelected ? 'text-zinc-900 dark:text-white font-bold' : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300'\n            }`}\n          >\n            {isSelected && (\n              <motion.div\n                layoutId=\"segmented-pill\"\n                className=\"absolute inset-0 rounded-lg bg-white dark:bg-zinc-800 shadow-xs border border-zinc-200/50 dark:border-white/10\"\n                transition={{ type: 'spring', stiffness: 450, damping: 30 }}\n              />\n            )}\n            <span className=\"relative z-10\">{opt}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n"
    }
  ]
}