analytica-frontend-lib 1.1.18 → 1.1.19

package/dist/index.mjs

@@ -5903,10 +5903,67 @@ var IconRender = ({
 };
 var IconRender_default = IconRender;
 
+// src/hooks/useMobile.ts
+import { useState as useState12, useEffect as useEffect9 } from "react";
+var MOBILE_WIDTH = 500;
+var TABLET_WIDTH = 931;
+var DEFAULT_WIDTH = 1200;
+var getWindowWidth = () => {
+  if (typeof window === "undefined") {
+    return DEFAULT_WIDTH;
+  }
+  return window.innerWidth;
+};
+var getDeviceType = () => {
+  const width = getWindowWidth();
+  return width < TABLET_WIDTH ? "responsive" : "desktop";
+};
+var useMobile = () => {
+  const [isMobile, setIsMobile] = useState12(false);
+  const [isTablet, setIsTablet] = useState12(false);
+  useEffect9(() => {
+    const checkScreenSize = () => {
+      const width = getWindowWidth();
+      setIsMobile(width < MOBILE_WIDTH);
+      setIsTablet(width < TABLET_WIDTH);
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+  const getFormContainerClasses = () => {
+    if (isMobile) {
+      return "w-full px-4";
+    }
+    if (isTablet) {
+      return "w-full px-6";
+    }
+    return "w-full max-w-[992px] mx-auto px-0";
+  };
+  const getMobileHeaderClasses = () => {
+    return "flex flex-col items-start gap-4 mb-6";
+  };
+  const getDesktopHeaderClasses = () => {
+    return "flex flex-row justify-between items-center gap-6 mb-8";
+  };
+  const getHeaderClasses = () => {
+    return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();
+  };
+  return {
+    isMobile,
+    isTablet,
+    getFormContainerClasses,
+    getHeaderClasses,
+    getMobileHeaderClasses,
+    getDesktopHeaderClasses,
+    getDeviceType
+  };
+};
+
 // src/components/Select/Select.tsx
 import { create as create5, useStore as useStore4 } from "zustand";
 import {
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useRef as useRef7,
   forwardRef as forwardRef16,
   isValidElement as isValidElement4,
@@ -6037,13 +6094,13 @@ var Select = ({
     search(children2);
     return found;
   };
-  useEffect9(() => {
+  useEffect10(() => {
     if (!selectedLabel && defaultValue) {
       const label2 = findLabelForValue(children, defaultValue);
       if (label2) store.setState({ selectedLabel: label2 });
     }
   }, [children, defaultValue, selectedLabel]);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setOpen(false);
@@ -6078,7 +6135,7 @@ var Select = ({
       document.removeEventListener("keydown", handleArrowKeys);
     };
   }, [open]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (propValue) {
       setValue(propValue);
       const label2 = findLabelForValue(children, propValue);
@@ -6261,13 +6318,13 @@ var Select_default = Select;
 // src/components/Menu/Menu.tsx
 import { create as create6, useStore as useStore5 } from "zustand";
 import {
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useRef as useRef8,
   forwardRef as forwardRef17,
   isValidElement as isValidElement5,
   Children as Children5,
   cloneElement as cloneElement5,
-  useState as useState12
+  useState as useState13
 } from "react";
 import { CaretLeft as CaretLeft2, CaretRight as CaretRight3 } from "phosphor-react";
 import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -6302,7 +6359,7 @@ var Menu = forwardRef17(
     storeRef.current ??= createMenuStore(onValueChange);
     const store = storeRef.current;
     const { setValue } = useStore5(store, (s) => s);
-    useEffect10(() => {
+    useEffect11(() => {
       setValue(propValue ?? defaultValue);
     }, [defaultValue, propValue, setValue]);
     const baseClasses = "w-full py-2 flex flex-row items-center justify-center";
@@ -6479,9 +6536,9 @@ var MenuOverflow = ({
   ...props
 }) => {
   const containerRef = useRef8(null);
-  const [showLeftArrow, setShowLeftArrow] = useState12(false);
-  const [showRightArrow, setShowRightArrow] = useState12(false);
-  useEffect10(() => {
+  const [showLeftArrow, setShowLeftArrow] = useState13(false);
+  const [showRightArrow, setShowRightArrow] = useState13(false);
+  useEffect11(() => {
     const checkScroll = () => internalCheckScroll(
       containerRef.current,
       setShowLeftArrow,
@@ -6808,8 +6865,8 @@ var NotFound_default = NotFound;
 // src/components/VideoPlayer/VideoPlayer.tsx
 import {
   useRef as useRef9,
-  useState as useState13,
-  useEffect as useEffect11,
+  useState as useState14,
+  useEffect as useEffect12,
   useCallback
 } from "react";
 import {
@@ -6926,20 +6983,20 @@ var VideoPlayer = ({
   storageKey = "video-progress"
 }) => {
   const videoRef = useRef9(null);
-  const [isPlaying, setIsPlaying] = useState13(false);
-  const [currentTime, setCurrentTime] = useState13(0);
-  const [duration, setDuration] = useState13(0);
-  const [isMuted, setIsMuted] = useState13(false);
-  const [volume, setVolume] = useState13(1);
-  const [isFullscreen, setIsFullscreen] = useState13(false);
-  const [showControls, setShowControls] = useState13(true);
-  const [hasCompleted, setHasCompleted] = useState13(false);
-  const [showCaptions, setShowCaptions] = useState13(false);
-  useEffect11(() => {
+  const [isPlaying, setIsPlaying] = useState14(false);
+  const [currentTime, setCurrentTime] = useState14(0);
+  const [duration, setDuration] = useState14(0);
+  const [isMuted, setIsMuted] = useState14(false);
+  const [volume, setVolume] = useState14(1);
+  const [isFullscreen, setIsFullscreen] = useState14(false);
+  const [showControls, setShowControls] = useState14(true);
+  const [hasCompleted, setHasCompleted] = useState14(false);
+  const [showCaptions, setShowCaptions] = useState14(false);
+  useEffect12(() => {
     setHasCompleted(false);
   }, [src]);
-  const [playbackRate, setPlaybackRate] = useState13(1);
-  const [showSpeedMenu, setShowSpeedMenu] = useState13(false);
+  const [playbackRate, setPlaybackRate] = useState14(1);
+  const [showSpeedMenu, setShowSpeedMenu] = useState14(false);
   const lastSaveTimeRef = useRef9(0);
   const trackRef = useRef9(null);
   const controlsTimeoutRef = useRef9(null);
@@ -7007,13 +7064,13 @@ var VideoPlayer = ({
       }, LEAVE_HIDE_TIMEOUT);
     }
   }, [isFullscreen, clearControlsTimeout, isUserInteracting]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (videoRef.current) {
       videoRef.current.volume = volume;
       videoRef.current.muted = isMuted;
     }
   }, [volume, isMuted]);
-  useEffect11(() => {
+  useEffect12(() => {
     const video = videoRef.current;
     if (!video) return;
     const onPlay = () => setIsPlaying(true);
@@ -7028,7 +7085,7 @@ var VideoPlayer = ({
       video.removeEventListener("ended", onEnded);
     };
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     if (isPlaying) {
       showControlsWithTimer();
     } else {
@@ -7040,7 +7097,7 @@ var VideoPlayer = ({
       }
     }
   }, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
-  useEffect11(() => {
+  useEffect12(() => {
     const handleFullscreenChange = () => {
       const isCurrentlyFullscreen = !!document.fullscreenElement;
       setIsFullscreen(isCurrentlyFullscreen);
@@ -7053,7 +7110,7 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [showControlsWithTimer]);
-  useEffect11(() => {
+  useEffect12(() => {
     const init = () => {
       if (!isFullscreen) {
         showControlsWithTimer();
@@ -7086,7 +7143,7 @@ var VideoPlayer = ({
     if (hasValidSaved) return saved;
     return void 0;
   }, [autoSave, storageKey, src, initialTime]);
-  useEffect11(() => {
+  useEffect12(() => {
     const start = getInitialTime();
     if (start !== void 0 && videoRef.current) {
       videoRef.current.currentTime = start;
@@ -7207,12 +7264,12 @@ var VideoPlayer = ({
       setDuration(videoRef.current.duration);
     }
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     if (trackRef.current?.track) {
       trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
     }
   }, [subtitles, showCaptions]);
-  useEffect11(() => {
+  useEffect12(() => {
     const handleVisibilityChange = () => {
       if (document.hidden && isPlaying && videoRef.current) {
         videoRef.current.pause();
@@ -7465,7 +7522,7 @@ var VideoPlayer = ({
 var VideoPlayer_default = VideoPlayer;
 
 // src/components/Whiteboard/Whiteboard.tsx
-import { useCallback as useCallback2, useState as useState14 } from "react";
+import { useCallback as useCallback2, useState as useState15 } from "react";
 import { DownloadSimple } from "phosphor-react";
 import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 var IMAGE_WIDTH = 225;
@@ -7478,7 +7535,7 @@ var Whiteboard = ({
   imagesPerRow = 2,
   ...rest
 }) => {
-  const [imageErrors, setImageErrors] = useState14(/* @__PURE__ */ new Set());
+  const [imageErrors, setImageErrors] = useState15(/* @__PURE__ */ new Set());
   const handleDownload = useCallback2(
     (image) => {
       if (onDownload) {
@@ -7586,8 +7643,8 @@ var Whiteboard_default = Whiteboard;
 import {
   createContext,
   useContext,
-  useEffect as useEffect12,
-  useState as useState15,
+  useEffect as useEffect13,
+  useState as useState16,
   useCallback as useCallback3,
   useMemo as useMemo4
 } from "react";
@@ -7603,7 +7660,7 @@ var AuthProvider = ({
   getSessionFn,
   getTokensFn
 }) => {
-  const [authState, setAuthState] = useState15({
+  const [authState, setAuthState] = useState16({
     isAuthenticated: false,
     isLoading: true,
     ...initialAuthState
@@ -7651,7 +7708,7 @@ var AuthProvider = ({
       tokens: void 0
     }));
   }, [signOutFn]);
-  useEffect12(() => {
+  useEffect13(() => {
     checkAuth();
   }, [checkAuth]);
   const contextValue = useMemo4(
@@ -7805,7 +7862,7 @@ function createZustandAuthAdapter(useAuthStore) {
 }
 
 // src/components/Auth/useUrlAuthentication.ts
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 import { useLocation as useLocation2 } from "react-router-dom";
 var getAuthParams = (location, extractParams) => {
   const searchParams = new URLSearchParams(location.search);
@@ -7853,7 +7910,7 @@ var handleUserData = (responseData, setUser) => {
 };
 function useUrlAuthentication(options) {
   const location = useLocation2();
-  useEffect13(() => {
+  useEffect14(() => {
     const handleAuthentication = async () => {
       const authParams = getAuthParams(location, options.extractParams);
       if (!hasValidAuthParams(authParams)) {
@@ -7915,10 +7972,10 @@ import {
 } from "phosphor-react";
 import {
   forwardRef as forwardRef19,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useMemo as useMemo6,
   useId as useId10,
-  useState as useState16,
+  useState as useState17,
   useCallback as useCallback4,
   useRef as useRef10
 } from "react";
@@ -8519,7 +8576,7 @@ var getStatusStyles = (variantCorrect) => {
 };
 var Quiz = forwardRef19(({ children, className, variant = "default", ...props }, ref) => {
   const { setVariant } = useQuizStore();
-  useEffect14(() => {
+  useEffect15(() => {
     setVariant(variant);
   }, [variant, setVariant]);
   return /* @__PURE__ */ jsx39(
@@ -8538,8 +8595,8 @@ var Quiz = forwardRef19(({ children, className, variant = "default", ...props },
 var QuizHeaderResult = forwardRef19(
   ({ className, ...props }, ref) => {
     const { getQuestionResultByQuestionId, getCurrentQuestion } = useQuizStore();
-    const [isCorrect, setIsCorrect] = useState16(false);
-    useEffect14(() => {
+    const [isCorrect, setIsCorrect] = useState17(false);
+    useEffect15(() => {
       const cq = getCurrentQuestion();
       if (!cq) {
         setIsCorrect(false);
@@ -8829,7 +8886,7 @@ var QuizDissertative = ({ paddingBottom }) => {
       textareaRef.current.style.height = `${newHeight}px`;
     }
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     adjustTextareaHeight();
   }, [currentAnswer, adjustTextareaHeight]);
   if (!currentQuestion) {
@@ -8968,7 +9025,7 @@ var QuizConnectDots = ({ paddingBottom }) => {
       isCorrect: false
     }
   ];
-  const [userAnswers, setUserAnswers] = useState16(() => {
+  const [userAnswers, setUserAnswers] = useState17(() => {
     if (variant === "result") {
       return mockUserAnswers;
     }
@@ -9087,7 +9144,7 @@ var QuizFill = ({ paddingBottom }) => {
       isCorrect: true
     }
   ];
-  const [answers, setAnswers] = useState16({});
+  const [answers, setAnswers] = useState17({});
   const baseId = useId10();
   const getAvailableOptionsForSelect = (selectId) => {
     const usedOptions = Object.entries(answers).filter(([key]) => key !== selectId).map(([, value]) => value);
@@ -9225,7 +9282,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
   };
   const correctRadiusRelative = calculateCorrectRadiusRelative();
   const mockUserAnswerRelative = { x: 0.72, y: 0.348 };
-  const [clickPositionRelative, setClickPositionRelative] = useState16(variant == "result" ? mockUserAnswerRelative : null);
+  const [clickPositionRelative, setClickPositionRelative] = useState17(variant == "result" ? mockUserAnswerRelative : null);
   const convertToRelativeCoordinates = (x, y, rect) => {
     const safeWidth = Math.max(rect.width, 1e-3);
     const safeHeight = Math.max(rect.height, 1e-3);
@@ -9449,11 +9506,11 @@ var QuizFooter = forwardRef19(
     const currentAnswer = getCurrentAnswer();
     const currentQuestion = getCurrentQuestion();
     const isCurrentQuestionSkipped = currentQuestion ? getQuestionStatusFromUserAnswers(currentQuestion.id) === "skipped" : false;
-    const [alertDialogOpen, setAlertDialogOpen] = useState16(false);
-    const [modalResultOpen, setModalResultOpen] = useState16(false);
-    const [modalNavigateOpen, setModalNavigateOpen] = useState16(false);
-    const [modalResolutionOpen, setModalResolutionOpen] = useState16(false);
-    const [filterType, setFilterType] = useState16(void 0);
+    const [alertDialogOpen, setAlertDialogOpen] = useState17(false);
+    const [modalResultOpen, setModalResultOpen] = useState17(false);
+    const [modalNavigateOpen, setModalNavigateOpen] = useState17(false);
+    const [modalResolutionOpen, setModalResolutionOpen] = useState17(false);
+    const [filterType, setFilterType] = useState17(void 0);
     const unansweredQuestions = getUnansweredQuestionsFromUserAnswers();
     const allQuestions = getTotalQuestions();
     const handleFinishQuiz = async () => {
@@ -10007,11 +10064,13 @@ export {
   VideoPlayer_default as VideoPlayer,
   Whiteboard_default as Whiteboard,
   createZustandAuthAdapter,
+  getDeviceType,
   getRootDomain,
   getStatusBadge,
   useApiConfig,
   useAuth,
   useAuthGuard,
+  useMobile,
   useQuizStore,
   useRouteAuth,
   ToastStore_default as useToastStore,