{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-mobile",
  "title": "useIsMobile",
  "description": "matchMedia hook for the 768px breakpoint used by the sidebar.",
  "files": [
    {
      "path": "registry/sav/hooks/use-mobile.ts",
      "content": "// @sav-registry: use-mobile\nimport * as React from \"react\"\n\nconst MOBILE_BREAKPOINT = 768\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    }\n    mql.addEventListener(\"change\", onChange)\n    // Initial read of a browser-only value; the subscription above keeps it\n    // current. (eslint-config-next 16 flags any setState in an effect.)\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)\n    return () => mql.removeEventListener(\"change\", onChange)\n  }, [])\n\n  return !!isMobile\n}\n",
      "type": "registry:hook",
      "target": "@hooks/use-mobile.ts"
    }
  ],
  "categories": [
    "ui"
  ],
  "type": "registry:hook"
}