anima-ds-nucleus 1.0.5 → 1.0.7
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-nucleus.css +1 -1
- package/dist/anima-ds.cjs.js +188 -69
- package/dist/anima-ds.esm.js +2401 -2049
- package/package.json +1 -1
- package/src/components/Layout/Header/HeaderPoint.jsx +332 -88
- package/src/components/Layout/Header/HeaderPoint.stories.jsx +20 -78
- package/src/components/Layout/NavPoint/NavPoint.jsx +50 -4
- package/src/components/Layout/Sidebar/SidebarCore.jsx +60 -19
|
@@ -32,6 +32,8 @@ const SidebarCoreMobile = ({
|
|
|
32
32
|
itemBadges = {},
|
|
33
33
|
footerText, // Texto del footer: puede ser string "v1.0 | Powered by Nucleus" o objeto { version: "v1.0", poweredBy: "Powered by", brand: "Nucleus" }
|
|
34
34
|
footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
|
|
35
|
+
coreContainerStyle, // Estilos personalizados para el contenedor de LogoHexa y "Core"
|
|
36
|
+
coreTextStyle, // Estilos personalizados para el texto "Core"
|
|
35
37
|
className = '',
|
|
36
38
|
...props
|
|
37
39
|
}) => {
|
|
@@ -105,17 +107,46 @@ const SidebarCoreMobile = ({
|
|
|
105
107
|
{...props}
|
|
106
108
|
>
|
|
107
109
|
<nav className="h-full flex flex-col">
|
|
108
|
-
{/* Header con "Core" y botón X */}
|
|
110
|
+
{/* Header con LogoHexa, "Core" y botón X */}
|
|
109
111
|
<div className="bg-white px-4 py-4 flex items-center justify-between border-b border-gray-200">
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
112
|
+
{/* Lado izquierdo: LogoHexa y "Core" */}
|
|
113
|
+
<div
|
|
114
|
+
className="flex items-center space-x-2"
|
|
115
|
+
style={coreContainerStyle}
|
|
113
116
|
>
|
|
114
|
-
|
|
115
|
-
|
|
117
|
+
{/* Logo Hexa */}
|
|
118
|
+
<LogoHexa
|
|
119
|
+
width={36}
|
|
120
|
+
height={40}
|
|
121
|
+
className="flex-shrink-0"
|
|
122
|
+
/>
|
|
123
|
+
|
|
124
|
+
{/* Texto "Core" */}
|
|
125
|
+
<Typography
|
|
126
|
+
variant="h6"
|
|
127
|
+
style={{
|
|
128
|
+
color: '#2D5C63',
|
|
129
|
+
fontSize: '24px',
|
|
130
|
+
fontFamily: 'IBM Plex Sans',
|
|
131
|
+
fontWeight: 600,
|
|
132
|
+
lineHeight: '1.2',
|
|
133
|
+
margin: 0,
|
|
134
|
+
marginLeft: '8px',
|
|
135
|
+
width: '272px',
|
|
136
|
+
height: '40px',
|
|
137
|
+
display: 'flex',
|
|
138
|
+
alignItems: 'center',
|
|
139
|
+
...coreTextStyle
|
|
140
|
+
}}
|
|
141
|
+
>
|
|
142
|
+
Core
|
|
143
|
+
</Typography>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
{/* Lado derecho: Botón X */}
|
|
116
147
|
<button
|
|
117
148
|
onClick={toggleMobileMenu}
|
|
118
|
-
className="p-1 hover:bg-gray-100 rounded transition-colors"
|
|
149
|
+
className="p-1 hover:bg-gray-100 rounded transition-colors flex-shrink-0"
|
|
119
150
|
aria-label="Cerrar menú"
|
|
120
151
|
>
|
|
121
152
|
<Icon
|
|
@@ -167,10 +198,11 @@ const SidebarCoreMobile = ({
|
|
|
167
198
|
{itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
168
199
|
<span
|
|
169
200
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
170
|
-
|
|
201
|
+
rounded-full flex items-center justify-center
|
|
171
202
|
text-body-sm font-medium"
|
|
172
203
|
style={{
|
|
173
|
-
backgroundColor: '#6D3856',
|
|
204
|
+
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
205
|
+
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
174
206
|
borderRadius: '12px'
|
|
175
207
|
}}
|
|
176
208
|
>
|
|
@@ -234,10 +266,11 @@ const SidebarCoreMobile = ({
|
|
|
234
266
|
{((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
235
267
|
<span
|
|
236
268
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
237
|
-
|
|
269
|
+
rounded-full flex items-center justify-center
|
|
238
270
|
text-body-sm font-medium"
|
|
239
271
|
style={{
|
|
240
|
-
backgroundColor: '#6D3856',
|
|
272
|
+
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
273
|
+
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
241
274
|
borderRadius: '12px'
|
|
242
275
|
}}
|
|
243
276
|
>
|
|
@@ -324,6 +357,8 @@ export const SidebarCore = ({
|
|
|
324
357
|
itemBadges = {}, // Objeto con { itemId: number } para los badges
|
|
325
358
|
footerText, // Texto del footer: puede ser string "v1.0 | Powered by Nucleus" o objeto { version: "v1.0", poweredBy: "Powered by", brand: "Nucleus" }
|
|
326
359
|
footerCollapsedContent, // Contenido a mostrar en el footer cuando está colapsado (puede ser string, ReactNode, o objeto con icon y text)
|
|
360
|
+
coreContainerStyle, // Estilos personalizados para el contenedor de LogoHexa y "Core" (solo mobile)
|
|
361
|
+
coreTextStyle, // Estilos personalizados para el texto "Core" (solo mobile)
|
|
327
362
|
className = '',
|
|
328
363
|
...props
|
|
329
364
|
}) => {
|
|
@@ -386,6 +421,8 @@ export const SidebarCore = ({
|
|
|
386
421
|
itemBadges={itemBadges}
|
|
387
422
|
footerText={footerText}
|
|
388
423
|
footerCollapsedContent={footerCollapsedContent}
|
|
424
|
+
coreContainerStyle={coreContainerStyle}
|
|
425
|
+
coreTextStyle={coreTextStyle}
|
|
389
426
|
className={className}
|
|
390
427
|
{...props}
|
|
391
428
|
/>
|
|
@@ -525,10 +562,11 @@ export const SidebarCore = ({
|
|
|
525
562
|
{isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
526
563
|
<span
|
|
527
564
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
528
|
-
|
|
565
|
+
rounded-full flex items-center justify-center
|
|
529
566
|
text-body-sm font-medium absolute"
|
|
530
567
|
style={{
|
|
531
|
-
backgroundColor: '#6D3856',
|
|
568
|
+
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
569
|
+
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
532
570
|
borderRadius: '12px',
|
|
533
571
|
top: '-4px',
|
|
534
572
|
right: '-4px',
|
|
@@ -542,10 +580,11 @@ export const SidebarCore = ({
|
|
|
542
580
|
{!isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
543
581
|
<span
|
|
544
582
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
545
|
-
|
|
583
|
+
rounded-full flex items-center justify-center
|
|
546
584
|
text-body-sm font-medium"
|
|
547
585
|
style={{
|
|
548
|
-
backgroundColor: '#6D3856',
|
|
586
|
+
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
587
|
+
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
549
588
|
borderRadius: '12px'
|
|
550
589
|
}}
|
|
551
590
|
>
|
|
@@ -619,10 +658,11 @@ export const SidebarCore = ({
|
|
|
619
658
|
{isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
620
659
|
<span
|
|
621
660
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
622
|
-
|
|
661
|
+
rounded-full flex items-center justify-center
|
|
623
662
|
text-body-sm font-medium absolute"
|
|
624
663
|
style={{
|
|
625
|
-
backgroundColor: '#6D3856',
|
|
664
|
+
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
665
|
+
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
626
666
|
borderRadius: '12px',
|
|
627
667
|
top: '-4px',
|
|
628
668
|
right: '-4px',
|
|
@@ -636,10 +676,11 @@ export const SidebarCore = ({
|
|
|
636
676
|
{!isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
637
677
|
<span
|
|
638
678
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
639
|
-
|
|
679
|
+
rounded-full flex items-center justify-center
|
|
640
680
|
text-body-sm font-medium"
|
|
641
681
|
style={{
|
|
642
|
-
backgroundColor: '#6D3856',
|
|
682
|
+
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
683
|
+
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
643
684
|
borderRadius: '12px'
|
|
644
685
|
}}
|
|
645
686
|
>
|