{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "extended-toolbar",
  "type": "registry:component",
  "title": "Extended Toolbar",
  "description": "A responsive extended toolbar component that enhances usability with smooth micro-interactions, contextual actions, and instant visual feedback for quick and confident user interactions.",
  "dependencies": [
    "framer-motion",
    "lucide-react",
    "react-icons",
    "react-use-measure"
  ],
  "files": [
    {
      "path": "components/watermelon/extended-toolbar.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { type FC, useState, forwardRef } from 'react';\nimport { motion, type Transition } from 'framer-motion';\nimport useMeasure from 'react-use-measure';\nimport { ChevronRight } from 'lucide-react';\nimport {\n  BsChatLeftFill,\n  BsFillArchiveFill,\n  BsFillInboxFill,\n  BsFillPinAngleFill,\n  BsTrash3Fill,\n} from 'react-icons/bs';\nimport { IoImage } from 'react-icons/io5';\nimport { PiShareFatFill } from 'react-icons/pi';\nimport { AiFillTag } from 'react-icons/ai';\nimport type { IconType } from 'react-icons';\n\ninterface ToolbarItem {\n  icon: IconType;\n  label: string;\n}\n\ninterface ExtendedToolbarProps {\n  primaryItems?: ToolbarItem[];\n  secondaryItems?: ToolbarItem[];\n}\n\nconst springConfig: Transition = {\n  type: 'spring',\n  stiffness: 240,\n  damping: 24,\n  mass: 1.2,\n};\n\nconst DEFAULT_PRIMARY: ToolbarItem[] = [\n  { icon: BsFillInboxFill, label: 'Inbox' },\n  { icon: BsChatLeftFill, label: 'Chat' },\n  { icon: BsFillPinAngleFill, label: 'Pin' },\n  { icon: AiFillTag, label: 'Tag' },\n];\n\nconst DEFAULT_SECONDARY: ToolbarItem[] = [\n  { icon: IoImage, label: 'Image' },\n  { icon: BsFillArchiveFill, label: 'Archive' },\n  { icon: PiShareFatFill, label: 'Share' },\n  { icon: BsTrash3Fill, label: 'Delete' },\n];\nconst SIDE_PADDING = 8;\nexport const ExtendedToolbar: FC<ExtendedToolbarProps> = ({\n  primaryItems = DEFAULT_PRIMARY,\n  secondaryItems = DEFAULT_SECONDARY,\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const [primaryRef, primaryBounds] = useMeasure({ offsetSize: true });\n  const [secondaryRef, secondaryBounds] = useMeasure({ offsetSize: true });\n  const [toggleRef, toggleBounds] = useMeasure({ offsetSize: true });\n\n  const currentWidth = isExpanded\n    ? secondaryBounds.width + toggleBounds.width + SIDE_PADDING\n    : primaryBounds.width + toggleBounds.width + SIDE_PADDING;\n\n  return (\n    <div className=\"flex items-center justify-center\">\n      <motion.div\n        animate={{\n          width: currentWidth > 0 ? currentWidth : 'auto',\n        }}\n        transition={springConfig}\n        className=\"relative overflow-hidden rounded-full border border-white/40 bg-neutral-100 py-2 dark:border-white/10 dark:bg-neutral-900\"\n      >\n        <motion.div\n          animate={{\n            x: isExpanded ? -(primaryBounds.width - SIDE_PADDING) : 0,\n          }}\n          transition={springConfig}\n          className=\"flex h-full items-center\"\n        >\n          <div\n            ref={primaryRef}\n            className=\"flex shrink-0 items-center gap-4 pr-2 pl-4\"\n          >\n            {primaryItems.map((item, i) => (\n              <ToolbarIcon\n                key={`p-${i}`}\n                icon={item.icon}\n                active={!isExpanded}\n              />\n            ))}\n          </div>\n\n          <ToggleButton\n            ref={toggleRef}\n            isOpen={isExpanded}\n            onClick={() => setIsExpanded(!isExpanded)}\n          />\n\n          <div\n            ref={secondaryRef}\n            className=\"flex shrink-0 items-center gap-4 pr-4 pl-2\"\n          >\n            {secondaryItems.map((item, i) => (\n              <ToolbarIcon\n                key={`s-${i}`}\n                icon={item.icon}\n                active={isExpanded}\n              />\n            ))}\n          </div>\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n};\n\nconst ToolbarIcon = ({\n  icon: Icon,\n  active,\n}: {\n  icon: IconType;\n  active: boolean;\n}) => (\n  <motion.div\n    initial={false}\n    animate={{\n      opacity: active ? 1 : 0,\n      filter: active ? 'blur(0px)' : 'blur(4px)',\n    }}\n    transition={{ duration: 0.2 }}\n  >\n    <Icon className=\"size-5 text-neutral-500\" />\n  </motion.div>\n);\n\ninterface ToggleButtonProps {\n  isOpen: boolean;\n  onClick: () => void;\n}\n\nconst ToggleButton = forwardRef<HTMLDivElement, ToggleButtonProps>(\n  ({ isOpen, onClick }, ref) => (\n    <div\n      ref={ref}\n      onClick={onClick}\n      className=\"z-10 flex shrink-0 cursor-pointer items-center justify-center rounded-full bg-white p-2 transition-transform active:scale-95 dark:bg-neutral-800\"\n    >\n      <motion.div\n        initial={false}\n        animate={{ rotate: isOpen ? 180 : 0 }}\n        transition={springConfig}\n      >\n        <ChevronRight\n          size={18}\n          className=\"text-neutral-600 dark:text-neutral-300\"\n        />\n      </motion.div>\n    </div>\n  ),\n);\n"
    }
  ]
}