{
  "name": "scroll-button",
  "type": "registry:ui",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "description": "A floating button component that appears when users scroll up in a container, allowing them to quickly return to the bottom of the content",
  "files": [
    {
      "path": "scroll-button.tsx",
      "content": "\"use client\"\n\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\nimport { useStickToBottomContext } from \"use-stick-to-bottom\"\n\nexport type ScrollButtonProps = {\n  className?: string\n  variant?: VariantProps<typeof buttonVariants>[\"variant\"]\n  size?: VariantProps<typeof buttonVariants>[\"size\"]\n} & React.ButtonHTMLAttributes<HTMLButtonElement>\n\nfunction ScrollButton({\n  className,\n  variant = \"outline\",\n  size = \"sm\",\n  ...props\n}: ScrollButtonProps) {\n  const { isAtBottom, scrollToBottom } = useStickToBottomContext()\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      className={cn(\n        \"h-10 w-10 rounded-full transition-all duration-150 ease-out\",\n        !isAtBottom\n          ? \"translate-y-0 scale-100 opacity-100\"\n          : \"pointer-events-none translate-y-4 scale-95 opacity-0\",\n        className\n      )}\n      onClick={() => scrollToBottom()}\n      {...props}\n    >\n      <ChevronDown className=\"h-5 w-5\" />\n    </Button>\n  )\n}\n\nexport { ScrollButton }\n",
      "type": "registry:ui"
    }
  ]
}