@neural-ui/core 1.0.0
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.
- package/README.md +203 -0
- package/fesm2022/neural-ui-core.mjs +8517 -0
- package/fesm2022/neural-ui-core.mjs.map +1 -0
- package/package.json +52 -0
- package/styles/_breakpoints.scss +64 -0
- package/styles/_tokens.scss +210 -0
- package/styles/index.scss +43 -0
- package/types/neural-ui-core.d.ts +2100 -0
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@neural-ui/core",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Modern Angular UI component library built with signals, standalone components, and OnPush change detection.",
|
|
5
|
+
"author": "PedroMorenoTrujillo",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"angular",
|
|
8
|
+
"ui",
|
|
9
|
+
"components",
|
|
10
|
+
"signals",
|
|
11
|
+
"design-system",
|
|
12
|
+
"standalone",
|
|
13
|
+
"zoneless"
|
|
14
|
+
],
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"peerDependencies": {
|
|
17
|
+
"@angular/cdk": ">=19.0.0 <23.0.0",
|
|
18
|
+
"@angular/common": ">=19.0.0 <23.0.0",
|
|
19
|
+
"@angular/core": ">=19.0.0 <23.0.0",
|
|
20
|
+
"@angular/forms": ">=19.0.0 <23.0.0",
|
|
21
|
+
"@angular/router": ">=19.0.0 <23.0.0",
|
|
22
|
+
"@ng-icons/core": ">=33.0.0",
|
|
23
|
+
"@ng-icons/lucide": ">=33.0.0",
|
|
24
|
+
"apexcharts": ">=5.0.0",
|
|
25
|
+
"ng-apexcharts": ">=2.0.0"
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"tslib": "^2.3.0"
|
|
29
|
+
},
|
|
30
|
+
"sideEffects": false,
|
|
31
|
+
"repository": {
|
|
32
|
+
"type": "git",
|
|
33
|
+
"url": "https://github.com/PedroMorenoTrujillo/neural-ui-workspace.git",
|
|
34
|
+
"directory": "projects/ui-core"
|
|
35
|
+
},
|
|
36
|
+
"homepage": "https://neural-ui-showcase.vercel.app",
|
|
37
|
+
"bugs": {
|
|
38
|
+
"url": "https://github.com/PedroMorenoTrujillo/neural-ui-workspace/issues"
|
|
39
|
+
},
|
|
40
|
+
"module": "fesm2022/neural-ui-core.mjs",
|
|
41
|
+
"typings": "types/neural-ui-core.d.ts",
|
|
42
|
+
"exports": {
|
|
43
|
+
"./package.json": {
|
|
44
|
+
"default": "./package.json"
|
|
45
|
+
},
|
|
46
|
+
".": {
|
|
47
|
+
"types": "./types/neural-ui-core.d.ts",
|
|
48
|
+
"default": "./fesm2022/neural-ui-core.mjs"
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
"type": "module"
|
|
52
|
+
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// NeuralUI — Breakpoints Mobile-First
|
|
3
|
+
// Punto de quiebre base: 400px (optimizado para plegables y móviles modernos)
|
|
4
|
+
// ============================================================
|
|
5
|
+
|
|
6
|
+
// Variables SCSS
|
|
7
|
+
$neu-bp-xs: 320px; // Teléfonos muy pequeños
|
|
8
|
+
$neu-bp-mobile: 400px; // Punto de quiebre principal (plegables, iPhone SE, etc.)
|
|
9
|
+
$neu-bp-tablet: 768px; // Tabletas
|
|
10
|
+
$neu-bp-desktop: 1024px; // Escritorio
|
|
11
|
+
$neu-bp-wide: 1440px; // Pantallas anchas
|
|
12
|
+
|
|
13
|
+
// ------------------------------------------------
|
|
14
|
+
// Mixins de media queries
|
|
15
|
+
// ------------------------------------------------
|
|
16
|
+
|
|
17
|
+
/// Pantallas menores a 400px (muy pequeñas)
|
|
18
|
+
@mixin neu-xs-only {
|
|
19
|
+
@media (max-width: #{$neu-bp-mobile - 1px}) {
|
|
20
|
+
@content;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/// Pantallas de 400px en adelante — el breakpoint principal de NeuralUI
|
|
25
|
+
@mixin neu-from-mobile {
|
|
26
|
+
@media (min-width: #{$neu-bp-mobile}) {
|
|
27
|
+
@content;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/// Tabletas y superior
|
|
32
|
+
@mixin neu-tablet {
|
|
33
|
+
@media (min-width: #{$neu-bp-tablet}) {
|
|
34
|
+
@content;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/// Escritorio y superior
|
|
39
|
+
@mixin neu-desktop {
|
|
40
|
+
@media (min-width: #{$neu-bp-desktop}) {
|
|
41
|
+
@content;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/// Pantallas anchas
|
|
46
|
+
@mixin neu-wide {
|
|
47
|
+
@media (min-width: #{$neu-bp-wide}) {
|
|
48
|
+
@content;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/// Dispositivos plegables (entre 280px y 399px)
|
|
53
|
+
@mixin neu-foldable {
|
|
54
|
+
@media (min-width: 280px) and (max-width: #{$neu-bp-mobile - 1px}) {
|
|
55
|
+
@content;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/// Modo landscape en móvil
|
|
60
|
+
@mixin neu-landscape {
|
|
61
|
+
@media (orientation: landscape) and (max-height: 500px) {
|
|
62
|
+
@content;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
// ============================================================
|
|
2
|
+
// NeuralUI — Sistema de Design Tokens v2
|
|
3
|
+
// Estética High-End · Neural-Blue · Light Theme
|
|
4
|
+
// ============================================================
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
// ------------------------------------------------
|
|
8
|
+
// Brand — Neural-Blue (inspirado en Apple HIG)
|
|
9
|
+
// ------------------------------------------------
|
|
10
|
+
--neu-primary: #007aff;
|
|
11
|
+
--neu-primary-dark: #005fcc;
|
|
12
|
+
--neu-primary-light: #339dff;
|
|
13
|
+
--neu-primary-50: #eff6ff;
|
|
14
|
+
--neu-primary-100: #dbeafe;
|
|
15
|
+
--neu-primary-fg: #ffffff;
|
|
16
|
+
|
|
17
|
+
--neu-secondary: #10b981;
|
|
18
|
+
--neu-secondary-dark: #059669;
|
|
19
|
+
--neu-secondary-fg: #ffffff;
|
|
20
|
+
|
|
21
|
+
--neu-accent: #5ac8fa;
|
|
22
|
+
|
|
23
|
+
// ------------------------------------------------
|
|
24
|
+
// Fondos (ultra-clean, Slate scale)
|
|
25
|
+
// ------------------------------------------------
|
|
26
|
+
--neu-bg: #f8fafc; // Slate-50 — fondo base
|
|
27
|
+
--neu-surface: #ffffff; // Blanco puro — tarjetas
|
|
28
|
+
--neu-surface-2: #f1f5f9; // Slate-100 — fondos secundarios
|
|
29
|
+
--neu-surface-3: #e2e8f0; // Slate-200 — hover, separadores
|
|
30
|
+
|
|
31
|
+
// ------------------------------------------------
|
|
32
|
+
// Bordes
|
|
33
|
+
// ------------------------------------------------
|
|
34
|
+
--neu-border: rgba(15, 23, 42, 0.08);
|
|
35
|
+
--neu-border-hover: rgba(15, 23, 42, 0.16);
|
|
36
|
+
--neu-border-focus: var(--neu-primary);
|
|
37
|
+
|
|
38
|
+
// ------------------------------------------------
|
|
39
|
+
// Tipografía (Slate scale)
|
|
40
|
+
// ------------------------------------------------
|
|
41
|
+
--neu-text: #0f172a; // Slate-900
|
|
42
|
+
--neu-text-muted: #64748b; // Slate-500
|
|
43
|
+
--neu-text-disabled: #94a3b8; // Slate-400
|
|
44
|
+
--neu-text-inverse: #ffffff;
|
|
45
|
+
|
|
46
|
+
--neu-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
47
|
+
--neu-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
|
|
48
|
+
|
|
49
|
+
--neu-text-xs: 0.75rem;
|
|
50
|
+
--neu-text-sm: 0.875rem;
|
|
51
|
+
--neu-text-base: 1rem;
|
|
52
|
+
--neu-text-lg: 1.125rem;
|
|
53
|
+
--neu-text-xl: 1.25rem;
|
|
54
|
+
--neu-text-2xl: 1.5rem;
|
|
55
|
+
--neu-text-3xl: 1.875rem;
|
|
56
|
+
--neu-text-4xl: 2.25rem;
|
|
57
|
+
|
|
58
|
+
// ------------------------------------------------
|
|
59
|
+
// Estados semánticos
|
|
60
|
+
// ------------------------------------------------
|
|
61
|
+
--neu-success: #10b981;
|
|
62
|
+
--neu-success-bg: #d1fae5;
|
|
63
|
+
--neu-success-text: #065f46;
|
|
64
|
+
|
|
65
|
+
--neu-warning: #f59e0b;
|
|
66
|
+
--neu-warning-bg: #fef3c7;
|
|
67
|
+
--neu-warning-text: #92400e;
|
|
68
|
+
|
|
69
|
+
--neu-error: #ef4444;
|
|
70
|
+
--neu-error-bg: #fee2e2;
|
|
71
|
+
--neu-error-text: #991b1b;
|
|
72
|
+
|
|
73
|
+
--neu-info: #007aff;
|
|
74
|
+
--neu-info-bg: #eff6ff;
|
|
75
|
+
--neu-info-text: #1d4ed8;
|
|
76
|
+
|
|
77
|
+
// ------------------------------------------------
|
|
78
|
+
// Radio de borde
|
|
79
|
+
// ------------------------------------------------
|
|
80
|
+
--neu-radius-xs: 2px;
|
|
81
|
+
--neu-radius-sm: 6px;
|
|
82
|
+
--neu-radius: 8px;
|
|
83
|
+
--neu-radius-lg: 12px;
|
|
84
|
+
--neu-radius-xl: 16px;
|
|
85
|
+
--neu-radius-2xl: 24px;
|
|
86
|
+
--neu-radius-full: 9999px;
|
|
87
|
+
|
|
88
|
+
// ------------------------------------------------
|
|
89
|
+
// Espaciado
|
|
90
|
+
// ------------------------------------------------
|
|
91
|
+
--neu-space-1: 0.25rem;
|
|
92
|
+
--neu-space-2: 0.5rem;
|
|
93
|
+
--neu-space-3: 0.75rem;
|
|
94
|
+
--neu-space-4: 1rem;
|
|
95
|
+
--neu-space-5: 1.25rem;
|
|
96
|
+
--neu-space-6: 1.5rem;
|
|
97
|
+
--neu-space-8: 2rem;
|
|
98
|
+
--neu-space-10: 2.5rem;
|
|
99
|
+
--neu-space-12: 3rem;
|
|
100
|
+
--neu-space-16: 4rem;
|
|
101
|
+
|
|
102
|
+
// ------------------------------------------------
|
|
103
|
+
// Transiciones y animación
|
|
104
|
+
// ------------------------------------------------
|
|
105
|
+
--neu-transition: 200ms ease;
|
|
106
|
+
--neu-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
107
|
+
--neu-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
108
|
+
|
|
109
|
+
// ------------------------------------------------
|
|
110
|
+
// Layout estructural
|
|
111
|
+
// ------------------------------------------------
|
|
112
|
+
--neu-header-height: 64px;
|
|
113
|
+
--neu-sidebar-width: 260px;
|
|
114
|
+
--neu-sidebar-bg: var(--neu-surface);
|
|
115
|
+
|
|
116
|
+
// ------------------------------------------------
|
|
117
|
+
// Z-index
|
|
118
|
+
// ------------------------------------------------
|
|
119
|
+
--neu-z-base: 1;
|
|
120
|
+
--neu-z-dropdown: 50;
|
|
121
|
+
--neu-z-sticky: 80;
|
|
122
|
+
--neu-z-overlay: 99;
|
|
123
|
+
--neu-z-sidebar: 100;
|
|
124
|
+
--neu-z-modal: 200;
|
|
125
|
+
--neu-z-toast: 300;
|
|
126
|
+
|
|
127
|
+
// ------------------------------------------------
|
|
128
|
+
// Sombras (sutiles – tema claro)
|
|
129
|
+
// ------------------------------------------------
|
|
130
|
+
--neu-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
131
|
+
--neu-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
132
|
+
--neu-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
|
|
133
|
+
--neu-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.04);
|
|
134
|
+
--neu-shadow-glow: 0 0 20px rgba(0, 122, 255, 0.2);
|
|
135
|
+
|
|
136
|
+
// ------------------------------------------------
|
|
137
|
+
// Iconos (Lucide via @ng-icons)
|
|
138
|
+
// ------------------------------------------------
|
|
139
|
+
--neu-icon-size: 1.25rem; // 20px — tamaño por defecto
|
|
140
|
+
--neu-icon-size-sm: 1rem; // 16px
|
|
141
|
+
--neu-icon-size-lg: 1.5rem; // 24px
|
|
142
|
+
|
|
143
|
+
// ------------------------------------------------
|
|
144
|
+
// Tooltip
|
|
145
|
+
// ------------------------------------------------
|
|
146
|
+
--neu-tooltip-bg: #0f172a; // Ink-Black
|
|
147
|
+
--neu-tooltip-fg: #ffffff;
|
|
148
|
+
--neu-tooltip-radius: 6px;
|
|
149
|
+
--neu-tooltip-shadow: 0 4px 12px rgba(15, 23, 42, 0.24);
|
|
150
|
+
|
|
151
|
+
// ------------------------------------------------
|
|
152
|
+
// Toast
|
|
153
|
+
// ------------------------------------------------
|
|
154
|
+
--neu-toast-bg: var(--neu-surface);
|
|
155
|
+
--neu-toast-radius: 10px;
|
|
156
|
+
--neu-toast-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// ============================================================
|
|
160
|
+
// NeuralUI — Dark Theme Tokens
|
|
161
|
+
// Activado con: document.documentElement.setAttribute('data-theme', 'dark')
|
|
162
|
+
// ============================================================
|
|
163
|
+
[data-theme='dark'] {
|
|
164
|
+
// ---- Brand (mantienen el mismo azul, se adaptan los fondos) ----
|
|
165
|
+
--neu-primary-50: rgba(0, 122, 255, 0.12);
|
|
166
|
+
--neu-primary-100: rgba(0, 122, 255, 0.2);
|
|
167
|
+
|
|
168
|
+
// ---- Fondos ----
|
|
169
|
+
--neu-bg: #0d1117; // GitHub-dark inspired — fondo base
|
|
170
|
+
--neu-surface: #161b22; // Tarjetas, paneles
|
|
171
|
+
--neu-surface-2: #21262d; // Hover, fondos secundarios
|
|
172
|
+
--neu-surface-3: #30363d; // Separadores, track de switch
|
|
173
|
+
|
|
174
|
+
// ---- Bordes ----
|
|
175
|
+
--neu-border: rgba(255, 255, 255, 0.08);
|
|
176
|
+
--neu-border-hover: rgba(255, 255, 255, 0.16);
|
|
177
|
+
|
|
178
|
+
// ---- Texto ----
|
|
179
|
+
--neu-text: #e6edf3; // Casi blanco — texto principal
|
|
180
|
+
--neu-text-muted: #8b949e; // Slate-400 equivalent — subtítulos
|
|
181
|
+
--neu-text-disabled: #484f58; // Elementos deshabilitados
|
|
182
|
+
|
|
183
|
+
// ---- Semánticos — fondos ajustados a dark ----
|
|
184
|
+
--neu-success-bg: rgba(16, 185, 129, 0.15);
|
|
185
|
+
--neu-success-text: #6ee7b7;
|
|
186
|
+
|
|
187
|
+
--neu-warning-bg: rgba(245, 158, 11, 0.15);
|
|
188
|
+
--neu-warning-text: #fcd34d;
|
|
189
|
+
|
|
190
|
+
--neu-error-bg: rgba(239, 68, 68, 0.15);
|
|
191
|
+
--neu-error-text: #fca5a5;
|
|
192
|
+
|
|
193
|
+
--neu-info-bg: rgba(0, 122, 255, 0.15);
|
|
194
|
+
--neu-info-text: #93c5fd;
|
|
195
|
+
|
|
196
|
+
// ---- Sombras (desaparecen en dark, se usan bordes) ----
|
|
197
|
+
--neu-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
|
198
|
+
--neu-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
199
|
+
--neu-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
200
|
+
--neu-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
201
|
+
--neu-shadow-glow: 0 0 20px rgba(0, 122, 255, 0.35);
|
|
202
|
+
|
|
203
|
+
// ---- Tooltip: fondo claro sobre dark para contraste ----
|
|
204
|
+
--neu-tooltip-bg: #e6edf3;
|
|
205
|
+
--neu-tooltip-fg: #0d1117;
|
|
206
|
+
--neu-tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
207
|
+
|
|
208
|
+
// ---- Toast ----
|
|
209
|
+
--neu-toast-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
210
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
// NeuralUI — Punto de entrada de estilos globales
|
|
2
|
+
// Uso: @use '@neural-ui/core/styles' as * en tu styles.scss principal
|
|
3
|
+
|
|
4
|
+
@forward 'tokens';
|
|
5
|
+
@forward 'breakpoints';
|
|
6
|
+
|
|
7
|
+
// Componentes — @use carga el CSS sin re-exportar variables internas
|
|
8
|
+
@use '../accordion/neu-accordion.component';
|
|
9
|
+
@use '../avatar/neu-avatar.component';
|
|
10
|
+
@use '../badge/neu-badge.component';
|
|
11
|
+
@use '../breadcrumb/neu-breadcrumb.component';
|
|
12
|
+
@use '../button/neu-button.component';
|
|
13
|
+
@use '../card/neu-card.component';
|
|
14
|
+
@use '../chart/neu-chart.component';
|
|
15
|
+
@use '../checkbox/neu-checkbox.component';
|
|
16
|
+
@use '../chip/neu-chip.component';
|
|
17
|
+
@use '../code-block/neu-code-block.component';
|
|
18
|
+
@use '../date-input/neu-date-input.component';
|
|
19
|
+
@use '../empty-state/neu-empty-state.component';
|
|
20
|
+
@use '../icon/neu-icon.component';
|
|
21
|
+
@use '../input/neu-input.component';
|
|
22
|
+
@use '../modal/neu-modal.component';
|
|
23
|
+
@use '../multiselect/neu-multiselect.component';
|
|
24
|
+
@use '../nav/neu-nav.component';
|
|
25
|
+
@use '../pagination/neu-pagination.component';
|
|
26
|
+
@use '../progress-bar/neu-progress-bar.component';
|
|
27
|
+
@use '../radio/neu-radio.component';
|
|
28
|
+
@use '../rating/neu-rating.component';
|
|
29
|
+
@use '../select/neu-select.component';
|
|
30
|
+
@use '../sidebar/neu-sidebar.component';
|
|
31
|
+
@use '../skeleton/neu-skeleton.component';
|
|
32
|
+
@use '../slider/neu-slider.component';
|
|
33
|
+
@use '../split-button/neu-split-button.component';
|
|
34
|
+
@use '../stats-card/neu-stats-card.component';
|
|
35
|
+
@use '../stepper/neu-stepper.component';
|
|
36
|
+
@use '../switch/neu-switch.component';
|
|
37
|
+
@use '../table/neu-table.component';
|
|
38
|
+
@use '../tabs/neu-tabs.component';
|
|
39
|
+
@use '../textarea/neu-textarea.component';
|
|
40
|
+
@use '../timeline/neu-timeline.component';
|
|
41
|
+
@use '../toast/neu-toast.component';
|
|
42
|
+
@use '../toggle-button-group/neu-toggle-button-group.component';
|
|
43
|
+
@use '../tooltip/neu-tooltip.component';
|