{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-screen-size",
  "files": [
    {
      "path": "registry/hooks/use-screen-size.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\ntype ScreenSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"2xl\" | \"4k\" | undefined\n\ninterface ScreenSizeResult {\n  screenSize: ScreenSize\n  isMobile: boolean\n}\n\nconst useScreenSize = (): ScreenSizeResult => {\n  const [screenSize, setScreenSize] = useState<ScreenSize>(undefined)\n  const [isMobile, setIsMobile] = useState(false)\n\n  useEffect(() => {\n    const mediaQueries = {\n      xs: window.matchMedia(\"(max-width: 425px)\"),\n      sm: window.matchMedia(\"(min-width: 426px) and (max-width: 600px)\"),\n      md: window.matchMedia(\"(min-width: 601px) and (max-width: 768px)\"),\n      lg: window.matchMedia(\"(min-width: 769px) and (max-width: 1200px)\"),\n      _2xl: window.matchMedia(\"(min-width: 1201px) and (max-width: 1400px)\"),\n      _4k: window.matchMedia(\"(min-width: 1800px)\"),\n    }\n\n    const updateScreenSize = () => {\n      if (mediaQueries.xs.matches) {\n        setScreenSize(\"xs\")\n        setIsMobile(true)\n      } else if (mediaQueries.sm.matches) {\n        setScreenSize(\"sm\")\n        setIsMobile(true)\n      } else if (mediaQueries.md.matches) {\n        setScreenSize(\"md\")\n        setIsMobile(false)\n      } else if (mediaQueries.lg.matches) {\n        setScreenSize(\"lg\")\n        setIsMobile(false)\n      } else if (mediaQueries._2xl.matches) {\n        setScreenSize(\"2xl\")\n        setIsMobile(false)\n      } else if (mediaQueries._4k.matches) {\n        setScreenSize(\"4k\")\n        setIsMobile(false)\n      }\n    }\n\n    updateScreenSize()\n\n    Object.values(mediaQueries).forEach((query) => {\n      query.addEventListener(\"change\", updateScreenSize)\n    })\n\n    return () => {\n      Object.values(mediaQueries).forEach((query) => {\n        query.removeEventListener(\"change\", updateScreenSize)\n      })\n    }\n  }, [])\n\n  return { screenSize, isMobile }\n}\n\nexport default useScreenSize\n",
      "type": "registry:hook",
      "target": "hooks/use-screen-size.tsx"
    }
  ],
  "type": "registry:hook"
}