anima-ds-nucleus 1.0.18 → 1.0.19
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 +28 -28
- package/dist/anima-ds.esm.js +880 -900
- package/package.json +1 -1
- package/src/components/Layout/Sidebar/SidebarCore.jsx +197 -241
package/package.json
CHANGED
|
@@ -533,7 +533,7 @@ export const SidebarCore = ({
|
|
|
533
533
|
const desktopNavIconSize = isCollapsed ? desktopCollapsedIconSize : desktopExpandedIconSize;
|
|
534
534
|
const desktopNavIconGlyphSize = isCollapsed ? desktopCollapsedIconInnerSize : desktopExpandedIconSize;
|
|
535
535
|
const collapsedItemWrapperDefaults = {
|
|
536
|
-
width: '
|
|
536
|
+
width: '100%',
|
|
537
537
|
height: '48px',
|
|
538
538
|
paddingTop: '8px',
|
|
539
539
|
paddingRight: '12px',
|
|
@@ -787,67 +787,36 @@ export const SidebarCore = ({
|
|
|
787
787
|
<div className={`flex-1 overflow-y-auto ${isCollapsed ? 'py-2' : 'py-4'}`} style={{ overflowX: 'hidden' }}>
|
|
788
788
|
{/* Item "Inicio" destacado */}
|
|
789
789
|
<div
|
|
790
|
-
className={
|
|
790
|
+
className={`${isCollapsed ? 'px-2' : 'px-4'} ${isCollapsed ? 'mb-0' : 'mb-4'} ${desktopCollapsedInicioContainerClassName}`}
|
|
791
791
|
>
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
}
|
|
802
|
-
: undefined
|
|
803
|
-
}
|
|
804
|
-
>
|
|
805
|
-
<button
|
|
806
|
-
onClick={() => onItemClick && onItemClick('inicio')}
|
|
807
|
-
className={`flex items-center ${
|
|
808
|
-
isCollapsed ? 'justify-center' : 'justify-between'
|
|
809
|
-
} ${isCollapsed ? '' : 'rounded-lg'} transition-all duration-200 ${
|
|
810
|
-
activeItem === 'inicio'
|
|
811
|
-
? ''
|
|
812
|
-
: 'color-gray-700 hover:bg-gray-100'
|
|
813
|
-
}`}
|
|
814
|
-
style={
|
|
815
|
-
isCollapsed
|
|
816
|
-
? {
|
|
817
|
-
width: '100%',
|
|
818
|
-
height: '100%',
|
|
819
|
-
backgroundColor: 'transparent',
|
|
820
|
-
borderRadius: '8px',
|
|
821
|
-
}
|
|
822
|
-
: {
|
|
823
|
-
width: '228px',
|
|
824
|
-
height: '40px',
|
|
825
|
-
paddingTop: '8px',
|
|
826
|
-
paddingRight: '12px',
|
|
827
|
-
paddingBottom: '8px',
|
|
828
|
-
paddingLeft: '12px',
|
|
829
|
-
gap: '12px',
|
|
830
|
-
borderRadius: '8px',
|
|
831
|
-
opacity: 1,
|
|
832
|
-
backgroundColor: activeItem === 'inicio' ? '#2D5C63' : 'transparent',
|
|
833
|
-
}
|
|
834
|
-
}
|
|
792
|
+
{isCollapsed ? (
|
|
793
|
+
<div
|
|
794
|
+
className={desktopCollapsedItemWrapperClassName}
|
|
795
|
+
style={{
|
|
796
|
+
...collapsedItemWrapperDefaults,
|
|
797
|
+
backgroundColor:
|
|
798
|
+
activeItem === 'inicio' ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
799
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
800
|
+
}}
|
|
835
801
|
>
|
|
836
|
-
<
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
: {
|
|
846
|
-
minWidth: 0,
|
|
847
|
-
}
|
|
848
|
-
}
|
|
802
|
+
<button
|
|
803
|
+
onClick={() => onItemClick && onItemClick('inicio')}
|
|
804
|
+
className="flex items-center justify-center transition-all duration-200"
|
|
805
|
+
style={{
|
|
806
|
+
width: '100%',
|
|
807
|
+
height: '100%',
|
|
808
|
+
backgroundColor: 'transparent',
|
|
809
|
+
borderRadius: '8px',
|
|
810
|
+
}}
|
|
849
811
|
>
|
|
850
|
-
|
|
812
|
+
<div
|
|
813
|
+
className="flex items-center"
|
|
814
|
+
style={{
|
|
815
|
+
justifyContent: 'center',
|
|
816
|
+
columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
|
|
817
|
+
width: '100%',
|
|
818
|
+
}}
|
|
819
|
+
>
|
|
851
820
|
<div
|
|
852
821
|
style={{
|
|
853
822
|
width: `${desktopNavIconSize}px`,
|
|
@@ -893,65 +862,74 @@ export const SidebarCore = ({
|
|
|
893
862
|
/>
|
|
894
863
|
</div>
|
|
895
864
|
</div>
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
865
|
+
{itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
866
|
+
<span
|
|
867
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
868
|
+
style={{
|
|
869
|
+
backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
|
|
870
|
+
color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
|
|
871
|
+
width: desktopCollapsedBadgeWidth,
|
|
872
|
+
height: desktopCollapsedBadgeHeight,
|
|
873
|
+
paddingTop: '4px',
|
|
874
|
+
paddingRight: '6px',
|
|
875
|
+
paddingBottom: '4px',
|
|
876
|
+
paddingLeft: '6px',
|
|
877
|
+
borderRadius: '16px',
|
|
878
|
+
opacity: 1,
|
|
879
|
+
transform: 'rotate(0deg)',
|
|
880
|
+
marginLeft: desktopCollapsedOverlapEnabled
|
|
881
|
+
? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
|
|
882
|
+
: undefined,
|
|
883
|
+
boxSizing: 'border-box',
|
|
884
|
+
...(desktopCollapsedBadgeStyle || {}),
|
|
885
|
+
}}
|
|
886
|
+
>
|
|
887
|
+
{itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
|
|
888
|
+
</span>
|
|
889
|
+
)}
|
|
890
|
+
</div>
|
|
891
|
+
</button>
|
|
892
|
+
</div>
|
|
893
|
+
) : (
|
|
894
|
+
<button
|
|
895
|
+
onClick={() => onItemClick && onItemClick('inicio')}
|
|
896
|
+
className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
|
|
897
|
+
activeItem === 'inicio'
|
|
898
|
+
? ''
|
|
899
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
900
|
+
}`}
|
|
901
|
+
style={
|
|
902
|
+
activeItem === 'inicio'
|
|
903
|
+
? { backgroundColor: '#2D5C63' }
|
|
904
|
+
: {}
|
|
905
|
+
}
|
|
906
|
+
>
|
|
907
|
+
<div className="flex items-center">
|
|
908
|
+
<Icon
|
|
909
|
+
name="HomeIcon"
|
|
910
|
+
variant="24-outline"
|
|
911
|
+
size={desktopNavIconGlyphSize}
|
|
912
|
+
className={`mr-3 ${
|
|
913
|
+
activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
|
|
914
|
+
}`}
|
|
915
|
+
/>
|
|
916
|
+
<Typography
|
|
917
|
+
variant="body-lg"
|
|
918
|
+
weight={activeItem === 'inicio' ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
919
|
+
className={`${
|
|
920
|
+
activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
|
|
921
|
+
} min-w-0`}
|
|
922
|
+
style={{
|
|
923
|
+
fontSize: desktopItemLabelFontSize,
|
|
924
|
+
overflow: 'hidden',
|
|
925
|
+
textOverflow: 'ellipsis',
|
|
926
|
+
whiteSpace: 'nowrap',
|
|
927
|
+
}}
|
|
928
|
+
>
|
|
929
|
+
Inicio
|
|
930
|
+
</Typography>
|
|
953
931
|
</div>
|
|
954
|
-
{
|
|
932
|
+
{itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
|
|
955
933
|
<span
|
|
956
934
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
957
935
|
rounded-full flex items-center justify-center
|
|
@@ -966,7 +944,7 @@ export const SidebarCore = ({
|
|
|
966
944
|
</span>
|
|
967
945
|
)}
|
|
968
946
|
</button>
|
|
969
|
-
|
|
947
|
+
)}
|
|
970
948
|
</div>
|
|
971
949
|
|
|
972
950
|
{/* Secciones */}
|
|
@@ -977,11 +955,11 @@ export const SidebarCore = ({
|
|
|
977
955
|
>
|
|
978
956
|
{/* Línea separadora cuando está colapsado - antes de cada sección */}
|
|
979
957
|
{isCollapsed && (
|
|
980
|
-
<div className={`px-
|
|
958
|
+
<div className={`px-2 mb-0 ${desktopCollapsedSeparatorContainerClassName}`}>
|
|
981
959
|
<div
|
|
982
960
|
className={desktopCollapsedSectionSeparatorWrapperClassName}
|
|
983
961
|
style={{
|
|
984
|
-
width: '
|
|
962
|
+
width: '100%',
|
|
985
963
|
height: '32px',
|
|
986
964
|
paddingTop: '16px',
|
|
987
965
|
paddingRight: '8px',
|
|
@@ -1030,68 +1008,37 @@ export const SidebarCore = ({
|
|
|
1030
1008
|
{/* Items de la sección */}
|
|
1031
1009
|
<div>
|
|
1032
1010
|
{section.items.map((item) => (
|
|
1033
|
-
<div key={item.id} className=
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
: undefined
|
|
1045
|
-
}
|
|
1046
|
-
title={isCollapsed ? item.label : ''}
|
|
1047
|
-
>
|
|
1048
|
-
<button
|
|
1049
|
-
onClick={() => onItemClick && onItemClick(item.id)}
|
|
1050
|
-
className={`flex items-center ${
|
|
1051
|
-
isCollapsed ? 'justify-center' : 'justify-between'
|
|
1052
|
-
} ${isCollapsed ? '' : 'rounded-lg'} transition-all duration-200 ${
|
|
1053
|
-
activeItem === item.id
|
|
1054
|
-
? ''
|
|
1055
|
-
: 'color-gray-700 hover:bg-gray-100'
|
|
1056
|
-
}`}
|
|
1057
|
-
style={
|
|
1058
|
-
isCollapsed
|
|
1059
|
-
? {
|
|
1060
|
-
width: '100%',
|
|
1061
|
-
height: '100%',
|
|
1062
|
-
backgroundColor: 'transparent',
|
|
1063
|
-
borderRadius: '8px',
|
|
1064
|
-
}
|
|
1065
|
-
: {
|
|
1066
|
-
width: '228px',
|
|
1067
|
-
height: '40px',
|
|
1068
|
-
paddingTop: '8px',
|
|
1069
|
-
paddingRight: '12px',
|
|
1070
|
-
paddingBottom: '8px',
|
|
1071
|
-
paddingLeft: '12px',
|
|
1072
|
-
gap: '12px',
|
|
1073
|
-
borderRadius: '8px',
|
|
1074
|
-
opacity: 1,
|
|
1075
|
-
backgroundColor: activeItem === item.id ? '#2D5C63' : 'transparent',
|
|
1076
|
-
}
|
|
1077
|
-
}
|
|
1078
|
-
title={isCollapsed ? item.label : ''}
|
|
1011
|
+
<div key={item.id} className={isCollapsed ? 'px-2' : 'px-4'}>
|
|
1012
|
+
{isCollapsed ? (
|
|
1013
|
+
<div
|
|
1014
|
+
className={desktopCollapsedItemWrapperClassName}
|
|
1015
|
+
style={{
|
|
1016
|
+
...collapsedItemWrapperDefaults,
|
|
1017
|
+
backgroundColor:
|
|
1018
|
+
activeItem === item.id ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
|
|
1019
|
+
...(desktopCollapsedItemWrapperStyle || {}),
|
|
1020
|
+
}}
|
|
1021
|
+
title={item.label}
|
|
1079
1022
|
>
|
|
1080
|
-
<
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
minWidth: 0,
|
|
1091
|
-
}
|
|
1092
|
-
}
|
|
1023
|
+
<button
|
|
1024
|
+
onClick={() => onItemClick && onItemClick(item.id)}
|
|
1025
|
+
className="flex items-center justify-center transition-all duration-200"
|
|
1026
|
+
style={{
|
|
1027
|
+
width: '100%',
|
|
1028
|
+
height: '100%',
|
|
1029
|
+
backgroundColor: 'transparent',
|
|
1030
|
+
borderRadius: '8px',
|
|
1031
|
+
}}
|
|
1032
|
+
title={item.label}
|
|
1093
1033
|
>
|
|
1094
|
-
|
|
1034
|
+
<div
|
|
1035
|
+
className="flex items-center"
|
|
1036
|
+
style={{
|
|
1037
|
+
justifyContent: 'center',
|
|
1038
|
+
columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
|
|
1039
|
+
width: '100%',
|
|
1040
|
+
}}
|
|
1041
|
+
>
|
|
1095
1042
|
<div
|
|
1096
1043
|
style={{
|
|
1097
1044
|
width: `${desktopNavIconSize}px`,
|
|
@@ -1137,65 +1084,74 @@ export const SidebarCore = ({
|
|
|
1137
1084
|
/>
|
|
1138
1085
|
</div>
|
|
1139
1086
|
</div>
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1087
|
+
{((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
1088
|
+
<span
|
|
1089
|
+
className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
|
|
1090
|
+
style={{
|
|
1091
|
+
backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
|
|
1092
|
+
color: activeItem === item.id ? '#6D3856' : '#ffffff',
|
|
1093
|
+
width: desktopCollapsedBadgeWidth,
|
|
1094
|
+
height: desktopCollapsedBadgeHeight,
|
|
1095
|
+
paddingTop: '4px',
|
|
1096
|
+
paddingRight: '6px',
|
|
1097
|
+
paddingBottom: '4px',
|
|
1098
|
+
paddingLeft: '6px',
|
|
1099
|
+
borderRadius: '16px',
|
|
1100
|
+
opacity: 1,
|
|
1101
|
+
transform: 'rotate(0deg)',
|
|
1102
|
+
marginLeft: desktopCollapsedOverlapEnabled
|
|
1103
|
+
? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
|
|
1104
|
+
: undefined,
|
|
1105
|
+
boxSizing: 'border-box',
|
|
1106
|
+
...(desktopCollapsedBadgeStyle || {}),
|
|
1107
|
+
}}
|
|
1108
|
+
>
|
|
1109
|
+
{item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
|
|
1110
|
+
</span>
|
|
1111
|
+
)}
|
|
1112
|
+
</div>
|
|
1113
|
+
</button>
|
|
1114
|
+
</div>
|
|
1115
|
+
) : (
|
|
1116
|
+
<button
|
|
1117
|
+
onClick={() => onItemClick && onItemClick(item.id)}
|
|
1118
|
+
className={`w-full flex items-center cursor-pointer px-4 justify-between py-2.5 rounded-lg transition-all duration-200 ${
|
|
1119
|
+
activeItem === item.id
|
|
1120
|
+
? ''
|
|
1121
|
+
: 'color-gray-700 hover:bg-gray-100'
|
|
1122
|
+
}`}
|
|
1123
|
+
style={
|
|
1124
|
+
activeItem === item.id
|
|
1125
|
+
? { backgroundColor: '#2D5C63' }
|
|
1126
|
+
: {}
|
|
1127
|
+
}
|
|
1128
|
+
>
|
|
1129
|
+
<div className="flex items-center">
|
|
1130
|
+
<Icon
|
|
1131
|
+
name={item.icon}
|
|
1132
|
+
variant="24-outline"
|
|
1133
|
+
size={desktopNavIconGlyphSize}
|
|
1134
|
+
className={`mr-3 ${
|
|
1135
|
+
activeItem === item.id ? 'color-white' : 'color-gray-700'
|
|
1136
|
+
}`}
|
|
1137
|
+
/>
|
|
1138
|
+
<Typography
|
|
1139
|
+
variant="body-lg"
|
|
1140
|
+
weight={activeItem === item.id ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
|
|
1141
|
+
className={`${
|
|
1142
|
+
activeItem === item.id ? 'color-white' : 'color-gray-700'
|
|
1143
|
+
} min-w-0`}
|
|
1144
|
+
style={{
|
|
1145
|
+
fontSize: desktopItemLabelFontSize,
|
|
1146
|
+
overflow: 'hidden',
|
|
1147
|
+
textOverflow: 'ellipsis',
|
|
1148
|
+
whiteSpace: 'nowrap',
|
|
1149
|
+
}}
|
|
1150
|
+
>
|
|
1151
|
+
{item.label}
|
|
1152
|
+
</Typography>
|
|
1197
1153
|
</div>
|
|
1198
|
-
{
|
|
1154
|
+
{((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
|
|
1199
1155
|
<span
|
|
1200
1156
|
className="px-2 py-0.5 min-w-[20px] h-5
|
|
1201
1157
|
rounded-full flex items-center justify-center
|
|
@@ -1210,7 +1166,7 @@ export const SidebarCore = ({
|
|
|
1210
1166
|
</span>
|
|
1211
1167
|
)}
|
|
1212
1168
|
</button>
|
|
1213
|
-
|
|
1169
|
+
)}
|
|
1214
1170
|
</div>
|
|
1215
1171
|
))}
|
|
1216
1172
|
</div>
|
|
@@ -1274,11 +1230,11 @@ export const SidebarCore = ({
|
|
|
1274
1230
|
|
|
1275
1231
|
{/* Footer cuando está colapsado */}
|
|
1276
1232
|
{effectiveFooterCollapsedContent && isCollapsed && (
|
|
1277
|
-
<div className="flex justify-center flex-shrink-0" style={{ zIndex: 10
|
|
1233
|
+
<div className="px-2 pt-2 pb-2 flex justify-center flex-shrink-0" style={{ zIndex: 10 }}>
|
|
1278
1234
|
<div
|
|
1279
1235
|
className={`bg-white flex items-center justify-center ${desktopCollapsedFooterContainerClassName}`}
|
|
1280
1236
|
style={{
|
|
1281
|
-
width: '
|
|
1237
|
+
width: '100%',
|
|
1282
1238
|
height: '32px',
|
|
1283
1239
|
borderRadius: '8px',
|
|
1284
1240
|
border: '1px solid #29474C',
|