anima-ds-nucleus 1.0.9 → 1.0.11
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/dist/anima-ds.cjs.js +55 -59
- package/dist/anima-ds.esm.js +1911 -1746
- package/package.json +1 -1
- package/src/components/DataDisplay/Card/CardError.jsx +1 -2
- package/src/components/DataDisplay/Card/CardSkeleton.jsx +1 -2
- package/src/components/DataDisplay/Card/CardTituloCorto.jsx +1 -2
- package/src/components/DataDisplay/Card/CardTituloCortoMasEstado.jsx +1 -2
- package/src/components/DataDisplay/Card/CardTituloLargo.jsx +1 -2
- package/src/components/DataDisplay/Card/CardTituloLargoMasEstado.jsx +1 -2
- package/src/components/DataDisplay/Card/CardVacia.jsx +1 -2
- package/src/components/Layout/Header/HeaderCore.jsx +168 -27
- package/src/components/Layout/Sidebar/SidebarCore.jsx +21 -4
package/package.json
CHANGED
|
@@ -14,8 +14,7 @@ export const CardError = ({
|
|
|
14
14
|
width: '379.5px',
|
|
15
15
|
height: '476px',
|
|
16
16
|
borderRadius: '14px',
|
|
17
|
-
border: '1px solid #
|
|
18
|
-
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
17
|
+
border: '1px solid #C4C4C4',
|
|
19
18
|
opacity: 1
|
|
20
19
|
}}
|
|
21
20
|
{...props}
|
|
@@ -9,8 +9,7 @@ export const CardSkeleton = ({
|
|
|
9
9
|
width: '379.5px',
|
|
10
10
|
height: '476px',
|
|
11
11
|
borderRadius: '14px',
|
|
12
|
-
border: '1px solid #
|
|
13
|
-
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
12
|
+
border: '1px solid #C4C4C4',
|
|
14
13
|
opacity: 1
|
|
15
14
|
}}
|
|
16
15
|
{...props}
|
|
@@ -13,8 +13,7 @@ export const CardTituloCorto = ({
|
|
|
13
13
|
width: '379.5px',
|
|
14
14
|
height: '476px',
|
|
15
15
|
borderRadius: '14px',
|
|
16
|
-
border: '1px solid #
|
|
17
|
-
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
16
|
+
border: '1px solid #C4C4C4',
|
|
18
17
|
opacity: 1
|
|
19
18
|
}}
|
|
20
19
|
{...props}
|
|
@@ -14,8 +14,7 @@ export const CardTituloCortoMasEstado = ({
|
|
|
14
14
|
width: '379.5px',
|
|
15
15
|
height: '476px',
|
|
16
16
|
borderRadius: '14px',
|
|
17
|
-
border: '1px solid #
|
|
18
|
-
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
17
|
+
border: '1px solid #C4C4C4',
|
|
19
18
|
opacity: 1
|
|
20
19
|
}}
|
|
21
20
|
{...props}
|
|
@@ -13,8 +13,7 @@ export const CardTituloLargo = ({
|
|
|
13
13
|
width: '379.5px',
|
|
14
14
|
height: '476px',
|
|
15
15
|
borderRadius: '14px',
|
|
16
|
-
border: '1px solid #
|
|
17
|
-
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
16
|
+
border: '1px solid #C4C4C4',
|
|
18
17
|
opacity: 1
|
|
19
18
|
}}
|
|
20
19
|
{...props}
|
|
@@ -14,8 +14,7 @@ export const CardTituloLargoMasEstado = ({
|
|
|
14
14
|
width: '379.5px',
|
|
15
15
|
height: '476px',
|
|
16
16
|
borderRadius: '14px',
|
|
17
|
-
border: '1px solid #
|
|
18
|
-
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
17
|
+
border: '1px solid #C4C4C4',
|
|
19
18
|
opacity: 1
|
|
20
19
|
}}
|
|
21
20
|
{...props}
|
|
@@ -13,8 +13,7 @@ export const CardVacia = ({
|
|
|
13
13
|
width: '379.5px',
|
|
14
14
|
height: '476px',
|
|
15
15
|
borderRadius: '14px',
|
|
16
|
-
border: '1px solid #
|
|
17
|
-
boxShadow: '0px 4px 6px -2px #0000001A, 0px 10px 15px -3px #0000001A',
|
|
16
|
+
border: '1px solid #C4C4C4',
|
|
18
17
|
opacity: 1
|
|
19
18
|
}}
|
|
20
19
|
{...props}
|
|
@@ -12,6 +12,43 @@ export const HeaderCore = ({
|
|
|
12
12
|
onSearch,
|
|
13
13
|
onNotificationClick,
|
|
14
14
|
onUserClick,
|
|
15
|
+
// Overrides de estilo/clases para poder ajustar layout desde el proyecto consumidor
|
|
16
|
+
desktopLayoutClassName = '',
|
|
17
|
+
desktopLayoutStyle,
|
|
18
|
+
desktopSearchContainerClassName = '',
|
|
19
|
+
desktopSearchContainerStyle,
|
|
20
|
+
desktopRightContainerClassName = '',
|
|
21
|
+
desktopRightContainerStyle,
|
|
22
|
+
notificationButtonClassName = '',
|
|
23
|
+
notificationButtonStyle,
|
|
24
|
+
notificationIconClassName = '',
|
|
25
|
+
notificationIconStyle,
|
|
26
|
+
notificationBadgeClassName = '',
|
|
27
|
+
notificationBadgeStyle,
|
|
28
|
+
// Overrides específicos de medidas/posiciones (Desktop / Mobile)
|
|
29
|
+
notificationDesktopButtonStyle,
|
|
30
|
+
notificationDesktopIconWrapperClassName = '',
|
|
31
|
+
notificationDesktopIconWrapperStyle,
|
|
32
|
+
notificationDesktopIconSize = 18,
|
|
33
|
+
notificationDesktopIconStrokeWidth = 1.5,
|
|
34
|
+
notificationDesktopIconStyle,
|
|
35
|
+
notificationDesktopBadgeStyle,
|
|
36
|
+
notificationMobileButtonClassName = '',
|
|
37
|
+
notificationMobileButtonStyle,
|
|
38
|
+
notificationMobileIconWrapperClassName = '',
|
|
39
|
+
notificationMobileIconWrapperStyle,
|
|
40
|
+
notificationMobileIconSize = 24,
|
|
41
|
+
notificationMobileIconStrokeWidth = 1.5,
|
|
42
|
+
notificationMobileIconStyle,
|
|
43
|
+
showNotificationBadgeOnMobile = false,
|
|
44
|
+
notificationMobileBadgeStyle,
|
|
45
|
+
// Desktop avatar / nombre (overrides)
|
|
46
|
+
desktopUserAvatarClassName = '',
|
|
47
|
+
desktopUserAvatarStyle,
|
|
48
|
+
desktopUserNameStyle,
|
|
49
|
+
// Mobile avatar (overrides)
|
|
50
|
+
mobileUserAvatarClassName = '',
|
|
51
|
+
mobileUserAvatarStyle,
|
|
15
52
|
sidebarSections,
|
|
16
53
|
sidebarActiveItem,
|
|
17
54
|
onSidebarItemClick,
|
|
@@ -103,9 +140,15 @@ export const HeaderCore = ({
|
|
|
103
140
|
|
|
104
141
|
<div className="w-full" style={{ paddingLeft: '4px', paddingRight: '4px' }}>
|
|
105
142
|
{/* Layout Desktop (más de 768px) */}
|
|
106
|
-
<div
|
|
143
|
+
<div
|
|
144
|
+
className={`header-desktop-layout flex items-center justify-between h-16 ${desktopLayoutClassName}`}
|
|
145
|
+
style={desktopLayoutStyle}
|
|
146
|
+
>
|
|
107
147
|
{/* Barra de búsqueda con icono a la derecha */}
|
|
108
|
-
<div
|
|
148
|
+
<div
|
|
149
|
+
className={`flex-1 mr-2 md:mr-4 ${desktopSearchContainerClassName}`}
|
|
150
|
+
style={{ maxWidth: 'none', minWidth: '0', ...(desktopSearchContainerStyle || {}) }}
|
|
151
|
+
>
|
|
109
152
|
<form onSubmit={handleSearchSubmit} className="header-search-form flex items-center w-full">
|
|
110
153
|
{/* Input de búsqueda */}
|
|
111
154
|
<input
|
|
@@ -151,28 +194,71 @@ export const HeaderCore = ({
|
|
|
151
194
|
</div>
|
|
152
195
|
|
|
153
196
|
{/* Notificaciones y Perfil */}
|
|
154
|
-
<div
|
|
197
|
+
<div
|
|
198
|
+
className={`flex items-center space-x-3 md:space-x-6 flex-shrink-0 ${desktopRightContainerClassName}`}
|
|
199
|
+
style={{ marginLeft: 'auto', paddingRight: '0px', ...(desktopRightContainerStyle || {}) }}
|
|
200
|
+
>
|
|
155
201
|
{/* Icono de notificaciones */}
|
|
156
202
|
{notificationCount !== undefined && (
|
|
157
203
|
<button
|
|
158
204
|
onClick={onNotificationClick}
|
|
159
|
-
className=
|
|
205
|
+
className={`ml-3 p-2 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-2 ${notificationButtonClassName}`}
|
|
160
206
|
aria-label="Notificaciones"
|
|
207
|
+
style={{
|
|
208
|
+
// Nota: en desktop el contenedor derecho está anclado a la derecha (marginLeft: auto).
|
|
209
|
+
// Un ml-* en el primer hijo no “mueve” visualmente, porque ensancha el contenedor hacia la izquierda.
|
|
210
|
+
// Por eso usamos translateX por defecto (overrideable por props).
|
|
211
|
+
transform: 'translateX(12px)',
|
|
212
|
+
...(notificationButtonStyle || {}),
|
|
213
|
+
...(notificationDesktopButtonStyle || {}),
|
|
214
|
+
}}
|
|
161
215
|
>
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
216
|
+
{/* Contenedor 24x24 + icono posicionado (Figma) */}
|
|
217
|
+
<span
|
|
218
|
+
className={`relative inline-block ${notificationDesktopIconWrapperClassName}`}
|
|
219
|
+
style={{
|
|
220
|
+
width: '24px',
|
|
221
|
+
height: '24px',
|
|
222
|
+
opacity: 1,
|
|
223
|
+
...(notificationDesktopIconWrapperStyle || {}),
|
|
224
|
+
}}
|
|
225
|
+
>
|
|
226
|
+
<Icon
|
|
227
|
+
name="BellAlertIcon"
|
|
228
|
+
variant="24-outline"
|
|
229
|
+
size={notificationDesktopIconSize}
|
|
230
|
+
strokeWidth={notificationDesktopIconStrokeWidth}
|
|
231
|
+
className={`color-gray-600 ${notificationIconClassName}`}
|
|
232
|
+
style={{
|
|
233
|
+
width: '17.75112533569336px',
|
|
234
|
+
height: '18px',
|
|
235
|
+
position: 'absolute',
|
|
236
|
+
top: '3px',
|
|
237
|
+
left: '3.12px',
|
|
238
|
+
opacity: 1,
|
|
239
|
+
transform: 'rotate(0deg)',
|
|
240
|
+
...(notificationIconStyle || {}),
|
|
241
|
+
...(notificationDesktopIconStyle || {}),
|
|
242
|
+
}}
|
|
243
|
+
/>
|
|
244
|
+
</span>
|
|
168
245
|
{notificationCount > 0 && (
|
|
169
246
|
<span
|
|
170
|
-
className=
|
|
171
|
-
text-white rounded-full flex items-center justify-center
|
|
172
|
-
text-body-sm font-medium"
|
|
247
|
+
className={`h-5 text-white flex items-center justify-center text-body-sm font-medium ${notificationBadgeClassName}`}
|
|
173
248
|
style={{
|
|
174
249
|
backgroundColor: '#6D3856',
|
|
175
|
-
|
|
250
|
+
minWidth: '24px',
|
|
251
|
+
width: 'fit-content',
|
|
252
|
+
height: '20px',
|
|
253
|
+
paddingTop: '2px',
|
|
254
|
+
paddingRight: '8px',
|
|
255
|
+
paddingBottom: '2px',
|
|
256
|
+
paddingLeft: '8px',
|
|
257
|
+
borderRadius: '8px',
|
|
258
|
+
opacity: 1,
|
|
259
|
+
transform: 'rotate(0deg)',
|
|
260
|
+
...(notificationBadgeStyle || {}),
|
|
261
|
+
...(notificationDesktopBadgeStyle || {}),
|
|
176
262
|
}}
|
|
177
263
|
>
|
|
178
264
|
{notificationCount > 9 ? '9+' : notificationCount}
|
|
@@ -194,6 +280,15 @@ export const HeaderCore = ({
|
|
|
194
280
|
name={userName}
|
|
195
281
|
size="medium"
|
|
196
282
|
variant="circle"
|
|
283
|
+
className={desktopUserAvatarClassName}
|
|
284
|
+
style={{
|
|
285
|
+
width: '36px',
|
|
286
|
+
height: '36px',
|
|
287
|
+
opacity: 1,
|
|
288
|
+
borderRadius: '16777200px',
|
|
289
|
+
transform: 'rotate(0deg)',
|
|
290
|
+
...(desktopUserAvatarStyle || {}),
|
|
291
|
+
}}
|
|
197
292
|
/>
|
|
198
293
|
<Typography
|
|
199
294
|
variant="body-lg"
|
|
@@ -206,6 +301,7 @@ export const HeaderCore = ({
|
|
|
206
301
|
lineHeight: '24px',
|
|
207
302
|
letterSpacing: '0%',
|
|
208
303
|
verticalAlign: 'middle'
|
|
304
|
+
,...(desktopUserNameStyle || {})
|
|
209
305
|
}}
|
|
210
306
|
>
|
|
211
307
|
{userName}
|
|
@@ -263,23 +359,66 @@ export const HeaderCore = ({
|
|
|
263
359
|
{notificationCount !== undefined && (
|
|
264
360
|
<button
|
|
265
361
|
onClick={onNotificationClick}
|
|
266
|
-
className=
|
|
362
|
+
className={`ml-2 hover:bg-gray-100 transition-colors flex items-center justify-center ${notificationButtonClassName} ${notificationMobileButtonClassName}`}
|
|
267
363
|
aria-label="Notificaciones"
|
|
364
|
+
style={{
|
|
365
|
+
width: '48px',
|
|
366
|
+
height: '48px',
|
|
367
|
+
paddingRight: '0px',
|
|
368
|
+
borderRadius: '8px',
|
|
369
|
+
opacity: 1,
|
|
370
|
+
transform: 'rotate(0deg)',
|
|
371
|
+
...(notificationButtonStyle || {}),
|
|
372
|
+
...(notificationMobileButtonStyle || {}),
|
|
373
|
+
}}
|
|
268
374
|
>
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
375
|
+
{/* Contenedor 32x32 implícito dentro del botón 48x48 + icono posicionado (Figma) */}
|
|
376
|
+
<span
|
|
377
|
+
className={`relative inline-block ${notificationMobileIconWrapperClassName}`}
|
|
378
|
+
style={{
|
|
379
|
+
width: '32px',
|
|
380
|
+
height: '32px',
|
|
381
|
+
opacity: 1,
|
|
382
|
+
...(notificationMobileIconWrapperStyle || {}),
|
|
383
|
+
}}
|
|
384
|
+
>
|
|
385
|
+
<Icon
|
|
386
|
+
name="BellAlertIcon"
|
|
387
|
+
variant="24-outline"
|
|
388
|
+
size={notificationMobileIconSize}
|
|
389
|
+
strokeWidth={notificationMobileIconStrokeWidth}
|
|
390
|
+
className={`color-gray-600 ${notificationIconClassName}`}
|
|
391
|
+
style={{
|
|
392
|
+
width: '22.163536071777344px',
|
|
393
|
+
height: '24px',
|
|
394
|
+
position: 'absolute',
|
|
395
|
+
top: '4px',
|
|
396
|
+
left: '4.92px',
|
|
397
|
+
opacity: 1,
|
|
398
|
+
transform: 'rotate(0deg)',
|
|
399
|
+
...(notificationIconStyle || {}),
|
|
400
|
+
...(notificationMobileIconStyle || {}),
|
|
401
|
+
}}
|
|
402
|
+
/>
|
|
403
|
+
</span>
|
|
404
|
+
{showNotificationBadgeOnMobile && notificationCount > 0 && (
|
|
276
405
|
<span
|
|
277
|
-
className=
|
|
278
|
-
|
|
279
|
-
text-body-sm font-medium"
|
|
280
|
-
style={{
|
|
406
|
+
className={`h-5 text-white flex items-center justify-center text-body-sm font-medium ${notificationBadgeClassName}`}
|
|
407
|
+
style={{
|
|
281
408
|
backgroundColor: '#6D3856',
|
|
282
|
-
|
|
409
|
+
minWidth: '24px',
|
|
410
|
+
width: 'fit-content',
|
|
411
|
+
height: '20px',
|
|
412
|
+
paddingTop: '2px',
|
|
413
|
+
paddingRight: '8px',
|
|
414
|
+
paddingBottom: '2px',
|
|
415
|
+
paddingLeft: '8px',
|
|
416
|
+
borderRadius: '8px',
|
|
417
|
+
marginLeft: '6px',
|
|
418
|
+
opacity: 1,
|
|
419
|
+
transform: 'rotate(0deg)',
|
|
420
|
+
...(notificationBadgeStyle || {}),
|
|
421
|
+
...(notificationMobileBadgeStyle || {}),
|
|
283
422
|
}}
|
|
284
423
|
>
|
|
285
424
|
{notificationCount > 9 ? '9+' : notificationCount}
|
|
@@ -300,6 +439,8 @@ export const HeaderCore = ({
|
|
|
300
439
|
name={userName || ''}
|
|
301
440
|
size="medium"
|
|
302
441
|
variant="circle"
|
|
442
|
+
className={mobileUserAvatarClassName}
|
|
443
|
+
style={mobileUserAvatarStyle}
|
|
303
444
|
/>
|
|
304
445
|
</button>
|
|
305
446
|
)}
|
|
@@ -93,8 +93,9 @@ const SidebarCoreMobile = ({
|
|
|
93
93
|
{!isMobileMenuOpen && controlledIsOpen === undefined && (
|
|
94
94
|
<button
|
|
95
95
|
onClick={toggleMobileMenu}
|
|
96
|
-
className="fixed top-4 left-4 z-50 p-2 bg-white
|
|
96
|
+
className="fixed top-4 left-4 z-50 p-2 bg-white rounded-lg
|
|
97
97
|
hover:bg-gray-50 transition-colors"
|
|
98
|
+
style={{ border: '1px solid #C4C4C4' }}
|
|
98
99
|
aria-label="Toggle menu"
|
|
99
100
|
>
|
|
100
101
|
<Icon
|
|
@@ -122,7 +123,8 @@ const SidebarCoreMobile = ({
|
|
|
122
123
|
}}
|
|
123
124
|
/>
|
|
124
125
|
<aside
|
|
125
|
-
className={`bg-white
|
|
126
|
+
className={`bg-white sidebar-core-mobile ${className}`}
|
|
127
|
+
style={{ border: '1px solid #C4C4C4', borderRadius: '16px' }}
|
|
126
128
|
{...props}
|
|
127
129
|
>
|
|
128
130
|
<nav className="h-full flex flex-col">
|
|
@@ -384,6 +386,9 @@ export const SidebarCore = ({
|
|
|
384
386
|
companyName = 'HEXA Core',
|
|
385
387
|
companyLogo,
|
|
386
388
|
onCompanyClick,
|
|
389
|
+
// Overrides desktop para el header "HEXA Core"
|
|
390
|
+
desktopCompanyNameClassName = '',
|
|
391
|
+
desktopCompanyNameStyle,
|
|
387
392
|
nucleusName = 'Nucleus AR',
|
|
388
393
|
nucleusLogo,
|
|
389
394
|
onNucleusClick,
|
|
@@ -464,9 +469,10 @@ export const SidebarCore = ({
|
|
|
464
469
|
|
|
465
470
|
return (
|
|
466
471
|
<aside
|
|
467
|
-
className={`bg-white
|
|
472
|
+
className={`bg-white transition-all duration-300 ease-in-out h-full ${
|
|
468
473
|
isCollapsed ? 'w-20' : 'w-64'
|
|
469
474
|
} ${className}`}
|
|
475
|
+
style={{ border: '1px solid #C4C4C4', borderRadius: '16px' }}
|
|
470
476
|
{...props}
|
|
471
477
|
>
|
|
472
478
|
<nav className="h-full flex flex-col" style={{ overflow: 'hidden' }}>
|
|
@@ -492,7 +498,18 @@ export const SidebarCore = ({
|
|
|
492
498
|
{/* Nombre de la empresa */}
|
|
493
499
|
<Typography
|
|
494
500
|
variant="body-md"
|
|
495
|
-
className=
|
|
501
|
+
className={`color-gray-900 ${desktopCompanyNameClassName}`}
|
|
502
|
+
style={{
|
|
503
|
+
fontFamily: 'IBM Plex Sans',
|
|
504
|
+
fontWeight: 600,
|
|
505
|
+
fontStyle: 'normal',
|
|
506
|
+
fontSize: '18px',
|
|
507
|
+
lineHeight: '28px',
|
|
508
|
+
letterSpacing: '0px',
|
|
509
|
+
opacity: 1,
|
|
510
|
+
transform: 'rotate(0deg)',
|
|
511
|
+
...(desktopCompanyNameStyle || {}),
|
|
512
|
+
}}
|
|
496
513
|
>
|
|
497
514
|
{companyName}
|
|
498
515
|
</Typography>
|