@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/hooks/use-device.d.ts

@@ -1,104 +1,20 @@
 export interface DeviceInfo {
-  isMobile: boolean
-  isTablet: boolean
-  isDesktop: boolean
-  screenSize: 'mobile' | 'tablet' | 'desktop'
-  orientation: 'portrait' | 'landscape'
-  touchDevice: boolean
-}
-
-// Breakpoints based on common device sizes
-const BREAKPOINTS = {
-  mobile: 768,
-  tablet: 1024,
-  desktop: 1440
-} as const
-
-export declare const useDevice: (): DeviceInfo => {
-  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
-    isMobile: false,
-    isTablet: false,
-    isDesktop: false,
-    screenSize: 'desktop',
-    orientation: 'landscape',
-    touchDevice: false
-  })
-
-  useEffect(() => {
-    const updateDeviceInfo = () => {
-      const width = window.innerWidth
-      const height = window.innerHeight
-
-      // Determine device type based on width
-      const isMobile = width < BREAKPOINTS.mobile
-      const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
-      const isDesktop = width >= BREAKPOINTS.tablet
-
-      // Determine screen size category
-      let screenSize: DeviceInfo['screenSize']
-      if (isMobile) screenSize = 'mobile'
-      else if (isTablet) screenSize = 'tablet'
-      else screenSize = 'desktop'
-
-      // Determine orientation
-      const orientation: DeviceInfo['orientation'] = width > height ? 'landscape' : 'portrait'
-
-      // Detect touch capability
-      const touchDevice = 'ontouchstart' in window || 
-                         navigator.maxTouchPoints > 0 ||
-                         // @ts-ignore - some browsers use this property
-                         navigator.msMaxTouchPoints > 0
-
-      const newDeviceInfo = {
-        isMobile,
-        isTablet,
-        isDesktop,
-        screenSize,
-        orientation,
-        touchDevice
-      }
-
-      setDeviceInfo(newDeviceInfo)
-    }
-
-    // Initial detection
-    updateDeviceInfo()
-
-    // Listen for resize events
-    window.addEventListener('resize', updateDeviceInfo)
-
-    // Listen for orientation changes
-    window.addEventListener('orientationchange', () => {
-      // Small delay to ensure dimensions are updated
-      setTimeout(updateDeviceInfo, 100)
-    })
-
-    return () => {
-      window.removeEventListener('resize', updateDeviceInfo)
-      window.removeEventListener('orientationchange', updateDeviceInfo)
-    }
-  }, [])
-
-  return deviceInfo
-}
-
-// Convenience hooks for specific use cases
-export declare const useIsMobile: () => useDevice().isMobile
-export declare const useIsTablet: () => useDevice().isTablet  
-export declare const useIsDesktop: () => useDevice().isDesktop
-export declare const useOrientation: () => useDevice().orientation
-export declare const useIsTouchDevice: () => useDevice().touchDevice
-
-// Utility function to get device-specific classes
-export declare const getDeviceClasses: (deviceInfo: DeviceInfo): string => {
-  const classes = []
-
-  classes.push(`screen-${deviceInfo.screenSize}`)
-  classes.push(`orientation-${deviceInfo.orientation}`)
-
-  if (deviceInfo.touchDevice) {
-    classes.push('touch-device')
-  }
-
-  return classes.join(' ')
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    screenSize: 'mobile' | 'tablet' | 'desktop';
+    orientation: 'portrait' | 'landscape';
+    touchDevice: boolean;
 }
+/**
+ * Enhanced device detection hook with tablet-specific support
+ * Provides detailed device information including orientation and touch capabilities
+ */
+export declare const useDevice: () => DeviceInfo;
+export declare const useIsMobile: () => boolean;
+export declare const useIsTablet: () => boolean;
+export declare const useIsDesktop: () => boolean;
+export declare const useOrientation: () => "portrait" | "landscape";
+export declare const useIsTouchDevice: () => boolean;
+export declare const getDeviceClasses: (deviceInfo: DeviceInfo) => string;
+//# sourceMappingURL=use-device.d.ts.map

package/dist/hooks/use-device.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-device.d.ts","sourceRoot":"","sources":["../../src/hooks/use-device.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IAC3C,WAAW,EAAE,UAAU,GAAG,WAAW,CAAA;IACrC,WAAW,EAAE,OAAO,CAAA;CACrB;AASD;;;GAGG;AACH,eAAO,MAAM,SAAS,QAAO,UAkE5B,CAAA;AAGD,eAAO,MAAM,WAAW,eAA6B,CAAA;AACrD,eAAO,MAAM,WAAW,eAA6B,CAAA;AACrD,eAAO,MAAM,YAAY,eAA8B,CAAA;AACvD,eAAO,MAAM,cAAc,gCAAgC,CAAA;AAC3D,eAAO,MAAM,gBAAgB,eAAgC,CAAA;AAG7D,eAAO,MAAM,gBAAgB,GAAI,YAAY,UAAU,KAAG,MAWzD,CAAA"}

package/dist/hooks/use-device.esm.js

@@ -1,110 +1,85 @@
-import { useState, useEffect } from 'react'
-
-export interface DeviceInfo {
-  isMobile: boolean
-  isTablet: boolean
-  isDesktop: boolean
-  screenSize: 'mobile' | 'tablet' | 'desktop'
-  orientation: 'portrait' | 'landscape'
-  touchDevice: boolean
-}
-
+import { useState, useEffect } from 'react';
 // Breakpoints based on common device sizes
 const BREAKPOINTS = {
-  mobile: 768,
-  tablet: 1024,
-  desktop: 1440
-} as const
-
+    mobile: 768,
+    tablet: 1024,
+    desktop: 1440
+};
 /**
  * Enhanced device detection hook with tablet-specific support
  * Provides detailed device information including orientation and touch capabilities
  */
-export const useDevice = (): DeviceInfo => {
-  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
-    isMobile: false,
-    isTablet: false,
-    isDesktop: false,
-    screenSize: 'desktop',
-    orientation: 'landscape',
-    touchDevice: false
-  })
-
-  useEffect(() => {
-    const updateDeviceInfo = () => {
-      const width = window.innerWidth
-      const height = window.innerHeight
-      
-      // Determine device type based on width
-      const isMobile = width < BREAKPOINTS.mobile
-      const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
-      const isDesktop = width >= BREAKPOINTS.tablet
-      
-      // Determine screen size category
-      let screenSize: DeviceInfo['screenSize']
-      if (isMobile) screenSize = 'mobile'
-      else if (isTablet) screenSize = 'tablet'
-      else screenSize = 'desktop'
-      
-      // Determine orientation
-      const orientation: DeviceInfo['orientation'] = width > height ? 'landscape' : 'portrait'
-      
-      // Detect touch capability
-      const touchDevice = 'ontouchstart' in window || 
-                         navigator.maxTouchPoints > 0 ||
-                         // @ts-ignore - some browsers use this property
-                         navigator.msMaxTouchPoints > 0
-
-      const newDeviceInfo = {
-        isMobile,
-        isTablet,
-        isDesktop,
-        screenSize,
-        orientation,
-        touchDevice
-      }
-
-      setDeviceInfo(newDeviceInfo)
-    }
-
-    // Initial detection
-    updateDeviceInfo()
-
-    // Listen for resize events
-    window.addEventListener('resize', updateDeviceInfo)
-    
-    // Listen for orientation changes
-    window.addEventListener('orientationchange', () => {
-      // Small delay to ensure dimensions are updated
-      setTimeout(updateDeviceInfo, 100)
-    })
-
-    return () => {
-      window.removeEventListener('resize', updateDeviceInfo)
-      window.removeEventListener('orientationchange', updateDeviceInfo)
-    }
-  }, [])
-
-  return deviceInfo
-}
-
+export const useDevice = () => {
+    const [deviceInfo, setDeviceInfo] = useState({
+        isMobile: false,
+        isTablet: false,
+        isDesktop: false,
+        screenSize: 'desktop',
+        orientation: 'landscape',
+        touchDevice: false
+    });
+    useEffect(() => {
+        const updateDeviceInfo = () => {
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+            // Determine device type based on width
+            const isMobile = width < BREAKPOINTS.mobile;
+            const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet;
+            const isDesktop = width >= BREAKPOINTS.tablet;
+            // Determine screen size category
+            let screenSize;
+            if (isMobile)
+                screenSize = 'mobile';
+            else if (isTablet)
+                screenSize = 'tablet';
+            else
+                screenSize = 'desktop';
+            // Determine orientation
+            const orientation = width > height ? 'landscape' : 'portrait';
+            // Detect touch capability
+            const touchDevice = 'ontouchstart' in window ||
+                navigator.maxTouchPoints > 0 ||
+                // @ts-ignore - some browsers use this property
+                navigator.msMaxTouchPoints > 0;
+            const newDeviceInfo = {
+                isMobile,
+                isTablet,
+                isDesktop,
+                screenSize,
+                orientation,
+                touchDevice
+            };
+            setDeviceInfo(newDeviceInfo);
+        };
+        // Initial detection
+        updateDeviceInfo();
+        // Listen for resize events
+        window.addEventListener('resize', updateDeviceInfo);
+        // Listen for orientation changes
+        window.addEventListener('orientationchange', () => {
+            // Small delay to ensure dimensions are updated
+            setTimeout(updateDeviceInfo, 100);
+        });
+        return () => {
+            window.removeEventListener('resize', updateDeviceInfo);
+            window.removeEventListener('orientationchange', updateDeviceInfo);
+        };
+    }, []);
+    return deviceInfo;
+};
 // Convenience hooks for specific use cases
-export const useIsMobile = () => useDevice().isMobile
-export const useIsTablet = () => useDevice().isTablet  
-export const useIsDesktop = () => useDevice().isDesktop
-export const useOrientation = () => useDevice().orientation
-export const useIsTouchDevice = () => useDevice().touchDevice
-
+export const useIsMobile = () => useDevice().isMobile;
+export const useIsTablet = () => useDevice().isTablet;
+export const useIsDesktop = () => useDevice().isDesktop;
+export const useOrientation = () => useDevice().orientation;
+export const useIsTouchDevice = () => useDevice().touchDevice;
 // Utility function to get device-specific classes
-export const getDeviceClasses = (deviceInfo: DeviceInfo): string => {
-  const classes = []
-  
-  classes.push(`screen-${deviceInfo.screenSize}`)
-  classes.push(`orientation-${deviceInfo.orientation}`)
-  
-  if (deviceInfo.touchDevice) {
-    classes.push('touch-device')
-  }
-  
-  return classes.join(' ')
-}
+export const getDeviceClasses = (deviceInfo) => {
+    const classes = [];
+    classes.push(`screen-${deviceInfo.screenSize}`);
+    classes.push(`orientation-${deviceInfo.orientation}`);
+    if (deviceInfo.touchDevice) {
+        classes.push('touch-device');
+    }
+    return classes.join(' ');
+};

package/dist/hooks/use-device.js

@@ -1,110 +1,85 @@
-import { useState, useEffect } from 'react'
-
-export interface DeviceInfo {
-  isMobile: boolean
-  isTablet: boolean
-  isDesktop: boolean
-  screenSize: 'mobile' | 'tablet' | 'desktop'
-  orientation: 'portrait' | 'landscape'
-  touchDevice: boolean
-}
-
+import { useState, useEffect } from 'react';
 // Breakpoints based on common device sizes
 const BREAKPOINTS = {
-  mobile: 768,
-  tablet: 1024,
-  desktop: 1440
-} as const
-
+    mobile: 768,
+    tablet: 1024,
+    desktop: 1440
+};
 /**
  * Enhanced device detection hook with tablet-specific support
  * Provides detailed device information including orientation and touch capabilities
  */
-export const useDevice = (): DeviceInfo => {
-  const [deviceInfo, setDeviceInfo] = useState<DeviceInfo>({
-    isMobile: false,
-    isTablet: false,
-    isDesktop: false,
-    screenSize: 'desktop',
-    orientation: 'landscape',
-    touchDevice: false
-  })
-
-  useEffect(() => {
-    const updateDeviceInfo = () => {
-      const width = window.innerWidth
-      const height = window.innerHeight
-      
-      // Determine device type based on width
-      const isMobile = width < BREAKPOINTS.mobile
-      const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet
-      const isDesktop = width >= BREAKPOINTS.tablet
-      
-      // Determine screen size category
-      let screenSize: DeviceInfo['screenSize']
-      if (isMobile) screenSize = 'mobile'
-      else if (isTablet) screenSize = 'tablet'
-      else screenSize = 'desktop'
-      
-      // Determine orientation
-      const orientation: DeviceInfo['orientation'] = width > height ? 'landscape' : 'portrait'
-      
-      // Detect touch capability
-      const touchDevice = 'ontouchstart' in window || 
-                         navigator.maxTouchPoints > 0 ||
-                         // @ts-ignore - some browsers use this property
-                         navigator.msMaxTouchPoints > 0
-
-      const newDeviceInfo = {
-        isMobile,
-        isTablet,
-        isDesktop,
-        screenSize,
-        orientation,
-        touchDevice
-      }
-
-      setDeviceInfo(newDeviceInfo)
-    }
-
-    // Initial detection
-    updateDeviceInfo()
-
-    // Listen for resize events
-    window.addEventListener('resize', updateDeviceInfo)
-    
-    // Listen for orientation changes
-    window.addEventListener('orientationchange', () => {
-      // Small delay to ensure dimensions are updated
-      setTimeout(updateDeviceInfo, 100)
-    })
-
-    return () => {
-      window.removeEventListener('resize', updateDeviceInfo)
-      window.removeEventListener('orientationchange', updateDeviceInfo)
-    }
-  }, [])
-
-  return deviceInfo
-}
-
+export const useDevice = () => {
+    const [deviceInfo, setDeviceInfo] = useState({
+        isMobile: false,
+        isTablet: false,
+        isDesktop: false,
+        screenSize: 'desktop',
+        orientation: 'landscape',
+        touchDevice: false
+    });
+    useEffect(() => {
+        const updateDeviceInfo = () => {
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+            // Determine device type based on width
+            const isMobile = width < BREAKPOINTS.mobile;
+            const isTablet = width >= BREAKPOINTS.mobile && width < BREAKPOINTS.tablet;
+            const isDesktop = width >= BREAKPOINTS.tablet;
+            // Determine screen size category
+            let screenSize;
+            if (isMobile)
+                screenSize = 'mobile';
+            else if (isTablet)
+                screenSize = 'tablet';
+            else
+                screenSize = 'desktop';
+            // Determine orientation
+            const orientation = width > height ? 'landscape' : 'portrait';
+            // Detect touch capability
+            const touchDevice = 'ontouchstart' in window ||
+                navigator.maxTouchPoints > 0 ||
+                // @ts-ignore - some browsers use this property
+                navigator.msMaxTouchPoints > 0;
+            const newDeviceInfo = {
+                isMobile,
+                isTablet,
+                isDesktop,
+                screenSize,
+                orientation,
+                touchDevice
+            };
+            setDeviceInfo(newDeviceInfo);
+        };
+        // Initial detection
+        updateDeviceInfo();
+        // Listen for resize events
+        window.addEventListener('resize', updateDeviceInfo);
+        // Listen for orientation changes
+        window.addEventListener('orientationchange', () => {
+            // Small delay to ensure dimensions are updated
+            setTimeout(updateDeviceInfo, 100);
+        });
+        return () => {
+            window.removeEventListener('resize', updateDeviceInfo);
+            window.removeEventListener('orientationchange', updateDeviceInfo);
+        };
+    }, []);
+    return deviceInfo;
+};
 // Convenience hooks for specific use cases
-export const useIsMobile = () => useDevice().isMobile
-export const useIsTablet = () => useDevice().isTablet  
-export const useIsDesktop = () => useDevice().isDesktop
-export const useOrientation = () => useDevice().orientation
-export const useIsTouchDevice = () => useDevice().touchDevice
-
+export const useIsMobile = () => useDevice().isMobile;
+export const useIsTablet = () => useDevice().isTablet;
+export const useIsDesktop = () => useDevice().isDesktop;
+export const useOrientation = () => useDevice().orientation;
+export const useIsTouchDevice = () => useDevice().touchDevice;
 // Utility function to get device-specific classes
-export const getDeviceClasses = (deviceInfo: DeviceInfo): string => {
-  const classes = []
-  
-  classes.push(`screen-${deviceInfo.screenSize}`)
-  classes.push(`orientation-${deviceInfo.orientation}`)
-  
-  if (deviceInfo.touchDevice) {
-    classes.push('touch-device')
-  }
-  
-  return classes.join(' ')
-}
+export const getDeviceClasses = (deviceInfo) => {
+    const classes = [];
+    classes.push(`screen-${deviceInfo.screenSize}`);
+    classes.push(`orientation-${deviceInfo.orientation}`);
+    if (deviceInfo.touchDevice) {
+        classes.push('touch-device');
+    }
+    return classes.join(' ');
+};