{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "copy-button",
  "title": "Copy Button",
  "description": "A copy button component with two types: normal and animated.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/flowui/components/copy-button/copy-button.tsx",
      "content": "\"use client\";\r\n\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Check, Copy } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport AnimationWrapper from \"./animation-wrapper\";\r\n\r\ntype AnimationWrapperProps = {\r\n    children: React.ReactNode;\r\n    mode: \"copy\" | \"copied\";\r\n};\r\n\r\nexport type CopyButtonProps = {\r\n    animated?: boolean;\r\n    time?: number;\r\n    iconType?: \"default\" | \"rotated\";\r\n} & React.ComponentProps<typeof Button>;\r\n\r\n\r\nexport const CopyButton = ({\r\n    animated = false,\r\n    className,\r\n    children,\r\n    time = 3000,\r\n    iconType = \"default\",\r\n    ...props\r\n}: CopyButtonProps) => {\r\n    // Fixed Logic for any behavior\r\n    const [mode, setMode] = useState<\"copy\" | \"copied\">(\"copy\");\r\n\r\n    const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n        if (props.onClick) {\r\n            props.onClick(e);\r\n        }\r\n\r\n        // Change state to copied\r\n        setMode(\"copied\");\r\n\r\n        // Change to the base state after user timer - default 3s\r\n        const timer = setTimeout(() => {\r\n            setMode(\"copy\");\r\n        }, time);\r\n\r\n        // Clear the timer\r\n        return () => clearTimeout(timer);\r\n    }\r\n\r\n    // Identify the icon to be used and create it's node\r\n\r\n    const Icon = mode === \"copy\" ? Copy : Check;\r\n\r\n    const iconNode = (\r\n        <Icon\r\n            className={cn(\r\n                \"\",\r\n                iconType === \"rotated\" && mode === \"copy\" && \"rotate-90\"\r\n            )}\r\n        />\r\n    );\r\n\r\n    const content = animated ? (\r\n        <AnimationWrapper mode={mode}>\r\n            {iconNode}\r\n        </AnimationWrapper>\r\n    ) : (\r\n        iconNode\r\n    )\r\n\r\n    return (\r\n        <Button\r\n            {...props}\r\n            onClick={handleCopy}\r\n            className={cn(\r\n                \"relative size-9\",\r\n                className\r\n            )}\r\n        >\r\n            {content}\r\n        </Button>\r\n    )\r\n}",
      "type": "registry:component"
    },
    {
      "path": "registry/flowui/components/copy-button/animated-copy-button.tsx",
      "content": "import { CopyButton, CopyButtonProps } from \"./copy-button\"\r\n\r\nexport const AnimatedCopyButton = (props: CopyButtonProps) => {\r\n    return (\r\n        <CopyButton\r\n            {...props}\r\n            animated={true}\r\n        />\r\n    )\r\n}",
      "type": "registry:component"
    },
    {
      "path": "registry/flowui/components/copy-button/animation-wrapper.tsx",
      "content": "import { motion, AnimatePresence } from \"motion/react\";\r\n\r\ntype AnimatedLogicProps = {\r\n    children: React.ReactNode;\r\n    mode: \"copy\" | \"copied\";\r\n};\r\n\r\nconst AnimationWrapper = ({ children, mode }: AnimatedLogicProps) => {\r\n    return (\r\n        <AnimatePresence mode=\"wait\">\r\n            <motion.span\r\n                key={mode}\r\n                className=\"absolute\"\r\n                initial={{ scale: 0.6, opacity: 0 }}\r\n                animate={{ scale: 1, opacity: 1 }}\r\n                exit={{ scale: 0.6, opacity: 0 }}\r\n            >\r\n                {children}\r\n            </motion.span>\r\n        </AnimatePresence>\r\n    )\r\n}\r\n\r\nexport default AnimationWrapper;",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}