analytica-frontend-lib 1.1.18 → 1.1.19

package/dist/hooks/useMobile/index.d.mts

@@ -0,0 +1,24 @@
+/**
+ * Device type based on screen width
+ */
+type DeviceType = 'responsive' | 'desktop';
+/**
+ * Gets the current device type based on screen width
+ * @returns {DeviceType} 'responsive' for mobile/tablet (width < 931px), 'desktop' for larger screens
+ */
+declare const getDeviceType: () => DeviceType;
+/**
+ * Hook to detect screen size and get responsive classes
+ * @returns object with isMobile, isTablet, responsive class functions and getDeviceType
+ */
+declare const useMobile: () => {
+    isMobile: boolean;
+    isTablet: boolean;
+    getFormContainerClasses: () => string;
+    getHeaderClasses: () => string;
+    getMobileHeaderClasses: () => string;
+    getDesktopHeaderClasses: () => string;
+    getDeviceType: () => DeviceType;
+};
+
+export { type DeviceType, getDeviceType, useMobile };

package/dist/hooks/useMobile/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Device type based on screen width
+ */
+type DeviceType = 'responsive' | 'desktop';
+/**
+ * Gets the current device type based on screen width
+ * @returns {DeviceType} 'responsive' for mobile/tablet (width < 931px), 'desktop' for larger screens
+ */
+declare const getDeviceType: () => DeviceType;
+/**
+ * Hook to detect screen size and get responsive classes
+ * @returns object with isMobile, isTablet, responsive class functions and getDeviceType
+ */
+declare const useMobile: () => {
+    isMobile: boolean;
+    isTablet: boolean;
+    getFormContainerClasses: () => string;
+    getHeaderClasses: () => string;
+    getMobileHeaderClasses: () => string;
+    getDesktopHeaderClasses: () => string;
+    getDeviceType: () => DeviceType;
+};
+
+export { type DeviceType, getDeviceType, useMobile };

package/dist/hooks/useMobile/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useMobile.ts
+var useMobile_exports = {};
+__export(useMobile_exports, {
+  getDeviceType: () => getDeviceType,
+  useMobile: () => useMobile
+});
+module.exports = __toCommonJS(useMobile_exports);
+var import_react = require("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] = (0, import_react.useState)(false);
+  const [isTablet, setIsTablet] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    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
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getDeviceType,
+  useMobile
+});
+//# sourceMappingURL=index.js.map

package/dist/hooks/useMobile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useMobile.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n// Mobile width in pixels\nconst MOBILE_WIDTH = 500;\n// Tablet width in pixels\nconst TABLET_WIDTH = 931;\n// Default desktop width for SSR\nconst DEFAULT_WIDTH = 1200;\n\n/**\n * Device type based on screen width\n */\nexport type DeviceType = 'responsive' | 'desktop';\n\n/**\n * Gets the window width safely (SSR compatible)\n * @returns {number} window width or default value for SSR\n */\nconst getWindowWidth = (): number => {\n  if (typeof window === 'undefined') {\n    return DEFAULT_WIDTH;\n  }\n  return window.innerWidth;\n};\n\n/**\n * Gets the current device type based on screen width\n * @returns {DeviceType} 'responsive' for mobile/tablet (width < 931px), 'desktop' for larger screens\n */\nexport const getDeviceType = (): DeviceType => {\n  const width = getWindowWidth();\n  return width < TABLET_WIDTH ? 'responsive' : 'desktop';\n};\n\n/**\n * Hook to detect screen size and get responsive classes\n * @returns object with isMobile, isTablet, responsive class functions and getDeviceType\n */\nexport const useMobile = () => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [isTablet, setIsTablet] = useState(false);\n\n  useEffect(() => {\n    const checkScreenSize = () => {\n      const width = getWindowWidth();\n      setIsMobile(width < MOBILE_WIDTH);\n      setIsTablet(width < TABLET_WIDTH);\n    };\n\n    checkScreenSize();\n\n    window.addEventListener('resize', checkScreenSize);\n\n    return () => window.removeEventListener('resize', checkScreenSize);\n  }, []);\n\n  /**\n   * Get responsive classes for the form container\n   * @returns className string for form container based on screen size\n   */\n  const getFormContainerClasses = (): string => {\n    if (isMobile) {\n      return 'w-full px-4';\n    }\n    if (isTablet) {\n      return 'w-full px-6';\n    }\n    return 'w-full max-w-[992px] mx-auto px-0';\n  };\n\n  /**\n   * Get mobile-specific classes for the header\n   * @returns className string for mobile header layout\n   */\n  const getMobileHeaderClasses = (): string => {\n    return 'flex flex-col items-start gap-4 mb-6';\n  };\n\n  /**\n   * Get desktop-specific classes for the header\n   * @returns className string for desktop header layout\n   */\n  const getDesktopHeaderClasses = (): string => {\n    return 'flex flex-row justify-between items-center gap-6 mb-8';\n  };\n\n  /**\n   * Get responsive classes for the header\n   * @returns className string for header based on screen size\n   */\n  const getHeaderClasses = (): string => {\n    return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();\n  };\n\n  return {\n    isMobile,\n    isTablet,\n    getFormContainerClasses,\n    getHeaderClasses,\n    getMobileHeaderClasses,\n    getDesktopHeaderClasses,\n    getDeviceType,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC;AAGpC,IAAM,eAAe;AAErB,IAAM,eAAe;AAErB,IAAM,gBAAgB;AAWtB,IAAM,iBAAiB,MAAc;AACnC,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAMO,IAAM,gBAAgB,MAAkB;AAC7C,QAAM,QAAQ,eAAe;AAC7B,SAAO,QAAQ,eAAe,eAAe;AAC/C;AAMO,IAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAE9C,8BAAU,MAAM;AACd,UAAM,kBAAkB,MAAM;AAC5B,YAAM,QAAQ,eAAe;AAC7B,kBAAY,QAAQ,YAAY;AAChC,kBAAY,QAAQ,YAAY;AAAA,IAClC;AAEA,oBAAgB;AAEhB,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM,OAAO,oBAAoB,UAAU,eAAe;AAAA,EACnE,GAAG,CAAC,CAAC;AAML,QAAM,0BAA0B,MAAc;AAC5C,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAMA,QAAM,yBAAyB,MAAc;AAC3C,WAAO;AAAA,EACT;AAMA,QAAM,0BAA0B,MAAc;AAC5C,WAAO;AAAA,EACT;AAMA,QAAM,mBAAmB,MAAc;AACrC,WAAO,WAAW,uBAAuB,IAAI,wBAAwB;AAAA,EACvE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/hooks/useMobile/index.mjs

@@ -0,0 +1,61 @@
+// src/hooks/useMobile.ts
+import { useState, useEffect } 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] = useState(false);
+  const [isTablet, setIsTablet] = useState(false);
+  useEffect(() => {
+    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
+  };
+};
+export {
+  getDeviceType,
+  useMobile
+};
+//# sourceMappingURL=index.mjs.map

package/dist/hooks/useMobile/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useMobile.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n// Mobile width in pixels\nconst MOBILE_WIDTH = 500;\n// Tablet width in pixels\nconst TABLET_WIDTH = 931;\n// Default desktop width for SSR\nconst DEFAULT_WIDTH = 1200;\n\n/**\n * Device type based on screen width\n */\nexport type DeviceType = 'responsive' | 'desktop';\n\n/**\n * Gets the window width safely (SSR compatible)\n * @returns {number} window width or default value for SSR\n */\nconst getWindowWidth = (): number => {\n  if (typeof window === 'undefined') {\n    return DEFAULT_WIDTH;\n  }\n  return window.innerWidth;\n};\n\n/**\n * Gets the current device type based on screen width\n * @returns {DeviceType} 'responsive' for mobile/tablet (width < 931px), 'desktop' for larger screens\n */\nexport const getDeviceType = (): DeviceType => {\n  const width = getWindowWidth();\n  return width < TABLET_WIDTH ? 'responsive' : 'desktop';\n};\n\n/**\n * Hook to detect screen size and get responsive classes\n * @returns object with isMobile, isTablet, responsive class functions and getDeviceType\n */\nexport const useMobile = () => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [isTablet, setIsTablet] = useState(false);\n\n  useEffect(() => {\n    const checkScreenSize = () => {\n      const width = getWindowWidth();\n      setIsMobile(width < MOBILE_WIDTH);\n      setIsTablet(width < TABLET_WIDTH);\n    };\n\n    checkScreenSize();\n\n    window.addEventListener('resize', checkScreenSize);\n\n    return () => window.removeEventListener('resize', checkScreenSize);\n  }, []);\n\n  /**\n   * Get responsive classes for the form container\n   * @returns className string for form container based on screen size\n   */\n  const getFormContainerClasses = (): string => {\n    if (isMobile) {\n      return 'w-full px-4';\n    }\n    if (isTablet) {\n      return 'w-full px-6';\n    }\n    return 'w-full max-w-[992px] mx-auto px-0';\n  };\n\n  /**\n   * Get mobile-specific classes for the header\n   * @returns className string for mobile header layout\n   */\n  const getMobileHeaderClasses = (): string => {\n    return 'flex flex-col items-start gap-4 mb-6';\n  };\n\n  /**\n   * Get desktop-specific classes for the header\n   * @returns className string for desktop header layout\n   */\n  const getDesktopHeaderClasses = (): string => {\n    return 'flex flex-row justify-between items-center gap-6 mb-8';\n  };\n\n  /**\n   * Get responsive classes for the header\n   * @returns className string for header based on screen size\n   */\n  const getHeaderClasses = (): string => {\n    return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();\n  };\n\n  return {\n    isMobile,\n    isTablet,\n    getFormContainerClasses,\n    getHeaderClasses,\n    getMobileHeaderClasses,\n    getDesktopHeaderClasses,\n    getDeviceType,\n  };\n};\n"],"mappings":";AAAA,SAAS,UAAU,iBAAiB;AAGpC,IAAM,eAAe;AAErB,IAAM,eAAe;AAErB,IAAM,gBAAgB;AAWtB,IAAM,iBAAiB,MAAc;AACnC,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAMO,IAAM,gBAAgB,MAAkB;AAC7C,QAAM,QAAQ,eAAe;AAC7B,SAAO,QAAQ,eAAe,eAAe;AAC/C;AAMO,IAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,kBAAkB,MAAM;AAC5B,YAAM,QAAQ,eAAe;AAC7B,kBAAY,QAAQ,YAAY;AAChC,kBAAY,QAAQ,YAAY;AAAA,IAClC;AAEA,oBAAgB;AAEhB,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM,OAAO,oBAAoB,UAAU,eAAe;AAAA,EACnE,GAAG,CAAC,CAAC;AAML,QAAM,0BAA0B,MAAc;AAC5C,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAMA,QAAM,yBAAyB,MAAc;AAC3C,WAAO;AAAA,EACT;AAMA,QAAM,0BAA0B,MAAc;AAC5C,WAAO;AAAA,EACT;AAMA,QAAM,mBAAmB,MAAc;AACrC,WAAO,WAAW,uBAAuB,IAAI,wBAAwB;AAAA,EACvE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/index.d.mts

@@ -30,6 +30,7 @@ export { AlternativesList } from './Alternative/index.mjs';
 export { AlertDialog } from './AlertDialog/index.mjs';
 export { MultipleChoiceList } from './MultipleChoice/index.mjs';
 export { default as IconRender } from './IconRender/index.mjs';
+export { DeviceType, getDeviceType, useMobile } from './hooks/useMobile/index.mjs';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.mjs';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.mjs';
 export { default as Menu, MenuContent, MenuItem, MenuOverflow } from './Menu/index.mjs';

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { AlternativesList } from './Alternative/index.js';
 export { AlertDialog } from './AlertDialog/index.js';
 export { MultipleChoiceList } from './MultipleChoice/index.js';
 export { default as IconRender } from './IconRender/index.js';
+export { DeviceType, getDeviceType, useMobile } from './hooks/useMobile/index.js';
 export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger } from './DropdownMenu/index.js';
 export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
 export { default as Menu, MenuContent, MenuItem, MenuOverflow } from './Menu/index.js';