{
  "name": "segmented-button",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "ui/segmented-button.tsx",
      "content": "\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\ninterface SegmentedButtonItem {\n  id: string;\n  label?: string | null;\n  isLogo?: boolean;\n}\n\ninterface SegmentedButtonProps {\n  buttons: SegmentedButtonItem[];\n  defaultActive?: string;\n  onChange?: (activeId: string) => void;\n  className?: string;\n}\n\nexport default function SegmentedButton({\n  buttons,\n  defaultActive,\n  onChange,\n  className = \"\",\n}: SegmentedButtonProps) {\n  const [activeButton, setActiveButton] = useState(\n    defaultActive || buttons[0]?.id || \"\",\n  );\n  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n  const [hoverStyle, setHoverStyle] = useState({ left: 0, width: 0 });\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const activeIndex = buttons.findIndex((btn) => btn.id === activeButton);\n    const activeElement = buttonRefs.current[activeIndex];\n\n    if (activeElement) {\n      setIndicatorStyle({\n        left: activeElement.offsetLeft,\n        width: activeElement.offsetWidth,\n      });\n    }\n  }, [activeButton, buttons]);\n\n  useEffect(() => {\n    if (hoveredIndex !== null) {\n      const hoveredElement = buttonRefs.current[hoveredIndex];\n      if (hoveredElement) {\n        setHoverStyle({\n          left: hoveredElement.offsetLeft,\n          width: hoveredElement.offsetWidth,\n        });\n      }\n    } else {\n      if (containerRef.current) {\n        setHoverStyle({\n          left: 0,\n          width: containerRef.current.offsetWidth,\n        });\n      }\n    }\n  }, [hoveredIndex]);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      setHoverStyle({\n        left: 0,\n        width: containerRef.current.offsetWidth,\n      });\n    }\n  }, []);\n\n  const handleButtonClick = (buttonId: string) => {\n    setActiveButton(buttonId);\n    onChange?.(buttonId);\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`relative inline-flex items-center justify-start rounded-full ${className}`}\n      onMouseLeave={() => setHoveredIndex(null)}\n      role=\"group\"\n    >\n      <motion.div\n        className=\"absolute top-0 h-7 rounded-full bg-black/10 dark:bg-white/15\"\n        animate={{\n          left: hoverStyle.left,\n          width: hoverStyle.width,\n        }}\n        transition={{\n          type: \"spring\",\n          stiffness: 400,\n          damping: 30,\n        }}\n      />\n\n      <motion.div\n        className=\"absolute top-0 h-7 rounded-[999px] bg-gradient-to-b from-[#A8A8A8] to-[#D3D3D3] px-2.5 py-1 shadow-[inset_0_1px_0_0_rgba(0,0,0,0.15),inset_0_-1px_0_0_rgba(255,255,255,0.30),inset_0_0_0_1px_rgba(0,0,0,0.10),inset_0_-6px_10.5px_0_rgba(0,0,0,0.08)] dark:from-[#D3D3D3] dark:to-[#A8A8A8] dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.30),inset_0_-1px_0_0_rgba(255,255,255,0.60),inset_0_0_0_1px_rgba(255,255,255,0.30),inset_0_-6px_10.5px_0_rgba(255,255,255,0.13)]\"\n        animate={{\n          left: indicatorStyle.left,\n          width: indicatorStyle.width,\n        }}\n        transition={{\n          type: \"spring\",\n          stiffness: 400,\n          damping: 30,\n        }}\n      />\n\n      {buttons.map((button, index) => (\n        <button\n          key={button.id}\n          ref={(el) => {\n            buttonRefs.current[index] = el;\n          }}\n          onClick={() => handleButtonClick(button.id)}\n          onMouseEnter={() => setHoveredIndex(index)}\n          className=\"relative z-10 flex items-center justify-center gap-2 rounded-full px-2 py-1 transition-colors\"\n        >\n          {button.isLogo ? (\n            <div className=\"flex h-5 items-center justify-center\">\n              <svg\n                width=\"19\"\n                height=\"20\"\n                viewBox=\"0 0 19 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                className={`transition-all ${\n                  activeButton === button.id\n                    ? \"[filter:drop-shadow(0px_1px_0px_rgba(255,255,255,0.65))] [&_path]:fill-black dark:[&_path]:fill-black/80\"\n                    : \"[&_path]:fill-neutral-50/80 dark:[&_path]:fill-neutral-50/80\"\n                }`}\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  clipRule=\"evenodd\"\n                  d=\"M11.2851 7.03125H15.7382C15.8084 7.03125 15.8774 7.03612 15.9449 7.04554L11.296 11.6945C11.2863 11.6258 11.2812 11.5557 11.2812 11.4844V7.03125H9.5V11.4844C9.5 13.2879 10.9621 14.75 12.7656 14.75H17.2188V12.9688H12.7656C12.6943 12.9688 12.6242 12.9638 12.5556 12.954L17.2073 8.30221C17.2173 8.3719 17.2225 8.44315 17.2225 8.51562V12.9688H19.0038V8.51562C19.0038 6.71207 17.5417 5.25 15.7382 5.25H11.2851V7.03125ZM0 6.4375V6.44231L6.08623 14.1927C6.81766 15.1242 8.31376 14.6069 8.31376 13.4226V6.4375H6.53251V11.8769L2.26105 6.4375H0Z\"\n                />\n                <path\n                  fillRule=\"evenodd\"\n                  clipRule=\"evenodd\"\n                  d=\"M11.2851 7.03125H15.7382C15.8084 7.03125 15.8774 7.03612 15.9449 7.04554L11.296 11.6945C11.2863 11.6258 11.2812 11.5557 11.2812 11.4844V7.03125H9.5V11.4844C9.5 13.2879 10.9621 14.75 12.7656 14.75H17.2188V12.9688H12.7656C12.6943 12.9688 12.6242 12.9638 12.5556 12.954L17.2073 8.30221C17.2173 8.3719 17.2225 8.44315 17.2225 8.51562V12.9688H19.0038V8.51562C19.0038 6.71207 17.5417 5.25 15.7382 5.25H11.2851V7.03125ZM0 6.4375V6.44231L6.08623 14.1927C6.81766 15.1242 8.31376 14.6069 8.31376 13.4226V6.4375H6.53251V11.8769L2.26105 6.4375H0Z\"\n                />\n              </svg>\n            </div>\n          ) : (\n            <span\n              className={`text-center font-normal font-sans text-sm leading-tight transition-colors ${\n                activeButton === button.id\n                  ? \"text-black [text-shadow:_0px_1px_0px_rgb(255_255_255_/_0.65)] dark:text-black/80\"\n                  : \"text-black-50/80 dark:text-neutral-50/80\"\n              }`}\n            >\n              {button.label}\n            </span>\n          )}\n        </button>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}