{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lift-button",
  "title": "Lift Button",
  "description": "A scroll-to-top button with custom triggers and target containers.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/flowui/components/lift-button.tsx",
      "content": "\"use client\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { ArrowUp } from \"lucide-react\";\r\nimport { ComponentProps, useEffect, useState } from \"react\";\r\n\r\ntype LiftButtonProps = {\r\n    className?: string;\r\n    children?: React.ReactNode;\r\n    scrollContainerId?: string;\r\n    targetId?: string;\r\n    alwaysVisible?: boolean;\r\n    threshold?: number;\r\n} & ComponentProps<\"button\">;\r\n\r\nconst LiftButton = ({\r\n    className,\r\n    children,\r\n    scrollContainerId,\r\n    targetId,\r\n    alwaysVisible = false,\r\n    threshold = 0,\r\n    ...props\r\n}: LiftButtonProps) => {\r\n    // State to control the visibility\r\n    const [visible, setVisible] = useState<boolean>(alwaysVisible);\r\n\r\n    // Scroll based button visibility\r\n    useEffect(() => {\r\n        if (alwaysVisible) return;\r\n\r\n        // Get the scroll container\r\n        const container = scrollContainerId ? document.getElementById(scrollContainerId) : window;\r\n\r\n        if (!container) return;\r\n\r\n        const handleScroll = () => {\r\n            const scrollPosition = container === window ?\r\n                window.pageYOffset || document.documentElement.scrollTop :\r\n                (container as HTMLElement).scrollTop;\r\n\r\n            setVisible(scrollPosition > threshold);\r\n        };\r\n\r\n        container?.addEventListener(\"scroll\", handleScroll, { passive: true });\r\n        handleScroll();\r\n\r\n        return () => container?.removeEventListener(\"scroll\", handleScroll);\r\n    }, [alwaysVisible, threshold, scrollContainerId]);\r\n\r\n    // Scroll to top functionality\r\n    const handleClick = () => {\r\n        if(scrollContainerId) {\r\n            const container = document.getElementById(scrollContainerId);\r\n            if(!container) return;\r\n\r\n            if(targetId) {\r\n                const target = document.getElementById(targetId);\r\n                if(!target) return;\r\n\r\n                const containerRec = container.getBoundingClientRect();\r\n                const targetRec = target.getBoundingClientRect();\r\n\r\n                const offset = targetRec.top - containerRec.top + container.scrollTop;\r\n                container.scrollTo({ top: offset, behavior: \"smooth\" });\r\n            } else {\r\n                container.scrollTo({ top: 0, behavior: \"smooth\" });\r\n            }\r\n\r\n            return;\r\n        }\r\n        if(targetId) {\r\n            const target = document.getElementById(targetId);\r\n            target?.scrollIntoView({ behavior: \"smooth\" });\r\n            return;\r\n        } else {\r\n            window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n        }\r\n    }\r\n\r\n    return (\r\n        <button\r\n            className={cn(\r\n                \"inline-flex justify-center items-center transition-all duration-300\",\r\n                className,\r\n                visible ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\r\n            )}\r\n            {...props}\r\n            onClick={handleClick}\r\n        >\r\n            {children ? (\r\n                children\r\n            ) : (\r\n                <ArrowUp className=\"size-5\" />\r\n            )}\r\n        </button>\r\n    )\r\n}\r\n\r\nexport default LiftButton;",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}