flysoft-react-ui 0.1.8 → 0.1.10

package/README.md

@@ -1,6 +1,6 @@
 # Flysoft React UI
 
-Una biblioteca de componentes React moderna y accesible construida con TypeScript, Tailwind CSS y FontAwesome.
+Una biblioteca de componentes React moderna y accesible construida con TypeScript, Tailwind CSS y FontAwesome 5. Incluye formularios, layouts, temas y templates para desarrollo rápido.
 
 ## 🚀 Características
 
@@ -11,6 +11,8 @@ Una biblioteca de componentes React moderna y accesible construida con TypeScrip
 - **Personalizable**: Fácil de personalizar con clases de Tailwind
 - **Tree-shakable**: Solo importa los componentes que uses
 - **🎨 Sistema de Temas**: Sistema completo de temas personalizables con Context API
+- **📋 Templates Listos**: Formularios y layouts pre-construidos
+- **🤖 Cursor AI Ready**: Optimizado para uso con Cursor AI
 
 ## 📦 Instalación
 
@@ -18,6 +20,94 @@ Una biblioteca de componentes React moderna y accesible construida con TypeScrip
 npm install flysoft-react-ui
 ```
 
+## ⚡ Quick Start
+
+### 1. Configuración Básica
+
+```tsx
+import { ThemeProvider } from "flysoft-react-ui";
+import "flysoft-react-ui/styles";
+
+function App() {
+  return (
+    <ThemeProvider initialTheme="light">
+      {/* Tu aplicación aquí */}
+    </ThemeProvider>
+  );
+}
+```
+
+### 2. Formulario de Login Rápido
+
+```tsx
+import { LoginForm } from "flysoft-react-ui";
+
+function LoginPage() {
+  const handleLogin = (data) => {
+    console.log("Login data:", data);
+  };
+
+  return <LoginForm onSubmit={handleLogin} />;
+}
+```
+
+### 3. Dashboard Básico
+
+```tsx
+import { DashboardLayout } from "flysoft-react-ui";
+
+function Dashboard() {
+  const stats = [
+    {
+      title: "Usuarios",
+      value: "1,234",
+      change: "+12%",
+      changeType: "positive",
+    },
+    {
+      title: "Ventas",
+      value: "$45,678",
+      change: "+8%",
+      changeType: "positive",
+    },
+  ];
+
+  return (
+    <DashboardLayout title="Mi Dashboard" stats={stats}>
+      <div>Contenido del dashboard</div>
+    </DashboardLayout>
+  );
+}
+```
+
+### 4. Integración con Cursor AI
+
+Para que Cursor AI priorice automáticamente estos componentes, crea un archivo `.cursorrules` en tu proyecto:
+
+```markdown
+# Priorizar flysoft-react-ui
+
+SIEMPRE usa los componentes de flysoft-react-ui antes de crear nuevos:
+
+## Componentes Disponibles:
+
+- Button, Input, Card, Badge, ThemeSwitcher
+- LoginForm, RegistrationForm, ContactForm
+- DashboardLayout, SidebarLayout, FormPattern
+
+## Para formularios:
+
+- SIEMPRE usar Input y Button de flysoft-react-ui
+- SIEMPRE usar Card como contenedor
+- SIEMPRE usar FontAwesome 5 para iconos (fa fa-\*)
+
+## Importación requerida:
+
+import "flysoft-react-ui/styles";
+```
+
+Ver [INTEGRATION_GUIDE.md](./INTEGRATION_GUIDE.md) para configuración completa.
+
 ## 🔧 Configuración
 
 ### Tailwind CSS
@@ -155,6 +245,46 @@ function App() {
 }
 ```
 
+## 📋 Templates Disponibles
+
+### Formularios
+
+- **LoginForm**: Formulario de login completo con validación
+- **RegistrationForm**: Formulario de registro con validación de contraseñas
+- **ContactForm**: Formulario de contacto con textarea y validación
+
+### Layouts
+
+- **DashboardLayout**: Layout de dashboard con estadísticas y métricas
+- **SidebarLayout**: Layout con sidebar de navegación y contenido principal
+
+### Patrones
+
+- **FormPattern**: Patrón reutilizable para cualquier formulario
+
+### Ejemplo de Uso de Templates
+
+```tsx
+import { LoginForm, DashboardLayout, SidebarLayout } from "flysoft-react-ui";
+
+// Formulario de login
+<LoginForm onSubmit={handleLogin} loading={isLoading} />
+
+// Dashboard con estadísticas
+<DashboardLayout title="Mi App" stats={stats}>
+  <div>Contenido del dashboard</div>
+</DashboardLayout>
+
+// Layout con sidebar
+<SidebarLayout
+  title="Mi App"
+  menuItems={menuItems}
+  user={user}
+>
+  <div>Contenido principal</div>
+</SidebarLayout>
+```
+
 ## 🧩 Componentes
 
 ### Button
@@ -305,6 +435,27 @@ MIT
 
 Las contribuciones son bienvenidas. Por favor, abre un issue o un pull request.
 
+## 📚 Recursos Adicionales
+
+- **[INTEGRATION_GUIDE.md](./INTEGRATION_GUIDE.md)**: Guía completa de integración con Cursor AI
+- **[THEME_SYSTEM.md](./THEME_SYSTEM.md)**: Documentación detallada del sistema de temas
+- **[examples/common-patterns.tsx](./examples/common-patterns.tsx)**: Ejemplos completos de uso
+- **[flysoft-ui.config.ts](./flysoft-ui.config.ts)**: Configuración centralizada de la librería
+- **[docs/component-metadata.json](./docs/component-metadata.json)**: Metadatos de todos los componentes
+
+## 🔧 Scripts de Mantenimiento
+
+```bash
+# Actualizar documentación automáticamente
+npm run update-docs
+
+# Validar que toda la documentación esté sincronizada
+npm run validate-docs
+
+# Ver ejemplos completos
+npm run dev
+```
+
 ## 📞 Soporte
 
 Si tienes alguna pregunta o necesitas ayuda, abre un issue en el repositorio.

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AASA,OAAO,aAAa,CAAC;AAkBrB,iBAAS,GAAG,4CAgNX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAWA,OAAO,aAAa,CAAC;AA6CrB,iBAAS,GAAG,4CA+MX;AAED,eAAe,GAAG,CAAC"}

package/dist/App.js

@@ -1,12 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Card, Badge, ThemeProvider, ThemeSwitcher, useTheme, } from "./index";
+import { AppLayout } from "./components";
+import { Button, Input, Card, Badge, ThemeProvider, ThemeSwitcher, useTheme, useGlobalThemeStyles, } from "./index";
 import "./index.css";
 // Componente para probar la funcionalidad de resetToDefault
 const ResetToDefaultButton = () => {
     const { resetToDefault, theme } = useTheme();
     return (_jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: ["Tema actual: ", _jsx("strong", { children: theme.name })] }), _jsx(Button, { onClick: resetToDefault, variant: "outline", icon: "fa-undo", children: "Resetear al Tema Inicial" })] }));
 };
+// Componente que demuestra el uso de useGlobalThemeStyles
+const GlobalThemeDemo = () => {
+    // Este hook aplica automáticamente los estilos del tema al body/html
+    useGlobalThemeStyles();
+    return (_jsxs("div", { className: "p-4 rounded-lg border", style: {
+            borderColor: "var(--flysoft-border-default)",
+            backgroundColor: "var(--flysoft-bg-secondary)",
+        }, children: [_jsx("h3", { className: "text-lg font-semibold mb-2", style: { color: "var(--flysoft-text-primary)" }, children: "Hook useGlobalThemeStyles" }), _jsx("p", { className: "text-sm", style: { color: "var(--flysoft-text-secondary)" }, children: "Este componente usa el hook useGlobalThemeStyles que aplica autom\u00E1ticamente los estilos del tema actual al body y html." })] }));
+};
 function App() {
-    return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx("div", { className: "min-h-screen p-8", style: { backgroundColor: "var(--flysoft-bg-secondary)" }, children: _jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsxs("div", { className: "text-center mb-12", children: [_jsx("h1", { className: "text-4xl font-bold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Flysoft React UI" }), _jsx("p", { className: "text-xl", style: { color: "var(--flysoft-text-secondary)" }, children: "Biblioteca de componentes React moderna con Tailwind CSS, FontAwesome y sistema de temas personalizable" })] }), _jsx("div", { className: "mb-8", children: _jsx(ThemeSwitcher, {}) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(ResetToDefaultButton, {}) }), _jsx(Card, { title: "Botones", subtitle: "Diferentes variantes y tama\u00F1os de botones", className: "mb-8", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: "primary", icon: "fa-heart", children: "Bot\u00F3n Primario" }), _jsx(Button, { variant: "outline", icon: "fa-download", children: "Bot\u00F3n Outline" }), _jsx(Button, { variant: "ghost", icon: "fa-edit", children: "Bot\u00F3n Ghost" })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { size: "sm", icon: "fa-plus", children: "Peque\u00F1o" }), _jsx(Button, { size: "md", icon: "fa-check", children: "Mediano" }), _jsx(Button, { size: "lg", icon: "fa-arrow-right", children: "Grande" })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { loading: true, children: "Cargando..." }), _jsx(Button, { disabled: true, children: "Deshabilitado" }), _jsx(Button, { icon: "fa-arrow-right", iconPosition: "right", children: "Con Icono Derecha" })] })] }) }), _jsx(Card, { title: "Campos de Entrada", subtitle: "Diferentes tipos de inputs con iconos", className: "mb-8", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Input, { label: "Nombre completo", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope" }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "B\u00FAsqueda", placeholder: "Buscar...", icon: "fa-search", iconPosition: "right" }), _jsx(Input, { label: "Con error", placeholder: "Campo con error", error: "Este campo es requerido", icon: "fa-exclamation-triangle" })] }) }), _jsx(Card, { title: "Badges", subtitle: "Diferentes variantes de badges", className: "mb-8", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "primary", children: "Primary" }), _jsx(Badge, { variant: "secondary", children: "Secondary" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { size: "sm", children: "Small" }), _jsx(Badge, { size: "md", children: "Medium" }), _jsx(Badge, { size: "lg", children: "Large" })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { rounded: true, children: "Rounded" }), _jsx(Badge, { variant: "success", rounded: true, children: "Success Rounded" }), _jsx(Badge, { variant: "warning", rounded: true, children: "Warning Rounded" })] })] }) }), _jsx(Card, { title: "Tarjetas", subtitle: "Diferentes variantes de tarjetas", className: "mb-8", children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: [_jsx(Card, { title: "Tarjeta Simple", subtitle: "Sin acciones ni footer", variant: "default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta simple con contenido b\u00E1sico." }) }), _jsx(Card, { title: "Con Acciones", subtitle: "Incluye botones en el header", variant: "elevated", headerActions: _jsx(Button, { size: "sm", variant: "outline", icon: "fa-edit", children: "Editar" }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con botones de acci\u00F3n en el header." }) }), _jsx(Card, { title: "Con Footer", subtitle: "Incluye secci\u00F3n de footer", variant: "outlined", footer: _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", style: { color: "var(--flysoft-text-muted)" }, children: "\u00DAltima actualizaci\u00F3n: hoy" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con footer personalizado y botones." }) })] }) })] }) }) }));
+    return (_jsx(ThemeProvider, { initialTheme: "light", forceInitialTheme: false, children: _jsx(AppLayout, { navBarDrawer: _jsx("div", { children: _jsx("h2", { children: "Flysoft React UI" }) }), leftDrawer: _jsx("div", { children: "Left Drawer" }), children: _jsx("div", { children: _jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsx("div", { className: "text-center mb-12", children: _jsx("p", { className: "text-xl", style: { color: "var(--flysoft-text-secondary)" }, children: "Biblioteca de componentes React moderna con Tailwind CSS, FontAwesome y sistema de temas personalizable" }) }), _jsx("div", { className: "mb-8", children: _jsx(ThemeSwitcher, {}) }), _jsx("div", { className: "mb-8 text-center", children: _jsx(ResetToDefaultButton, {}) }), _jsx("div", { className: "mb-8", children: _jsx(GlobalThemeDemo, {}) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Form Controls", className: "mb-6", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Botones" }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: "primary", icon: "fa-save", children: "Primary" }), _jsx(Button, { variant: "outline", icon: "fa-edit", children: "Outline" }), _jsx(Button, { variant: "ghost", icon: "fa-trash", children: "Ghost" }), _jsx(Button, { size: "sm", variant: "primary", children: "Small" }), _jsx(Button, { size: "lg", variant: "outline", children: "Large" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Campos de Entrada" }), _jsxs("div", { className: "space-y-4", children: [_jsx(Input, { label: "Nombre", placeholder: "Ingresa tu nombre", icon: "fa-user" }), _jsx(Input, { label: "Email", type: "email", placeholder: "tu@email.com", icon: "fa-envelope" }), _jsx(Input, { label: "Contrase\u00F1a", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", icon: "fa-lock" }), _jsx(Input, { label: "Mensaje", placeholder: "Escribe tu mensaje aqu\u00ED...", icon: "fa-comment" })] })] })] }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Utility Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Badges" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Badge, { variant: "primary", children: "Primary" }), _jsx(Badge, { variant: "secondary", children: "Secondary" }), _jsx(Badge, { variant: "success", children: "Success" }), _jsx(Badge, { variant: "warning", children: "Warning" }), _jsx(Badge, { variant: "danger", children: "Danger" }), _jsx(Badge, { variant: "info", children: "Info" })] })] }) }) }) }), _jsx("div", { className: "mb-8", children: _jsx(Card, { title: "Layout Components", children: _jsx("div", { className: "space-y-6", children: _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", style: { color: "var(--flysoft-text-primary)" }, children: "Cards con Diferentes Variantes" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(Card, { variant: "default", title: "Card Default", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con variante por defecto." }) }), _jsx(Card, { variant: "elevated", title: "Card Elevated", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con sombra elevada." }) }), _jsx(Card, { variant: "outlined", title: "Card Outlined", children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Esta es una tarjeta con borde destacado." }) }), _jsx(Card, { title: "Card con Footer", footer: _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { size: "sm", variant: "outline", children: "Cancelar" }), _jsx(Button, { size: "sm", variant: "primary", icon: "fa-save", children: "Guardar" })] }), children: _jsx("p", { style: { color: "var(--flysoft-text-secondary)" }, children: "Tarjeta con footer personalizado y botones." }) })] })] }) }) }) }), _jsxs("div", { className: "mt-8 space-y-8", children: [_jsxs("div", { className: "h-96 bg-blue-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 1" }), _jsx("p", { children: "Contenido adicional para hacer scroll..." })] }), _jsxs("div", { className: "h-96 bg-green-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 2" }), _jsx("p", { children: "M\u00E1s contenido para probar el comportamiento del navbar..." })] }), _jsxs("div", { className: "h-96 bg-yellow-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 3" }), _jsx("p", { children: "Contenido final para asegurar que hay suficiente altura..." })] }), _jsxs("div", { className: "h-96 bg-red-100 rounded p-4", children: [_jsx("h3", { className: "text-lg font-bold mb-4", children: "Secci\u00F3n 4" }), _jsx("p", { children: "\u00DAltima secci\u00F3n para completar la prueba de scroll..." })] })] })] }) }) }) }));
 }
 export default App;

package/dist/components/form-controls/Button.d.ts

@@ -5,7 +5,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     icon?: string;
     iconPosition?: "left" | "right";
     loading?: boolean;
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 export declare const Button: React.FC<ButtonProps>;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/form-controls/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgExC,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgExC,CAAC"}

package/dist/components/form-controls/Button.js

@@ -22,16 +22,16 @@ export const Button = ({ variant = "primary", size = "md", icon, iconPosition =
     `,
     };
     const sizeClasses = {
-        sm: "px-3 py-1.5 text-sm",
-        md: "px-4 py-2 text-base",
-        lg: "px-6 py-3 text-lg",
+        sm: `${children ? "px-3 py-1.5" : "p-1.5"} text-sm`,
+        md: `${children ? "px-4 py-2" : "p-2"} text-base`,
+        lg: `${children ? "px-6 py-3" : "p-3"} text-lg`,
     };
     const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
     const renderIcon = () => {
         if (!icon)
             return null;
         const iconClasses = size === "sm" ? "w-4 h-4" : size === "md" ? "w-5 h-5" : "w-6 h-6";
-        return (_jsx("i", { className: `fa ${icon} ${iconClasses} ${iconPosition === "right" ? "ml-2" : "mr-2"}` }));
+        return (_jsx("i", { className: `fa ${icon} ${iconClasses} ${children ? (iconPosition === "right" ? "ml-2" : "mr-2") : ""}` }));
     };
     return (_jsxs("button", { className: classes, disabled: disabled || loading, ...props, children: [loading && _jsx("i", { className: "fa fa-spinner fa-spin mr-2" }), icon && iconPosition === "left" && !loading && renderIcon(), children, icon && iconPosition === "right" && !loading && renderIcon()] }));
 };

package/dist/components/layout/AppLayout.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface AppLayoutProps {
+    navBarDrawer?: React.ReactNode;
+    leftDrawer?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const AppLayout: React.FC<AppLayoutProps>;
+//# sourceMappingURL=AppLayout.d.ts.map

package/dist/components/layout/AppLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAKhD,MAAM,WAAW,cAAc;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoK9C,CAAC"}

package/dist/components/layout/AppLayout.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
+import { useBreakpoint } from "../../hooks";
+import { useElementScroll } from "../../hooks/useElementScroll";
+import { Button } from "../form-controls";
+export const AppLayout = ({ navBarDrawer, leftDrawer, children, className = "", }) => {
+    const { isMobile, isTablet } = useBreakpoint();
+    const contentRef = useRef(null);
+    const { scrollY, scrollDirection } = useElementScroll(contentRef);
+    const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false);
+    const [isNavbarVisible, setIsNavbarVisible] = useState(true);
+    const shouldShowMobileDrawer = isMobile || isTablet;
+    const shouldShowDesktopDrawer = !shouldShowMobileDrawer && leftDrawer;
+    // Controlar visibilidad del navbar basado en scroll
+    React.useEffect(() => {
+        if (scrollY < 100) {
+            // Siempre mostrar navbar cerca del top
+            setIsNavbarVisible(true);
+        }
+        else if (scrollDirection === "down" && scrollY > 100) {
+            // Ocultar navbar al hacer scroll hacia abajo
+            setIsNavbarVisible(false);
+        }
+        else if (scrollDirection === "up" && scrollY > 100) {
+            // Mostrar navbar al hacer scroll hacia arriba
+            setIsNavbarVisible(true);
+        }
+    }, [scrollDirection, scrollY, isNavbarVisible]);
+    const handleMobileDrawerToggle = () => {
+        setIsMobileDrawerOpen(!isMobileDrawerOpen);
+    };
+    const handleOverlayClick = () => {
+        setIsMobileDrawerOpen(false);
+    };
+    // Clases base del layout
+    const layoutClasses = `
+    flex flex-col h-screen w-full
+    font-[var(--font-default)]
+    ${className}
+  `;
+    // Clases del navbar
+    const navbarClasses = `
+    bg-[var(--color-bg-default)] border-b border-[var(--color-border-default)]
+    z-[1000] fixed top-0 left-0 right-0
+    transform transition-transform duration-300 ease-in-out
+    ${isNavbarVisible ? "translate-y-0" : "-translate-y-full"}
+  `;
+    // Estilos inline para debug
+    const navbarStyle = {
+        transform: isNavbarVisible ? "translateY(0)" : "translateY(-100%)",
+        transition: "transform 300ms ease-in-out",
+    };
+    const navbarContentClasses = `
+    flex items-center pr-4 lg:px-4 h-16 gap-2
+    md:px-3
+  `;
+    const navbarDrawerClasses = `flex-1`;
+    // Clases del contenido principal
+    const mainClasses = `
+    flex flex-1 overflow-hidden
+    transition-all duration-300 ease-in-out
+    ${navBarDrawer && isNavbarVisible ? "pt-16" : ""}
+  `;
+    const leftDrawerClasses = `
+    w-64 bg-[var(--color-bg-default)]
+    overflow-y-auto flex-shrink-0 p-4
+    transition-all duration-300 ease-in-out
+    ${navBarDrawer && isNavbarVisible ? "pt-20" : "pt-4"}
+  `;
+    const contentClasses = `
+    flex-1 overflow-y-auto px-2 py-4 lg:px-6
+  `;
+    // Clases del overlay móvil
+    const overlayClasses = `
+    fixed inset-0 bg-black/50 backdrop-blur-sm z-[1998]
+  `;
+    // Clases del drawer móvil
+    const mobileDrawerBaseClasses = `
+    fixed top-0 left-0 h-screen w-64 max-w-[80vw]
+    bg-[var(--color-bg-default)] shadow-[var(--shadow-xl)]
+    transform -translate-x-full transition-transform duration-300 ease-in-out
+    z-[1999] flex flex-col
+  `;
+    const mobileDrawerOpenClasses = `translate-x-0`;
+    const mobileDrawerContentClasses = `
+    flex-1 overflow-y-auto p-4
+  `;
+    return (_jsxs("div", { className: layoutClasses, children: [navBarDrawer && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, children: [shouldShowMobileDrawer && leftDrawer && (_jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" })), _jsx("div", { className: navbarDrawerClasses, children: navBarDrawer })] }) })), _jsxs("div", { className: mainClasses, children: [shouldShowDesktopDrawer && (_jsx("aside", { className: leftDrawerClasses, children: leftDrawer })), _jsx("main", { ref: contentRef, className: contentClasses, children: children })] }), shouldShowMobileDrawer && leftDrawer && isMobileDrawerOpen && (_jsx("div", { className: overlayClasses, onClick: handleOverlayClick })), shouldShowMobileDrawer && leftDrawer && (_jsxs("aside", { className: `${mobileDrawerBaseClasses} ${isMobileDrawerOpen ? mobileDrawerOpenClasses : ""}`, children: [_jsx("div", { className: "text-right", children: _jsx(Button, { variant: "ghost", icon: "fa-times", onClick: handleMobileDrawerToggle, "aria-label": "Cerrar men\u00FA" }) }), _jsx("div", { className: mobileDrawerContentClasses, children: leftDrawer })] }))] }));
+};

package/dist/components/layout/index.d.ts

@@ -1,3 +1,5 @@
 export { Card } from "./Card";
 export type { CardProps } from "./Card";
+export { AppLayout } from "./AppLayout";
+export type { AppLayoutProps } from "./AppLayout";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/layout/index.js

@@ -1 +1,2 @@
 export { Card } from "./Card";
+export { AppLayout } from "./AppLayout";

package/dist/contexts/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2ItD,CAAC;AAGF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAGF,eAAO,MAAM,eAAe,eAG3B,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAmJtD,CAAC;AAGF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAGF,eAAO,MAAM,eAAe,eAG3B,CAAC"}

package/dist/contexts/ThemeContext.js

@@ -72,6 +72,13 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
         });
         // Set theme name as data attribute for CSS targeting
         root.setAttribute("data-theme", theme.name);
+        // Apply background and text colors to body for better integration
+        const body = document.body;
+        if (body) {
+            body.style.backgroundColor = theme.colors.bgDefault;
+            body.style.color = theme.colors.textPrimary;
+            body.style.fontFamily = theme.fonts.default;
+        }
     };
     // Function to set theme
     const setTheme = (theme) => {

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useThemeOverride, useTemporaryOverride } from "./useThemeOverride";
+export { useGlobalThemeStyles } from "./useGlobalThemeStyles";
+export { useBreakpoint } from "./useBreakpoint";
+export type { Breakpoint, WindowSize, BreakpointInfo } from "./useBreakpoint";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+export { useThemeOverride, useTemporaryOverride } from "./useThemeOverride";
+export { useGlobalThemeStyles } from "./useGlobalThemeStyles";
+export { useBreakpoint } from "./useBreakpoint";

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,14 @@
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export interface WindowSize {
+    width: number;
+    height: number;
+}
+export interface BreakpointInfo {
+    breakpoint: Breakpoint;
+    windowSize: WindowSize;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+}
+export declare const useBreakpoint: () => BreakpointInfo;
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/hooks/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAElE,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB;AAYD,eAAO,MAAM,aAAa,QAAO,cAqDhC,CAAC"}

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+// Breakpoints basados en Tailwind CSS
+const breakpoints = {
+    xs: 0,
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+};
+export const useBreakpoint = () => {
+    const [windowSize, setWindowSize] = useState({
+        width: typeof window !== "undefined" ? window.innerWidth : 1024,
+        height: typeof window !== "undefined" ? window.innerHeight : 768,
+    });
+    const [breakpoint, setBreakpoint] = useState("lg");
+    useEffect(() => {
+        const handleResize = () => {
+            const width = window.innerWidth;
+            const height = window.innerHeight;
+            setWindowSize({ width, height });
+            // Determinar el breakpoint actual
+            if (width >= breakpoints["2xl"]) {
+                setBreakpoint("2xl");
+            }
+            else if (width >= breakpoints.xl) {
+                setBreakpoint("xl");
+            }
+            else if (width >= breakpoints.lg) {
+                setBreakpoint("lg");
+            }
+            else if (width >= breakpoints.md) {
+                setBreakpoint("md");
+            }
+            else if (width >= breakpoints.sm) {
+                setBreakpoint("sm");
+            }
+            else {
+                setBreakpoint("xs");
+            }
+        };
+        // Ejecutar una vez al montar
+        handleResize();
+        // Agregar listener para cambios de tamaño
+        window.addEventListener("resize", handleResize);
+        // Cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    const isMobile = breakpoint === "xs" || breakpoint === "sm";
+    const isTablet = breakpoint === "md";
+    const isDesktop = breakpoint === "lg" || breakpoint === "xl" || breakpoint === "2xl";
+    return {
+        breakpoint,
+        windowSize,
+        isMobile,
+        isTablet,
+        isDesktop,
+    };
+};

package/dist/hooks/useElementScroll.d.ts

@@ -0,0 +1,5 @@
+export declare const useElementScroll: (elementRef: React.RefObject<HTMLElement | null>) => {
+    scrollY: number;
+    scrollDirection: "up" | "down" | null;
+};
+//# sourceMappingURL=useElementScroll.d.ts.map

package/dist/hooks/useElementScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementScroll.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAC3B,YAAY,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;CAoChD,CAAC"}

package/dist/hooks/useElementScroll.js

@@ -0,0 +1,28 @@
+import { useState, useEffect } from "react";
+export const useElementScroll = (elementRef) => {
+    const [scrollY, setScrollY] = useState(0);
+    const [scrollDirection, setScrollDirection] = useState(null);
+    useEffect(() => {
+        if (!elementRef.current)
+            return;
+        const element = elementRef.current;
+        let lastScrollY = element.scrollTop;
+        const handleScroll = () => {
+            const currentScrollY = element.scrollTop;
+            setScrollY(currentScrollY);
+            if (currentScrollY > lastScrollY && currentScrollY > 10) {
+                setScrollDirection("down");
+            }
+            else if (currentScrollY < lastScrollY) {
+                setScrollDirection("up");
+            }
+            lastScrollY = currentScrollY;
+        };
+        // Agregar el listener al elemento
+        element.addEventListener("scroll", handleScroll, { passive: true });
+        return () => {
+            element.removeEventListener("scroll", handleScroll);
+        };
+    }, [elementRef]);
+    return { scrollY, scrollDirection };
+};

package/dist/hooks/useGlobalThemeStyles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook que aplica estilos globales del tema al body y html
+ * Útil para aplicaciones host que quieren que el tema afecte toda la página
+ */
+export declare const useGlobalThemeStyles: () => void;
+//# sourceMappingURL=useGlobalThemeStyles.d.ts.map

package/dist/hooks/useGlobalThemeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalThemeStyles.d.ts","sourceRoot":"","sources":["../../src/hooks/useGlobalThemeStyles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,YAqChC,CAAC"}

package/dist/hooks/useGlobalThemeStyles.js

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import { useTheme } from "../contexts/ThemeContext";
+/**
+ * Hook que aplica estilos globales del tema al body y html
+ * Útil para aplicaciones host que quieren que el tema afecte toda la página
+ */
+export const useGlobalThemeStyles = () => {
+    const { theme } = useTheme();
+    useEffect(() => {
+        const body = document.body;
+        const html = document.documentElement;
+        if (body) {
+            // Aplicar estilos al body
+            body.style.backgroundColor = theme.colors.bgDefault;
+            body.style.color = theme.colors.textPrimary;
+            body.style.fontFamily = theme.fonts.default;
+            body.style.margin = "0";
+            body.style.padding = "0";
+        }
+        if (html) {
+            // Aplicar estilos al html
+            html.style.backgroundColor = theme.colors.bgDefault;
+            html.style.color = theme.colors.textPrimary;
+        }
+        // Cleanup function para restaurar estilos originales
+        return () => {
+            if (body) {
+                body.style.backgroundColor = "";
+                body.style.color = "";
+                body.style.fontFamily = "";
+                body.style.margin = "";
+                body.style.padding = "";
+            }
+            if (html) {
+                html.style.backgroundColor = "";
+                html.style.color = "";
+            }
+        };
+    }, [theme]);
+};