orbiq-neural-ui-kit 0.0.7 → 1.0.8

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 (7) hide show
  1. package/README.md +139 -52
  2. package/fesm2022/orbiq-neural-ui-kit.mjs +9769 -9706
  3. package/fesm2022/orbiq-neural-ui-kit.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/src/lucide-icons.css +6 -6
  6. package/src/theme.css +1 -1
  7. package/types/orbiq-neural-ui-kit.d.ts +1091 -1090
package/README.md CHANGED
@@ -1,64 +1,151 @@
1
- # NeuralUiKit
2
-
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 22.1.0.
4
-
5
- ## Code scaffolding
6
-
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
8
-
9
- ```bash
10
- ng generate component component-name
1
+ # Orbiq Neural UI Kit
2
+
3
+ Una biblioteca de componentes de interfaz de usuario de alto rendimiento, diseñada específicamente para el ecosistema modular de Orbiq Neural y fuertemente inspirada en las estéticas limpias, minimalistas y altamente funcionales.
4
+
5
+ A partir de la versión **0.1.0**, `neural-ui-kit` adopta la metodología de **Diseño Atómico (Atomic Design)**. Este marco de trabajo nos permite pensar en la interfaz de usuario como un ecosistema de bloques de construcción escalables, facilitando la creación rápida de plataformas y catálogos de componentes modulares.
6
+
7
+ ## Filosofía de Diseño
8
+ - **Estética limpia**: Uso intensivo de espacios en blanco, bordes sutiles y sombras suaves (`box-shadow`) en lugar de contenedores delimitados por líneas duras.
9
+ - **Micro-interacciones**: Transiciones suaves en estados de `hover`, `focus` y `active`.
10
+ - **Integración con Tailwind CSS**: Totalmente configurable mediante variables y clases utilitarias de Tailwind v4.
11
+ - **Iconografía**: Uso estandarizado de iconos de `lucide-icons`.
12
+ - **Diseño Atómico**: Arquitectura predecible (Átomos -> Moléculas -> Organismos -> Plantillas -> Páginas).
13
+
14
+ ---
15
+
16
+ ## Catálogo de Componentes (Arquitectura Atómica)
17
+
18
+ A continuación, se detalla la lista de componentes disponibles estructurados por su nivel atómico. Cada bloque está diseñado para integrarse perfectamente con el siguiente nivel de complejidad.
19
+
20
+ ### 1. Átomos (Atoms)
21
+ Elementos de UI básicos e indivisibles. No dependen de otros componentes.
22
+ - **Avatar (`<neural-avatar>`)**: Representación visual de usuarios (círculo o cuadrado).
23
+ - **Badge (`<neural-badge>`)**: Pequeñas etiquetas de información de estado o categorización.
24
+ - **Button (`<neural-button>`)**: Botón estándar con múltiples variantes, tamaños y estados.
25
+ - **Checkbox (`<neural-checkbox>`)**: Selector booleano simple.
26
+ - **Divider (`<neural-divider>`)**: Línea separadora estructural.
27
+ - **Error Message (`<neural-error-message>`)**: Texto estandarizado para feedback de validación.
28
+ - **Form Label (`<neural-form-label>`)**: Etiqueta tipográfica para campos de entrada.
29
+ - **Icon (`<neural-icon>`)**: Componente envoltorio para renderizar vectores de Lucide.
30
+ - **Loading Indicator & Text**: Elementos visuales de carga y estados de espera.
31
+ - **Progress (`<neural-progress>`)**: Barra de progreso simple.
32
+ - **Radio (`<neural-radio>`)**: Botón de selección única.
33
+ - **Skeleton (`<neural-skeleton>`)**: Bloques de carga (placeholders) para contenido asíncrono.
34
+ - **Slider (`<neural-slider>`)**: Control de selección de rango numérico.
35
+ - **Spinner (`<neural-spinner>`)**: Animación circular de carga.
36
+ - **Switch (`<neural-switch>`)**: Interruptor booleano (toggle).
37
+ - **Text Input & Textarea**: Entradas de texto básicas.
38
+ - **Tooltip (`<neural-tooltip>`)**: Información adicional contextual al pasar el ratón.
39
+ - **Duration (`<neural-duration>`)**: Componente base para visualización de tiempo.
40
+
41
+ ### 2. Moléculas (Molecules)
42
+ Grupos simples de átomos que funcionan juntos como una unidad funcional cohesiva.
43
+ - **Accordion (`<neural-accordion>`)**: Paneles apilados expandibles.
44
+ - **Alert (`<neural-alert>`)**: Cajas de advertencia e información estática estructurada.
45
+ - **Breadcrumbs (`<neural-breadcrumbs>`)**: Rutas de navegación compuestas por enlaces e iconos.
46
+ - **Combobox & Select**: Selectores de listas desplegables.
47
+ - **Dropdown (`<neural-dropdown>`)**: Selector flotante (popover) con soporte para sub-menús.
48
+ - **Form Control (`<neural-form-control>`)**: Envoltorio estandarizado para inputs, uniendo label, input y error-message.
49
+ - **Hover Card (`<neural-hover-card>`)**: Tarjeta flotante con información detallada activada por hover.
50
+ - **Input Labeling**: Sistema de etiquetado avanzado para inputs.
51
+ - **Item List Row (`<neural-item-list-row>`)**: Fila estandarizada para listas de elementos.
52
+ - **Keyboard Shortcut (`<neural-keyboard-shortcut>`)**: Renderizado visual de atajos de teclado.
53
+ - **Popover (`<neural-popover>`)**: Tarjetas flotantes controladas por interacciones de usuario.
54
+ - **Tabs (`<neural-tabs>`)**: Contenedor de pestañas de contenido intercambiables.
55
+ - **Multi Select & Multi Email Input**: Entradas de texto complejas con selección múltiple.
56
+ - **Password Input (`<neural-password>`)**: Input de texto combinado con icono de revelar/ocultar.
57
+ - **Time Picker (`<neural-time-picker>`)**: Selector de horas y minutos.
58
+ - **Rating (`<neural-rating>`)**: Selector de calificación interactivo (ej. estrellas).
59
+
60
+ ### 3. Organismos (Organisms)
61
+ Componentes relativamente complejos que forman secciones distintas y autónomas de una interfaz, compuestos por moléculas y átomos.
62
+ - **Bottom Sheet (`<neural-bottom-sheet>`)**: Panel modal que emerge desde la parte inferior (ideal para móvil).
63
+ - **Calendar & Date Picker**: Selectores de fechas y visualización de calendarios completos.
64
+ - **Charts (`<neural-charts>`)**: Contenedores para renderizado de gráficos complejos.
65
+ - **Code Editor (`<neural-code-editor>`)**: Organismo completo de edición de código con sintaxis.
66
+ - **Command Palette (`<neural-command-palette>`)**: Paleta de comandos (Spotlight) para navegación y acciones rápidas.
67
+ - **Context Menu (`<neural-context-menu>`)**: Menú contextual activado por clic derecho.
68
+ - **Dialog (`<neural-dialog>`)**: Ventanas modales emergentes completas con cabeceras y acciones.
69
+ - **File Uploader (`<neural-file-uploader>`)**: Zona completa de arrastrar y soltar para carga de archivos.
70
+ - **Floating Window (`<neural-floating-window>`)**: Ventanas flotantes arrastrables en el entorno de escritorio.
71
+ - **List View (`<neural-list-view>`)**: Renderizado complejo de tablas y vistas de datos estructuradas.
72
+ - **Menu (`<neural-menu>`)**: Organismo de menú estructurado.
73
+ - **Mobile Nav (`<neural-mobile-nav>`)**: Barra de navegación adaptada a dispositivos móviles.
74
+ - **Page Header (`<neural-page-header>`)**: Cabecera estándar de página con título, migas de pan y acciones.
75
+ - **Rail (`<neural-rail>`)**: Barra lateral colapsada (rail) para navegación rápida.
76
+ - **Scroll Area (`<neural-scroll-area>`)**: Contenedor especializado para manejo de desbordamiento de contenido.
77
+ - **Sidebar (`<neural-sidebar>`)**: Contenedor estructural lateral completo para navegación principal.
78
+ - **Settings Dialog (`<neural-settings-dialog>`)**: Modal de configuración preconstruido con navegación interna.
79
+ - **Text Editor (`<neural-text-editor>`)**: Editor de texto enriquecido (Rich Text).
80
+ - **Theme Switcher (`<neural-theme-switcher>`)**: Organismo para controlar los modos de diseño (claro/oscuro).
81
+ - **Toast (`<neural-toast>`)**: Sistema de notificaciones efímeras (snacks).
82
+ - **Tree (`<neural-tree>`)**: Representación de datos jerárquicos expansibles.
83
+
84
+ ### 4. Plantillas (Templates)
85
+ Objetos a nivel de página que articulan la estructura subyacente ubicando organismos en el diseño.
86
+ - **Desktop Shell (`<neural-desktop-shell>`)**: Estructura base para el entorno de trabajo de escritorio (sidebar + header + contenido).
87
+ - **Mobile Shell (`<neural-mobile-shell>`)**: Estructura base para el entorno móvil (bottom nav + contenido).
88
+
89
+ ---
90
+
91
+ ## Uso (Ejemplo Básico)
92
+
93
+ ### 1. Elementos Sueltos (Átomos)
94
+
95
+ ```typescript
96
+ // Importa desde los bloques atómicos
97
+ import { NeuralButtonComponent, NeuralAvatarComponent } from 'orbiq-neural-ui-kit';
11
98
  ```
12
99
 
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
100
+ ```html
101
+ <neural-button variant="subtle" theme="blue" size="md">
102
+ Guardar
103
+ </neural-button>
14
104
 
15
- ```bash
16
- ng generate --help
105
+ <neural-avatar label="John Doe" size="lg" shape="circle"></neural-avatar>
17
106
  ```
18
107
 
19
- ## Building
108
+ ### 2. Ensamblando una Página (Plantilla Desktop)
20
109
 
21
- To build the library, run:
110
+ El poder del Diseño Atómico brilla al usar las **Plantillas** y llenarlas de **Organismos** y **Moléculas**. Aquí tienes un ejemplo de cómo estructurar una página completa usando el `Desktop Shell`.
22
111
 
23
- ```bash
24
- ng build neural-ui-kit
112
+ ```typescript
113
+ import {
114
+ NeuralDesktopShellComponent,
115
+ NeuralSidebarComponent,
116
+ NeuralPageHeaderComponent
117
+ } from 'orbiq-neural-ui-kit';
25
118
  ```
26
119
 
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
28
-
29
- ### Publishing the Library
30
-
31
- Once the project is built, you can publish your library by following these steps:
32
-
33
- 1. Navigate to the `dist` directory:
34
-
35
- ```bash
36
- cd dist/neural-ui-kit
37
- ```
38
-
39
- 2. Run the `npm publish` command to publish your library to the npm registry:
40
- ```bash
41
- npm publish
42
- ```
43
-
44
- ## Running unit tests
45
-
46
- To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
47
-
48
- ```bash
49
- ng test
50
- ```
51
-
52
- ## Running end-to-end tests
53
-
54
- For end-to-end (e2e) testing, run:
55
-
56
- ```bash
57
- ng e2e
120
+ ```html
121
+ <!-- La Plantilla principal que dicta el layout general -->
122
+ <neural-desktop-shell>
123
+
124
+ <!-- Organismo: Barra lateral inyectada en el slot 'sidebar' -->
125
+ <neural-sidebar sidebar>
126
+ <!-- Contenido de navegación de tu aplicación -->
127
+ </neural-sidebar>
128
+
129
+ <!-- Organismo: Cabecera inyectada en el slot 'header' -->
130
+ <neural-page-header header title="Dashboard Principal">
131
+ <!-- Átomos/Moléculas: Acciones en la cabecera -->
132
+ <neural-button variant="solid" theme="gray" actions>
133
+ Nuevo Reporte
134
+ </neural-button>
135
+ </neural-page-header>
136
+
137
+ <!-- Contenido principal (Página/Organismos) -->
138
+ <div class="p-6">
139
+ <neural-alert title="Bienvenido" variant="info">
140
+ Tu sistema ha sido inicializado correctamente usando bloques atómicos.
141
+ </neural-alert>
142
+
143
+ <!-- Aquí irían tus tablas, gráficos, etc. -->
144
+ </div>
145
+
146
+ </neural-desktop-shell>
58
147
  ```
59
148
 
60
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
61
-
62
- ## Additional Resources
149
+ ---
63
150
 
64
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
151
+ Para documentación interactiva detallada de cada componente (Playground), por favor referirse a la ruta interna `/system/components-playground` dentro del ERP.