{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-event-listener-demo",
  "title": "UseEventListenerDemo",
  "description": "use-event-listener's hook in action.",
  "registryDependencies": [
    "card",
    "badge",
    "button",
    "https://guarahooks.com/r/use-event-listener.json"
  ],
  "files": [
    {
      "path": "registry/example/use-event-listener-demo.tsx",
      "content": "'use client';\n\nimport React, { useRef, useState } from 'react';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\n\nimport { useEventListener } from '@/hooks/guarahooks/use-event-listener';\n\nexport default function UseEventListenerDemo() {\n  // State for window events\n  const [windowMousePosition, setWindowMousePosition] = useState({\n    x: 0,\n    y: 0,\n  });\n  const [windowScroll, setWindowScroll] = useState(0);\n\n  // State for element-specific events\n  const [clickCount, setClickCount] = useState(0);\n  const [isHovering, setIsHovering] = useState(false);\n\n  // Reference for the element we want to track\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  // Track mouse position across the window\n  useEventListener({\n    eventName: 'mousemove',\n    handler: (event) => {\n      setWindowMousePosition({\n        x: event.clientX,\n        y: event.clientY,\n      });\n    },\n  });\n\n  // Track window scroll position\n  useEventListener({\n    eventName: 'scroll',\n    handler: () => {\n      setWindowScroll(window.scrollY);\n    },\n  });\n\n  // Track clicks on a specific element\n  useEventListener<'click', HTMLButtonElement>({\n    eventName: 'click',\n    handler: () => setClickCount((prev) => prev + 1),\n    element: buttonRef,\n  });\n\n  // Track mouse enter/leave on element\n  useEventListener<'mouseenter', HTMLButtonElement>({\n    eventName: 'mouseenter',\n    handler: () => setIsHovering(true),\n    element: buttonRef,\n  });\n\n  useEventListener<'mouseleave', HTMLButtonElement>({\n    eventName: 'mouseleave',\n    handler: () => setIsHovering(false),\n    element: buttonRef,\n  });\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n        <Card className=\"max-w-sm w-full\">\n          <CardHeader>\n            <CardTitle>Window Events</CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <p className=\"font-medium\">Mouse Position: </p>\n            <Badge variant=\"secondary\">\n              X: {windowMousePosition.x}, Y: {windowMousePosition.y}\n            </Badge>\n            <p className=\"font-medium\">Scroll Position: </p>\n            <Badge variant=\"secondary\">{windowScroll}px</Badge>\n          </CardContent>\n        </Card>\n\n        <Card className=\"max-w-sm w-full\">\n          <CardHeader>\n            <CardTitle>Element Events</CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div>\n              <span className=\"font-medium\">Click Count: </span>\n              <Badge variant=\"secondary\">{clickCount}</Badge>\n            </div>\n            <div>\n              <span className=\"font-medium\">Hover State: </span>\n              <Badge variant={isHovering ? 'default' : 'secondary'}>\n                {isHovering ? 'Hovering' : 'Not Hovering'}\n              </Badge>\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button\n              ref={buttonRef}\n              className={`mt-2 ${isHovering ? 'bg-primary-foreground' : ''}`}\n            >\n              Click Me\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n\n      <div className=\"text-sm text-muted-foreground\">\n        Try moving your mouse, scrolling, or interacting with the button above.\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-event-listener-demo.tsx"
    }
  ],
  "type": "registry:example"
}