@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/suggestions/styles/responsive.js

@@ -0,0 +1,237 @@
+/**
+ * Responsive Utilities and Breakpoints
+ *
+ * Shared responsive design utilities for all dropdown components
+ */
+import { useState, useEffect } from 'react';
+// ============================================================================
+// Breakpoints
+// ============================================================================
+export const breakpoints = {
+    xs: 0,
+    sm: 480,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+};
+// ============================================================================
+// Media Query Helpers
+// ============================================================================
+export const mediaQueries = {
+    xs: `@media (max-width: ${breakpoints.sm - 1}px)`,
+    sm: `@media (min-width: ${breakpoints.sm}px) and (max-width: ${breakpoints.md - 1}px)`,
+    md: `@media (min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg - 1}px)`,
+    lg: `@media (min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xl - 1}px)`,
+    xl: `@media (min-width: ${breakpoints.xl}px)`,
+    mobile: `@media (max-width: ${breakpoints.md - 1}px)`,
+    tablet: `@media (min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg - 1}px)`,
+    desktop: `@media (min-width: ${breakpoints.lg}px)`,
+    touch: '@media (hover: none) and (pointer: coarse)',
+    mouse: '@media (hover: hover) and (pointer: fine)',
+};
+// ============================================================================
+// Touch-Friendly Sizing
+// ============================================================================
+export const touchTargets = {
+    /** Minimum touch target size per WCAG guidelines */
+    minimum: 44,
+    /** Comfortable touch target size */
+    comfortable: 48,
+    /** Large touch target for primary actions */
+    large: 56,
+};
+// ============================================================================
+// Responsive Spacing
+// ============================================================================
+export const responsiveSpacing = {
+    mobile: {
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '20px',
+    },
+    desktop: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+};
+// ============================================================================
+// Responsive Typography
+// ============================================================================
+export const responsiveTypography = {
+    mobile: {
+        xs: '11px',
+        sm: '13px',
+        md: '15px',
+        lg: '17px',
+        xl: '20px',
+        xxl: '24px',
+    },
+    desktop: {
+        xs: '11px',
+        sm: '12px',
+        md: '14px',
+        lg: '16px',
+        xl: '18px',
+        xxl: '24px',
+    },
+};
+// ============================================================================
+// CSS Generation Helpers
+// ============================================================================
+/**
+ * Generate responsive CSS class string
+ */
+export const generateResponsiveCSS = (componentName) => `
+  /* Base responsive styles for ${componentName} */
+  .${componentName} {
+    --seekora-touch-target: ${touchTargets.minimum}px;
+    --seekora-spacing-mobile: ${responsiveSpacing.mobile.md};
+    --seekora-spacing-desktop: ${responsiveSpacing.desktop.md};
+  }
+
+  /* Mobile-first base */
+  ${mediaQueries.mobile} {
+    .${componentName} {
+      width: 100% !important;
+      max-width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      border-radius: 0 !important;
+      margin-top: 0 !important;
+    }
+    
+    .${componentName} [data-item],
+    .${componentName} [role="option"] {
+      min-height: var(--seekora-touch-target);
+      padding: 12px 16px;
+    }
+    
+    .${componentName} button {
+      min-height: var(--seekora-touch-target);
+      min-width: var(--seekora-touch-target);
+    }
+  }
+
+  /* Touch device optimizations */
+  ${mediaQueries.touch} {
+    .${componentName} [data-item]:active,
+    .${componentName} [role="option"]:active {
+      background-color: var(--seekora-bg-hover, #f0f0f0) !important;
+    }
+    
+    /* Disable hover states on touch */
+    .${componentName} [data-item]:hover,
+    .${componentName} [role="option"]:hover {
+      background-color: transparent;
+    }
+  }
+
+  /* Tablet adjustments */
+  ${mediaQueries.tablet} {
+    .${componentName} {
+      max-width: 90vw;
+      margin: 8px auto;
+    }
+  }
+
+  /* Desktop optimizations */
+  ${mediaQueries.desktop} {
+    .${componentName} [data-item],
+    .${componentName} [role="option"] {
+      min-height: 40px;
+    }
+  }
+`;
+/**
+ * Inject responsive styles into document
+ */
+export const injectResponsiveStyles = (componentName) => {
+    const styleId = `seekora-responsive-${componentName}`;
+    // Don't inject if already exists
+    if (typeof document !== 'undefined' && document.getElementById(styleId)) {
+        return;
+    }
+    if (typeof document !== 'undefined') {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = generateResponsiveCSS(componentName);
+        document.head.appendChild(style);
+    }
+};
+export const useResponsive = () => {
+    const [state, setState] = useState({
+        isMobile: false,
+        isTablet: false,
+        isDesktop: true,
+        isTouch: false,
+        width: typeof window !== 'undefined' ? window.innerWidth : 1024,
+        height: typeof window !== 'undefined' ? window.innerHeight : 768,
+        breakpoint: 'lg',
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const getBreakpoint = (width) => {
+            if (width < breakpoints.sm)
+                return 'xs';
+            if (width < breakpoints.md)
+                return 'sm';
+            if (width < breakpoints.lg)
+                return 'md';
+            if (width < breakpoints.xl)
+                return 'lg';
+            return 'xl';
+        };
+        const updateState = () => {
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+            const breakpoint = getBreakpoint(width);
+            const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+            setState({
+                isMobile: width < breakpoints.md,
+                isTablet: width >= breakpoints.md && width < breakpoints.lg,
+                isDesktop: width >= breakpoints.lg,
+                isTouch,
+                width,
+                height,
+                breakpoint,
+            });
+        };
+        updateState();
+        window.addEventListener('resize', updateState);
+        return () => window.removeEventListener('resize', updateState);
+    }, []);
+    return state;
+};
+/**
+ * Get styles for current breakpoint
+ */
+export const getResponsiveStyle = (styles, responsive) => {
+    const { isMobile, isTablet } = responsive;
+    return {
+        ...styles.base,
+        ...(isMobile && styles.mobile),
+        ...(isTablet && styles.tablet),
+        ...(!isMobile && !isTablet && styles.desktop),
+    };
+};
+// ============================================================================
+// Safe Area Handling
+// ============================================================================
+export const safeAreaInsets = {
+    top: 'env(safe-area-inset-top, 0px)',
+    bottom: 'env(safe-area-inset-bottom, 0px)',
+    left: 'env(safe-area-inset-left, 0px)',
+    right: 'env(safe-area-inset-right, 0px)',
+};
+/**
+ * Get padding with safe area insets
+ */
+export const getSafeAreaPadding = (position, additionalPadding = '0px') => {
+    return `calc(${safeAreaInsets[position]} + ${additionalPadding})`;
+};