{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"use-media-query","type":"registry:hook","description":"Use media query hook.","files":[{"path":"hooks/use-media-query.ts","type":"registry:hook","content":"\"use client\";\nimport { useEffect, useState } from \"react\";\n\nfunction getDevice(): \"mobile\" | \"tablet\" | \"desktop\" | null {\n\tif (typeof window === \"undefined\") {\n\t\treturn null;\n\t}\n\n\tif (window.matchMedia(\"(min-width: 1024px)\").matches) {\n\t\treturn \"desktop\";\n\t}\n\n\tif (window.matchMedia(\"(min-width: 640px)\").matches) {\n\t\treturn \"tablet\";\n\t}\n\n\treturn \"mobile\";\n}\n\nfunction getDimensions() {\n\tif (typeof window === \"undefined\") {\n\t\treturn null;\n\t}\n\n\treturn { width: window.innerWidth, height: window.innerHeight };\n}\n\nexport function useMediaQuery() {\n\tconst [device, setDevice] = useState<\"mobile\" | \"tablet\" | \"desktop\" | null>(\n\t\tnull\n\t);\n\tconst [dimensions, setDimensions] = useState<{\n\t\twidth: number;\n\t\theight: number;\n\t} | null>(null);\n\n\tuseEffect(() => {\n\t\tconst checkDevice = () => {\n\t\t\tsetDevice(getDevice());\n\t\t\tsetDimensions(getDimensions());\n\t\t};\n\n\t\t// Initial detection\n\t\tcheckDevice();\n\n\t\t// Listener for windows resize\n\t\twindow.addEventListener(\"resize\", checkDevice);\n\n\t\t// Cleanup listener\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"resize\", checkDevice);\n\t\t};\n\t}, []);\n\n\treturn {\n\t\tdevice,\n\t\twidth: dimensions?.width,\n\t\theight: dimensions?.height,\n\t\tisMobile: device === \"mobile\",\n\t\tisTablet: device === \"tablet\",\n\t\tisDesktop: device === \"desktop\",\n\t};\n}\n"}]}