responsive-system 1.2.2 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"responsive-system.mjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n children,\r\n debug: _debug = false\r\n}) => {\r\n // El Provider ahora solo envuelve children sin context\r\n // El auto-scaling funciona mediante el plugin de Tailwind\r\n return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n xs: 475,\r\n sm: 640,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1280,\r\n '2xl': 1536,\r\n '3xl': 1920,\r\n '4xl': 2560,\r\n '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n ResponsiveState, \r\n Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n getCurrentBreakpoint,\r\n getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n func: T,\r\n wait: number\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null\r\n return (...args: Parameters<T>) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => func(...args), wait)\r\n }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n const [dimensions, setDimensions] = useState({\r\n width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n })\r\n\r\n // Función para actualizar dimensiones\r\n const updateDimensions = useCallback(() => {\r\n setDimensions({\r\n width: window.innerWidth,\r\n height: window.innerHeight\r\n })\r\n }, [])\r\n\r\n // Debounced update para optimizar performance\r\n const debouncedUpdateDimensions = useMemo(\r\n () => debounce(updateDimensions, 100),\r\n [updateDimensions]\r\n )\r\n\r\n // Effect para escuchar cambios de tamaño\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n window.addEventListener('resize', debouncedUpdateDimensions)\r\n \r\n return () => {\r\n window.removeEventListener('resize', debouncedUpdateDimensions)\r\n }\r\n }, [debouncedUpdateDimensions])\r\n\r\n const { width, height } = dimensions\r\n\r\n // Calcular breakpoint actual\r\n const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n \r\n // Calcular orientación\r\n const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n // Helpers booleanos por breakpoint específico\r\n const isXs = breakpoint === 'xs'\r\n const isSm = breakpoint === 'sm'\r\n const isMd = breakpoint === 'md'\r\n const isLg = breakpoint === 'lg'\r\n const isXl = breakpoint === 'xl'\r\n const is2Xl = breakpoint === '2xl'\r\n const is3Xl = breakpoint === '3xl'\r\n const is4Xl = breakpoint === '4xl'\r\n const is5Xl = breakpoint === '5xl'\r\n\r\n // Helpers booleanos agrupados\r\n const isMobile = isXs || isSm\r\n const isTablet = isMd\r\n const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isSmall = isXs || isSm || isMd\r\n const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isUltraWide = is3Xl || is4Xl || is5Xl\r\n const is4K = is4Xl || is5Xl\r\n const is5K = is5Xl\r\n\r\n // Helpers de orientación\r\n const isPortrait = orientation === 'portrait'\r\n const isLandscape = orientation === 'landscape'\r\n\r\n // Funciones de comparación de breakpoints\r\n const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n const current = getBreakpointIndex(breakpoint)\r\n return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n }, [breakpoint])\r\n\r\n // Funciones de comparación de ancho\r\n const isWidthUp = useCallback((minWidth: number): boolean => {\r\n return width >= minWidth\r\n }, [width])\r\n\r\n const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n return width <= maxWidth\r\n }, [width])\r\n\r\n const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n return width >= minWidth && width <= maxWidth\r\n }, [width])\r\n\r\n // Funciones de comparación de altura\r\n const isHeightUp = useCallback((minHeight: number): boolean => {\r\n return height >= minHeight\r\n }, [height])\r\n\r\n const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n return height <= maxHeight\r\n }, [height])\r\n\r\n const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n return height >= minHeight && height <= maxHeight\r\n }, [height])\r\n\r\n // Debug mode\r\n const debug = false\r\n\r\n return {\r\n // Estado básico\r\n breakpoint,\r\n width,\r\n height,\r\n orientation,\r\n \r\n // Helpers booleanos específicos\r\n isXs,\r\n isSm,\r\n isMd,\r\n isLg,\r\n isXl,\r\n is2Xl,\r\n is3Xl,\r\n is4Xl,\r\n is5Xl,\r\n \r\n // Helpers booleanos agrupados\r\n isMobile,\r\n isTablet,\r\n isDesktop,\r\n isSmall,\r\n isLarge,\r\n isUltraWide,\r\n is4K,\r\n is5K,\r\n \r\n // Helpers de orientación\r\n isPortrait,\r\n isLandscape,\r\n \r\n // Funciones de comparación\r\n isBreakpointUp,\r\n isBreakpointDown,\r\n isBreakpointBetween,\r\n isWidthUp,\r\n isWidthDown,\r\n isWidthBetween,\r\n isHeightUp,\r\n isHeightDown,\r\n isHeightBetween,\r\n \r\n // Debug\r\n debug\r\n }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n // Estado del sistema responsivo\r\n responsive: ResponsiveState\r\n \r\n // Estado del layout\r\n layout: {\r\n current: string\r\n config: LayoutConfig\r\n setLayout: (layout: string) => void\r\n }\r\n \r\n // Utilidades de layout\r\n layoutUtils: {\r\n getContainerClass: () => string\r\n getMainClass: () => string\r\n hasSidebar: () => boolean\r\n hasHeader: () => boolean\r\n hasFooter: () => boolean\r\n hasNavigation: () => boolean\r\n }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n const context = useContext(ResponsiveLayoutContext)\r\n if (!context) {\r\n throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n }\r\n return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n sidebarOpen: boolean\r\n setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n {children}\r\n </SidebarContext.Provider>\r\n )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n const context = useContext(SidebarContext)\r\n if (!context) {\r\n throw new Error('useSidebar must be used within a SidebarProvider')\r\n }\r\n return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n currentPage: 'demo' | 'test'\r\n setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n currentPage: 'test',\r\n setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n children: React.ReactNode\r\n defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n children, \r\n defaultPage = 'test' \r\n}) => {\r\n const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n return (\r\n <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n {children}\r\n </NavigationContext.Provider>\r\n )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n const context = useResponsiveLayoutContext()\r\n \r\n return {\r\n // Todo el sistema responsivo original\r\n ...context.responsive,\r\n \r\n // Sistema de layout\r\n layout: {\r\n current: context.layout.current,\r\n config: context.layout.config,\r\n setLayout: context.layout.setLayout,\r\n },\r\n \r\n // Utilidades de layout\r\n layoutUtils: context.layoutUtils,\r\n \r\n // Helpers específicos del layout\r\n isDefaultLayout: () => context.layout.current === 'default',\r\n isSidebarLayout: () => context.layout.current === 'sidebar',\r\n isDashboardLayout: () => context.layout.current === 'dashboard',\r\n isMinimalLayout: () => context.layout.current === 'minimal',\r\n \r\n // Grid helpers que usan el sistema auto-escalable\r\n grid: {\r\n auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n responsive: (breakpoints: Record<string, number>) => {\r\n const classes: string[] = []\r\n Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n if (breakpoint === 'base') {\r\n classes.push(`grid-cols-${cols}`)\r\n } else {\r\n classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n }\r\n })\r\n return classes.join(' ')\r\n },\r\n fixed: (cols: number) => `grid-cols-${cols}`,\r\n },\r\n \r\n // Spacing helpers que escalan automáticamente\r\n spacing: {\r\n container: context.layoutUtils.getContainerClass(),\r\n section: 'mb-6',\r\n card: 'p-6',\r\n gap: 'gap-4',\r\n },\r\n }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n const responsiveLayout = useResponsiveLayout()\r\n \r\n return {\r\n // Layout actual\r\n current: responsiveLayout.layout.current,\r\n config: responsiveLayout.layout.config,\r\n setLayout: responsiveLayout.layout.setLayout,\r\n \r\n // Utilidades\r\n ...responsiveLayout.layoutUtils,\r\n \r\n // Helpers específicos\r\n isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n \r\n // Grid helpers\r\n grid: responsiveLayout.grid,\r\n \r\n // Spacing helpers\r\n spacing: responsiveLayout.spacing,\r\n }\r\n}\r\n","export interface LayoutConfig {\r\n name: string\r\n description: string\r\n components: string[]\r\n spacing: string\r\n responsive: {\r\n mobile: string\r\n tablet: string\r\n desktop: string\r\n }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n default: {\r\n name: 'Default',\r\n description: 'Navbar arriba, body central, footer abajo',\r\n components: ['Navigation', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n sidebar: {\r\n name: 'Sidebar',\r\n description: 'Sidebar izquierda, contenido principal',\r\n components: ['Sidebar'],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n },\r\n dashboard: {\r\n name: 'Dashboard',\r\n description: 'Header + Sidebar + Main + Footer',\r\n components: ['Header', 'Sidebar', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n minimal: {\r\n name: 'Minimal',\r\n description: 'Solo contenido, sin navegación',\r\n components: [],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n children: React.ReactNode\r\n defaultLayout?: string\r\n /**\r\n * Hook responsivo personalizado del proyecto consumidor.\r\n * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n * Debe retornar un objeto compatible con ResponsiveState.\r\n */\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n children: React.ReactNode\r\n defaultLayout: string\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n children, \r\n defaultLayout,\r\n useResponsiveHook\r\n}) => {\r\n // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n const internalResponsive = useResponsive()\r\n const customResponsive = useResponsiveHook?.()\r\n const responsive = customResponsive || internalResponsive\r\n \r\n const [currentLayout, setCurrentLayout] = useState(defaultLayout)\r\n \r\n const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n \r\n const layoutUtils = {\r\n getContainerClass: () => {\r\n if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n return layoutConfig.responsive.desktop\r\n },\r\n \r\n getMainClass: () => {\r\n const baseClass = 'min-h-screen bg-black'\r\n if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n return `${baseClass} flex`\r\n }\r\n return baseClass\r\n },\r\n \r\n hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n hasHeader: () => currentLayout === 'dashboard',\r\n hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n hasNavigation: () => currentLayout === 'default',\r\n }\r\n \r\n const contextValue = {\r\n responsive,\r\n layout: {\r\n current: currentLayout,\r\n config: layoutConfig,\r\n setLayout: setCurrentLayout,\r\n },\r\n layoutUtils,\r\n }\r\n \r\n return (\r\n <ResponsiveLayoutContext.Provider value={contextValue}>\r\n {children}\r\n </ResponsiveLayoutContext.Provider>\r\n )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n children, \r\n defaultLayout = DEFAULT_LAYOUT,\r\n useResponsiveHook\r\n}) => {\r\n return (\r\n <ResponsiveProvider>\r\n <ResponsiveLayoutProviderInner \r\n defaultLayout={defaultLayout}\r\n useResponsiveHook={useResponsiveHook}\r\n >\r\n {children}\r\n </ResponsiveLayoutProviderInner>\r\n </ResponsiveProvider>\r\n )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n DefaultLayout, \r\n SidebarLayout, \r\n DashboardLayout, \r\n MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n children: React.ReactNode\r\n /**\r\n * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n */\r\n layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n const { layout } = useResponsiveLayout()\r\n \r\n // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n const currentLayout = layoutProp || layout.current\r\n \r\n // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n const layouts = {\r\n default: DefaultLayout,\r\n sidebar: SidebarLayout,\r\n dashboard: DashboardLayout,\r\n minimal: MinimalLayout,\r\n }\r\n \r\n const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n \r\n return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && menuItems.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.label}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <>\r\n {/* Hamburger button para móvil */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 border border-gray-700\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n\r\n {/* Sidebar desktop */}\r\n <aside className={`\r\n bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\r\n ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}\r\n ${isTablet ? 'w-56' : 'w-64'}\r\n `}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n {/* Logo y Breakpoint */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest mt-1\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => setCurrentPage(item.id as 'demo' | 'test')}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n \r\n </div>\r\n </aside>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Footer = () => {\r\n const { layout, breakpoint, width, height } = useResponsiveLayout()\r\n \r\n return (\r\n <footer className=\"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20\">\r\n <div className={`${layout.config.spacing} py-8`}>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n {/* Brand */}\r\n <div>\r\n <div className=\"flex items-center space-x-3 mb-4\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Responsive System</span>\r\n </div>\r\n <p className=\"text-gray-400 text-sm leading-relaxed\">\r\n Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS\r\n </p>\r\n </div>\r\n \r\n {/* Status */}\r\n <div>\r\n <h3 className=\"text-white font-semibold mb-4\">Estado del Sistema</h3>\r\n <div className=\"space-y-2\">\r\n <div className=\"flex items-center justify-between text-sm\">\r\n <span className=\"text-gray-400\">Breakpoint:</span>\r\n <span className=\"text-cyan-400 font-medium\">{breakpoint.toUpperCase()}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-sm\">\r\n <span className=\"text-gray-400\">Layout:</span>\r\n <span className=\"text-cyan-400 font-medium\">{layout.config.name}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-sm\">\r\n <span className=\"text-gray-400\">Resolución:</span>\r\n <span className=\"text-cyan-400 font-medium\">{width} × {height}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Developer */}\r\n <div>\r\n <h3 className=\"text-white font-semibold mb-4\">Desarrollador</h3>\r\n <div className=\"space-y-3\">\r\n <div className=\"flex items-center space-x-3\">\r\n <div className=\"w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center\">\r\n <svg className=\"w-4 h-4 text-gray-300\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <p className=\"text-white font-medium text-sm\">Felipe Caroca</p>\r\n <p className=\"text-gray-400 text-xs\">Frontend Developer</p>\r\n </div>\r\n </div>\r\n <a \r\n href=\"https://github.com/FelipeCaroca1\" \r\n target=\"_blank\" \r\n rel=\"noopener noreferrer\"\r\n className=\"flex items-center space-x-2 text-gray-400 hover:text-cyan-400 transition-colors text-sm group\"\r\n >\r\n <svg className=\"w-4 h-4 group-hover:text-cyan-400\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n <span>Ver en GitHub</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Bottom */}\r\n <div className=\"border-t border-gray-800 mt-8 pt-6 flex flex-col items-center text-center\">\r\n <p className=\"text-gray-500 text-sm mb-4\">\r\n © 2025 Responsive System. Todos los derechos reservados.\r\n </p>\r\n <div className=\"flex items-center space-x-4\">\r\n <span className=\"text-gray-500 text-xs\">\r\n Auto-escalado activo\r\n </span>\r\n <div className=\"w-2 h-2 bg-cyan-400 rounded-full animate-pulse\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useState } from 'react'\r\nimport { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation } from '../../context'\r\n\r\nconst Navigation = () => {\r\n const { isMobile, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n const pages = [\r\n { id: 'demo', name: 'Demo' },\r\n { id: 'test', name: 'Suite de Test' }\r\n ]\r\n\r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <nav className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && pages.map(page => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.name}\r\n </button>\r\n ))}\r\n \r\n {/* Menú hamburguesa para móvil - A LA DERECHA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(!sidebarOpen)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Menú móvil desplegable - TRADICIONAL */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50\">\r\n <div className=\"p-4\">\r\n {/* Navigation - VERTICAL como menú tradicional */}\r\n <nav className=\"space-y-2\">\r\n {pages.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => {\r\n setCurrentPage(page.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.name}\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n )}\r\n </nav>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/* Navigation fijo arriba */}\r\n <Navigation />\r\n \r\n {/* Main content con padding-top para la navigation */}\r\n <main className=\"flex-1\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n \r\n {/* Footer fijo abajo */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider, useSidebar } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n const { setSidebarOpen } = useSidebar()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/* Navbar para móvil (igual que SidebarLayout) */}\r\n <div className=\"sticky top-0 z-50\">\r\n <nav className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n \r\n {/* Content area con sidebar */}\r\n <div className=\"flex flex-1\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n \r\n {/* Footer */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black\">\r\n <main className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n const { current, setLayout, config } = useLayout()\r\n \r\n if (compact) {\r\n return (\r\n <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n <select\r\n value={current}\r\n onChange={(e) => setLayout(e.target.value)}\r\n className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n >\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <option key={key} value={key}>\r\n {layoutConfig.name}\r\n </option>\r\n ))}\r\n </select>\r\n </div>\r\n )\r\n }\r\n \r\n return (\r\n <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n \r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <button\r\n key={key}\r\n onClick={() => setLayout(key)}\r\n className={`\r\n p-4 rounded-lg border transition-all text-left\r\n ${current === key \r\n ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n }\r\n `}\r\n >\r\n <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n </button>\r\n ))}\r\n </div>\r\n \r\n <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","currentLayout","setCurrentLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","pages","layoutUtils","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"responsive-system.mjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n children,\r\n debug: _debug = false\r\n}) => {\r\n // El Provider ahora solo envuelve children sin context\r\n // El auto-scaling funciona mediante el plugin de Tailwind\r\n return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n xs: 475,\r\n sm: 640,\r\n md: 768,\r\n lg: 1024,\r\n xl: 1280,\r\n '2xl': 1536,\r\n '3xl': 1920,\r\n '4xl': 2560,\r\n '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n ResponsiveState, \r\n Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n getCurrentBreakpoint,\r\n getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n func: T,\r\n wait: number\r\n): (...args: Parameters<T>) => void {\r\n let timeout: ReturnType<typeof setTimeout> | null = null\r\n return (...args: Parameters<T>) => {\r\n if (timeout) clearTimeout(timeout)\r\n timeout = setTimeout(() => func(...args), wait)\r\n }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n const [dimensions, setDimensions] = useState({\r\n width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n })\r\n\r\n // Función para actualizar dimensiones\r\n const updateDimensions = useCallback(() => {\r\n setDimensions({\r\n width: window.innerWidth,\r\n height: window.innerHeight\r\n })\r\n }, [])\r\n\r\n // Debounced update para optimizar performance\r\n const debouncedUpdateDimensions = useMemo(\r\n () => debounce(updateDimensions, 100),\r\n [updateDimensions]\r\n )\r\n\r\n // Effect para escuchar cambios de tamaño\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n window.addEventListener('resize', debouncedUpdateDimensions)\r\n \r\n return () => {\r\n window.removeEventListener('resize', debouncedUpdateDimensions)\r\n }\r\n }, [debouncedUpdateDimensions])\r\n\r\n const { width, height } = dimensions\r\n\r\n // Calcular breakpoint actual\r\n const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n \r\n // Calcular orientación\r\n const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n // Helpers booleanos por breakpoint específico\r\n const isXs = breakpoint === 'xs'\r\n const isSm = breakpoint === 'sm'\r\n const isMd = breakpoint === 'md'\r\n const isLg = breakpoint === 'lg'\r\n const isXl = breakpoint === 'xl'\r\n const is2Xl = breakpoint === '2xl'\r\n const is3Xl = breakpoint === '3xl'\r\n const is4Xl = breakpoint === '4xl'\r\n const is5Xl = breakpoint === '5xl'\r\n\r\n // Helpers booleanos agrupados\r\n const isMobile = isXs || isSm\r\n const isTablet = isMd\r\n const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isSmall = isXs || isSm || isMd\r\n const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n const isUltraWide = is3Xl || is4Xl || is5Xl\r\n const is4K = is4Xl || is5Xl\r\n const is5K = is5Xl\r\n\r\n // Helpers de orientación\r\n const isPortrait = orientation === 'portrait'\r\n const isLandscape = orientation === 'landscape'\r\n\r\n // Funciones de comparación de breakpoints\r\n const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n }, [breakpoint])\r\n\r\n const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n const current = getBreakpointIndex(breakpoint)\r\n return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n }, [breakpoint])\r\n\r\n // Funciones de comparación de ancho\r\n const isWidthUp = useCallback((minWidth: number): boolean => {\r\n return width >= minWidth\r\n }, [width])\r\n\r\n const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n return width <= maxWidth\r\n }, [width])\r\n\r\n const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n return width >= minWidth && width <= maxWidth\r\n }, [width])\r\n\r\n // Funciones de comparación de altura\r\n const isHeightUp = useCallback((minHeight: number): boolean => {\r\n return height >= minHeight\r\n }, [height])\r\n\r\n const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n return height <= maxHeight\r\n }, [height])\r\n\r\n const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n return height >= minHeight && height <= maxHeight\r\n }, [height])\r\n\r\n // Debug mode\r\n const debug = false\r\n\r\n return {\r\n // Estado básico\r\n breakpoint,\r\n width,\r\n height,\r\n orientation,\r\n \r\n // Helpers booleanos específicos\r\n isXs,\r\n isSm,\r\n isMd,\r\n isLg,\r\n isXl,\r\n is2Xl,\r\n is3Xl,\r\n is4Xl,\r\n is5Xl,\r\n \r\n // Helpers booleanos agrupados\r\n isMobile,\r\n isTablet,\r\n isDesktop,\r\n isSmall,\r\n isLarge,\r\n isUltraWide,\r\n is4K,\r\n is5K,\r\n \r\n // Helpers de orientación\r\n isPortrait,\r\n isLandscape,\r\n \r\n // Funciones de comparación\r\n isBreakpointUp,\r\n isBreakpointDown,\r\n isBreakpointBetween,\r\n isWidthUp,\r\n isWidthDown,\r\n isWidthBetween,\r\n isHeightUp,\r\n isHeightDown,\r\n isHeightBetween,\r\n \r\n // Debug\r\n debug\r\n }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n // Estado del sistema responsivo\r\n responsive: ResponsiveState\r\n \r\n // Estado del layout\r\n layout: {\r\n current: string\r\n config: LayoutConfig\r\n setLayout: (layout: string) => void\r\n }\r\n \r\n // Utilidades de layout\r\n layoutUtils: {\r\n getContainerClass: () => string\r\n getMainClass: () => string\r\n hasSidebar: () => boolean\r\n hasHeader: () => boolean\r\n hasFooter: () => boolean\r\n hasNavigation: () => boolean\r\n }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n const context = useContext(ResponsiveLayoutContext)\r\n if (!context) {\r\n throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n }\r\n return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n sidebarOpen: boolean\r\n setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n return (\r\n <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n {children}\r\n </SidebarContext.Provider>\r\n )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n const context = useContext(SidebarContext)\r\n if (!context) {\r\n throw new Error('useSidebar must be used within a SidebarProvider')\r\n }\r\n return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n currentPage: 'demo' | 'test'\r\n setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n currentPage: 'test',\r\n setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n children: React.ReactNode\r\n defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n children, \r\n defaultPage = 'test' \r\n}) => {\r\n const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n return (\r\n <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n {children}\r\n </NavigationContext.Provider>\r\n )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n const context = useResponsiveLayoutContext()\r\n \r\n return {\r\n // Todo el sistema responsivo original\r\n ...context.responsive,\r\n \r\n // Sistema de layout\r\n layout: {\r\n current: context.layout.current,\r\n config: context.layout.config,\r\n setLayout: context.layout.setLayout,\r\n },\r\n \r\n // Utilidades de layout\r\n layoutUtils: context.layoutUtils,\r\n \r\n // Helpers específicos del layout\r\n isDefaultLayout: () => context.layout.current === 'default',\r\n isSidebarLayout: () => context.layout.current === 'sidebar',\r\n isDashboardLayout: () => context.layout.current === 'dashboard',\r\n isMinimalLayout: () => context.layout.current === 'minimal',\r\n \r\n // Grid helpers que usan el sistema auto-escalable\r\n grid: {\r\n auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n responsive: (breakpoints: Record<string, number>) => {\r\n const classes: string[] = []\r\n Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n if (breakpoint === 'base') {\r\n classes.push(`grid-cols-${cols}`)\r\n } else {\r\n classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n }\r\n })\r\n return classes.join(' ')\r\n },\r\n fixed: (cols: number) => `grid-cols-${cols}`,\r\n },\r\n \r\n // Spacing helpers que escalan automáticamente\r\n spacing: {\r\n container: context.layoutUtils.getContainerClass(),\r\n section: 'mb-6',\r\n card: 'p-6',\r\n gap: 'gap-4',\r\n },\r\n }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n const responsiveLayout = useResponsiveLayout()\r\n \r\n return {\r\n // Layout actual\r\n current: responsiveLayout.layout.current,\r\n config: responsiveLayout.layout.config,\r\n setLayout: responsiveLayout.layout.setLayout,\r\n \r\n // Utilidades\r\n ...responsiveLayout.layoutUtils,\r\n \r\n // Helpers específicos\r\n isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n \r\n // Grid helpers\r\n grid: responsiveLayout.grid,\r\n \r\n // Spacing helpers\r\n spacing: responsiveLayout.spacing,\r\n }\r\n}\r\n","export interface LayoutConfig {\r\n name: string\r\n description: string\r\n components: string[]\r\n spacing: string\r\n responsive: {\r\n mobile: string\r\n tablet: string\r\n desktop: string\r\n }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n default: {\r\n name: 'Default',\r\n description: 'Navbar arriba, body central, footer abajo',\r\n components: ['Navigation', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n sidebar: {\r\n name: 'Sidebar',\r\n description: 'Sidebar izquierda, contenido principal',\r\n components: ['Sidebar'],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n },\r\n dashboard: {\r\n name: 'Dashboard',\r\n description: 'Header + Sidebar + Main + Footer',\r\n components: ['Header', 'Sidebar', 'Footer'],\r\n spacing: 'p-4 md:p-6 lg:p-8',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-8'\r\n }\r\n },\r\n minimal: {\r\n name: 'Minimal',\r\n description: 'Solo contenido, sin navegación',\r\n components: [],\r\n spacing: 'p-4 md:p-6',\r\n responsive: {\r\n mobile: 'p-4',\r\n tablet: 'p-6',\r\n desktop: 'p-6'\r\n }\r\n }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n children: React.ReactNode\r\n defaultLayout?: string\r\n /**\r\n * Hook responsivo personalizado del proyecto consumidor.\r\n * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n * Debe retornar un objeto compatible con ResponsiveState.\r\n */\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n children: React.ReactNode\r\n defaultLayout: string\r\n useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n children, \r\n defaultLayout,\r\n useResponsiveHook\r\n}) => {\r\n // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n const internalResponsive = useResponsive()\r\n const customResponsive = useResponsiveHook?.()\r\n const responsive = customResponsive || internalResponsive\r\n \r\n const [currentLayout, setCurrentLayout] = useState(defaultLayout)\r\n \r\n const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n \r\n const layoutUtils = {\r\n getContainerClass: () => {\r\n if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n return layoutConfig.responsive.desktop\r\n },\r\n \r\n getMainClass: () => {\r\n const baseClass = 'min-h-screen bg-black'\r\n if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n return `${baseClass} flex`\r\n }\r\n return baseClass\r\n },\r\n \r\n hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n hasHeader: () => currentLayout === 'dashboard',\r\n hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n hasNavigation: () => currentLayout === 'default',\r\n }\r\n \r\n const contextValue = {\r\n responsive,\r\n layout: {\r\n current: currentLayout,\r\n config: layoutConfig,\r\n setLayout: setCurrentLayout,\r\n },\r\n layoutUtils,\r\n }\r\n \r\n return (\r\n <ResponsiveLayoutContext.Provider value={contextValue}>\r\n {children}\r\n </ResponsiveLayoutContext.Provider>\r\n )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n children, \r\n defaultLayout = DEFAULT_LAYOUT,\r\n useResponsiveHook\r\n}) => {\r\n return (\r\n <ResponsiveProvider>\r\n <ResponsiveLayoutProviderInner \r\n defaultLayout={defaultLayout}\r\n useResponsiveHook={useResponsiveHook}\r\n >\r\n {children}\r\n </ResponsiveLayoutProviderInner>\r\n </ResponsiveProvider>\r\n )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n DefaultLayout, \r\n SidebarLayout, \r\n DashboardLayout, \r\n MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n children: React.ReactNode\r\n /**\r\n * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n */\r\n layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n const { layout } = useResponsiveLayout()\r\n \r\n // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n const currentLayout = layoutProp || layout.current\r\n \r\n // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n const layouts = {\r\n default: DefaultLayout,\r\n sidebar: SidebarLayout,\r\n dashboard: DashboardLayout,\r\n minimal: MinimalLayout,\r\n }\r\n \r\n const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n \r\n return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n const { isMobile } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && menuItems.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.label}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </header>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n const { isMobile, isTablet, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n \r\n const menuItems = [\r\n { id: 'test', label: 'Suite de Test' },\r\n { id: 'demo', label: 'Demo' },\r\n ]\r\n \r\n return (\r\n <>\r\n {/* Hamburger button para móvil */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 border border-gray-700\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n\r\n {/* Sidebar desktop */}\r\n <aside className={`\r\n bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\r\n ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}\r\n ${isTablet ? 'w-56' : 'w-64'}\r\n `}>\r\n <div className=\"p-6 flex flex-col h-full\">\r\n {/* Logo y Breakpoint */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest mt-1\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => setCurrentPage(item.id as 'demo' | 'test')}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n \r\n </div>\r\n </aside>\r\n\r\n {/* Sidebar móvil desplegable */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n <div className=\"p-6 flex flex-col h-full pt-20\">\r\n {/* Logo */}\r\n <div className=\"flex items-center space-x-3 mb-8\">\r\n <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-sm\">RS</span>\r\n </div>\r\n <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n </div>\r\n \r\n {/* Navigation */}\r\n <nav className=\"space-y-2\">\r\n {menuItems.map((item) => (\r\n <button\r\n key={item.id}\r\n onClick={() => {\r\n setCurrentPage(item.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n currentPage === item.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n }`}\r\n >\r\n <span className=\"font-medium\">{item.label}</span>\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n </div>\r\n )}\r\n </>\r\n )\r\n}\r\n\r\nexport default Sidebar\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Footer = () => {\r\n const { layout, breakpoint, width, height } = useResponsiveLayout()\r\n \r\n return (\r\n <footer className=\"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20\">\r\n <div className={`${layout.config.spacing} py-6`}>\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n \r\n {/* Brand */}\r\n <div>\r\n <div className=\"flex items-center space-x-2 mb-3\">\r\n <div className=\"w-6 h-6 bg-cyan-500 rounded flex items-center justify-center\">\r\n <span className=\"text-white font-bold text-xs\">RS</span>\r\n </div>\r\n <span className=\"text-white font-semibold text-sm\">Responsive System</span>\r\n </div>\r\n <p className=\"text-gray-400 text-xs leading-relaxed\">\r\n Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS\r\n </p>\r\n </div>\r\n \r\n {/* Status */}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-3\">Estado del Sistema</h3>\r\n <div className=\"space-y-1.5\">\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Breakpoint:</span>\r\n <span className=\"text-cyan-400 font-medium\">{breakpoint.toUpperCase()}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Layout:</span>\r\n <span className=\"text-cyan-400 font-medium\">{layout.config.name}</span>\r\n </div>\r\n <div className=\"flex items-center justify-between text-xs\">\r\n <span className=\"text-gray-400\">Resolución:</span>\r\n <span className=\"text-cyan-400 font-medium\">{width} × {height}</span>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Developer */}\r\n <div>\r\n <h3 className=\"text-white font-semibold text-sm mb-3\">Desarrollador</h3>\r\n <div className=\"space-y-2\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0\">\r\n <svg className=\"w-3 h-3 text-gray-300\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <p className=\"text-white font-medium text-xs\">Felipe Caroca</p>\r\n <p className=\"text-gray-400 text-xs\">Frontend Developer</p>\r\n </div>\r\n </div>\r\n <a \r\n href=\"https://github.com/FelipeCaroca1\" \r\n target=\"_blank\" \r\n rel=\"noopener noreferrer\"\r\n className=\"flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group\"\r\n >\r\n <svg className=\"w-3 h-3 group-hover:text-cyan-400\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z\"/>\r\n </svg>\r\n <span>Ver en GitHub</span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Bottom */}\r\n <div className=\"border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center\">\r\n <p className=\"text-gray-500 text-xs mb-2\">\r\n © 2025 Responsive System. Todos los derechos reservados.\r\n </p>\r\n <div className=\"flex items-center space-x-2\">\r\n <span className=\"text-gray-500 text-xs\">\r\n Auto-escalado activo\r\n </span>\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n )\r\n}\r\n\r\nexport default Footer\r\n","import { useState } from 'react'\r\nimport { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation } from '../../context'\r\n\r\nconst Navigation = () => {\r\n const { isMobile, breakpoint } = useResponsiveLayout()\r\n const { currentPage, setCurrentPage } = useNavigation()\r\n const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n const pages = [\r\n { id: 'demo', name: 'Demo' },\r\n { id: 'test', name: 'Suite de Test' }\r\n ]\r\n\r\n return (\r\n <div className=\"sticky top-0 z-50\">\r\n <nav className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n {breakpoint.toUpperCase()}\r\n </div>\r\n </div>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n {/* Botones visibles solo en desktop */}\r\n {!isMobile && pages.map(page => (\r\n <button\r\n key={page.id}\r\n onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.name}\r\n </button>\r\n ))}\r\n \r\n {/* Menú hamburguesa para móvil - A LA DERECHA */}\r\n {isMobile && (\r\n <button\r\n onClick={() => setSidebarOpen(!sidebarOpen)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n {/* Menú móvil desplegable - TRADICIONAL */}\r\n {isMobile && sidebarOpen && (\r\n <div className=\"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50\">\r\n <div className=\"p-4\">\r\n {/* Navigation - VERTICAL como menú tradicional */}\r\n <nav className=\"space-y-2\">\r\n {pages.map((page) => (\r\n <button\r\n key={page.id}\r\n onClick={() => {\r\n setCurrentPage(page.id as 'demo' | 'test')\r\n setSidebarOpen(false)\r\n }}\r\n className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${\r\n currentPage === page.id \r\n ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n }`}\r\n >\r\n {page.name}\r\n </button>\r\n ))}\r\n </nav>\r\n </div>\r\n </div>\r\n )}\r\n </nav>\r\n </div>\r\n )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface DefaultLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/* Navigation fijo arriba */}\r\n <Navigation />\r\n \r\n {/* Main content con padding-top para la navigation */}\r\n <main className=\"flex-1\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n \r\n {/* Footer fijo abajo */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider, useSidebar } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n const { setSidebarOpen } = useSidebar()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black flex flex-col\">\r\n {/* Navbar para móvil (igual que SidebarLayout) */}\r\n <div className=\"sticky top-0 z-50\">\r\n <nav className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n <div className=\"w-full\">\r\n <div className=\"px-4 py-4\">\r\n <div className=\"flex items-center justify-between\">\r\n <div className=\"flex items-center space-x-2\">\r\n {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n <button\r\n onClick={() => setSidebarOpen(true)}\r\n className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n >\r\n <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n </svg>\r\n </button>\r\n \r\n <div className=\"flex items-center space-x-2\">\r\n <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n <h3 className=\"text-base font-black text-white tracking-tight\">\r\n Sistema Responsivo\r\n </h3>\r\n </div>\r\n <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n DASHBOARD\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n \r\n {/* Content area con sidebar */}\r\n <div className=\"flex flex-1\">\r\n {/* Sidebar */}\r\n <Sidebar />\r\n \r\n {/* Main content */}\r\n <main className=\"flex-1 overflow-auto\">\r\n <div className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </div>\r\n </main>\r\n </div>\r\n \r\n {/* Footer */}\r\n <Footer />\r\n </div>\r\n )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n return (\r\n <SidebarProvider>\r\n <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n </SidebarProvider>\r\n )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface MinimalLayoutProps {\r\n children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n const { layoutUtils } = useResponsiveLayout()\r\n \r\n return (\r\n <div className=\"min-h-screen bg-black\">\r\n <main className={layoutUtils.getContainerClass()}>\r\n {children}\r\n </main>\r\n </div>\r\n )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n const { current, setLayout, config } = useLayout()\r\n \r\n if (compact) {\r\n return (\r\n <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n <select\r\n value={current}\r\n onChange={(e) => setLayout(e.target.value)}\r\n className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n >\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <option key={key} value={key}>\r\n {layoutConfig.name}\r\n </option>\r\n ))}\r\n </select>\r\n </div>\r\n )\r\n }\r\n \r\n return (\r\n <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n \r\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n <button\r\n key={key}\r\n onClick={() => setLayout(key)}\r\n className={`\r\n p-4 rounded-lg border transition-all text-left\r\n ${current === key \r\n ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n }\r\n `}\r\n >\r\n <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n </button>\r\n ))}\r\n </div>\r\n \r\n <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","currentLayout","setCurrentLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","pages","layoutUtils","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "responsive-system",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"description": "Sistema de layout responsivo con auto-scaling para Tailwind CSS",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/responsive-system.cjs",
|
|
@@ -63,8 +63,6 @@
|
|
|
63
63
|
"postinstall": "node scripts/postinstall.js"
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"react": "^19.1.1",
|
|
67
|
-
"react-dom": "^19.1.1",
|
|
68
66
|
"tailwindcss": "^4.1.14",
|
|
69
67
|
"postcss": "^8.5.6",
|
|
70
68
|
"autoprefixer": "^10.4.21",
|
|
@@ -5,35 +5,35 @@ const Footer = () => {
|
|
|
5
5
|
|
|
6
6
|
return (
|
|
7
7
|
<footer className="bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20">
|
|
8
|
-
<div className={`${layout.config.spacing} py-
|
|
9
|
-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-
|
|
8
|
+
<div className={`${layout.config.spacing} py-6`}>
|
|
9
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
10
10
|
|
|
11
11
|
{/* Brand */}
|
|
12
12
|
<div>
|
|
13
|
-
<div className="flex items-center space-x-
|
|
14
|
-
<div className="w-
|
|
15
|
-
<span className="text-white font-bold text-
|
|
13
|
+
<div className="flex items-center space-x-2 mb-3">
|
|
14
|
+
<div className="w-6 h-6 bg-cyan-500 rounded flex items-center justify-center">
|
|
15
|
+
<span className="text-white font-bold text-xs">RS</span>
|
|
16
16
|
</div>
|
|
17
|
-
<span className="text-white font-
|
|
17
|
+
<span className="text-white font-semibold text-sm">Responsive System</span>
|
|
18
18
|
</div>
|
|
19
|
-
<p className="text-gray-400 text-
|
|
19
|
+
<p className="text-gray-400 text-xs leading-relaxed">
|
|
20
20
|
Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS
|
|
21
21
|
</p>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
{/* Status */}
|
|
25
25
|
<div>
|
|
26
|
-
<h3 className="text-white font-semibold mb-
|
|
27
|
-
<div className="space-y-
|
|
28
|
-
<div className="flex items-center justify-between text-
|
|
26
|
+
<h3 className="text-white font-semibold text-sm mb-3">Estado del Sistema</h3>
|
|
27
|
+
<div className="space-y-1.5">
|
|
28
|
+
<div className="flex items-center justify-between text-xs">
|
|
29
29
|
<span className="text-gray-400">Breakpoint:</span>
|
|
30
30
|
<span className="text-cyan-400 font-medium">{breakpoint.toUpperCase()}</span>
|
|
31
31
|
</div>
|
|
32
|
-
<div className="flex items-center justify-between text-
|
|
32
|
+
<div className="flex items-center justify-between text-xs">
|
|
33
33
|
<span className="text-gray-400">Layout:</span>
|
|
34
34
|
<span className="text-cyan-400 font-medium">{layout.config.name}</span>
|
|
35
35
|
</div>
|
|
36
|
-
<div className="flex items-center justify-between text-
|
|
36
|
+
<div className="flex items-center justify-between text-xs">
|
|
37
37
|
<span className="text-gray-400">Resolución:</span>
|
|
38
38
|
<span className="text-cyan-400 font-medium">{width} × {height}</span>
|
|
39
39
|
</div>
|
|
@@ -42,16 +42,16 @@ const Footer = () => {
|
|
|
42
42
|
|
|
43
43
|
{/* Developer */}
|
|
44
44
|
<div>
|
|
45
|
-
<h3 className="text-white font-semibold mb-
|
|
46
|
-
<div className="space-y-
|
|
47
|
-
<div className="flex items-center space-x-
|
|
48
|
-
<div className="w-
|
|
49
|
-
<svg className="w-
|
|
45
|
+
<h3 className="text-white font-semibold text-sm mb-3">Desarrollador</h3>
|
|
46
|
+
<div className="space-y-2">
|
|
47
|
+
<div className="flex items-center space-x-2">
|
|
48
|
+
<div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0">
|
|
49
|
+
<svg className="w-3 h-3 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
|
|
50
50
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
51
51
|
</svg>
|
|
52
52
|
</div>
|
|
53
53
|
<div>
|
|
54
|
-
<p className="text-white font-medium text-
|
|
54
|
+
<p className="text-white font-medium text-xs">Felipe Caroca</p>
|
|
55
55
|
<p className="text-gray-400 text-xs">Frontend Developer</p>
|
|
56
56
|
</div>
|
|
57
57
|
</div>
|
|
@@ -59,9 +59,9 @@ const Footer = () => {
|
|
|
59
59
|
href="https://github.com/FelipeCaroca1"
|
|
60
60
|
target="_blank"
|
|
61
61
|
rel="noopener noreferrer"
|
|
62
|
-
className="flex items-center space-x-
|
|
62
|
+
className="flex items-center space-x-1.5 text-gray-400 hover:text-cyan-400 transition-colors text-xs group"
|
|
63
63
|
>
|
|
64
|
-
<svg className="w-
|
|
64
|
+
<svg className="w-3 h-3 group-hover:text-cyan-400" fill="currentColor" viewBox="0 0 24 24">
|
|
65
65
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
|
66
66
|
</svg>
|
|
67
67
|
<span>Ver en GitHub</span>
|
|
@@ -71,15 +71,15 @@ const Footer = () => {
|
|
|
71
71
|
</div>
|
|
72
72
|
|
|
73
73
|
{/* Bottom */}
|
|
74
|
-
<div className="border-t border-gray-800 mt-
|
|
75
|
-
<p className="text-gray-500 text-
|
|
74
|
+
<div className="border-t border-gray-800 mt-6 pt-4 flex flex-col items-center text-center">
|
|
75
|
+
<p className="text-gray-500 text-xs mb-2">
|
|
76
76
|
© 2025 Responsive System. Todos los derechos reservados.
|
|
77
77
|
</p>
|
|
78
|
-
<div className="flex items-center space-x-
|
|
78
|
+
<div className="flex items-center space-x-2">
|
|
79
79
|
<span className="text-gray-500 text-xs">
|
|
80
80
|
Auto-escalado activo
|
|
81
81
|
</span>
|
|
82
|
-
<div className="w-
|
|
82
|
+
<div className="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse"></div>
|
|
83
83
|
</div>
|
|
84
84
|
</div>
|
|
85
85
|
</div>
|