{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-button",
  "title": "Animated Button",
  "description": "A button that smoothly transitions between its primary and secondary states.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/animated-button/animated-button.tsx",
      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { AnimatePresence, motion } from \"motion/react\"\nimport { useEffect, useRef, useState } from \"react\"\n\nexport function AnimatedButton({\n  children,\n  secondaryChildren,\n  className,\n  onClick,\n  ariaLabel,\n  showingSecondary,\n  timeout = 1000,\n}: {\n  children: React.ReactNode\n  secondaryChildren?: React.ReactNode\n  className?: string\n  onClick?: () => void\n  ariaLabel: string\n  showingSecondary?: boolean\n  timeout?: number\n}) {\n  const [isShowingSecondary, setIsShowingSecondary] = useState(false)\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const isControlled = showingSecondary !== undefined\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const shouldShowSecondary =\n    Boolean(secondaryChildren) && (isControlled ? Boolean(showingSecondary) : isShowingSecondary)\n\n  return (\n    <motion.button\n      whileTap={{ scale: 0.95 }}\n      tabIndex={0}\n      aria-label={ariaLabel}\n      className={cn(\"group flex shrink-0 cursor-pointer items-center justify-center\", className)}\n      onClick={() => {\n        if (shouldShowSecondary) return\n\n        onClick?.()\n\n        if (secondaryChildren && !isControlled) {\n          if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current)\n          }\n          setIsShowingSecondary(true)\n          timeoutRef.current = setTimeout(() => {\n            setIsShowingSecondary(false)\n          }, timeout)\n        }\n      }}\n    >\n      <AnimatePresence mode=\"popLayout\" initial={false}>\n        <motion.div\n          key={shouldShowSecondary ? \"secondary\" : \"primary\"}\n          initial={{ opacity: 0, scale: 0.25, filter: \"blur(4px)\" }}\n          animate={{ opacity: 1, scale: 1, filter: \"blur(0px)\" }}\n          exit={{ opacity: 0, scale: 0.25, filter: \"blur(4px)\" }}\n          transition={{\n            type: \"spring\",\n            duration: 0.3,\n            bounce: 0,\n          }}\n          className=\"grid place-content-center\"\n        >\n          {shouldShowSecondary ? secondaryChildren : children}\n        </motion.div>\n      </AnimatePresence>\n    </motion.button>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}