botech-library 1.0.0 → 1.0.1

package/README.md

@@ -1,125 +1,125 @@
-# Botech Library
-
-Una biblioteca de componentes React para sistemas escolares.
-
-## Componentes
-
-### Header
-
-El componente Header muestra información del sistema y la página actual.
-
-#### Props
-
-- `title`: Título de la página actual
-- `description`: Descripción de la página actual
-- `systemName`: Nombre del sistema (por defecto: "PASS")
-- `systemSubtitle`: Subtítulo del sistema (por defecto: "Sistema Escolar")
-- `showPageInfo`: Controla si se muestra la información de la página en el lado derecho (por defecto: true)
-- `onMenuToggle`: Función que se ejecuta al hacer clic en el botón de menú
-
-#### Uso
-
-```jsx
-<Header
-  title="Dashboard"
-  description="Panel principal del sistema"
-  systemName="PASS"
-  systemSubtitle="Sistema Escolar"
-  onMenuToggle={() => setIsSidebarOpen(true)}
-  showPageInfo={true}
-/>
-```
-
-#### Notas importantes
-
-- La descripción se muestra en **dos lugares**:
-  1. **Lado izquierdo**: `systemSubtitle` aparece debajo del nombre del sistema
-  2. **Lado derecho**: `description` aparece cuando `showPageInfo` es `true` (solo visible en pantallas medianas y grandes por la clase `hidden sm:block`)
-
-### Sidebar
-
-El componente Sidebar proporciona navegación lateral con soporte para carpetas y elementos de menú.
-
-#### Props
-
-- `isOpen`: Controla si el sidebar está abierto
-- `onClose`: Función que se ejecuta al cerrar el sidebar
-- `menuItems`: Array de elementos del menú
-- `overlayClassName`: Clases CSS para el overlay (por defecto: "fixed inset-0 bg-black bg-opacity-25 z-40")
-
-#### Uso
-
-```jsx
-<Sidebar
-  isOpen={isSidebarOpen}
-  onClose={() => setIsSidebarOpen(false)}
-  menuItems={menuItems}
-  systemName="PASS"
-  activePath="/"
-  onNavigate={(path) => console.log('Navegando a:', path)}
-/>
-```
-
-## Problemas Solucionados
-
-### 1. Overlay del Sidebar
-
-**Problema**: El overlay estaba completamente negro en lugar de ser semi-transparente.
-
-**Solución**: Cambiado de `bg-opacity-50` a `bg-opacity-25` para que sea menos oscuro.
-
-```jsx
-// Antes
-overlayClassName = "fixed inset-0 bg-black bg-opacity-50 z-40"
-
-// Después
-overlayClassName = "fixed inset-0 bg-black bg-opacity-25 z-40"
-```
-
-### 2. Descripción del Header
-
-**Problema**: La descripción no aparecía en el Header.
-
-**Solución**: La descripción se muestra en dos lugares diferentes:
-
-1. **systemSubtitle**: En el lado izquierdo debajo del nombre del sistema
-2. **description**: En el lado derecho cuando `showPageInfo` es `true`
-
-**Importante**: La descripción del lado derecho solo es visible en pantallas medianas y grandes debido a la clase `hidden sm:block`.
-
-## Instalación
-
-```bash
-npm install botech-library
-```
-
-## Uso
-
-```jsx
-import { Header, Sidebar } from 'botech-library';
-
-// Tu componente aquí...
-```
-
-## Desarrollo
-
-```bash
-npm install
-npm run build
-```
-
-## Estructura del Proyecto
-
-```
-src/
-├── components/
-│   ├── Header/
-│   │   ├── Header.tsx
-│   │   ├── types.ts
-│   │   └── index.ts
-│   ├── Sidebar/
-│   │   ├── Sidebar.tsx
-│   │   ├── types.ts
-│   │   └── index.ts
-│   └── index.ts
+# Botech Library
+
+Una biblioteca de componentes React para sistemas escolares.
+
+## Componentes
+
+### Header
+
+El componente Header muestra información del sistema y la página actual.
+
+#### Props
+
+- `title`: Título de la página actual
+- `description`: Descripción de la página actual
+- `systemName`: Nombre del sistema (por defecto: "PASS")
+- `systemSubtitle`: Subtítulo del sistema (por defecto: "Sistema Escolar")
+- `showPageInfo`: Controla si se muestra la información de la página en el lado derecho (por defecto: true)
+- `onMenuToggle`: Función que se ejecuta al hacer clic en el botón de menú
+
+#### Uso
+
+```jsx
+<Header
+  title="Dashboard"
+  description="Panel principal del sistema"
+  systemName="PASS"
+  systemSubtitle="Sistema Escolar"
+  onMenuToggle={() => setIsSidebarOpen(true)}
+  showPageInfo={true}
+/>
+```
+
+#### Notas importantes
+
+- La descripción se muestra en **dos lugares**:
+  1. **Lado izquierdo**: `systemSubtitle` aparece debajo del nombre del sistema
+  2. **Lado derecho**: `description` aparece cuando `showPageInfo` es `true` (solo visible en pantallas medianas y grandes por la clase `hidden sm:block`)
+
+### Sidebar
+
+El componente Sidebar proporciona navegación lateral con soporte para carpetas y elementos de menú.
+
+#### Props
+
+- `isOpen`: Controla si el sidebar está abierto
+- `onClose`: Función que se ejecuta al cerrar el sidebar
+- `menuItems`: Array de elementos del menú
+- `overlayClassName`: Clases CSS para el overlay (por defecto: "fixed inset-0 bg-black bg-opacity-25 z-40")
+
+#### Uso
+
+```jsx
+<Sidebar
+  isOpen={isSidebarOpen}
+  onClose={() => setIsSidebarOpen(false)}
+  menuItems={menuItems}
+  systemName="PASS"
+  activePath="/"
+  onNavigate={(path) => console.log('Navegando a:', path)}
+/>
+```
+
+## Problemas Solucionados
+
+### 1. Overlay del Sidebar
+
+**Problema**: El overlay estaba completamente negro en lugar de ser semi-transparente.
+
+**Solución**: Cambiado de `bg-opacity-50` a `bg-opacity-25` para que sea menos oscuro.
+
+```jsx
+// Antes
+overlayClassName = "fixed inset-0 bg-black bg-opacity-50 z-40"
+
+// Después
+overlayClassName = "fixed inset-0 bg-black bg-opacity-25 z-40"
+```
+
+### 2. Descripción del Header
+
+**Problema**: La descripción no aparecía en el Header.
+
+**Solución**: La descripción se muestra en dos lugares diferentes:
+
+1. **systemSubtitle**: En el lado izquierdo debajo del nombre del sistema
+2. **description**: En el lado derecho cuando `showPageInfo` es `true`
+
+**Importante**: La descripción del lado derecho solo es visible en pantallas medianas y grandes debido a la clase `hidden sm:block`.
+
+## Instalación
+
+```bash
+npm install botech-library
+```
+
+## Uso
+
+```jsx
+import { Header, Sidebar } from 'botech-library';
+
+// Tu componente aquí...
+```
+
+## Desarrollo
+
+```bash
+npm install
+npm run build
+```
+
+## Estructura del Proyecto
+
+```
+src/
+├── components/
+│   ├── Header/
+│   │   ├── Header.tsx
+│   │   ├── types.ts
+│   │   └── index.ts
+│   ├── Sidebar/
+│   │   ├── Sidebar.tsx
+│   │   ├── types.ts
+│   │   └── index.ts
+│   └── index.ts
 ```