anima-ds-nucleus 1.0.18 → 1.0.20

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/dist/anima-ds-nucleus.css +1 -1
  2. package/dist/anima-ds.cjs.js +38 -40
  3. package/dist/anima-ds.esm.js +935 -920
  4. package/package.json +1 -1
  5. package/src/components/Layout/Header/HeaderPoint.jsx +59 -24
  6. package/src/components/Layout/NavPoint/NavPoint.jsx +2 -2
  7. package/src/components/Layout/Sidebar/SidebarCore.jsx +197 -241
package/src/components/Layout/Sidebar/SidebarCore.jsx 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: '78px',
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={`px-4 ${isCollapsed ? 'mb-0' : 'mb-4'} ${desktopCollapsedInicioContainerClassName}`}
790
+ className={`${isCollapsed ? 'px-2' : 'px-4'} ${isCollapsed ? 'mb-0' : 'mb-4'} ${desktopCollapsedInicioContainerClassName}`}
791
791
  >
792
- <div
793
- className={isCollapsed ? desktopCollapsedItemWrapperClassName : ''}
794
- style={
795
- isCollapsed
796
- ? {
797
- ...collapsedItemWrapperDefaults,
798
- backgroundColor:
799
- activeItem === 'inicio' ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
800
- ...(desktopCollapsedItemWrapperStyle || {}),
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
- <div
837
- className={`flex items-center ${isCollapsed ? '' : 'min-w-0 flex-1'}`}
838
- style={
839
- isCollapsed
840
- ? {
841
- justifyContent: 'center',
842
- columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
843
- width: '100%',
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
- {isCollapsed ? (
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
- <Icon
898
- name="HomeIcon"
899
- variant="24-outline"
900
- size={desktopNavIconGlyphSize}
901
- className={`${isCollapsed ? '' : 'mr-3'} ${
902
- activeItem === 'inicio' ? 'color-white' : 'color-gray-700'
903
- }`}
904
- style={{
905
- width: `${desktopNavIconGlyphSize}px`,
906
- height: `${desktopNavIconGlyphSize}px`,
907
- opacity: 1,
908
- transform: 'rotate(0deg)',
909
- ...(desktopNavIconStyle || {}),
910
- }}
911
- />
912
- )}
913
- {!isCollapsed && (
914
- <Typography
915
- variant="body-lg"
916
- weight={activeItem === 'inicio' ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
917
- className={`${activeItem === 'inicio' ? 'color-white' : 'color-gray-700'} min-w-0`}
918
- style={{
919
- fontSize: desktopItemLabelFontSize,
920
- overflow: 'hidden',
921
- textOverflow: 'ellipsis',
922
- whiteSpace: 'nowrap',
923
- }}
924
- >
925
- Inicio
926
- </Typography>
927
- )}
928
- {isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
929
- <span
930
- className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
931
- style={{
932
- backgroundColor: activeItem === 'inicio' ? '#ffffff' : '#6D3856',
933
- color: activeItem === 'inicio' ? '#6D3856' : '#ffffff',
934
- width: desktopCollapsedBadgeWidth,
935
- height: desktopCollapsedBadgeHeight,
936
- paddingTop: '4px',
937
- paddingRight: '6px',
938
- paddingBottom: '4px',
939
- paddingLeft: '6px',
940
- borderRadius: '16px',
941
- opacity: 1,
942
- transform: 'rotate(0deg)',
943
- marginLeft: desktopCollapsedOverlapEnabled
944
- ? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
945
- : undefined,
946
- boxSizing: 'border-box',
947
- ...(desktopCollapsedBadgeStyle || {}),
948
- }}
949
- >
950
- {itemBadges['inicio'] > 9 ? '9+' : itemBadges['inicio']}
951
- </span>
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
- {!isCollapsed && itemBadges['inicio'] !== undefined && itemBadges['inicio'] > 0 && (
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
- </div>
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-4 mb-0 ${desktopCollapsedSeparatorContainerClassName}`}>
958
+ <div className={`px-2 mb-0 ${desktopCollapsedSeparatorContainerClassName}`}>
981
959
  <div
982
960
  className={desktopCollapsedSectionSeparatorWrapperClassName}
983
961
  style={{
984
- width: '78px',
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="px-4">
1034
- <div
1035
- className={isCollapsed ? desktopCollapsedItemWrapperClassName : ''}
1036
- style={
1037
- isCollapsed
1038
- ? {
1039
- ...collapsedItemWrapperDefaults,
1040
- backgroundColor:
1041
- activeItem === item.id ? desktopCollapsedItemActiveBackgroundColor : 'transparent',
1042
- ...(desktopCollapsedItemWrapperStyle || {}),
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
- <div
1081
- className={`flex items-center ${isCollapsed ? '' : 'min-w-0 flex-1'}`}
1082
- style={
1083
- isCollapsed
1084
- ? {
1085
- justifyContent: 'center',
1086
- columnGap: `${desktopCollapsedOverlapColumnGapPx}px`,
1087
- width: '100%',
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
- {isCollapsed ? (
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
- <Icon
1142
- name={item.icon}
1143
- variant="24-outline"
1144
- size={desktopNavIconGlyphSize}
1145
- className={`${isCollapsed ? '' : 'mr-3'} ${
1146
- activeItem === item.id ? 'color-white' : 'color-gray-700'
1147
- }`}
1148
- style={{
1149
- width: `${desktopNavIconGlyphSize}px`,
1150
- height: `${desktopNavIconGlyphSize}px`,
1151
- opacity: 1,
1152
- transform: 'rotate(0deg)',
1153
- ...(desktopNavIconStyle || {}),
1154
- }}
1155
- />
1156
- )}
1157
- {!isCollapsed && (
1158
- <Typography
1159
- variant="body-lg"
1160
- weight={activeItem === item.id ? desktopItemLabelWeightActive : desktopItemLabelWeightInactive}
1161
- className={`${activeItem === item.id ? 'color-white' : 'color-gray-700'} min-w-0`}
1162
- style={{
1163
- fontSize: desktopItemLabelFontSize,
1164
- overflow: 'hidden',
1165
- textOverflow: 'ellipsis',
1166
- whiteSpace: 'nowrap',
1167
- }}
1168
- >
1169
- {item.label}
1170
- </Typography>
1171
- )}
1172
- {isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
1173
- <span
1174
- className={`flex items-center justify-center text-body-sm font-medium ${desktopCollapsedBadgeClassName}`}
1175
- style={{
1176
- backgroundColor: activeItem === item.id ? '#ffffff' : '#6D3856',
1177
- color: activeItem === item.id ? '#6D3856' : '#ffffff',
1178
- width: desktopCollapsedBadgeWidth,
1179
- height: desktopCollapsedBadgeHeight,
1180
- paddingTop: '4px',
1181
- paddingRight: '6px',
1182
- paddingBottom: '4px',
1183
- paddingLeft: '6px',
1184
- borderRadius: '16px',
1185
- opacity: 1,
1186
- transform: 'rotate(0deg)',
1187
- marginLeft: desktopCollapsedOverlapEnabled
1188
- ? `${desktopCollapsedOverlapBadgeMarginLeftPx}px`
1189
- : undefined,
1190
- boxSizing: 'border-box',
1191
- ...(desktopCollapsedBadgeStyle || {}),
1192
- }}
1193
- >
1194
- {item.id === 'empleados' ? 2 : (itemBadges[item.id] > 9 ? '9+' : itemBadges[item.id])}
1195
- </span>
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
- {!isCollapsed && ((itemBadges[item.id] !== undefined && itemBadges[item.id] > 0) || (item.id === 'empleados' && 2)) && (
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
- </div>
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, paddingTop: '10px', paddingBottom: '10px' }}>
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: '78px',
1237
+ width: '100%',
1282
1238
  height: '32px',
1283
1239
  borderRadius: '8px',
1284
1240
  border: '1px solid #29474C',