{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "option-picker",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/option-picker.tsx",
      "content": "\"use client\";\n\nimport { useState, useRef, useEffect, type FC } from \"react\";\nimport { motion, AnimatePresence, type Variants } from \"motion/react\";\nimport { ChevronDown, Globe, Sun, Moon } from \"lucide-react\";\nimport { TbLockFilled } from \"react-icons/tb\";\nimport { type IconType } from \"react-icons\";\n\n// --- Types ---\nexport interface Option {\n  id: string;\n  label: string;\n  icon: IconType;\n}\n\ninterface OptionPickerProps {\n  options?: Option[]; \n}\n\n// --- Default Options ---\nconst DEFAULT_OPTIONS: Option[] = [\n  { id: \"private\", label: \"Private\", icon: TbLockFilled },\n  { id: \"public\", label: \"Public\", icon: Globe },\n];\n\n// --- Animations ---\nconst rollVariants: Variants = {\n  initial: { y: 16, opacity: 0 },\n  animate: { y: 0, opacity: 1 },\n  exit: { y: -16, opacity: 0 },\n};\n\n// --- Component ---\nexport const OptionPicker: FC<OptionPickerProps> = ({ options }) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selected, setSelected] = useState<Option>(options?.[0] || DEFAULT_OPTIONS[0]);\n  const [isDark, setIsDark] = useState<boolean>(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Dark Mode Effect\n  useEffect(() => {\n    if (isDark) document.documentElement.classList.add(\"dark\");\n    else document.documentElement.classList.remove(\"dark\");\n  }, [isDark]);\n\n  // Click outside to close\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, []);\n\n  const toggleOpen = () => setIsOpen((prev) => !prev);\n  const handleSelect = (option: Option) => {\n    setSelected(option);\n    setIsOpen(false);\n  };\n\n  // Use provided options or default\n  const data = options || DEFAULT_OPTIONS;\n\n  return (\n    <div className=\"h-screen w-full flex flex-col justify-center items-center bg-gray-50 dark:bg-zinc-950 transition-colors duration-500\">\n      {/* THEME TOGGLE */}\n      <button\n        onClick={() => setIsDark(!isDark)}\n        title={isDark ? \"Switch to Light Mode\" : \"Switch to Dark Mode\"}\n        aria-label=\"Toggle Theme\"\n        className=\"mb-12 p-3 rounded-full bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-sm transition-all active:scale-90\"\n      >\n        {isDark ? <Sun className=\"text-yellow-400\" size={20} /> : <Moon className=\"text-zinc-600\" size={20} />}\n      </button>\n\n      <div className=\"relative inline-block\" ref={containerRef}>\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              initial={{ opacity: 0, scale: 0.9, y: 10, x: \"-50%\" }}\n              animate={{ opacity: 1, scale: 1, y: -8, x: \"-50%\" }}\n              exit={{ opacity: 0, scale: 0.9, y: 10, x: \"-50%\" }}\n              transition={{ type: \"spring\", damping: 20, stiffness: 300 }}\n              style={{ left: \"50%\" }}\n              className=\"absolute bottom-full mb-2 z-50 origin-bottom\"\n              role=\"menu\"\n              aria-label=\"Visibility options\"\n            >\n              <div className=\"bg-[#F3F3F3] dark:bg-zinc-800 border border-gray-100 dark:border-zinc-700 rounded-full p-1.5 py-1 flex gap-2 whitespace-nowrap min-w-max relative shadow-xl\">\n                {data.map((option, index) => {\n                  const isActive = selected.id === option.id;\n                  const isFirst = index === 0;\n                  const isLast = index === data.length - 1;\n\n                  const roundedClasses = `\n                    ${isFirst ? \"rounded-l-full rounded-r-2xl\" : \"\"}\n                    ${isLast ? \"rounded-r-full rounded-l-2xl\" : \"\"}\n                    ${!isFirst && !isLast ? \"rounded-none\" : \"\"}\n                  `;\n\n                  return (\n                    <motion.button\n                      key={option.id}\n                      onClick={() => handleSelect(option)}\n                      whileTap={{ scale: 0.95 }}\n                      whileHover={{ y: -1 }}\n                      title={`Set as ${option.label}`}\n                      aria-label={`Select ${option.label}`}\n                      className={`relative flex items-center gap-2 px-5 py-3 font-semibold text-[15px] transition-all duration-300 ${roundedClasses} \n                      bg-[#FEFEFE] dark:bg-zinc-900 \n                      ${isActive ? \"text-[#010101] dark:text-white\" : \"text-[#6E6E6E] dark:text-zinc-400\"}`}\n                    >\n                      <motion.span initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }}>\n                        <option.icon size={22} />\n                      </motion.span>\n                      <span className=\"relative text-bold text-lg z-10\">{option.label}</span>\n                    </motion.button>\n                  );\n                })}\n\n                {/* Tooltip Arrow */}\n                <div\n                  className=\"absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 \n                  bg-[#F3F3F3] dark:bg-zinc-800 \n                  border-r border-b border-gray-100 dark:border-zinc-700 rotate-45\"\n                />\n              </div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        {/* MAIN BUTTON */}\n        <motion.button\n          onClick={toggleOpen}\n          whileTap={{ scale: 0.97 }}\n          title=\"Change Visibility\"\n          aria-label={`Visibility is currently ${selected.label}. Click to change.`}\n          aria-expanded={isOpen}\n          className={`flex items-center justify-center gap-2 px-4 py-4 rounded-full transition-all duration-300 select-none border border-transparent\n          ${isOpen ? \"bg-[#E5E5E5] dark:bg-zinc-800 dark:border-zinc-700\" : \"bg-[#F4F4F4] dark:bg-zinc-900\"}`}\n        >\n          <AnimatePresence mode=\"popLayout\">\n            <motion.div key={selected.id} variants={rollVariants} initial=\"initial\" animate=\"animate\" exit=\"exit\" className=\"flex items-center gap-2\">\n              <selected.icon\n                size={24}\n                className={`transition-colors duration-300 ${isOpen ? \"text-[#AEAEAE] dark:text-zinc-500\" : \"text-[#AFAFAF] dark:text-zinc-400\"}`}\n              />\n              <span className=\"font-bold text-[#525252] dark:text-zinc-200 text-[18px] leading-none\">{selected.label}</span>\n            </motion.div>\n          </AnimatePresence>\n\n          <motion.div animate={{ rotate: isOpen ? 180 : 0 }} className=\"flex items-center\">\n            <ChevronDown\n              size={24}\n              className={`transition-colors duration-300 ${isOpen ? \"text-[#AEAEAE] dark:text-zinc-500\" : \"text-[#AFAFAF] dark:text-zinc-400\"}`}\n              strokeWidth={2.5}\n            />\n          </motion.div>\n        </motion.button>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/option-picker.tsx"
    }
  ],
  "type": "registry:ui"
}