@rakeyshgidwani/roger-ui-bank-theme-harvey 0.2.52 → 0.3.0

package/dist/utils/progressive-css-injector.esm.js

@@ -0,0 +1,217 @@
+/**
+ * Progressive CSS Injector
+ * Runtime utility to load progressive CSS for desktop enhancement
+ *
+ * This is a simplified, production-ready approach that:
+ * 1. Detects desktop viewport (>= 1024px)
+ * 2. Dynamically loads progressive.css
+ * 3. Handles viewport changes and preloading
+ */
+const DEFAULT_CONFIG = {
+    desktopBreakpoint: 1024, // lg breakpoint
+    progressiveCSSPath: '/progressive.css',
+    enablePreload: true,
+    enableViewportDetection: true
+};
+class ProgressiveCSSInjector {
+    constructor(config = {}) {
+        this.isLoaded = false;
+        this.linkElement = null;
+        this.preloadElement = null;
+        this.config = { ...DEFAULT_CONFIG, ...config };
+    }
+    /**
+     * Initialize the progressive CSS loader
+     */
+    init() {
+        if (typeof window === 'undefined')
+            return; // SSR safety
+        // Only run in production or when explicitly enabled
+        // In development, progressive.css likely doesn't exist
+        const isProduction = typeof import.meta !== 'undefined' && import.meta.env?.PROD === true;
+        const isDevelopment = typeof import.meta !== 'undefined' && import.meta.env?.DEV === true;
+        if (isDevelopment && !this.config.enableViewportDetection) {
+            console.log('Progressive CSS: Skipping in development (set enableViewportDetection: true to override)');
+            return;
+        }
+        // In production, check if progressive CSS file exists
+        if (isProduction) {
+            this.checkFileExists()
+                .then(exists => {
+                if (!exists) {
+                    console.log('Progressive CSS file not found, skipping enhancement');
+                    return;
+                }
+                this.initializeFeatures();
+            })
+                .catch(error => {
+                console.warn('Progressive CSS loader initialization failed:', error);
+            });
+        }
+        else {
+            // In development with explicit enablement, skip file check
+            this.initializeFeatures();
+        }
+    }
+    /**
+     * Initialize progressive CSS features
+     */
+    initializeFeatures() {
+        // Initial viewport check
+        this.checkAndLoadProgressiveCSS();
+        // Setup viewport change listener if enabled
+        if (this.config.enableViewportDetection) {
+            this.setupViewportListener();
+        }
+        // Setup preloading if enabled
+        if (this.config.enablePreload) {
+            this.setupPreloading();
+        }
+    }
+    /**
+     * Check if the progressive CSS file exists
+     */
+    async checkFileExists() {
+        try {
+            const response = await fetch(this.config.progressiveCSSPath, { method: 'HEAD' });
+            return response.ok;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Check viewport and load progressive CSS if needed
+     */
+    checkAndLoadProgressiveCSS() {
+        const isDesktop = window.innerWidth >= this.config.desktopBreakpoint;
+        if (isDesktop && !this.isLoaded) {
+            this.loadProgressiveCSS();
+        }
+        else if (!isDesktop && this.isLoaded) {
+            this.unloadProgressiveCSS();
+        }
+    }
+    /**
+     * Load progressive CSS
+     */
+    loadProgressiveCSS() {
+        if (this.isLoaded || this.linkElement)
+            return;
+        this.linkElement = document.createElement('link');
+        this.linkElement.rel = 'stylesheet';
+        this.linkElement.href = this.config.progressiveCSSPath;
+        this.linkElement.media = `screen and (min-width: ${this.config.desktopBreakpoint}px)`;
+        this.linkElement.onload = () => {
+            this.isLoaded = true;
+            console.log(`Progressive CSS loaded for viewport >= ${this.config.desktopBreakpoint}px`);
+        };
+        this.linkElement.onerror = () => {
+            console.warn('Failed to load progressive CSS');
+            this.cleanup();
+        };
+        document.head.appendChild(this.linkElement);
+    }
+    /**
+     * Unload progressive CSS (for mobile/tablet)
+     */
+    unloadProgressiveCSS() {
+        if (this.linkElement) {
+            document.head.removeChild(this.linkElement);
+            this.linkElement = null;
+            this.isLoaded = false;
+            console.log('Progressive CSS unloaded for mobile/tablet viewport');
+        }
+    }
+    /**
+     * Setup viewport change listener
+     */
+    setupViewportListener() {
+        let resizeTimeout;
+        const handleResize = () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = window.setTimeout(() => {
+                this.checkAndLoadProgressiveCSS();
+            }, 150); // Debounce resize events
+        };
+        window.addEventListener('resize', handleResize);
+    }
+    /**
+     * Setup preloading for fast desktop switches
+     */
+    setupPreloading() {
+        // Only preload on tablet+ to avoid mobile data usage
+        if (window.innerWidth >= 768) {
+            this.preloadElement = document.createElement('link');
+            this.preloadElement.rel = 'preload';
+            this.preloadElement.href = this.config.progressiveCSSPath;
+            this.preloadElement.as = 'style';
+            document.head.appendChild(this.preloadElement);
+            console.log('Progressive CSS preloaded for fast desktop enhancement');
+        }
+    }
+    /**
+     * Cleanup resources
+     */
+    cleanup() {
+        if (this.linkElement) {
+            this.linkElement = null;
+        }
+        if (this.preloadElement) {
+            document.head.removeChild(this.preloadElement);
+            this.preloadElement = null;
+        }
+        this.isLoaded = false;
+    }
+    /**
+     * Force load progressive CSS (for testing/debugging)
+     */
+    forceLoad() {
+        this.loadProgressiveCSS();
+    }
+    /**
+     * Force unload progressive CSS (for testing/debugging)
+     */
+    forceUnload() {
+        this.unloadProgressiveCSS();
+    }
+    /**
+     * Get current load status
+     */
+    getStatus() {
+        return {
+            isLoaded: this.isLoaded,
+            hasLinkElement: !!this.linkElement,
+            hasPreloadElement: !!this.preloadElement,
+            currentViewport: window.innerWidth,
+            isDesktopViewport: window.innerWidth >= this.config.desktopBreakpoint
+        };
+    }
+}
+// Export singleton instance for easy use
+export const progressiveLoader = new ProgressiveCSSInjector();
+// Export class for custom instances
+export { ProgressiveCSSInjector };
+// Export initialization function for manual control
+export function initializeProgressiveCSS(config) {
+    // Only initialize in browser environment
+    if (typeof window === 'undefined') {
+        console.log('Progressive CSS: Skipping initialization (non-browser environment)');
+        return;
+    }
+    // Respect production gating by default
+    const isProduction = typeof import.meta !== 'undefined' && import.meta.env?.PROD === true;
+    const isDevelopment = typeof import.meta !== 'undefined' && import.meta.env?.DEV === true;
+    if (isDevelopment && !config?.enableViewportDetection) {
+        console.log('Progressive CSS: Skipping in development (pass enableViewportDetection: true to override)');
+        return;
+    }
+    void isProduction; // Use the variable to avoid unused warning
+    if (config) {
+        const customLoader = new ProgressiveCSSInjector(config);
+        customLoader.init();
+    }
+    else {
+        progressiveLoader.init();
+    }
+}

package/dist/utils/progressive-css-injector.js

@@ -0,0 +1,217 @@
+/**
+ * Progressive CSS Injector
+ * Runtime utility to load progressive CSS for desktop enhancement
+ *
+ * This is a simplified, production-ready approach that:
+ * 1. Detects desktop viewport (>= 1024px)
+ * 2. Dynamically loads progressive.css
+ * 3. Handles viewport changes and preloading
+ */
+const DEFAULT_CONFIG = {
+    desktopBreakpoint: 1024, // lg breakpoint
+    progressiveCSSPath: '/progressive.css',
+    enablePreload: true,
+    enableViewportDetection: true
+};
+class ProgressiveCSSInjector {
+    constructor(config = {}) {
+        this.isLoaded = false;
+        this.linkElement = null;
+        this.preloadElement = null;
+        this.config = { ...DEFAULT_CONFIG, ...config };
+    }
+    /**
+     * Initialize the progressive CSS loader
+     */
+    init() {
+        if (typeof window === 'undefined')
+            return; // SSR safety
+        // Only run in production or when explicitly enabled
+        // In development, progressive.css likely doesn't exist
+        const isProduction = typeof import.meta !== 'undefined' && import.meta.env?.PROD === true;
+        const isDevelopment = typeof import.meta !== 'undefined' && import.meta.env?.DEV === true;
+        if (isDevelopment && !this.config.enableViewportDetection) {
+            console.log('Progressive CSS: Skipping in development (set enableViewportDetection: true to override)');
+            return;
+        }
+        // In production, check if progressive CSS file exists
+        if (isProduction) {
+            this.checkFileExists()
+                .then(exists => {
+                if (!exists) {
+                    console.log('Progressive CSS file not found, skipping enhancement');
+                    return;
+                }
+                this.initializeFeatures();
+            })
+                .catch(error => {
+                console.warn('Progressive CSS loader initialization failed:', error);
+            });
+        }
+        else {
+            // In development with explicit enablement, skip file check
+            this.initializeFeatures();
+        }
+    }
+    /**
+     * Initialize progressive CSS features
+     */
+    initializeFeatures() {
+        // Initial viewport check
+        this.checkAndLoadProgressiveCSS();
+        // Setup viewport change listener if enabled
+        if (this.config.enableViewportDetection) {
+            this.setupViewportListener();
+        }
+        // Setup preloading if enabled
+        if (this.config.enablePreload) {
+            this.setupPreloading();
+        }
+    }
+    /**
+     * Check if the progressive CSS file exists
+     */
+    async checkFileExists() {
+        try {
+            const response = await fetch(this.config.progressiveCSSPath, { method: 'HEAD' });
+            return response.ok;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Check viewport and load progressive CSS if needed
+     */
+    checkAndLoadProgressiveCSS() {
+        const isDesktop = window.innerWidth >= this.config.desktopBreakpoint;
+        if (isDesktop && !this.isLoaded) {
+            this.loadProgressiveCSS();
+        }
+        else if (!isDesktop && this.isLoaded) {
+            this.unloadProgressiveCSS();
+        }
+    }
+    /**
+     * Load progressive CSS
+     */
+    loadProgressiveCSS() {
+        if (this.isLoaded || this.linkElement)
+            return;
+        this.linkElement = document.createElement('link');
+        this.linkElement.rel = 'stylesheet';
+        this.linkElement.href = this.config.progressiveCSSPath;
+        this.linkElement.media = `screen and (min-width: ${this.config.desktopBreakpoint}px)`;
+        this.linkElement.onload = () => {
+            this.isLoaded = true;
+            console.log(`Progressive CSS loaded for viewport >= ${this.config.desktopBreakpoint}px`);
+        };
+        this.linkElement.onerror = () => {
+            console.warn('Failed to load progressive CSS');
+            this.cleanup();
+        };
+        document.head.appendChild(this.linkElement);
+    }
+    /**
+     * Unload progressive CSS (for mobile/tablet)
+     */
+    unloadProgressiveCSS() {
+        if (this.linkElement) {
+            document.head.removeChild(this.linkElement);
+            this.linkElement = null;
+            this.isLoaded = false;
+            console.log('Progressive CSS unloaded for mobile/tablet viewport');
+        }
+    }
+    /**
+     * Setup viewport change listener
+     */
+    setupViewportListener() {
+        let resizeTimeout;
+        const handleResize = () => {
+            clearTimeout(resizeTimeout);
+            resizeTimeout = window.setTimeout(() => {
+                this.checkAndLoadProgressiveCSS();
+            }, 150); // Debounce resize events
+        };
+        window.addEventListener('resize', handleResize);
+    }
+    /**
+     * Setup preloading for fast desktop switches
+     */
+    setupPreloading() {
+        // Only preload on tablet+ to avoid mobile data usage
+        if (window.innerWidth >= 768) {
+            this.preloadElement = document.createElement('link');
+            this.preloadElement.rel = 'preload';
+            this.preloadElement.href = this.config.progressiveCSSPath;
+            this.preloadElement.as = 'style';
+            document.head.appendChild(this.preloadElement);
+            console.log('Progressive CSS preloaded for fast desktop enhancement');
+        }
+    }
+    /**
+     * Cleanup resources
+     */
+    cleanup() {
+        if (this.linkElement) {
+            this.linkElement = null;
+        }
+        if (this.preloadElement) {
+            document.head.removeChild(this.preloadElement);
+            this.preloadElement = null;
+        }
+        this.isLoaded = false;
+    }
+    /**
+     * Force load progressive CSS (for testing/debugging)
+     */
+    forceLoad() {
+        this.loadProgressiveCSS();
+    }
+    /**
+     * Force unload progressive CSS (for testing/debugging)
+     */
+    forceUnload() {
+        this.unloadProgressiveCSS();
+    }
+    /**
+     * Get current load status
+     */
+    getStatus() {
+        return {
+            isLoaded: this.isLoaded,
+            hasLinkElement: !!this.linkElement,
+            hasPreloadElement: !!this.preloadElement,
+            currentViewport: window.innerWidth,
+            isDesktopViewport: window.innerWidth >= this.config.desktopBreakpoint
+        };
+    }
+}
+// Export singleton instance for easy use
+export const progressiveLoader = new ProgressiveCSSInjector();
+// Export class for custom instances
+export { ProgressiveCSSInjector };
+// Export initialization function for manual control
+export function initializeProgressiveCSS(config) {
+    // Only initialize in browser environment
+    if (typeof window === 'undefined') {
+        console.log('Progressive CSS: Skipping initialization (non-browser environment)');
+        return;
+    }
+    // Respect production gating by default
+    const isProduction = typeof import.meta !== 'undefined' && import.meta.env?.PROD === true;
+    const isDevelopment = typeof import.meta !== 'undefined' && import.meta.env?.DEV === true;
+    if (isDevelopment && !config?.enableViewportDetection) {
+        console.log('Progressive CSS: Skipping in development (pass enableViewportDetection: true to override)');
+        return;
+    }
+    void isProduction; // Use the variable to avoid unused warning
+    if (config) {
+        const customLoader = new ProgressiveCSSInjector(config);
+        customLoader.init();
+    }
+    else {
+        progressiveLoader.init();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rakeyshgidwani/roger-ui-bank-theme-harvey",
-  "version": "0.2.52",
+  "version": "0.3.0",
   "description": "Roger UI harvey theme - Complete design system with components, styles, and utilities",
   "keywords": [
     "design-system",

package/src/components/ui/button.tsx

@@ -6,24 +6,27 @@ import { Slot } from "@radix-ui/react-slot"
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
-  size?: 'default' | 'sm' | 'lg' | 'icon' | 'mobile'
+  size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | 'icon' | 'mobile'
+  /** Phase 2 Enhancement: Content density support for responsive design */
+  density?: 'compact' | 'comfortable' | 'spacious'
   asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
+  ({ className, variant = 'default', size = 'default', density, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
-    
+
     // Build semantic CSS classes using BEM methodology
     const baseClass = 'button'
     const variantClass = `button--variant-${variant}`
     const sizeClass = `button--size-${size}`
-    
+    const densityClass = density ? `button--density-${density}` : null
+
     // Combine classes
-    const buttonClasses = [baseClass, variantClass, sizeClass, className]
+    const buttonClasses = [baseClass, variantClass, sizeClass, densityClass, className]
       .filter(Boolean)
       .join(' ')
-    
+
     return (
       <Comp
         className={buttonClasses}