@codeplex-sac/navegacion 0.0.10 → 0.0.12

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.
Files changed (2) hide show
  1. package/README.md +180 -167
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,314 +1,327 @@
1
- # @codeplex-sac/navigation
1
+ # @codeplex-sac/navegacion
2
2
 
3
- Paquete de componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Ofrece soluciones completas para la gestión de rutas, jerarquías, menús y estructuras de paneles laterales, optimizadas para una experiencia de usuario premium y con una API nativa en **Español**.
3
+ Componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.
4
4
 
5
- ## 🚀 Instalación
5
+ ## Instalación
6
6
 
7
7
  ```bash
8
- bun add @codeplex-sac/navigation @mui/material @emotion/react @emotion/styled
8
+ bun add @codeplex-sac/navegacion @codeplex-sac/tema @mui/material @emotion/react @emotion/styled
9
9
  ```
10
10
 
11
+ > [!IMPORTANT]
12
+ > Envuelve la aplicación con `CodeplexProveedorTema` de `@codeplex-sac/tema` para que los estilos funcionen correctamente.
13
+
11
14
  ---
12
15
 
13
- ## 🏗️ Componentes de Estructura y Flujo
16
+ ## Componentes
17
+
18
+ ---
14
19
 
15
- ### 🗄️ Grupo 1: Contenedores y Pasos
20
+ ### CodeplexCajonLateral
16
21
 
17
- #### CodeplexCajonLateral (Drawer)
18
- Panel complementario que se desliza desde los bordes de la pantalla. Ideal para menús de navegación móvil o paneles de filtrado.
22
+ Panel que se desliza desde los bordes de la pantalla. Ideal para menús de navegación móvil o paneles de filtrado.
19
23
 
20
- **Ejemplo de Uso:**
24
+ **Ejemplo:**
21
25
  ```tsx
22
- import { CodeplexCajonLateral } from '@codeplex-sac/navigation';
26
+ import { CodeplexCajonLateral } from '@codeplex-sac/navegacion';
23
27
 
24
28
  export const MiCajon = ({ abierto, alCerrar }) => (
25
- <CodeplexCajonLateral
26
- abierto={abierto}
29
+ <CodeplexCajonLateral
30
+ abierto={abierto}
27
31
  alCerrar={alCerrar}
28
32
  ancho={320}
29
- cabecera={<h2>Menu Principal</h2>}
33
+ cabecera={<h2>Menú Principal</h2>}
30
34
  mostrarIconoCierre
31
35
  >
32
- {/* Enlaces o navegación aquí */}
36
+ {/* Contenido del cajón */}
33
37
  </CodeplexCajonLateral>
34
38
  );
35
39
  ```
36
40
 
37
- **Propiedades (Props):**
38
- | Propiedad | Tipo | Por Defecto | Descripción |
41
+ **Props:**
42
+ | Propiedad | Tipo | Por defecto | Descripción |
39
43
  | :--- | :--- | :--- | :--- |
40
- | `abierto` | `boolean` | `false` | Indica si el cajón es visible. |
41
- | `alCerrar` | `Function` | - | Callback al cerrar (clic fuera, ESC o 'X'). |
44
+ | `abierto` | `boolean` | `false` | Controla la visibilidad del cajón. |
45
+ | `alCerrar` | `() => void` | — | Callback al cerrar (clic fuera, Esc o botón X). |
42
46
  | `ancho` | `number \| string` | `280` | Ancho del panel (en px o %). |
43
- | `anclaje` | `'left' \| 'right' \| 'top' \| 'bottom'` | `'left'` | Lado por el que aparece el panel. |
44
- | `cabecera` | `ReactNode` | - | Contenido fijo superior. |
45
- | `pie` | `ReactNode` | - | Contenido fijo inferior. |
46
- | `deslizable` | `boolean` | `false` | Permite abrir/cerrar con gestos (touch). |
47
- | `mostrarIconoCierre` | `boolean` | `false` | Muestra la 'X' en la cabecera. |
47
+ | `anclaje` | `'izquierda' \| 'derecha' \| 'arriba' \| 'abajo'` | `'izquierda'` | Lado por el que aparece. |
48
+ | `cabecera` | `ReactNode` | — | Contenido fijo superior. |
49
+ | `pie` | `ReactNode` | — | Contenido fijo inferior. |
50
+ | `deslizable` | `boolean` | `false` | Permite abrir/cerrar con gestos táctiles. |
51
+ | `mostrarIconoCierre` | `boolean` | `false` | Muestra botón X en la cabecera. |
48
52
 
49
53
  ---
50
54
 
51
- #### CodeplexPasos (Stepper)
52
- Guía a los usuarios a través de una serie de pasos consecutivos en un proceso.
55
+ ### CodeplexPasos
53
56
 
54
- **Ejemplo de Uso:**
57
+ Guía a los usuarios a través de una serie de pasos consecutivos.
58
+
59
+ **Ejemplo:**
55
60
  ```tsx
56
- import { CodeplexPasos } from '@codeplex-sac/navigation';
61
+ import { CodeplexPasos } from '@codeplex-sac/navegacion';
57
62
 
58
- const MIS_PASOS = [
63
+ const pasos = [
59
64
  { etiqueta: 'Identificación', descripcion: 'Datos personales' },
60
65
  { etiqueta: 'Pago', descripcion: 'Método de facturación' },
61
- { etiqueta: 'Resumen', opcional: true }
66
+ { etiqueta: 'Resumen', opcional: true },
62
67
  ];
63
68
 
64
69
  export const Ejemplo = () => (
65
- <CodeplexPasos
66
- pasos={MIS_PASOS}
67
- pasoActivo={1}
70
+ <CodeplexPasos
71
+ pasos={pasos}
72
+ pasoActivo={1}
68
73
  orientacion="horizontal"
69
74
  />
70
75
  );
71
76
  ```
72
77
 
73
- **Propiedades (Props):**
74
- | Propiedad | Tipo | Por Defecto | Descripción |
78
+ **Props:**
79
+ | Propiedad | Tipo | Por defecto | Descripción |
75
80
  | :--- | :--- | :--- | :--- |
76
- | `pasos` | `Array<CodeplexPaso>`| - | Lista de objetos con `etiqueta` y `descripcion`. |
77
- | `pasoActivo` | `number` | - | Índice del paso actual (0-base). |
78
- | `orientacion`| `'horizontal' \| 'vertical'` | `'horizontal'` | Dirección del flujo. |
79
- | `etiquetasAlternativas`| `boolean` | `false` | Coloca etiquetas bajo los iconos. |
81
+ | `pasos` | `CodeplexPaso[]` | — | Lista con `etiqueta`, `descripcion` y `opcional`. |
82
+ | `pasoActivo` | `number` | — | Índice del paso actual (base 0). |
83
+ | `orientacion` | `'horizontal' \| 'vertical'` | `'horizontal'` | Dirección del flujo. |
84
+ | `etiquetasAlternativas` | `boolean` | `false` | Coloca etiquetas bajo los iconos. |
80
85
  | `noLineal` | `boolean` | `false` | Permite navegación libre entre pasos. |
81
86
 
82
87
  ---
83
88
 
84
- #### CodeplexPestanas (Tabs)
85
- Organiza contenido en diferentes vistas accesibles mediante pestañas superiores o integradas.
89
+ ### CodeplexPestanas
90
+
91
+ Organiza contenido en vistas accesibles mediante pestañas.
86
92
 
87
- **Ejemplo de Uso:**
93
+ **Ejemplo:**
88
94
  ```tsx
89
- import { CodeplexPestanas } from '@codeplex-sac/navigation';
95
+ import { CodeplexPestanas } from '@codeplex-sac/navegacion';
90
96
 
91
- const ITEMS = [
92
- { etiqueta: 'General', valor: 'v1' },
93
- { etiqueta: 'Seguridad', valor: 'v2', icono: <LockIcon /> }
97
+ const elementos = [
98
+ { etiqueta: 'General', valor: 'general' },
99
+ { etiqueta: 'Seguridad', valor: 'seguridad' },
94
100
  ];
95
101
 
96
- export const MiSeccion = () => (
97
- <CodeplexPestanas
98
- elementos={ITEMS}
99
- valor="v1"
102
+ export const Ejemplo = () => (
103
+ <CodeplexPestanas
104
+ elementos={elementos}
105
+ valor="general"
100
106
  alCambiar={(_, val) => console.log(val)}
101
107
  centrado
102
108
  />
103
109
  );
104
110
  ```
105
111
 
106
- **Propiedades (Props):**
107
- | Propiedad | Tipo | Por Defecto | Descripción |
112
+ **Props:**
113
+ | Propiedad | Tipo | Por defecto | Descripción |
108
114
  | :--- | :--- | :--- | :--- |
109
- | `elementos` | `Array<Item>` | - | Lista con `etiqueta`, `valor` e `icono`. |
110
- | `valor` | `any` | - | Valor de la pestaña seleccionada. |
111
- | `alCambiar` | `Function` | - | Evento al seleccionar una pestaña. |
112
- | `centrado` | `boolean` | `false` | Centra las pestañas horizontalmente. |
113
- | `posicionIcono`| `'top' \| 'bottom' \| 'start' \| 'end'` | `'top'` | Posición del icono respecto al texto. |
115
+ | `elementos` | `{ etiqueta, valor, icono? }[]` | — | Lista de pestañas. |
116
+ | `valor` | `any` | — | Valor de la pestaña activa. |
117
+ | `alCambiar` | `(e, val) => void` | — | Callback al cambiar pestaña. |
118
+ | `centrado` | `boolean` | `false` | Centra las pestañas. |
119
+ | `posicionIcono` | `'arriba' \| 'abajo' \| 'inicio' \| 'fin'` | `'arriba'` | Posición del icono respecto al texto. |
114
120
 
115
- ### 🗺️ Grupo 2: Rutas y Jerarquía
121
+ ---
122
+
123
+ ### CodeplexMigasPan
116
124
 
117
- #### CodeplexMigasPan (Breadcrumbs)
118
- Ayuda a los usuarios a visualizar su ubicación actual y volver a niveles superiores en la jerarquía de la aplicación.
125
+ Muestra la ubicación actual y permite volver a niveles superiores.
119
126
 
120
- **Ejemplo de Uso:**
127
+ **Ejemplo:**
121
128
  ```tsx
122
- import { CodeplexMigasPan } from '@codeplex-sac/navigation';
129
+ import { CodeplexMigasPan } from '@codeplex-sac/navegacion';
123
130
 
124
- const RUTA = [
131
+ const ruta = [
125
132
  { etiqueta: 'Artículos', href: '/blog' },
126
133
  { etiqueta: 'Tecnología', href: '/blog/tech' },
127
- { etiqueta: 'Componentes UI' } // Último elemento sin link
134
+ { etiqueta: 'Componentes UI' },
128
135
  ];
129
136
 
130
- export const Navegacion = () => (
131
- <CodeplexMigasPan
132
- elementos={RUTA}
133
- rutaInicio="/"
134
- colorActivo="primary.main"
137
+ export const Ejemplo = () => (
138
+ <CodeplexMigasPan
139
+ elementos={ruta}
140
+ rutaInicio="/"
141
+ colorActivo="primario.main"
135
142
  />
136
143
  );
137
144
  ```
138
145
 
139
- **Propiedades (Props):**
140
- | Propiedad | Tipo | Por Defecto | Descripción |
146
+ **Props:**
147
+ | Propiedad | Tipo | Por defecto | Descripción |
141
148
  | :--- | :--- | :--- | :--- |
142
- | `elementos` | `Array<Miga>` | - | Lista con `etiqueta`, `href` e `icono`. |
143
- | `rutaInicio`| `string` | - | Activa botón "Inicio" redirigiendo a esta ruta. |
144
- | `colorActivo`| `string` | `'text.primary'`| Color del texto del último elemento. |
145
- | `separador` | `ReactNode` | `NavigateNext` | Icono o carácter divisor entre elementos. |
149
+ | `elementos` | `{ etiqueta, href?, icono? }[]` | — | Elementos de la ruta. |
150
+ | `rutaInicio` | `string` | — | Activa botón "Inicio" con esta ruta. |
151
+ | `colorActivo` | `string` | `'texto.primario'` | Color del último elemento (hoja). |
152
+ | `separador` | `ReactNode` | `NavigateNext` | Divisor entre elementos. |
146
153
 
147
154
  ---
148
155
 
149
- #### CodeplexEnlace (Link)
150
- Simplifica la creación de vínculos de navegación con estilos consistentes y soporte para polimorfismo.
156
+ ### CodeplexEnlace
151
157
 
152
- **Ejemplo de Uso:**
158
+ Vínculo de navegación con estilos consistentes y soporte para React Router.
159
+
160
+ **Ejemplo:**
153
161
  ```tsx
154
- import { CodeplexEnlace } from '@codeplex-sac/navigation';
162
+ import { CodeplexEnlace } from '@codeplex-sac/navegacion';
155
163
 
156
- export const MiEnlace = () => (
157
- <CodeplexEnlace
158
- hijos="Ver documentación"
159
- href="https://google.com"
164
+ export const Ejemplo = () => (
165
+ <CodeplexEnlace
166
+ href="/documentacion"
160
167
  subrayado="hover"
161
168
  target="_blank"
162
- />
169
+ >
170
+ Ver documentación
171
+ </CodeplexEnlace>
163
172
  );
164
173
  ```
165
174
 
166
- **Propiedades (Props):**
167
- | Propiedad | Tipo | Por Defecto | Descripción |
175
+ **Props:**
176
+ | Propiedad | Tipo | Por defecto | Descripción |
168
177
  | :--- | :--- | :--- | :--- |
169
- | `hijos` | `ReactNode` | - | Contenido del enlace (texto/iconos). |
170
- | `href` | `string` | - | Dirección de destino. |
171
- | `subrayado` | `'none' \| 'hover' \| 'always'` | `'hover'` | Controla la visualización del subrayado. |
172
- | `componente` | `ElementType`| `'a'` | Etiqueta base (útil para `Link` de React Router). |
178
+ | `href` | `string` | — | URL de destino. |
179
+ | `subrayado` | `'ninguno' \| 'hover' \| 'siempre'` | `'hover'` | Visibilidad del subrayado. |
180
+ | `componente` | `ElementType` | `'a'` | Etiqueta base (útil para `Link` de React Router). |
181
+ | `children` | `ReactNode` | — | Contenido del enlace. |
173
182
 
174
183
  ---
175
184
 
176
- #### CodeplexPaginacion (Pagination)
177
- Componente de selección de páginas para listas extensas de datos.
185
+ ### CodeplexPaginacion
186
+
187
+ Selector de páginas para listas extensas de datos.
178
188
 
179
- **Ejemplo de Uso:**
189
+ **Ejemplo:**
180
190
  ```tsx
181
- import { CodeplexPaginacion } from '@codeplex-sac/navigation';
191
+ import { CodeplexPaginacion } from '@codeplex-sac/navegacion';
182
192
 
183
- export const Listado = () => (
184
- <CodeplexPaginacion
185
- total={25}
186
- pagina={1}
187
- alCambiar={(e, p) => console.log('Nueva página:', p)}
193
+ export const Ejemplo = () => (
194
+ <CodeplexPaginacion
195
+ total={25}
196
+ pagina={1}
197
+ alCambiar={(_, p) => console.log('Página:', p)}
188
198
  centrado
189
- color="primary"
199
+ color="primario"
190
200
  />
191
201
  );
192
202
  ```
193
203
 
194
- **Propiedades (Props):**
195
- | Propiedad | Tipo | Por Defecto | Descripción |
204
+ **Props:**
205
+ | Propiedad | Tipo | Por defecto | Descripción |
196
206
  | :--- | :--- | :--- | :--- |
197
- | `total` | `number` | - | Número total de páginas. |
198
- | `pagina` | `number` | - | Página actual seleccionada. |
199
- | `alCambiar` | `Function` | - | Evento disparado al seleccionar otra página. |
200
- | `centrado` | `boolean` | `false` | Centra el componente en su contenedor. |
201
- | `variante` | `'outlined' \| 'text'` | `'text'`| Estilo visual de los botones. |
207
+ | `total` | `number` | — | Número total de páginas. |
208
+ | `pagina` | `number` | — | Página activa. |
209
+ | `alCambiar` | `(e, pagina: number) => void` | — | Callback al cambiar de página. |
210
+ | `centrado` | `boolean` | `false` | Centra el componente. |
211
+ | `color` | `'primario' \| 'secundario' \| 'estandar'` | `'estandar'` | Color de los botones activos. |
212
+ | `variante` | `'contorno' \| 'texto'` | `'texto'` | Estilo visual de los botones. |
202
213
 
203
- ### 🖱️ Grupo 3: Menús y Acciones Flotantes
214
+ ---
215
+
216
+ ### CodeplexMenu
204
217
 
205
- #### CodeplexMenu
206
- Muestra una lista de opciones en una superficie temporal anclada a un componente de referencia.
218
+ Lista de opciones en superficie temporal anclada a un elemento de referencia.
207
219
 
208
- **Ejemplo de Uso:**
220
+ **Ejemplo:**
209
221
  ```tsx
210
- import { CodeplexMenu, CodeplexBoton } from '@codeplex-sac/ui';
222
+ import { CodeplexMenu } from '@codeplex-sac/navegacion';
223
+ import { CodeplexBoton } from '@codeplex-sac/ui';
224
+ import { useState } from 'react';
211
225
 
212
226
  export const Ejemplo = () => {
213
227
  const [ancla, setAncla] = useState(null);
214
- const ACCIONES = [
215
- { etiqueta: 'Editar', icono: <EditIcon />, alHacerClick: () => alert('Editando...') },
216
- { etiqueta: 'Eliminar', icono: <DeleteIcon />, sx: { color: 'error.main' } }
228
+ const acciones = [
229
+ { etiqueta: 'Editar', alHacerClick: () => {} },
230
+ { etiqueta: 'Eliminar', alHacerClick: () => {} },
217
231
  ];
218
232
 
219
233
  return (
220
234
  <>
221
235
  <CodeplexBoton texto="Opciones" alHacerClick={(e) => setAncla(e.currentTarget)} />
222
- <CodeplexMenu
223
- abierto={Boolean(ancla)}
224
- elementoAnclaje={ancla}
236
+ <CodeplexMenu
237
+ abierto={Boolean(ancla)}
238
+ elementoAnclaje={ancla}
225
239
  alCerrar={() => setAncla(null)}
226
- elementos={ACCIONES}
240
+ elementos={acciones}
227
241
  />
228
242
  </>
229
243
  );
230
244
  };
231
245
  ```
232
246
 
233
- **Propiedades (Props):**
234
- | Propiedad | Tipo | Por Defecto | Descripción |
247
+ **Props:**
248
+ | Propiedad | Tipo | Por defecto | Descripción |
235
249
  | :--- | :--- | :--- | :--- |
236
- | `abierto` | `boolean` | - | Controla la visibilidad del menú. |
237
- | `elementoAnclaje`| `HTMLElement` | - | Elemento que sirve de referencia para la posición. |
238
- | `elementos` | `Array<Item>` | - | Lista de opciones con `etiqueta`, `icono` y callback. |
239
- | `alCerrar` | `Function` | - | Evento disparado al cerrar el menú. |
250
+ | `abierto` | `boolean` | — | Controla la visibilidad. |
251
+ | `elementoAnclaje` | `HTMLElement \| null` | — | Elemento de referencia para posicionarse. |
252
+ | `elementos` | `{ etiqueta, icono?, alHacerClick? }[]` | — | Opciones del menú. |
253
+ | `alCerrar` | `() => void` | — | Callback al cerrar el menú. |
240
254
 
241
255
  ---
242
256
 
243
- #### CodeplexMarcacionRapida (Speed Dial)
244
- Botón flotante (FAB) que despliega una ráfaga de acciones relacionadas al interactuar con él.
257
+ ### CodeplexMarcacionRapida
258
+
259
+ Botón flotante (FAB) que despliega acciones relacionadas.
245
260
 
246
- **Ejemplo de Uso:**
261
+ **Ejemplo:**
247
262
  ```tsx
248
- import { CodeplexMarcacionRapida } from '@codeplex-sac/navigation';
263
+ import { CodeplexMarcacionRapida } from '@codeplex-sac/navegacion';
249
264
 
250
- const ACCIONES = [
251
- { icono: <SaveIcon />, tituloTooltip: 'Guardar', alHacerClick: () => save() },
252
- { icono: <PrintIcon />, tituloTooltip: 'Imprimir' }
265
+ const acciones = [
266
+ { icono: <GuardarIcono />, tituloTooltip: 'Guardar', alHacerClick: () => {} },
267
+ { icono: <ImprimirIcono />, tituloTooltip: 'Imprimir' },
253
268
  ];
254
269
 
255
- export const MiApp = () => (
256
- <CodeplexMarcacionRapida
270
+ export const Ejemplo = () => (
271
+ <CodeplexMarcacionRapida
257
272
  etiquetaAria="Acciones de archivo"
258
- icono={<EditIcon />}
259
- acciones={ACCIONES}
260
- direction="up"
273
+ icono={<EditarIcono />}
274
+ acciones={acciones}
275
+ direccion="arriba"
261
276
  />
262
277
  );
263
278
  ```
264
279
 
265
- **Propiedades (Props):**
266
- | Propiedad | Tipo | Por Defecto | Descripción |
280
+ **Props:**
281
+ | Propiedad | Tipo | Por defecto | Descripción |
267
282
  | :--- | :--- | :--- | :--- |
268
- | `acciones` | `Array<Accion>`| - | Lista de botones internos con `icono` y `tituloTooltip`. |
269
- | `etiquetaAria` | `string` | - | Texto de accesibilidad (obligatorio). |
270
- | `icono` | `ReactNode` | - | Icono del botón principal. |
271
- | `direction` | `string` | `'up'` | Dirección de despliegue (up, down, left, right). |
283
+ | `acciones` | `{ icono, tituloTooltip, alHacerClick? }[]` | — | Botones internos. |
284
+ | `etiquetaAria` | `string` | — | Texto de accesibilidad (obligatorio). |
285
+ | `icono` | `ReactNode` | — | Icono del botón principal. |
286
+ | `direccion` | `'arriba' \| 'abajo' \| 'izquierda' \| 'derecha'` | `'arriba'` | Dirección de despliegue. |
272
287
 
273
288
  ---
274
289
 
275
- #### CodeplexNavegacionInferior (Bottom Navigation)
276
- Navegación principal fija en la base de la pantalla, optimizada para aplicaciones móviles.
290
+ ### CodeplexNavegacionInferior
291
+
292
+ Barra de navegación fija al pie de pantalla, optimizada para móvil.
277
293
 
278
- **Ejemplo de Uso:**
294
+ **Ejemplo:**
279
295
  ```tsx
280
- import { CodeplexNavegacionInferior } from '@codeplex-sac/navigation';
296
+ import { CodeplexNavegacionInferior } from '@codeplex-sac/navegacion';
281
297
 
282
- const NAV_ITEMS = [
283
- { etiqueta: 'Inicio', valor: 'inicio', icono: <HomeIcon /> },
284
- { etiqueta: 'Favoritos', valor: 'favs', icono: <FavoriteIcon /> },
285
- { etiqueta: 'Perfil', valor: 'perfil', icono: <PersonIcon /> }
298
+ const elementos = [
299
+ { etiqueta: 'Inicio', valor: 'inicio', icono: <InicioIcono /> },
300
+ { etiqueta: 'Favoritos', valor: 'favs', icono: <FavIcono /> },
301
+ { etiqueta: 'Perfil', valor: 'perfil', icono: <PerfilIcono /> },
286
302
  ];
287
303
 
288
- export const AppMovil = () => (
289
- <CodeplexNavegacionInferior
290
- elementos={NAV_ITEMS}
291
- valor="inicio"
304
+ export const Ejemplo = () => (
305
+ <CodeplexNavegacionInferior
306
+ elementos={elementos}
307
+ valor="inicio"
308
+ alCambiar={(_, val) => console.log(val)}
292
309
  fijo
293
- conPapel
294
310
  />
295
311
  );
296
312
  ```
297
313
 
298
- **Propiedades (Props):**
299
- | Propiedad | Tipo | Por Defecto | Descripción |
314
+ **Props:**
315
+ | Propiedad | Tipo | Por defecto | Descripción |
300
316
  | :--- | :--- | :--- | :--- |
301
- | `elementos` | `Array<Item>` | - | Lista de pestañas con `etiqueta`, `icono` y `valor`. |
302
- | `valor` | `any` | - | Valor del elemento activo. |
303
- | `fijo` | `boolean` | `false` | Ancla la barra al final de la ventana (fixed). |
304
- | `conPapel`| `boolean` | `true` | Aplica sombra y elevación estilo Material Design. |
317
+ | `elementos` | `{ etiqueta, valor, icono }[]` | — | Pestañas de navegación. |
318
+ | `valor` | `any` | — | Valor del elemento activo. |
319
+ | `alCambiar` | `(e, val) => void` | — | Callback al cambiar elemento. |
320
+ | `fijo` | `boolean` | `false` | Ancla la barra al pie de la ventana. |
321
+ | `conPapel` | `boolean` | `true` | Aplica sombra y elevación. |
305
322
 
306
323
  ---
307
324
 
308
- ## 🎨 Integración y Diseño
309
-
310
- Todos los componentes de `@codeplex-sac/navigation` están diseñados para heredar automáticamente la identidad visual definida en `@codeplex-sac/theme`, respetando los modos claro/oscuro y utilizando la tipografía **Poppins**.
311
-
312
- ## 📄 Licencia
325
+ ## Licencia
313
326
 
314
- Este proyecto es propiedad privada de **Codeplex SAC**. Todos los derechos reservados.
327
+ Propiedad privada de **Codeplex SAC**. Todos los derechos reservados.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codeplex-sac/navegacion",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "type": "module",
5
5
  "main": "./index.js",
6
6
  "module": "./index.js",