responsive-system 1.4.2 → 1.4.5

package/src/components/layout/Footer.tsx

@@ -1,59 +1,10 @@
-import { useResponsiveLayout } from '../../hooks'
-
 const Footer = () => {
-  const { layout, breakpoint, width, height } = useResponsiveLayout()
-  
   return (
-    <footer className="bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20">
-      <div className={`${layout.config.spacing} py-6`}>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          
-          {/* Brand */}
-          <div>
-            <div className="flex items-center space-x-2 mb-2">
-              <div className="w-5 h-5 bg-cyan-500 rounded flex items-center justify-center">
-                <span className="text-white font-bold text-xs">RS</span>
-              </div>
-              <span className="text-white font-semibold text-sm">Responsive System</span>
-            </div>
-            <p className="text-gray-400 text-xs leading-relaxed">
-              Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS
-            </p>
-          </div>
-          
-          {/* Status */}
-          <div>
-            <h3 className="text-white font-semibold text-sm mb-2">Estado del Sistema</h3>
-            <div className="space-y-1">
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-gray-400">Breakpoint:</span>
-                <span className="text-cyan-400 font-medium">{breakpoint.toUpperCase()}</span>
-              </div>
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-gray-400">Layout:</span>
-                <span className="text-cyan-400 font-medium">{layout.config.name}</span>
-              </div>
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-gray-400">Resolución:</span>
-                <span className="text-cyan-400 font-medium">{width} × {height}</span>
-              </div>
-            </div>
-          </div>
-          
-          {/* Developer */}
-          <div>
-            <h3 className="text-white font-semibold text-sm mb-2">Desarrollador</h3>
-            <div className="space-y-1">
-              <p className="text-white font-medium text-xs">Felipe Caroca</p>
-              <p className="text-gray-400 text-xs">Frontend Developer</p>
-            </div>
-          </div>
-        </div>
-        
-        {/* Bottom */}
-        <div className="border-t border-gray-800 mt-4 pt-4 flex flex-col items-center text-center">
-          <p className="text-gray-500 text-xs">
-            © 2025 Responsive System. Todos los derechos reservados.
+    <footer className="bg-gray-900 border-t border-gray-800">
+      <div className="px-4 py-6">
+        <div className="max-w-7xl mx-auto text-center">
+          <p className="text-gray-400 text-sm">
+            © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.
           </p>
         </div>
       </div>

package/src/components/layout/Navigation.tsx

@@ -1,95 +1,29 @@
-import { useState } from 'react'
 import { useResponsiveLayout } from '../../hooks'
-import { useNavigation } from '../../context'
 
 const Navigation = () => {
-  const { isMobile, breakpoint } = useResponsiveLayout()
-  const { currentPage, setCurrentPage } = useNavigation()
-  const [sidebarOpen, setSidebarOpen] = useState(false)
-
-  const pages = [
-    { id: 'demo', name: 'Demo' },
-    { id: 'test', name: 'Suite de Test' }
-  ]
-
+  const { isMobile } = useResponsiveLayout()
+  
   return (
-    <div className="sticky top-0 z-50">
-      <nav className="bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative">
-        <div className="w-full">
-          <div className="px-4 py-4">
-            <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-2">
-              <div className="flex items-center space-x-2">
-                <div className="w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse"></div>
-                <h3 className="text-base font-black text-white tracking-tight">
-                  Sistema Responsivo
-                </h3>
-              </div>
-              <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">
-                {breakpoint.toUpperCase()}
-              </div>
-            </div>
-            
-            <div className="flex items-center space-x-2">
-              {/* Botones visibles solo en desktop */}
-              {!isMobile && pages.map(page => (
-                <button
-                  key={page.id}
-                  onClick={() => setCurrentPage(page.id as 'demo' | 'test')}
-                  className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${
-                    currentPage === page.id 
-                      ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' 
-                      : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'
-                  }`}
-                >
-                  {page.name}
-                </button>
-              ))}
-              
-              {/* Menú hamburguesa para móvil - A LA DERECHA */}
-              {isMobile && (
-                <button
-                  onClick={() => setSidebarOpen(!sidebarOpen)}
-                  className="p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors"
-                >
-                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                  </svg>
-                </button>
-              )}
+    <nav className="sticky top-0 z-50 bg-gray-900 border-b border-gray-800">
+      <div className="px-4 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-sm">LO</span>
             </div>
+            <h1 className="text-white font-semibold text-lg">Tu Aplicación</h1>
           </div>
+          
+          {isMobile && (
+            <button className="p-2 text-gray-400 hover:text-white">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          )}
         </div>
       </div>
-      
-      {/* Menú móvil desplegable - TRADICIONAL */}
-      {isMobile && sidebarOpen && (
-        <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">
-          <div className="p-4">
-            {/* Navigation - VERTICAL como menú tradicional */}
-            <nav className="space-y-2">
-              {pages.map((page) => (
-                <button
-                  key={page.id}
-                  onClick={() => {
-                    setCurrentPage(page.id as 'demo' | 'test')
-                    setSidebarOpen(false)
-                  }}
-                  className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${
-                    currentPage === page.id 
-                      ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' 
-                      : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'
-                  }`}
-                >
-                  {page.name}
-                </button>
-              ))}
-            </nav>
-          </div>
-        </div>
-      )}
-      </nav>
-    </div>
+    </nav>
   )
 }
 

package/src/components/layout/Sidebar.tsx

@@ -1,23 +1,22 @@
 import { useResponsiveLayout } from '../../hooks'
-import { useNavigation, useSidebar } from '../../context'
+import { useSidebar } from '../../context'
 
 const Sidebar = () => {
-  const { isMobile, isTablet, breakpoint } = useResponsiveLayout()
-  const { currentPage, setCurrentPage } = useNavigation()
+  const { isMobile, isTablet } = useResponsiveLayout()
   const { sidebarOpen, setSidebarOpen } = useSidebar()
   
   const menuItems = [
-    { id: 'test', label: 'Suite de Test' },
-    { id: 'demo', label: 'Demo' },
+    { id: 'home', label: 'Inicio' },
+    { id: 'about', label: 'Acerca' },
+    { id: 'contact', label: 'Contacto' },
   ]
   
   return (
     <>
-      {/* Hamburger button para móvil */}
       {isMobile && (
         <button
           onClick={() => setSidebarOpen(true)}
-          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"
+          className="fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700"
         >
           <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
@@ -25,73 +24,45 @@ const Sidebar = () => {
         </button>
       )}
 
-      {/* Sidebar desktop */}
-      <aside className={`
-        bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20
-        ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}
-        ${isTablet ? 'w-56' : 'w-64'}
-      `}>
-      <div className="p-6 flex flex-col h-full">
-        {/* Logo y Breakpoint */}
-        <div className="flex items-center space-x-3 mb-8">
-          <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
-            <span className="text-white font-bold text-sm">RS</span>
-          </div>
-          <div>
-            <span className="text-white font-bold text-lg">Sistema Responsivo</span>
-            <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">
-              {breakpoint.toUpperCase()}
+      <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>
+        <div className="p-6 flex flex-col h-full">
+          <div className="flex items-center space-x-3 mb-8">
+            <div className="w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-sm">LO</span>
             </div>
+            <span className="text-white font-bold text-lg">Tu Aplicación</span>
           </div>
+          
+          <nav className="space-y-2">
+            {menuItems.map((item) => (
+              <button
+                key={item.id}
+                className="w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800"
+              >
+                <span className="font-medium">{item.label}</span>
+              </button>
+            ))}
+          </nav>
         </div>
-        
-        {/* Navigation */}
-        <nav className="space-y-2">
-          {menuItems.map((item) => (
-            <button
-              key={item.id}
-              onClick={() => setCurrentPage(item.id as 'demo' | 'test')}
-              className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${
-                currentPage === item.id 
-                  ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' 
-                  : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'
-              }`}
-            >
-              <span className="font-medium">{item.label}</span>
-            </button>
-          ))}
-        </nav>
-        
-      </div>
       </aside>
 
-      {/* Sidebar móvil desplegable */}
       {isMobile && sidebarOpen && (
         <div className="fixed inset-0 z-40 bg-black/50" onClick={() => setSidebarOpen(false)}>
-          <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">
+          <div className="fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800">
             <div className="p-6 flex flex-col h-full pt-20">
-              {/* Logo */}
               <div className="flex items-center space-x-3 mb-8">
-                <div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
-                  <span className="text-white font-bold text-sm">RS</span>
+                <div className="w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">LO</span>
                 </div>
-                <span className="text-white font-bold text-lg">Sistema Responsivo</span>
+                <span className="text-white font-bold text-lg">Tu Aplicación</span>
               </div>
               
-              {/* Navigation */}
               <nav className="space-y-2">
                 {menuItems.map((item) => (
                   <button
                     key={item.id}
-                    onClick={() => {
-                      setCurrentPage(item.id as 'demo' | 'test')
-                      setSidebarOpen(false)
-                    }}
-                    className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${
-                      currentPage === item.id 
-                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' 
-                        : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'
-                    }`}
+                    onClick={() => setSidebarOpen(false)}
+                    className="w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800"
                   >
                     <span className="font-medium">{item.label}</span>
                   </button>

package/src/layouts/DashboardLayout.tsx

@@ -1,66 +1,29 @@
 import React from 'react'
-import { useResponsiveLayout } from '../hooks'
 import { Sidebar, Footer } from '../components/layout'
-import { SidebarProvider, useSidebar } from '../context'
+import { SidebarProvider } from '../context'
 
 interface DashboardLayoutProps {
   children: React.ReactNode
 }
 
 const DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  const { setSidebarOpen } = useSidebar()
-  
   return (
-    <div className="min-h-screen bg-black flex flex-col">
-      {/* Navbar para móvil (igual que SidebarLayout) */}
-      <div className="sticky top-0 z-50">
-        <nav className="bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative">
-          <div className="w-full">
-            <div className="px-4 py-4">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  {/* Hamburger button para móvil - A LA IZQUIERDA */}
-                  <button
-                    onClick={() => setSidebarOpen(true)}
-                    className="p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors"
-                  >
-                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-                    </svg>
-                  </button>
-                  
-                  <div className="flex items-center space-x-2">
-                    <div className="w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse"></div>
-                    <h3 className="text-base font-black text-white tracking-tight">
-                      Sistema Responsivo
-                    </h3>
-                  </div>
-                  <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">
-                    DASHBOARD
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </nav>
-      </div>
-      
+    <div className="min-h-screen bg-gray-50 flex flex-col">
       {/* Content area con sidebar */}
       <div className="flex flex-1">
         {/* Sidebar */}
         <Sidebar />
         
         {/* Main content */}
-        <main className="flex-1 overflow-auto">
-          <div className={layoutUtils.getContainerClass()}>
+        <main className="flex-1 overflow-auto flex flex-col">
+          <div className="flex-1">
             {children}
           </div>
+          
+          {/* Footer */}
+          <Footer />
         </main>
       </div>
-      
-      {/* Footer */}
-      <Footer />
     </div>
   )
 }

package/src/layouts/DefaultLayout.tsx

@@ -1,24 +1,19 @@
 import React from 'react'
 import { Navigation, Footer } from '../components/layout'
-import { useResponsiveLayout } from '../hooks'
 
 interface DefaultLayoutProps {
   children: React.ReactNode
 }
 
 const DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  
   return (
-    <div className="min-h-screen bg-black flex flex-col">
+    <div className="min-h-screen bg-gray-50 flex flex-col">
       {/* Navigation fijo arriba */}
       <Navigation />
       
-      {/* Main content con padding-top para la navigation */}
+      {/* Main content */}
       <main className="flex-1">
-        <div className={layoutUtils.getContainerClass()}>
-          {children}
-        </div>
+        {children}
       </main>
       
       {/* Footer fijo abajo */}

package/src/layouts/MinimalLayout.tsx

@@ -1,16 +1,13 @@
 import React from 'react'
-import { useResponsiveLayout } from '../hooks'
 
 interface MinimalLayoutProps {
   children: React.ReactNode
 }
 
 const MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  
   return (
-    <div className="min-h-screen bg-black">
-      <main className={layoutUtils.getContainerClass()}>
+    <div className="min-h-screen bg-gray-50">
+      <main>
         {children}
       </main>
     </div>

package/src/layouts/SidebarLayout.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { useResponsiveLayout } from '../hooks'
 import { Sidebar } from '../components/layout'
 import { SidebarProvider } from '../context'
 
@@ -8,18 +7,14 @@ interface SidebarLayoutProps {
 }
 
 const SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const { layoutUtils } = useResponsiveLayout()
-  
   return (
-    <div className="min-h-screen bg-black flex">
+    <div className="min-h-screen bg-gray-50 flex">
       {/* Sidebar */}
       <Sidebar />
       
       {/* Main content */}
       <main className="flex-1 overflow-auto">
-        <div className={layoutUtils.getContainerClass()}>
-          {children}
-        </div>
+        {children}
       </main>
     </div>
   )