{"version":3,"file":"hooks\\use-mobile.cjs","sources":["webpack://@arolariu/components/./src/hooks/use-mobile.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\n/**\n * A custom React hook that detects whether the current device is a mobile device\n * based on the screen width.\n *\n * This hook uses a media query to check if the viewport width is less than the defined\n * mobile breakpoint (768px). It updates the state when the window size changes.\n *\n * @returns {boolean} Returns true if the viewport width is less than the mobile breakpoint,\n *                   false otherwise.\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const isMobile = useIsMobile();\n *\n *   return (\n *     <div>\n *       {isMobile ? 'Mobile View' : 'Desktop View'}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useIsMobile(): boolean {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined,\n  );\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    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n"],"names":["MOBILE_BREAKPOINT","useIsMobile","isMobile","setIsMobile","React","undefined","mql","window","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,MAAMA,oBAAoB;AAyBnB,SAASC;IACd,MAAM,CAACC,UAAUC,YAAY,GAAGC,+BAAAA,QAAc,CAC5CC;IAGFD,+BAAAA,SAAe,CAAC;QACd,MAAME,MAAMC,OAAO,UAAU,CAAC,CAAC,YAAY,EAAEP,oBAAoB,EAAE,GAAG,CAAC;QACvE,MAAMQ,WAAW;YACfL,YAAYI,OAAO,UAAU,GAAGP;QAClC;QACAM,IAAI,gBAAgB,CAAC,UAAUE;QAC/BL,YAAYI,OAAO,UAAU,GAAGP;QAChC,OAAO,IAAMM,IAAI,mBAAmB,CAAC,UAAUE;IACjD,GAAG,EAAE;IAEL,OAAO,CAAC,CAACN;AACX"}