{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-fullscreen",
  "title": "UseFullscreen",
  "description": "Enters and exits fullscreen mode.",
  "files": [
    {
      "path": "registry/hooks/use-fullscreen.tsx",
      "content": "'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\n// Type for the ref that can be passed to the hook\nexport type FullscreenRef = React.RefObject<HTMLElement> | null;\n\n// Vendor-prefixed Fullscreen API support\ninterface VendorDocument extends Document {\n  webkitFullscreenElement?: Element;\n  mozFullScreenElement?: Element;\n  msFullscreenElement?: Element;\n  webkitExitFullscreen?: () => Promise<void>;\n  mozCancelFullScreen?: () => Promise<void>;\n  msExitFullscreen?: () => Promise<void>;\n}\n\ninterface VendorElement extends HTMLElement {\n  webkitRequestFullscreen?: () => Promise<void>;\n  mozRequestFullScreen?: () => Promise<void>;\n  msRequestFullscreen?: () => Promise<void>;\n}\n\n// Utility functions for cross-browser Fullscreen API\nfunction getFullscreenElement(): Element | null {\n  const doc = document as VendorDocument;\n  return (\n    doc.fullscreenElement ||\n    doc.webkitFullscreenElement ||\n    doc.mozFullScreenElement ||\n    doc.msFullscreenElement ||\n    null\n  );\n}\n\nfunction requestFullscreen(element: HTMLElement) {\n  const el = element as VendorElement;\n  if (el.requestFullscreen) return el.requestFullscreen();\n  if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen();\n  if (el.mozRequestFullScreen) return el.mozRequestFullScreen();\n  if (el.msRequestFullscreen) return el.msRequestFullscreen();\n}\n\nfunction exitFullscreen() {\n  const doc = document as VendorDocument;\n  if (doc.exitFullscreen) return doc.exitFullscreen();\n  if (doc.webkitExitFullscreen) return doc.webkitExitFullscreen();\n  if (doc.mozCancelFullScreen) return doc.mozCancelFullScreen();\n  if (doc.msExitFullscreen) return doc.msExitFullscreen();\n}\n\nfunction addFullscreenListener(cb: () => void) {\n  document.addEventListener('fullscreenchange', cb);\n  document.addEventListener('webkitfullscreenchange', cb);\n  document.addEventListener('mozfullscreenchange', cb);\n  document.addEventListener('MSFullscreenChange', cb);\n}\n\nfunction removeFullscreenListener(cb: () => void) {\n  document.removeEventListener('fullscreenchange', cb);\n  document.removeEventListener('webkitfullscreenchange', cb);\n  document.removeEventListener('mozfullscreenchange', cb);\n  document.removeEventListener('MSFullscreenChange', cb);\n}\n\nexport function useFullscreen(\n  ref: FullscreenRef = null,\n): [boolean, () => void, () => void] {\n  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);\n  const refCached = useRef(ref);\n\n  useEffect(() => {\n    refCached.current = ref;\n  }, [ref]);\n\n  const handleChange = useCallback(() => {\n    const current = refCached.current?.current ?? document.documentElement;\n    setIsFullscreen(getFullscreenElement() === current);\n  }, []);\n\n  useEffect(() => {\n    addFullscreenListener(handleChange);\n    handleChange(); // Initial check\n    return () => {\n      removeFullscreenListener(handleChange);\n    };\n  }, [handleChange]);\n\n  const enter = useCallback(() => {\n    const el = refCached.current?.current ?? document.documentElement;\n    if (el && getFullscreenElement() !== el) {\n      requestFullscreen(el);\n    }\n  }, []);\n\n  const exit = useCallback(() => {\n    if (getFullscreenElement()) {\n      exitFullscreen();\n    }\n  }, []);\n\n  return [isFullscreen, enter, exit];\n}\n",
      "type": "registry:hook",
      "target": "hooks/guarahooks/use-fullscreen.tsx"
    }
  ],
  "categories": [
    "ui-and-dom"
  ],
  "type": "registry:hook"
}