{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-click-outside-demo",
  "title": "UseClickOutsideDemo",
  "description": "use-click-outside's hook in action.",
  "registryDependencies": [
    "card",
    "https://guarahooks.com/r/use-click-outside.json"
  ],
  "files": [
    {
      "path": "registry/example/use-click-outside-demo.tsx",
      "content": "'use client';\n\nimport React, { useRef, useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';\n\nimport { useClickOutside } from '@/hooks/guarahooks/use-click-outside';\n\nexport default function UseClickOutsideDemo() {\n  const cardRef = useRef<HTMLDivElement>(null);\n  const [clickedOutside, setClickedOutside] = useState(false);\n\n  useClickOutside(cardRef, () => {\n    setClickedOutside(true);\n  });\n\n  return (\n    <Card ref={cardRef} className=\"w-full max-w-sm relative\">\n      <CardHeader>\n        <CardTitle>useClickOutside</CardTitle>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <p className=\"text-sm\">\n          Click outside of the card to trigger an action.\n        </p>\n        {clickedOutside ? (\n          <div className=\"text-red-500 font-semibold mb-2\">\n            You clicked outside of the card!\n          </div>\n        ) : null}\n        <Button onClick={() => setClickedOutside(false)} variant=\"outline\">\n          Reset\n        </Button>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-click-outside-demo.tsx"
    }
  ],
  "type": "registry:example"
}